Ejercicio 1. Mejorar el aspecto con nuevos atributos.
1. Abre el archivo desde el bloc de notas.
2. Guárdalo como P8_E1_nombre.htm.
3. Incluye 3 etiquetas imprescindibles en una web (html, head, title, body, etc) en el lugar correspondiente.
4. Añade el título "Web de Antonio Machado".
5. Asigna la etiqueta h1 al nombre de la poesía y cambia el color del
texto.
6. Introduce saltos de línea usando la etiqueta br de forma que quede como en la imagen.
7. Escribe las etiquetas <b> y </b> delante y detrás de Antonio Machado para que aparezca el nombre en negrita.
8. Completa la etiqueta body con el atributo margin para expresar el tamaño del margen en píxwles. Así:
<body topmargin="10"leftmargin="10">
9. Añade la etiqueta font con los atributos size y face para que el texto aparezca del tamaño y tipo de letra indicado, justo después de la etiqueta body.
<font size="3"face="arial">Al olmo viejo [...] 4 de mayo de 1912</font>
10. Guarda el archivo como txt y como htm, actualiza el navegador y observa el resultado.
Ejercicio 2. Insertar una imagen.
1. vamos a colocar la siguiente imagen como fondo de página. Para ello guarda la imagen en la misma carpeta donde está el documento htm creado en el ejercicio anterior.
2. A continuación añade el atributo background a la etiqueta body:
<body background="P8_E2_olmo.jpg" topmargin[…]>
Es importante que dejes un espacio entre el cierre de comilla y la etiqueta siguiente.
3. Guarda el archivo como P8_E2_nombre.htm. 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; y además se dificulta mucho la lectura, así que vamos a poner la imagen de otra forma.
4. Escribe lo siguiente justo después de la etiqueta </h1>y elimina el background:
<div align="left">
<img src=P8_E2_olmo.jpg />
</div>
5. Guarda el archivo de nuevo. Actualiza la página web en el navegador pulsando F5 y observa el resultado. Comprobarás que la imagen está separada del texto. Mira qué pasa si cambias los valores del atributo align a “center” y “right”.
Ejercicio 3. Vínculos absolutos, relativos e internos
Los vínculos absolutos son los que hacen referencia a una página que no está en nuestro sitio. Los relativos se dirigen a una página situada en nuestro sitio. Ambos usan la etiqueta <a href>.
1. Vamos a realizar un vínculo absoluto de nuestra página a otra web, a la que se acceda haciendo clic en Más sobre Machado. Para ello escribe el siguiente elemento después de la última frase del texto y justo antes de la etiqueta </font>:
<a href="https://es.wikipedia.org/wiki/Antonio_Machado">Más sobre Machado</a>
2. Guarda el archivo como P8_E3_nombre.htm. Actualiza la página web en el navegador y observa el resultado. Haz clic en el enlace para comprobar que se abre la página web correspondiente.
4. Escribe en el documento P8_E3_nombre.htm el siguiente elemento, después de la última frase del texto y justo antes de la etiqueta </font>:
<a href="P8_E3_2_nombre.htm">Otros versos de Machado</a>
5. Introduce dos saltos de línea entre el enlace absoluto y el relativo.
6. Actualiza la página web en el navegador. Haz clic en el enlace para comprobar que se abre la página web con los tres versos de Machado.
Si la página que realizamos es muy larga, conviene utilizar un vínculo interno, que consiste en poner una señal en un punto de la página con la etiqueta <a name=”…”> a la que se llegará cuando hagamos clic en el vínculo correspondiente.
7. Escribe en el documento P8_E3_nombre.htm el elemento siguiente, después del título de la poesía:
<a href="#Finaldeltexto">Ir al final de la página</a>
8. Ahora sitúa el elemento siguiente al final del texto, justo antes de los anteriores enlaces:
<a name="Finaldeltexto">
No es necesario que cierres la etiqueta. Ten cuidado porque los espacios entre las comillas se consideran texto y el nombre de la señal debe ser idéntico en ambas etiquetas.
9. Guarda el archivo de nuevo y actualiza la página en el navegador. Haz clic en el enlace Ir al final de la página para comprobar que salta hasta el final.
Ejercicio 4. Otras etiquetas
1. Añade a la etiqueta <body> el atributo bgcolor de la siguiente forma y comprueba el resulta:
<body bgcolor=”green”background […]>
2. Guarda el archivo como P8_E4_nombre.htm. Actualiza la
página web en el navegador y observa el resultado.
4. Los comentarios son palabras o frases que facilitan el trabajo de la persona que realiza la web en HTML. El navegador no las tiene en cuenta, es decir, no se visualizan en la página web creada. Para insertar comentarios hay que utilizar la siguiente sintaxis:
<!—comentario que se quiera-->
Inserta comentarios que expliquen cada una de las etiquetas introducidas en una de las páginas web que hemos creado.
Crea una entrada en tu blog que incluya los enlaces con el archivos .txt subidos a Drive.
Pregunta 1: ¿Cómo sangrar el texto?
Con la etiqueta <dd> y </dd>
Nota1: la etiqueta <br> inserta saltos de línea, tantas veces se incluya tantos saltos se aplicarán.
Nota 2: para que se abran los vínculos en una pestaña nueva utilizaremos target.
<a href="https://es.wikipedia.org/wiki/Antonio_Machado" target="_blank">
