En la clase 1 hicimos una página muy sencilla. En la clase 2 agregamos negrita, cursiva, enlaces. En la tercera clase le vamos a agregar imágenes, título y encabezados.
Los títulos de las ventanas
- Comienzo de título de ventana: <title>
- Fin de título de ventana: </title>
Vamos a abrir el archivo HTML en el editor de texto (Notepad++, Geany, etc.)
Hasta ahora en la parte del encabezado sólo tenemos la declaración del tipo de caracteres, lo cual es necesario incluir para poder ver los acentos y eñes.
Ahora vamos a agregar algo más en esa sección (dentro del heading)
<!DOCTYPE html>
<head>
<meta charset=”UTF-8″>
<title>El Martín Fierro</title>
</head>
<body>
¿Pero dónde se ve ese título? Cuando abras tu página web, vas a ver el título en la parte de arriba del navegador, y también en la barra de tareas.
Agregamos títulos y subtítulos en la página
- Comienzo de encabezado de primer nivel (títulos principales): <h1>
- Fin de encabezado: </h1>
- Comienzo de encabezado de segundo nivel (subtítulos): <h2>
- Fin de encabezado de segundo nivel: </h2>
Para insertar un título, por supuesto, se puede escribir el título y luego agregarle negrita o cursiva. Sin embargo, esa manera de poner un título no es útil para todos los usuarios. Lo que es correcto semánticamente es indicar que lo que uno está escribiendo es un título. De esa manera quien lo necesite puede comprender la estructura de la página, y también se puede determinar un formato para todos los encabezados de primer nivel (títulos), otro formato para los encabezados de segundo nivel (subtítulos), etc.
<body>
<h1>Rayuela</h1>
<h2>Pero no el libro original</h2>
<h3>Autor: Yo</h3>
<p>Había una vez una vereda, una niña, y una tiza. También había una piedra y otra niña. Todos esos elementos se combinaron de tal forma que en la vereda quedó una rayuela. La lluvia la borró.</p>
</body>
Imágenes
- Inserción de una imagen: <img src=”imagen.png> alt=”Logotipo” />
Para insertar una imagen es necesario que el archivo:
- Tenga uno de estos tres formatos:
- GIF (menos colores, pero con posibilidad de ser animados),
- JPG (todos los colores, sin transparencia ni animación pero mejor compresión que el PNG), o
- PNG (pesa más, pero admite transparencias)
- Esté on line, es decir, tenemos que subir la imagen para poder indicar su ubicación (en el caso de nuestras prácticas con páginas locales, no es necesario; basta con poner el archivo de imagen en la misma carpeta que la página que estamos creando).
- Tenga derechos que te permitan usarla. Nunca hay que usar una imagen que no tiene declarada una licencia que permita su uso.
Imágenes con enlaces
Para poner un enlace en una imagen, basta con poner la imagen en el lugar donde se escribe el contenido del enlace:
<a href=”https://es.wikipedia.org/”><img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Wikipedia-logo-v2-es.svg/135px-Wikipedia-logo-v2-es.svg.png”/></a>
Se ve de esta manera:
Hay dos recomendaciones muy importantes para mejorar la accesibilidad del sitio web:
- Las imágenes deben tener texto alternativo significativo (si la imagen tiene enlace, el texto alternativo debe ser la indicación del enlace, por ejemplo “Ir al comienzo”)
- Las imágenes tienen que estar optimizadas para poder cargar rápidamente, para no gastar ancho de banda innecesario, máxime teniendo en cuenta que cuando navegamos con nuestros celulares pagamos por cada byte que descargamos.
Te propongo hacer el siguiente ejercicio:
- Armá una pequeña galería de arte o álbum de fotos, poniendo una imagen, luego un enlace a la siguiente, etc.
Más tutoriales de HTML
En el sitio de w3schools hay excelentes tutoriales de HTML y CSS.
