Llevo un tiempo sin publicar contenido en el blog, y hoy quería hacerlo con este pequeño post. Para aquellas personas que se quieren adentrar en la programación de páginas web, les traigo una
Introducción a HTML 5.
HTML5 (HyperText Markup Language) es la 5ta revisión importante del lenguaje básico de la W3C, html. Publicado el 28 de octubre de 2014. HTML se emplea únicamente para definir la estructura y el contenido o información de una página web, la presentación visual no se define con HTML.
El lenguaje HTML está formado por etiquetas, que se escriben encerradas por corchetes angulares "menor qué" (<) y "mayor qué" (>). Desde que el lenguaje HTML se creo en el año 1990, el número de etiquetas que posee ha ido aumentando. Y en la actualidad, HTML5, está formado por más de 100 etiquetas.
El elemento es el componente básico de una página web. Una página web está compuesta por un conjunto de elementos escritos en un orden concreto. Un elemento se compone de una etiqueta inicial o de apertura, y una etiqueta final o de cierre.
La etiqueta final se define con una barra inclinada y el nombre de la etiqueta inicial.
En este ejemplo la etiqueta se llama p y define un párrafo de texto de la página. La etiqueta inicial puede llevar atributos, pero la final nunca lleva. En HTML los atributo puede llevar un valor. Por último las etiquetas pueden tener contenido, que es todo lo que se escriba entre la etiqueta inicial y la final. El contenido puede estar formado por otras etiquetas o puede ser simplemente texto.
Los elementos se pueden anidar, es decir, escribir unos dentro de otros.
El lenguaje HTML es un lenguaje, y como tal tiene su vocabulario y gramática.
Las etiquetas esenciales para crear una página web son:
- <html> esta etiqueta es la principal (raíz), sólo puede existir una.
- <head> define la primera parte de una página web, la cabecera. Normalmente esto no aparece representado en la página web cuando se visualiza.
- Dentro de la cabecera, podemos escribir la etiqueta <title> que es obligatoria y se emplea para definir el título de la página.
- <body> es el cuerpo y el contenido visible, esto sí que aparece representado en la página web cuando se visualiza en un navegador web.
- <h1>, ..., <h6> las etiquetas h1, h2, h3 y así, se emplean para definir encabezados o títulos en la página. Poseen 6 niveles de importancia, siendo h1 el más importante y h6 el nivel menos importante. Los que normalmente se utilizan son los niveles h1, h2 y h3. Muy rara vez utilizarás los niveles h4, h5 y h6.
- <p> se emplea para definir un párrafo de texto.
- <strong> se emplea para destacar un fragmento de texto importante.
- <em> se emplea para definir un texto enfatizado.
Con todas estas etiquetas, ya podemos crear nuestra página web sencilla. Les recomiendo que para empezar a programar, se descarguen el programa
Notepad ++ o
Sublime Text.
Ahora bien, una vez dentro de cualquier de los 2 programas, procederemos a escribir nuestro sitio web. Que en resumidas palabras nos quedaría así.
<!DOCTYPE html>
<html>
<head>
<title>Nombre de nuestro primer sitio</title>
</head>
<body>
<h1>Esto es un titulo</h1>
<h2>Esto seria un subtitulo</h2>
<p>Nuestro contenido no es cool, es <strong>RE COOL</strong></p>
<h2>Esto seria otro subtitulo mas</h2>
<p>Cada vez estamos mas cerca de poder configurar nuestro propio sitio web</p>
</body>
</html>
Siempre es recomendable que cuando escribas una etiqueta de inicio, automáticamente escribas la etiqueta de cierre. Así no se nos olvida.
Nuestro documento de HTML lo podríamos escribir en una sola línea, de esta manera:
<!DOCTYPE html><html><head><title>Nombre de nuestro primer sitio</title></head><body><h1>Esto es un titulo</h1><h2>Esto seria un subtitulo</h2><p>Nuestro contenido no es cool, es <strong>RE COOL</strong></p><h2>Esto seria otro subtitulo mas</h2><p>Cada vez estamos mas cerca de poder configurar nuestro propio sitio web</p></body></html>
Y visualmente se obtendría el mismo resultado. Pero normalmente se separa para que sea más fácil de leer y editar.
Una vez que tengamos nuestro sitio web, pasaremos a guardarlo con la extensión .html y ¡Gualá!
Espero que les haya sido de utilidad.
