Wikilibros

Diferencia entre revisiones de «Lenguaje HTML/Estructura de un documento HTML»

Explorar historial interactivamente
← Edición anteriorEdición siguiente →
Contenido eliminado Contenido añadido
VisualWikitexto
Página reemplazada por ' <nowiki> <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> <...'
Línea 1:
{{navegador|libro=Lenguaje HTML
|actual=Estructura de un documento HTML
|anterior=El código
|siguiente=Formateo de texto
}}
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:
 
:&lt;!DOCTYPE&gt;
::&lt;'''html'''&gt;
::: &lt;'''head'''&gt;
::: &lt;/'''head'''&gt;
::: &lt;'''body'''&gt;
::: &lt;/'''body'''&gt;
::&lt;/'''html'''&gt;
 
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).
 
==DOCTYPE==
Define el tipo de documento.<br>
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.
<pre><nowiki><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"></nowiki></pre>
*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.
<pre><nowiki><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"></nowiki></pre>
*frameset: este doctype es igual al transitional más los elementos específicos para la creación de marcos.
<pre><nowiki><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"></nowiki></pre>
 
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.
 
==Elemento '''html'''==
Delimita el documento HTML, indicando al navegador el comienzo y fin de la página html. <br>
Sus etiquetas son: &lt;'''html'''&gt; (Siempre al comienzo despues del doctype) y &lt;/'''html'''> (Siempre al terminar el documento); (ambas opcionales ¡úsalas de todos modos!)
 
==Elemento '''head'''==
'''head''' viene del ingles ''cabeza'' y su funcion es delimitar cabecera del documento.<br>
Sus etiquetas son: &lt;'''head'''&gt; y &lt;/'''head'''>; (ambas opcionales ¡úsalas de todos modos!)<br>
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:
 
===Elemento '''title'''===
Indica el título del documento.<br>
Sus etiquetas son: &lt;'''title'''&gt; y &lt;/'''title'''>; (ambas obligatorias), por ejemplo:
 
<nowiki>
<doctype>
<html>
<head>
<'''title'''>Turismo en sudamerica</'''title'''>
</head>...
</nowiki>
 
==Elemento '''body'''==
Delimita el cuerpo del documento.<br>
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: &lt;'''body'''>, (Para delimitar el comienzo); y &lt;/'''body'''>, (al terminar, siempre antes de </html>)<br>
 
Continuando con el documento de arriba, ejemplo:
<nowiki>
...<'''body'''>
El Turismo en sudamnerica...
<'''/body'''>
</html>
</nowiki>
La etiqueta '''&lt;body&gt;''' puede tener los siguientes atributos: <br>
 
<ul>
<li>text="..." color del texto
<li>link="..." color de enlaces no visitados
<li>vlink="..." color de enlaces visitados
<li>alink="..." color del link activo
<li>bgcolor="..." color del fondo
<li>background="..." Imagen de fondo
</ul>
 
== 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:
<nowiki>
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http&#58;//www.w3.org/TR/html4/strict.dtd">
Obtenido de «https://es.wikibooks.org/wiki/Lenguaje_HTML/Estructura_de_un_documento_HTML»