Transparencias. Tema 3: Introducción a HTML estático
Anuncio
escuela técnica superior de ingeniería informática Introducción a HTML Estático Departamento de Lenguajes y Sistemas Informáticos Grupo de Ingeniería del Software Octubre 2004 Introducción a HTML Estático • Concepto de lenguaje de marcado Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos – Los lenguajes de marcado añaden información a un texto mediante marcas. Esto es un <m info="x">texto</m> info="x">texto</m> con una marca. 1. Lenguajes de marcado 2. El concepto de hipertexto 3. Estructura de una página web – SGML: estándar ISO de 1995 (LinuxDoc). 4. Marcos (frames) 5. Marcas estructurales – HTML: simplificación de SGML. 6. Marcas de formateo lógico – XML: lenguaje de marcado estricto que permite definir nuevas marcas. 7. Marcas de formateo físico – XHTML: HTML siguiendo las reglas de marcado XML. 8. Caracteres especiales 9. Imágenes y mapas 10. Listas 11. Tablas • Algunos lenguajes de marcado • Contenido y apariencia – El objetivo de las últimas versiones de HTML/XHTML es la separación de contenido y apariencia para facilitar la labor de los agentes software (web semántica). – El contenido se expresa mediante HTML/XHTML y la apariencia mediante hojas de estilo CSS. Sevilla, octubre de 2004 Grupo de Ingeniería del Software 1 1 Introducción a HTML Estático • Reglas de marcado estricto Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos 1. Lenguajes de marcado 2. El concepto de hipertexto 3. Estructura de una página web 4. Marcos (frames) 5. Marcas estructurales 6. Marcas de formateo lógico 7. Marcas de formateo físico 8. Caracteres especiales 9. Imágenes y mapas 10. Listas 11. Tablas 1. Todo el documento debe estar dentro de una única marca raíz. 2. Las marcas delimitan texto y/o otras marcas, formando una jerarquía. 3. Las marcas no pueden solaparse. 4. Todas las marcas deben tener etiquetas de apertura y de cierre: <m>texto</m> </m> <m> (<m></m> <m></m> ≡ <m/>). <m/> 5. Los nombres de las marcas son sensibles a mayúsculas y minúsculas (<m> <m> ≠ <M>). <M> 6. Las marcas pueden llevar atributos en la etiqueta de apertura: <m at1="v1" at2="v2">texto</m> </m> at2="v2"> 7. Los valores de los atributos deben ir entre comillas. 8. El orden de los atributos es irrelevante. 9. Los comentarios se escriben entre <!-- y -->: <!– <!– esto es un comentario --> --> Sevilla, octubre de 2004 Grupo de Ingeniería del Software 2 Introducción a HTML Estático • Enlaces entre documentos Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos – Un sistema de hipertexto añade una nueva dimensión al texto al incluir enlaces que permiten saltar (navegar navegar) desde un punto de un texto a otro. 1. Lenguajes de marcado 2. El concepto de hipertexto <html> <html> 3. Estructura de una página web <a <a href="B.html">B</a> href="B.html">B</a> 4. Marcos (frames) 5. Marcas estructurales 6. Marcas de formateo lógico 7. Marcas de formateo físico 8. Caracteres especiales 9. Imágenes y mapas 10. Listas 11. Tablas </html> </html> <html> <html> A.html <a <a href="C.html#X">C.X</a> href="C.html#X">C.X</a> </html> </html> <html> <html> <a <a name="X"/> name="X"/> B.html </html> </html> C.html Sevilla, octubre de 2004 Grupo de Ingeniería del Software 3 2 Introducción a HTML Estático • Marca de ancla (destinos de salto) Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos 1. Lenguajes de marcado 2. El concepto de hipertexto 3. Estructura de una página web 4. Marcos (frames) 5. Marcas estructurales 6. Marcas de formateo lógico 7. Marcas de formateo físico 8. Caracteres especiales 9. Imágenes y mapas 10. Listas 11. Tablas – <a a name="nombre del ancla"/> name – <m m id="nombre del ancla">…</m m> id • Donde m es cualquier marca de HTML/XHTML • Marca de enlace – <a a href="URL">texto enlace</a a> href • Salta al comienzo del documento de la URL. – <a a href="URL#ancla">texto enlace</a a> href • Salta al punto del documento de la URL donde está definida el ancla con el nombre especificado. – <a a href="#ancla">texto enlace</a a> href • Salta al punto del documento actual (el mismo en el que está definido el enlace) donde está definida el ancla con el nombre especificado. El Elatributo atributotitle title genera generaun untooltip tooltipalal dejar dejarelelcursor cursorsobre sobre elelenlace enlace Sevilla, octubre de 2004 Grupo de Ingeniería del Software 4 Introducción a HTML Estático • Etiquetas de la estructura básica Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos 1. Lenguajes de marcado 2. El concepto de hipertexto 3. Estructura de una página web 4. Marcos (frames) 5. Marcas estructurales 6. Marcas de formateo lógico 7. Marcas de formateo físico 8. Caracteres especiales 9. Imágenes y mapas 10. Listas 11. Tablas <<html> html> html> <<head> head> head> <<title>Título title> </title title> > title>Título del deldocumento</ documento</title> <!--- otra > <! -<!-otrainformación informaciónde decabecera cabecera--> --> </head head> > </ </head> <<body> body> body> <!--- contenido > <! -<!-contenidodel deldocumento documento--> --> </body body> > </ </body> </html html> > </ </html> – <html> html>: marca raíz del documento. – <head> head>: cabecera del documento, aparte del título, puede contener otra información sobre el documento. – <title> title>: título del documento. – <body> body>: cuerpo del documento. Sevilla, octubre de 2004 Grupo de Ingeniería del Software 5 3 Introducción a HTML Estático • Etiquetas de marcos Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos 1. Lenguajes de marcado 2. El concepto de hipertexto 3. Estructura de una página web 4. Marcos (frames) 5. Marcas estructurales 6. Marcas de formateo lógico 7. Marcas de formateo físico 8. Caracteres especiales 9. Imágenes y mapas 10. Listas 11. Tablas <<html> html> html> <<head> head> head> <<title>Título title> </title title> > title>Título del deldocumento</ documento</title> </head head> > </ </head> <<frameset frameset rows > rows=="n|p%|*" "n|p%|*"cols cols="n|p%|*"> ="n|p%|*"> <<frame frame src src=="URL" "URL" name = name ="nombre "nombredel delmarco" marco" frameborder frameborder=="0|1|no|yes" "0|1|no|yes" noresize noresize=="noresize" "noresize" scrolling scrolling=="yes|no|auto" "yes|no|auto" /> /> <!--- otros > <! -<!-otrosframes/frameset frames/frameset--> --> <<noframes>Texto noframes> aviso</ </noframes noframes> > noframes>Texto de de aviso</noframes> </frameset frameset> > </ </frameset> </html html> > </ </html> Sevilla, octubre de 2004 Grupo de Ingeniería del Software 6 Introducción a HTML Estático • Etiquetas de marcos Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos 1. Lenguajes de marcado 2. El concepto de hipertexto 3. Estructura de una página web 4. Marcos (frames) 5. Marcas estructurales 6. Marcas de formateo lógico 7. Marcas de formateo físico 8. Caracteres especiales 9. Imágenes y mapas 10. Listas 11. Tablas Sevilla, octubre de 2004 Grupo de Ingeniería del Software – La etiqueta <frameset> frameset> sustituye a <body> body>. – Los atributos rows y cols de <frameset> frameset> determinan las filas y columnas mediante su tamaño en pixels, un porcentaje de la ventana del navegador (%) o el resto de la ventana (*). Si se usa más de un asterisco indica partes iguales. – Los documentos indicados en los atributos src de las etiquetas <frame> frame> se van asignando de izquierda a derecha y de arriba abajo. – Las marcas <frameset> frameset> pueden anidarse dentro de otras marcas <frameset> frameset> o en otro documento incluido en una etiqueta <frame> frame>. – Aquellos navegadores que no soportan marcos muestran el texto de la etiqueta <noframes>. noframes>. 7 4 Introducción a HTML Estático • Ejemplo (apariencia) Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos 1. Lenguajes de marcado 2. El concepto de hipertexto 3. Estructura de una página web 4. Marcos (frames) 5. Marcas estructurales 6. Marcas de formateo lógico 7. Marcas de formateo físico 8. Caracteres especiales 9. Imágenes y mapas 10. Listas 11. Tablas Sevilla, octubre de 2004 Grupo de Ingeniería del Software 8 Introducción a HTML Estático • Ejemplo (código) Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos 1. Lenguajes de marcado 2. El concepto de hipertexto 3. Estructura de una página web 4. Marcos (frames) 5. Marcas estructurales 6. Marcas de formateo lógico 7. Marcas de formateo físico 8. Caracteres especiales 9. Imágenes y mapas 10. Listas 11. Tablas <<html> html> html> <<head> head> head> <<title>Ejemplo title> </title title> > title>Ejemplo de demarcos</ marcos</title> </head head> > </ </head> <<frameset frameset cols > cols="20%,*"> ="20%,*"> <<frame frame src = "menu.html" src = "menu.html"/> /> <<frameset frameset rows > rows="15%,*"> ="15%,*"> <<frame frame src src=="titulo.html" "titulo.html"/> /> <<frame frame src = "contenido.html" src = "contenido.html" name name=="contenido" "contenido"/> /> </frameset frameset> > </ </frameset> </frameset frameset> > </ </frameset> </html html> > </ </html> Sevilla, octubre de 2004 Grupo de Ingeniería del Software 9 5 Introducción a HTML Estático • Saltos entre marcos Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos 1. Lenguajes de marcado 2. El concepto de hipertexto 3. Estructura de una página web – Por defecto, un enlace abre el documento destino en el mismo marco en el que se encuentra. – Para abrir el documento en otro marco se usa el atributo target: <a href="URL" target="nombre de marco"> >…</a> </a> href target – El atributo target, target aparte del nombre de un marco, puede tomar los siguientes valores: 4. Marcos (frames) 5. Marcas estructurales 6. Marcas de formateo lógico • _blank: blank una ventana nueva. 7. Marcas de formateo físico • _self : el mismo marco (es el valor por defecto). 8. Caracteres especiales • _parent: parent el marco padre. 9. Imágenes y mapas • _top: top la ventana principal. 10. Listas 11. Tablas – Si el valor de target no coincide con el nombre de ningún marco, abre el documento en una ventana nueva y le asigna el nombre especificado (se puede referenciar a partir de entonces). Sevilla, octubre de 2004 Grupo de Ingeniería del Software 10 Introducción a HTML Estático • Cabeceras Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos 1. Lenguajes de marcado 2. El concepto de hipertexto 3. Estructura de una página web – <h1>Texto cabecera</h1> </h1> Æ <h6>…</h6> <h1> <h6> </h6> • Divisiones – <div> </div>: división lógica. div>…</div> – <span> </span>: zona de texto*. span>…</span> • Párrafos 4. Marcos (frames) 5. Marcas estructurales – <p>…</p> <p> </p>: párrafo de texto. 6. Marcas de formateo lógico – <br/> br/>: fuerza una nueva línea. 7. Marcas de formateo físico – <nobr> </nobr>: evita una nueva línea. nobr>…</nobr> 8. Caracteres especiales 9. Imágenes y mapas 10. Listas 11. Tablas • Texto formateado – <pre> </pre>: respeta los espacios y los saltos de pre>…</pre> línea. Se suele usar para código fuente. • Líneas horizontales – <hr/> hr/>: inserta una línea horizontal. *El uso de <span> está asociado normalmente a las hojas de estilo CSS, que se verán más adelante. Sevilla, octubre de 2004 Grupo de Ingeniería del Software 11 6 Introducción a HTML Estático • Ejemplo de marcas estructurales Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos 1. Lenguajes de marcado 2. El concepto de hipertexto 3. Estructura de una página web 4. Marcos (frames) 5. Marcas estructurales 6. Marcas de formateo lógico 7. Marcas de formateo físico 8. Caracteres especiales 9. Imágenes y mapas 10. Listas 11. Tablas Sevilla, octubre de 2004 Grupo de Ingeniería del Software 12 Introducción a HTML Estático • Marcas de formateo lógico Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos 1. Lenguajes de marcado 2. El concepto de hipertexto 3. Estructura de una página web Marca Descripción Apariencia <blockquoute> blockquoute> Bloque de cita literal Indentado. <abbr> abbr> Abreviatura Normal <acronym> acronym> Acrónimo Normal 4. Marcos (frames) <address> address> Dirección Cursiva 5. Marcas estructurales <cite> Cita Cursiva 6. Marcas de formateo lógico <code> code> Código Monoespacio 7. Marcas de formateo físico <dfn> dfn> Definición Cursiva 8. Caracteres especiales <em> em> Énfasis Cursiva 9. Imágenes y mapas <kbd> kbd> Tecleado Monoespacio <q> Cita literal en la misma línea "Normal" ( <samp> samp> Literal Monoespacio <strong> strong> Énfasis fuerte Negrilla <var> var> Variable Cursiva 10. Listas 11. Tablas Sevilla, octubre de 2004 Grupo de Ingeniería del Software no) 13 7 Introducción a HTML Estático • Ejemplo de marcas de formateo lógico Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos 1. Lenguajes de marcado 2. El concepto de hipertexto 3. Estructura de una página web 4. Marcos (frames) 5. Marcas estructurales 6. Marcas de formateo lógico 7. Marcas de formateo físico 8. Caracteres especiales 9. Imágenes y mapas 10. Listas 11. Tablas Sevilla, octubre de 2004 Grupo de Ingeniería del Software 14 Introducción a HTML Estático • Marcas de formateo físico Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos Marca Descripción Apariencia <b> Negrilla (boldface) Negrilla 1. Lenguajes de marcado 2. El concepto de hipertexto <big> big> Grande Grande 3. Estructura de una página web <i> Itálica Cursiva 4. Marcos (frames) 5. Marcas estructurales <small> small> Pequeña Pequeña 6. Marcas de formateo lógico <sub> sub> Subíndice Superíndice 7. Marcas de formateo físico <sup> sup> Superíndice Subíndice 8. Caracteres especiales 9. Imágenes y mapas <tt> tt> Monoespacio Monoespacio Marca Descripción Apariencia <ins> ins> Texto insertado Subrayado <del> Texto eliminado Tachado 10. Listas 11. Tablas Sevilla, octubre de 2004 Grupo de Ingeniería del Software 15 8 Introducción a HTML Estático • Ejemplo de marcas de formateo físico Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos 1. Lenguajes de marcado 2. El concepto de hipertexto 3. Estructura de una página web 4. Marcos (frames) 5. Marcas estructurales 6. Marcas de formateo lógico 7. Marcas de formateo físico 8. Caracteres especiales 9. Imágenes y mapas 10. Listas 11. Tablas Sevilla, octubre de 2004 Grupo de Ingeniería del Software 16 Introducción a HTML Estático • Códigos de caracteres Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos 1. Lenguajes de marcado 2. El concepto de hipertexto 3. Estructura de una página web – Todos los caracteres pueden especificarse en HTML/XHTML mediante &#999; donde 999 es el código en decimal del carácter deseado. • Entidades con nombre 4. Marcos (frames) 5. Marcas estructurales 6. Marcas de formateo lógico 7. Marcas de formateo físico • &lt; &gt; &amp; &copy; &aacute; 8. Caracteres especiales • <, >, &, ©, á 9. Imágenes y mapas 10. Listas 11. Tablas – Algunos caracteres pueden especificarse también mediante un nombre especial, por ejemplo: • Caracteres a evitar (<, >, &) – En el texto HTML/XHTML nunca se deben usar literalmente los caracteres <, > y &, ya que pueden confundir al analizador del código. – Siempre se deben usar como entidades con nombre. Sevilla, octubre de 2004 Grupo de Ingeniería del Software 17 9 Introducción a HTML Estático • Inserción de imágenes Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos 1. Lenguajes de marcado 2. El concepto de hipertexto 3. Estructura de una página web 4. Marcos (frames) 5. Marcas estructurales 6. Marcas de formateo lógico 7. Marcas de formateo físico 8. Caracteres especiales 9. Imágenes y mapas – Permite insertar una imagen en el documento. – Los formatos habituales son GIF (permite imágenes transparentes y animaciones) y JPG, JPG aunque la mayoría de los navegadores admite otros formatos (PNG, BMP, WMF, etc.). <img src = "URL de la imagen" alt = "Texto alternativo" title = "Texto tooltip" /> 10. Listas 11. Tablas Sevilla, octubre de 2004 Grupo de Ingeniería del Software 18 Introducción a HTML Estático • Mapas sensibles Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos 1. Lenguajes de marcado 2. El concepto de hipertexto 3. Estructura de una página web 4. Marcos (frames) 5. Marcas estructurales 6. Marcas de formateo lógico 7. Marcas de formateo físico 8. Caracteres especiales 9. Imágenes y mapas 10. Listas 11. Tablas Sevilla, octubre de 2004 Grupo de Ingeniería del Software – Permiten definir, para una imagen determinada, un conjunto de áreas que actúan como enlaces. <img src="URL" … usemap="#mapa1" /> src usemap … <map name = "mapa1" > <area shape="rect|circ|poly|default" shape coords="99,99,99,…,99" coords href="URL" href target="marco" target title="texto tooltip" title /> <!-- más definiciones de áreas --> </map > </map> 19 10 Introducción a HTML Estático • Listas no ordenadas Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos 1. Lenguajes de marcado 2. El concepto de hipertexto 3. Estructura de una página web 4. Marcos (frames) 5. Marcas estructurales 6. Marcas de formateo lógico 7. Marcas de formateo físico 8. Caracteres especiales 9. Imágenes y mapas 10. Listas 11. Tablas <ul type="disc|circle|square"> > type <li type="disc|circle|square"> >Elemento</ </li li> > type <!-- más elementos --> Las Laslistas listas </ul > </ul> pueden pueden anidarse anidarse • Listas ordenadas <ol start="n" type="A|a|I|i|1"> start type <li value="m" type="A|a|I|i|1"> >Elemento</ </li li> > value type <!-- más elementos --> </ol > </ol> Los type Losatributos atributostype, type, • Listas de definiciones start startyyvalue valueestán están desaconsejados. desaconsejados. <dl> dl> <dt> </dt dt> > dt>Término que se define</ <dd> </dd dd> > dd>Definición del término</ <!-- más parejas <dt><dd> --> </dl > </dl> Sevilla, octubre de 2004 Grupo de Ingeniería del Software 20 Introducción a HTML Estático • Ejemplo de listas Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos 1. Lenguajes de marcado 2. El concepto de hipertexto 3. Estructura de una página web 4. Marcos (frames) 5. Marcas estructurales 6. Marcas de formateo lógico 7. Marcas de formateo físico 8. Caracteres especiales 9. Imágenes y mapas 10. Listas 11. Tablas Sevilla, octubre de 2004 Grupo de Ingeniería del Software 21 11 Introducción a HTML Estático • Estructura de etiquetas de tabla Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos 1. Lenguajes de marcado 2. El concepto de hipertexto 3. Estructura de una página web 4. Marcos (frames) 5. Marcas estructurales 6. Marcas de formateo lógico 7. Marcas de formateo físico 8. Caracteres especiales 9. Imágenes y mapas 10. Listas – <table> table>: etiqueta de la tabla. – <tr> tr>: etiqueta de fila de tabla (table row). – <th> th>: etiqueta de celda de cabecera (table header). – <td> td>: etiqueta de celda de datos (table data). – <caption> caption>: título de la tabla. <table> table> <caption>…</caption> caption>…</caption> <tr> tr> <tr> tr> 11. Tablas <tr> tr> <td>…</td> td>…</td> td>…</td> <td>…</td> td>…</td> <td>…</td> <th>…</th> th>…</th> th>…</th> <th>…</th> <th>…</th> <td>…</td> td>…</td> <th>…</th> th>…</th> <td>…</td> td>…</td> <th>…</th> th>…</th> </tr > </tr> <td>…</td> > td>…</td> <td>…</td> td>…</td> </tr </tr> <td>…</td> > td>…</td> <td>…</td> td>…</td> </tr </tr> </table > </table> Sevilla, octubre de 2004 Grupo de Ingeniería del Software 22 Introducción a HTML Estático • Atributos rowspan y colspan Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos 1. Lenguajes de marcado 2. El concepto de hipertexto 3. Estructura de una página web 4. Marcos (frames) 5. Marcas estructurales 6. Marcas de formateo lógico 7. Marcas de formateo físico 8. Caracteres especiales 9. Imágenes y mapas – En las etiquetas th y td, permiten que una celda se expanda por varias filas y/o columnas. 10. Listas 11. Tablas Sevilla, octubre de 2004 Grupo de Ingeniería del Software 23 12
