HTML

HyperText Markup Language

¿Qué es HTML?

Es un lenguaje de marcado, NO de programación.
Se utiliza para crear y estructurar el contenido de sitios web.
Está basado en etiquetas para marcar diferentes elementos de una página, tales como encabezados, párrafos, listas, imágenes y enlaces.

Etiquetas HTML

Son la base de la estructura de un documento web.
Cada etiqueta tiene un propósito específico y define cómo se debe mostrar el contenido en el navegador.
Se escriben entre corchetes angulares < y >, y generalmente vienen en pares: una etiqueta de apertura y una etiqueta de cierre.
La etiqueta de apertura marca el inicio de un elemento, mientras que la etiqueta de cierre marca el final del elemento. La etiqueta de cierre siempre lleva una barra diagonal / antes del nombre de la etiqueta.

<!-- Esto es una etiqueta de comentario -->

<!-- h1 Etiqueta de título principal -->
<h1>Hola Mundo</h1>

<!-- Etiqueta de imagen, no cierra con par -->
<img src="/centro-logo.svg" alt="CENTRO" width="100">

Estructura de documento

Ejemplo: index.html

    <!DOCTYPE html> 
    <html lang="en"> 
        <head> 
            <meta charset="UTF-8"> 
            <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
            <title>Hola Mundo</title> 
        </head> 
        <body> 
            <!-- Contenido de la página --> 
        </body> 
    </html>

*Markup básico, recomendable escribir todas las etiquetas de base.

Los documentos html se guardan como archivos con la extensión .html o .htm
La etiqueta <!DOCTYPE html> declara el tipo de documento como HTML5.
La etiqueta <html> es la etiqueta raíz que contiene todo el contenido del documento.
La etiqueta <head> contiene metadatos sobre el documento, como el título, la codificación de caracteres y enlaces a hojas de estilo.
La etiqueta <body> contiene todo el contenido visible de la página web.

Etiquetas más comunes

<h1> a <h6> para encabezados de diferentes niveles.
<p> para párrafos de texto.
<ul> y <ol> para listas no ordenadas y ordenadas, respectivamente.
<li> para elementos de lista.
<a> para enlaces.
<img> para imágenes.
<div> y <span> para agrupar elementos.

Atributos HTML

Proporcionan información adicional sobre los elementos HTML. Se escriben dentro de la etiqueta de apertura y consisten en un nombre y un valor, separados por un signo igual =.
Se utilizan para especificar propiedades de los elementos, como el color, el tamaño, la fuente, la alineación, etc.

<img src="/ruta-a-imagen.jpg" alt="Descripción de imagen" width="100">

Etiquetas Semánticas

HTML5 introdujo una serie de etiquetas semánticas que han revolucionado la forma en que estructuramos el contenido web. Algunas de las más importantes son:

Etiqueta	Descripción
`<header>`	Define la cabecera de una página o sección. Generalmente contiene el título principal, el logotipo y elementos de navegación.
`<nav>`	Indica una sección de navegación con enlaces a otras páginas o secciones del sitio web.
`<main>`	Representa el contenido principal y único de una página. Debe haber un solo elemento `<main>` por página.
`<article>`	Define un contenido independiente y autónomo que se puede reutilizar en diferentes contextos, como un artículo de blog, una noticia o una publicación en un foro.
`<section>`	Agrupa contenido temáticamente relacionado dentro de una página. Se utiliza para dividir el contenido en secciones más pequeñas y manejables.
`<aside>`	Contiene información adicional o complementaria relacionada con el contenido principal, como barras laterales, anuncios o enlaces relacionados.
`<footer>`	Define el pie de página de una página o sección. Suele contener información sobre derechos de autor, enlaces a otras páginas y datos de contacto.

Ejemplo Markup Semántico

    <header> 
        <h1>Título de la página</h1>
        <nav>
            <ul> 
                <li><a href="#">Enlace 1</a></li> 
                <li><a href="#">Enlace 2</a></li>
            </ul>
        </nav> 
    </header> 
    <main> 
        <article> 
            <h2>Título del artículo</h2> 
            <p>Contenido del artículo.</p> 
        </article> 
        <aside> 
            <h3>Contenido relacionado</h3> 
            <p>Información adicional.</p>
        </aside> 
    </main>
    <footer>
        <p>Pie de página.</p>
    </footer>

¿Qué es un Favicon?

Un favicon es un pequeño icono que aparece en la pestaña del navegador, en los marcadores y en otros lugares. Ayuda a identificar visualmente el sitio web.

Ejemplos de Favicon

A continuación se muestran diferentes formas de incluir un favicon en tu sitio web:

Favicon básico

    <link rel="icon" href="img/favicon.ico" type="image/x-icon">

Favicon en formato PNG

    <link rel="icon" href="img/favicon.png" type="image/png">

Favicon para dispositivos Apple

    <link rel="apple-touch-icon" href="img/apple-touch-icon.png">

Manifest para aplicaciones web progresivas

    <link rel="manifest" href="manifest.json">

Buenas Prácticas

Usar un favicon de 16x16 píxeles para navegadores.
Incluir versiones de mayor resolución para dispositivos de alta densidad de píxeles.
Asegurarse de que el favicon sea representativo del sitio web.
Utilizar el formato ICO/PNG para compatibilidad con todos los navegadores.
Incluir favicons en formato SVG para dispositivos modernos.
Proporcionar un archivo de manifiesto para aplicaciones web progresivas.

Referencias

Rutas Absolutas

Una ruta absoluta especifica la ubicación completa de un recurso, incluyendo el protocolo (http, https) y el dominio.

Ejemplo:

Enlace a Example.com

Rutas Relativas

Una ruta relativa especifica la ubicación de un recurso en relación con la ubicación actual del documento.

Ejemplos:

<a href="pagina.html">Enlace a página en el mismo directorio</a>
<a href="./pagina.html">Enlace a página en el mismo directorio (con ./)</a>
<a href="../pagina.html">Enlace a página en el directorio padre</a>
<a href="/pagina.html">Enlace a página en la raíz del sitio</a>

Prefijos de Rutas Relativas

Los prefijos './', '../' y '/' se utilizan para navegar por el sistema de archivos relativo a la ubicación del documento actual.

'./': Se refiere al directorio actual.
'../': Se refiere al directorio padre del directorio actual.
'/': Se refiere a la raíz del sitio web.

Ejemplos:

<a href="./pagina.html">Enlace a página en el mismo directorio</a>
<a href="../pagina.html">Enlace a página en el directorio padre</a>
<a href="/pagina.html">Enlace a página en la raíz del sitio</a>

Ejemplos Prácticos

Supongamos que tenemos la siguiente estructura de directorios:

    /d:/CENTRO/www/
    ├── index.html
    ├── docs/
    │   ├── html.html
    │   ├── css.html
    │   └── cheat-sheet.html
    └── img/
        └── centro-logo.svg

Desde index.html:

<a href="docs/html.html">HTML</a> - Enlace a html.html en el directorio docs.
<a href="img/centro-logo.svg">Logo</a> - Enlace a centro-logo.svg en el directorio img.

Desde docs/html.html:

<a href="../index.html">Inicio</a> - Enlace a index.html en el directorio raíz.
<a href="../img/centro-logo.svg">Logo</a> - Enlace a centro-logo.svg en el directorio img.

Responsive Images

Web Semántica

Accesibilidad mejorada: El HTML semántico facilita la vida de las personas con discapacidades visuales. Los lectores de pantalla, utilizados por estas personas, pueden interpretar el significado de las etiquetas semánticas para "leer" el contenido de manera más lógica y comprensible.
SEO optimizado: Los motores de búsqueda, como Google, valoran el HTML semántico. Al entender la estructura y el contenido de una página, los motores de búsqueda pueden indexarla y clasificarla de manera más efectiva, lo que puede mejorar el posicionamiento en los resultados de búsqueda.
Código más legible y mantenible: El HTML semántico hace que el código sea más claro y fácil de entender para los desarrolladores. Al utilizar etiquetas que describen el significado del contenido, se reduce la necesidad de comentarios extensos y se facilita el mantenimiento del código a largo plazo.

Git & GitHub

Git Software manejador de versiones
GitHub Plataforma para alojar repositorios en la nube, permite gestión de proyectos en colaborativo, revisión de código y más.