Tema 3. Práctica 7. Análisis del código de páginas web.

 Ejercicio 1. Ver el código fuente. Identificar etiquetas.

En esta práctica utilizaremos varios navegadores para acceder a una misma página web y ver su código fuente, y observaremos si existe diferencia en la forma de presentar el código fuente en los distintos navegadores.

1. Abre el navegador Internet Explorer y accede a la dirección siguiente:

http://www.culturaydeporte.gob.es/mtraje/inicio.html

2. Haz clic con el botón derecho sobre la página y selecciona Ver código fuente.

3. Localiza la etiqueta meta con el atributo name="keywords" e indica las palabras clave utilizadas para describir esta web.

4. Localiza a continuación el nombre del archivo de estilo (con extensión CSS) utilizado.

5. Abre el navegador Mozilla Firefox y accede a la misma web.

6. Pulsa con el botón derecho sobre la página y selecciona la opción Ver código fuente de la página.

7. Localiza la etiqueta body y escribe tres propiedades utilizadas y sus correspondientes valores.

Escribe en tu procesador de texto la información solicitada y las diferencias que observas y guarda el archivo como P7_E1_nombre.

Ejercicio 2. Modificar el código fuente. Visualización de cambios.

En este ejercicio descargaremos el código fuente de una página y lo modificaremos para visualizar los cambios.

1. Utiliza la opción Guardar página actual como de la ventana anterior para guardar el código fuente como P7_E2_nombre.html Haz doble clic sobre el archivo descargado y observa el resultado.

2. La página no se visualiza correctamente porque sólo hemos descargado el código fuente, pero no tenemos ni las imágenes ni el archivo de estilos CSS.

3. Para mejorar el aspecto de la página, descargaremos el archivo de estilos y alguna de las imágenes utilizadas en la web (recuerda que no debes utilizar estas imágenes más allá del ámbito de esta práctica, dado que las imágenes de las webs suelen tener derechos de autor).

 

4. Crea una carpeta llamada Imagenes (sin acento) en el mismo directorio en el que se encuentra el archivo P7_E2_nombre.html Guarda las imágenes en esa carpeta.

5. Para descargar el archivo de estilo, escribe en el navegador la ruta completa de dicho archivo, que está formada por la URL de la página más la ruta del archivo CSS que has localizado en el ejercicio 1. Utiliza la opción Guardar como del menú Archivo.

6. Una vez descargado el archivo de estilo, recarga la página en tu navegador y observa el resultado.

Crea una entrada en tu blog con las respuestas del ejercicio 1 y alguna captura de pantalla del ejercicio 2.