El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

Introducción

HTML (HyperText Markup Language) es el lenguaje estándar utilizado para crear y diseñar páginas web. En HTML, las etiquetas y los elementos son los componentes básicos que estructuran y presentan el contenido en la web. En esta lección, aprenderás sobre las etiquetas y elementos HTML, cómo se utilizan y cómo se estructuran.

Conceptos Clave

Etiquetas HTML: Son las palabras clave rodeadas por corchetes angulares (< >) que indican el inicio y el final de un elemento HTML.
Elementos HTML: Son las etiquetas HTML junto con su contenido. Un elemento HTML puede contener texto, otros elementos HTML, o estar vacío.
Atributos HTML: Proporcionan información adicional sobre los elementos HTML. Se escriben dentro de la etiqueta de apertura.

Estructura de una Etiqueta HTML

Una etiqueta HTML generalmente tiene una estructura de apertura y cierre:

<nombre_etiqueta>Contenido</nombre_etiqueta>

Etiqueta de apertura: <nombre_etiqueta>
Etiqueta de cierre: </nombre_etiqueta>
Contenido: El texto o elementos que están dentro de las etiquetas de apertura y cierre.

Ejemplo:

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

En este ejemplo:

<p> es la etiqueta de apertura.
</p> es la etiqueta de cierre.
Este es un párrafo. es el contenido.

Etiquetas HTML Comunes

Encabezados

Los encabezados se utilizan para definir títulos y subtítulos en una página web. HTML tiene seis niveles de encabezados, desde <h1> hasta <h6>, siendo <h1> el más importante y <h6> el menos importante.

<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6>

Párrafos

La etiqueta <p> se utiliza para definir párrafos.

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

Enlaces

La etiqueta <a> se utiliza para crear hipervínculos. El atributo href especifica la URL del enlace.

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

Imágenes

La etiqueta <img> se utiliza para insertar imágenes. Los atributos src y alt son obligatorios. src especifica la ruta de la imagen y alt proporciona un texto alternativo.

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

Listas

HTML soporta listas ordenadas (<ol>) y desordenadas (<ul>). Los elementos de la lista se definen con la etiqueta <li>.

<ul>
  <li>Elemento de lista 1</li>
  <li>Elemento de lista 2</li>
  <li>Elemento de lista 3</li>
</ul>

<ol>
  <li>Elemento de lista 1</li>
  <li>Elemento de lista 2</li>
  <li>Elemento de lista 3</li>
</ol>

Atributos HTML

Los atributos proporcionan información adicional sobre los elementos HTML. Se escriben dentro de la etiqueta de apertura y generalmente consisten en un nombre y un valor.

Ejemplo de Atributos

<a href="https://www.ejemplo.com" target="_blank">Visita Ejemplo</a>

En este ejemplo:

href es un atributo que especifica la URL del enlace.
target="_blank" es un atributo que indica que el enlace se abrirá en una nueva pestaña.

Ejercicio Práctico

Ejercicio 1: Crear una Página HTML Básica

Crea un archivo HTML llamado index.html.
Añade la estructura básica de HTML.
Incluye un título de nivel 1 con el texto "Mi Primera Página HTML".
Añade un párrafo con una breve descripción.
Inserta una imagen con una ruta y un texto alternativo.
Crea una lista desordenada con tres elementos.

Solución

<!DOCTYPE html>
<html lang="es">
<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>Mi Primera Página HTML</h1>
    <p>Esta es una breve descripción de mi primera página HTML.</p>
    <img src="ruta/de/la/imagen.jpg" alt="Descripción de la imagen">
    <ul>
        <li>Elemento de lista 1</li>
        <li>Elemento de lista 2</li>
        <li>Elemento de lista 3</li>
    </ul>
</body>
</html>

Conclusión

En esta lección, has aprendido sobre las etiquetas y elementos HTML, cómo se estructuran y cómo se utilizan para crear contenido en una página web. También has aprendido sobre los atributos HTML y cómo proporcionan información adicional sobre los elementos. Con esta base, estarás listo para explorar más sobre HTML y crear páginas web más complejas.

En la próxima lección, profundizaremos en la creación de tu primera página HTML completa, aplicando los conceptos aprendidos hasta ahora.

Etiquetas y Elementos HTML

Introducción

Conceptos Clave

Estructura de una Etiqueta HTML

Ejemplo:

Etiquetas HTML Comunes

Encabezados

Párrafos

Enlaces

Imágenes

Listas

Atributos HTML

Ejemplo de Atributos

Ejercicio Práctico

Ejercicio 1: Crear una Página HTML Básica

Solución

Conclusión

Curso de HTML

Módulo 1: Introducción a HTML

Módulo 2: Formateo de Texto en HTML

Módulo 3: Enlaces y Medios en HTML

Módulo 4: Tablas en HTML

Módulo 5: Formularios en HTML

Módulo 6: Elementos Semánticos de HTML5

Módulo 7: Técnicas Avanzadas de HTML

Módulo 8: Integración de HTML y CSS

Módulo 9: Diseño Web Responsivo

Módulo 10: Mejores Prácticas y Accesibilidad

Módulo 11: Proyecto: Construyendo un Sitio Web Completo