Aprendamos HTML
Tiempo de lectura:
Publicado:
Actualizado:
Introducción
Son las siglas para HyperText Markup Language, o Lenguaje de Marcas de HiperTexto.
Es un lenguaje que nos sirve para crear el contenido y la estructura de una página web.
Anatomía de código HTML
Para poder utilizarlo, debemos aprender algunos conceptos.
Etiquetas y Elementos
El lenguaje está compuesto por segmentos de código a los cuales llamamos etiquetas. Una etiqueta sigue esta estructura:
<nombre>Es decir: signo <, nombre de la etiqueta, seguido del signo >.
Los nombres ya están predefinidos, y cada uno de ellos nos ayuda con tareas específicas, como mostrar texto, imágenes, videos, tablas, etc.1
Por ejemplo:
<body></body>… que nos ayuda a crear el cuerpo de la página.
La mayoría de las etiquetas deben venir en pares, donde a la primera la llamamos etiqueta de apertura y la segunda la llamamos etiqueta de cierre.
La etiqueta de cierre necesita una diagonal antes del nombre.
En medio de las dos podemos insertar contenido, por ejemplo; texto, más etiquetas, o una combinación de ambos.
<body> Contenido</body>A esta estructura le llamamos Elemento HTML.
Elementos vacíos
Existen Elementos que sólo necesitan la etiqueta de apertura, es decir, no pueden tener contenido. A este tipo de elementos se les considera elementos vacíos o de autocierre.
<br >Usualmente se le pone una diagonal después del nombre para hacer explícito que no puede tener contenido, pero deberían funcionar con o sin ella.
<br />Atributos
En la etiqueta de apertura de algunos elementos podemos encontrar segmentos de código a los que llamamos atributos. Nos ayudan a definir ciertos comportamientos de las etiquetas:2
<div style="color:blue;">Texto</div>En este caso estamos cambiando el aspecto del texto mostrado.
La estructura de los atributos es nombre="valor". En el ejemplo anterior style es el atributo definido y color:blue; es el valor.
Atributos globales
Existen atributos que pueden ser usados en todas las etiquetas, algunos ejemplos son: style, class y id. A estos los llamamos atributos globales.
Atributos particulares
También existen atributos que sólo se pueden usar en ciertas etiquetas, por ejemplo:
<a href="https://www.google.com/" target="_blank">Ir a Google</a>Esta etiqueta nos ayuda a agregar links o enlaces. En este caso tenemos una etiqueta con dos atributos: href y target, el primero le indica a dónde redirigirnos cuando le damos clic.
El segundo le indica que dicho enlace debe abrirse en una nueva pestaña.
Algunas etiquetas necesitan de ciertos atributos para funcionar correctamente. En el ejemplo anterior, href es uno de ellos, ya que si no hay enlace, la etiqueta sólo mostrará texto y no podrá redirigirnos a ningún lado.
Otro ejemplo es:
<img src="https://placebear.com/200/300" /><img> la etiqueta que nos ayuda a mostrar imágenes, donde src es similar a href. Siendo que le indica de dónde conseguir la imagen a mostrar.
Estructura básica de un documento HTML
Al usar un editor de código como VS Code, tenemos acceso a algunos atajos para generar código base para algunos proyectos. Si creamos un archivo HTML y utilizamos el autocompletado ! obtendremos el siguiente código:
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body></html><!DOCTYPE html> Indica que el tipo de documento será de tipo html. Con este código está implícito que usaremos la última versión del lenguaje.
Existen otros tipos de documento y versiones de HTML que podemos usar, pero para hacer proyectos web con las características más recientes del lenguaje podemos dejar la línea generada.
El segundo elemento es <html>, debemos incluir el resto de etiquetas para generar una página. Por defecto incluye el atributo lang="es", que le indica que el contenido será Aquí tenemos que insertar dos elementos más.
<head> es donde van las etiquetas con información importante para el navegador.
<body> es donde va el contenido que verá el usuario.
<meta charset="UTF-8" /> indica que usaremos uno de los sistemas de codificación de caracteres más usados en la web. Esto nos ayuda a evitar conflictos de visualización y compatibilidad con usuarios que visitan nuestra página desde otros países o utilizan otro lenguaje en su navegador.
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> nos ayuda a hacer que la pantalla se adapte a diferentes tamaños de dispositivos móviles para que el contenido no aparezca demasiado pequeño ni demasiado grande.
<title> nos ayuda a darle un nombre a la pestaña, lo cual también sirve cuando agregamos la página a marcadores.
Notas
-
Lista de Elementos HTML.
-
Lista de Atributos