Podemos incluir etiquetas meta con distintas finalidades:
- para elegir el juego de caracteres que se utiliza (charset); así utilizaremos <meta charset= “UTF-8”/> para que aparezcan ñ, acentos, …
- para incluir las palabras clave para que los buscadores indexen nuestra página:<meta name="keywords" content="Espronceda, canción, pirata, poesía"/>
- para poner el nombre de la descripción de la página: <meta name="descrition" content="La canción del pirata"/>
- para poner el atributo del nombre del autor: <meta name="author" content="Manuel"/>
- para que la página se vea de forma diferente en el ordenador y en el móvil: <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
La etiqueta meta no tiene apertura y fin, por lo que conviene que pongamos <meta …../>, aunque si ponemos <meta ......> no habrá ningún problema.
Por ejemplo:
ACTIVIDAD 3.
- Busca en internet una poesía que te guste.
- Utilizando NOTEPAD++, crea una página web en la que aparezca.
- Introduce etiquetas meta para incluir palabras clave, descripción de la página, autor de la página, juego de caracteres que incluya los caracteres especiales españoles (ñ, tildes,...) y la etiqueta que permita que la página se adapte tanto al ordenador como al móvil.
- Haz que tanto el título como el texto tengan alineación centrada.
- El título debe de tener el tamaño de la letra más grande.
- Guarda el documento con el nombre poema.html.
- Visualiza el documento en un navegador.
- Sube el documento a tu DRIVE. En la carpeta TIC 2, crea una carpeta que se llame Webpages. Incluye en esa carpeta este archivo. Comparte ahora ese archivo para que pueda verlo todo el que tenga el enlace al mismo.
- Crea una nueva entrada en tu blog que llevará por título "Poema" y en la que enlazarás esa página web.
Comentarios en HTML5:
Para insertar un comentario utilizaremos las siguiente sintaxis:
<!-- AQUÍ VIENE EL COMENTARIO-->
Es decir, el comentario aparece entre los símbolos <!-- y >.
Insertar una imagen:
Vamos a colocar la imagen book.jpg como fondo de página. Para ello guarda la imagen en la misma carpeta donde está el documento que estás creando poema.html; cuando publiques la imagen en internet, el documento poema.html y el archivo book.jpg deberán estar en la misma carpeta, pues de lo contrario la imagen no se verá.
A continuación añade el atributo background a la etiqueta <body>:
<body background="book.jpg">
Guarda el archivo, actualiza la página web en el navegador pulsando F5 y observa el resultado. Comprobarás que con este atributo si la imagen no es suficientemente grande, se completa como mosaico:
Si lo que queremos es que la imagen aparezca después del texto, entonces, utilizaremos la etiqueta <img>.
Al igual que la etiqueta <meta>, <img> solo tiene principio, por lo que conviene que pongamos <img…../>, aunque si ponemos <img ......> no habrá ningún problema.
Los atributos de la etiqueta img son:
- src, que como has visto, indica la localización (URL) de la imagen.
- height: indica la altura en pixeles de la imagen.
- width: indica la anchura en píxeles de la imagen.
<img src="book.jpg">
El atributo src puede indicar la dirección de una página web o también puede señalar a un archivo que está en la misma carpeta que el documento poema.html. En este segundo caso hablamos de un vínculo interno. De ahí que la dirección URL esté incompleta, porque el navegador tiene que buscar simplemente en la misma carpeta donde está el archivo poema.html.
Guarda el archivo de nuevo, actualiza la página web en el navegador pulsando F5.
ACTIVIDAD 4.
1. Guarda el poema anterior (poema.html) como poema2.html. Incluye ahora una imagen de fondo que esté libre de derechos de autor.
2. Incluye además, la licencia de Creative Commons que das a tu creación. Debe aparecer como imagen en la página poema2.html.
3. Por ahora en cursiva todo el texto del poema (etiqueta <em>).
4. Incluye el nombre del autor o autora y ponlo en negrita (etiqueta <strong>).
5. Guarda el documento en la carpeta Webpages en tu Drive. Comparte el documento para que cualquiera con el enlace pueda ver el documento. Consigue ese enlace.
6. En la entrada anterior de tu blog, añade un nuevo enlace a este segundo archivo (poema2.html).
7. Comprueba que funciona correctamente.
8. Ve a la página https://www.w3schools.com/ y pica en el enlace HTML Reference. Busca la etiqueta <img> y busca para qué sirve el atributo <alt>. Utiliza este atributo en la imagen de Creative Commons que acabas de poner en tu archivo poema2.html.
9. Guarda el archivo y súbelo a tu directorio Webpages.
No hay comentarios:
Publicar un comentario