Introducción a los lenguajes de marcado
Un lenguaje de marcado es un sistema de codificación que utiliza etiquetas y marcadores para definir la estructura y el formato de un documento. En lugar de utilizar un lenguaje natural como el inglés o el español, los lenguajes de marcas utilizan instrucciones específicas para que las computadoras puedan entender y representar la información de manera coherente.
• Lenguajes de marcas
Documentos en general:
*HTML (HyperText Markup Language): Utilizado para crear páginas web y estructurar su contenido.
*Markdown: Empleado para escribir documentos de texto plano con formato ligero, como READMEs en GitHub.
*LaTeX: Utilizado en la producción de documentos científicos y técnicos de alta calidad tipográfica.
Tecnologías de Internet:
*XML (eXtensible Markup Language): Usado para el intercambio de datos estructurados entre diferentes sistemas.
*RSS (Rich Site Summary o Really Simple Syndication): Utilizado para la distribución de contenido web actualizado de manera uniforme.
*XAML (eXtensible Application Markup Language): Es un lenguaje de marcado utilizado principalmente en el desarrollo de aplicaciones de software, especialmente aplicaciones de Windows y aplicaciones web basadas en Silverlight.
Lenguajes especializados:
*SVG (Scalable Vector Graphics): Empleado para la representación de gráficos vectoriales escalables en la web.
*MathML (Mathematical Markup Language): Utilizado para representar expresiones matemáticas de manera estructurada en documentos web.
*CALS (Continuous Acquisition and Life-cycle Support): Utilizado en la industria para la estandarización de formatos de documentos técnicos y manuales.
Lenguaje de marcas HTML
El lenguaje de marcas HTML es un estándar reconocido en todo el mundo y sus normas están definidas en la página web del organismo W3C (World Wide Web Consortium) y en la página oficial del grupo de trabajo WHATWG (Web Hypertext Application Technology Working Group).
Reglas y normas HTML5
Seguir las reglas y normas de HTML5 es fundamental para garantizar que el código sea limpio, legible y fiable. Estas normas no solo facilitan la colaboración y el mantenimiento de proyectos, sino que también aseguran que las páginas web funcionen correctamente en todos los navegadores y dispositivos.
• Estructura basica:
Todo documento HTML5 debe tener una estructura básica que incluya las etiquetas ,
, y . La etiqueta es el elemento raíz y debe contener todas las demás etiquetas.
• Etiquetas en mayúsculas o minúsculas:
Las etiquetas HTML no distinguen entre mayúsculas y minúsculas. Por lo tanto, y son equivalentes. Se recomienda seguir siempre la misma sintaxis, preferiblemente letras en minúsculas.
• Caracteres especiales:
Algunos caracteres especiales, como <, >, &, ", y ', tienen significados especiales en HTML. Para incluir estos caracteres en tu código, puedes usar entidades HTML (< representa el símbolo <), su código decimal (< representa el símbolo <) o hexadecimal. Ver cómo representar caracteres especiales
• Código con tabulados y sangrías:
El código HTML indentado con tabulados facilita la lectura y su comprensión. Además, puede ayudar a evitar errores, ya que facilita la identificación de los elementos HTML. Por ello, cuando escribimos código HTML utilizamos la tabulación para entender mejor la estructura de etiquetas.
• Los saltos de línea y los espacios no tienen ningún efecto en el código HTML:
Los navegadores web ignoran los saltos de línea y los tabuladores en el código HTML contenido entre las etiquetas
. Para escribir espacios en blanco podemos usar y para escribir saltos de línea la etiqueta
.
• Uso de comillas:
Aunque HTML5 permite el uso de comillas simples (') alrededor de los valores de los atributos, es una buena práctica utilizar comillas dobles (") para que el código sea más consistente. Enlace
• Validación del código:
Utiliza herramientas de validación HTML para garantizar que tu código cumpla con las especificaciones y estándares HTML. Un código HTML válido es más compatible y menos propenso a errores.
• Pruebas en diferentes navegadores:
Prueba tu sitio web en diferentes navegadores y dispositivos para garantizar que se vea y funcione correctamente en todas partes.
Cierre de etiquetas en HTML5
Las etiquetas de apertura y cierre en HTML son aquellas que tienen contenido entre una etiqueta de apertura y una etiqueta de cierre. Para cerrar estas etiquetas, es necesario utilizar el símbolo de barra inclinada (/) o forward slash (aprender el vocabulario de los signos o símbolos en inglés) seguido del nombre de la etiqueta.
Realiza un ejercicio
Para empezar, vamos a crear nuestra primera página web mediante un editor de texto simple:
1-Crea un archivo de texto: Abre cualquier editor de texto simple como Bloc de notas en Windows o TextEdit en macOS.
2-Escribe el código HTML: Copia y pega el siguiente código en tu editor de texto:
3-Guarda el archivo: Guarda este código con la extensión .html. Por ejemplo, puedes nombrarlo como ejemplo.html. Ojo, el tipo de documento no puede ser txt, en el caso de Windows selecciona como tipo de documento «todos los archivos» y no te olvides de incluir la extensión .html junto al nombre del archivo.
4-Abre el archivo en el navegador:
Luego de guardar el archivo HTML, simplemente busca el archivo en tu explorador de archivos y haz doble clic en él. El navegador web predeterminado abrirá automáticamente el archivo HTML, mostrando la página web que has creado.
**Lo que se muestra en el navegador:**
Al abrir el archivo ejemplo.html en tu navegador, verás una página web que contiene un título principal (< h1 > ), un párrafo de texto (< p >), un subtítulo (< h2 >) y una lista (< ul >).
A lo largo del curso trabajaremos con diferentes etiquetas y elementos HTML modificando este código según nuestras necesidades mediante un editor de texto como Visual Studio Code.
