El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En esta lección, aprenderás a crear tu primera página HTML desde cero. Vamos a cubrir los siguientes puntos:

Estructura básica de un documento HTML.
Añadir contenido básico como texto y encabezados.
Guardar y visualizar tu página en un navegador web.

Estructura Básica de un Documento HTML

Cada documento HTML tiene una estructura básica que incluye varias etiquetas esenciales. Aquí está la estructura mínima que debe tener cualquier archivo HTML:

<!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>
    <!-- Aquí va el contenido de tu página -->
</body>
</html>

Explicación de las Etiquetas

<!DOCTYPE html>: Esta declaración define el tipo de documento y la versión de HTML que estás utilizando. En este caso, es HTML5.
<html lang="es">: La etiqueta <html> envuelve todo el contenido de la página. El atributo lang="es" especifica que el idioma del documento es español.
<head>: La sección <head> contiene metadatos sobre el documento, como el conjunto de caracteres (<meta charset="UTF-8">), la configuración de la vista (<meta name="viewport" content="width=device-width, initial-scale=1.0">) y el título de la página (<title>).
<body>: La sección <body> contiene todo el contenido visible de la página web.

Añadir Contenido Básico

Vamos a añadir algunos elementos básicos como encabezados y párrafos a nuestra página HTML.

<!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>Bienvenido a Mi Primera Página HTML</h1>
    <p>Este es un párrafo de ejemplo. Aquí puedes escribir cualquier texto que desees.</p>
    <h2>Subtítulo</h2>
    <p>Otro párrafo con más información.</p>
</body>
</html>

Explicación de los Elementos

<h1>: Esta etiqueta define un encabezado de nivel 1, que generalmente es el título principal de la página.
<p>: La etiqueta <p> define un párrafo de texto.
<h2>: Esta etiqueta define un encabezado de nivel 2, que se usa para subtítulos o secciones secundarias.

Guardar y Visualizar tu Página

Guardar el Archivo

Abre tu editor de texto preferido (por ejemplo, Visual Studio Code, Sublime Text, Notepad++).
Copia y pega el código HTML anterior en un nuevo archivo.
Guarda el archivo con la extensión .html. Por ejemplo, mi_primera_pagina.html.

Visualizar en un Navegador

Abre el explorador de archivos de tu sistema operativo.
Navega hasta la ubicación donde guardaste el archivo mi_primera_pagina.html.
Haz doble clic en el archivo. Esto debería abrir tu navegador web predeterminado y mostrar tu página HTML.

Ejercicio Práctico

Tarea

Crea un nuevo archivo HTML.
Añade la estructura básica del documento HTML.
Incluye un título principal (<h1>), un subtítulo (<h2>) y al menos dos párrafos (<p>).
Guarda el archivo como ejercicio_practico.html.
Abre el archivo en tu navegador web para ver el resultado.

Solución

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio Práctico</title>
</head>
<body>
    <h1>Mi Página de Ejercicio</h1>
    <h2>Subtítulo del Ejercicio</h2>
    <p>Este es el primer párrafo del ejercicio.</p>
    <p>Este es el segundo párrafo del ejercicio.</p>
</body>
</html>

Conclusión

¡Felicidades! Has creado tu primera página HTML. Ahora entiendes la estructura básica de un documento HTML y cómo añadir contenido simple como encabezados y párrafos. En la próxima lección, profundizaremos en las etiquetas y elementos HTML para que puedas crear páginas web más complejas y funcionales.

Creando tu Primera Página HTML

Estructura Básica de un Documento HTML

Explicación de las Etiquetas

Añadir Contenido Básico

Explicación de los Elementos

Guardar y Visualizar tu Página

Guardar el Archivo

Visualizar en un Navegador

Ejercicio Práctico

Tarea

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