Lección 3
Lección: Creación de una Página Web Sencilla con HTML
🎯 Objetivo de aprendizaje
Al finalizar esta lección, el estudiante será capaz de:
-
Utilizar etiquetas básicas de HTML para estructurar contenido web.
-
Insertar texto, imágenes, hipervínculos, tablas y marquesinas.
-
Aplicar hojas de estilo CSS para mejorar la presentación.
-
Editar y visualizar una página web desde el Bloc de notas.
🧱 1. Introducción a HTML
HTML (HyperText Markup Language) es el lenguaje estándar para crear páginas web. Utiliza etiquetas para definir la estructura y el contenido.
Estructura básica:
<html>
<head>
<title>Mi primera página</title>
</head>
<body>
<!-- Contenido va aquí -->
</body>
</html>
2. Trabajo con etiquetas y texto
-
<h1>a<h6>: Encabezados -
<p>: Párrafos -
<br>: Saltos de línea -
<strong>,<em>: Texto en negrita o cursiva - <h1>Bienvenidos</h1>
<p>Esta es una página web sencilla.</p> -
3. Marquesinas
La etiqueta
<marquee>permite crear texto en movimiento (aunque está obsoleta en HTML5).Ejemplo:
<marquee behavior="scroll" direction="left">Texto en movimiento</marquee>
Hipervínculos
Se crean con la etiqueta
<a>.Ejemplo:
- <a href="https://www.ejemplo.com">Visita nuestro sitio</a>
Imágenes
Se insertan con la etiqueta
<img>.Ejemplo:
- <img src="imagen.jpg" alt="Descripción de la imagen" width="300">
-
6. Tablas
Se construyen con etiquetas como
<table>,<tr>,<td>,<th>.Ejemplo:
- <table border="1">
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td>Ana</td>
<td>22</td>
</tr>
</table>
7. Hojas de estilo (CSS)
Permiten mejorar la apariencia de la página.
Ejemplo interno:
- <style>
body {
background-color: #f0f0f0;
font-family: Arial;
}
h1 {
color: blue;
}
</style>
🛠️ 8. Edición desde el Bloc de notas
Pasos:
-
Abre el Bloc de notas.
-
Escribe el código HTML completo.
-
Guarda el archivo con extensión
.html(por ejemplo:pagina.html). -
Haz doble clic en el archivo para abrirlo en el navegador.
-