4 minute read
Etiquetas HTML
EtiquetasEtiquetas HTMLHTML
HTML es un lenguaje de marcas (etiquetas) para formatear y estructurar un documento, que puede leerse en cualquier navegador. Está estandarizado por la norma ISO de SGML (Standard Generalized Markup Language).
Advertisement
Un documento HTML tiene tres etiquetas que describen su estructura y dan una información sencilla sobre él:
<html>, <head> y <body>
Las etiquetas pueden escribirse tanto en mayúsculas como en minúsculas, pero se recomienda el uso de minúsculas.
Si escribimos, por ejemplo, el siguiente código en un editor (prueba con el bloc de notas), lo guardamos como pag1.html
y luego lo abrimos en un navegador de internet, obtendremos lo que se observa en la siguiente imagen.
<!DOCTYPE html> <html> <meta charset= "UTF-8"> <head> <title>Primer ejemplo</title> </head> <body> Mi primer ejemplo en HTML </body> </html>
En el siguiente vídeo, observa cómo lo hicimos con el bloc de notas.
En este capítulo usaremos otros editores que nos permiten verificar, rápidamente, nuestros códigos HTML. Por ejemplo, en los siguientes editores cambia la expresión "Mi primer ejemplo en HTML" , que hay en el <body> y presiona ejecutar3 (puedes ampliar el editor en una ventana emergente, para mayor comodidad)4 .
Obviamente, se trata de probar códigos cortos, pues para el diseño de las páginas del libro, debemos usar los editores de textos planos que presentamos en el apartado anterior.
0:00 / 0:41
3
4
El primer editor es diseñado por sangfo y, el segundo, por slidear, al estilo del Try it (inténtalo) de w3schools. También, puedes usar el editor que hemos puesto en la barra de herramientas.
¡Intenta con este!
¡Intenta con este!
Ahora, expliquemos el código anterior5:
La etiqueta <!DOCTYPE html> declara un documento HTML5 para que se visualice correctamente.
La etiqueta <html> declara que está codificado en este lenguaje y limita el principio y el fin del documento, representa la raíz del documento, y es el padre de todas las demás etiquetas que componen un documento HTML.
La etiqueta <meta charset='utf-8'> define varios tipos de
metadatos. El atributo charset específica la codificación usada en nuestra página, utf-8 es la Unicode Transformation Format 8-bit, que representa el código de caracteres UNICODE compatible con ASCII y permite visualizar los caracteres de todos los idiomas.
5
Para una mejor comprensión de este apartado, recomendamos escribir el código en el editor de textos planos, guardar la página creada y ejecutarla en un navegador (haciendo doble clic sobre el archivo).
La etiqueta <head> o cabecera contiene información y recursos sobre el propio documento y no aparece en el contenido del documento. En esta etiqueta se destaca el título <title>, que aparecerá en la pestaña del navegador.
La etiqueta <body> es el cuerpo del documento, que contiene los elementos visibles en la página: las imágenes, los encabezados, los párrafos de texto, las listas, las tablas, los hipervínculos, escenas interactivas, etcétera. Los documentos HTML deben tener la extensión html o htm para que puedan ser reconocidos por un navegador.
Textos habituales en HTML
Un documento HTML inserta en el texto etiquetas que contienen los diferentes aspectos de la presentación. Los textos habituales están formados por encabezados <h1>, <h2>, <h3>, …, párrafos <p>, listas <ul>, ol, <li>, etcétera. Siempre es bueno que el contenido este etiquetado para facilitar modificar su estilo y presentación. En el código de la siguiente página, hemos incluido varios de estos textos. En el siguiente vídeo puedes observar su edición en Notepad++ y cómo aparece en el navegador Chrome:
Las etiquetas o encabezados <h1>, <h2>y <h3> muestran textos en diferentes tamaños. Nuestro libro utilizará, especialmente, los dos primeros encabezados, cuyos estilos (tamaños, colores, fuentes, …) pueden ser modificados a gusto del diseñador.
0:00 / 0:31
¡Intenta con este!
