En esta ocasión comprenderemos algunos conceptos básicos necesarios para comenzar nuestro camino como Desarrolladores Web.
¿Qué es HTML?
¿Alguna vez has escuchado decir, que HTML es un lenguaje de programación?
Absolutamente no! HTML no es un lenguaje de programación. Si bien es cierto, si es un lenguaje, pero se le conoce como un Lenguaje de Macado o Maquetación.Y por supuesto, que es muy importante en nuestro camino como Desarrolladores Web, ya que, en él estan estructuradas todas las páginas web que hoy conocemos.
HTML significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto). Es el lenguaje que usamos para poder estructurar nuestras páginas web, y que puedan ser visibles de una buena manera. Este lenguaje es un conjunto de etiquetas que el navegador interpreta y que determina como debe mostrarse el texto, imágenes y otros elementos que componen una página web.
Partes de una página web
Podemos dividir las partes de una página web en 2 partes:
- Cabecera (Head)
- Cuerpo (Body)
Estas 2 debemos tenerlas siempre presentes al momento que maquetamos y desarrollamos una página web. Acá te las explico más a detalle:
- Cabecera o Head: Es la parte "no visible" de la página web. Eso quiere decir, que todo lo que escribamos en la cabecera, no se podrá visualizar en nuestra página, pero, que si es muy importante, ya que, es donde se incluyen elementos como el título de la página, el idioma, información con respecto a los estilos, y muchas otras cosas.Cuer
- Cuerpo o Body: En esta parte, es donde incluimos todas las etiquetas que nos ayudarán a dar formato a nuestra págian web. Dentro de él, es donde crearemos la estructura que nuestra página web contendrár lo que incluimos etiquetas de texto, imagenes, videos, y muchas otras cosas.
Ahora bien, ¿Qué son las etiquetas?
Una etiqueta, también conocida como tag, es el código que se utiliza para marcar el texto de la página web, es decir, que es lo que nosotros usaremos para dar instrucciones al navegador sobre como mostrar el contenido en la página web. Por ejemplo, algunas etiquetas usadas son:
- <h1></h1>
- <img
- <br>
- <b></b>
- <label></label>
Si observamos bien, estas etiquetas, estan encerradas, entre signos de "mayor que" y "menor que". Esto es importante para identificarlas, ya que esto permite saber que una etiqueta se esta aperturando o se esta cerrando, lo que permitirá que nuestro navegador entienda como debe mostrar nuestro contenido en la página web. Ahora bien, veamos algunas partes importantes de nuestras etiquetas:
- Etiqueta de apertura
Son las etiquetas que vemos al principio de nuestro elemento, las cuales, se encuentran encerradas en <>. Estas indican en donde comienza a tener efecto el elemento, por ejemplo:
Si abrimos la etiqueta <h1>, estaremos indicandole al navegador que dentro de ella, escribimos un encabezado con una fuente grande, y que todo lo que se encuentre dentro de ella, tendrá ese efecto.
- Etiqueta de cierre
Estas etiquetas permiten cerrar nuestro elemento y se define con </>, lo que quiere decir, que el efecto de la etiqueta de apertura que hayamos creado, terminará hasta donde nosotros hayamos escrito nuestra etiqueta de cierre, por ejemplo:
Para cerrar nuestra etiqueta <h1> debemos usar </h1>, y todo lo que este dentro de ello, poseerá el efecto de encabezado con una fuente grande.
Además, es importante aclarar, que no todas las etiquetas html, poseen etiquetas de cierre, por lo que algunas bastará con escribir si etiqueta de apertura para lograr el efecto, pero lo veremos en proximas clases.
- Contenido
El contenido es todo lo que se encuentra dentro de nuestras etiquetas, es decir, es a lo que aplicaremos el efecto según la etiqueta, por ejemplo:
Dentro de nuestra etiqueta <h1>/<h1> podemos escribir el contenido que deseamos que se muestre asi:
<h1>Esta es mi primera etiqueta</h1>
Con esto conseguimos que todo nuestro contenido tenga el efecto de encabezado con fuente grande.
- Elemento
El elemento se hace referencia a todo lo anterior unido, es decir, en un elemento tenemos una etiqueta de apertura, el contenido y una etiqueta de cierre (Si es el caso de la etiqueta), es decir, es . una etiqueta con todas sus características. Esto es importante que lo conozcas, ya que en la mayoría de información de html, encontrarás esta característica, y debes comenzar a familiarizarte con ello.
- Atributos
Por último, tenemos un atributo. Esto hace referencia a información adicional de la etiqueta, la cual no será mostrada en nuestra página web. Estos atributos te permitirán dar un valor adicional, ya sea que necesites que realice alguna acción adicional, que tenga un identificador, darle un estilo sencillo y otras cosas más. Por ejemplo:
Podemos tener agregar el siguiente atributo a la etiqueta de imagen:
<img height="150px">
En este caso el atributo es "height", el cual nos permite asignar un alto a nuestra imagen
Ya conocemos los conceptos básicos con respecto HTML. Ahora es momento de ponerlos en práctica. En la próxima clase comenzaremos conociendo como podemos aplicar estas etiquetas para poder comenzar a maquetar nuestra página web.
Por último, si quieres conocer un poco más, te comparto un link, en donde podrás conocer estos y otros conceptos:
- https://developer.mozilla.org/en-US/docs/
Nos vemos la próxima clase ...