Mi primera página web con HTML 5

Tabla de contenidos

Para crear tú primera página web con HTML 5 solo se necesitan 2 cosas: 1 procesador de textos (Bloc de notas, sublimetext, etc) y conocimientos sobre el lenguaje de marcado HTML (HyperText Markup Language).

El fichero

El formato estándar de un fichero de una página web es un texto sin formato (esto hace referencia a que algunos procesadores de textos permiten definir el formato del fichero y esto puede afectar a una incorrecta interpretación de caracteres, por ejemplo en el bloc de notas si le damos a guardar como, abajo podemos cambiar la codificación del fichero, si la codificación es española debemos seleccionar UTF-8 esto hará que los caracteres latinos como ñs, acentos, etc… de la web se interpreten correctamente).

Códificación de una página web

Y este documento debe tener la extensión .html, por ejemplo: mi-primera-web.html. En cuanto al nombre del fichero debemos tener en cuenta un detalle. Cuando escribimos una URL por ejemplo: imacreste.com, que página se carga?. La página que se carga inicialmente es index.html, debe ser nuestra home.

Código fuente mínimo de una página web

<!DOCTYPE HTML>
<html lang="es-ES">
 <head>
  <meta charset="utf-8" />
  <title>Título de la web</title>
 </head>
 <body>
  <h1>Títular</h1>
  <h2>Subtitulo</h2>
  <p>párrafo</p>
 </body>
</html>

Una web se divide en los siguientes bloques:

Doctype: Indicamos la versión de HTML, en este caso HTML5.
Etiqueta html: Toda la web esta encapsula entre estas 2 etiquetas.
Etiqueta head: Es la cabecera de la página web, y por decirlo de alguna forma es la parte oculta, la que no se visualiza en el navegador de forma directa.
Etiqueta body: Es la parte que se visualizara.

Esta es la estructura de toda web. A partir de estas se pueden incorporar otras muchas, tanto en el head como en el body. Las etiquetas se componen de una apertura <html>, <body>, etc. y un cierre </html>, </body>, etc. Algunas etiquetas permiten abrirse y cerrarse en una sola línea <meta charset=»utl-8″ />. Observa que se usa / para indicar el cierre de una etiqueta.

Entre las etiquetas pueden ir otras etiquetas o texto plano. En el ejemplo vemos que entre las etiquetas h1, hay un texto, que luego se visualizara por pantalla pero por ejemplo podríamos hacer:

<h1><strong>Esto es un ejemplo de <negrita</strong></h1>

Tendríamos un texto plano pero la palabra negrita tendrá el formato negrita. No es momento de agobiarse hay muchas etiquetas y poco a poco iras aprendiendo y memorizando las más importantes.

Y las etiquetas pueden tener sus propiedades que hacen que varié su funcionamiento, por ejemplo en <html lang=»es-ES»> vemos la propiedad lang, en este caso estamos indicando que la página esta pensada para el español.

Ver ejemplo