===== HTML5 ===== Introducción ============= Es la última revisión del estándar HTML. Se incluyen algunas etiquetas nuevas cuyo significado se comentará a continuación. Etiquetas estructurales ======================== Crean la estructura para el resto de la página:, * doctype: identifica el estándar. * todo documento debe ir entre las marcas y . * Todo html tiene dos partes: head y body. El primero incluye otros elementos estructurales como ```` que indica el título de dicha página. Dentro del body se incluye el contenido real de la página. * Dentro del body pueden incluirse otras etiquetas que estructuran el contenido de la página: * La etiqueta ``<section>`` permite marcar contenido de una página relacionado con un tema concreto. * ``<article>`` es una unidad de contenido sobre un tema específico el cual puede ser independiente de otros "artículos". * ``<header>`` se utiliza para indicar cual es la cabecera de un artículo o sección. * ``<footer>`` permite definir un "pie de página", normalmente con indicación de derechos de autor, fecha o datos similares. * ``<address>`` se usa para marcar información de contacto. * ``<aside>`` se usa para definir contenido con "una relación vaga con el resto de la página" (definición tomada del estándar). * ``<hgroup>`` permite agrupar un conjunto de encabezados y marcarlos como pertenecientes al mismo contenido. * ``<h1>``, ``<h2>``, ``<h3>``, ``<h4>``, ``<h5>`` y ``<h6>`` establecen encabezados: trozos de texto que identifican la importancia del siguiente trozo de texto. * Cualquier etiqueta puede ir comentada. Los comentarios no se muestran, son solo de interés para el programador en un futuro. Un comentario se abre con ``<!--`` y se cierra con ``-->`` * La etiqueta ``<a>`` permite construir enlaces. * La etiqueta ``<nav>`` se utilizará para crear barras de navegación. * La etiqueta ``<aside>`` se utiliza para indicar información relacionada con el artículo o texto pero que no tiene porque ser parte del mismo. El ejemplo más común es utilizarlo para publicidad relacionada o texto del tipo "artículos relacionados con este". * Las etiquetas ``<script>`` y ``<noscript>`` se utilizan para marcar pequeños programas o la ausencia de ellos. * El elemento ``<main>`` indica **el contenido principal de una página** * La etiqueta ``<div>`` permite crear "divisiones" en el documento y nos serán muy útiles cuando hagamos posicionamiento. Una etiqueta muy similar, pero con un comportamiento distinto es ``<span>`` que permite dividir trozos de texto en un párrafo. * La etiqueta ``<details>`` junto con la etiqueta ``<summary>`` permite crear controles que ofrecen al usuario la posibilidad de "ampliar información" a voluntad. .. code-block:: html <body> <details> <summary>HTML5</summary> <p>Es la última revisión del lenguaje</p> </details> </body> * La etiqueta ``<hr>`` produce una línea horizontal. Etiquetas para definir metadatos ==================================== * En líneas generales, los metadatos más importantes se definen con la etiqueta ``<meta>``. Para el correcto visionado de los símbolos de nuestra página usaremos el atributo ``charset="...."`` * La etiqueta ``<base>`` define la URL raíz de toda la página. Permite cambiar fácilmente las URL de los enlaces de una página. * Esta etiqueta permite "intentar conseguir" que se vea bien una página antigua que no se pensó para dispositivos móviles: ´´<meta name="viewport" content="width=device-width, initial-scale=1">´´ * Podemos instruir a los buscadores sobre como tratar a nuestra página en cuanto a si indexarla o no y en cuanto a seguir los enlaces que ponemos (o no) con ´´<meta name="robots" contents="index, follow">´´ o <meta name="robots" contents="noindex, follow"> o <meta name="robots" contents="index, nofollow"> * Las etiquetas siguientes permiten insertar código CSS :´´<style>`` y ´´</style>``. Las veremos en profundidad en el tema sobre CSS. * Podemos insertar una descripción de nuestra página con ´´<meta name="description" content="Descripción.">´´ * Podemos insertar un icono con ``<link rel="icon" sizes="192x192" href="/ruta/icon.png">`` En realidad existen muchísimas variantes definidas por Google o Facebook pero no forman parte de ningún estándar por lo que no se comentarán (aunque eso no quita para que se utilicen muy a menudo) Etiquetas de formato ==================== Para el formateo elemental de textos se utilizan varias etiquetas: * ``<b>`` Formatea el texto en “negrita”. * ``<i>`` Lo pone en “itálica” (cursiva). * ``<u>`` Subraya el texto. * Las diversas etiquetas se pueden meter unas dentro de otras para obtener efectos como “cursiva, y negrita” o “subrayado y cursiva”, sin embargo las etiquetas deben cerrarse en el orden inverso al que se abrieron. * ``<sup>`` y ``<sub>`` fabrican respectivamente superíndices y subíndices. * ``<em>`` se utiliza para enfatizar un texto. * ``<p>`` Se utiliza para marcar el comienzo y el fin de un párrafo. * La etiqueta ``br`` se utiliza para hacer una ruptura en el flujo del texto. Se escribe en forma abreviada ``<br/>`` .. NOTE:: Una de las grandes preguntas es si escribir la etiqueta ``<br/>`` o ``<br>``. La respuesta corta es que da igual. La respuesta larga es que el W3C permite que *"aquellos elementos que nunca lleven nada dentro pueden indistintamente escribirse de manera autocerrada o simplemente sin cerrar"*. Así, en la cabecera podremos poner cosas como ``<meta...>`` o ``<meta... />`` * La etiqueta ``<abbr>`` permite usar abreviaturas. Ejemplo: ``El <abbr title="World Wide Web Consortiun>W3C</abbr>`` . * La etiqueta ``<acronym>`` se ha llegado a usar pero está **obsoleta** . * La etiqueta ``<blockqoute>`` se usa para indicar citas largas, por ejemplo. .. code-block:: html <blockquote> <p>En un lugar de la Mancha de cuyo nombre...</p> </blockquote> * La etiqueta ``<cite>`` permite indicar una cita breve, como en ``<p> Es habitual decir <cite>Alea jact est</cite></p>`` * La etiqueta ``<del>`` permite mostrar texto tachado. * La etiqueta ``<dfn>`` permite mostrar una definición. Los navegadores suelen mostrar esta etiqueta igual que ``<abbr>`` . * La etiqueta ``<ins>`` permite indicar texto que haya sido insertado a posteriori. Suele mostrarse en cursiva. * La etiqueta ``<mark>`` permite destacar texto de una manera muy llamativa. * La etiqueta ``<output>`` es como el control de un formulario pero se introdujo para recalcar que contiene el resultado de un cálculo. * La etiqueta ``<samp>`` está pensada para muestras (samples) de programas o resultado de ejecuciones. * La etiqueta ``<tt>`` imita los teletipos (estilo máquina de escribir). * La etiqueta ``<wbr>`` está pensada para ayudar al navegador a decidir donde "romper" una palabra y poner el guión. Gestión de espacios =================== Los navegadores web manejan el espacio de una forma un poco especial: * Si se pone uno o varios espacios en blanco o si se pulsa la tecla ENTER muchas veces el navegador mostrará *un solo espacio en blanco* * Para poner un espacio en blanco horizontal se puede usar la entidad `` ``. * Para hacer un salto de línea se puede usar la etiqueta ``<br/>`` (esta etiqueta no lleva asociada una etiqueta de cierra, es *autocerrada*) * Se puede indicar el comienzo y el final de un párrafo con ``<p>`` y ``</p>``. Una pregunta habitual es "¿Cuando se debe usar ``<p>`` y cuando ``<br/>?``. La respuesta es "depende". Una posible respuesta es que si se escriben varios párrafos relacionados es bastante habitual separarlos con ``<br/>`` mientras que si se ponen varios párrafos que hablan de distintas cosas es habitual usar ``<p>`` con cada uno de ellos, sin embargo no hay una respuesta universal., Entidades ========= Las entidades HTML permiten escribir determinados símbolos especiales que podrían confundir al navegador, así como otros símbolos que no aparecen directamente en los teclados: * < y > representan los símbolos < y >. * © * ™ * ® * € y ¥ * & Texto preformateado =================== Algunas marcas, como ``<pre>`` permiten obligar al navegador a que respete los espacios en blanco tal y como aparecen en la página original. Si se desea indicar que algo debe ser teclado por el usuario se usa la marca ``<kbd>``. Si se desea indicar que algo es una variable se puede usar la marca ``<var>``. La etiqueta ``<code>`` permite indicar que un determinado es código en un lenguaje de programación. Listas ====== Es una secuencia de elementos relacionados en torno a un mismo concepto Para abrir una lista de elementos se utilizan dos posibles marcas: * ``<ol>`` Para crear una lista ordenada (numerada) * ``<ul>`` Para crear una lista desordenada (no numerada) Una vez creadas hay que etiquetar cada elemento de la lista con la etiqueta ``<li>``. En un plano distinto se pueden encontrar las **listas de definiciones**. Con estos elementos se puede especificar una secuencia de términos para los cuales proporcionamos una definición. Su estructura es la siguiente: * ``<dl>`` y ``</dl>`` marcan el inicio y el final de la lista de definiciones. Dentro de estas etiquetas pondremos las dos siguientes. * ``<dt>`` y ``</dt>`` especifican el *término* que vamos a definir. * ``<dd>`` y ``</dd>`` indican la definición asociada al término anterior. Ejemplo: .. code-block:: html <dl> <dt>Etiqueta</dt> <dd>Todo lo contenido...</dd> <dt>Elemento</dt> <dd> Se define así a todo el árbol de nodos comprendido entre dos etiquetas de apertura y cierre. </dd> </dl> Ejercicio ---------------- Comprueba que el siguiente código HTML crea unas listas dentro de otras. Prueba a crear listas desordenadas dentro de listas desordenadas. .. code-block:: html <body> Antes de programar <ol> <li> Instalar JDK <ol> <li>Ir a oracle.com</li> <li>Buscar JDK</li> <li>Aceptar licencia</li> <li>Descargar</li> <li> Ejecutar setup.exe <ol> <li> Ejecutar como admin </li> <li>Comprobar</li> </ol> </li> </ol> </li> <li>Modificar variables de entorno</li> <li>Asignar más memoria</li> <li>Reiniciar</li> </ol> Prerrequisitos <ul> <li>Comprobar RAM</li> <li>Comprobar disco</li> <li>Comprobar arranque</li> </ul> </body> Tablas ====== Una tabla muestra un conjunto de elementos relacionados en forma de matriz. No deberían usarse para maquetar la posición de los elementos. Todo el contenido de la tabla debe ir entre las etiquetas ``<table>`` y ``</table>``. Las tablas se construyen de izquierda a derecha (por columnas) y de arriba a abajo (filas). Una tabla puede tener una cabecera, un cuerpo y un pie, especificados por ``<thead>``, ``<tbody>`` y ``<tfoot>``. La primera etiqueta dentro de ``<tbody>``, solo puede ser <tr>. **Cuidado al crear tablas, todo dato, o subtablas debe ir dentro de <td>, es absolutamente obligatorio** Para ser exactos una tabla puede llevar estas etiquetas: * ``caption``: permite asociar a una tabla un texto. * ``colgroup`` :permite asociar información a columnas usando dentro la etiqueta ``<col>`` . * ``thead``: dentro de ella a su vez pondremos una fila (``<tr>``) con celdas en las que la etiqueta es ``<th>`` * ``tbody``: utiliza las filas y columnas normales. * ``tfooter``: también usa ``<tr>`` y ``<td>`` de la forma habitual, sin embargo permite describir mejor el contenido de la tabla. Se utiliza para celdas con los valores acumulados o similares. Un ejemplo de tabla --------------------------- Se desea crear una tabla que represente los datos del medallero de unas olimpiadas y que se muestre de forma parecida a lo que muestra la figura: .. image:: tablamedallero.png :align: center :scale: 50% .. code-block:: html <table border="1"> <thead> <tr> <th>País</th> <th>Oro</th> <th>Plata</th> <th>Bronce</th> </tr> </thead> <tbody> <tr> <td>USA</td> <td>110</td> <td>115</td> <td>99</td> </tr> </tbody> <tfoot> <tr> <td>Total</td> <td>219</td> <td>247</td> <td>206</td> </tr> </tfoot> </table> Ejercicio sobre tablas ---------------------- Crea una tabla con la estructura siguiente: .. image:: tabla1.png :align: center :scale: 50% Solución -------- Un posible HTML que resuelve esto sería: .. code-block:: html <table border="1"> <tbody> <tr> <td>A</td><td>B</td> </tr> <tr> <td>C</td> <td> <table> <tbody> <tr><td>D1</td></tr> <tr><td>D2</td></tr> <tr><td>D3</td></tr> <tr><td>D4</td></tr> </tbody> </table> </td> </tr> </tbody> </table> Ejercicio sobre tablas (II) ---------------------------- Crea una tabla con la estructura siguiente: .. image:: tabla2.png :align: center :scale: 50% Solución -------- Un posible HTML que resuelve esto sería: .. code-block:: html <table border="1"> <tbody> <tr><td>A</td></tr> <tr> <td> <table> <tr> <td> <table border="1"> <tbody> <tr> <td>B1</td> </tr> <tr> <td>B2</td> </tr> <tr> <td>B3</td> </tr> </tbody> </table> </td> <td> <table border="1"> <tbody> <tr> <td>C1</td> <td>C2</td> </tr> </tbody> </table> </td> </tr> </table> </td> </tr> </tbody> </table> Ejercicio sobre tablas (III) ---------------------------- Crea una tabla con la estructura siguiente: .. image:: tabla3.png :align: center :scale: 50% Solución -------- Un posible HTML que resuelve esto sería: .. code-block:: html <!DOCTYPE html> <html> <head> <title>Solución al ejercicio propuesto el viernes
A1
A2
B1
B1-1
B1-2
C1
C1-1
C1-2
D1
D2
Ejercicio sobre tablas (V) -------------------------------------------- Crea una tabla con la estructura siguiente .. figure:: tablaeco1.png :figwidth: 50% :align: center Solución ------------------------------------------------------ .. code-block:: html
País Datos econ.
España
PIB:-0,1%
Déficit:5%
Paro 25,4%
USA
PIB:0,4%
Déficit:3%
Paro:11%
Ejercicio sobre tablas (VI) ------------------------------------------------------ Crea una tabla con la estructura siguiente .. figure:: tablaeco2.png :figwidth: 50% :align: center Solución ------------------------------------------------------ .. code-block:: html
España
I+D:7% IRS:13%
ALCA
I+D:3% Felic:38 Resto:42%
UE
España I+D:8% SS:25%
Resto UE I+D:13% Otros:28%
Ejercicio sobre tablas (VII) ------------------------------ Crea una tabla con la estructura siguiente .. figure:: tabla7.png :figwidth: 50% :align: center Solución ------------------------------------------------------ .. code-block:: html
A
B1
B2
B3
C1 C2
Ejercicio sobre tablas (VIII) ------------------------------ Crea una tabla con la estructura siguiente .. figure:: tabla8.png :figwidth: 50% :align: center Solución ------------------------------------------------------ .. code-block:: html
A1 A2 A3
B1
B2
Formularios =========== Un formulario permite que el usuario interactúe con la página por medio de una serie de controles Campo de texto -------------- Permite crear una zona donde el usuario puede escribir y se muestra un ejemplo a continuación. Tiene algunos atributos que se usan muy a menudo: * ``type`` indica el tipo de control * ``name`` será el nombre de la variable en JS (no lo usaremos por ahora) * ``id`` permitirá procesar el control de JS (no se usará por ahora) * ``value`` permite indicar un valor por defecto * ``size`` indica la anchura por defecto .. code-block:: html Un campo de texto puede llevar asociada una etiqueta ``label`` que indique al navegador que texto va con ese campo. Esto es de utilidad para programas lectores de páginas y en general para gente con discapacidad. .. code-block:: html