El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Estructura Básica de HTML

Siguiente ►
►

Introducción

En esta lección, aprenderás sobre la estructura básica de un documento HTML. Entender la estructura fundamental es crucial para crear páginas web bien organizadas y funcionales. Vamos a desglosar cada componente esencial de un documento HTML y su propósito.

Componentes Clave de un Documento HTML

Un documento HTML típico contiene los siguientes elementos clave:

  1. Declaración DOCTYPE
  2. Elemento <html>
  3. Elemento <head>
  4. Elemento <title>
  5. Elemento <body>

  1. Declaración DOCTYPE

La declaración <!DOCTYPE html> se coloca al principio de un documento HTML. Informa al navegador que el documento está escrito en HTML5.

<!DOCTYPE html>

  1. Elemento <html>

El elemento <html> es el contenedor raíz de todo el contenido HTML. Todo el contenido de la página web debe estar dentro de este elemento.

<!DOCTYPE html>
<html>
    <!-- Contenido de la página va aquí -->
</html>

  1. Elemento <head>

El elemento <head> contiene metadatos sobre el documento, como el título de la página, enlaces a hojas de estilo, y scripts. Aunque el contenido del <head> no se muestra directamente en la página, es crucial para la funcionalidad y el SEO.

<!DOCTYPE html>
<html>
<head>
    <title>Mi Primera Página HTML</title>
</head>

  1. Elemento <title>

El elemento <title> define el título del documento, que aparece en la barra de título del navegador o en la pestaña de la página. Es importante para la accesibilidad y el SEO.

<!DOCTYPE html>
<html>
<head>
    <title>Mi Primera Página HTML</title>
</head>

  1. Elemento <body>

El elemento <body> contiene todo el contenido visible de la página web, como texto, imágenes, enlaces, etc.

<!DOCTYPE html>
<html>
<head>
    <title>Mi Primera Página HTML</title>
</head>
<body>
    <!-- Contenido visible de la página va aquí -->
</body>
</html>

Ejemplo Completo

A continuación, se muestra un ejemplo completo de un documento HTML básico:

<!DOCTYPE html>
<html>
<head>
    <title>Mi Primera Página HTML</title>
</head>
<body>
    <h1>¡Hola, Mundo!</h1>
    <p>Esta es mi primera página web.</p>
</body>
</html>

Explicación del Ejemplo

  • <!DOCTYPE html>: Indica que el documento es HTML5.
  • <html>: Contenedor raíz del documento.
  • <head>: Contiene metadatos y el título de la página.
  • <title>: Define el título de la página.
  • <body>: Contiene el contenido visible de la página.
    • <h1>: Encabezado de nivel 1.
    • <p>: Párrafo de texto.

Ejercicio Práctico

Ejercicio 1: Crear un Documento HTML Básico

Crea un documento HTML que contenga los siguientes elementos:

  1. Un título de página que diga "Página de Ejemplo".
  2. Un encabezado de nivel 1 que diga "Bienvenido a mi Página".
  3. Un párrafo que diga "Este es un ejemplo de una página HTML básica".

Solución

<!DOCTYPE html>
<html>
<head>
    <title>Página de Ejemplo</title>
</head>
<body>
    <h1>Bienvenido a mi Página</h1>
    <p>Este es un ejemplo de una página HTML básica.</p>
</body>
</html>

Conclusión

En esta lección, hemos cubierto la estructura básica de un documento HTML, incluyendo la declaración DOCTYPE, y los elementos <html>, <head>, <title>, y <body>. Con esta base, estás listo para empezar a crear tus propias páginas web. En la próxima lección, profundizaremos en las etiquetas y elementos HTML.

◄ Anterior
◄
Siguiente ►
►

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

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados