Lenguaje HTML / Estructura de un documento HTML
De Wikilibros, la colección de libros de texto de contenido libre.
En esta sección conoceremos los cuatro elementos básicos que "marcan" la estructura de un documento HTML. Pero antes de nada veamos el esqueleto de un documento HTML vacío:
- <!DOCTYPE>
- <html>
- <head>
- </head>
- <body>
- </body>
- </html>
- <html>
La primera linea está reservada al DOCTYPE (tipo de documento), después viene el documento HTML, que está dividido en dos secciones: head (cabecera) y body (cuerpo).
Contenido |
[editar] DOCTYPE
Define el tipo de documento.
Este elemento, que muchos websmaster obvian (incorrectamente), le indica al navegador la versión y tipo de HTML empleado en el documento. De esta forma, el navegador usará el modelo de renderización adecuado al tipo de documento.
Para HTML 4.01 existen 3 tipos de doctype:
- strict: este doctype es el que contiene la definición de html recomendada por el W3C.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
- transitional: este doctype es igual al strict, más algunos elementos y atributos antiguos que han quedado desfasados, pero que se conservan por aquéllo de la compatibilidad.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
- frameset: este doctype es igual al transitional más los elementos específicos para la creación de marcos.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
De no poner el doctype, el navegador interpretará el código html escrito tal y como le parezca mejor. Se obtendrán resultados muy variopintos y distintos de esta forma, incluso entre dos versiones de un mismo navegador. Por lo tanto, lo mejor es poner siempre el doctype correcto.
[editar] Elemento html
Delimita el documento HTML, indicando al navegador el comienzo y fin de la página html.
Sus etiquetas son: <html> (Siempre al comienzo despues del doctype) y </html> (Siempre al terminar el documento); (ambas opcionales ¡úsalas de todos modos!)
[editar] Elemento head
head viene del ingles cabeza y su funcion es delimitar cabecera del documento.
Sus etiquetas son: <head> y </head>; (ambas opcionales ¡úsalas de todos modos!)
La cabecera es la sección apropiada para incluir información sobre el documento, la mayoría de la cual no será mostrada a los lectores. Para incluir esta información tenemos diversos elementos, de momento solo comentaremos el más importante:
[editar] Elemento title
Indica el título del documento.
Sus etiquetas son: <title> y </title>; (ambas obligatorias), por ejemplo:
<doctype> <html> <head> <'''title'''>Turismo en sudamerica</'''title'''> </head>...
[editar] Elemento body
Delimita el cuerpo del documento.
Aquí van todos los contenidos de la página (texto, imágenes...) Todo lo que queremos mostrar a los lectores de nuestro documento.
Sus etiquetas son: <body>, (Para delimitar el comienzo); y </body>, (al terminar, siempre antes de </html>)
Continuando con el documento de arriba, ejemplo:
...<'''body'''> El Turismo en sudamnerica... <'''/body'''> </html>
La etiqueta <body> puede tener los siguientes atributos:
- text="..." color del texto
- link="..." color de enlaces no visitados
- vlink="..." color de enlaces visitados
- alink="..." color del link activo
- bgcolor="..." color del fondo
- background="..." Imagen de fondo
[editar] Ejemplo
Si queremos crear nuestra primera página Web en HTML 4.01 estricto, con un título original "Mi primera página", y un texto igualmente original "Hola mundo".
El código sería el siguiente:
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mi primera página</title>
</head>
<body>
<p>Hola mundo</p>
</body>
</html>
