Download - U2 programacion cliente_html
![Page 1: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/1.jpg)
Programacion Web- Unidad 2: Programacion del lado del cliente -
HTML basico
Mario Garza [email protected]
Universidad Politecnica de VictoriaCd. Victoria, Tamaulipas, Mexico.
http://www.tamps.cinvestav.mx/~mgarza/UPV_WP/
Enero - Abril, 2014
Programacion Web - U2: Programacion del lado del cliente - HTML basico 1/55
![Page 2: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/2.jpg)
Contents I
1 Introduction
2 Tags and Elements
3 Basic structure
4 Validator
5 Headings and Paragraphs
6 Practica 1
7 Content separator, Comments
8 Basic Text Formatting
9 ListsProgramacion Web - U2: Programacion del lado del cliente - HTML basico 2/55
![Page 3: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/3.jpg)
Contents II
10 Entities, Reserved Characters
11 Images
12 Tables
13 Hyperlinks
14 Practica 2
15 CSS
16 Layout
17 FormsProgramacion Web - U2: Programacion del lado del cliente - HTML basico 3/55
![Page 4: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/4.jpg)
Referencias principales
La mayor parte del contenido de este material ha sido tomado (oadaptado) de las siguientes fuentes principales:
http://www.w3schools.com/
http://msdn.microsoft.com/es-es/ie/hh749019
Programacion Web - U2: Programacion del lado del cliente - HTML basico 4/55
![Page 5: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/5.jpg)
What is HTML?
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is a markup language
A markup language is a set of markup tags
The tags describe document content
HTML documents contain HTML tags and plain text
HTML documents are also called web pages
Web Browser
Reads HTML documents and display them as web pages.
Does not display the HTML tags, but uses the tags todetermine how the content is to be presented/displayed.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 5/55
![Page 6: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/6.jpg)
HTML Versions
There have been many versions of HTML:
Version Year
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013
Programacion Web - U2: Programacion del lado del cliente - HTML basico 6/55
![Page 7: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/7.jpg)
HTML5
Familia HTML5
Termino de marketing paraagrupar las nuevas tecnologıas dedesarrollo de aplicaciones web.
Especificacion HTML5
Etiquetas HTML tradicionales
no todas
nuevos atributos
Nuevos elementos de markup:
herramientas mas avanzadas
mejor experiencia para elusuario final
Programacion Web - U2: Programacion del lado del cliente - HTML basico 7/55
![Page 8: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/8.jpg)
Familia HTML5
Programacion Web - U2: Programacion del lado del cliente - HTML basico 8/55
![Page 9: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/9.jpg)
Especificacion HTML5
It was specially designed to deliver rich content without the needfor additional plugins.
New content-specific elements, like< article >,< footer >,< header >,< nav >,< section >
New form controls, like calendar, date, time, email, url,search
The < video > and < audio > elements for media playback
The < canvas > element for 2D drawing
Application: local data storage, file access, local SQLdatabase, application cache
Programacion Web - U2: Programacion del lado del cliente - HTML basico 9/55
![Page 10: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/10.jpg)
Removed Elements
HTML 4.01 elements that have been removed from HTML5:
< acronym >
< applet >
< basefont >
< big >
< center >
< dir >
< font >
< frame >
< frameset >
< noframes >
< strike >
< tt >
Programacion Web - U2: Programacion del lado del cliente - HTML basico 10/55
![Page 11: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/11.jpg)
DOCTYPES and elements
http://www.w3schools.com/tags/ref_html_dtd.asp
Programacion Web - U2: Programacion del lado del cliente - HTML basico 11/55
![Page 12: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/12.jpg)
Browser Support for HTML5
HTML5 is a work in progress.
All major browsers support the new HTML5 elements andAPIs, and continue to add new HTML5 features to theirlatest versions.
The HTML5 working group includes AOL, Apple, Google,IBM, Microsoft, Mozilla, Nokia, Opera, and hundreds of othervendors.
How well does your browser support html5?http://html5test.com/
Programacion Web - U2: Programacion del lado del cliente - HTML basico 12/55
![Page 13: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/13.jpg)
HTML Tags
HTML markup tags are usually called HTML tags.
HTML tags are keywords surrounded by angle brackets <...>
HTML tags normally come in pairs:
The opening (or start) tag: <tagname>
The closing (or end tag): </tagname>
<tagname> content </tagname>
Programacion Web - U2: Programacion del lado del cliente - HTML basico 13/55
![Page 14: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/14.jpg)
HTML Elements
An HTML element is everything between the start tag and the endtag, including the tags.
Element content is everything between the start and the end tags.
<p> This is a paragraph. </p>
Some HTML elements have empty content.
Empty elements do not requiere a closing tag (XHTML?).
<br>
Programacion Web - U2: Programacion del lado del cliente - HTML basico 14/55
![Page 15: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/15.jpg)
HTML Elements
An HTML element is everything between the start tag and the endtag, including the tags.
Element content is everything between the start and the end tags.
<p> This is a paragraph. </p>
Some HTML elements have empty content.
Empty elements do not requiere a closing tag (XHTML?).
<br>
Programacion Web - U2: Programacion del lado del cliente - HTML basico 14/55
![Page 16: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/16.jpg)
HTML Elements
Most HTML elements can have attributes.
Attributes provide additional information about an element.
Attributes are always specified in the start tag.
Attributes come in name/value pairs like: name=“value”
Programacion Web - U2: Programacion del lado del cliente - HTML basico 15/55
![Page 17: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/17.jpg)
HTML Reference
http://www.w3schools.com/tags/
Programacion Web - U2: Programacion del lado del cliente - HTML basico 16/55
![Page 18: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/18.jpg)
Nested HTML Elements
Most HTML elements can be nested.
HTML documents consist of nested HTML elements.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 17/55
![Page 19: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/19.jpg)
Estructura basica de un documento HTML
<!DOCTYPE html><html>
<head>
<meta charset=”ISO−8859−1”>
< t i t l e>T i t l e o f t he document</ t i t l e>
</head>
<body>Conten ido d e l documento . . . . . .
</body>
</html>
Programacion Web - U2: Programacion del lado del cliente - HTML basico 18/55
![Page 20: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/20.jpg)
Estructura basica de un documento HTML
¿Cuantos elementos HTML hay en el codigo anterior?
Programacion Web - U2: Programacion del lado del cliente - HTML basico 19/55
![Page 21: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/21.jpg)
Estructura basica de un documento HTML
DOCTYPE. Indica al navegador que debe interpretar todo elcodigo de acuerdo con un conjunto de reglas especıfico.
HTML. Este elemento contiene a los demas y le indica alnavegador que contiene un documento HTML.
HEAD. En esta seccion aparece informacion sobre la pagina,pero no se muestra en la pantalla.
TITLE. Cualquier contenido dentro de las etiquetas “title” semuestra en la parte superior (barra de tıtulo) del navegador.
BODY. Todo el contenido dentro del body se muestra en laventana principal del navegador.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 20/55
![Page 22: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/22.jpg)
Markup Validation Service
http://validator.w3.org/
Programacion Web - U2: Programacion del lado del cliente - HTML basico 21/55
![Page 23: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/23.jpg)
Use Lowercase Tags
HTML tags are not case sensitive.
Attribute names and attribute values are also case-insensitive.
<P> means the same as <p>.
Many web sites use uppercase HTML tags.
W3Schools use lowercase tags because the World Wide WebConsortium (W3C) recommends lowercase in HTML 4, anddemands lowercase tags in XHTML.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 22/55
![Page 24: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/24.jpg)
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> This is a heading </h1>
<h2> This is a heading </h2>
<h3> This is a heading </h3>
<h4> This is a heading </h4>
<h5> This is a heading </h5>
<h6> This is a heading </h6>
Programacion Web - U2: Programacion del lado del cliente - HTML basico 23/55
![Page 25: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/25.jpg)
HTML Paragraphs and Line Breaks
Without paragraph and line break tags...
CODE:
F i r s t p a r a g r a p h .
Second p a r a g r a p h .
Th i rd p a r a g r a p h .
Result:
First paragraph. Secondparagraph. Third paragraph.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 24/55
![Page 26: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/26.jpg)
HTML Paragraphs and Line Breaks
Using line break tags: <br>
CODE:
F i r s t p a r a g r a p h .<br>Second p a r a g r a p h .<br><br>Thi rd p a r a g r a p h .
Result:
First paragraph.Second paragraph.
Third paragraph.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 25/55
![Page 27: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/27.jpg)
HTML Paragraphs and Line Breaks
Using paragraph tags: <p>
CODE:
<p>F i r s t p a r a g r a p h .</p><p>Second p a r a g r a p h .</p><p>Thi rd p a r a g r a p h .</p>
Result:
First paragraph.
Second paragraph.
Third paragraph.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 26/55
![Page 28: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/28.jpg)
Practica 1 - Formato basico de parrafos y tıtulos
Descargar el archivo “Texto Practica1.txt” disponible en lapagina del curso.
[OPCIONAL] Descargar tambien estas diapositivas comomaterial de apoyo.
Construya una pagina web que muestre el textoproporcionado.
Defina encabezados, parrafos y saltos de linea dondeconsidere apropiado.
Validar documento usando el Markup Validation Service.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 27/55
![Page 29: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/29.jpg)
Content separator / horizontal line <hr>
The <hr> tag defines a thematic break in an HTML page.
Draws a horizontal line to separate content.
CODE:
<h1>T i t l e 1</h1><p>F i r s t p a r a g r a p h .</p>
<hr>
<h1>T i t l e 2</h1><p>Second p a r a g r a p h .</p>
Result:
Title 1
First paragraph.
Title 2
Second paragraph.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 28/55
![Page 30: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/30.jpg)
HTML Comments
Ignored by the browser and are not displayed.
Make HTML code more readable and understandable.
<!–– This is a comment ––>
Programacion Web - U2: Programacion del lado del cliente - HTML basico 29/55
![Page 31: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/31.jpg)
Text Formatting
<b> bold </b> vs <strong> strong </strong>
bold vs strong
<i> italic </i> vs <em> emphasized </em>
italic vs emphasized
Programacion Web - U2: Programacion del lado del cliente - HTML basico 30/55
![Page 32: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/32.jpg)
Text Formatting
<b> bold </b> vs <strong> strong </strong>
bold vs strong
<i> italic </i> vs <em> emphasized </em>
italic vs emphasized
Programacion Web - U2: Programacion del lado del cliente - HTML basico 30/55
![Page 33: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/33.jpg)
Text Formatting
This text is <small> smaller </small>
This text is smaller
This text is <sub> subscript </sub>
This text is subscript
This text is <sup> superscript </sup>
This text is superscript
Programacion Web - U2: Programacion del lado del cliente - HTML basico 31/55
![Page 34: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/34.jpg)
Text Formatting
This text is <small> smaller </small>
This text is smaller
This text is <sub> subscript </sub>
This text is subscript
This text is <sup> superscript </sup>
This text is superscript
Programacion Web - U2: Programacion del lado del cliente - HTML basico 31/55
![Page 35: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/35.jpg)
Text Formatting
This text is <small> smaller </small>
This text is smaller
This text is <sub> subscript </sub>
This text is subscript
This text is <sup> superscript </sup>
This text is superscript
Programacion Web - U2: Programacion del lado del cliente - HTML basico 31/55
![Page 36: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/36.jpg)
Text Formatting
This is <ins> inserted text </ins>
This is inserted text
This is <del> deleted text </del>
This is deleted text
This is <mark> marked text </mark>
This is marked text
Programacion Web - U2: Programacion del lado del cliente - HTML basico 32/55
![Page 37: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/37.jpg)
Text Formatting
This is <ins> inserted text </ins>
This is inserted text
This is <del> deleted text </del>
This is deleted text
This is <mark> marked text </mark>
This is marked text
Programacion Web - U2: Programacion del lado del cliente - HTML basico 32/55
![Page 38: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/38.jpg)
Text Formatting
This is <ins> inserted text </ins>
This is inserted text
This is <del> deleted text </del>
This is deleted text
This is <mark> marked text </mark>
This is marked text
Programacion Web - U2: Programacion del lado del cliente - HTML basico 32/55
![Page 39: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/39.jpg)
HTML Lists - Ordered list
An ordered list is created using the <ol> tag.
Each list item is defined with the <li> tag.
The list items are marked with numbers.
CODE:
<h4>An Ordered L i s t :</h4>
<o l>< l i> C o f f e e </ l i>< l i> Tea </ l i>< l i> Milk </ l i>
</ o l>
Result:
An Ordered List:
1 Coffee
2 Tea
3 Milk
Programacion Web - U2: Programacion del lado del cliente - HTML basico 33/55
![Page 40: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/40.jpg)
HTML Lists - Unordered list
An unordered list is created using the <ul> tag.
Each list item is defined with the <li> tag.
The list items are marked with bullets.
CODE:
<h4>An Unordered L i s t :</h4>
<u l>< l i> C o f f e e </ l i>< l i> Tea </ l i>< l i> Milk </ l i>
</ u l>
Result:
An Unordered List:
Coffee
Tea
Milk
Programacion Web - U2: Programacion del lado del cliente - HTML basico 34/55
![Page 41: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/41.jpg)
Reserved Characters in HTML
Some characters are reserved in HTML and XHTML.
Entities are used to implement reserved characters or to expresscharacters that cannot easily be entered with the keyboard.
Character Entity Number Entity Name Description
" " " quotation mark
' ' ' apostrophe
& & & ampersand
< < < less-than
> > > greater-than
http://www.w3schools.com/tags/ref_entities.asp
Programacion Web - U2: Programacion del lado del cliente - HTML basico 35/55
![Page 42: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/42.jpg)
HTML Images
Images are defined with the <img> tag.
<img src=“html5.jpg” alt=“logo” width=“42” height=“42” >
Required attributes:
src. Source (URL) of the imageyou want to display.
alt. Alternate text for an image.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 36/55
![Page 43: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/43.jpg)
HTML Tables
Tables are defined with the <table> tag.
A table is divided into rows, defined using the <tr> tag.
Each row is divided into data cells, defined with the <td> tag.
A <td> element can contain text, links, images, lists, forms, othertables, etc.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 37/55
![Page 44: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/44.jpg)
HTML Tables
CODE:
<tab le border=”1”><t r>
<td>row 1 , c e l l 1</ td><td>row 1 , c e l l 2</ td>
</ t r><t r>
<td>row 2 , c e l l 1</ td><td>row 2 , c e l l 2</ td>
</ t r></ tab le>
Result:
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
In HTML5, the value of the border attribute can be ”1” or ””.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 38/55
![Page 45: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/45.jpg)
HTML Tables
CODE:
<tab le border=”1”><t r>
<th>Header 1</ th><th>Header 2</ th>
</ t r><t r>
<td>row 1 , c e l l 1</ td><td>row 1 , c e l l 2</ td>
</ t r><t r>
<td>row 2 , c e l l 1</ td><td>row 2 , c e l l 2</ td>
</ t r></ tab le>
Header information isdefined with the <th>tag.
Result:
Header 1 Header 2row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
Programacion Web - U2: Programacion del lado del cliente - HTML basico 39/55
![Page 46: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/46.jpg)
HTML Tables - colspan and rowspan attributes
CODE:
<tab le border=”1”><t r><th colspan=”2”>Header</ th>
</ t r><t r>
<td>row 1 , c e l l 1</ td><td rowspan=”2”> c e l l 2</ td>
</ t r><t r>
<td>row 2 , c e l l 1</ td></ t r>
</ tab le>
Result:
Headerrow 1, cell 1
cell 2row 2, cell 1
Programacion Web - U2: Programacion del lado del cliente - HTML basico 40/55
![Page 47: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/47.jpg)
HTML Tables - <thead>, <tbody> and <tfoot>
<t a b l e b o r d e r=”1”><thead>
<t r><th>Month</ th><th>S a v i n g s</ th>
</ t r></ thead><t f o o t>
<t r><td>Sum</ td><td>$180</ td>
</ t r></ t f o o t><tbody>
<t r><td>January</ td><td>$100</ td>
</ t r><t r>
<td>F e b r u a r y</ td><td>$80</ td>
</ t r></ tbody>
</ t a b l e>
Use <thead>,<tbody> and<tfoot> to specifyeach part of a table.
Result:
Month SavingsJanuary $100
February $80
Sum $180
Programacion Web - U2: Programacion del lado del cliente - HTML basico 41/55
![Page 48: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/48.jpg)
HTML Hyperlinks
A hyperlink (or link) is a word, group of words, or image that youcan click on to jump to another document.
The HTML <a> element defines a hyperlink.
<a href=“http://www.w3schools.com/”> Visit W3Schools </a>
The href attribute specifies the destination of a link.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 42/55
![Page 49: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/49.jpg)
HTML Hyperlinks - The target Attribute
The target attribute specifies where to open the linked document.
<a href=“...” target=“ blank”> Visit W3Schools </a>
The example above will open the linked document in a new browserwindow or a new tab.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 43/55
![Page 50: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/50.jpg)
HTML Anchors
The id attribute of the <a> element can be used to create abookmark inside an HTML document.
<a id=“tips”> Useful Tips Section </a>
Create a link inside the same document:
<a href=“#tips”> Visit the Useful Tips Section </a>
Or, create a link from another page:
<a href=“http://www.X.com/html links.htm#tips” > Visit... </a>
Programacion Web - U2: Programacion del lado del cliente - HTML basico 44/55
![Page 51: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/51.jpg)
HTML Anchors
The id attribute of the <a> element can be used to create abookmark inside an HTML document.
<a id=“tips”> Useful Tips Section </a>
Create a link inside the same document:
<a href=“#tips”> Visit the Useful Tips Section </a>
Or, create a link from another page:
<a href=“http://www.X.com/html links.htm#tips” > Visit... </a>
Programacion Web - U2: Programacion del lado del cliente - HTML basico 44/55
![Page 52: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/52.jpg)
HTML Anchors
The id attribute of the <a> element can be used to create abookmark inside an HTML document.
<a id=“tips”> Useful Tips Section </a>
Create a link inside the same document:
<a href=“#tips”> Visit the Useful Tips Section </a>
Or, create a link from another page:
<a href=“http://www.X.com/html links.htm#tips” > Visit... </a>
Programacion Web - U2: Programacion del lado del cliente - HTML basico 44/55
![Page 53: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/53.jpg)
Practica 2
Crear una pagina web con el contenido de esta presentacion.
Incluir desde la diapositiva 26, hasta la 42.
Insertar un separador <hr> despues de cada SECCION.
Crear un menu principal en la parte inicial de la pagina, utilizandolistas. Anidar listas en caso de subsecciones.
Definir puntos de anclaje (anchors) en cada uno de los encabezadosde las secciones y subsecciones (serviran para crear el menu).
Agregar un enlace al final de cada seccion y subseccion que permitadirigirnos al menu principal.
Validar documento usando el Markup Validation Service.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 45/55
![Page 54: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/54.jpg)
Styling HTML with CSS
CSS can be added to HTML in the following ways:
1 Inline: using the style attribute in HTML elements
2 Internal: using the <style> element in the <head>
3 External: using an external CSS file
The preferred way to add CSS to HTML, is to put CSS syntax inseparate CSS files.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 46/55
![Page 55: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/55.jpg)
HTML Colors
CODE:
<body s t y l e=” background−c o l o r : y e l l o w ; ”>
<h2 s t y l e=” background−c o l o r : r e d ; ”>This i s a h e a d i n g
</h2>
<p s t y l e=” background−c o l o r : g r e e n ; c o l o r : w h i t e ; ”>This i s a p a r a g r a p h .
</p>
</body>
Result:
Programacion Web - U2: Programacion del lado del cliente - HTML basico 47/55
![Page 56: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/56.jpg)
HTML Colors
<p s t y l e=” background−c o l o r :#FFFF00”>C o l o r s e t by u s i n g hex v a l u e
</p>
<p s t y l e=” background−c o l o r : rgb ( 2 5 5 , 2 5 5 , 0 ) ”>C o l o r s e t by u s i n g rgb v a l u e
</p>
<p s t y l e=” background−c o l o r : y e l l o w ”>C o l o r s e t by u s i n g c o l o r name
</p>
The 17 standard colors are: aqua, black, blue, fuchsia, gray, green, lime,maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 48/55
![Page 57: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/57.jpg)
HTML Layout - <table>
Simple layout using <table>
Programacion Web - U2: Programacion del lado del cliente - HTML basico 49/55
![Page 58: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/58.jpg)
HTML <div> Element
1 The <div> element has no special meaning.
2 Can be used as a container for grouping other HTML elements.
3 A common use of <div> is for document layout
<div> replaces the “old way” of defining layout using tables.
Using <table> elements for layout is not correct.
The purpose of the <table> element is to display tabular data.
Programacion Web - U2: Programacion del lado del cliente - HTML basico 50/55
![Page 59: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/59.jpg)
HTML Layout - <div>
Simple layout using <div>
Programacion Web - U2: Programacion del lado del cliente - HTML basico 51/55
![Page 60: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/60.jpg)
HTML Semantic Elements
Programacion Web - U2: Programacion del lado del cliente - HTML basico 52/55
![Page 61: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/61.jpg)
HTML Layout - Semantic Elements
Simple layout using semantic elements
Programacion Web - U2: Programacion del lado del cliente - HTML basico 53/55
![Page 62: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/62.jpg)
HTML Forms
HTML forms are used to pass data to a server.
The <form> element is used to create an HTML form.
CODE:
<form>
i n p u t e l e m e n t s . . .
</ form>
Programacion Web - U2: Programacion del lado del cliente - HTML basico 54/55
![Page 63: U2 programacion cliente_html](https://reader033.vdocuments.co/reader033/viewer/2022051109/54785eb2b4af9f76108b4c64/html5/thumbnails/63.jpg)
HTML Forms
The <form> element can contain:
<input> - input field to enter data
<textarea> - multi-line text input
<button> - clickable button
<select> - drop-down list
<fieldset> - groups (draws a box around) related elements
<label> - defines a label for an input element
http://www.tamps.cinvestav.mx/~mgarza/UPV_WP/
Programacion Web - U2: Programacion del lado del cliente - HTML basico 55/55