Curso de programación con HTML

HTML, el lenguaje de marcado básico para crear y estructurar páginas web. Domina los fundamentos del diseño web con HTML.

Aprende HTML GRATIS y certifícate

HTML (HyperText Markup Language) es el lenguaje de marcado estándar utilizado para crear y estructurar el contenido en la web. Es la base de todas las páginas web y define la estructura y el significado de los elementos que aparecen en ellas.

¿Qué es HTML?

HTML es un lenguaje de marcado que utiliza etiquetas para definir la estructura y el contenido de un documento web. Estas etiquetas indican al navegador cómo debe mostrar y organizar el contenido, permitiendo incluir texto, imágenes, enlaces, tablas, formularios y otros elementos multimedia.

Estructura básica de un documento HTML

Un documento HTML típico tiene la siguiente estructura:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Título de la página</title>
</head>
<body>
    <!-- Contenido de la página -->
</body>
</html>

<!DOCTYPE html>: Indica al navegador que el documento utiliza HTML5.
<html>: Etiqueta raíz que engloba todo el contenido de la página.
<head>: Contiene metadatos, como el título y enlaces a estilos o scripts.
<body>: Contiene el contenido visible de la página.

Etiquetas y elementos esenciales

Encabezados

Definen títulos y subtítulos, desde <h1> (más importante) hasta <h6> (menos importante).

<h1>Título principal</h1>
<h2>Subtítulo</h2>

Párrafos

La etiqueta <p> define un párrafo de texto.

<p>Este es un párrafo de ejemplo en HTML.</p>

Enlaces

Se crean con la etiqueta <a> y el atributo href.

<a href="https://www.ejemplo.com">Visitar Ejemplo</a>

Imágenes

Para insertar imágenes, se utiliza la etiqueta <img> con el atributo src.

<img src="imagen.jpg" alt="Descripción de la imagen">

Listas

Lista no ordenada

Utiliza <ul> para la lista y <li> para cada elemento.

<ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
</ul>

Lista ordenada

Usa <ol> en lugar de <ul>.

<ol>
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
</ol>

Tablas

Definen datos en formato de filas y columnas.

<table>
    <tr>
        <th>Nombre</th>
        <th>Edad</th>
    </tr>
    <tr>
        <td>Ana</td>
        <td>28</td>
    </tr>
    <tr>
        <td>Luis</td>
        <td>35</td>
    </tr>
</table>

Formularios

Permiten recopilar información del usuario.

<form action="/enviar" method="post">
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre">
    <input type="submit" value="Enviar">
</form>

Atributos globales

Los atributos proporcionan información adicional a las etiquetas.

id: Identificador único del elemento.
class: Clase para aplicar estilos CSS.
style: Estilos en línea para el elemento.
title: Texto emergente al pasar el cursor.

Ejemplo:

<p id="parrafo1" class="texto-destacado" style="color: blue;" title="Información adicional">
    Este es un párrafo con atributos.
</p>

Etiquetas semánticas

Mejoran la estructura y accesibilidad del documento.

<header>: Encabezado de la página o sección.
<nav>: Contiene enlaces de navegación.
<main>: Contenido principal.
<section>: Sección temática del contenido.
<article>: Contenido independiente.
<aside>: Contenido relacionado.
<footer>: Pie de página.

Ejemplo:

<header>
    <h1>Mi Sitio Web</h1>
</header>
<nav>
    <ul>
        <li><a href="#inicio">Inicio</a></li>
        <li><a href="#servicios">Servicios</a></li>
        <li><a href="#contacto">Contacto</a></li>
    </ul>
</nav>
<main>
    <section id="inicio">
        <h2>Bienvenido</h2>
        <p>Contenido de la sección de inicio.</p>
    </section>
</main>
<footer>
    <p>© 2023 Mi Sitio Web</p>
</footer>

Multimedia y gráficos

Audio

Insertar archivos de audio con <audio>.

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Tu navegador no soporta el elemento de audio.
</audio>

Video

Usar <video> para reproducir videos.

<video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    Tu navegador no soporta el elemento de video.
</video>

Canvas y SVG

<canvas>: Dibujo de gráficos mediante scripts.
<svg>: Gráficos vectoriales escalables.

Ejemplo de canvas:

<canvas id="miCanvas" width="200" height="100"></canvas>

Enlaces a CSS y JavaScript

Vincular hojas de estilo CSS

En el <head> del documento:

<link rel="stylesheet" href="estilos.css">

Incluir scripts JavaScript

Al final del <body> o en el <head>:

<script src="script.js"></script>

Metadatos y SEO

Los metadatos proporcionan información adicional sobre el documento.

<meta name="description" content="Descripción de la página para SEO">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Tu Nombre">

Buenas prácticas en HTML

Validar el código: Utilizar herramientas como el validador W3C.
Usar etiquetas semánticas: Mejora la accesibilidad y SEO.
Optimizar imágenes: Reducir el tamaño para mejorar la carga.
Especificar atributos alt: Importante para lectores de pantalla y SEO.
Estructurar el contenido: Utilizar una jerarquía lógica con encabezados.

Recursos adicionales

Documentación: MDN Web Docs
Validación: W3C Markup Validation Service
Editores recomendados: Visual Studio Code, Sublime Text, Atom.

Ejemplo completo de una página HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Página de Ejemplo</title>
    <meta name="description" content="Una página de ejemplo en HTML">
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <header>
        <h1>Página de Ejemplo</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#inicio">Inicio</a></li>
            <li><a href="#sobre-mi">Sobre Mí</a></li>
            <li><a href="#contacto">Contacto</a></li>
        </ul>
    </nav>
    <main>
        <section id="inicio">
            <h2>Bienvenido</h2>
            <p>Este es un ejemplo de una página HTML básica.</p>
            <img src="imagen.jpg" alt="Descripción de la imagen">
        </section>
        <section id="sobre-mi">
            <h2>Sobre Mí</h2>
            <p>Información sobre el autor o el propósito del sitio.</p>
        </section>
        <section id="contacto">
            <h2>Contacto</h2>
            <form action="/enviar" method="post">
                <label for="nombre">Nombre:</label>
                <input type="text" id="nombre" name="nombre" required>
                <label for="email">Correo Electrónico:</label>
                <input type="email" id="email" name="email" required>
                <input type="submit" value="Enviar">
            </form>
        </section>
    </main>
    <footer>
        <p>© 2024 CertiDevs</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

Aprende HTML GRATIS online

Tutoriales de HTML

Aprende HTML con tutoriales de programación en HTML.

Introducción A Html

Introducción Y Entorno

Doctype

Sintaxis Y Estructura

Elementos Y Etiquetas

Sintaxis Y Estructura

Atributos

Sintaxis Y Estructura

Anidación De Etiquetas

Sintaxis Y Estructura

Comentarios

Sintaxis Y Estructura

Encabezados (H1-h6)

Textos Y Enlaces

Enlace (A)

Textos Y Enlaces

Párrafo (P)

Textos Y Enlaces

Listas (Ul, Ol, Li)

Textos Y Enlaces

Imagen (Img)

Textos Y Enlaces

División (Div)

Estructura De Página

Etiquetas Semánticas (Article, Section, Header, Footer, Nav, Aside)

Estructura De Página

Tablas (Table, Tr, Td, Th)

Estructura De Página

Formularios (Form, Input, Select, Textarea, Button)

Estructura De Página

Imágenes Vectoriales (Svg)

Elementos Multimedia

Incrustación De Contenido (Iframe)

Elementos Multimedia

Audio (Audio)

Elementos Multimedia

Video (Video)

Elementos Multimedia

Estilo Incorporado (Style)

Metadatos Y Estilización Incorporada

Metadatos (Meta, Title, Link)

Metadatos Y Estilización Incorporada

Atributos De Aria

Metadatos Y Estilización Incorporada

Navegación Por Teclado

Metadatos Y Estilización Incorporada

Contraste Y Legibilidad

Características Avanzadas Y Optimización

Validación De Html

Características Avanzadas Y Optimización

Compatibilidad Con Navegadores

Características Avanzadas Y Optimización

Optimización De La Carga De La Página (Lazy Loading)

Características Avanzadas Y Optimización

Ejercicios de programación de HTML

Evalúa tus conocimientos en HTML con ejercicios de programación HTML de tipo Test, Puzzle, Código y Proyecto con VSCode.

¿Qué es HTML?

Estructura básica de un documento HTML

Etiquetas y elementos esenciales

Encabezados

Párrafos

Enlaces

Imágenes

Listas

Lista no ordenada

Lista ordenada

Tablas

Formularios

Atributos globales

Etiquetas semánticas

Multimedia y gráficos

Audio

Video

Canvas y SVG

Enlaces a CSS y JavaScript

Vincular hojas de estilo CSS

Incluir scripts JavaScript

Metadatos y SEO

Buenas prácticas en HTML

Recursos adicionales

Ejemplo completo de una página HTML

Tutoriales de HTML

Introducción Y Entorno

Sintaxis Y Estructura

Sintaxis Y Estructura

Sintaxis Y Estructura

Sintaxis Y Estructura

Sintaxis Y Estructura

Textos Y Enlaces

Textos Y Enlaces

Textos Y Enlaces

Textos Y Enlaces

Textos Y Enlaces

Estructura De Página

Estructura De Página

Estructura De Página

Estructura De Página

Elementos Multimedia

Elementos Multimedia

Elementos Multimedia

Elementos Multimedia

Metadatos Y Estilización Incorporada

Metadatos Y Estilización Incorporada

Metadatos Y Estilización Incorporada

Metadatos Y Estilización Incorporada

Características Avanzadas Y Optimización

Características Avanzadas Y Optimización

Características Avanzadas Y Optimización

Características Avanzadas Y Optimización

Ejercicios de programación de HTML

Todos los módulos de HTML

Otras tecnologías

Vuejs

Frontend