ESTRUCTURA BÁSICA DE UNA PÁGINA HTML

Etiquetas Head y Body

Toda página escrita en HTML debe cumplir con una estructura básica. Por tratarse de un lenguaje basado en etiquetas, se deben seguir algunas reglas: toda etiqueta se representa entre los símbolos mayor y menor ( < > ). Generalmente las etiquetas deben ser cerradas utilziando el símbolo diagonal ( / )

Ejemplo:

<head> etiqueta de apertura
...
</head> etiqueta de cierre

Lo que se escriba en el bloque comprendido entre la etiqueta de apertura y la etiqueta de cierre, tomará las caracterisitcas que la etiqueta tenga definidas, en este caso aplicará la cabecera de la página.

Todo dcomuento escrito en HTML se compone de dos partes: HEAD (cabecera) y BODY ( cuerpo). La etiqueta <html> define que se trata de un documento en HTML, para que sea interpretado por un navegador web.

HEAD contiene los metadatos del documento y los scripts (instrucciones en otros lenguajes) que modifican el comportamiento de la página. Aquí se coloca también el titulo del documento, el cual se visualiza en las pestañas del navegador.

BODY muestra el contenido de la página, es la parte visible por las personas a través de un navegador web

El siguiente ejemplo muestra un documento en HTML, la primera línea es una etiqueta relativa a la versión/variante de HTML que declaramos usar y que esta primera etiqueta no es estrictamente necesaria. Sirve únicamente para indicar qué estándar de HTML es el que declaramos usar, en este caso HTML5.

<!DOCTYPE html>

<html>

<head>

<title>Título de la página web</title>

...

</head>

<body>

Cuerpo de la página web

</body>

</html>

CABECERA DEL DOCUMENTO (HEAD)

La cabecera del documento está comprendida entre <head> y </head>. En ella se debe encontrar, obligatoriamente, el título entre las etiquetas <title> y </title>.

El título de la página debe describir su contenido por ejemplo: <title>Diseñando sitios web</title>

Además de la etiqueta title dentro de la sección de cabecera se suelen incluir otras etiquetas. La siguiente tabla muestra un resumen de elementos que pueden ir dentro de la etiqueta head.

Etiqueta en cabecera	Función	¿Es obligatoria?
<title>	Da un título al documento HTML	Sí
<link>	Define archivos vinculados	No
<meta>	Define metadatos como descripción y palabras clave	No
<script>	Delimita scripts o incluídos: por ejemplo javascript	No
<style>	Delimita definición de estilos	No

Ejemplo:

Etiqueta <meta>

<meta name="description" content="Conceptos básicos para elaborar sitios web con HTML">
<meta name="keywords" content="diseño web, programación html, internet, aprender">

En este caso las etiquetas le indican a los buscadores el contenido de nuestras páginas (description) y algunas palabras clave (keywords) para su localización. Esto es muy útil para que nuestra página aparezca en los buscadores (google, bing, yahoo, etc.).

Etiqueta <script>.

Sirven para incluir código en lenguajes de script. como javascript, que es un lenguaje de programación que los navegadores son capaces de reconocer e interpretar. El código JavaScript se reconoce porque va comprendido entre las etiquetas

CUERPO (BODY) DEL DOCUMENTO HTML

El cuerpo (body) del documento html es lo más importante. Es aquí donde debemos colocar el contenido de nuestra página: textos, imágenes, videos, sonidos, etc.

El cuerpo está delimitado por las etiquetas <body> y </body>.

Ejemplo de una página sencilla

<!DOCTYPE html>
<html>
<head>
<title>El primer documento HTML</title>
</head>

<body>
<p>El lenguaje HTML es <strong>tan sencillo</strong> que prácticamente se entiende sin estudiar el significado de sus etiquetas principales.</p>
</body>
</html>

En el cuerpo se utilizan etiquetas que van a dar forma a nuestro documento. Las etiquetas mas utilizadas son;

Etiqueta en cabecera	Función
<p>	Define Parte que debe mostrarse como un párrafo.
<br>	Representa un salto de línea.
<div>	Representa un contenedor genérico sin ningún significado especial.
<h1> <h2><h3><h4> <h5> <h6>	Los encabeados implementan seis niveles de cabeceras de documentos; <h1> es la de mayor y <h6> es la de menor impotancia. Un elemento de cabecera describe brevemente el tema de la sección que introduce.
<style>	Etiqueta de estilo usada para escribir CSS en línea.
<hr>	Coloca una línea horizontal en el texto para separar párrafos
<ul>	Define una lista de artículos sin orden.
<li>	Define un artículo de una lista ennumerada.
<a>	Representa un hiperenlace , enlazando a otro recurso.
<img>	Representa una imagen o foto
<table>	Representa una tabla

Puede consultar todas las etiquetas de HTML en este enlace

Siguiente: Dando apariencia a nuestra web