explicaciones

Lo primero que hice tras tener claras las secciones y la forma que quería que tuviese mi página, me dispuse a elegir la plantilla, algo que no fue fácil debido a la gran variedad que encontré. Finalmente me decanté por esta: plantilla.
A continuación empecé a recopilar fotos, enlaces y vídeos que suponía que necesitaría, y las fui guardando en los directorios 'images' .
Con esto hecho me dispuse a leer por encima el código para enterarme un poco de qué iba y cómo estaba hecha cada cosa y cada sección. Cada sección era un archivo .html diferente, lo que decidí dejar así solo que cambiándoles el nombre, y por lo tanto cambiando posteriormente el enlace dentro de cada archivo que cambiaba de sección al pulsar sobre él.
Este mismo cambio lo hago en los .html de todas las demás secciones.  Al enlace correspondiente a la sección en la que se está se le pone class="active", ya que el css retoca los enlaces de esta clase poniéndolos de un color distinto.


Tras cambiar el <title> de cada sección y añadir el tipo de documento, la codificación, etcétera; analicé la forma de los archivos .html. Todos se dividen de la misma forma: primero tenemos el head, donde simplemente cambié el <title> mencionado anteriormente por 'Triatlón'; luego tenemos el body, donde se incluyen header, content y footer. En el header cambiamos los enlaces como he explicado previamente, y añado las imágenes que quiero que se vean en el 'slider'(NO CONSEGUÍ HACERLO, TUVE PROBLEMAS PARA IMPLEMENTARLO), y que he elegido previamente. Cada imagen es un elemento de una lista <ul>.

En 'content' simplemente cambio los textos ya que me gusta la organización que tiene. Además, añado un link en cada 'titular' de las noticias que te lleva a la noticia ampliada que quieres leer; lo mismo con los carreras.

Tras esto, creé una especie de 'noticiario extendido' donde explica más detalladamente cada noticia. Este apartado es completamente nuevo ya que no aparecía en la plantilla. Lo creé con un <div> dentro de un <article> para seguir con la misma organización que traía la plantilla, y a ambos les puse un atributo 'class' para retocarlos después con el .css. Añadí aquí todas las noticias, con vídeos, imágenes, etcétera; y también un botón 'Subir' que te lleva a la parte de arriba de la página. Antes de cada titular puse un enlace con atributo 'name' (distinto en cada noticia) para que los lleve hasta cada una de ellas al pulsar sobre el enlace 'Leer más' que puse en el apartado anterior.
Continué retocando el código de la plantilla para incluir unos apartados que me parecían convenientes, como el de  'Frases de Motivación' para que nunca pierdas las ganas por entrenar.


Por último, me dispuse a modificar el 'footer'; en el que suprimí la publicidad de la plantilla, añadí a cada icono (Facebook, Twitter, Youtube) un enlace que llevase a nuestra cuenta de los distintos sitios, y creé un icono nuevo para que llevase a este blog. Lo hice cogiendo una imagen del icono de 'blogspot', y mediante el pixlr, tras copiar uno de los demás iconos, conseguí meter el icono del blog dentro del círculo en el que aparecían los demás.En un principio ésta era mi idea pero tampoco pude implementarlo.

Para finalizar la he subido a un sitio de host gratuito, así que se puede ver el resultado final en el siguiente enlace: http://pedroignaciomora.neocities.org/tewcfinal.html