Crea tu web, tutor html, css

Tu primera página web

En el apartado anterior viste la estructura elemental de un documento html básico y las etiquetas mínimas necesarias. Ahora verás el código que debes escribir para crear un página web usando HTML5
<!doctype html> <html lang="es-ES"> <head> <meta charset="utf-8"> <title> mi primera página</title> </head> <body> Este es el contenido de la página web básica. </body> </html>
Código HTML5 de la página de ejemplo (ejercicio00.htm).

Escribe este código en tu editor de textos y guárdalo con el nombre ejercicio00.html. Ábrela con el explorador que uses y verás que la página muestra la frase "Este es el contenido de la página web básica". Realmente ya sabes como crear una página web. Ahora toca ir perfeccionando y completando para mejorar tu página web,

La primera linea no necesita más explicaciones: solo define el tipo de documento. Es mucho más simple que la usada por los documentos escritos en HTML4.

<html></html> Marca el inicio y fin del documento. Como ves lleva un atributo lang con el valor "es-ES". Este atributo es opcional. Indica el idioma en que se escribe la página web. Puede usarse en otros bloques de la página web.

<head> </head> marca el inicio y fin de la cabecera del documento. Dentro va información sobre la página web, en este caso el título de la página, pero no se mostrará en el navegador.

<title></title> Etiquetas que encierran el título de la página que se mostrará en la barra del navegador. Este valor debe cuidarse pues es útil para que los robots de los buscadores localicen la página y la sitúen en un buen lugar.

<body></body> Marca la parte del documentodonde se pone el contenido de la página web en sí, es decir, lo que se mostrará en el navegador.

Para empezar es suficiente. Fíjate en las etiquetas usadas en esta página básica, verás que:

  • Las etiquetas tienen dos partes una de apertura y otra de cierre (salvo excepciones) rodeando al elemento al que afectan.
  • Una etiqueta puede llevar atributos: valores que modifican su función
  • La apertura se escribe entre dos ángulos <head>, <body>, <p>
  • El cierre se escribe entre ángulos pero con la barra invertida antes del nombre </head>, </body>, </p>
  • Las etiquetas no se pueden solapar, pero pueden estar contenidas unas en otras: <title> está contenido en <head>
<head> <title> </head> mi primera página</title> <body>
Código erróneo: Las etiquetas no se pueden solapar

Las etiquetas de cierre en muchas etiquetas pueden omitirse según el estandard si en el contexto se deduce el cierre, por ejemplo </li> que marca el final de un elemento en una lista podría omitirse si a continuación de ese elemento aparece otro. Es decir que la etiqueta de cierre está implicita aunque pueda no estar escrita, por ello lo aconsejable es escribir siempre las eqtiquetas de cierre de forma explicita.

<ul>
<li> Advertencias</li>
<li> Contenido</li>
</ul>
<!-- sería igual que -->
<ul>
<li> Advertencias
<li> Contenido
</ul>
Las etiquetas de cierre pueden estar implícitas en determinadas circunstancias. Pero mejor escribirlas siempre.

Los navegadores web pueden dejan pasar algunos errores de sintáxis en el código de la página, pero no debes fiarte de esto. Que tu página se vea bien no es suficiente, debe estar bien escrita. Por tanto intenta siempre escribir el código web sin errores de ningún tipo. Hay editores que advierten de los fallos de sintaxis que se puedan cometer, y además la W3C tiene heramientas online para ayudarte a detectar errores por mal uso de las marcas HTML y CSS (W3C validator).

El elemento charset nos asegura que los caracteres especiales del idioma se muestran correctamente .

Un juego de caracteres es una tabla donde se asigna un código a cada carácter.

El juego utf-8 asegura la compatibilidad del idioma en que esté escrita la página.