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).
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.