Empezando por lo básico
En primer lugar, como supongo ya sabes, la estructura de una página web se compone de las etiquetas
html de apertura (
<html>) y cierre (
</html>) y que arropan a las dos partes del documento. Al
<head> (apertura y cierre) y al
<body> (apertura y cierre).
Todo esto viene precedido por dos declaraciones obligatorias.
- La declaración del
tipo de documento:
Como ves, una declaración supersencilla. Antes, no era así.
- Y la declaración del idioma que vamos a emplear para escribir nuestro contenido:
En nuestro caso
lang (language),
es,
(español).
Luego en el
head, tenemos que hacer, al menos, cuatro declaraciones.
- La primera el juego de caracteres que vamos a utilizar que, en nuestro caso es el
UTF-8 que se corresponde con los caracteres del idioma español.
- En segundo lugar, un tema importante para que nuestro sitio web sea
"responsive", es decir que se pueda ver más o menos igual de bien, independientemente del
device, es decir, del instrumento o herramienta con el que accedamos a la página web, sea ordenador PC, portátil, tablet o smartphone.
<meta name="viewport" content="width=device-width, initial-scale=1">
- En tercer lugar, un vínculo a la hoja de estilos que va a controlar y dar forma a las etiquetas de nuestro
html. Es un
link, un vínculo, a la ruta relativa en la que se encuentre nuestra hoja. Por ejemplo si se llama
nuestro-estilo.css y está en la carpeta
css que se encuentra en el mismo nivel que la página web desde la que se le llama, sería este código:
<link rel="stylesheet" href="css/nuestro-estilo.css">
- Y, por último, e importante para los motores de búsqueda, es poner un título a tu página. Un
title. En este caso, hemos puesto esta etiqueta:
<title>HTML 5 y CSS 3</title>
Y ya, en el
body, que va a ser lo que el visitante vea en su pantalla, escribimos todo lo que haga falta.
Por poner nuestro primer contenido, podría ser un título (que podría ser el mismo que hemos puesto en el
head. Para ello, lo colocamos entre las etiquetas de
<h1> y
</h1>. Se podría hacer de otras muchas formas pero, si queremos que nuestra web sea encontrada por los motores de búsqueda, esta forma de definir el contenido, entre las etiquetas
<h1> que hace referencia a
head,
cabeza, siendo el
h1 (llega hasta
h6 la de mayor tamaño), ya decimos, ayuda a los robots a identificar el tema del contenido de la web.
<body>
<h1>HTML 5 y CSS 3</h1>
Resumiendo, este sería el código que hemos escrito en nuestra primera página:
<!DOCTYPE html>
<html lang = "es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/nuestro-estilo.css">
<title>HTML 5 y CSS 3</title>
</head>
<body>
<h1>HTML 5 y CSS 3</h1>
...
</body>
</html>
Puedes ver, en una ventana nueva emergente, la página web con este mínimo contenido en funcionamiento. Hemos puesto el
title en el
head y el título (
<h1>) del primer documento, como "
HTML 5 y CSS 3". Una vez abierta esta página, puedes usar el botón derecho de tu ratón para acceder al código fuente y comprobar la sintaxis.
Pulsa para ver esta mínima página web en ventana emergente