Titorial widgets para unha páxina web

  Deseño dunha páxina web

Todo este tempo no que non escribín nada na páxina estiven traballando no deseño dunha páxina web programando.
O básico do deseño dunha páxina web pódese facer fácilmente seguindo tutoriais (eu usei moito a páxina w3schools que é moi sinxela).
Hoxe vou facervos un titorial de outras cousas para engadir á páxina que non son básicas pero quedan ben ou son prácticas.
Estas cousas son: o tempo dunha determinada zona (eu fareino de Coristanco porque é donde vivo) , a hora e a data e tamén unhas iconas. 
¡¡Este titorial usa algunha linguaxe de programación!! 

¿ Cómo poñer o tempo ?     

Eu vou poñer o tempo de Coristanco como xa dixen.

Debemos escribir este codigo donde queiramos que o noso widget quede posto : <div id="c_9987d6c7cf2530da821766a4c9a4b828" class="ancho"></div><script type="text/javascript" src="https://gal.eltiempo.es/widget/widget_loader/9987d6c7cf2530da821766a4c9a4b828"></script>  
Explicación: o apartado de "div" e "id" serven para explicar o tipo de estilo que queremos o noso widget (donde pon class ancho é para indicar que todo o widget é de clase ancho, que deberiamos esplicar posteriormente como queremos que sexa estéticamente esa clase nunha páxina de styles). O apartado de "script" e  "type" é para indicar que cumple unha función de scripts que ven sendo que realiza unha función cando ti interactues con el (cando actualices  actualizarase o tempo se hai novos avances). O "src" é a páxina á que está ligada o widget e a cal o controla polo que non temos que programar máis porque xa a páxina controla todo.
Este widget está moi controlado pola páxina que o actualiza no que tamen se diseña polo que probablemente o titorial sexa algo escaso e incomprensible :´( 
Podes deseñar un código adaptado ao que queres máis fácilmente nesta páxina donde eu creei o meu.

¿ Cómo poñer a hora e a data ?

 Este widget quedaría así posto (actualizado) na parte superior da páxina que desexemos:

Sun Mar 26 2017 13:16:52 GMT+0200 (Hora de verano romance)
    
Para conseguir esto debemos poñer esto dentro do apartado "head":

 <p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = Date();
</script>

Explicación: a "p" é para especificar a clase como un parágrafo, a "id" é para identificalo como "demo" e o parágrafo de abaixo serve para que a función de data se realice como un script E dicir realiza unha función cando nos facermos outra (actualizase cada vez que nos actualizamos a páxina) coas caracteristicas especificadas de "demo"(é un parágrafo e polo tanto ten as mesmas carácteriasticas que se lle especifiquen a estes na páxina "class").

Podemos atopar este titorial e outros moi similares aquí.

¿ Cómo poñer iconas ?

Vamos poñer as seguintes iconas:

 Para isto debemos escribir este código na liña seguinte á de "head" da páxina na que queremos situalas posto que estas son iconas de google :
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Este viria sendo o link que indica de donde saiu o estilo das iconas e que identifica es palabras que debemos escribir no código con cada imaxe.
A continuación debemos escribir na parte superior do apartado "body":

<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>

Explicación:  o "i" é para especipicar a clase (texto, título, imaxe, icona...), o "class" é para especificar unha clase (que podemos modificar na páxina de styles escribindo: .material-icons{...o que queiramos modificar...}) e os nomes a continuación son para identificarse co link posto con anterioridade e saber a imaxe que debe aparecer.
 Podemos ver este tutorial e atopar moitas máis iconas aquí.



Espero que vos guste e vos sirva para algo o titorial aínda que requira bastante de outras páxinas:)