HyperText Markup Language
Anuncio
HTML HyperText Markup Language Claudio Cubillos Figueroa Escuela de Ingeniería Informática Pontificia Universidad Católica de Valparaíso, Chile [email protected] 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 referencias v Estandar de la W3C v http://www.w3.org/standards/webdesign/htmlcss v W3Schools.com v http://www.w3schools.com/html/default.asp 3 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 Ejemplo Código HTML <!DOCTYPE html> <html> <body> <h1>Mi primer título</h1> <p>Mi primer párrafo.<p> </body> </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 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 Etiquetas o Tags v Títulos § 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> Ejemplo <!DOCTYPE html> <html> v El texto entre <h1> y </h1> es un título de primer nivel <body> <h1> Título de primer nivel </h1> v El texto entre <h2> y </h2> es un título de primer nivel <h2> Título de segundo nivel </h2> <p> Esto es un párrafo. <p> <a href="http://eii.ucv.cl"> Este es un link</a> <img src=“holamundo.jpg" width="104" height="142" /> </body> </html> v El texto entre <p> y </p> es un párrafo v El texto entre <a> y </a> es es un link asociado a la página http://eii.ucv.cl"> v El tag <img> está asociado a la imagen “holamundo.jpg” 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 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 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="http://eii.ucv.cl"> Este es un link</a> El atributo asociado a un link es la dirección del link referida en el atributo href 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 Etiquetas de formato Código HTML <!DOCTYPE html> <html> <body> <p> <b> Texto en negrita </b> </p> Resultado visible en web Texto en negrita <p> <big> Texto grande </big> </p> Texto grande <p> <i> Texto en cursiva </i> </p> Texto en cursiva <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> Texto como output de computador Esto es un subíndice y un superíndice 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 CSS: Estilo en línea Código HTML <!DOCTYPE html> Resultado visible en web <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> Un título en estilo Verdana Un párrafo en Arial y color rojo. CSS: Estilo en línea Código HTML <!DOCTYPE html> Resultado visible en web <html> <body> <h1 style="textalign:center;">Título centrado</ h1> <p>Esto es un párrafo.</p> </body> </html> Título centrado Esto es un párrafo. 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 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> 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. 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. HTML Layouts usando <div> 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 <!-- Your comments go between the start and end tags. Put a space between the -- and your 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> 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 <hr> size="XX" width="XX/XX%" noshade </hr> or <hr / > Block Quote <blockqu ote> none </ blockquote> Division <div> align="left/center/right" </div> 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> Resumen Image Tags 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" </form> Input Field <input> name="variablename" type=text/password/ checkbox/radio/submit/ reset/image </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> Resumen Commonly-Used Special Characters Name Symbol HTML Equivalent ampersand & &amp; cent sign ¢ &cent; copyright symbol © &copy; or &#169; degree sign ° &deg; greater than > &gt; less than < &lt; non-breaking space registered trademark trademark &nbsp; ® &#174; &#153;
