Qué es HTML para qué sirve y cómo funciona, es momento de explorar de qué se trata de una vez por todas, cómo crear páginas web con HTML de manera fácil. En esta entrada conoceremos HTML, para posteriormente adentrarnos en los elementos, etiquetas, etc.

Definición de HTML

HTML (por sus siglas en ingles, HyperText Markup Language), es un lenguaje de marcado que nos permite hacer la estructura de una página web. Tenemos que aclarar que HTML no es un lenguaje de programación, pues carece de mecanismos para ejecutar cálculos, repeticiones o condiciones, lo que sí es, es un lenguaje de marcado. Es un lenguaje que le indicará al navegador web qué tipo de elemento es el que está en la estructura de una página web.

¡Perfecto! Ahora veremos lo que necesitamos para empezar en html.

Cómo funciona HTML

Para que me entiendas, los navegadores web, como puede ser Firefox, chrome, safari, opera, etc. Se encargan de leer, interpretar ese código HTML con la que están hechas las páginas web y finalmente mostrar un contenido entendible para el usuario que visita dicha página web.

Entonces cuando tú accedes a cualquier página web, mediante cualquier navegador web, lo que hace el navegador prácticamente es pedirle al servidor donde este alojado dicha página web que le envíe dicho documento, entonces el servidor le enviará dicho documento HTML donde se encuentra el código HTML, el navegador recibe el documento, lo lee, interpreta y muestra el contenido al usuario final.

Así pues HTML es prácticamente la base de internet y tienes que aprenderlo, es tan sencillo que lo puedes hacer en muy poco tiempo, depende cuanto practiques y tu entusiasmo, con este curso puedes aprenderlo en un par de días, para hacerte un experto dependerá de ti, de cuanto practiques.

Pero muchos me dirán: pero yo he escuchado o visto o leído que las páginas web los hacen con leguajes de programación como PHP o java script y con CSS.

¡Aguanta! Es cierto, lo que ocurre es que en esos casos es PHP o JAVASCRIPT quien genera ese código HTML, pero al fin y al cabo es HTML lo que generan. Así que es muy importante que la aprendas. Ah, si no entendiste que es PHP o JavaScript o CSS, mejor, tranquilo lo veremos en su momento por ahora no nos debe interesar.

Que necesitamos para programar con html

1. Para empezar a escribir código HTML necesitamos un editor de código como puede ser: sublime text, notepad, visual studio code,  CoffeCup Free Editor, entre otros e incluso el famoso bloc de notas. Para escribir código HTML nos servirá hasta el editor más básico y sencillo.
2. Por otro lado necesitamos un navegador web que nos servirá para visualizar el resultado de nuestro código HTML en la pantalla.

¡Muy bien!

Cuando creamos un documento HTML debemos guardarlo con la extensión  .html o .htm para que el navegador pueda ejecutarlo como tal.

Entonces te toca a ti ahora mismo hacer lo siguiente:

Lista completa de pasos para empezar a programar en HTML

1. Abrir tu editor de código.
2. Crear un documento y guardarlo con la extensión .html o .htm, por ejemplo: proyecto.html en minúsculas.
3. Ahora que tienes guardado el documento, ábrelo con tu navegador web preferido, pero seguro que el navegador te muestra un documento en blanco, y es que aún no tenemos contenido, nada de código en nuestro archivo o documento HTML.
4. Ahora tenemos abierto nuestro documento HTML con el editor, en este caso bloc de notas, y por otro lado ese mismo documento lo tenemos abierto con nuestro navegador web.
5. Empezamos a escribir código html en el documento que acabamos de crear.

Entonces ¡manos a la obra!, pero antes termina esta lección.

¿Cómo indicamos mediante código  HTML al navegador el tipo de elemento que constituye a la página web?

Muy fácil, lo hace mediante etiquetas, etiquetas de apertura y  etiquetas de cierre. Así pues existen muchísimas etiquetas HTML para indicar qué elemento es, si es un título, un encabezado, un subtítulo, un párrafo, imagen o lo que sea.

Por ejemplo, para indicar un párrafo se utiliza la etiqueta <p> de la siguiente manera:

<p> MI PRIMER PÁRRAFO </p>

Siempre es esa forma: <etiqueta> contenido </etiqueta>

Como podemos ver la etiqueta se abre con los signos menor y mayor y la etiqueta de cierre también pero además  contiene un slash (/), seguido de la etiqueta y finalmente el cierre.

Siempre será en esa forma; hay excepciones y lo veremos. Las etiquetas ya son predefinidas y solo nos queda aprenderlas.

Otro ejemplo:Para indicar que un elemento es un SUBTITULO se utiliza la etiqueta <h2>

<h2> Este es un subtítulo</h2>

Conclusión de la introducción a HTML

En conclusión, si queremos hacer una página web ¿Cómo le dices a un navegador web que un determinado elemento se debe mostrar como un título o subtitulo o párrafo? O ¿Cómo le dices que es una imagen y cuál es esa imagen? O ¿Cómo le dices que este elemento es un formulario? ¿Cómo le dices al navegador web que este párrafo tiene que estar en negrita, cursiva, o ponerle un color o un tipo de letra? ¿Cómo le decimos al navegador web que este elemento es un enlace cuyo texto es “haz clic aquí”? ¿Y cómo le decimos a dónde tiene que apuntar ese enlace?

Bueno, todo eso y mucho más, se lo diremos con código HTML, mediante las etiquetas y atributos, ¡ya lo veremos!

¡Ah! Y por si fuera poco, HTML5 es una versión de HTML que nos permite agregar más elementos como audios, video, barras de progreso, formas geométricas, animaciones, etc. También lo veremos en su momento.

Así pues ¡ya sabes de qué va esto! Ahora nos toca despedazar, triturar a HTML para comérnoslo  enterito.

Muy fácil ¿verdad?, En conclusión, HTML utiliza etiquetas para indicar que tipo elemento es. En la siguiente lección veremos cómo se debe hacer en documento HTML para que funcione correctamente.

¡Vamos!