Para crear una página web se necesita un documento HTML utilizando tres elementos o tags principales que cualquier sitio Web usa: html, head y body.
Un documento web (o página web) es, como hemos apuntado en la introduccion, un conjunto de tags HTML que se escriben en un editor de texto plano (sin formato) y se ejecutan en un navegador web.
El esqueleto básico de HTML
CÓMO CREAR UNA PÁGINA WEB
Para crear un verdadero documento HTML comenzará con tres elementos contenedores:
Estos tres se combinan para describir la estructura básica de la página:
- <html>: Este elemento envuelve todo el contenido de la página (excepto la DTD)
- <head>: Este elemento designa la parte de encabezado del documento. Puede incluir información opcional sobre la página Web, como puede ser el título (el navegador lo muestra en la barra de título), palabras clave de búsqueda opcionales y una hoja de estilo opcional.
- <body>: Este elemento alberga el contenido de su página Web, es decir, aquello que queremos que aparezca en el área de navegación del navegador..
Sólo hay una manera correcta de combinar estos tres elementos. He aquí su colocación exacta, con el doctype al comienzo de la página:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Toda página Web utiliza esta estructura básica. Los puntos suspensivos (...) muestran dónde insertaría la información adicional.
Una vez colocado el esqueleto XHTML, debe añadir dos conectores más a la mezcla.
Toda página Web requiere un elemento <title> en la sección del encabezado. A continuación, deberá crear un contenedor para el texto en la sección del cuerpo de texto (<body>).
Un elemento contenedor de texto multiuso es <p>, que representa un párrafo. Veamos con más detalle los elementos que hay que agregar:
- <title>: Establece el título de la página Web, el cual tiene varias funciones. Primero, los navegadores lo muestran en la parte superior de la ventana. Segundo, cuando un visitante crea un marcador para la página, el navegador emplea el título para etiquetarlo en el menú Marcadores (o favoritos). tercero, cuando la página aparece en una búsqueda Web, el motor de búsqueda suele enseñar este título como primera línea en los resultados, seguido de un fragmento del contenido de la página.
- <p>: Indica un párrafo. Los navegadores no los sangran pero añaden un pequeño espacio entre varios consecutivos para mantenerlos separados.
He aquí la página con estos dos nuevos ingredientes:
<!DOCTYPE html>
<html>
<head>
<title>Bienvenido a mi sitio Web</title>
</head>
<body>
<p></p>
</body>
</html>
Si abre este documento en un navegador Web, verá que la página está vacía, pero ahora aparece el título.
Cuando un navegador muestra una página Web, el título se presenta en la parte superior de la ventana, con el texto al final. Si el suyo utiliza la navegación por pestañas, el título también aparece en ellas.
Tal y como está ahora, este documento HTML es una buena plantilla para futuras páginas. La estructura básica está en su lugar; simplemente necesita cambiar el título y añadir algo de texto.
Lo primero que tenemos que saber es que en toda página web existen dos partes claramente diferenciadas: la cabecera, o head, y el cuerpo, o body.
Vamos hacer es crear una carpeta, dentro de "Mis documentos", para almacenar los ficheros de prueba que vayamos a usar.
A esta carpeta la llamaremos pruebas-html en el resto de los ejercicios. Con la carpeta abierta, haga doble clic sobre el ícono que representa al bloc de notas.
Se le abrirá un documento en blanco.
Escriba el siguiente texto:
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
</head>
<body>
</body>
</html>
Cuando lo tenga escrito, guárdelo en la carpeta con el nombre plantilla.html.
Es vital que la extensión sea .html, ya que sólo por la extensión el sistema operativo reconoce este archivo como un documento web, y no como un simple y archivo de texto.
El nombre del archivo deberá escribirse como está, en minúsculas y sin espacios ni caracteres especiales.
Los únicos signos de puntuación admitidos son el punto (sólo uno), que lo usaremos para separar el nombre de la extensión y el guión bajo.
El nombre podrá contener letras y números, pero deberá empezar por una letra. Así mismo, nos abstendremos de meter en el nombre de un archivo letras acentuadas, eñes, cedillas, o cualquier otro carácter de algún alfabeto local.