1. MICRO:BIT — ¿QUÉ ES? / WHAT IS MICRO:BIT?
Micro:bit versión 1.3 — Componentes / Components
Español: Identificación de los principales componentes de la micro:bit versión 1.3.
English: Identification of the main components of the micro:bit version 1.3.
Componentes de la placa micro:bit / micro:bit board components
micro:bit
Español: micro:bit es una pequeña computadora educativa programable que permite aprender programación, electrónica y tecnología mediante proyectos prácticos.
English: micro:bit is a small educational programmable computer that helps students learn coding, electronics, and technology through hands-on projects.
🇨🇴 ¿Qué es micro:bit? / 🇬🇧 What is micro:bit?
| Español | English |
|---|---|
| Micro:bit es una placa programable diseñada para que los estudiantes creen proyectos interactivos. | Micro:bit is a programmable board designed to help students create interactive projects. |
| Puede utilizarse para mostrar imágenes, leer sensores y controlar componentes electrónicos. | It can be used to display images, read sensors, and control electronic components. |
| Se programa de forma visual y también puede utilizarse con lenguajes de programación. | It can be programmed visually and can also be used with programming languages. |
🚀 Primer acercamiento / First look
Español: Piensa en un proyecto que te gustaría construir con micro:bit. Puede ser un contador, una alarma, un juego o un dispositivo que use sensores.
English: Think of a project you would like to build with micro:bit. It could be a counter, an alarm, a game, or a device that uses sensors.
2. ¿QUÉ ES HTML?
HTML significa HyperText Markup Language, o Lenguaje de Marcado de Hipertexto.
HTML es el lenguaje que utilizamos para organizar el contenido de una página web. Con HTML podemos colocar títulos, textos, imágenes, enlaces, listas, tablas y formularios.
🧠 Comprueba lo aprendido
Pregunta: ¿Para qué sirve HTML?
Respuesta: Para estructurar y organizar el contenido de una página web.
3. ESTRUCTURA BÁSICA DE HTML
<!DOCTYPE html>
<html>
<head>
<title>Mi primera página</title>
</head>
<body>
<h1>¡Hola, mundo!</h1>
<p>Estoy aprendiendo HTML.</p>
</body>
</html><!DOCTYPE html>
Le indica al navegador que el documento utiliza HTML.
<html>
Es la etiqueta que contiene toda la página.
<head>
Contiene información de la página que ayuda al navegador.
<title>
Indica el nombre que aparece en la pestaña del navegador.
<body>
Contiene el contenido que normalmente vemos en la página.
✏️ Ejercicio 1 — Mi primera página
- Abre Bloc de notas.
- Escribe la estructura anterior.
- Cambia el contenido de
<title>. - Cambia el texto del
<h1>. - Escribe una frase dentro de
<p>. - Guarda el archivo como index.html.
- Haz doble clic sobre el archivo para abrirlo en el navegador.
4. ETIQUETAS HTML — EXPLICACIÓN PASO A PASO
Vamos a aprender las etiquetas en orden, comenzando por la estructura de un documento HTML y después pasando a títulos, textos, listas, enlaces, imágenes, tablas y etiquetas semánticas.
Regla de oro: muchas etiquetas tienen una etiqueta de apertura y otra de cierre. Por ejemplo: <p>Texto</p>. La apertura indica dónde empieza el elemento y el cierre indica dónde termina.
1. <!DOCTYPE html> — Declaración del documento
¿Qué hace? Le indica al navegador que el archivo debe interpretarse como un documento HTML5.
¿Dónde va? Siempre debe ser la primera línea del documento.
¿Tiene cierre? No. No es una etiqueta que contenga contenido; es una declaración.
<!DOCTYPE html>🧠 Imagínalo así: es como decirle al navegador: “¡Atención! Este archivo está escrito en HTML5”.
✏️ Mini ejercicio
Crea un archivo nuevo y escribe <!DOCTYPE html> como primera línea.
2. <html> — La etiqueta que contiene toda la página
¿Qué hace? Es el elemento raíz del documento. Dentro de <html> colocamos las partes principales de la página: <head> y <body>.
Sintaxis:
<html>
...contenido de la página...
</html>Ejemplo con idioma: <html lang="es"> indica que el contenido está en español.
💡 Para recordar: si la página fuera una casa, <html> sería la casa completa.
3. <head> — Información de configuración
¿Qué hace? Contiene información que el navegador necesita para interpretar correctamente la página. Normalmente no es el contenido principal que el visitante ve.
Dentro de <head> podemos colocar, entre otros elementos, <meta>, <title> y enlaces a hojas de estilo.
<head>
<meta charset="UTF-8">
<title>Mi página</title>
</head>🧠 Analogía: es como la carpeta de instrucciones de una casa: contiene información necesaria para organizarla, aunque no sea la sala que visitan las personas.
4. <meta> — Información sobre el documento
¿Qué hace? Proporciona información al navegador sobre el documento.
Un ejemplo muy importante es charset="UTF-8", que permite trabajar correctamente con muchos caracteres y letras usadas en español, como á, é, í, ó, ú y ñ.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">¿Tiene cierre? No en HTML. Es un elemento vacío.
🔎 ¿Qué significa viewport?
Ayuda a que la página se adapte mejor al tamaño de la pantalla, especialmente en celulares y tabletas.
5. <title> — Nombre de la pestaña
¿Qué hace? Define el título que aparece normalmente en la pestaña del navegador.
<title>Mi primera página web</title>Importante: el texto de <title> no funciona como el título grande que aparece dentro de la página. Para eso usamos <h1>.
6. <body> — Todo lo que forma el contenido visible
¿Qué hace? Contiene la parte principal de la página que normalmente vemos en el navegador: títulos, párrafos, imágenes, enlaces, listas, tablas y otros elementos.
<body>
<h1>Bienvenidos</h1>
<p>Esta es mi página.</p>
</body>🧠 Recuerda: <head> prepara información del documento; <body> contiene el contenido de la página.
7. <h1> — Título principal
¿Qué hace? Representa el título principal de una página o de un contenido.
<h1>Mi página web</h1>El navegador normalmente muestra <h1> con un tamaño grande, pero su importancia no depende solamente del tamaño: también comunica la estructura del contenido.
Buena práctica: utiliza un título principal claro y relacionado con el tema de la página.
8. <h2> — Título de una sección
¿Qué hace? Organiza el contenido en secciones o subtítulos.
<h2>Mis hobbies</h2>Después de un <h1>, puedes utilizar diferentes <h2> para dividir la información.
9. <h3>, <h4>, <h5> y <h6> — Subniveles de títulos
¿Qué hacen? Permiten organizar títulos y subtítulos en diferentes niveles.
<h1>Mi sitio web</h1>
<h2>Mis proyectos</h2>
<h3>Proyecto de ciencias</h3>Idea clave: los números representan niveles de organización. No se deben elegir solamente porque “se ven grandes o pequeños”.
10. <p> — Párrafo
¿Qué hace? Define un bloque de texto o párrafo.
<p>Estoy aprendiendo a crear páginas web.</p>Es una de las etiquetas que más utilizarás para escribir explicaciones, descripciones y presentaciones.
✏️ Mini ejercicio
Escribe tres párrafos: uno sobre tu nombre, otro sobre tu colegio y otro sobre tu pasatiempo favorito.
11. <strong> — Texto importante
¿Qué hace? Marca un fragmento como especialmente importante. Los navegadores normalmente lo muestran en negrita.
<p>Mi materia favorita es <strong>Tecnología</strong>.</p>Resultado aproximado: Mi materia favorita es Tecnología.
12. <em> — Énfasis
¿Qué hace? Da énfasis a una palabra o frase. Normalmente el navegador la muestra en cursiva.
<p>Este concepto es <em>muy importante</em>.</p>13. <mark> — Texto resaltado
¿Qué hace? Resalta una parte del texto para llamar la atención sobre ella.
<p>Recuerda la palabra <mark>HTML</mark>.</p>14. <br> — Salto de línea
¿Qué hace? Fuerza un cambio de línea dentro del contenido.
Hola<br>
Mundo¿Tiene cierre? No. Es un elemento vacío.
Consejo: úsalo para saltos de línea que tengan sentido en el contenido, no para crear grandes espacios de diseño.
15. <hr> — Separador temático
¿Qué hace? Inserta una separación entre partes relacionadas pero diferenciadas del contenido. Normalmente se muestra como una línea horizontal.
<h2>Primera sección</h2>
<p>Contenido...</p>
<hr>
<h2>Segunda sección</h2>16. <ul> — Lista con viñetas
¿Qué hace? Crea una lista en la que el orden de los elementos no es lo más importante.
<ul>
<li>Matemáticas</li>
<li>Inglés</li>
<li>Tecnología</li>
</ul>Los elementos se escriben dentro de <li>.
17. <ol> — Lista ordenada
¿Qué hace? Crea una lista numerada. Es útil cuando el orden sí importa.
<ol>
<li>Encender el computador</li>
<li>Abrir el editor</li>
<li>Escribir HTML</li>
</ol>18. <li> — Elemento de una lista
¿Qué hace? Representa cada elemento individual dentro de una lista <ul> o <ol>.
<ul>
<li>Leer</li>
<li>Dibujar</li>
</ul>Importante: normalmente <li> se utiliza dentro de una lista, no como etiqueta independiente para crear una lista completa.
19. <a> — Enlace o hipervínculo
¿Qué hace? Permite crear un enlace que puede llevar a otra página, archivo, sección o recurso.
La etiqueta utiliza el atributo href para indicar el destino.
<a href="https://www.google.com">Visitar Google</a>Partes: <a inicia el enlace; href="..." indica el destino; el texto “Visitar Google” es lo que el usuario puede pulsar; </a> cierra el enlace.
20. <img> — Imagen
¿Qué hace? Inserta una imagen en la página.
<img src="foto.jpg" alt="Mi fotografía">src indica dónde está la imagen. alt proporciona un texto alternativo que ayuda a describir la imagen.
¿Tiene cierre? No. Es un elemento vacío.
⚠️ Consejo: si la imagen está en la misma carpeta que index.html, puedes utilizar solamente su nombre, por ejemplo src="foto.jpg".
21. <button> — Botón
¿Qué hace? Crea un botón que el usuario puede pulsar.
<button>Haz clic aquí</button>Por sí solo, el botón puede mostrarse y recibir interacción. Para que realice acciones más avanzadas normalmente se combina con JavaScript.
22. <div> — Contenedor genérico
¿Qué hace? Agrupa contenido para poder organizarlo o aplicarle estilos y comportamiento.
<div>
<h2>Mi sección</h2>
<p>Contenido de la sección.</p>
</div>🧠 Analogía: imagina una caja. Dentro de la caja puedes colocar varios elementos para tratarlos como un grupo.
23. <header> — Encabezado
¿Qué hace? Representa el encabezado de una página o de una sección. Puede contener un título, logotipo, presentación o elementos de introducción.
<header>
<h1>Mi colegio</h1>
<p>Bienvenidos a nuestro sitio web.</p>
</header>24. <nav> — Navegación
¿Qué hace? Agrupa enlaces destinados a la navegación principal del sitio o de una página.
<nav>
<a href="#inicio">Inicio</a>
<a href="#sobre-mi">Sobre mí</a>
<a href="#contacto">Contacto</a>
</nav>25. <main> — Contenido principal
¿Qué hace? Identifica el contenido principal de la página.
<main>
<h1>Mi proyecto</h1>
<p>Aquí está la información principal.</p>
</main>Ayuda a organizar semánticamente el documento.
26. <section> — Sección temática
¿Qué hace? Agrupa contenido que pertenece a un mismo tema.
<section id="hobbies">
<h2>Mis hobbies</h2>
<p>Me gusta leer y montar bicicleta.</p>
</section>El atributo id puede identificar la sección para enlazarla desde un menú.
27. <footer> — Pie de página
¿Qué hace? Representa el pie de una página o sección. Puede contener información como autoría, derechos, contacto o enlaces complementarios.
<footer>
<p>Página creada por un estudiante de grado 8.</p>
</footer>28. <table>, <tr>, <th> y <td> — Tablas
<table> crea la tabla. <tr> crea una fila. <th> crea una celda de encabezado. <td> crea una celda de datos.
<table>
<tr>
<th>Nombre</th>
<th>Curso</th>
</tr>
<tr>
<td>Ana</td>
<td>8</td>
</tr>
</table>🧠 Para recordar: table = tabla, tr = fila, th = encabezado, td = dato.
🧩 Cómo leer una etiqueta HTML
<a href="https://ejemplo.com">Visitar sitio</a>| Parte | Significado |
|---|---|
<a> | Nombre de la etiqueta: crea un enlace. |
href | Atributo que indica el destino. |
"https://ejemplo.com" | Valor del atributo. |
| Visitar sitio | Texto visible para el usuario. |
</a> | Etiqueta de cierre. |
🎯 Actividad paso a paso — Construye tu primera página
- Escribe
<!DOCTYPE html>. - Abre
<html lang="es">. - Crea
<head>y agrega<meta charset="UTF-8">. - Agrega un
<title>que diga “Mi primera página”. - Cierra
</head>. - Abre
<body>. - Escribe un
<h1>con tu nombre. - Escribe un
<p>para presentarte. - Crea un
<h2>llamado “Mis hobbies”. - Agrega una lista
<ul>con cinco elementos<li>. - Agrega una imagen usando
<img>. - Agrega un enlace con
<a href="...">. - Cierra
</body>y después</html>. - Guarda el archivo como index.html y ábrelo en el navegador.
📄 Ver ejemplo completo de la actividad
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi primera página</title>
</head>
<body>
<header>
<h1>María</h1>
<p>Soy estudiante de grado 8.</p>
</header>
<nav>
<a href="#hobbies">Mis hobbies</a>
</nav>
<main>
<section id="hobbies">
<h2>Mis hobbies</h2>
<ul>
<li>Leer</li>
<li>Dibujar</li>
<li>Escuchar música</li>
<li>Jugar</li>
<li>Montar bicicleta</li>
</ul>
<img src="foto.jpg" alt="Mi fotografía">
</section>
</main>
<footer>
<p>Página creada por un estudiante de grado 8.</p>
</footer>
</body>
</html>4. EJERCICIOS PRÁCTICOS
✏️ Ejercicio 2 — Presentación personal
Crea una página que contenga:
- Tu nombre como título.
- Un párrafo sobre ti.
- Un subtítulo: “Mis hobbies”.
- Una lista con cinco hobbies.
- Una imagen.
Ver solución orientativa
<h1>Mi nombre es Ana</h1>
<p>Soy estudiante de grado 8.</p>
<h2>Mis hobbies</h2>
<ul>
<li>Leer</li>
<li>Dibujar</li>
<li>Jugar</li>
<li>Escuchar música</li>
<li>Montar bicicleta</li>
</ul>
<img src="foto.jpg">✏️ Ejercicio 3 — Mi colegio
Crea una página sobre tu colegio con nombre, descripción, asignaturas, actividades y un enlace educativo.
✏️ Ejercicio 4 — Mi animal favorito
Crea una página sobre un animal. Agrega un título, una imagen, una descripción, una lista de características y un enlace.
✏️ Ejercicio 5 — Tabla
<table>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Curso</th>
</tr>
<tr>
<td>Ana</td>
<td>13</td>
<td>8</td>
</tr>
</table>Reto: agrega tres estudiantes más.
5. 🏆 RETO FINAL — CREA TU PROPIA PÁGINA
Construye una página web completa usando solamente HTML.
📄 Ver plantilla completa
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi sitio web</title>
</head>
<body>
<header>
<h1>Mi sitio web</h1>
</header>
<nav>
<a href="#inicio">Inicio</a>
<a href="#sobre-mi">Sobre mí</a>
</nav>
<main>
<section id="inicio">
<h2>Bienvenidos</h2>
<p>Escribe aquí tu presentación.</p>
</section>
<section id="sobre-mi">
<h2>Sobre mí</h2>
<p>Escribe aquí información sobre ti.</p>
</section>
</main>
<footer>
<p>Página creada por un estudiante de grado 8.</p>
</footer>
</body>
</html>6. ✅ AUTOEVALUACIÓN INTERACTIVA
1. ¿Qué etiqueta sirve para crear un párrafo?
2. ¿Qué etiqueta crea un enlace?
3. ¿Qué etiqueta sirve para colocar una imagen?
4. ¿Qué etiqueta representa el contenido principal?
5. ¿Qué etiqueta representa el pie de página?
7. 📌 CONSEJOS PARA APRENDER
- Practica escribiendo código todos los días.
- Guarda el archivo como .html.
- Abre el archivo con el navegador para ver el resultado.
- Si algo sale mal, revisa que las etiquetas estén bien escritas.
- No tengas miedo de equivocarte: los errores también enseñan.