Primera Interacción con HTML

• Entorno de desarrollo
• Uso de VS Code
• Uso de Sublime Text Concepto de HTML
• ¿Qué significa "hipertexto"?
• ¿Por qué se llama "lenguaje de marcado"?
• HTML como herramienta para definir significado semántico Historia de HTML Términos clave en HTML Creación de tu primer documento HTML Estructura básica del documento HTML
• Declaración de tipo de documento (DTD)
• Idioma del contenido con el atributo lang
• Sección <head>: metadatos y configuraciones
• Contenido principal en <body>Codificación de caracteres en computación Normas y buenas prácticas en HTML
• Reglas para escribir XHTML
• Características básicas de sintaxis en HTML

Entornos de desarrollo recomendados

Para desarrollo frontend, se recomienda fuertemente VS Code. Otra opción viable es Sublime Text.

Aunque WebStorm fue popular en su momento, su uso ha disminuido drásticamente desde la aparición de VS Code.

Nota importante: la extensión del archivo no determina el formato, solo indica cómo debe abrirse.

Configuración inicial en VS Code Para una guía completa sobre configuraciones esenciales al comenzar con VS Code, consulta el repositorio oficial: Todo lo que necesitas saber al usar VS Code por primera vez

Consejos para Sublime Text Detalles avanzados sobre el uso de Sublime Text están disponibles en: Técnicas de uso de Sublime Text

¿Qué es HTML?

HTML, abreviatura de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), no es un lenguaje de programación, sino un lenguaje descriptivo basado en etiquetas.

Su función principal es definir el significado semántico de los contenidos dentro de un documento web.

¿Qué significa "hipertexto"? Dos aspectos clave:

• Incluye multimedia: imágenes, audio, video y animaciones, ampliando más allá del texto plano.
• Permite enlaces entre documentos, conectando páginas en distintos servidores a nivel global.

¿Por qué se denomina "lenguaje de marcado"?

• Utiliza etiquetas predefinidas: <p> para párrafos, ![]() para imágenes, <h1> para títulos principales.
• Estas etiquetas describen elementos, pero no ejecutan lógica como los lenguajes de programación.
• Los navegadores interpretan directamente las etiquetas sin compilación previa.

HTML como lenguaje semántico Un archivo HTML es un archivo de texto plano. Las etiquetas no son visibles directamente en la pantalla, pero definen el propósito de cada parte del contenido. Por ejemplo:

• ¿Cuál es el uso correcto de <h1>?
• Respuesta adecuada: asignar semánticamente el título principal.
• Respuesta incorrecta: hacer el texto más grande o negrita.

Este concepto de semántica será más claro conforme aprendamos cada etiqueta.

Evolution de HTML

XHTML (Extensible Hypertext Markup Language) fue diseñado como una versión más estricta y formal de HTML. Su objetivo era reemplazar a HTML tradicional, especialmente para mejorar la compatibilidad con dispositivos móviles, tabletas y TV.

Las diferencias clave entre HTML y XHTML:

• XHTML requiere etiquetas cerradas.
• Todas las etiquetas deben ser minúsculas.
• Los atributos deben estar entre comillas.
• El documento debe incluir una declaración DTD válida.

En HTML5, muchas de estas reglas se relajaron para facilitar el desarrollo, eliminando la necesidad de XHTML.

Términos fundamentales en HTML

• Página web: Un documento compuesto por etiquetas HTML.
• Página principal (home): La entrada principal de un sitio web.
• Etiqueta: Elemento como <p> (inicio) y </p> (cierre).
• Elemento: Una estructura completa como <p>Texto</p>.
• Atributo: Información adicional dentro de una etiqueta, como src="imagen.jpg".
• XHTML: Versión estricta de HTML basada en XML.
• DHTML: Combinación de HTML, CSS y JavaScript para crear interfaces dinámicas.
• HTTP: Protocolo de transferencia de hipertexto para comunicar clientes y servidores.

Crear tu primer documento HTML

Abre VS Code, crea un nuevo archivo llamado primer-pagina.html. Escribe html:5 y presiona Tab. Automáticamente generará el esqueleto básico:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>Soy un encabezado nivel 3</h3>
    ![Imagen vacía]()
    <a href="https://www.jd.com">Haga clic aquí para ir a JD.com</a>
</body>
</html>

Guarda el archivo y ábrelo con Chrome. Verás tu primer página web.

Estructura del documento HTML

Las etiquetas HTML generalmente vienen en pares (marcadores bilaterales): <div> y </div>. Algunas son únicas (marcadores unilaterales): <br />, <hr />, ![](...).

Los atributos se separan con espacios y sus valores van entre comillas dobles.

Etiqueta	Descripción	Notas
<html>	Etiqueta raíz del documento	Contiene todo el contenido
<head>	Sección de metadatos	Debe incluir <title>
<title>	Título visible en la pestaña del navegador	Importante para SEO
<body>	Contenido visible de la página	Todo lo que se muestra va aquí

Declaración de tipo de documento (DTD) Cada documento HTML debe comenzar con una línea de declaración DTD, que especifica la versión del estándar utilizado.

• HTML4.01 tenía varias variantes: Strict, Transitional y Frameset.
• HTML5 simplifica esta declaración. Solo se necesita:

Idioma del contenido con langDefine el idioma principal del documento:

<html lang="zh-CN">

Valores comunes:

• en: inglés
• zh-CN: chino (China)

Sección <head> en HTML5

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="author" content="Tu Nombre">
    <meta name="keywords" content="web, diseño, desarrollo">
    <meta name="description" content="Este sitio ofrece recursos para desarrolladores web.">
    <title>Mi Primer Sitio Web</title>
</head>
<body>
    <!-- Contenido aquí -->
</body>
</html>

Preguntas frecuentes en entrevistas:

• ¿Qué contiene el <head>?
• Características clave: codificación, meta descripciones, palabras clave, título, viewport, compatibilidad con IE, favicon, etc.

Etiquetas comunes en <head>:

• <title>: Título mostrado en la barra del navegador.
• <base>: Define una ruta base para todos los enlaces.
• <meta>: Proporciona información meta sobre el documento.
• <link>: Enlaza recursos externos (CSS, favicons).

Etiquetas <meta>:

• Codificación:

<meta charset="UTF-8">

Asegura que el navegador interprete correctamente los caracteres. UTF-8 es el estándar moderno.

• Viewport (visión de pantalla):

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Esencial para diseño responsive en móviles.

• Palabras clave:

<meta name="keywords" content="desarrollo web, HTML, CSS">

• Descripción del contenido:

<meta name="description" content="Aprenda HTML desde cero con este tutorial paso a paso.">

Mejora el posicionamiento en motores de búsqueda (SEO).

• Redirección automática:

<meta http-equiv="refresh" content="5;url=https://google.com">

Redirige después de 5 segundos.

• Base URL:

<base href="/">

Todos los enlaces se resolverán desde esta ruta base.

El cuerpo del documento: <body>

Atributos obsoletos (no recomendados hoy en día):

• bgcolor → Usar CSS (background-color)
• text → Usar CSS (color)
• background → Usar CSS (background-image)
• Margenes (leftmargin, topmargin) → Usar CSS

Propiedades antiguas para colores de enlaces:

• link: color predeterminado
• alink: cuando se hace clic
• vlink: después de haber sido visitado

Estos atributos ya no son soportados en HTML5. Usa CSS para estilos.

Codificación de caracteres en sistemas informáticos

Computadoras solo procesan datos binarios. Para representar letras, se usan códigos.

• ASCII: 8 bits (256 caracteres). Solo cubre inglés básico.
• ANSI: Extensión nacional. Ejemplo: GB2312 (chino simplificado), BIG5 (chino tradicional), JIS (japonés).
• GBK: Extensión de GB2312. Soporta más caracteres chinos.
• Unicode: 32 bits. Cada carácter ocupa 4 bytes. Muy eficiente en espacio, pero ineficiente en tamaño.
• UTF-8: Codificación variable. Letras ASCII: 1 byte. Caracteres chinos: 3 bytes. Óptima para multilenguaje.

Recomendación práctica: Usa siempre UTF-8 en desarrollo web. Es universal, compatible y evita problemas de codificación.

Comparación: UTF-8 vs GB2312

Característica	UTF-8	GB2312
Cobertura	Todos los idiomas del mundo	Solo chino y algunos símbolos
Tamaño de archivo	Mayor	Más pequeño
Velocidad de carga	Ligeramente más lenta	Más rápida

Escenarios recomendados:

• Si tu sitio tiene contenido multilenguaje (ej. japonés, árabe), usa UTF-8.
• Si solo necesitas contenido en chino y priorizas velocidad, usa GB2312.

Verifica la codificación de un archivo revisando el <meta charset="..."> en el código fuente del navegador.

Normas y buenas prácticas en HTML

• HTML no distingue entre mayúsculas y minúsculas, pero se recomienda usar siempre minúsculas.
• Extensiones válidas: .html, .htm (compatibilidad con sistemas antiguos).

Reglas para escribir XHTML (estricto)

1. Etiquetas anidadas correctamente, sin solapamientos.
2. Todas las etiquetas en minúscula.
3. Cierre obligatorio de todas las etiquetas:

• <span></span>
• <br />, <hr />, ![](...)

4. Atributos entre comillas: <font color="red">
5. Todos los atributos deben tener valor: <input type="checkbox" checked="checked" />
6. Declaración DTD obligatoria al inicio.

Características de sintaxis en HTML

1. Ignorancia de saltos de línea y tabulaciones HTML ignora espacios, tabs y saltos de línea. Lo único que importa es la estructura de anidamiento. Sin embargo, el formato legible ayuda a mantenibilidad.

Ejemplo de código minimalista usado por grandes empresas (como Baidu) para reducir tamaño:

<html><head><title>Test</title></head><body><h1>Titulo</h1></body></html>

2. Plegado de espacios en blanco Espacios, tabs y saltos de línea entre textos se reducen a un solo espacio visual.

Ejemplo:

<p>Hola       Mundo
    ¡Bienvenido!</p>

Mostrará: Hola Mundo ¡Bienvenido!

3. Cierre estricto de etiquetas Etiquetas no cerradas causan errores graves en renderizado. Siempre asegúrate de que cada apertura tenga su cierre correspondiente.

Ejemplo incorrecto:

<div>
    <p>Texto
    </div>

Corrección:

<div>
    <p>Texto</p>
</div>