CREAR UN LLOC WEB SENZILL

Vaig a explicar com crear unes pàgines enllaçades entre si, de forma senzilla:

1.  Crear una pàgina web incial, que he anomenat "index.html", des d'on estaran enllaçades totes les webs on vuiguem anar mentres llegim aquesta pàgina.
     Crear una pàgina web sabem fer-ho, però per a guiar-nos, he pujat la plantilla del meu treball.

Com enllaçar-les?

• A través de punxar en una imatge:

<a href="nom de la pàgina on vuiguem anar"><img src="nom de la imatge" width="amplària de la imatge" height="altura de la imatge" align="posició de la imatge en la pàgina"></a>

• A través d'un enllaç(Pàgina creada per nosaltres o ja existent):

<a href="nom de la pàgina on vuiguem anar"> Text</a>

2.  Es creen les pàgines on vuiguem accedir a partir de la pàgina principal i en elles es creea un enllaç per tornar a la pàgina d'inici. Com ja he dit, s'enllaça:
 <a href="nom de la pàgina on vuiguem anar"> Text</a>

 











En aquesta última de "mapamundi.html" he volgut crear dos enllaços a partir d'una imatge, però dols dos zones concretes de la imatge, en aquest cas, el lloc on viuen els animals dits en el treball. Com es fa:
 1- Introduïm la imatge:
<img src="mapamundi.jpg"  width="1250" height="600" usemap="#mapamundi">
2- Introduïm el nom del mapa:
       <map name="mapamundi">
3- Creem l'area que volem seleccionar, determinant la forma de la selecció, les coordenades per píxels i la direcció de la pàgina on volem anar:
       <area shape="rect" coords="1000,400,1150,550" href="weblinks-ainhoapau/foto-gran-koala.html" alt="selección" />

Consell: Si tots els arxius i imatges estan en la mateixa carpeta, és més fàcil d'enllaçar-les.

EDITORS DE CODI

En aquest trimestre hem util·litzat tres tipus d'editors de pàgines web:

1. GEDIT:
    L'editor de textos gedit, que ve instal·lat, de manera gratuita,per defecte a l'entorn d'escriptori GNOME i compatible amb UTF-8, és una aplicació potent tant per a l'edició de documents de text com per edició de codi per a programadors, d'una manera simple i neta.
      En aquest programa es pot treballar en distints arxius a la vegada, gràcies a la possibilitat de tenir cada arxiu en una pestanya. Quan acabem amb la programació de la pàgina, guardem l'arxiu amb el nom que vulguem seguit de punt i l'extensió de l'arxiu que vulguem o l'altra opció és anar a les pestanyes inferiors i canviar l'opció txt per l'extensió que vulguem.

2. BLOC DE NOTAS:
    El Bloc de notes ens permet fer tasques senzilles d'edició de text com: Escriure, copiar, enganxar, tallar text, buscar i reemplaçar text; però també permet obrir de manera ràpida els arxius de text, que a més ocupen poc espai.    Per a què serveix el bloc notes:

•     Escriure textos, de manera ràpida, sense preocupar-nos dels aspectes d'edició i sense importar quina longitud tinguin.
•     En cas de no tenir connexió a Internet pots escriure textos en NotePad com a esborranys, com per exemple per a un correu electrònic quan hi haja conexió.
• Utilitzar-com un Post-it, realitzant anotacions ràpides i guardar a l'escriptori.
• Si vols guardar textos copiats d'Internet sense cap format, enganxa els textos al bloc de notes per incorporar-los després a una edició. 
• A més, el bloc de notes s'ha convertit en l'aplicació preferida per als dissenyadors de pàgines web, que utilitza caràcters internacional, adequat per als fitxers HTML. 
  Característiques:

  
  
  

  • El bloc de notes és l'equivalent a Windows de l'editor de MS-DOS edit. 
  • Els arxius o documents es guarden amb l'extensió per defecte de l'editor. Aquesta extensió és ".txt", un format que no té etiquetes ni estils.
  • Permet afegir o inserir hora i data actual prement F5, en format "HH: MM DD / MM / AA". 
  • Realitza les funcions bàsiques d'edició de text com redactar, copiar, talla, enganxar, buscar reemplaçar, seleccionar tot i canviar el format.

3. NOTEPAD++:
    Notepad ++ només té versió per a Windows, és bastant més potent que el modest Notepad o 'Bloc de Notes'.
 Característiques:

•  Múltiples pestanyes / Vista dividida (MULTIVIEW): 

     Podem carregar múltiples fitxers alhora, utilitzant pestanyes i MULTIVIEW. Per exemple, si estem creant una pàgina web amb CSS i JS podem tenir cada fitxer (HTML, Full d'estil, JavaScript) en una pestanya diferent.

• Numeració de línies, sagnats (tabulació), desplegat (folding):

    Bàsics en un editor d'aquest tipus per localitzar ràpidament errors, presentar més clarament el codi en diferents nivells amb tabulacions configurables i amagar / desplegar blocs que ens permeten veure millor l'estructura del fitxer i les seves diferents seccions. 

• Ressaltar sintaxi del codi:

    Notepad ++ identifica el llenguatge del fitxer que tenim obert i aplica diferents colors als diferents elements perquè els identifiquem més fàcilment.

• Códi automàtic: 

    Ens pot donar suggeriments en línia sobre el codi que estem introduint (paraules claus, funcions o paràmetres de funcions). Podem configurar quina d'aquestes ajudes tenir activa o a partir de quants caràcters apareix un suggeriment o completa una paraula.