Introducción a HTML Jesús Arias Fisteus Computación Web (2017/18) Computación Web (2017/18) Introducción a HTML 1
Hola Mundo! 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>mi primera página HTML</title> 6 </head> 7 <body> 8 <p> Hola Mundo!</p> 9 </body> 10 </html> Computación Web (2017/18) Introducción a HTML 2
Ejercicios Práctica 1: Ejercicio 1. Computación Web (2017/18) Introducción a HTML 3
La cabecera del documento Elemento head. Suele contener: title: título de la página. link: enlaces a documentos externos (p.e. hojas de estilo, documento RSS, metadatos, etc.) style: hoja de estilo empotrada en el documento. script: programa empotrado en el documento, normalmente Javascript. Computación Web (2017/18) Introducción a HTML 4
El cuerpo del documento Elemento body. Contiene la parte del documento que se representa en el navegador web: Texto organizado en párrafos, tablas, imágenes, formularios, etc. Computación Web (2017/18) Introducción a HTML 5
Espacios en blanco y salto automático de ĺınea 1 <p> 2 Mú ltiples espacios en blanco consecutivos son 3 tratados como si sólo se tratase de uno. 4 Los caracteres de salto de lí nea o tabuladores 5 son tratados como si simplemente 6 7 fuesen espacios. 8 </p> Computación Web (2017/18) Introducción a HTML 6
Comentarios 1 <! -- El texto que aparece entre las marcas 2 de comentario es ignorado por el 3 nav egador web -- > Computación Web (2017/18) Introducción a HTML 7
Texto preformateado 1 <pre> 2 public class CircleAreaCalc { 3 4 private BigDecimal pi; 5 6 public CircleAreaCalc(int numdigits) { 7 PiCalc picalc = new PiCalc(numDigits); 8 pi = picalc.compute(); 9 } 10 11 public BigDecimal area(bigdecimal radius) { 12 BigDecimal area = radius.pow(2); 13 area = area.multiply(pi); 14 return area; 15 } 16 } 17 </pre> Computación Web (2017/18) Introducción a HTML 8
Elementos de bloque y elementos de ĺınea Los elementos que contiene el cuerpo del documento pueden ser: Elementos de bloque: hay una separación de ĺınea antes y después del documento. Ejemplos: p, table, div, pre, h1, etc. Elementos de ĺınea: se muestran dentro del flujo normal de una ĺınea, sin forzar saltos de ĺınea. Ejemplos: em, strong, a, img, etc. Computación Web (2017/18) Introducción a HTML 9
Marcado semántico de texto Elementos que permiten controlar cómo se presenta el texto: em: énfasis (cursiva típicamente). strong: énfasis fuerte (negrilla típicamente). b: negrilla. i: cursiva. small: comentarios adicionales, como por ejemplo letra pequeña citando avisos legales (p.e. declaración de copyright). Computación Web (2017/18) Introducción a HTML 10
Marcado semántico de texto 1 <p> 2 Esta aplicación web le permite <em>comprar</em> 3 o <em>vender</em> <strong>únicamente</strong> 4 objetos de segunda mano. 5 </p> 6 7 <p> 8 <small>el operador del servicio se reserva 9 el derecho a cancelarlo sin previo aviso.</small> 10 </p> Computación Web (2017/18) Introducción a HTML 11
Marcado semántico de texto Más elementos que permiten controlar cómo se presenta el texto: cite: para mencionar la fuente de algo (p.e. para citar documentos en la bibliografía). q: para presentar literalmente texto de una documento, dicho por una persona, etc. dfn: para presentar la definición de conceptos importantes. abbr: para presentar un acrónimo o abreviatura. Computación Web (2017/18) Introducción a HTML 12
Marcado semántico de texto 1 <p> 2 El científico <cite>albert Einstein</cite> 3 dijo que <q>nunca consideres el estudio como 4 una obligación, sino como una oportunidad 5 para penetrar en el bello y maravilloso 6 mundo del saber.</q> 7 </p> 8 <p> 9 Crear un documento 10 <abbr title="hypertext Markup Language">HTML</abbr> 11 es muy sencillo. 12 </p> 13 <p> 14 Un <dfn>byte</dfn> es una unidad de información 15 compuesta por 8 bits. 16 </p> Computación Web (2017/18) Introducción a HTML 13
Marcado semántico de texto Marcado relacionado con los ordenadores: code: código de ordenador. var: variable en un programa. samp: ejemplo de salida de un programa. input: entrada dada a un programa. Computación Web (2017/18) Introducción a HTML 14
Marcado semántico de texto Elemento time: Su contenido debe ser una especificación de tiempo (fecha, mes, año, semana, día de la semana, hora, zona horaria, duración de algo, etc.) Puede llevar un atributo datetime con una representación procesable por un ordenador. Si no, el propio contenido debe ser procesable por un ordenador. Computación Web (2017/18) Introducción a HTML 15
Marcado semántico de texto 1 <p> 2 El congreso comenzó 3 <time datetime='2014-09-05'>ayer</time> 4 y durará <time datetime='p3d'>3 días</time>. 5 </p> 6 <p> 7 Correo recibido el <time>2014-09-23t10:00</time>. 8 </p> Computación Web (2017/18) Introducción a HTML 16
Imágenes Las imágenes se incluyen con el elemento img. Es un elemento de ĺınea. Además, se debe proporcionar un texto descriptivo. Se puede conservar el tamaño original de la imagen o escalarla a otra altura y/o anchura. Computación Web (2017/18) Introducción a HTML 17
Imágenes 1 <p> 2 <img src="logo-uc3m.jpg" alt="logotipo de UC3M"> 3 <img src="logo-uc3m.jpg" width="100" 4 alt="logotipo de UC3M"> 5 <img src="logo-uc3m.jpg" width="100" height="100" 6 alt="logotipo de UC3M"> 7 </p> Computación Web (2017/18) Introducción a HTML 18
Hipervínculos Un documento HTML puede enlazar mediante hipervínculos con: Objetos externos: otra página HTML, una posición de otra página HTML, ficheros descargables, etc. Otra posición del propio documento: por ejemplo, enlazar desde una sección del documento hacia otra sección. Computación Web (2017/18) Introducción a HTML 19
Hipervínculos 1 <p> 2 La <a href="http://www.uc3m.es/">universidad 3 Carlos III de Madrid</a> fue fundada en 1989. 4 </p> 5 <p> 6 <a href="http://www.uc3m.es/"> 7 <img src="logo-uc3m.jpg"></a> 8 </p> 9 <p> 10 Este <a href="http://www.uc3m.es/" target="_blank"> 11 hipervínculo</a> se abre en una nueva ventana 12 o pesta~na. 13 </p> Computación Web (2017/18) Introducción a HTML 20
Hipervínculos 1 <p> 2 Este tema se trata en mayor profundidad 3 <a href="#p3">posteriormente en este documento</a>. 4 </p> 5 6 <p id="p3"> 7 El tema tiene una complejidad... 8 </p> Computación Web (2017/18) Introducción a HTML 21
Listas ordenadas 1 <p> 2 Esto es una lista ordenada (el orden de los 3 elementos de la lista es relevante): 4 </p> 5 <ol> 6 <li>primer punto.</li> 7 <li>segundo punto.</li> 8 </ol> 9 10 <p> 11 Se pueden usar números, letras, etc.: 12 </p> 13 <ol type="a"> 14 <li>primer punto.</li> 15 <li>segundo punto.</li> 16 </ol> Computación Web (2017/18) Introducción a HTML 22
Listas no ordenadas 1 <p> 2 Esto es una lista no ordenada (el orden de los 3 elementos de la lista 4 <strong>no</strong> es relevante): 5 </p> 6 <ul> 7 <li>primer punto.</li> 8 <li>segundo punto.</li> 9 </ul> Computación Web (2017/18) Introducción a HTML 23
Tablas 1 <table> 2 <thead> 3 <tr> 4 <th>fecha</th> 5 <th>lugar</th> 6 <th>precio</th> 7 </tr> 8 </thead> 9 <tbody> 10 <tr> 11 <td>10-09-2014</td> 12 <td>madrid</td> 13 <td>60</td> 14 </tr> 15 <tr> 16 <td>12-09-2014</td> 17 <td>sevilla</td> 18 <td>50</td> 19 </tr> 20 <tr> 21 <td>13-09-2014</td> 22 <td>málaga</td> 23 <td>50</td> 24 </tr> 25 </tbody> 26 <tfoot> 27 <tr> 28 <td>total:</td> 29 <td></td> 30 <td>160</td> 31 </tr> 32 </tfoot> 33 </table> Computación Web (2017/18) Introducción a HTML 24
Secciones Marcado de secciones de un documento: Cabecera: elemento header. Pie de página: elemento footer. Enlaces de navegación: elemento nav. Información secundaria / relacionada: elemento aside. Información de contacto: elemento address. Unidad autocontenida: elemento article. Sección: elemento section. Computación Web (2017/18) Introducción a HTML 25
Títulos Marcado de títulos de secciones y otras partes de un documento: Elementos h1, h2, h3, h4, h5 y h6. Computación Web (2017/18) Introducción a HTML 26
Secciones 1 2 <article> <header> 3 <h2>apples</h2> 4 <p>tasty, delicious fruit!</p> 5 6 </header> <p>the apple is the pomaceous fruit of the apple 7 8 tree.</p> <section> 9 10 <h3>red Delicious</h3> <p>these bright red apples are the most common 11 found in many supermarkets.</p> 12 13 </section> <section> 14 15 <h3>granny Smith</h3> <p>these juicy, green apples make a great 16 filling for apple pies.</p> 17 </section> 18 </article> Computación Web (2017/18) Introducción a HTML 27
Agrupación de contenido: div y span A veces conviene agrupar contenido en un único elemento. Por ejemplo: Para aplicar estilos a dicho contenido en su conjunto. Para manipularlo en su conjunto por un programa. Para agrupar en un bloque elementos de ĺınea. Dos elementos sin semántica para agrupar: Elemento div: agrupación de bloque. Elemento span: agrupación de ĺınea. Se ilustrará su uso cuando se explique CSS. Computación Web (2017/18) Introducción a HTML 28
Ejercicios Práctica 1: Ejercicio 2.1. Computación Web (2017/18) Introducción a HTML 29
Formularios Los formularios permiten que el usuario introduzca información. Se recoge la información mediante controles de distintos tipos: texto, fechas, números, listas, casillas marcables, ficheros, etc. Típicamente se envía la información recogida al servidor mediante una petición HTTP. Computación Web (2017/18) Introducción a HTML 30
Formularios 1 <form action="http://example.com/search"> 2 <label> 3 Texto: <input type="search" name="term"> 4 </label> 5 <input type="submit" value="buscar"> 6 </form> Computación Web (2017/18) Introducción a HTML 31
Formularios: elemento input Atributo type hidden text search tel url email password number range color Uso oculto, no visible en la página una ĺınea de texto una ĺınea de texto, con semántica de buscar número de teléfono URL absoluta dirección de correo electrónico una ĺınea de texto, para información sensible Número Número en el cual la precisión no es relevante Color Computación Web (2017/18) Introducción a HTML 32
Formularios: elemento input Atributo type datetime date month week time datetime-local Uso fecha y hora, con zona horaria UTC fecha (día, mes, año) fecha como mes (mes, año) fecha como semana (número de semana, año) hora, sin zona horaria fecha y hora, sin zona horaria Computación Web (2017/18) Introducción a HTML 33
Formularios: elemento input Atributo type checkbox radio file submit image reset button Uso cuadro marcable botón marcable, sólo se marca uno por grupo Fichero Botón de envío Imagen de envío (con coordenadas) Botón de vuelta al estado inicial del formulario Botón genérico Computación Web (2017/18) Introducción a HTML 34
Formularios: elemento select Desplegable con varias opciones a elegir. 1 <label for="unittype">select unit type:</label> 2 <select id="unittype" name="unittype"> 3 <option value="1">miner</option> 4 <option value="2">puffer</option> 5 <option value="3" selected>snipey</option> 6 <option value="4">max</option> 7 <option value="5">firebot</option> 8 </select> Computación Web (2017/18) Introducción a HTML 35
Formularios: elemento textarea Cuadro de entrada de texto de varias ĺıneas. 1 <textarea name="mensaje" rows="5" cols="80" 2 placeholder="escribe tu mensaje..."></textarea> Computación Web (2017/18) Introducción a HTML 36
Formularios: atributos comunes de los controles Atributo name maxlength minlength disabled autofocus autocomplete Uso Nombre del control. Cuando se envía el formulario, se incluyen el nombre y valor del control. Máximo número de caracteres Mínimo número de caracteres Si presente, no se puede interaccionar con el control Si presente, el control recibe el foco al cargarse la página Toma valores on (por defecto) y off. Si el valor es off, el navegador no debe guardar el valor del control ni ofrecer sugerencias de autocompletado para el mismo. Computación Web (2017/18) Introducción a HTML 37
Formularios: atributos comunes del elemento input Atributo size readonly required multiple pattern min max step list placeholder Uso Tamaño visible del control (número de caracteres) Si presente, no se puede cambiar el valor Si presente, el control debe tomar un valor no vacío Si presente, se pueden subir múltiples valores para el control Expresión regular para validar el valor Mínimo valor en campos numéricos Máximo valor en campos numéricos Granularidad esperada para un valor numérico Listado de valores sugeridos al usuario (en combinación con el elemento datalist) Pista sobre cómo rellenar el control Computación Web (2017/18) Introducción a HTML 38
Formularios: agrupación de controles 1 <fieldset> 2 <legend>display</legend> 3 <div> 4 <label> 5 <input type="radio" name="c" value="0" checked> 6 Black on White 7 </label> 8 </div> 9 <div> 10 <label> 11 <input type="radio" name="c" value="1"> 12 White on Black 13 </label> 14 </div> 15 <div> 16 <label> 17 <input type="checkbox" name="g"> 18 Use grayscale 19 </label> 20 </div> 21 </fieldset> Computación Web (2017/18) Introducción a HTML 39
Formularios: sugerencia de valores 1 <label> 2 País <input type="text" name="pais" list="paises"> 3 </label> 4 <datalist id="paises"> 5 <option value="espa~na"> 6 <option value="portugal"> 7 <option value="andorra"> 8 <option value="francia"> 9 </datalist> Computación Web (2017/18) Introducción a HTML 40
Formularios: múltiples ficheros 1 <label> 2 Selecciona una o más fotos: 3 <input type="file" name="foto" multiple required> 4 </label> Computación Web (2017/18) Introducción a HTML 41
Compatibilidad con navegadores HTML5 está en constante evolución: Algunas características pueden no estar implementadas en determinados navegadores o versiones de navegadores. Es problemático dar soporte a navegadores antiguos y a la vez aprovechar las nuevas características. Recursos útiles: Bibliotecas Javascript, como Modernizr. Información de soporte por navegadores, como Can I Use. Computación Web (2017/18) Introducción a HTML 42
Ejercicios Práctica 1: Ejercicio 2.2. Computación Web (2017/18) Introducción a HTML 43
Referencias Rob Larsen, Beginning HTML and CSS. Wrox (2013). Acceso en Safari Capítulos 1, 2, 3, 4, 5 y 6. Especificación de HTML 5.1 del W3C: http://www.w3.org/tr/html51/ Especificación de HTML5 de WHATWG: http://www.whatwg.org/specs/web-apps/ current-work/multipage/ Computación Web (2017/18) Introducción a HTML 44