Descripción de la tarea

Aunque actualmente en la web 2.0 disponemos de miles de herramientas gratuitas para crear sitios web y publicarlos, con esta tarea vamos a crear una página web desde cero utilizando los siguientes lenguajes de programación:
- HTML: lenguaje de marcas que permite la creación de páginas web estructuradas.
- CSS: lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado. Es muy usado para establecer el diseño visual de los documentos web (HTML).

Para abordar esta tarea deberás crear un Sitio Web: este sitio debe ser tu tarjeta de presentación, una página web donde te presentes, indiques tus aficiones y enlaces a tu blog y redes sociales.
La tarea es un pequeño proyecto de aprendizaje que se estructura en fases, puedes ir haciéndolas una a una.
Si tienes dudas, pregunta claramente antes de dar un paso en falso y pasar a la siguiente fase sin tenerlo claro; haz uso de los foros. En todo momento, el profesorado podrá hacerte recomendaciones y darte consejos sobre tu página web.
1. Crea la página web
Vas a crear tu propia página web de presentación en varios pasos.
Con un bloc de notas (o el programa Notepadd) debes escribir el código HTML de tu página web:
- En ella debes indicar tu nombre, presentarte brevemente y enlazar al artículo de presentación que escribiste en tu blog de aula.
- Colgar una fotografía personal. Esta imagen debe estar guardada en la misma carpeta donde coloques tu página web.
El siguiente código HTML sirve para incrustar imágenes en tu web que estén en tu propio ordenador: <img src="archivo.jpg">
El resultado será una cosa sencilla, parecido a esto:

Página web del alumno TICodemo. Captura de pantalla de elaboración propia
2. Añade imágenes libres
Siguiendo los manuales estarás en disposición de crear un álbum de fotos interactivas sobre tus hobbies o aficiones:

Captura de pantalla de elaboración propia
Debes crear una tabla con 4 imágenes que estén colgadas en Internet:
- Busca al menos 4 imágenes (con licencia libre) relacionadas con alguna afición personal y colócalas en tu página web.
- Insértalas en una tabla de varias filas y columnas, y enlaza cada foto a la url de la imagen original
El siguiente código HTML sirve para incrustar imágenes en tu web que estén publicadas en internet: <img src="https://www.example.com/nombreimagen.jpg">
3. Añade un botón de twitter
Tu tarea consiste en añadir a tu página dos botones que den acceso a a tus redes sociales para darte a conocer y conseguir un mayor número de seguidores
Debes enlazar tanto a tu blog personal (en wordpress) como a tu cuenta de twitter. Además, al pulsar los enlaces se deben abrir en nueva ventana (usa la etiqueta TARGET).
Por ejemplo, añadirás a tu página un botón para que tus amigos de twitter te sigan:
Captura de pantalla de elaboración propia
4. Añade el estilo CSS
Ahora avanzarás con elementos más complejos y aprenderás a mejorar el aspecto de tu web. Te vas a adentrar en el fascinante mundo del diseño gráfico de páginas web, usando hojas de estilo CSS.
Podemos crear el estilo desde cero o modificar el estilo CSS que te damos en este ejemplo (colores, tipo, tamaño de letra, alineación...) para darle tu toque personal.
Una vez escrito el código CSS puedes usarlo de dos formas:
a) Incrustar esa hoja de estilo en la propia página HTML (véase la imagen inferior).
b) Enlazarla a la página HTML a través de un archivo externo CSS.
En la sección de ayuda puedes encontrar un manual al respecto.

Captura de pantalla de elaboración propia
...
Cuenta tu experiencia en el portfolio
Por ultimo, escribe un mensaje en twitter con la dirección url del artículo y usando los hashtags habituales. |

Una vez finalizada la tarea, deberás entregar las siguientes evidencias de tu aprendizaje:
- Carpeta comprimida (mi_web_nombre_del_alumno.zip) que incluya la página web completa, es decir archivos HTML y CSS e imágenes que hayas incrustado.
- Indica la dirección del artículo del blog donde has documentado la tarea y el mensaje de twitter donde lo has compartido.
¡Adelante!

Al final del desarrollo de tu tarea deberás realizar una reflexión sobre tu propio aprendizaje y la publicarás en el blog en forma de artículo que incluya al menos los siguientes elementos: