Lenguajes de Marcas
Capítulo 2: Lenguajes para la
visualización de información
HTML
1
2.
1.
HTML
Índice
El modelo de objetos del documento (DOM)
IES Jose Antonio Fernández Muriel
2
Profesor José Wall Sánchez
1.1 El modelo de objetos del documento
El Modelo de Objetos del Documento (DOM) es un API
(Application Programming Interface) estándar del W3C para
documentos HTML y XML. Proporciona una representación
estructural del documento que permite la modificación de su
contenido o su presentación visual. En resumen, comunica las
páginas web con los scripts o los lenguajes de programación.
Veámoslo con un ejemplo: Queremos representar la siguiente
página web:
IES Jose Antonio Fernández Muriel
Profesor José Wall Sánchez
3
Su código fuente es el siguiente:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Página sencilla</title>
</head>
<body>
<p>Esta página es <strong>muy sencilla</strong></p>
</body>
IES Jose Antonio Fernández Muriel
</html>
Profesor José Wall Sánchez
4
El código se transforma en el siguiente árbol de nodos:
IES Jose Antonio Fernández Muriel
5
Profesor José Wall Sánchez
La página HTML se ha transformado en una jerarquía de nodos,
en la que el nodo raíz es un nodo de tipo documento HTML. A
partir de este nodo, existen dos nodos en el mismo nivel
formados por las etiquetas <head> y <body>. De cada uno de
los anteriores surge otro nodo (<title> y <p>
respectivamente). Por último, de cada nodo anterior surge otro
nodo de tipo texto.
La ventaja de emplear DOM es que permite a los
programadores disponer de un control muy preciso sobre la
estructura del documento HTML o XML que están manipulando.
IES Jose Antonio Fernández Muriel
Las funciones que proporciona DOM permiten añadir, eliminar,
modificar y reemplazar cualquier nodo de cualquier documento
Profesor José Wall Sánchez
de forma sencilla.
En resumen, el DOM nos permite realizar
operaciones sobre el árbol de nodos de un documento creado
con un lenguaje de marcado, por ejemplo, una página web.
Nuestro interés ahora es conocer a fondo ese lenguaje de
marcado: HTML
6
2.1 EL LENGUAJE HTML
HTML fue lenguaje pionero para la creación de página web estáticas:
páginas que siempre tienen los mismos contenidos.
Aunque el mundo de las web ha cambiado mucho, con nuevos lenguajes y
mejor tecnología, HTML sigue jugando un papel esencial.
IES Jose Antonio Fernández Muriel
Profesor José Wall Sánchez
7
Pero en 2004 la W3C reabrió el debate de la evolución del HTML,
y se dieron a conocer las bases para la versión HTML5. No obstante,
este trabajo fue rechazado por los miembros del W3C y se daría
IES Jose Antonio Fernández Muriel
preferencia al desarrollo del XML.
Profesor José Wall Sánchez
Apple, Mozilla y Opera anunciaron su interés en seguir
trabajando en el proyecto bajo el nombre de WHATWG, que se basa
en la compatibilidad con tecnologías anteriores.
En 2006, el W3C se interesó en el desarrollo de HTML5, y en
2007 se unió al grupo de trabajo del WHATWG para unificar el
proyecto, resultando el HTML5 la última versión aprobada por la
W3C.
8
A. ¿QUÉ ES HTML?
Es el acrónimo del inglés HiperText Markup Language. Es un
lenguaje para documentos hipertexto: texto estructurado en el
que se incluye hiperenlaces a otros elementos (sonido, vídeo,
documentos). Con el hipertexto se especifica tanto estructura
(títulos, párrafos, listas, tablas,…) como los efectos (negrita,
cursiva, alineaciones, color de letra, fondo,…). Esta información
es interpretada por el navegador, el cual es el encargado de
reproducir la página web.
IES Jose Antonio Fernández Muriel
HTML es también un lenguaje de marcas o etiquetas
Profesor José Wall Sánchez
(instrucciones que estructuran el contenido de las páginas).
Estas etiquetas se pueden clasificar en:
9
1) Estructura lógica del documento: Determina todos los
elementos que forman parte del documento (párrafos, títulos,
etc..).
2) Diferenciación del texto mediante estilos: Las etiquetas
permiten añadir a lo distintos elementos diferentes estilos y
formatos (negrita, cursiva,…).
IES Jose Antonio Fernández Muriel
3) Incrustación de información o contenido externo:
Permiten definir Hiperenlaces.
Profesor José Wall Sánchez
4) Inserción de elementos multimedia e imágenes: Son
varias etiquetas especiales para ello.
10
2.2 LAS ETIQUETAS HTML
Un documento en HTML constará de dos elementos: los
contenidos del documento y las instrucciones (etiquetas), que
darán formato al contenido.
Por ejemplo:
<p>Esto es un párrafo normal.</p>
<p><b>Esto sigue siendo un párrafo, pero también está en
negrita.</b></p>
<p>Este párrafo tiene una palabra en <i>CURSIVA</i></p>
Norma básica: Se pueden aplicar muchas etiquetas a un
IES Jose Antonio Fernández Muriel
contenido, pero es fundamental que no se entrelacen, de manera
Profesor José Wall Sánchez
que siempre se pueda dibujar su árbol de nodos:
<p>
Si no, ¿cómo podríamos crear un árbol de
nodos de lo siguiente?
<i>
<p>Este párrafo <i>no cumple</p> la norma básica</i>
Este párrafo tiene
una palabra en
CURSIVA ¿<i> sería hijo de <p>? Mitad sí y mitad no
¿verdad? NO HAGAMOS ESTO.
11
A. FORMATO
Una etiqueta está formada por una o varias palabras reservadas:
palabras que tienen un significado especial. Está encerrada entre
los símbolos < y >
Existen dos formatos de etiquetas: las de inicio (apertura) y las de
fin (cierre).
Las etiquetas de fin y cierre son iguales salvo por el símbolo de la
etiqueta fin (/). El texto de las etiquetas puede estar en
MAYÚSCULAS o minúsculas, es indiferente.
IES Jose Antonio Fernández Muriel
Sintaxis: (etiqueta de apertura, elemento afectado, etiqueta de
cierre)
Profesor José Wall Sánchez
<etiqueta> elemento afectado </etiqueta>
Por ejemplo: <title>Ejemplo de etiquetas</title>
12
B. ATRIBUTOS
Son parámetros que modifican la etiqueta de inicio y apertura. El atributo es
también una palabra reservada. Su estructura es la siguiente:
<etiqueta atributo1="valor1" atributo2="valor2"> elemento </etiqueta>
Por ejemplo:
<a href="[Link] a Google</a>
NORMAS:
⚫ El orden en el que se escriban los atributos es indiferente.
⚫ Entre los pares atributo1="valor1" y atributo2="valor2" es obligatorio poner un
espacio en blanco.
⚫ Los atributos se escriben únicamente en la etiqueta de apertura.
⚫ Los atributos no se escriben nunca en la etiqueta de cierre. Finalizan al
IES Jose Antonio Fernández Muriel
cerrarse la etiqueta (</etiqueta>).
Nota práctica: muchas veces copiamos y pegamos código de un programa a otro. Si la
Profesor José Wall Sánchez
fuente es distinta, podemos estar pegando distintos tipos de comillas (“”,"", “”, “”...) y
nuestro código puede ser mal interpretado por el navegador web. LAS COMILLAS DEBEN
SER ESCRITAS EN EL PROGRAMA NOTEPAD++ PARA QUE NO DEN PROBLEMAS (no
dejar las que han sido pegadas desde otros programas).
13
2.3 ESTRUCTURA DE UN DOCUMENTO HTML
Un documento HTML tiene partes bien definidas que forman el
esqueleto del documento.
Para que el navegador muestre la página web de forma correcta:
1. El documento llevará la extensión .html o bien .htm
2. El documento llevará la principio la etiqueta <html> y al final la
etiqueta </html>.
3. Definido el lenguaje, se escribe el esqueleto del documento: la
IES Jose Antonio Fernández Muriel
cabecera y el cuerpo.
La cabecera: <head> </head>
Profesor José Wall Sánchez
El cuerpo: <body> </body>
Opcional: Incluir al principio del documento la etiqueta:
<!DOCTYPE html>
14
ESTRUCTURA DE UN DOCUMENTO HTML
<!DOCTYPE html>
<html>
<head>
Elementos de la cabecera
</head>
<body>
IES Jose Antonio Fernández Muriel
Contenido del documento
Profesor José Wall Sánchez
</body>
</html>
15
EJEMPLO EN HTML5: “[Link]”
<!DOCTYPE html>
<html>
<head>
<title>Mi primer título</title>
</head>
<body>
<h1>Mi primera cabecera</h1>
IES Jose Antonio Fernández Muriel
<p>Mi primer párrafo</p>
Profesor José Wall Sánchez
</body>
</html>
**La indentación no es obligatoria, pero ayuda mucho como ya
sabéis, y si no estás de acuerdo, comparar éste código con el
16
de la página anterior. ¿Con cuál de ellos es más fácil crear el
árbol de nodos del documento?**
A. LA CABECERA (head)
En la cabecera se incluirán las definiciones generales que afectan a todo
el documento. Los contenidos indicados en la cabecera no son visibles para
el usuario, con la excepción de la etiqueta <title>, que se utiliza para indicar
el título del documento y que los navegadores lo visualizan en la parte
superior izquierda de la ventana del navegador.
Otra etiqueta que se utiliza en la cabecera es <meta>
La etiqueta <meta> se utiliza para añadir información sobre la página.
IES Jose Antonio Fernández Muriel
Esta información puede ser utilizada por los buscadores. Los buscadores
consultan la información de la etiqueta <meta> de las páginas, buscando
Profesor José Wall Sánchez
coincidencias con lo que el usuario pretende encontrar.
Una de las partes más importantes de la “meta-información” de la página
son los “meta-datos”, que permiten incluir cualquier información relevante
sobre la propia página.
17
Los metadatos habituales utilizan solamente los atributos name y content
para definir el nombre y el valor del metadato:
<meta name="author" content="Juan Pérez" />
Permite también introducir en una página web un refresco automático de
unos segundos. Si se quisiera que tras 5 segundos se cargara la página de
Google, hay que escribir:
<meta http-equiv="refresh" content="5;URL=[Link]
IES Jose Antonio Fernández Muriel
También permiten definir la codificación del código fuente, es decir, qué juego
de caracteres hemos utilizado al crear la página:
Profesor José Wall Sánchez
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
O símplemente:
<meta charset="UTF-8">
Nota práctica: se debe escribir este metadato en todas las páginas para que
se muestren las tildes.
Más información: los meta tags más importantes 18
B. EL CUERPO (body)
La etiqueta <body> admite atributos globales para todo el documento. Define
aspectos generales como la imagen de fondo, el color de fondo, los vínculos,
etc..
Como ejemplo algunos atributos que modifican el color de distintos elementos
básicos
IES Jose Antonio Fernández Muriel
Profesor José Wall Sánchez
19
Los colores en HTML se pueden definir de dos formas:
• Su nombre en inglés: color=“blue”.
• Su notación hexadecimal: color=“#00ff00”
La mayoría de editores WYSIWYG incorporan una paleta de colores de fácil
uso.
También podemos cogerlos desde una web de colores “rgb”:
[Link]
Ejercicio: Hacer el “Caso Prá[Link]”, viendo el vídeo adjunto.
IES Jose Antonio Fernández Muriel
Profesor José Wall Sánchez
20
2.4 EL TEXTO EN HTML
Son etiquetas especiales con las que cuenta HTML destinadas al formato y
estructuración del texto
La mayor parte del contenido de las páginas HTML habituales está formado
por texto, llegando a ser más del 90% del código de la página. Por este
motivo, es muy importante conocer los elementos y etiquetas que define
HTML para el manejo del texto.
IES Jose Antonio Fernández Muriel
Profesor José Wall Sánchez
21