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
m Revertidos los cambios de 186.80.5.245 (disc.) a la última edición de Roque alonso
Formato y otros arreglos
Línea 4:
|siguiente=Formateo de texto
}}
En esta sección conoceremos los cuatro elementos básicos que "marcan"forman la estructura de un documento HTML.
Pero antes de nada veamos el esqueleto de un documento HTML vacío:
 
<source lang="html4strict">
:&lt;<!DOCTYPE&gt;>
::&lt;'''html'''&gt;
</html>▼
::: &lt;'''head'''&gt;
::: &lt;/''' <head'''&gt;>
</head>
::: &lt;'''body'''&gt;
::: &lt;/''' <body'''&gt;>
</body>
::&lt;/'''html'''&gt;
</html>
</source>
 
La primera línea 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 websmasterwebmasters 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 doctypeDOCTYPE:
 
*'''strict''': este doctypeDOCTYPE es el que contiene la definición de htmlHTML 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 doctypeDOCTYPE es igual al ''strict'', más algunos elementos y atributos antiguos que han quedado desfasadosobsoletos, pero que se conservan porpara aquéllo demantener 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 doctypeDOCTYPE 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>
 
Para HTML 5 existe un formato unificado:
<pre><nowiki><!DOCTYPE html></nowiki></pre>
De no poner el doctypeDOCTYPE, el navegador interpretará el código htmlHTML escrito tal y como le parezca mejor. Se obtendrán resultados muyimprevistos variopintose yinconsistentes distintosque depodrían esta forma,variar incluso entre dos versiones de un mismo navegador. Por lo tanto, lo mejor es poner '''siempre''' el doctypeDOCTYPE correcto.
 
==Elemento '''html'''==
Delimita el documento HTML, indicando al navegador el comienzo y fin dedel la página htmlmismo. <br>
Sus etiquetas son: &lt;'''<code><html'''&gt;></code> (Siempresiempre al comienzo despues del doctypeDOCTYPE) y &lt;<code></'''html'''></code> (Siempresiempre al terminar el documento); (ambas opcionales ¡úsalas de todos modos!)<br>
Ambas etiquetas son opcionales pero se recomienda usarlas de todos modos.
 
==Elemento '''head'''==
En inglés, '''head''' viene del inglessignifica ''cabeza'' y su función es delimitar la cabecera del documento.<br>
Sus etiquetas son: &lt;'''<code><head'''&gt;></code> y &lt;<code></'''head'''>;</code>. Al igual que las etiquetas <code><html></html></code>, (ambas son opcionales ¡úsalaspero se derecomienda todossu modos!)uso.<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. En general, los navegadores modernos lo muestran en la barra de título de la ventana.<br>
Sus etiquetas son: &lt;'''<code><title'''&gt;></code> y &lt;<code></'''title'''&gt;></code> (ambas obligatorias), por ejemplo:▼
 
▲Sus etiquetas son: &lt;'''title'''&gt; y &lt;/'''title'''&gt; (ambas obligatorias), por ejemplo:
 
<source lang="html4strict">
<html>
<head>
<title>Turismo en sudamérica</title>
</head>
...
</html>
</source>
Línea 61 ⟶ 64:
==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 nuestronuestra documentopágina (texto, imágenes, etc...)<br>
Sus etiquetas son: <code><body></code> y <code></body></code>, para delimitar el comienzo y el fin, respectivamente, del ''cuerpo'' de nuestro documento.<br>
 
Continuando con el documento de arriba, ejemplo:▼
Sus etiquetas son: &lt;'''body'''>, (Para delimitar el comienzo); y &lt;/'''body'''>, (al terminar, siempre antes de </html>)<br>
 
<source lang="html4strict">
▲Continuando con el documento de arriba, ejemplo:
...
<nowiki>
...<body>
El Turismoturismo en sudamericasudamérica...
</body>
...
▲</html>
</nowikisource>
 
La etiqueta '''&lt;<code><body&gt;'''></code> puede tener los siguientes atributos: <br>
 
<ul>
<li><code>text="..."</code> color del texto
<li><code>link="..."</code> color de enlaces no visitados
<li><code>vlink="..."</code> color de enlaces visitados
<li><code>alink="..."</code> color del link activo
<li><code>bgcolor="..."</code> color del fondo
<li><code>background="..."</code> Imagenimagen de fondo
</ul>
 
== Ejemplo ==
Si queremos crear nuestra primera página Webweb 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:
 
El código sería el siguiente:
<source lang="html4strict">
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http&#58;://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset=utf-8"/>
<title>Mi primera página</title>
</head>
<body>
<p>Hola mundo</p>
</body>
</html>
</source>
Obtenido de «https://es.wikibooks.org/wiki/Lenguaje_HTML/Estructura_de_un_documento_HTML»