HTML - Introducción

¿Qué es HTML?

HTML (Lenguaje de Marcado de Hipertexto) es el lenguaje de marcado estándar utilizado para crear y estructurar contenido en la web. Es la base de todas las páginas web y se usa para definir la estructura y el diseño del contenido que aparece en un sitio web.

HTML utiliza un sistema de etiquetas y atributos para marcar el contenido, como:

Estas etiquetas indican a los navegadores web cómo mostrar el contenido, facilitando a los usuarios la lectura e interacción con las páginas web.

En el desarrollo web, HTML trabaja junto con:

• CSS (Hojas de Estilo en Cascada): Usado para dar estilo y diseño al contenido
• JavaScript: Usado para añadir interactividad y funcionalidad a las páginas web

HTML es una habilidad esencial para cualquiera involucrado en el desarrollo web, ya que proporciona la estructura básica para todo el contenido web. Aprender HTML es el primer paso para crear sitios web y es una habilidad valiosa para diseñadores web, desarrolladores y creadores de contenido.

<p>Este    es   un   párrafo   con    espacios   extra.</p>

Este es un párrafo con espacios extra.

<p>Este es un párrafo.</div>

<p>Este es un párrafo.</p>

Historia del HTML

El HTML tiene una historia que se remonta a los primeros días de la World Wide Web. Fue creado inicialmente por Tim Berners-Lee, un científico informático británico, a finales de los años 80 mientras trabajaba en el CERN (Organización Europea para la Investigación Nuclear). Berners-Lee creó el HTML como una forma de estructurar y compartir documentos en internet.

La primera versión de HTML se lanzó en 1991 y era muy básica. Solo tenía unas pocas etiquetas para estructurar texto, como encabezados y párrafos. Con el tiempo, el HTML evolucionó para incluir más características y funcionalidades.

Aquí hay algunos hitos clave en la historia del HTML:

HTML5 está diseñado para ser compatible con versiones anteriores de HTML, por lo que los sitios web creados con versiones anteriores de HTML siguen funcionando con los navegadores web modernos. Sin embargo, muchos desarrolladores web ahora utilizan HTML5 debido a sus nuevas características y funcionalidad mejorada.

Hoy en día, HTML continúa cambiando y mejorando, con nuevas características y tecnologías que se añaden regularmente. Como columna vertebral de la web, HTML juega un papel importante en la creación de los sitios web interactivos y atractivos que usamos todos los días.

Por qué aprender HTML?

HTML es la base de todos los sitios web y es una habilidad importante para cualquier persona involucrada en desarrollo web. Ya seas un desarrollador web profesional o estés comenzando como aficionado, aprender HTML es necesario para crear y mantener sitios web.

Una de las principales razones para aprender HTML es su importancia en el desarrollo web. HTML proporciona la estructura y contenido de un sitio web, que luego se estiliza con CSS y se mejora con JavaScript. Sin HTML, no existirían los sitios web como los conocemos hoy. Entender HTML es necesario para crear sitios web bien estructurados, semánticos y accesibles que funcionen en diferentes navegadores y dispositivos.

Aprender HTML también ofrece muchos beneficios tanto para profesionales como aficionados web. Para los profesionales, conocer HTML es una habilidad básica requerida para la mayoría de los trabajos de desarrollo web. Te permite crear y modificar páginas web, solucionar problemas y trabajar con sistemas de gestión de contenidos (CMS) y frameworks web. Para los aficionados, aprender HTML abre posibilidades para crear sitios web personales, blogs y portafolios en línea. También proporciona una base sólida para aprender otras tecnologías web y puede ser un pasatiempo divertido y gratificante.

HTML no solo es importante por sí mismo, sino que también sirve como base para otras tecnologías web. Una vez que tengas un buen dominio de HTML, puedes aprender fácilmente CSS para estilizar tus páginas web y hacerlas visualmente atractivas. También puedes aprender JavaScript para añadir interactividad y funcionalidad dinámica a tus sitios web. Otras tecnologías web, como lenguajes de programación del lado del servidor (por ejemplo, PHP, Python) y bases de datos (por ejemplo, MySQL), también dependen de HTML para mostrar contenido a los usuarios.

Además, entender HTML es valioso para trabajar con sistemas de gestión de contenidos populares como WordPress, Drupal y Joomla. Estas plataformas usan plantillas y temas HTML para controlar la estructura y apariencia de los sitios web. Conocer HTML te permite personalizar estas plantillas, crear tus propios temas y solucionar cualquier problema que pueda surgir.

<p>This    is   a   paragraph   with    extra   spaces.</p>

This is a paragraph with extra spaces.

<p>This is a paragraph.</div>

<p>This is a paragraph.</p>

Comenzando con HTML

Para empezar a escribir HTML, necesitas algunas herramientas básicas: un editor de texto y un navegador web. Un editor de texto es un programa que te permite escribir y editar archivos de texto plano, como Notepad (Windows) o TextEdit (Mac). Pero para una mejor experiencia de codificación, es posible que quieras usar un editor de código diseñado para desarrollo web, como:

• Visual Studio Code
• Sublime Text
• Atom
• Brackets

Estos editores de código tienen funciones como resaltado de sintaxis, autocompletado y gestión de archivos que hacen que escribir HTML sea más fácil y rápido.

Para ver tus páginas HTML, necesitarás un navegador web como Google Chrome, Mozilla Firefox, Apple Safari o Microsoft Edge. Los navegadores web leen el código HTML y muestran el contenido formateado a los usuarios.

Crear un documento HTML básico es sencillo. Abre tu editor de texto y crea un nuevo archivo. Comienza escribiendo la estructura del documento HTML, que incluye estos elementos:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primera página HTML</title>
</head>
<body>
    <h1>¡Hola, Mundo!</h1>
    <p>Esta es mi primera página HTML.</p>
</body>
</html>

Desglosemos la estructura de un documento HTML:

Guarda el archivo con una extensión .html (por ejemplo, index.html) y ábrelo en tu navegador web. Deberías ver el encabezado "¡Hola, Mundo!" y el párrafo "Esta es mi primera página HTML." mostrados en la página.

A medida que sigas aprendiendo HTML, descubrirás cómo agregar más elementos, atributos y contenido para crear páginas web estructuradas y visualmente atractivas. Recuerda siempre comenzar con la estructura básica del documento y construir a partir de ahí.

Elementos y Etiquetas HTML

Los documentos HTML están compuestos por elementos, definidos por etiquetas. Los elementos son los componentes básicos de una página HTML y estructuran el contenido, como encabezados, párrafos, listas, enlaces e imágenes. Las etiquetas marcan el inicio y el final de un elemento y proporcionan información sobre su propósito y contenido.

Un elemento HTML tiene tres partes principales:

1. Etiqueta de apertura: Inicia un elemento, encerrada entre corchetes angulares (< >). La etiqueta de apertura tiene el nombre del elemento, como <p> para un párrafo o para una imagen.

2. Contenido: El contenido del elemento, que puede ser texto, otros elementos o ambos.

3. Etiqueta de cierre: Finaliza un elemento, también encerrada entre corchetes angulares, con una barra inclinada (/) antes del nombre del elemento. Por ejemplo,

   cierra un elemento de párrafo.

<p>Esto es un párrafo de texto.</p>

Algunos elementos, llamados elementos vacíos o de autocierre, no tienen etiqueta de cierre ni contenido. Estos elementos se cierran por sí mismos e insertan contenido en la página sin envolverlo. Ejemplos de elementos vacíos incluyen:

<img src="imagen.jpg" alt="Una imagen de muestra">
<br>
<hr>
<input type="text" name="nombreusuario">

Aquí hay algunos elementos HTML comunes que verás:

A medida que aprendas más sobre HTML, encontrarás muchos más elementos, cada uno con su propio propósito y atributos. Al anidar elementos entre sí y aplicar las etiquetas apropiadas, puedes crear documentos HTML bien estructurados y significativos.

Atributos HTML

Los atributos HTML proporcionan más información sobre un elemento y cambian su comportamiento o apariencia. Los atributos se encuentran en la etiqueta de apertura de un elemento y tienen un nombre y un valor, separados por un signo igual (=). El valor del atributo siempre está entre comillas, ya sean simples ('') o dobles (").

Los atributos son importantes para personalizar y mejorar los elementos HTML. Se pueden usar para:

Aquí hay algunos atributos HTML comunes que verás:

<img src="logo.png" alt="Logo de la empresa" width="200" height="100">
<a href="https://www.ejemplo.com" target="_blank">Visita Ejemplo.com</a>
<input type="text" name="usuario" required>
<p class="intro" style="font-weight: bold;">Este es un párrafo de introducción.</p>

No todos los atributos funcionan con cada elemento. Cada elemento tiene su propio conjunto de atributos válidos, y usar atributos no válidos no cambiará el elemento.

A medida que trabajes con HTML, aprenderás más sobre los diferentes atributos disponibles y cómo se pueden usar para crear páginas web dinámicas e interactivas. Al combinar elementos y atributos de manera efectiva, puedes estructurar tu contenido y controlar cómo se ve para crear sitios web atractivos y fáciles de usar.

Estructura del Documento HTML

Cada documento HTML sigue una estructura básica que incluye la declaración del doctype y los elementos <html>, <head> y <body>. Esta estructura ayuda a los navegadores y otras herramientas a entender y mostrar el contenido correctamente.

La declaración del doctype es la primera línea de un documento HTML e indica al navegador qué versión de HTML se está utilizando. En HTML5, la declaración del doctype es simplemente <!DOCTYPE html>. Esta declaración no es una etiqueta HTML sino una instrucción para el navegador.

Después de la declaración del doctype, el elemento <html> es el elemento raíz de una página HTML. Contiene todo el contenido y estructuras del documento. El atributo lang dentro de la etiqueta <html> especifica el idioma del documento, como "en" para inglés o "es" para español.

Dentro del elemento <html>, hay dos secciones principales: <head> y <body>.

El elemento <head> contiene meta-información sobre el documento que no se muestra en la página en sí. Esto incluye:

• <title>: Especifica el título de la página web, que aparece en la barra de título o pestaña del navegador.
• <meta>: Proporciona metadatos sobre el documento, como la codificación de caracteres, la configuración de la ventana gráfica, palabras clave y descripciones.
• <link>: Conecta el documento con recursos externos, como hojas de estilo CSS o favicons.
• <script>: Incluye código JavaScript o enlaces a scripts externos.

El elemento <body> contiene el contenido principal del documento HTML que se muestra en la ventana del navegador. Esto incluye texto, imágenes, enlaces, tablas, formularios y otros elementos que conforman la parte visible de la página web.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Página Web</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Bienvenido a Mi Página Web</h1>
        <nav>
            <ul>
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Acerca de</a></li>
                <li><a href="#">Contacto</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h2>Acerca de Mí</h2>
        <p>Hola, soy John Doe. Soy desarrollador y diseñador web.</p>
    </main>
    <footer>
        <p>&copy; 2023 Mi Página Web. Todos los derechos reservados.</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

La estructura adecuada del documento es importante por varias razones:

Al seguir la estructura estándar del documento HTML y utilizar elementos y atributos apropiados, puedes crear páginas web bien organizadas, semánticamente significativas y accesibles que funcionen bien para todos los usuarios.