Estructura básica de un documento HTML. Las etiquetas <!DOCTYPE>, <html>,<head>, <body>, <title>.
Una estructura básica de un documento HTML es la siguiente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mi primera web
</head>
<body>
<div>
Hola Mundo
<div>
</body>
</html>
La estructura básica para XHTML :
<html xml:lang="es" lang="es" xmlns="http://www.w3.org/1999/xhtml">
<title>Mi primera web
</head>
<body>
<div>
Hola Mundo
</div>
</body>
</html>
EJERCICIO PRÁCTICO
1.- Abrimos cualquier editor de texto (notepad, wordpad, gedit)
2.- Copiamos una de las dos estructuras básicas vistas anteriormente.
3.- Guardamos el documento con extensión .htm o .html (Archivo → guardar como).Ejemplo: ejercicio1.html
4.- Abrimos y visualizamos el contenido con un navegador (archivo → Abrir o haciendo clic sobre la página web guardada anteriormente).
Como resultado del ejercicio anterior vamos a ver que en el título de la página web (lateral superior izquierdo) de nuestro navegador vamos a ver el título de nuestra página web y en el contenido la frase Hola Mundo. Vamos a explicar el contenido que tiene nuestra primera página web:
La etiqueta <!DOCTYPE> nos sirve para realizar la definición de tipo de documento ( DTD ) de nuestra página web. Es decir, en la primera línea de nuestra página web vamos a indicar a nuestro navegador el tipo de documento que va a visualizar.
<a href="http://www.w3.org/TR/REC-html32">http://www.w3.org/TR/REC-html32</a>
DTD para HTML 3.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
DTDs para HTML 4.01
EL HTML 4.01 Strict no permite marcado de presentación con el argumento de que debería usar CSS en su lugar para eso. Así es como luce el DOCTYPE Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Las DTD transicionales (Transitional DTD) permiten algunos elementos y atributos antiguos que están en desuso:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Además, si está usando frames (marcos), para conseguir resultados válidos desde el validador SGML, necesitará el frameset DOCTYPE como el que sigue:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " href="http://www.w3.org/TR/html4/frameset.dtd">ttp://www.w3.org/TR/html4/frameset.dtd">
DTDs para XHTML
Las DTD XHTML son también Strict, Transitional y Frameset.
El XHTML Strict DTD es la más estricta de las DTD disponibles: no soporta etiquetas antiguas u obsoletas (como por ejemplo la etiqueta font) y el código debe estar escrito correctamente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
El XHTML Transitional DTD es como XHTML Strict DTD, pero las etiquetas en desuso están permitidas. Actualmente ésta es la DTD más popular:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
El XHTML Frameset DTD es la única DTD XHTML que soporta Frameset:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
La etiqueta <html> nos indica el comienzo y el final de una página web. Esta etiqueta obligatoriamente va a tener dos etiquetas la etiqueta <b> <head> </b> y <b> <body> (o frameset si va a contener frames). En la estructura básica XHTML vamos a tener los siguientes atributos:
xml:lang: Contiene el idioma en el que está escrito el documento.
xmlns: Este atributo define el espacio de nombres que va a ser utilizado en el documento.
La etiqueta va a contener todos los elementos no visibles en el contenido de nuestro documento. Entre las etiquetas que vamos a encontrarnos <title>, <meta>, <script> o <style> > que vamos a explicar más adelante.
La etiqueta <body>
va a ser el cuerpo de nuestra página web, es decir, los contenidos visibles de nuestra página web. En esta sección vamos a insertar el resto de etiquetas que vamos a ver en este apartado que según las últimas especificaciones irán incluidas en una etiqueta <div>.
La etiqueta body en la versión de HTML 3.2contenía los siguientes atributos obsoletos para HTML4 y no soportados en HTML5:
link(color): indicaba el color de los enlaces.
vlink(color): indicaba el color de los enlaces visitados.
alink(color): idicaba el color de los enlaces activos.
text (color): indica el color del texto.
background (url): indica una imagen para el fondo de la página.
bgcolor (color): indica el color de fondo de la página.
Ejemplo:
<body >
La etiqueta <title>
va a contener el título de nuestra página web dentro del navegador. El título va a ser fundamental a la hora de posicionar nuestra página web en los buscadores además es el texto con el que guardamos la página en nuestros favoritos.
EJERCICIO PRÁCTICO
La W3C nos ofrece una herramienta denominada validator (http://validator.w3.org/) que nos va a permitir validar online si la página web está bien escrita, es decir, si cumple las especificaciones o no. Esta herramienta nos permite verificar una url o página web ya publicada en Internet, un documento guardado localmente en nuestro ordenador o insertar en una caja de texto el código html que queremos validar. En nuestro caso vamos a validar nuestra primera página web realizada. Para ello vamos a ir a la página web y vamos a pinchar sobre la segunda pestaña "Validate by File upload". Vamos a seleccionar la página guardada anteriormente y vamos a pinchar sobre el botón "Check". Si todo es correcto nos aparecerá un mensaje de color verde indicando que nuestro código es válido. Por el contrario, si nuestra página no es válida nos aparecerá un mensaje con un encabezado con fondo rojo y nos explicará las razones por las que nuestro código es incorrecto.
Próxima entrada
Comentarios en HTML