Introducción a HTML
¿Qué vamos a aprender?
En esta clase vamos a comenzar a crear nuestras primeras páginas web utilizando HTML.
Al finalizar la actividad podrás:
¿Qué es HTML?
HTML significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto).
Es un lenguaje que utilizamos para organizar el contenido de una página web.
HTML funciona mediante etiquetas.
Por ejemplo:
<h1>Mi primera página web</h1>
<p>Hola, estoy aprendiendo HTML.</p>
Las etiquetas normalmente tienen una apertura y un cierre:
<p>Este es un párrafo.</p>
<p> abre la etiqueta.
</p> cierra la etiqueta.
1. Nuestra primera página web
Vamos a crear una carpeta llamada:
MiPaginaWeb
Dentro de ella crearemos un archivo llamado:
index.html
Escribimos el siguiente código:
<!DOCTYPE html>
<html>
<head>
<title>Mi primera página</title>
</head>
<body>
<h1>Hola mundo</h1>
<p>Esta es mi primera página web.</p>
</body>
</html>
Guardamos el archivo y luego lo abrimos utilizando un navegador como Google Chrome.
2. Títulos y subtítulos
HTML permite utilizar diferentes tamaños de títulos.
<h1>Título principal</h1>
<h2>Subtítulo</h2>
<h3>Título nivel 3</h3>
<h4>Título nivel 4</h4>
<h5>Título nivel 5</h5>
<h1> es el título más importante de la página.
Los demás se utilizan para organizar el contenido en diferentes niveles.
3. Párrafos
Para escribir textos utilizamos la etiqueta <p>.
Ejemplo:
<p>
Mi nombre es Juan y estoy aprendiendo
a crear páginas web utilizando HTML.
</p>
4. Listas
Podemos crear listas de elementos.
Lista sin números
Utilizamos <ul> y <li>.
<ul>
<li>Fútbol</li>
<li>Música</li>
<li>Videojuegos</li>
</ul>
Lista numerada
Utilizamos <ol> y <li>.
<ol>
<li>Informática</li>
<li>Matemática</li>
<li>Educación Física</li>
</ol>
5. Enlaces
Para crear un enlace utilizamos la etiqueta <a>.
Ejemplo:
<a href="https://www.google.com">
Ir a Google
</a>
Al hacer clic sobre el texto Ir a Google, el navegador abrirá esa página.
6. Imágenes
Para insertar una imagen utilizamos <img>.
Ejemplo:
<img src="foto.jpg" width="300">
En este ejemplo, el archivo foto.jpg debe encontrarse dentro de la misma carpeta que nuestro archivo index.html.
ACTIVIDAD PRÁCTICA
Mi primera página web
Cada alumno deberá crear una página web personal utilizando HTML.
La página deberá contener:
Un título <h1> con su nombre.
Un subtítulo <h2> que diga Sobre mí.
Un párrafo <p> contando brevemente algo sobre sí mismo.
Un subtítulo que diga Mis intereses.
Una lista <ul> con al menos 3 intereses.
Una lista numerada <ol> con sus 3 materias favoritas.
Un enlace <a> a una página que utilice frecuentemente.
Una imagen utilizando <img>.
Utilizar al menos una vez <h3>, <h4> o <h5>.
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Mi página personal</title>
</head>
<body>
<h1>Juan Pérez</h1>
<h2>Sobre mí</h2>
<p>
Tengo 15 años y estoy aprendiendo
a crear páginas web utilizando HTML.
</p>
<h2>Mis intereses</h2>
<ul>
<li>Fútbol</li>
<li>Videojuegos</li>
<li>Música</li>
</ul>
<h2>Mis materias favoritas</h2>
<ol>
<li>Informática</li>
<li>Educación Física</li>
<li>Matemática</li>
</ol>
<h3>Mi página favorita</h3>
<a href="https://www.youtube.com">
Visitar YouTube
</a>
<h3>Una imagen</h3>
<img src="foto.jpg" width="300">
<h4>Mi primera web</h4>
<p>
Esta página fue creada en la clase de TIC.
</p>
</body>
</html>
Para recordar
| Etiqueta | Función |
|---|
<h1> | Título principal |
<h2> a <h5> | Títulos y subtítulos |
<p> | Párrafo |
<a> | Enlace |
<img> | Imagen |
<ul> | Lista sin números |
<ol> | Lista numerada |
<li> | Elemento de una lista |
Preguntas finales
1. ¿Qué etiqueta utilizamos para crear el título principal?
2. ¿Qué etiqueta utilizamos para escribir un párrafo?
3. ¿Qué etiqueta utilizamos para crear un enlace?
4. ¿Qué diferencia existe entre <ul> y <ol>?
5. ¿Qué etiqueta utilizamos para insertar una imagen?
Entrega
Guardar el trabajo dentro de una carpeta con el siguiente formato:
Apellido_Nombre_HTML
La carpeta deberá contener como mínimo:
index.html
foto.jpg
