Com es pot modificar?

5. Com es pot modificar?

Primer de tot, per poder modificar un document HTML, hem de guardar-lo a la nostra carpeta.
Una vegada guardat el podrem modificar obrint-lo amb el Bloc de notes.

Exercici 3: Modificarem una pàgina web.

obrim la següent pàgina web: Web-exemple
la guardem a la nostra carpeta amb el nom: web02.html. Atenció: al guardar-la, a la casella "tipo" hem de triar l'opció: guardar com a "Pàgina web, sólo HTML (*.htm, *.html)"
la tornem a obrir des de la nostra carpeta amb el Bloc de notes
modifiquem el text, posant el nostre nom
a l'etiqueta títol, posem també el nostre nom
guardem els canvis

A continuació s'explica com editar els textos, com fer llistes, com s'afegeixen els links i com inserir imatges.

Exercici 4: Editem un text.

obrim el següent text de Word: Text
ara, obrim el nostre document web02.html amb el Bloc de notes
copiem i enganxem el text de Word (si ara guardem i anem a la pàgina web i actualitzem la pantalla, veurem que el text apareix amb un tipus de lletra i grandària per defecte, diferent al de Word)
hem d'ordenar i modificar el text per donar-li la mateixa aparença que el text original: per fer-ho haurem d'incloure les diferents etiquetes/tags explicades en el següent apartat (Edició de text)
una vegada modificat, guardem els canvis

5.1. EDICIÓ DE TEXT

És important utilitzar famílies de lletres comunes per assegurar que tots els servidors, navegadors i ordinadors les identifiquin bé. Per això, el millor és utilitzar les famílies "Verdana, Arial, Helvetica". Així, si un ordinador no identifica la font "Verdana", utilitzarà "Arial o Helvetica" en qualsevol cas.

5.1.1. FONT DE TEXT:

Font text: Verdana

Font size: 8

Font color: blue

Totes les ordres que defineixen la font concreta d'un text: face, size, color... poden anar dins d'una mateixa etiqueta amb el nom font al començament:

<font face="verdana" size="8" color="blue" >

CODI:


 <font face="verdana"> Font text: Verdana </font> 
 <font size="8"> Font size: 8 </font>
 <font color="blue"> Font color: blue </font>

5.1.2. SALT DE LÍNIA (LINE BREAK):

En editar textos una eina essencial és el salt de línia que s'aconsegueix mitjançant l'etiqueta <br>. Es tracta d'una etiqueta única que no cal tancar.
Això és així perquè els webs s'adapten als amples de les finestres i fa que tot el contingut es mogui desordenant-se.

Exemple d'ús del salt de línia:

To be
or not to be.

CODI:

 
  <font face="verdana" size="2" color="blue">To be <br> 
  or not to be.

5.1.3. ESPAI EN BLANC:

Si volem incloure espais en blanc entre paraules, imatges, taules o qualsevol element, haurem de fer-ho amb la següent eina. Amb la barra d'espai que utilitzem normalment quan escrivim només podrem posar un espai, i només entre paraules, amb la resta d'elements no serveix i haurem d'utilitzar l'eina següent:  

costat A costat B

CODI:


 costat A&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;costat B

(En aquest exemple per que es vegi més clarament hem posat cinc espais)

5.1.4. ENCAPÇALAMENT (HEADER):

encapçalament nivell 2

encapçalament nivell 5

CODI:


 <h2> encapçalament nivell 2 </h2>
 <h5> encapçalament nivell 5 </h5>

5.1.5. PARÀGRAF:

primer paràgraf

segon paràgraf

CODI:


 <p> primer paràgraf </p>
 <p> segon paràgraf </p>

5.1.6. NEGRETA (BOLD): negreta

CODI:


 <b> negreta </b>

5.1.7. CURSIVA (ITALIC): cursiva

CODI:


 <i> cursiva </i>

5.1.8. SUBRATLLAT (UNDERLINED): subratllat

CODI:


 <u> subratllat </u>

Exercici 4: Fes una llista ordenada al començament de la teva pàgina web02.html (abans del text) amb els apartats:

Text
Llistes

Per fer-ho, segueix les instruccions explicades en aquest apartat (Llistes)

Exercici 5: En el text que hem modificat anteriorment, canviem la llista ordenada (a/b/c) per una llista desordenada.

5.2. LLISTES

5.2.1. LLISTA ORDENADA:

primer
segon
tercer

CODI:

 Ordered list:

 <ol>
 <li> primer </li> 
 <li> segon </li> 
 <li> tercer </li> 
 </ol>

Si volem ordenar la llista amb "abc" en lloc de "123" hem d'afegir això a l'etiqueta <ol> : <ol type="a">

5.2.2. LLISTA DESORDENADA:

primer
segon
tercer

CODI:

 Unordered list:

 <ul>
 <li> primer </li> 
 <li> segon </li> 
 <li> tercer </li> 
 </ul>

Exercici 6: Fer links a les següents pàgines des de la teva pàgina web (web02.html):

pàgina de l'ETSAV
pàgina de l'UPC
per enviar un mail

Per fer-ho segueix les explicacions de l'apartat següent (Links).

5.3. LINKS

Quan volem afegir un link podem fer-ho de dues maneres:

1. Quan naveguem externament a documents html que no són a la nostra carpeta, donem la seva adreça URL.

2. Quan naveguem internament a documents que sí són a la nostra carpeta (com per exemple la nostra pàgina web: web01.html), donem la seva referència relativa (sistema de carpetes). Ho expliquem més endavant.

Links de navegació externa

Per fer un link a una pàgina web externa a les nostres carpetes (nosaltres no la tenim), hem de donar la seva adreça URL (referència absoluta):

5.3.1. LINK A UNA PÀGINA WEB: ETSAV

CODI:


 <a href="http://etsav.upc.edu/"> ETSAV </a>

5.3.2. LINK A UNA ADREÇA ELECTRÒNICA: contact

CODI:

 
 <a href="mailto:writetome@writetome.com">contact</a>

Exercici 7: A continuació afegeix els següents links de navegació interna com s'explica més endavant:

link a la teva primera pàgina web (web01.html)
link a un punt concret de la pàgina

Links de navegació interna

Si volem fer un link a un document html que tenim guardat a una carpeta dins el nostre ordinador, estem navegant internament i el que fem és donar "l'adreça interna" d'on es troba aquest document (referència relativa).

Per donar la referència relativa d'un document, ho fem segons aquestes ordres:

a) si el document que volem linkar es troba a la mateixa carpeta que el document html on som, només cal posar el nom d'aquest document:

b) si el document es troba en una subcarpeta dins la mateixa carpeta, hem d'escriure primer el nom de la subcarpeta més barra (/) i el nom del document:

c) si el document es troba en una carpeta diferent a la nostra, hem d'escriure dos punts més barra (../) tantes vegades com carpetas i subcarpetes hi hagi i per últim, el nom del document:

5.3.3. LINK LOCAL:

Curs d'introducció a la construcció del portfoli

CODI:


 <a href="cp01.html"> Curs d'introducció a la 
       construcció del portfoli </a>

5.3.4. LINK A UN PUNT CONCRET D'UNA PÀGINA:

Els "ancoratges amb nom" sovint s'utilitzen per crear una taula de continguts al principi d'un document gran. Cada capítol del document se li dóna un "ancoratge amb nom", i els enllaços a cada un d'aquests ancoratges es col·loquen a la part superior del document.

És a dir, si volem per exemple anar des d'aquí a l'apartat 5.2. LLISTES, hauríem d'introduir el següent codi:

CODI:

<a href="#llistes"> Anar a l'apartat 5.2. LLISTES </a>

I dins l'apartat 5.2. LLISTES, al títol hem d'escriure:

CODI:


 <a name="llistes"> 5.2. LLISTES </a>

Si volem que el link s'ens obri en una pàgina nova, hem d'afegir l'ordre: target="new" entre els claudàtors:
<a href="cp01.html" target="new"> see file </a>

Per canviar el color dels links hem d'afegir els següents ordres a l'etiqueta <body>:

per a link normal: link="blue"
per a link visitat: vlink="red"
per a links actius (en el moment de clicar): alink="orange"

Així, <body link="blue" vlink="red" alink="orange">

Exercici 8: Inserim aquesta imatge a la nostra pàgina web (web02.html):

guardem la imatge a la nostra carpeta
la inserim seguint les instruccions següents

(Nota: Estem fent una referència relativa, estem navegant internament)

5.4. IMATGES

5.4.1. INSERIR IMATGES:

CODI:


 <img src="mar.jpg">

És important definir la grandària de la imatge per controlar que no sigui ni massa gran ni massa petita. Ho podem fer fixant l'ample (width) o el llarg (height) a l'etiqueta de la imatge, en aquest cas hem fixat l'ample (píxels): width="300".

CODI:

<img src="mar.jpg" width="300">

Per posar-li una línia a la vora de la imatge utilitzem l'atribut "border=1" (o superior).

CODI:

<img src="mar.jpg" width="300" border="1">

Podem també fer que aparegui un nom sobre la imatge. Ho fem amb l'atribut "alt" i ens proporciona informació alternativa a una imatge si l'usuari per qualsevol raó no pot veure-la (una connexió lenta, un error al src atribut, o si l'usuari utilitza un lector de pantalla).

CODI:

<img src="mar.jpg" width="300" border="1" alt="vista mar">

Exercici 9: Hem de fer que aparegui aquesta imatge en el nostre document sense haver de guardar-la a la nostra carpeta. (Veiem que es tracta d'una imatge-link que ens porta a la pàgina web de la imatge).

cliquem i anem a la pàgina de la imatge
copiem la seva adreça URL (barra de dalt)
enganxem l'adreça a l'etiqueta corresponent

(Nota: Ara, al donar una adreça URL, estem navegant externament)

5.4.2. IMATGES - LINKS:

Si volem convertir una imatge en un link a una altre pàgina:

CODI:


<a href="http://www.beatricebonzanigo.com/index.html">
<img src="bbhp.gif" width="300"></a>

(Veiem que aquí sí que tenim la imatge guardada a la nostra carpeta i a l'hora d'obrir la imatge li donem la seva referència relativa:
<img src="bbhp.gif">)

Exercici 10: Fer una imatge-link a l'ETSAV utilitzant com a imatge el logo de l'escola amb un ample de 50 píxels.

Més informació sobre tipus de lletres:
Verdana
Times New Roman
Courier

Per a més informació sobre imatges: tipus, grandària, recomanacions d'ús i pautes sobre com fer imatges interactives i GIFs animats; anar a: Imatges