<main> - Contenido Principal
<article>
Post de blog...
Descubre la evolución, estructura y poder del lenguaje que define la World Wide Web. Esta guía completa te llevará a través de los conceptos esenciales de HTML5, pensada para ser práctica y didáctica.
HTML, o HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el pilar fundamental de la World Wide Web. HTML5 es su quinta y más reciente versión mayor, un estándar vivo que continúa evolucionando. No es un lenguaje de programación (no tiene lógica condicional, bucles, etc.), sino un lenguaje de marcado que define la estructura y el significado del contenido de una página web.
Desde sus inicios en el CERN, HTML ha recorrido un largo camino para estructurar la World Wide Web.
<form>, <input>), imágenes (<img>) y tablas básicas. Toda página web se construye sobre un conjunto de etiquetas HTML fundamentales. Conocerlas es el primer paso para crear contenido web. Estas etiquetas son los "ladrillos" con los que edificamos la estructura y el contenido de nuestros sitios.
Estas son las etiquetas que forman el esqueleto de cualquier página HTML.
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Aquí va la metainformación -->
<title>Título de mi Página</title>
</head>
<body>
<!-- Aquí va el contenido visible -->
</body>
</html>El <head> es vital para configurar tu página y proporcionar información a navegadores y motores de búsqueda.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título Impactante</title>
<link rel="stylesheet" href="mis_estilos.css">
</head>Dar estructura y énfasis al texto es fundamental.
%%html
<style>
.parrafo-derecha { text-align: right; color: blue; }
.parrafo-centro { text-align: center; color: green; }
.caja-div {
border: 2px solid orange;
background-color: #fff3e0;
padding: 15px;
margin-top: 10px;
border-radius: 8px;
}
</style>
<h1>Teorema de Pitágoras</h1>
<p>En un triángulo rectángulo, el cuadrado de la hipotenusa (<em>c</em>) es igual a la suma de los cuadrados de los catetos (<em>a</em> y <em>b</em>).</p>
<p class="parrafo-centro">Fórmula: <code>a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></code>. <strong>¡Fundamental!</strong></p>
<p class="parrafo-derecha">Unidades de agua: H<sub>2</sub>O.</p>
<hr>
<div class="caja-div">
<p>Esto es una caja creada con un <code><div></code> y estilos.</p>
</div>Estas etiquetas dan un significado claro a las diferentes secciones de una página.
<header>
<h1>Blog de Ciencia</h1>
</header>
<nav>
<!-- Enlaces de navegación aquí -->
</nav>
<main>
<article>
<h2>La Gravedad</h2>
<p>Explicación sobre la gravedad...</p>
</article>
</main>
<footer>
<p>© 2025 Blog de Ciencia</p>
</footer>Ahora que conoces las etiquetas básicas, veamos cómo combinarlas para crear elementos comunes en cualquier página web, con ejemplos orientados a la ciencia.
Las listas son perfectas para organizar información.
%%html
<h4>Componentes del Átomo (Desordenada):</h4>
<ul>
<li>Protones</li>
<li>Neutrones</li>
<li>Electrones</li>
</ul>
<h4>Pasos Método Científico (Ordenada):</h4>
<ol>
<li>Observación</li>
<li>Hipótesis</li>
<li>Experimentación</li>
<li>Conclusión</li>
</ol>Las tablas son ideales para mostrar datos estructurados en filas y columnas.
%%html
<style>
table.elementos, table.elementos th, table.elementos td {
border: 1px solid black;
border-collapse: collapse; /* Une los bordes */
padding: 5px;
text-align: left;
}
table.elementos th { background-color: #f2f2f2; }
</style>
<table class="elementos">
<caption>Primeros Elementos Químicos</caption>
<tr>
<th>N° Atómico</th><th>Símbolo</th><th>Nombre</th>
</tr>
<tr>
<td>1</td><td>H</td><td>Hidrógeno</td>
</tr>
<tr>
<td>2</td><td>He</td><td>Helio</td>
</tr>
</table>Los enlaces conectan tus páginas con el resto de la web o con otras secciones de tu propio sitio.
<p>Visita <a href="https://www.wikipedia.org" target="_blank">Wikipedia</a>.</p>
<p>Ir a la <a href="#seccion_formulas">sección de fórmulas</a>.</p>
<!-- ... más contenido ... -->
<h3 id="seccion_formulas">Fórmulas Matemáticas</h3>%%html
<h4>Planeta Tierra:</h4>
<img src="https://placehold.co/300x300/007bff/ffffff?text=Tierra"
alt="Imagen del Planeta Tierra" width="150">%%html
<h4>Video Demostrativo (requiere URL válida):</h4>
<video width="320" height="240" controls>
<source src="ruta_al_video.mp4" type="video/mp4">
Tu navegador no soporta la etiqueta video.
</video>
La etiqueta <marquee> permite crear texto o imágenes que se desplazan horizontal o verticalmente. Aunque está **obsoleta** en HTML5 y no se recomienda para sitios web profesionales (CSS Animations es la alternativa moderna), puede ser una forma rápida y sencilla de añadir un efecto dinámico simple en entornos como Google Colab para destacar información.
%%html
<marquee behavior="scroll" direction="left" scrollamount="5"
style="background-color: #e0f7fa; color: #00796b; padding: 10px; border-radius: 5px; font-weight: bold;">
Fórmulas importantes: E=mc² (Einstein) | F=ma (Newton) | PV=nRT (Gases Ideales)
</marquee>Crear una página web básica es más fácil de lo que piensas. Solo necesitas un editor de texto simple y un navegador web.
Usa cualquier editor de texto (Bloc de Notas, VS Code, etc.).
Copia este esqueleto HTML5:
<!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</title>
</head>
<body>
<h1>¡Hola, HTML!</h1>
<p>Aprendiendo a crear mi primera página web.</p>
</body>
</html>Guarda como index.html (o similar) con extensión .html.
Haz doble clic en el archivo para verlo en tu navegador.
Usar etiquetas semánticas da significado a las secciones de tu página, mejorando accesibilidad y SEO.
<!DOCTYPE html>
<html lang="es">
<head><title>Blog Científico</title></head>
<body>
<header><h1>Mi Blog de Ciencia</h1></header>
<nav> <!-- Enlaces de navegación --> </nav>
<main>
<article>
<h2>Descubrimientos en Física Cuántica</h2>
<p>Un resumen de los últimos avances...</p>
</article>
</main>
<footer><p>Copyright © 2025</p></footer>
</body>
</html>HTML5 va más allá de la estructura básica, ofreciendo etiquetas para multimedia, gráficos y formularios interactivos.
En Google Colab, puedes renderizar HTML, CSS y JavaScript directamente en celdas usando %%html. Esto es ideal para enriquecer tus notebooks de Python.
%%html
<style>
.simulacion-data {
border: 1px solid #ff6b35; padding: 10px; margin-top: 5px;
background-color: #fff0e9; border-radius: 5px;
}
</style>
<h3>Resultados de Simulación de Proyectil</h3>
<div class="simulacion-data">
<p><strong>Ángulo de lanzamiento:</strong> 45°</p>
<p><strong>Velocidad inicial:</strong> 20 m/s</p>
<p><strong>Alcance máximo:</strong> 40.82 m</p>
</div>Dado que tu curso se enfoca en Python aplicado a matemáticas y física, y deseas que tus estudiantes aprendan HTML, CSS y JavaScript, aquí tienes algunas ideas para integrar estos conocimientos de forma efectiva:
Al conectar estos aprendizajes con los temas de matemáticas y física que ya están explorando con Python, harás que la relevancia de estas tecnologías web sea mucho más evidente y motivadora para ellos. ¡Mucha suerte con tu curso!