Introducción
HTML, o HyperText Markup Language (Lenguaje de Marcas de Hipertexto), es el lenguaje básico que se utiliza para crear y estructurar páginas web. Un archivo HTML es un documento de texto que contiene etiquetas específicas que le indican al navegador cómo organizar y mostrar el contenido, como textos, imágenes, enlaces y otros elementos visuales.
Las etiquetas HTML, como <h1>, <p>, y <a>, definen distintos tipos de contenido en la página:
<h1>se usa para títulos,<p>para párrafos, y<a>para enlaces a otras páginas.
Cuando un navegador como Chrome o Firefox abre un archivo HTML, interpreta estas etiquetas y muestra el contenido con una apariencia organizada y fácil de leer. HTML es muy importante para el desarrollo web, ya que permite dar estructura y forma a la información que vemos en las páginas de Internet.
Cómo crear una página web básica con HTML
Vamos a hacer algo muy potente: crear una página web desde cero, solo con el Editor de texto. Sin programas mágicos, sin plantillas. Solo tú y el código. Y créeme, cuando veas que funciona… engancha 😎
1️⃣ Abrir el Editor de texto
En EducaAndOS:
- Haz clic en el menú de aplicaciones.
- Busca Editor de texto.
- Ábrelo.
Se abrirá una ventana en blanco. Ahora mismo no parece gran cosa… pero aquí vas a construir una web.
2️⃣ Escribir la estructura básica en HTML
Copia y escribe este código:
<!DOCTYPE html>
<html>
<head>
<title>Mi primera web</title>
</head>
<body>
<h1>Bienvenido a mi página web</h1>
<p>Esta es mi primera página creada desde cero con HTML.</p>
</body>
</html>
🔎 ¿Qué estamos haciendo aquí?
<html>→ Indica que es un documento html.<head>→ Contiene información interna.<body>→ Es lo que se verá en pantalla.<h1>→ Es un encabezado grande.<p>→ Es un párrafo.
Ahora viene la parte importante.
3️⃣ Guardar el archivo correctamente
Este paso es clave.
- Haz clic en Archivo → Guardar como.
- Elige una carpeta fácil de localizar (por ejemplo, Documentos).
- Ponle un nombre como: miweb.html (*)
- Guárdalo
(*) ⚠️ Muy importante: la extensión debe ser .html. No vale .txt. Si no pones .html, el navegador no lo reconocerá como página web.
4️⃣ Localizar el archivo
Ahora abre el Explorador de archivos y entra en la carpeta donde lo guardaste (por ejemplo, Documentos). Verás que el archivo tiene un icono diferente. Eso significa que el sistema ya lo reconoce como una página web. En este momento has convertido un simple archivo de texto en una página web real.
5️⃣ Abrir el archivo de dos formas diferentes
Tu archivo ahora puede abrirse de dos maneras:
🔹 Opción A: Con el Editor de texto
Si haces clic derecho → Abrir con → Editor de texto, verás el código y podrás modificarlo.
🔹 Opción B: Con el Navegador
Si haces doble clic (o clic derecho → abrir con navegador), se abrirá en Firefox o Chromium y verás la página web visualmente.
Y esto es clave que lo entiendas:
👉 Es el mismo archivo.
👉 No hay dos versiones.
👉 El navegador interpreta el código y lo convierte en una página visual.
En la siguiente imagen puedes ver a la izquierda cómo se ve en el editor de texto (el código que podemos modificar) y cómo se ve en un navegador (el resultado de nuestra página web tal y como la verán nuestros usuarios).
🎯 Lo que acabas de aprender (y es más importante de lo que parece)
- Una web es un archivo de texto con extensión
.html. - El navegador no “crea” la web, la interpreta.
- Tú tienes el control total del contenido.
Crear una página web básica con HTML es fácil y solo necesitas un editor de texto y un navegador. Vamos a detallar los pasos que deberás seguir:
Elementos Básicos HTML
-
Título y Párrafos: Comenzamos añadiendo un título con la etiqueta
<title>en el<head>y párrafos en el<body>usando<p>.
-
Enlaces e Imágenes: Añadimos enlaces con
<a href="URL">y mostramos imágenes con<img src="url_de_la_imagen" alt="descripción">.Referencia: Enlaces e Imágenes en w3schools
-
Listas y Tablas: Incorporamos listas utilizando
<ul>para listas no ordenadas y<ol>para listas ordenadas. Las tablas se crean con<table>,<tr>para filas y<td>para celdas.
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
-
Cabeceras: Usamos
<h1>,<h2>,<h3>, etc., para definir encabezados de diferentes niveles. Ejemplo:
| <h1>Encabezado de primer nivel</h1> |
Encabezado de primer nivel |
| <h2>Encabezado de segundo nivel</h3> |
Encabezado de segundo nivel |
| <h3>Encabezado de tercer nivel</h3> |
Encabezado de tercer nivel |
| ... | ... |
Ejemplo con todos los elementos básicos
<!DOCTYPE html>
<html>
<head>
<title>Mi Página Web de Ejemplo</title>
</head>
<body>
<!-- Cabeceras -->
<h1>Bienvenidos a Mi Página Web</h1>
<h2>Una Introducción a HTML</h2>
<h3>Comenzando con lo Básico</h3>
<!-- Párrafos -->
<p>Esta es una página de ejemplo creada para mostrar cómo funcionan los elementos básicos de HTML. A continuación, encontrarás algunos ejemplos de cómo usar títulos, párrafos, enlaces, imágenes, listas y tablas.</p>
<p>HTML es un lenguaje de marcado que nos permite estructurar y organizar contenido en una página web.</p>
<!-- Enlaces -->
<p>Puedes aprender más sobre HTML en <a href="https://www.w3schools.com/html/">W3Schools</a>, un sitio excelente para aprender programación web.</p>
<!-- Imágenes -->
<h2>Imágenes</h2>
<p>A continuación, mostramos una imagen de ejemplo:</p>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSfT4YfqurHpWxsKAeUy2wShxPq-RfZeJzWxw&s" alt="Ejemplo de una imagen">
<!-- Listas -->
<h2>Listas</h2>
<h3>Lista No Ordenada</h3>
<ul>
<li>Introducción a HTML</li>
<li>Creación de Listas</li>
<li>Uso de Enlaces e Imágenes</li>
</ul>
<h3>Lista Ordenada</h3>
<ol>
<li>Configurar el Documento</li>
<li>Escribir el Código HTML</li>
<li>Guardar y Visualizar en el Navegador</li>
</ol>
<!-- Tablas -->
<h2>Tabla de Contactos de Empresas</h2>
<table border="1">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>Ejemplo visualizado en el Navegador
