Introducción al HTML5

Con este «post» quiero presentar un nuevo curso al que podéis acceder gratuitamente.

En este, quiero enseñar y/o consolidar las bases del «HTML» usando su versión mas actualizada («HTML5»).

Que es el HTML?

Es el lenguaje que permite crear la estructura de las paginas web y se basa en etiquetas.

Para declarar las diferentes secciones de la pagina web o sus características, lo haremos en el siguiente formato:  «< >» para abrirla y «</>» para cerrarla.

Ejemplo:

<etiqueta>     Contenido    </etiqueta>

Que necesitamos para crear una pagina web?

Necesitamos un editor de texto, del estilo de «notepad» – que incluye el sistema operativo Windows –  o un editor especifico para «HTML» como por ejemplo «Notepad++» o «HTMLpad».

No uses procesadores de texto como » Microsoft Word» o semejantes, dado que suelen crear codigo «sucio» debido a la automatizacion y a la generacion de etiquetas no deseadas.

Estuctura de una pagina web

Una vez sabido que es el «HTML» y que necesitamos para poder crear una web , empezaremos con la estructura básica de una pagina. Toda pagina web debe tener una cabecera y un cuerpo.

La cabecera contendrá la información necesaria para la pagina web (titulo, metadatos, lenguaje….) y el cuerpo tendrá todo el contenido de la pagina web.

Estructura básica:

Para crear una pagina web empezaremos creando un documento en blanco con la extensión «.html» y si es la pagina de inicio o «main page»  la llamaremos «index.html».

La primera etiqueta que contendrá nuestro documento es la de «DOCTYPE» que especificara la versión de «HTML» que estamos usando. En este caso la de «HTML5».

<!DOCTYPE html>

La etiqueta  «html», es la que  crea la estructura de la pagina y contendrá todas las etiquetas de dicha pagina web. Podríamos decir que esta etiqueta es realmente la pagina web.

En el interior de la etiqueta añadiremos la variable «lang» que servirá para definir el idioma de la web, los códigos de los idiomas los podréis encontrar en este enlace: CODIGOS ISO 639-1 .

<!DOCTYPE html>

<html lang=»es»>

<!– (CONTENIDO WEB) –>

</html>

En el interior de la etiqueta «html» crearemos la etiqueta «header» para la cabecera y la etiqueta «body» para el cuerpo de la pagina.

<!DOCTYPE html>

<html lang=»es»>

<head>

<!– (CABECERA) –>

</head>

<body>

<!– (CONTENIDO WEB) –>

</body>

</html>

Con este ultimo código tendríamos una pagina web creada. Ahora toca añadir contenido y estilos.

Para añadir contenido deberemos conocer las diferentes etiquetas que ofrece el «html» y como personalizar estas.También necesitaremos aprender a crear «clases» e «ID» para dar un formato especifico a las etiquetas a las que asignemos esta clase o identificador.

Para dar formato o personalizar usaremos el «CSS» y para ello deberemos aprender a crear paginas «CSS» o también conocidas como «hojas de estilos«.

No olvidéis comentar y espero que os haya servido.

Siguiente tutorial..

Deja un comentario