Este artículo forma parte del Curso HTML5 desde cero.
Haz click aquí para ver el índice.
Contenido del artículo
Introducción a HTML5
Las siglas de HTML significan Hypertext Markup Language. Es decir, HTML es en lenguaje de marcado, no es un lenguaje de programación.
¿Qué quiere decir? Que el código HTML sirve para definir la estructura y la semántica de nuestra página web. Por ejemplo, HTML es el código que usamos para escribir un título, un menú, una tabla, un enlace, una imagen, etc, etc. pero no para definir, por ejemplo qué diseño tendrá ese contenido(texto en negrita, imagen mas grande o pequeña, titulo centrado, etc).
En este curso vamos a trabajar sobre su último standar, HTML5, pero es importante que sepáis que han existido las siguientes versiones: HTML 2.0 de 1995, HTML 4.0 de 1997, XHTML del 2000 y HTML5 desde 2014.
Lenguaje de etiquetas
Lo primero que tienes que aprender es que todo el código HTML está definido por etiquetas. Las etiquetas es lo que le dice al navegador qué texto es el que está mostrando. Existen miles de etiquetas, se pueden añadir unas dentro de otras, se pueden combinar, e incluso se pueden indicar atributos a cada una de ellas (pero esto lo veremos más adelante).
Pongamos un ejemplo práctico -> ¿Cómo le indicamos al navegador que quiero escribir el siguiente texto?:
¡Hola mundo!
Buenos días.
Pues es bastante sencillo. Tenemos que «encerrar» cada bloque de texto para indicarle que es un párrafo, que dentro del párrafo tenemos una palabra en negrita y un salto de línea. Quedaría así:
Todas las etiquetas están encerradas por los símbolos menor que «<» y mayor que «>«. Es decir, si hemos abierto un párrafo con <párrafo>, al finalizar el párrafo deberemos de poner </párrafo>.
El código de antes era un ejemplo. Hemos de pensar que HTML está hecho en inglés, y por lógica los nombres de las etiquetas son abreviaturas inglesas.
Veamos cómo sería el código HTML del ejemplo anterior, ahora ya con etiquetas reales:
> Sobre etiquetas:
- El código HTML no interpreta los INTROs. Es decir, el echo de que nosotros escribamos código HTML y pulsemos la tecla ENTER (o intro) no servirá para dar un salto de línea.
- Utilizamos los ENTER y las TABULACIONES para colocar el código HTML y que sea más fácil de leer y editar.
- La mayoría de etiquetas tienen una de apertura y una de cierre, pero no todas.
- <br/> Esta etiqueta añade un salto de línea. No tiene apertura y cierre, sólo se escribe ese código y añade un salto de línea. ¡Fácil y sencillo!
- <p> Esto es un párrafo </p>
- <strong> Esto es un texto destacado (parecido a la negrita) </strong>
- <b> Esto es un texto en negrita </b>
- <em> Esto es un texto en cursiva </em>
- <a> Esto es un texto enlazado </a>
Hay más de 100 etiquetas en HTML5. En este curso veremos las más importantes y las más utilizadas. No obstante, aquí tenéis el listado de referencia donde además podéis consultar cuáles son antiguas y cuáles son novedades de HTML5: W3Schools.com/tags/default.asp
¡A practicar!
Con lo que has leído y aprendido haz la siguiente tarea:
- Encuentra cualquier noticia que haya en internet (en un periódico, revista online, etc). Localiza un artículo no muy extenso y utiliza las etiquetas HTML que acabas de ver para estructurar correctamente el texto.
- Utiliza <p> y </p> para marcar los párrafos.
- Utiliza <b> y </b> para marcar las letras o palabras en negrita.
- Utiliza <em> y </em> para los textos en cursiva.
- Además, encontrarás títulos y subtítulos. Como aún no conoces estas etiquetas, usa las tuyas inventadas, como por ejemplo <título> <título> y </subtítulo1> </subtítulo1>.
- Te recomiendo que realices esta tarea entre 3 y 5 veces, a ser posible en días diferentes, y con noticias de páginas diferentes. Te ayudará a entender las etiquetas y estructuras.
Aprovecha los comentarios para hacer cualquier pregunta sobre lo explicado o sobre cualquier ejercicio que estés haciendo, o incluso sobre tu propio proyecto. Te ayudaré encantado.
Ahora toca asentar conocimientos y, después, ¡a por el siguiente módulo!
