Objetivos
• Comprender el funcionamiento y la finalidad del lenguaje Hyper Text Markup Language
(HTML) y JAVASCRIPT.
• Conocer la estructura del HTML y JAVASCRIPT.
• Identificar las mejoras, cambios o actualizaciones que se han realiado en el HTML.
El lenguaje HTML.
HTML siglas de Hyper Text Markup Language, es el lenguaje más utilizado para la creación de
páginas Web. Es un lenguaje bastante sencillo de aprender y de escribir. Los navegadores se
encargan de leer este lenguaje y “traducirlo” para el usuario.
Estructura de una página HTML
Cuando creamos una web, no solemos generar un único documento HTML, sino que enlazaremos
varios entre sí a partir de uno principal que nombraremos como index.html.
Cada uno de los documentos HTML que conforman nuestra web, estarán constituidos básicamente
por tres partes:
•Una línea con información sobre la versión de HTML.
•Una cabecera.
•Un cuerpo, con el contenido del documento.
Además, todo documento debe ir entre las etiquetas <html>…</html>.
El elemento DOCTYPE ya existía en versiones anteriores de HTML, lo que se hace a partir de
HTML5 es simplificarlo. Esta etiqueta sirve para identificar la versión de HTML en la que está
escrito el documento.
Por tanto, el DOCTYPE es una instrucción especial que se sitúa al inicio de un documento HTML y
permite al navegador entender qué versión de HTML estamos utilizando. A partir de esta
información, el navegador procesará el documento en consecuencia, de manera que un DOCTYPE
mal definido puede implicar una visualización no fiable del sitio web.
Indicar el tipo de documento en HTML5 es bastante simple, pues se utiliza:
<!DOCTYPE html>
Esta declaración, permitirá que incluso aquellos navegadores que no admiten HTML5 entren en
modo estándar, ignorando las características de HTML5 que no admiten.
Etiquetas modificadas
Hay algunos elementos que han sido modificados, vamos a compararlos con la versión antigua de
HTML.
•Etiquetas <a>: antiguamente esta etiqueta podía ser un hipervínculo o un ancla, ahora la
etiqueta <a> siempre es un vínculo, si no lleva el atributo “href”, es solo un marcador de
posición para un hipervínculo. Hay que tener cuidado porque muchos de sus atributos se
han cambiado.
•Etiqueta <address>: se puede usar varias veces en un mismo documento, indica una
forma de contacto referida al documento, a la sección o a un artículo. Pasa a ser un nuevo
concepto de sección.
•Etiqueta <b>: representa un trozo de texto a ser estilizado sin ninguna importancia.
•Etiqueta <label>: aparte del elemento al que puede hacer referencia también puede tener
definido el formulario al que puede hacer referencia.
•Etiqueta <menu>: se usa para crear los menús actuales. En las versiones antiguas se
desechó esta etiqueta, pero ahora se ha vuelto a reutilizar.
•Etiqueta <small>: antes se definía para representar el texto más pequeño. Ahora sirve
para definir texto pequeño y también para los comentarios secundarios.
•Etiqueta <strong>: en versiones antiguas definía el texto con énfasis, en la nueva
versión lo define como un texto importante.
Head
Las páginas XHTML se dividen en dos partes cabecera (<head>) y cuerpo (<body>). La cabecera
está formada por todas las etiquetas encerradas por su etiqueta.
La cabecera típica de HTML completa suele tener la siguiente estructura:
Title y atributos
La etiqueta <title> establece el título de nuestra página, los navegadores muestran este título como
el título de la propia ventana del navegador. Los buscadores utilizan ese título para los resultados de
búsquedas.
El valor title no es solo importante para los usuarios, sino que también es importante para que los
usuarios encuentren las páginas a través de los buscadores. Cada página debe tener su título corto,
adecuado, único y que describa inequívocamente los contenidos de la página, un error muy común
es tener el mismo título para todas las páginas.
La etiqueta <head> nos permite definir el atributo profile que contiene la URL de un documento
externo que contiene el perfil que siguen los metadatos de la cabecera.
Body
En HTML5 se produce una nueva estructuración del Body. Una diferencia bastante significativa de
esta nueva versión, es que añade nueva semántica y accesibilidad. HTML5 implementa una nueva
estructura, debido al aumento del uso de la etiqueta div para estructurar la Web en bloques en
versiones anteriores. Esta versión nos proporciona varios elementos que establecerán la
estructuración principal, sin necesidad de utilizar div.
Este cambio en la semántica hace que sea
más coherente y fácil de entender. Además,
brinda a los navegadores más facilidad a la
hora de buscar y a la hora de dar más
importancia a una determinada sección. Las
Web en HTML5, su body se dividirá en:
•<section></section>: representa una sección general dentro de un documento o
aplicación. Puede contener otra subsección y se acompaña normalmente de h1-h6 para
facilitar la estructura, creando jerarquías.
•<article></article>: representa un componente de la página que consiste en una
composición autónoma de un documento, página, aplicación o sitio Web. Podría ser:
mensaje en un foro, artículo de una revista o un periódico, entrada de Blog, comentario de
usuario, widget interactivo o gadget…
•<aside></aside>: representa una sección de la página que contiene normalmente un
contenido independiente de lo que le rodea, aunque también puede estar relacionado. Por
ejemplo: publicidad, barras laterales, efectos tipográficos, información del autor…
•<header></header>: representa la sección de encabezado. Donde se suele encontrar el
título del sitio Web, el logotipo o estructuras de navegación.
•<nav></nav>: representa una sección de una página que es un link a otras páginas o a
partes dentro de la misma.
•<footer></footer>: representa el píe de página, con información acerca de la página,
como el autor, el copyright o el año.
De esta manera, si tenemos una página HTML convencional...
En HTML5 quedaría de la siguiente manera:
Otros elementos nuevos de estructuración
Además de los descritos arriba, también se han introducido otros elementos de la estructura como
hgroup y figure. También se creó una etiqueta llamada “dialog” aunque esta finalmente quedo
suprimida.
<hgroup>
Sirve para agrupar un conjunto de uno o más elementos de encabezado (h1- h6), nos permite
agrupar en un mismo bloque un título y un subtítulo. Antes podíamos poner los títulos sin problema,
pero ahora se pueden usar estructuras para asignar prioridades de los elementos. Aunque esto solo
son ejemplos, se podrían estructurar:
•H1 para el título de nuestra Web.
•Div para el slogan de la cabecera.
•H2 para el título de la noticia.
•H3 para el subtítulo de la noticia.
•H3 para el título de una sección con información adicional en la columna de la derecha.
En resumen, esta nueva etiqueta englobaría títulos y subtítulos para ordenarlos y esquematizarlos.
<figure>
Representa varios contenidos, opcionalmente con un título que lo identifica. Está relacionado con el
flujo principal pero su posición es independiente a este. Se suele tratar de una imagen, ilustración,
diagrama, fragmento de código o un esquema al que se hace referencia en el texto principal. Se
puede mover a otra página o a un apéndice sin que afecte al resto del documento.
<figcaption>
Representa el título del elemento figure.
Identificadores de elementos: id y clases
El atributo id se emplea para identificar cada elemento HTML, estos identificadores deben ser
únicos en una misma página. No puede haber dos elementos diferentes con el mismo atributo id.
Para la sintaxis de los selectores de ID se utiliza el símbolo almohadilla (#) como prefijo del
nombre de la regla CSS. Así por ejemplo:
CSS:
#resaltar {color: red;}
HTML:
<p> Esto es un párrafo </p>
<p id="resaltar"> Esto es un párrafo resaltado en rojo </p>
El selector #resaltar lo tendremos definido dentro de nuestra hoja de estilo CSS, y sus reglas
únicamente afectarán al texto del segundo párrafo definido en el documento HTML (cuyo atributo
id es igual a resaltar).
Así mismo, podemos restringir el alcance de un selector de ID mediante la combinación con otros
selectores. El siguiente ejemplo aplica la regla CSS solamente al elemento de tipo <p> que tenga un
atributo id igual al indicado.
p#alerta {color: blue; }
Este tipo de práctica tendrá sentido cuando el archivo CSS se aplique sobre muchas páginas HTML
diferentes.
No se debe confundir el selector ID con otros selectores como:
/* Aplica la regla CSS a todos los elementos de tipo ‘p’ con atributo id=”alerta” */
p#alerta {….}
/* Aplica la regla CSS a todos los elementos con atributos id=”alerta” que estén dentro de cualquier
elementos de tipo ‘p’ */
p #alerta {….}
/* Aplica la regla CSS a todos los elementos de ‘p’ de la página y todos los elementos con atributo
id=”alerta” de la página */
p, #alerta {….}
El atributo “class” se emplea para indicar la clase o clases a las que pertenece un elemento. Una
misma clase se puede aplicar a varios elementos y un elemento puede tener asignadas varias clases,
separando el nombre de cada una de ellas con un espacio en blanco.
Para la sintaxis de class se utiliza el símbolo punto (.) como prefijo del nombre de la regla CSS. Así
por ejemplo:
CSS:
.resaltar {color: red;}
HTML:
<p> Esto es un párrafo </p>
<p class="resaltar"> Esto es un párrafo resaltado en rojo </p>
Así la clase resaltar se puede aplicar a cualquier elemento BODY ya que no tiene un elemento
HTML asociado con ella en la hoja de estilo. Al igual que con el atributo ID, podemos restringir el
alcance de un selector de class mediante la combinación con otros selectores. El siguiente ejemplo
aplica la regla CSS solamente al elemento de tipo <p>.
p.alerta {color: blue; }
Las clases pueden ser un método muy eficaz para aplicar diferentes estilos a secciones
estructuralmente idénticas de un documento HTML.
Una recomendación para el diseño es que los atributos deben utilizarse para mejorar la semántica
del documento, es decir añadir significado a cada elemento de la página. Se recomienda que los
valores asignados a id y class indiquen la función del elemento y no estén relacionados con su
aspecto o posición:
Los valores de los atributos id y class deben cumplir las siguientes restricciones:
•Solo pueden empezar con “-”, “_” o letra.
•El resto de caracteres pueden ser números, letras, “_” y “-”.
•Los navegadores distinguen entre mayúsculas y minúsculas.
•Es posible utiliza letras como ñ y acentos, aunque no es recomendable por problemas de
codificación.
Elementos agrupadores: div y span
Como hemos visto en puntos anteriores, las directivas div y span se utilizan para agrupar y delimitar
un área que puede contener cualquier tipo de elemento HTML al que habitualmente se le aplica
estilos CSS.
El elemento span se utiliza normalmente para delimitar áreas de texto, sin olvidar que en HTML
existen otras etiquetas que delimitar una parte del texto, usaremos span cuando ya no existen otros
recursos de contexto en HTML5 para delimitar alguna parte del texto.
Podemos por tanto definir el elemento <span> como un elemento neutro que no añade nada al
documento en sí, pero con CSS se puede usar para añadir características visuales distintivas a partes
específicas de texto en los documentos HTML.
La diferencia con la etiqueta div, es que como vimos <span> sólo funciona como contenedor en
línea, mientras que <div> trabaja como contenedor de bloque.
El uso de <span> será especialmente útil por ejemplo para:
•Edición de frases en párrafos
•Creación de botones: se puede usar span para dar un padding a un enlace creando el
efecto de botón.
•Agrupación de diferentes elementos en una línea: aunque no es muy común, podremos
definir y acomodar elementos como imágenes, textos o enlaces en una sola línea,
aplicando estilos para cada uno de ellos, y mostrarlos en línea sin que existan saltos de
línea, lo que ayuda a tener una buena alineación del contenido.
Por el contrario, usaremos <div> para:
•Maquetación web: es decir dar estructura al sitio web.
•Crear contenido flotante: es especialmente útil para crear un menú, imagen o algún tipo
de elemento flotante.
•Contenedor de contenedores: podremos poner un div dentro de otro div y así
sucesivamente, además de poder colocar otros contenedores como p, span o cualquier tipo
de elemento HTML.
