Introducción a HTML Estático 1. Lenguajes de marcado 2. Estructura de una página web 3. Elementos estructurales 4. Elementos de formateo lógico 5. Elementos de formateo físico 6. El concepto de hipertexto 7. Caracteres especiales 8. Imágenes y mapas 9. Listas 10. Tablas 11/02/2014 Introducción a HTML Estático Grupo de Ingeniería del Software y Bases de Datos Departamento de Lenguajes y Sistemas Informáticos 11. Herramientas y Referencias © Diseño de Amador Durán Toro, 2011 Universidad de Sevilla • Concepto de lenguaje de marcado – 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> con una marca. 1. Lenguajes de marcado 2. Estructura de una página web 3. Elementos estructurales 4. Elementos de formateo lógico 5. Elementos de formateo físico 6. El concepto de hipertexto 7. Caracteres especiales 8. Imágenes y mapas 9. Listas 10. Tablas • Algunos lenguajes de marcado – Tipo SGML: SGML IBM (1960) estándar ISO de 1986 (LinuxDoc). • DTD: Definicion de lenguajes SGML – HTML HTML: Lenguaje de Hipertexto especificado en SGML. – Tipo XML: XML • Sencillez de HTML + Flexibilidad SGML. • Xschema: Definicion de lenguajes XML – XHTML: XHTML HTML especificado en XML. • Contenido y apariencia – El objetivo de las últimas versiones de XHTML es la separación de contenido y apariencia para facilitar la accesibilidad. – El contenido se expresa mediante XHTML y la apariencia mediante hojas de estilo CSS. Febrero 2013 IISSI Introducción a la Ingeniería del Software y a los Sistemas de Información 1 © Diseño de Amador Durán Toro, 2011 11. Herramientas y Referencias 1 Introducción a HTML Estático 11/02/2014 • Reglas de marcado estricto (XML) Lenguajes de marcado 2. Estructura de una página web 3. Elementos estructurales 4. Elementos de formateo lógico 5. Elementos de formateo físico 6. El concepto de hipertexto 7. Caracteres especiales 8. Imágenes y mapas 9. Listas 10. Tablas 11. Herramientas y Referencias <e1><e2>…</e2></e1> <e1><e2>…</e1></e2> 4. Todos las elementos deben tener etiquetas de apertura y de cierre: <e>texto</e> (<e></e> equivale a <e/>). 5. Los nombres de los elementos son sensibles a mayúsculas y minúsculas: <e> distinto de <E>. 6. Los elementos pueden llevar atributos en la etiqueta de apertura: <e at1="v1" at2="v2">texto</e> 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 --> Febrero 2013 Introducción a la Ingeniería del Software y a los Sistemas de Información 2 © Diseño de Amador Durán Toro, 2011 1. 1. Todo el documento debe estar dentro de un único elemento raíz. 2. Los elementos contienen texto y/o otros elementos, formando una jerarquía. 3. Los elementos no pueden solaparse: • Reglas de marcado estricto (XML) XHTML Lenguajes de marcado 2. Estructura de una página web 3. Elementos estructurales 4. Elementos de formateo lógico 5. Elementos de formateo físico 6. El concepto de hipertexto 7. Caracteres especiales 8. Imágenes y mapas 9. Listas 10. Tablas 11. Herramientas y Referencias <e1><e2>…</e2></e1> <e1><e2>…</e1></e2> 4. Todos las elementos deben tener etiquetas de apertura y de cierre: <e>texto</e> (<e></e> equivale a <e/>). 5. Los nombres de los elementos son sensibles a mayúsculas y minúsculas: minúsculas <e> distinto de <E>. 6. Los elementos pueden llevar atributos en la etiqueta de apertura: <e at1="v1" at2="v2">texto</e> 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 --> Febrero 2013 IISSI Introducción a la Ingeniería del Software y a los Sistemas de Información 3 © Diseño de Amador Durán Toro, 2011 1. 1. Todo el documento debe estar dentro de un único elemento raíz. 2. Los elementos contienen texto y/o otros elementos, formando una jerarquía. 3. Los elementos no pueden solaparse: 2 Introducción a HTML Estático 11/02/2014 • Elementos de la estructura básica <html> html> <head> head> 1. Lenguajes de marcado <title> </title title>Título del documento</ </title> title> 2. Estructura de una página web <!-- otra información de cabecera --> 3. Elementos estructurales 4. Elementos de formateo lógico 5. Elementos de formateo físico 6. El concepto de hipertexto Caracteres especiales 8. Imágenes y mapas 9. Listas 10. Tablas 11. Herramientas y Referencias Febrero 2013 <body> <!-- contenido del documento --> </body> </html </html> html> – <html>: elemento raíz del documento. – <head>: cabecera del documento; aparte del título, puede contener otra información sobre el documento. – <title>: título del documento. – <body>: cuerpo (contenido) del documento. Introducción a la Ingeniería del Software y a los Sistemas de Información 4 © Diseño de Amador Durán Toro, 2011 7. </head </head> head> • Cabeceras – <h1>Texto cabecera</h1> <h6>…</h6> • Divisiones 1. Lenguajes de marcado 2. Estructura de una página web 3. Elementos estructurales 4. Elementos de formateo lógico 5. Elementos de formateo físico – <p>…</p>: párrafo de texto. 6. El concepto de hipertexto – <br/>: fuerza una nueva línea. 7. Caracteres especiales – <nobr>…</nobr>: evita una nueva línea. 8. Imágenes y mapas 9. Listas 11. Herramientas y Referencias – <span>…</span>: zona de texto*. • Párrafos • Texto formateado – <pre>…</pre>: respeta los espacios y los saltos de línea. Se suele usar para código fuente. • Líneas horizontales – <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. Febrero 2013 IISSI Introducción a la Ingeniería del Software y a los Sistemas de Información 5 © Diseño de Amador Durán Toro, 2011 10. Tablas – <div>…</div>: división lógica. 3 Introducción a HTML Estático 11/02/2014 • Ejemplo de elementos estructurales 1. Lenguajes de marcado 2. Estructura de una página web 3. Elementos estructurales 4. Elementos de formateo lógico 5. Elementos de formateo físico 6. El concepto de hipertexto 7. Caracteres especiales 8. Imágenes y mapas 9. Listas 10. Tablas Febrero 2013 Introducción a la Ingeniería del Software y a los Sistemas de Información 6 © Diseño de Amador Durán Toro, 2011 11. Herramientas y Referencias • Elementos de formateo lógico 1. Lenguajes de marcado 2. Estructura de una página web 3. Elementos estructurales 4. Elementos de formateo lógico 5. Elementos de formateo físico 6. El concepto de hipertexto 7. Caracteres especiales 8. Imágenes y mapas 9. Listas 10. Tablas 11. Herramientas y Referencias Febrero 2013 IISSI Descripción Apariencia <blockquoute> Bloque de cita literal Indentado <abbr> Abreviatura Normal <acronym> Acrónimo Normal <address> Dirección Cursiva <cite> Cita Cursiva <code> Código Monoespacio <dfn> Definición Cursiva <em> Énfasis Cursiva <kbd> Tecleado Monoespacio <q> Cita literal en la misma línea "Normal" ( <samp> Literal Monoespacio <strong> Énfasis fuerte Negrilla <var> Variable Cursiva Introducción a la Ingeniería del Software y a los Sistemas de Información no) 7 © Diseño de Amador Durán Toro, 2011 Elemento 4 Introducción a HTML Estático 11/02/2014 • Ejemplo de elementos de formateo lógico 1. Lenguajes de marcado 2. Estructura de una página web 3. Elementos estructurales 4. Elementos de formateo lógico 5. Elementos de formateo físico 6. El concepto de hipertexto 7. Caracteres especiales 8. Imágenes y mapas 9. Listas 10. Tablas Febrero 2013 Introducción a la Ingeniería del Software y a los Sistemas de Información 8 © Diseño de Amador Durán Toro, 2011 11. Herramientas y Referencias • Elementos de formateo físico Elemento Descripción Apariencia <b> Negrilla Negrilla 1. Lenguajes de marcado 2. Estructura de una página web <big> Grande Grande 3. Elementos estructurales <i> Itálica Cursiva 4. Elementos de formateo lógico <small> Pequeña Pequeña 5. Elementos de formateo físico 6. El concepto de hipertexto <sub> subíndice subíndice 7. Caracteres especiales <sup> superíndice superíndice 8. Imágenes y mapas <tt> Listas Texto mecanografiado Monoespacio 9. Elemento Descripción Apariencia <ins> Texto insertado Subrayado <del> Texto eliminado Tachado 11. Herramientas y Referencias Febrero 2013 IISSI Introducción a la Ingeniería del Software y a los Sistemas de Información 9 © Diseño de Amador Durán Toro, 2011 10. Tablas 5 Introducción a HTML Estático 11/02/2014 • Formato Físico vs. Formato Lógico – F. Físico: 1. Lenguajes de marcado 2. Estructura de una página web 3. Elementos estructurales 4. Elementos de formateo lógico 5. Elementos de formateo físico 6. El concepto de hipertexto 7. Caracteres especiales 8. Imágenes y mapas 9. Listas • Ventajas: Intuitivo (WYSIWYG) • Inconvenientes: No semántico – F. Lógico: • Ventajas: Semántico y Estructurado • Inconvenientes: Ninguno Muy Recomendado: Formato Lógico + CSS 10. Tablas Febrero 2013 Introducción a la Ingeniería del Software y a los Sistemas de Información 10 © Diseño de Amador Durán Toro, 2011 11. Herramientas y Referencias • Enlaces entre documentos – Un sistema de hipertexto añade una nueva dimensión al 1. Lenguajes de marcado 2. Estructura de una página web 3. Elementos estructurales 4. Elementos de formateo lógico 5. Elementos de formateo físico 6. El concepto de hipertexto 7. Caracteres especiales 8. Imágenes y mapas 9. Listas texto al incluir (hiper)enlaces que permiten saltar (navegar) desde un punto de un texto a otro. <html> <a href="B.html">B</a> </html> <html> A.html <a href="C.html#X">C.X</a> </html> <html> 10. Tablas <a name="X"/> B.html </html> a = anchor C.html Febrero 2013 IISSI Introducción a la Ingeniería del Software y a los Sistemas de Información 11 © Diseño de Amador Durán Toro, 2011 11. Herramientas y Referencias 6 Introducción a HTML Estático 11/02/2014 • Destinos de salto (anclas) Lenguajes de marcado 2. Estructura de una página web 3. Elementos estructurales 4. Elementos de formateo lógico 5. Elementos de formateo físico 6. El concepto de hipertexto 7. Caracteres especiales 8. Imágenes y mapas 9. Listas 10. Tablas 11. Herramientas y Referencias • Enlaces – <a href=" href="URL">texto enlace</a> • Salta al comienzo del documento identificado por la URL. – <a href=" href="URL#ancla">texto enlace</a> • Salta al punto del documento de la URL donde está definida el ancla con el nombre especificado. – <a href="..." href="..." title="información">texto title="información">texto enlace</a> • El atributo title añade información sobre el enlace, que se suele mostrar como un tooltip en los navegadores actuales. URL ≡ protocolo://servidor:puerto/recurso http://MiServidor.com/fotos/yo.jpg https://MiServidor.com:8080/blog Febrero 2013 Introducción a la Ingeniería del Software y a los Sistemas de Información 12 © Diseño de Amador Durán Toro, 2011 1. – <a name=" name="nombre del ancla"/> – <e id id=" ="nombre del ancla">…</e> • Donde e es cualquier elemento de XHTML. • Códigos de caracteres: – Todos los caracteres pueden especificarse en XHTML mediante 1. Lenguajes de marcado &#999; 2. Estructura de una página web 3. Elementos estructurales donde 999 es el código en decimal del carácter que se desea visualizar. 4. Elementos de formateo lógico 5. Elementos de formateo físico 6. El concepto de hipertexto 7. Caracteres especiales 8. Imágenes y mapas 9. Listas 11. Herramientas y Referencias – Algunos caracteres pueden especificarse también mediante un nombre especial, por ejemplo: • &lt; &gt; &amp; &copy; &aacute; • <, >, &, ©, á • 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. Febrero 2013 IISSI Introducción a la Ingeniería del Software y a los Sistemas de Información 13 © Diseño de Amador Durán Toro, 2011 10. Tablas • Entidades con nombre 7 Introducción a HTML Estático 11/02/2014 • Inserción de imágenes – El elemento <img> permite insertar una imagen en un Lenguajes de marcado 2. Estructura de una página web 3. Elementos estructurales 4. Elementos de formateo lógico 5. Elementos de formateo físico 6. El concepto de hipertexto 7. Caracteres especiales 8. Imágenes y mapas 9. Listas 10. Tablas documento XHTML. – Los formatos habituales son PNG (permite imágenes transparentes y animaciones) y JPG, aunque la mayoría de los navegadores admite otros formatos como GIF, BMP, etc. <img src = "URL de la imagen" alt = "Texto alternativo" title = "Texto informativo (tooltip)" /> 11. Herramientas y Referencias <img src="naranjito.jpg” src alt alt= "Naranjito” title = "Imagen de Naranjito” /> Introducción a la Ingeniería del Software y a los Sistemas de Información Febrero 2013 14 © Diseño de Amador Durán Toro, 2011 1. • Mapas de imágenes – Permiten definir, para una imagen determinada, un conjunto de áreas de diferentes formas que actúan como enlaces. 1. Lenguajes de marcado 2. Estructura de una página web 3. Elementos estructurales <img src="URL" … usemap="#mapa1" /> 4. Elementos de formateo lógico … 5. Elementos de formateo físico 6. El concepto de hipertexto 7. Caracteres especiales 8. Imágenes y mapas 9. Listas <map name = "mapa1" > <area shape="rect|circ|poly|default" coords="99,99,99,…,99" href="URL" target="marco" title="texto tooltip" 10. Tablas /> <!-- más definiciones de áreas --> </map> Febrero 2013 IISSI Introducción a la Ingeniería del Software y a los Sistemas de Información 15 © Diseño de Amador Durán Toro, 2011 11. Herramientas y Referencias 8 Introducción a HTML Estático 11/02/2014 • Mapas de imágenes 1. Lenguajes de marcado 2. Estructura de una página web 3. Elementos estructurales 4. Elementos de formateo lógico 5. Elementos de formateo físico 6. El concepto de hipertexto 7. Caracteres especiales 8. Imágenes y mapas 9. Listas 10. Tablas Febrero 2013 Introducción a la Ingeniería del Software y a los Sistemas de Información 16 © Diseño de Amador Durán Toro, 2011 11. Herramientas y Referencias • Listas no ordenadas <ul type="disc|circle|square"> <li type="disc|circle|square">Elemento</li> Lenguajes de marcado 2. Estructura de una página web 3. Elementos estructurales 4. Elementos de formateo lógico 5. Elementos de formateo físico 6. El concepto de hipertexto 7. Caracteres especiales 8. Imágenes y mapas 9. Listas 10. Tablas 11. Herramientas y Referencias Febrero 2013 IISSI <!-- más elementos --> </ul> • Listas ordenadas Las listas pueden anidarse <ol> <li>Elemento</li> <!-- más elementos --> </ol> • Listas de definiciones <dl> <dt>Término que se define</dt> <dd>Definición del término</dd> <!-- más parejas <dt><dd> --> </dl> Introducción a la Ingeniería del Software y a los Sistemas de Información 17 © Diseño de Amador Durán Toro, 2011 1. 9 Introducción a HTML Estático 11/02/2014 • Ejemplo de listas 1. Lenguajes de marcado 2. Estructura de una página web 3. Elementos estructurales 4. Elementos de formateo lógico 5. Elementos de formateo físico 6. El concepto de hipertexto 7. Caracteres especiales 8. Imágenes y mapas 9. Listas 10. Tablas Febrero 2013 Introducción a la Ingeniería del Software y a los Sistemas de Información 18 © Diseño de Amador Durán Toro, 2011 11. Herramientas y Referencias • Elementos para tablas – <table>: elemento principal de la tabla. – <tr>: filas de tabla (table row). 1. Lenguajes de marcado 2. Estructura de una página web – <th>: celdas de cabecera (table header). 3. Elementos estructurales – <td>: celdas de datos (table data). 4. Elementos de formateo lógico – <caption>: título de la tabla. 5. Elementos de formateo físico 6. El concepto de hipertexto 7. Caracteres especiales 8. Imágenes y mapas 9. Listas <caption>…</caption> <tr> <tr> 11. Herramientas y Referencias <tr> <td>…</td> <td>…</td> <td>…</td> <th>…</th> <th>…</th> <th>…</th> <td>…</td> <td>…</td> </tr> <td>…</td> <td>…</td> </tr> <td>…</td> <th>…</th> <td>…</td> <th>…</th> </tr> </table> Febrero 2013 IISSI Introducción a la Ingeniería del Software y a los Sistemas de Información 19 © Diseño de Amador Durán Toro, 2011 10. Tablas <table> 10 Introducción a HTML Estático 11/02/2014 • Los atributos rowspan y colspan permiten que una celda se expanda a través de varias filas o columnas <table> <tr> tr> Lenguajes de marcado 2. Estructura de una página web 3. Elementos estructurales 4. Elementos de formateo lógico 5. Elementos de formateo físico 6. El concepto de hipertexto 7. Caracteres especiales 8. Imágenes y mapas 9. Listas <td colspan=“2” rowspan=“2”/> <td colspan=“2”> Horario </td> </tr> tr> <tr> tr> <td>M.</td> <td>T.</td> </tr> tr> <tr> tr> Gr up os M. T. G 1 20 50 G 2 34 45 <td rowspan=“2”> Grupos </td> <td>G1</td> <td>20</td> <td>50</td> 10. Tablas 11. Herramientas y Referencias Horario </tr> tr> <tr> tr> <td>G2</td> <td>34</td> <td>45</td> </tr> tr> </table> 20 © Diseño de Amador Durán Toro, 2011 1. • Atributos rowspan y colspan – En los elementos <th> y <td>, permiten que una celda 1. Lenguajes de marcado 2. Estructura de una página web 3. Elementos estructurales 4. Elementos de formateo lógico 5. Elementos de formateo físico 6. El concepto de hipertexto 7. Caracteres especiales 8. Imágenes y mapas 9. Listas se expanda por varias filas y/o columnas. 10. Tablas Febrero 2013 IISSI Introducción a la Ingeniería del Software y a los Sistemas de Información 21 © Diseño de Amador Durán Toro, 2011 11. Herramientas y Referencias 11 Introducción a HTML Estático 11/02/2014 • Herramientas y Referencias 1. Lenguajes de marcado 2. Estructura de una página web • Firebug: http://getfirebug.com/ 3. Elementos estructurales • Web Developer Toolbar: 4. Elementos de formateo lógico 5. Elementos de formateo físico 6. El concepto de hipertexto 7. Caracteres especiales • Aptana (Eclipse+X): http://aptana.com/ 8. Imágenes y mapas • HTML-KIT: http://www.htmlkit.com/ 9. Listas • Notepad++: http://notepad-plus-plus.org/ 11. Herramientas y Referencias Febrero 2013 https://addons.mozilla.org/es/firefox/addon/web-developer/ – IDEs para HTML … Introducción a la Ingeniería del Software y a los Sistemas de Información 22 © Diseño de Amador Durán Toro, 2011 10. Tablas – Plugins de desarrollo en navegadores Ejercicio previo propuesto: • Abrir un editor de texto plano (e.g. notepad) Lenguajes de marcado 2. Estructura de una página web 3. Elementos estructurales 4. Elementos de formateo lógico 5. Elementos de formateo físico 6. El concepto de hipertexto 7. Caracteres especiales 8. Imágenes y mapas 9. Listas 10. Tablas 11. Herramientas y Referencias • Escribir la estructura básica de un documento HTML y poner “Hola Mundo”. • Abrir el documento con un navegador y observar • Editar el documento y poner varios párrafos y observar como no se tienen en cuenta los saltos de línea. • Añadir etiquetas de párrafos (p), div, listas, imágenes, tablas, etc… 23 IISSI © Diseño de Amador Durán Toro, 2011 1. 12