Ejercicio1. ¿Qué es una página web?
- Haz clic en la primera imagen (abajo izquierda) y fíjate en lo que ves: un documento de texto.
- Repite la operación y fíjate: un documento html, es decir, una página web.
- Ahora vas a crear una página web desde un procesador de texto plano (Pluma) y mostrarás la página web desde un navegador web (Mozilla)
- Descarga este fichero comprimido (webpage_html.rar) a tu carpeta Descargas.
- Accede a Descargas y ábrelo: botón derecho sobre el fichero y selecciona Extraer aquí (obtendrás una carpeta).
- Abre esa carpeta y fíjate que tienes 4 ficheros: 2 imágenes, 1 documento de texto y 1 documento html.
- Doble clic sobre el documento de texto y fíjate en los distintos elementos:
- el título de la página mostrado en la pestaña del navegador
- distintos textos con diferentes tamaños y colores.
- una tabla con las 2 imágenes
- Lista con viñetas, texto con hipervínculos, etc.
- Mantén la página web abierta, accede a la carpeta y abre el documento de texto (se habrá abierto con Pluma).
- Ahora fíjate en los distintos elementos de este documento: head, style, body...
- Ahora vas a modificar la página web desde el documento de texto. Sigue este procedimiento: (continúa más abajo)
- Modificaciones: modificas el texto desde Pluma, guardas la modificación domo documento html (archivo guardar como...) y cambias la extensión txt por html: se machacará el documento html original y verás las distintas etiquetas del documento (tags) con su correspondiente color. Desde el navegador actualizas el documento para ver los cambios.
- Estas son las modificaciones:
- <title> cambia Unit 5 a Unit 4 y escribe tu nombre en lugar de Aitor Menta...
- <meta> cambia el autor del documento (Maxi) por tu grupo (tico2_xx)
- <body> <h2 haz que el texto se muestre a la izquierda de la línea (left)
- <style> h1: cambia el color a negro (black)
- <body> li style: elimina el espacio en blanco delante de Power Supply.
- <body><li> href cambia Technologies Valdebernardo por TechnologIES Alfredo Kraus.
- <body><li> href cambia la dirección web a https://iesalfredokraus.es/
- <body><li> href elimina completamente la línea <li><a href:"http://padlet.com....</a></li>
- Cuando tengas el documento con todas las modificaciones, súbelo a la tarea de Classroom/eva3_2/documentos.
Ejercicio2. Imágenes para la web 1
Imágenes estáticas. Creando un logotipo.
Crea un logotipo (para nuestro instituto, un negocio, una organización tipo ONG....). Para ello accede a Free Logo Maker y crea un logotipo siguiendo estos pasos (con tus propios datos, no los que están como ejemplo):
Crea un logotipo (para nuestro instituto, un negocio, una organización tipo ONG....). Para ello accede a Free Logo Maker y crea un logotipo siguiendo estos pasos (con tus propios datos, no los que están como ejemplo):
- Primero indica el nombre de tu entidad (IES Alfredo Kraus)
- Selecciona 6 estilos de fuente
- El color para tu logo
- Un eslogan para tu entidad: Where skills arise (tico2_teacher). Aquí ha de aparecer obligatoriamente tu nombre de grupo (tico2_xx) en lugar de teacher.
- Selecciona un icono (o 2 o 3...)
- En la ventana Results selecciona uno de los logotipos generado que incluya todos los elementos incluidos en nuestro diseño. Desde la siguiente ventana podrás volver a ésta por si no te gusta el resultado.
- ¡ATENCIÓN! En esta última ventana podremos hacer unos cambios. Y nos piden registrarnos para descargar el logotipo. Lo que vamos a hacer es botón secundario sobre el logotipo, hacer una captura de pantalla, movemos el ratón para seleccionar la parte del logotipo que queremos y lo recortamos a nuestro gusto. A continuación lo descargamos, accedemos a Descargas, lo renombramos como logo_tico2_xx.png y lo subimos a Classroom/eva3_2/documentos.
Imágenes estáticas. Creando un avatar.
Crea un avatar desde avataaars generator seleccionando las opciones que creas oportunas.
Crea un avatar desde avataaars generator seleccionando las opciones que creas oportunas.
- Cuando lo tengas terminado descárgalo como fichero png a Descargas.
- A continuación accede a watermarkly para añadirle un texto (donde se vea bien).
- Cuando hayas acabado descárgalo, renómbralo como avatar_tico2_xx.png y lo subes a Classroom/eva3_2/documentos.
Ejercicio3. Imágenes para la web 2
- Volvemos a la carpeta creada en el ejercicio1 de este apartado.
- Copia tus imágenes logo_tico2_xx.png y avatar_tico2_xx.png en la carpeta web_html_1.
- Accede al documento html (abriéndolo con pluma) y realiza estas modificaciones:
- logo_tico2_xx.png copia el nombre completo de esta imagen y desde <style><table><td... "circuit03.jpg" cambia "circuit03.jpg" por "logo_tico2_xx.png". Comprueba que funciona refrecando el documento desde el navegador.
- Repite la operación anterior con tu imagen avatar_tico2_xx.png .
- Actualiza el documento html y comprueba que se ven las 2 imágenes en la tabla,
- Haz una captura de pantalla de toda la ventana en donde se ve el documento html con las 2 imágenes. Renombra la captura como miweb.png y súbela a la tarea de Classroom/eva3_2/documentos.