Transparencias. Tema 2: Introducción a HTML estático.
Anuncio
Tiempo: 2h Introducción a HTML Estático Departamento de Lenguajes y Sistemas Informá Informáticos Grupo de Ingenierí Ingeniería del Software Versión original: Amador Durán y David Benavides (octubre 2005) Última revisión: Amador Durán Toro (octubre 2006); cambio de plantilla y pequeños cambios. escuela técnica superior de ingeniería informática Octubre 2006 [Ángel US V7] Diseño: Amador Durán Toro (2003-2006) [Ángel US V7] Diseño: Amador Durán Toro (2003-2006) Introducció Introducción a HTML Está Estático • Concepto de lenguaje de marcado 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á página web 4. Marcos (frames (frames)) 5. Elementos estructurales 6. Elementos de formateo ló lógico 7. Elementos de formateo fí físico 8. Caracteres especiales 9. Imá Imágenes y mapas 10. Listas 11. Tablas – Los lenguajes de marcado añaden información a un texto mediante marcas (también denominadas elementos). Esto es un <m info="x">texto</m> info="x">texto</m> con una marca. • Algunos lenguajes de marcado – SGML: estándar ISO de 1986 (LinuxDoc). – HTML: simplificación de SGML. – XML: lenguaje de marcado estricto que permite definir nuevos elementos. – XHTML: HTML siguiendo las reglas de marcado XML. • Contenido y apariencia – El objetivo de las últimas versiones de XHTML es la separación de contenido y apariencia para crear la web semántica. – El contenido se expresa mediante XHTML y la apariencia mediante hojas de estilo CSS. Sevilla, octubre de 2006 Grupo de Ingeniería del Software 1 1 [Ángel US V7] Diseño: Amador Durán Toro (2003-2006) Introducció Introducción a HTML Está Estático • Reglas de marcado estricto (XML) Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos 1. Todo el documento debe estar dentro de un único elemento raíz. 1. Lenguajes de marcado 2. Los elementos contienen texto y/o otros elementos, formando una jerarquía. 2. El concepto de hipertexto 3. Los elementos no pueden solaparse. 3. Estructura de una pá página web 4. Marcos (frames (frames)) 5. Elementos estructurales 6. Elementos de formateo ló lógico 7. Elementos de formateo fí físico 8. Caracteres especiales 6. Los elementos pueden llevar atributos en la etiqueta de apertura: <e at1="v1" at2="v2">texto</e> </e> at2="v2"> 9. Imá Imágenes y mapas 7. Los valores de los atributos deben ir entre comillas. 10. Listas 11. Tablas 4. Todos las elementos deben tener etiquetas de apertura y de cierre: <e>texto</e> </e> (<e></e> <e></e> ≡ <e/>). <e> <e/> 5. Los nombres de los elementos son sensibles a mayúsculas y minúsculas (<e> <e> ≠ <E>). <E> 8. El orden de los atributos es irrelevante. 9. Los comentarios se escriben entre <!-<!-- y --> -->: <!-<!-- esto es un comentario --> --> [Ángel US V7] Diseño: Amador Durán Toro (2003-2006) Sevilla, octubre de 2006 Grupo de Ingeniería del Software 2 Introducció Introducción a HTML Está 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ó dimensión al texto al incluir (hiper)enlaces que permiten saltar (navegar navegar) desde un punto de un texto a otro. 1. Lenguajes de marcado 2. El concepto de hipertexto 3. Estructura de una pá página web 4. Marcos (frames (frames)) <a <a href="B.html">B</a> href="B.html">B</a> 5. Elementos estructurales </html> </html> 6. Elementos de formateo ló lógico 7. Elementos de formateo fí físico 8. Caracteres especiales 9. Imá 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 2006 Grupo de Ingeniería del Software 3 2 [Ángel US V7] Diseño: Amador Durán Toro (2003-2006) Introducció Introducción a HTML Está Estático • Destinos de salto (anclas) 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á página web 4. Marcos (frames (frames)) 5. Elementos estructurales 6. Elementos de formateo ló lógico 7. Elementos de formateo fí físico 8. Caracteres especiales 9. Imá Imágenes y mapas 10. Listas 11. Tablas – <a a name="nombre del ancla"/> name – <e e id="nombre del ancla">…</e e> id • Donde e es cualquier elemento de XHTML. • Enlaces – <a a href="URL">texto enlace</a a> href • Salta al comienzo del documento identificado por 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. – <a a href="..." title="información">texto enlace</a a> title • El atributo title añade información sobre el enlace, que se suele mostrar como un tooltip en los navegadores actuales. [Ángel US V7] Diseño: Amador Durán Toro (2003-2006) Sevilla, octubre de 2006 Grupo de Ingeniería del Software 4 Introducció Introducción a HTML Está Estático • Elementos de la estructura bá 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á página web 4. Marcos (frames (frames)) 5. Elementos estructurales 6. Elementos de formateo ló lógico 7. Elementos de formateo fí físico 8. Caracteres especiales 9. Imá 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 información de cabecera > <! -<!-- otra información de cabecera--> --> </head head> > </ </head> <<body> body> body> <!--- contenido > <! -<!-contenidodel deldocumento documento--> --> </body body> > </ </body> </html html> > </ </html> – <html> html>: elemento 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 (contenido) del documento. Sevilla, octubre de 2006 Grupo de Ingeniería del Software 5 3 [Ángel US V7] Diseño: Amador Durán Toro (2003-2006) Introducció Introducción a HTML Está Estático • Elementos de la estructura 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á página web 4. Marcos (frames (frames)) 5. Elementos estructurales 6. Elementos de formateo ló lógico 7. Elementos de formateo fí físico 8. Caracteres especiales 9. Imá 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> [Ángel US V7] Diseño: Amador Durán Toro (2003-2006) Sevilla, octubre de 2006 Grupo de Ingeniería del Software 6 Introducció Introducción a HTML Está Estático • Elementos 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á página web 4. Marcos (frames (frames)) 5. Elementos estructurales 6. Elementos de formateo ló lógico 7. Elementos de formateo fí físico 8. Caracteres especiales 9. Imá Imágenes y mapas 10. Listas 11. Tablas Sevilla, octubre de 2006 Grupo de Ingeniería del Software – El elemento <frameset> frameset> sustituye a <body> body>. – Los atributos rows y cols de <frameset> frameset> especifican las filas y columnas mediante su tamaño en pixels, un porcentaje (%) o espacio restante (*). Si se usa más de un asterisco indican partes iguales. – Los documentos indicados en los atributos src de los elementos <frame> frame> se van asignando a los marcos de izquierda a derecha y de arriba abajo. – Los elementos <frameset> frameset> pueden anidarse dentro de otros <frameset> frameset> o en otro documento incluido mediante un elemento <frame> frame>. – Aquellos navegadores que no soportan marcos muestran el texto del elemento <noframes>. noframes>. 7 4 [Ángel US V7] Diseño: Amador Durán Toro (2003-2006) Introducció Introducción a HTML Está Estático • Ejemplo (có (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á página web 4. Marcos (frames (frames)) 5. Elementos estructurales 6. Elementos de formateo ló lógico 7. Elementos de formateo fí físico 8. Caracteres especiales 9. Imá 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 src=="menu.html" "menu.html"/> /> <<frameset frameset rows ="15%,*"> > rows ="15%,*"> <<frame frame src src=="titulo.html" "titulo.html"/> /> <<frame frame src src=="contenido.html" "contenido.html" name name=="contenido" "contenido"/> /> </frameset frameset> > </ </frameset> </frameset frameset> > </ </frameset> </html html> > </ </html> [Ángel US V7] Diseño: Amador Durán Toro (2003-2006) Sevilla, octubre de 2006 Grupo de Ingeniería del Software 8 Introducció Introducción a HTML Está 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á página web 4. Marcos (frames (frames)) 5. Elementos estructurales 6. Elementos de formateo ló lógico 7. Elementos de formateo fí físico 8. Caracteres especiales 9. Imá Imágenes y mapas 10. Listas 11. Tablas Sevilla, octubre de 2006 Grupo de Ingeniería del Software 9 5 [Ángel US V7] Diseño: Amador Durán Toro (2003-2006) Introducció Introducción a HTML Está Estático • Navegació Navegación 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á página web 4. Marcos (frames (frames)) 5. Elementos estructurales 6. Elementos de formateo ló lógico 7. Elementos de formateo fí físico 8. Caracteres especiales 9. Imá Imágenes y mapas 10. Listas 11. Tablas – Por defecto, al hacer clic en un enlace, el documento especificado por su URL se abre en el mismo marco en el que se encuentra el enlace. – 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: • _blank: blank una ventana nueva. • _self : el mismo marco (es el valor por defecto). • _parent: parent el marco padre. • _top: top la ventana principal. – Si el valor de target no coincide con el nombre de ningún marco, los navegadores abren el documento en una ventana nueva y le asignan el nombre especificado, pudiéndose referenciar. [Ángel US V7] Diseño: Amador Durán Toro (2003-2006) Sevilla, octubre de 2006 Grupo de Ingeniería del Software 10 Introducció Introducción a HTML Está Estático • Cabeceras Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos – <h1>Texto cabecera</h1> </h1> Æ <h6>…</h6> <h1> <h6> </h6> • Divisiones 1. Lenguajes de marcado 2. El concepto de hipertexto 3. Estructura de una pá página web 4. Marcos (frames (frames)) 5. Elementos estructurales – <p>…</p> <p> </p>: párrafo de texto. 6. Elementos de formateo ló lógico – <br/> br/>: fuerza una nueva línea. 7. Elementos de formateo fí físico – <nobr> </nobr nobr> >: evita una nueva línea. nobr>…</ 8. Caracteres especiales 9. Imá Imágenes y mapas 10. Listas 11. Tablas – <div> </div div> >: división lógica. div>…</ – <span> </span span> >: zona de texto*. span>…</ • Párrafos • Texto formateado – <pre> </pre pre> >: respeta los espacios y los saltos de 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 2006 Grupo de Ingeniería del Software 11 6 [Ángel US V7] Diseño: Amador Durán Toro (2003-2006) Introducció Introducción a HTML Está Estático • Ejemplo de elementos 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á página web 4. Marcos (frames (frames)) 5. Elementos estructurales 6. Elementos de formateo ló lógico 7. Elementos de formateo fí físico 8. Caracteres especiales 9. Imá Imágenes y mapas 10. Listas 11. Tablas [Ángel US V7] Diseño: Amador Durán Toro (2003-2006) Sevilla, octubre de 2006 Grupo de Ingeniería del Software 12 Introducció Introducción a HTML Está Estático • Elementos de formateo ló 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 Elemento Descripció Descripción Apariencia <blockquoute> blockquoute> Bloque de cita literal Indentado <abbr> abbr> Abreviatura Normal <acronym> acronym> Acrónimo Normal 3. Estructura de una pá página web 4. Marcos (frames (frames)) <address> address> Dirección Cursiva 5. Elementos estructurales <cite> Cita Cursiva 6. Elementos de formateo ló lógico <code> code> Código Monoespacio 7. Elementos de formateo fí físico <dfn> dfn> Definición Cursiva 8. Caracteres especiales <em> em> Énfasis Cursiva 9. Imá 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 2006 Grupo de Ingeniería del Software no) 13 7 [Ángel US V7] Diseño: Amador Durán Toro (2003-2006) Introducció Introducción a HTML Está Estático • Ejemplo de elementos de formateo ló 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á página web 4. Marcos (frames (frames)) 5. Elementos estructurales 6. Elementos de formateo ló lógico 7. Elementos de formateo fí físico 8. Caracteres especiales 9. Imá Imágenes y mapas 10. Listas 11. Tablas [Ángel US V7] Diseño: Amador Durán Toro (2003-2006) Sevilla, octubre de 2006 Grupo de Ingeniería del Software 14 Introducció Introducción a HTML Está Estático • Elementos de formateo fí físico Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos Elemento Descripció Descripción Apariencia <b> Negrilla Negrilla 1. Lenguajes de marcado 2. El concepto de hipertexto <big> big> Grande Grande 3. Estructura de una pá página web <i> Itálica Cursiva 4. Marcos (frames (frames)) 5. Elementos estructurales <small> small> Pequeña Pequeña 6. Elementos de formateo ló lógico <sub> sub> subíndice subíndice 7. Elementos de formateo fí físico <sup> sup> superíndice superíndice 8. Caracteres especiales 9. Imá Imágenes y mapas <tt> tt> Texto mecanografiado Monoespacio Elemento Descripció Descripción Apariencia <ins> ins> Texto insertado Subrayado <del> Texto eliminado Tachado 10. Listas 11. Tablas Sevilla, octubre de 2006 Grupo de Ingeniería del Software 15 8 [Ángel US V7] Diseño: Amador Durán Toro (2003-2006) Introducció Introducción a HTML Está Estático • Ejemplo de elementos de formateo fí 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á página web 4. Marcos (frames (frames)) 5. Elementos estructurales 6. Elementos de formateo ló lógico 7. Elementos de formateo fí físico 8. Caracteres especiales 9. Imá Imágenes y mapas 10. Listas 11. Tablas [Ángel US V7] Diseño: Amador Durán Toro (2003-2006) Sevilla, octubre de 2006 Grupo de Ingeniería del Software 16 Introducció Introducción a HTML Está Estático • Códigos de caracteres Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos – Todos los caracteres pueden especificarse en XHTML mediante &#999; 1. Lenguajes de marcado 2. El concepto de hipertexto 3. Estructura de una pá página web 4. Marcos (frames (frames)) 5. Elementos estructurales 6. Elementos de formateo ló lógico 7. Elementos de formateo fí físico • &lt; &gt; &amp; &copy; &aacute; 8. Caracteres especiales • <, >, &, ©, á 9. Imá Imágenes y mapas 10. Listas 11. Tablas donde 999 es el código en decimal del carácter que se desea visualizar. • Entidades con nombre – Algunos caracteres pueden especificarse también mediante un nombre especial, por ejemplo: • Caracteres a evitar (<, >, &) – En el texto 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 2006 Grupo de Ingeniería del Software 17 9 [Ángel US V7] Diseño: Amador Durán Toro (2003-2006) Introducció Introducción a HTML Está Estático • Inserció Inserción de imá 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á página web 4. Marcos (frames (frames)) 5. Elementos estructurales 6. Elementos de formateo ló lógico 7. Elementos de formateo fí físico 8. Caracteres especiales 9. Imá Imágenes y mapas – El elemento <img> img> permite insertar una imagen en un documento XHTML. – Los formatos habituales son GIF (permite imágenes transparentes y animaciones) y JPG, JPG aunque la mayoría de los navegadores admite otros formatos como PNG, BMP, WMF, etc. <img src = "URL de la imagen" alt = "Texto alternativo" title = "Texto informativo (tooltip)" /> 10. Listas 11. Tablas [Ángel US V7] Diseño: Amador Durán Toro (2003-2006) Sevilla, octubre de 2006 Grupo de Ingeniería del Software 18 Introducció Introducción a HTML Está Estático • Mapas de imá 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á página web 4. Marcos (frames (frames)) 5. Elementos estructurales 6. Elementos de formateo ló lógico 7. Elementos de formateo fí físico 8. Caracteres especiales 9. Imá Imágenes y mapas – Permiten definir, para una imagen determinada, un conjunto de áreas de diferentes formas 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 10. Listas 11. Tablas /> <!-- más definiciones de áreas --> </map > </map> Sevilla, octubre de 2006 Grupo de Ingeniería del Software 19 10 [Ángel US V7] Diseño: Amador Durán Toro (2003-2006) Introducció Introducción a HTML Está Estático • Ejemplo de mapas de imá 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á página web 4. Marcos (frames (frames)) 5. Elementos estructurales 6. Elementos de formateo ló lógico 7. Elementos de formateo fí físico 8. Caracteres especiales 9. Imá Imágenes y mapas 10. Listas 11. Tablas [Ángel US V7] Diseño: Amador Durán Toro (2003-2006) Sevilla, octubre de 2006 Grupo de Ingeniería del Software 20 Introducció Introducción a HTML Está 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á página web 4. Marcos (frames (frames)) 5. Elementos estructurales 6. Elementos de formateo ló lógico 7. Elementos de formateo fí físico 8. Caracteres especiales 9. Imá Imágenes y mapas <ul type="disc|circle|square"> > type <li type="disc|circle|square"> >Elemento</ </li li> > type <!-- más elementos --> </ul > </ul> • Listas ordenadas Las Laslistas listas pueden pueden anidarse anidarse <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> • Listas de definiciones <dl> dl> 10. Listas <dt> </dt dt> > dt>Término que se define</ 11. Tablas <dd> </dd dd> > dd>Definición del término</ Los type Losatributos atributostype, type, start startyyvalue valueestán están desaconsejados. desaconsejados. <!-- más parejas <dt><dd> --> </dl > </dl> Sevilla, octubre de 2006 Grupo de Ingeniería del Software 21 11 [Ángel US V7] Diseño: Amador Durán Toro (2003-2006) Introducció Introducción a HTML Está 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á página web 4. Marcos (frames (frames)) 5. Elementos estructurales 6. Elementos de formateo ló lógico 7. Elementos de formateo fí físico 8. Caracteres especiales 9. Imá Imágenes y mapas 10. Listas 11. Tablas [Ángel US V7] Diseño: Amador Durán Toro (2003-2006) Sevilla, octubre de 2006 Grupo de Ingeniería del Software 22 Introducció Introducción a HTML Está Estático • Elementos para tablas Escuela Técnica Superior de Ingeniería Informática Departamento de Lenguajes y Sistemas Informáticos – <table> table>: elemento principal de la tabla. – <tr> tr>: filas de tabla (table row). 1. Lenguajes de marcado – <th> th>: celdas de cabecera (table header). 2. El concepto de hipertexto – <td> td>: celdas de datos (table data). 3. Estructura de una pá página web – <caption> caption>: título de la tabla. 4. Marcos (frames (frames)) 5. Elementos estructurales 6. Elementos de formateo ló lógico 7. Elementos de formateo fí físico 8. Caracteres especiales 9. Imá Imágenes y mapas 10. Listas <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 </th> </th> <td> > td>…</td </td> <th> > th>…</th </th> <td> > td>…</td </td> <th> > th>…</th </th> </tr > </tr> > </tr > <td> > <td> td>…</td </td> </tr> td>…</td </td> <td> > <td> > </tr > td>…</td </td> td>…</td </td> </tr> </table > </table> Sevilla, octubre de 2006 Grupo de Ingeniería del Software 23 12 [Ángel US V7] Diseño: Amador Durán Toro (2003-2006) Introducció Introducción a HTML Está 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á página web 4. Marcos (frames (frames)) 5. Elementos estructurales 6. Elementos de formateo ló lógico 7. Elementos de formateo fí físico 8. Caracteres especiales 9. Imá Imágenes y mapas – En los elementos <th> y <td>, permiten que una celda se expanda por varias filas y/o columnas. 10. Listas 11. Tablas Sevilla, octubre de 2006 Grupo de Ingeniería del Software 24 13
