01
¿Qué significa HTML?
HTML significa HyperText Markup Language, o Lenguaje de Marcado de Hipertexto.
Es el lenguaje que utilizamos para definir la estructura y el contenido de una página web.
Con HTML podemos indicar al navegador qué elemento es un título, qué elemento es un párrafo, dónde queremos una imagen o qué texto debe convertirse en un enlace.
02
HTML utiliza etiquetas.
La mayoría de los elementos HTML se escriben utilizando una etiqueta de apertura y otra de cierre.
Por ejemplo, un párrafo:
La primera etiqueta abre el elemento:
Y la segunda lo cierra:
Entre ambas escribimos el contenido que queremos mostrar en la página.
03
Algunas etiquetas básicas.
No necesitas memorizar cientos de etiquetas. Empezaremos con unas pocas que utilizarás constantemente.
<h1>
Define el título principal de una página.
<p>
Define un párrafo de texto.
<a>
Permite crear un enlace.
04
La estructura básica de un documento HTML.
Una página HTML comienza con una estructura básica que utilizaremos prácticamente siempre.
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi primera web</title>
</head>
<body>
<h1>Mi primera página web</h1>
<p>Estoy aprendiendo HTML.</p>
</body>
</html>
Puede parecer mucho al principio, pero vamos a entender cada parte.
05
HTML, HEAD y BODY.
<html> contiene todo el documento HTML.
<head> contiene información sobre la página que normalmente no aparece directamente dentro del contenido.
<body> contiene todo lo que verá el visitante: títulos, textos, imágenes, botones y demás contenido.
06
Los títulos tienen jerarquía.
HTML dispone de seis niveles de encabezados:
<h2>Título de sección</h2>
<h3>Subtítulo</h3>
<h4>Nivel 4</h4>
<h5>Nivel 5</h5>
<h6>Nivel 6</h6>
No debes elegirlos simplemente por su tamaño visual. Los encabezados representan la organización y jerarquía del contenido.
07
Cómo crear un enlace.
Los enlaces permiten conectar páginas entre sí.
Utilizamos la etiqueta:
Por ejemplo:
El atributo href indica a qué página debe llevar el enlace.
08
Crea tu primer archivo HTML.
Ahora vamos a crear algo real.
Crea una carpeta en tu ordenador llamada:
Dentro crea un archivo llamado:
El nombre index.html es importante, porque suele utilizarse como página principal de un sitio web.
09
Escribe tu primera página.
Dentro de index.html, escribe:
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi primera web</title>
</head>
<body>
<h1>Bienvenido a mi web</h1>
<p>
Esta es mi primera página creada con HTML.
</p>
</body>
</html>
Guarda el archivo y ábrelo con tu navegador.
Si todo está correcto, verás tu título y tu primer párrafo.
RESUMEN
Lo que has aprendido.
- HTML define la estructura de una página web.
- HTML utiliza etiquetas.
- Muchas etiquetas tienen apertura y cierre.
- HEAD contiene información sobre la página.
- BODY contiene el contenido visible.
- Los encabezados organizan el contenido.
- Los enlaces se crean con la etiqueta <a>.
- La página principal suele llamarse index.html.
PONLO EN PRÁCTICA
Construye tu primera página HTML.
Utiliza tu archivo index.html y añade:
- Un título principal con h1.
- Un subtítulo con h2.
- Dos párrafos.
- Un enlace.
Después guarda el archivo y vuelve a abrirlo en el navegador para comprobar los cambios.