HyperText Markup Language

Transcripción

1 HTML HyperText Markup Language Claudio Cubillos Figueroa Escuela de Ingeniería Informática Pontificia Universidad Católica de Valparaíso, Chile

2 Definición HyperText Markup Lenguage v No es un lenguaje de programación v Markup Lenguage o lenguaje de marcado utilizado para la descripción de páginas web v Corresponde a un set de etiquetas que incluyen información adicional sobre la estructura de un texto v Determina cómo se deben desplegar el texto y las imágenes de un documento web. 2

3 referencias v Estandar de la W3C v v W3Schools.com v 3

4 Ejemplo Código HTML <!DOCTYPE html> <html> <body> <h1>mi primer título</h1> Resultado visible en web Mi primer título Mi primer párrafo. <p>mi primer párrafo.<p> </body> </html> 4

5 Ejemplo <!DOCTYPE html> <html> <body> <h1>mi primer título</h1> <p>mi primer párrafo.<p> </body> </html> Código HTML v La declaración DOCTYPE define el tipo de documento v El texto entre las etiquetas <html> y </html> describe la página web v El texto entre las etiquetas <body> y </body> corresponde al contenido visible de la página web v El texto entre <h1> y </h1> es mostrado como título de primer nivel v El texto entre <p> y </p> es mostrado como párrafo

6 Etiquetas o Tags v Los marcadores de HTML son llamados generalmente etiquetas o tags v Los tags son palabras clave entre paréntesis angulares ( <> ): <html> v Éstos se escriben normalmente en pares: un tag de inicio y otro de fin: <b> y </b> v Los tags de inicio y fin se denomina también tags de apertura y de cierre

7 v Títulos Etiquetas o Tags Los títulos están definidos por las etiquetas desde <h1> hasta <h6>, de acuerdo al nivel del título v Párrafos Los párrafos están definidos por la etiqueta <p> v Links Los links están definidos por la etiqueta <a> v Imágenes Las imágenes están definidas por la etiqueta <img>

8 Ejemplo <!DOCTYPE html> <html> <body> <h1> Título de primer nivel </h1> <h2> Título de segundo nivel </h2> <p> Esto es un párrafo. <p> v El texto entre <h1> y </h1> es un título de primer nivel v El texto entre <h2> y </h2> es un título de primer nivel v El texto entre <p> y </p> es un párrafo <a href=" Este es un link</a> <img src= holamundo.jpg" width="104" height="142" /> </body> </html> v El texto entre <a> y </a> es es un link asociado a la página v El tag <img> está asociado a la imagen holamundo.jpg

9 Elementos de HTML v Un elemento se define como todo aquello desde un tag de apertura hasta un tag de cierre v Un elemento inicia con un tag de apertura v Un elemento termina con un tag de cierre v Aquello entre ambos tags se denomina contenido del elemento v Existen elementos con contenido vacío, éstos terminan en el tag de apertura v Muchos elementos de HTML puede tener atributos

10 Elementos de HTML Tag de apertura Contenido del elemento Tag de cierre <p> Esto es un párrafo </p> <a href="default.htm"> Esto es un link </a> <body> <p> Hola Mundo </p> </body> <br> v El contenido del elemento de un párrafo es un texto v El contenido del elemento <body> corresponde a otro elemento, un párrafo <p> v <br> es un elemento vacío. Corresponde a un término de línea

11 Atributos v Los atributos proveen información adicional respecto a un elemento v Se deben especificar en el tag de apertura v Los atributos se definen a través de un nombre y de un valor de la siguiente manera: nombre= valor <a href=" Este es un link</a> El atributo asociado a un link es la dirección del link referida en el atributo href

12 Etiquetas de formato v Existen diversas etiquetas para dar formato al texto en un documento html Tag Descripción <b> Define texto en negrita <big> Define texto grande <em> Define texto enfatizado <i> Define texto en cursiva <small> Define texto pequeño <strong> Define texto fuerte <sub> Define texto como subíndice <sup> Define texto como superíndice

13 Etiquetas de formato Código HTML <!DOCTYPE html> <html> <body> <p> <b> Texto en negrita </b> </p> <p> <big> Texto grande </big> </p> <p> <i> Texto en cursiva </i> </p> <p> <code> Texto como output de computador </code> </p> <p>esto es un <sub> subíndice </sub> y un <sup> superíndice </sup> </p> </body> </html> Resultado visible en web Texto en negrita Texto grande Texto en cursiva Texto como output de computador Esto es un subíndice y un superíndice

14 CSS v Cascading Style Sheets, hojas de estilo en cascada, son utilizadas para la presentación de documentos HTML. v Se creó para proporcionar una mejor forma de estilo a los elementos de HTML. v CSS puede se agregado a HTML de tres formas: En línea utilizando el atributo style en los elementos de HTML Interna utilizando el elemento <style> en la sección <head> Externa utilizando un archivo CSS externo

15 CSS: Estilo en línea Código HTML <!DOCTYPE html> <html> <body> <h1 style="fontfamily:verdana;">un título en estilo Verdana</h1> <p style="fontfamily:arial;color:red;font-size: 20px;">Un párrafo en Arial y color rojo.</p> </body> </html> Resultado visible en web Un título en estilo Verdana Un párrafo en Arial y color rojo.

16 CSS: Estilo en línea Código HTML <!DOCTYPE html> <html> <body> <h1 style="textalign:center;">título centrado</ h1> <p>esto es un párrafo.</p> Resultado visible en web Título centrado Esto es un párrafo. </body> </html>

17 Tablas v Las tablas se definen con el tag <table> v Las filas de la tabla se definen con el tag <tr> v Las celdas se definen con el tag <td> v <td> se refiere a table data y una celda puede almacenar texto, links, imágenes, otras tablas, etc. <table border="1"> <tr> <td>fila 1, celda 1</td> <td>fila 1, celda 2</td> </tr> <tr> <td>fila 2, celda 1</td> <td>fila 2, celda 2</td> </tr> </table> fila1, celda 1 fila 1, celda 2 Fila 2, celda 1 Fila 2, celda 2

18 Atributos de las Tablas v Si no se especifica el atributo border, la tabla se mostrará sin bordes v Para mostrar títulos en las columnas de las tablas, se debe especificar el tag <th>

19 Formularios y sus elementos v Se utiliza para enviar datos al servidor v Un formulario puede contener elementos de entrada como campos de texto, casillas de verificación, botones de radio, botones de envío y mucho más.

20 Formularios y sus elementos v El elemento radio es un elemento de selección excluyente v El elemento checkbox es un elemento de selección múltiple.

21 HTML Layouts usando <div>

22 Resumen Structure Tags Function Start Tag Attributes End Tag HTML File <html> none </html> File Header <head> none </head> File Title <title> none </title> Comments  Body <body> background="filename" bgcolor="color value" text="color value" link="color value" vlink="color value" </body> Division <div> align="right/left/center" style="property:value;" class="classname" </div> Span (inline) <span> style="property:value;" class="classname" </span>

23 Resumen Basic Text Tags Function Start Tag Attributes End Tag Line Break <br> clear="left/right/all" </br> or <br / > Paragraph <p> align="center/right" </p> Bold <b> none </b> Italic <i> none </i> Typewriter Text <tt> none </tt> Headline <h1-6> align="center/right" </h1-6> Font <font> face="name, name" size="+/-value/fixed size" color="color value" Note: the font tag is being phased out in favor of CSS styles. </font> Horizontal Rule Block Quote <hr> <blockqu ote> size="xx" width="xx/xx%" noshade </hr> or <hr / > none </ blockquote> Division <div> align="left/center/right" </div>

24 Resumen List Tags Function Start Tag Attributes End Tag Unordered List <ul> type="disc/circle/square" </ul> Ordered List <ol> type="i/a/1/a/i" start="value to start counting at" </ol> List Item <li> type=all ul and ol options </li> Definiton List <dl> none </dl> Definition List Item <dt> none </dt> Definition List Definition <dd> none </dd> Link Tags Function Start Tag Attributes End Tag Anchor Link <a> href="filename" target="windowname" </a> Anchor Mark <a> name="markname" </a>

25 Image Tags Resumen Function Start Tag Attributes End Tag Insert Image <img> src="filename" align="left/right" width="xxx" height="xxx" alt="text that desribes image" ISMAP USEMAP="#mapn ame" </img> Form Tags Function Start Tag Attributes End Tag Form <form> method=get/put action="programname" Input Field <input> name="variablename" type=text/password/ checkbox/radio/submit/ reset/image </form> </input> Selection List <select> name="variablename" size=xx multiple </select> Selection Option <option> none </option> Scrolling Text Field <textarea> name="variablename" rows=xx cols=xx </textarea>

26 Resumen Commonly-Used Special Characters Name Symbol HTML Equivalent ampersand & & cent sign copyright symbol or degree sign greater than > > less than < < non-breaking space registered trademark trademark 