manual html by Luis Romo

prof. Luis Romo

Html

WEB

Html

l m t H

Informàtica 4t de l’ESO Llenguatge “HTML”

Nom:____________________________ Curs:________ Número:______

L’Hospitalet, curs 2008-09

informàtica 4rt de l’ESO

T.1 Llenguatge HTML

El llenguatge HTML L’ H y p e r Te x t M a r k u p L a n g u a g e ( L l e n g u a t g e M a r c a d o r d ’ H i p e r Te x t ) s e r v e i x p e r a p r e s e n t a r i n f o r m a c i ó .

• L’ H T M L

u t i l i t z a

e t i q u e t e s

( t a g s ) :

<ETIQUETA atributs>contingut</ETIQUETA> •Tot el contingut que hi ha entre dues etiquetes estarà inﬂuenciat per elles. •El programa navegador interpreta les etiquetes i mostra el contingut. Cada programa navegador té certa llibertat en el procés de donar la forma al contingut i per tant, un mateix document d’HTML pot aparèixer amb diferents aspectes en navegadors diferents. •Hi ha llibertat per escriure les etiquetes en majúscules i/o en minúscules. Cal facilitar l’edició/visualització del codi utilitzant sempre un mateix format pel codi: per exemple, el nom de l’etiqueta en majúscules i els atributs i els seus valors en minúscules. •La <ETIQUETA> és una etiqueta d’obertura i la </ETIQUETA> és una etiqueta de tancament. No sempre existeix una etiqueta de tancament, hi ha alg u n e s o r d r e s o n l a < / E T I Q U E TA > n o é s n e c e s s à r i a . •El document d’HTML s’escriu entre aquestes dues etiquetes:

<HTML> document </HTML> •El

document

divideix

dues

parts:

-la capçalera:

-el cos:

Informàtica 4t de l’ESO

L’estructura bàsica d’un document d’HTML queda de la següent manera:

Dins de cada part hi corresponen unes etiquetes diferents: •La capçalera conté tota la informació sobre el document: –El títol –fulls d’estil (CSS) –... •En el cos del document hi ha tot el contingut de la pàgina web: –text: caràcters especials espais salts de línia paràgrafs textos preformats capçaleres estil del text: negreta, cursiva, ... llistes: no numerades, numerades, de deﬁnicions línies horitzontals imatges o gràﬁcs enllaços taules formularis elements multimèdia

Les diferents etiquetes permeten introduir cada un d’aquests elements a la pàgina web, i els diferents atributs de cada una de les etiquetes permeten donar la forma desitjada: només s’han d’introduir els atributs necessaris en cada cas.

Exercici 1 Un cop que ja sabem més o menys com funciona una pàgina (de forma molt senzilla), hauràs de seguir les següents passes:

nº1: Has d’obrir un arxiu nou de “bloc de notes”(1), En aquest hauràs de començar a escriure el següent esquema, pensa que aquest esquema és el que sempre farem servir(2): A) Obrir i tancar <HTML>---</HTML> B) Obrir i tancar <HEAD>---</HEAD> C) Obrir i tancar <BODY>---</BODY>

1- Per poder-lo obrir has d’anar a “Inicio”, després “todos los programas”, tot seguit “accesorios” i allà t’ho trobaràs. 2- Sempre és convenient donar regularitat al document, per això t’aconsejo que facis ús dels tabuladors, marges, espais, etc...

nº2: Dins de l’apartat de <HEAD> has de posar el nom de la pràctica d’avui

Pràctica1_Pàgina personal(data de l’activitat) nº3: Dins de l’apartat de <BODY> has de posar els següents apartat, aquest auran d’estar separats per una línia de distància: Nom:

Cognom:

Col·legi:

Curs:

Grup:

Assignatures:

Música:

Aﬁcions:

Amics:Poemes:

Jocs:

Viatges:

Motor:

Natura:

Animals:

Endevinalles:

Informàtica 4t de l’ESO

nº4:Un cop ja escrit tot el que se us demanava al punt anterior, l’arxiu de “Bloc de notes” s’ha de desar dins de la vostra carpeta personal amb el mateix nom que em posat a la capçalera de la nostra WEB.

Pràctica1_Pàgina personal(data de l’activitat) Atenció!!!!

perquè quan desem el nom de l’arxiu, el nom anirà acompanyat amb: .HTML

Admés canviarem el tipus de format del document, li posarem “todo los archivos” i ja estarà llest per donar al botó de “Guardar”. nº5: Obrim el programa “Internet Explorer” i per poder visualitzar el nostre treball haurem de anar a la “barra de menús” i clicar a sobre d’ “Abrir”, ens sortirà una ﬁnestra com aquesta i li haurem d’indicar on està el nostre arxiu que acabem de fer amb el “bloc de notes”.

T.2 Capรงalera

informàtica 4rt de l’ESO

T.2 Capçalera

2.Capçalera La capçalera conté tota la informació sobre el document: el títol, les etiquetes META, BASE, fulls d’estil, scripts...

<HEAD> capçalera </HEAD>

El títol de la pàgina web El títol del document que apareix a la ﬁnestra del nostre programa navegador s’escriu entre aquestes dues etiquetes.

Cal tenir en compte que alguns cercadors utilitzen el títol per classiﬁcar la pàgina web en les seves bases de dades. És important posar títol a totes les pàgines (ﬁns hi tot encara que s’utilitzin marcs). <TITLE> títol </TITLE>

Les etiquetes META (I) L e s e t i q u e t e s M E TA s ó n u t i l i t z a d e s p e r c e r t s c e rcadors alhora d’indexar els continguts del document:

<META name=”title” content=”títol de la pàgina web “> <META name=”keywords” content=”llista de paraules claus separades per comes (,)”> Escull unes quantes paraules claus i anomena-les separades per comes. Fes-ho per odre de més descriptiva a menys. No convé abusar-ne!

Informàtica 4t de l’ESO

Pràctica Pràctica__ ___-___-___ 1- ens r ef erim a <HTML>, <HEAD>, <BODY>, i els seus respectius tancaments........

1. Obre el “Bloc de notes”, posarem l’index general que ja coneixes(1) i afegirem dins del capçalament el que acabem d’aprendre sobre l’etiqueta Títol:

<TITLE> informàtica4rt de l’ESO </TITLE> 2- Haurem d’imaginar-nos un llistat de totes les paraules claus per tal de que qualsevol persona pugui trobar la nostra pàgina web amb una certa facilitat.

2. Un cop fet l’exrcici 1, anem a afegir una etiqueta META. Ara ens hem d’imaginar una pàgina WEB ﬁctícia sobre tot el que estem treballant en aquest tema d’informàtica de 4rt de l’ESO. Per tant hem de crear:

Pràctica__ __-__-___ Obre l’arxiu del teu bloc de notes de la pràctica1 i farem una sèrie de modiﬁcacions. 1. Com a etiqueta de títol: has de posar el teu nom i cognoms. 2. Com a etiquetes META: Títol: el teu nom i cognoms paraules claus: Totes les res postes de tots els ítems que vam posar com a índex de la nostra pàgina web Nom:

Cognom: Col·legi: Curs:

T.2 Capçalera

Les etiquetes META (II) Continuant amb l’apartat de les Etiquetes Meta, ens troben encara més variats d’aquest tipus d’etiquetes.

<META name=”description” content=”Descripció breu i precisa del contingut de la pàgina web”> <META name=”author” content=”nom de l’autor “> <META name=”distribution” content=”global/ local“> •global: mundial •local: pels qui només parlen la teva llengua

none/ index/

•all: indexatge de tots els ﬁtxers •none: no indexar cap ﬁtxer •index: pot ser indexada pels robots •noindex: no pot ser indexada pels robots •follow: els robots poden seguir els enllaços d’aquella pàgina a altres •nofollow: no es poden seguir els enllaços

•Llenguatge del document: ca - català es - espanyol en - anglès ...

Informàtica 4t de l’ESO

Uniform Resource Locator (URL) El Localitzador Uniforme de Recursos indica al programa navegador la localització d’un recurs (fitxers d’imatges, de sons, d’animacions, altres documents d’HTML, ...).

L’estructura de la URL és:

protocol://servidor/camí/recurs

Alguns protocols són: http

protocol de transferència d’hipertext (de documents HTML)

https

protocol de transferència d’hipertext segur

ftp

protocol de transferència de ﬁtxers

ﬁle

permet accedir a fitxers del disc dur (HD) local. file:///C:/Web/fitxer.html

mailto

adreça de correu electrònic

servidor

‘ordinador’ que conté el recurs

camí

el/s directori/s (car petes) que porten al recurs dintre del servidor

recurs

pot ser un nom de ﬁtxer o de directori

mailto:el.meu@correu.electronic

T.2 Capçalera

En una pàgina web que es trobi a: http://www.fortunecity.com/centreixent/index.html

http és el protocol www.fortunecity.com és el servidor /centreixent/ és el directori index.html és el nom del recurs (en aquest cas un ﬁtxer d’HTML)

Dins dels documents, aquesta localització la podem indicar de diferents maneres, segons convingui: Indicant una URL absoluta: http://domini/directori/ http://domini/directori/ﬁtxer /directori_1/directori_n/ﬁtxer

localització en un altre servidor localització d’un fitxer en un altre servidor s’especifica la localització del fitxer des del directori arrel del servidor actual.

Indicant una URL relativa: fitxer localització d’un fitxer en el directori actual directori/fitxer localització d’un fitxer que es troba en el directori fill de l’actual (cap a la dreta). ../fitxer localització d’un fitxer que es troba en el directori pare de l’actual (cap a l’esquerra).

Fulls d’estil en cascada (CSS) Són unes propietats que permeten modificar l’aparença del document i la dels diferents elements: deﬁnir els colors, l’alineació, els tipus de lletra... del document, dels enllaços, dels paràgrafs, de les taules, de les llistes... Aquestes es poden definir dins de la capçalera del document entre aquestes dues etiquetes:

<STYLE type=”text/css”>propietats

CSS</STYLE>

Informàtica 4t de l’ESO

Pràctica Pràctica4 ___-___-___ Obre la “pràctica1_pàgina personal” des del Bloc de notes. Un cop obert l’arxiu, afegirem les últimes etiquetes Meta apreses. 1. Afegeix les següents etiquetes:

<Meta name=“description”content=“breu del contingut”> <Meta name=“author”content=“el

descripció

teu nom”>

informàtica 4rt de l’ESO

T.3 el cos del document

El cos del document En el cos del document hi inclourem tot el contingut de la pàgina web: text, imatges, gràﬁcs, enllaços a altres pàgines, llistes, formularis... <BODY background=”URL de la imatge” bgcolor=”#rrggbb | nom” text=”#rrggbb | nom” link=”#rrggbb | nom” vlink=”#rrggbb | nom” alink=”#rrggbb | nom”> contingut del cos </BODY>

b a ck g r o u n d = ” U R L d e l a imatge” bgcolor=”#rrggbb | nom” text=”#rrggbb | nom” link=”#rrggbb | nom”

mostrarà una imatge de fons* color del fons* color del text. El color predeterminat és el negre* color dels enllaços. El color predeterminat és el blau*

vlink=”#rrggbb | nom”

color dels enllaços visitats. El color predeterminat és el púrpura*

alink=”#rrggbb | nom”

color dels enllaços actius. El color predeterminat és el vermell*

(*) Actualment s’aconsella utilitzar els fulls d’estil.

Informàtica 4t de l’ESO

Els colors estàndard

Nom

Codi

black teal blue navy lime white purple yellow olive red maroon gray fuchsia green silver aqua

#000000 #008080 #0000FF #000080 #00FF00 #FFFFFF #800080 #FFFF00 #808000 #FF0000 #800000 #808080 #FF00FF #008000 #C0C0C0 #00FFFF

T.3 el cos del document

Caràcters especials

Per mostrar símbols i caràcters especials a la pàgina web cal utilitzar codis (aquí en tens alguns):

Caràcter < > & “ Ø © ® « » ± ÷ ƒ

Codi &lt; &gt; &amp; &quot; &Oslash; &copy; &reg; &laquo; &raquo; &plusmn; &divide; &#402;

Caràcter à À á Á â Â ä Ä å Å • Ç

Codi &agrave; &Agrave; &aacute; &Aacute; &acirc; &Acirc; &auml; &Auml; &aring; &Aring; &middot; &Ccedil;

Informàtica 4t de l’ESO

Pràctica pràctica5 ___.___.___ Obre la güents

no t’oblidis de tancar l’etiqueta

“pràctica2” dins de

i afegeix els punts sel’etiqueta <BODY>.

1. afegeix una imatge de fons:

<BODY background=”URL d’una imatge” </BODY> 2. Guarda l’arxiu amb el nom d’aquesta pràctica.

pràctica6 ___.___.___ 1. torna a obrir la “pràctica 2”, ara posarem en aquesta pràctica com a color de fons de la nostra web “Fuchsia”

<BODY bgcolor=”fuchsia”</BODY> 2. Guarda l’arxiu amb el nom d’aquesta pràctica

pràctica7 ___.___.___ Recòrda’t que aquest text ha d’anar dins de l’etiqueta general de <BODY>

1. torna a obrir la “pràctica 2”, ara posarem en aquesta pràctica el text següent amb un color de fons “lime” i el color de les fonts “red” i una foto de fons (la que més t’agradi)

El meu nom HTML!!!!

és

__,

sóc

feliç

estudiant

<BODY background= “URL de la foto que vulguis” bgcolor=”lime” text=”red” </BODY> 2. Guarda l’arxiu amb el nom d’aquesta pràctica. 20

T.3 el cos del document

pràctica8 ___.___.___ 1. Obre la “pràctica2” i escriu el següent text entre les etiquetes de BODY

&lt;Manual d’HTML en catal&agrave;&gt;, des del 2006 per &copy;casal <Manual d’HTML en català>, des del 2006 per ©casal 2. Guarda l’arxiu amb el nom d’aquesta pràctica.

pràctica9 ___.___.___ 1. Obre la “pàctica1_pàgina personal” i fes les següents modiﬁcacions:

•Posa un color de fons de pantalla, aquest no podrà ser blanc. •Canvia el color de la font d’escriptura, aquesta no podrà ser negra. •Tots els ítems del nostre esquema hauran d’estar entre «nom»,«cognom»,etc.. •Al final del vostre BODY, haureu de afegir el segÚent text:

casaldels&agrave;ngels;&copy;2006-07 2. Guarda l’arxiu amb el mateix nom “pràctica1__pàgina personal”.

Informàtica 4t de l’ESO

Espais Podem classiﬁcar els espais com a un caràcter especial: HTML reconeix només un espai, per tant, dos o més espais seguits no seran reconeguts i no es mostraran a la pàgina web. Per introduir més d’un espai seguit cal utilitzar el seu codi

&nbsp; exemple:

com veus, cada cop que posem el signe d’espai & n b s p ; anem posant espais dins del nostre text, ja sigui deprés o entre paraules.

Salts de línia L’ e t i q u e t a s e g ü e n t p r o v o c a nia. No necessita etiqueta

exemple:

<BR>

un de

salt de lítancament.

T.3 el cos del document

Estil del text Negreta:

<B> negreta </B> <STRONG> marcat </STRONG> Cursiva:

<I> cursiva </I> <EM> emfatitzat </EM> <DFN> definició </DFN> <CITE> cita </CITE> Subratllat:

<U> subratllat </U> <INS> inserit </INS>

subratllat inserit

Tatxat:

<S> tatxat </S> tatxat <DEL> eliminat </DEL> Tipus teletip:

<TT> text tipus teletip </TT> <KBD> teclat </KBD> <SAMP> exemple </SAMP> <CODE> codi </CODE> Subíndex:

normal

<SUB>subíndex</SUB> Superíndex:

normal<SUP>superíndex</SUP> Petit:

<SMALL> petit </SMALL> Gran:

<BIG> gran </BIG> Cita:

El text contingut entre aquetes etiquetes apareixerà sagnat respecte els marges esquerre i dret

Informàtica 4t de l’ESO

Pràctica Pràctica10 Obre com En var <B> negreta </B>

____.____. ___

un nou arxiu , aquest l’anomenarem t’indica el títol de la pràctica. aquesta pràctica haurem de protot el que acabem de llegir en el full anterior.

1. Posa el teu nom i cognom amb els diferents estils de fonts, mira al marge esquerre, allà tens una llista en petit:

<STRONG> marcat </STRONG> Cursiva:

exemple:

<I> cursiva </I> <EM> emfatitzat </EM>

<STRONG> Luis Romo Vivancos</STRONG>

<DFN> definició </DFN>

etc......

<CITE> cita </CITE> Subratllat: <U> subratllat </U>

subratllat

<INS> inserit </INS>

inserit

Tatxat:

<S> tatxat </S>

<B> Luis Romo Vivancos </B> <BR>

tatxat

Pràctica11

<BR>

No t’oblidis de posar <BR> per tal de donar-li diferents línies.

____.____.___

<DEL> eliminat </DEL> Tipus teletip:

<TT> text tipus teletip </TT>

Obre l’arxiu “pràctica1_pàgina personal”i fes les següents modificacions que has après .

1. Posa espais (&nbsp;)després de cada paraula.

<KBD> teclat </KBD> <SAMP> exemple </SAMP> <CODE> codi </CODE>

música,&nbsp;pintura,&nbsp;futbol,&nbsp;

Subíndex: normal <SUB>subíndex</SUB> Superíndex:normal<SUP>superíndex</SUP>

Petit: <SMALL> petit </SMALL> Gran: <BIG> gran </BIG> Cita:

< B L O C K Q U O T E >

c i t a

</BLOCKQUOTE> normal<SUP>superíndex</SUP>

Petit: <SMALL> petit </SMALL> Gran: <BIG> gran </BIG> Cita:

2. Posa separació de línia <BR> a l’última paraula de cada ítem, així li estaràs posant tot el text en diferents línies: exemple: <aﬁcions>: música, pintura, futbol. <BR>

3. Posa tots els noms d’ítems en negreta i subratllats. 4. Posa el teu nom i cognoms en Cursiva.

Examen

Nom data conceptes

Procediments

Actitud

1. Crea una pàgina Web com si estiguessis dins de vista de “bloc de notes”. En aquesta pàgina han de sortir els diferents aspectes. etiquetes META:

“Title”,”Keywords”,”desciptions”, “author”, “distribution” i “lenguage”.

Text:

Has d’escriure un text amb 12 paraules mínim. Aquest haurà d’estar amb la lletra de color Verd i el fons de

pan-

talla de color Gris. Text especial.

Has d’esciure al teu bloc de notes tot el necessari perquè puguis visualitzar el següent text:

Examen

©Casal dels Àngels <<06-07>>

Informàtica 4t de l’ESO

Agrupar elements: DIV i SPAN S’utilitza l’etiqueta DIV per agrupar un primer element element: <BR><DIV 1. Sempre hi ha un salt de línia abans i després dels elements agrupats per l’etiqueta DIV.

align=”left|right|center”</DIV><BR>(1)

exemple:

L’etiqueta SPAN: per agrupar segons elements.

Fiza’t en les etiquetes de tamany <H6>, després parlarem d’elles.

Fixa’t en l’estil per tal de canviar el color de la lletra 26

<DIV> és l’agrupació dels primers elements.

Pràctica12

____.____. 06

1. Obre l’arxiu “pràctica1_pàgina personal” i fes les

T.3 el cos del document

Pràctica següents modiﬁcacions: a. Posarem etiquetes Div i Span de la següent forma. -A la última línia de la teva pàgina (marca registrada) li afegirem el Teu nom i cognom. Per tant, hem de crear agrupacions DIV i SPAN perquè quedin de la seguüent forma:

©Casal dels Àngels«06-07» Luis Romo Vivancos

-El text ha d’estar centrat, i ﬁxa’t que la primera línia té un tamny més gran que la segona. -Casal dels àngels hauria d’estar amb el color del logotip (lletres verdes menys la “g” que ha d’estar de color taronja). -El teu propi nom ha de tenir l’estil:

1. subratllat 2. negreta 3. el color que més t’agradi.

Informàtica 4t de l’ESO

Paràgrafs <P align=”left | right | center | justify”>text</P>

Exemples:

T.3 el cos del document

Text preformat Aquesta etiqueta ens permet visualitzar el text que hi ha entre les dues etiquetes tal com s’ha escrit: respectant els salts de línia, els espais i els tabuladors amb un tipus de lletra especíﬁc.

<PRE> text

</PRE>

Línia horitzontal <HR align=”left | right | center” noshade size=”núm.” width=”amplada”>

Exemples:

Informàtica 4t de l’ESO

align=”left | right | center” noshade size=”núm.” width=”amplada”

Exemples:

alineació línia sòlida, sense ombra, sense efecte 3D mida (en punts) de la línia amplada (en punts o %) de la línia

T.3 el cos del document

Pràctica Pràctica13

____.____.___

1. Obre un nou l’arxiu i aquest s’ha de guardar amb aquest nom. 2. Fes el següent Paràgraf: <P align=”justify”> Ja abans que l’ésser humà existís a la Terra havia animals que desenvoluparen un sentit del temps i de l’espai. Es coneixen nombroses espècies d’aus, mamífers, </P>

Pràctica14

____.____.___

1. Obre l’arxiu “pràctica1 Pàgina personal” i fes les diferents modiﬁcacions. 2. Utilitza el Text preformat de tal forma que tot el text que hi tens dins de “Body” estigui aliniat a la esquerre i les respostes estiguin el la línia d’abaix i amb una separació automàtica amb la tecla de tabulació. exemple:

«nom» Luis «cognom» Romo etc....

3. Fes una línia horitzontal al començament i al ﬁnal de Body. Aquesta tindrà les següents característiques: Color de les línies superior i inferior de color verd Color de la línia interior taronja 4. Posa línies horitzontals del color que vulguis després de cada resposta de cada Ítem.

Ha de ser una línia triple, amb verd i taronja (aquesta serà la central)

Informàtica 4t de l’ESO

Tipus, mida i color de la lletra Defineix el tipus, la mida i el color del text que es troba entre les dues etiquetes.

Nom de tipus de lletra: � Arial � Arial Black � Fixedsys � System � � � � � �

Times News Roman Comic Sans MS Helvetica Sans-Serif Verdana Terminal

<FONT face=”nom (1) ” size=”núm. | color=”#rrggbb | nom”>text</FONT> face=”nom”

±núm.”

tipus de lletra. Es poden posar varis tipus de lletres separats per comes (,) s i z e = ” n ú m . | ± n ú m .” mida (del 1 al 7) Predeterminada la 3: +1 és 4; -1 és 2 ... color=”#rrggbb | nom” c o l o r d e l t e x t

Exemples:

T.3 el cos del document

Comentaris  Utilitzant aquestes etiquetes podem fer anotacions dins del document. Aquests comentaris no els mostra el programa navegador a la pĂ gina web.

Exemples:

Informàtica 4t de l’ESO

Pràctica Pràctica 15 ____.____.___ 1. Obre un nou arxiu i pósa-li el nom de la pràctica d’avui. 2. Posa l’esquema bàsic d’una pàgina web. 3. Fes una pàgina web on surtin tots els noms de font amb el seu propi estil, cada línia haurà d’estar separat per línies horitzontals exemple:

Pràctica 16 ____.____.___ 1. Obre la teva “pràctica1_Pàgina personal” i fes les següents modiﬁcacions. 2. Tot el text de la teva pàgina web ha d’èsser VERDANA 3. Els noms d’ítems han d’estar amb tamany 5 4. Els noms d’ítems han d’estar en color VERD 5. Això ha d’estar amb font: Arial Black

©Casal dels Àngels«06-07» Luis Romo Vivancos

T.3 el cos del document

Pràctica París.pràctica17 ____.____.___ 1. Obre un nou arxiu de “bloc de notes” i el guardarem amb el nom de la pràctica que veus. 2. A partir d’ara, treballarem de forma paral.lela la nostra pàgina personal i una nova pàgina sobre una ciutat d’Europa, en aquest cas sobre París. Haurem de seguir els diferents passos:

1. Esquema bàsic de HTML 2. Etiqueta <TITLE> París 2007 3. Dins de <HEAD> les etiquetes META: <META name=”title” <META name=”keywords” <META name=”description” <META name=”author” <META name=”distribution” <META name=”language” 3. Dins de <BODY> l’esquema següent: Com a títol, París 2007(1). Com a ítems de la pàgina “índex” (2)La ciutat: Història: Cultura: Esports: Transport:

1. El títol haurà de tenir una alineació centrada, amb tamany 7 i amb la font que més t’agradi. 2. Els Ítems hauran de tenir un estil de font Negreta, amb la font que prefereixis, i el tamanys haurà de ser del número 5. Els dos primers ítems estaran alineats a la dreta i els 3 següents a l’esquerra.

4. Dins de <BODY> afegirem:

©Casal dels Àngels«06-07» nom de l’alumne/a

5. Afegirem tres línies amb els colors del país al que fem referència.

Informàtica 4t de l’ESO

Llistes Permeten representar elements en forma de llista. Hi podrem incloure també qualsevol dels elements HTML (com imatges, enllaços, ...) i ﬁns i tot inserir una llista dins d’una altra. Existeixen

tres

tipus

llistes:

•les no numerades •les numerades •les llistes de deﬁnicions

Llistes no numerades: 1. Cada element de la llista (tan en les no numerades com en les numerades) es defineix amb l’etiqueta LI (List Item): <LI> element de la llista </LI>

Exemple:

Les

llistes

numerades

(Unordered

<UL type=”disk|circle|square”>elements </UL> • disk o circle � square

List):

de la llista

(1)

T.3 el cos del document

Les llistes numerades(Ordered List): <OL start=”núm.” type=”A | a | I | i | 1”> </OL> A.text B.text C.text D.text

a.text b.text c.text d.text

I.text II.text III.text IV.text

elements de la llista

i.text ii.text iii.text iv.text

start =”núm.” indica el número pel que s’ha de començar la llista (1)

1.text 2.text 3.text 4.text

1. Cada element de la llista (tan en les no numerades com en les numerades) es defineix amb l’etiqueta LI (List Item): <LI> element de la llista </LI>

Exemple:

Informàtica 4t de l’ESO

Llistes de deﬁnicions <DL> elements de la llista </DL>

Els

elements

llista

defineixen:

<DT> terme </DT> <DD> descripció </DD> Exemple

Recorda que en els elements de les llistes s’hi pot posar text, imatges, enllaços,... i ﬁns i tot una llista dins d’una altra.

T.3 el cos del document

Pràctica Anem a analitzar el següent exemple sobre tot el que hem après sobre “Llistes”. 1. Omple els requadres explican quina és la funció de les següents etiquetes:

Informàtica 4t de l’ESO

pràctica18 ____.____.___ 1. Obre un nou l’arxiu i aquest s’ha de guardar amb aquest nom. 2.Fes l’esquema bàsic d’una pàgina índex d’HTML. 3. Utilitza tot el que has après sobre llistes numerades i no numerades, per tal de que et quedi una pàgina web de la següent forma:

T.3 el cos del document

pràctica19 ____.____.___ 1. Obre l’arxiu “pràctica1 Pàgina personal” i fes les diferents modiﬁcacions. 2. Posarem tots els Ítems dins d’úna llista no numerada: aquesta podrà ser, com ja sap(1): • disk o circle � square

1. i 2.Posaràs la que més t’agradi, però, has de tenir en compte que per tal de donar-li regularitat a la teva pàgina web, tots els ítems han de tenir la mateixa llista no numerada.

3. Posarem totes les respostes dels Ítems dins d’una llista numerada: aquesta podrà ser, com ja sap(2): A.text B.text C.text D.text

a.text b.text c.text d.text

I.text II.text III.text IV.text

i.text ii.text iii.text iv.text

1.text 2.text 3.text 4.text

pràctica20 ____.____. ___ 1.Obre l’arxiu “París.pràctica17” i fes les diferents modiﬁcacions. 2. Hauràs d’afegir 4 subcarpetes a cada un dels Ítems que apareixen a la portada principal, anomenada “Índex”. 3. Fes l’exercici número 2 i 3 de la pràctica anterior. 41

Informàtica 4t de l’ESO

Imatge Dins del cos del document, dins d’una cel•la, dins d’una llista, dins d’un paràgraf s’hi poden inserir gràfics o imatges. S’utilitzen fitxers amb l’extensió .gif, .jpg o .png (millor). La majoria dels programes navegadors poden mostrar imatges o gràfics en aquests tres formats (GIF CompuServe Graphics Interchange, JPEG Joint Picture Expert Group i PNG Portable Network Graphics), és necessari convertir les imatges o gràfics d’altres formats a algun d’aquests formats (recomanem que escolliu el format PNG).

<IMG

src=”URL de la imatge” alt=”text alternatiu” border=”núm.” width=”amplada” height=”alçada” hspace=”núm.” vspace=”núm.” align=”top|middle|bottom|left|right”> src=”URL de la imatge” alt=”text alternatiu”

(localització i) nom del ﬁtxer mostra el text alternatiu quan el navegador no pot oferir la imatge border=”núm.” mida del contorn ( border=”0” sense contorn ) width=”amplada” amplada de la imatge (en punts o en %) * height=”alçada” alçada de la imatge (en punts o en %) * hspace=”núm.” espai horitzontal (en punts) que separa la imatge de qualsevol altre element** vspace=”núm.” espai vertical (en punts) que separa la imatge de qualsevol altre element* align=”top|middle|bottom|left|right determina l’alineació del text que segueix la imatge* “ (*) s’haurien d’especificar sempre aquests dos atributs (per conèixer les dimensions d’una imatge s’han de consultar les seves Propietats)

Informàtica 4t de l’ESO

Exemple: Quan el navegador té problemes per trobar l’adreça de la imatge, ens surtirà l’ombra de la imatge amb la seva amplada i altura, i és en aquest moment quan visualitzarem el text que em posat a l’apartat (Alt=”............”).

Ara observa els següents exemples, on podràs veure la modi-

ﬁcació del format quan fem canvis a l’apartat d’ (align=”....”). Pots veure el moviment que realitza el nostre text. En aquest exemple ens fexarem en l’aspecte que fa referència al tamany del (dorder=”.....”). Ja veus que quan més gran és el número, més gran és la vora de la imatge. Quan el número correspon al “0” no hi ha vora.

En el següent exemple veurem les modiﬁcacions que fan referència a l’amplada i l’altura de la imatge.

Fixa’t que també hem fet modiﬁcacions de l’apartat de “align”.

Informàtica 4t de l’ESO

Pràctica

pràctica21 ____.____. ___.HTML 1. Obre un nou l’arxiu, aquest el guardarem amb aquest nom. 2.Fes l’esquema bàsic d’una pàgina índex d’HTML. 3. En aquesta pràctica hauràs de inserir una imatge en la teva pàgina web, de tal forma que provaràs tots els canvis que t’indico a continuació.

•nº1 <IMG src=”URL

de la imatge” alt=”el teu nom i cognoms” border=”0” width=”la pròpia de la imatge” height=”la pròpia de la imatge” hspace=”1” vspace=”1” align=”top”> aquesta pràctica em permetrà

utilitzar imatges en la meva web i poder modificar el seu format original.

•nº2

faràs una còpia exacta, però ara aniràs posant le diferents opcions d’Align align=”top|middle|bottom|left|right”>

nº3

nº3 nº4 nº5

•nº6 modiﬁcaràs el nom de la imatge per tal de que el navegador tingui problemes per obrir la imatge, i així podràs 46

veure el text que has posat dins de l’apartat (Alt=”...”).

pràctica22 ____.____. ___.HTML 1. Obre l’arxiu “pràctica1 Pàgina personal” i fes les diferents modiﬁcacions. 2. Posa una imatge dins de cada apartat d’item, de tal forma que el format de les imatges siguin quadrades i estiguin al damunt de cada ítem. Totes les imatges seran diferents i aniran acord amb el signiﬁcat del ítem. Totes tindran el mateix tamany.(1)

1. aquí tens un petit exemple de com hauria de quedar la imatge al damunt de l’item.

pràctica23 ____.____.___.HTML 1. Obre l’arxiu “París.pràctica17” i fes les diferents modiﬁcacions. 2. Posa una imatge dins de cada apartat d’item, de tal forma que el format de les imatges siguin quadrades i estiguin al damuntt de cada ítem. Totes les imatges seran diferents i aniran acord amb el signiﬁcat del ítem. Totes tindran el mateix tamany.(1)

Informàtica 4t de l’ESO

Hipervincle 1. Això ens facilitarà la lectura i el treball amb la divisió de la informació en diferents arxius. Recorda que la pàgina cental l’anomenarem “Index.HTML”. A partir d’aquest arxiu haurem d’anar hipervinculant la resta.

Què és un Hipervincle?.................................................... Per tal de poder començar a treballar amb més d’un arxiu de HTML a la vegada, a quests hauran d’estar Hipervinculats(1).

Per tal de poder Hipervincular qualsevol text a la nostra pàgina, haurem d’escriure les següents etiquetes:

<a href=”URL”> text que hipervincularem</a>

Fixat en l’exemple:

Pràctica

pràctica24 ____.____.___.HTML 1. Obre un nou l’arxiu, aquest el guardarem amb aquest nom. 2.Fes l’esquema bàsic d’una pàgina índex d’HTML. 3. Hipervincula quatre paraules diferents dins d’un arxiu comú anomenat Index.Html a 4 arxius diferents. El contingut d’aquest 4 arxius són totalment lliures.

pràctica25 ____.____.___.HTML 1. Obre l’arxiu “pràctica1 Pàgina personal” i fes les diferents modiﬁcacions. 2. A partir d’ara, l’arxiu que acabes d’obrir li anomenarem. Index.Html. Aquest arxiu tindrà de moment tants hipervincles com noms d’ítem tinguis. Pensa que els noms dels arxius hipervinculats rebran el mateix nom que el de l’item, ja que dins d’aquest arxius estarà tota la informació d’aquest.

pràctica26 ____.____.___.HTML

Informàtica 4t de l’ESO

1. Obre l’arxiu “París.pràctica17” i fes les diferents modiﬁcacions. 2. Fes el mateix pas que a l’exercici nº2 de la pràctica anterior.

Taules Dins de les cel.les d’una taula hi podem introduir text, llistes, enllaços, imatges, gràﬁcs, formularis, altres taules ,... Les taules ens permeten una millor distribució dels continguts

<TABLE> <CAPTION> títol de la taula </CAPTION> <TR> <TH>contingut </TH>

. . .

<TD>contingut </TD>

. . .

</TR> . . . </TABLE> de la pàgina (poden servir d’esquelet del cos del document). Estructura d’una Taula:

<TABLE border=”núm.” cellpadding=”núm.” cellspacing=”núm.” width=”amplada” height=”alçada” bordercolor=”#rrggbb | nom” bgcolor=”#rrggbb | nom”> 50

border=”núm.”

mida del contorn

cellpadding=”núm.”

espai (en punts) que separa el marge de la cel•la amb el seu contingut

cellspacing=”núm.”

espai (en punts) que separa les cel•les d’una mateixa taula

width=”amplada”

indica l’amplada de la taula (en punts o en % en funció amb l’amplada de la ﬁnestra del navegador)

height=”alçada”

indica l’alçada de la taula (en punts o en % en funció amb l’alçada de la ﬁnestra del navegador)

bordercolor=”#rrggbb/ nom”

especiﬁca el color del contorn de la taula

bgcolor=”#rrggbb / nom”

especiﬁca el color de fons predetermintat per a totes les cel•les de la taula

background=

imatge del fons de la taula

”URL de la imatge”

Títol de la taula <CAPTION align=”top | bottom”> títol opcional </CAPTION>

Informàtica 4t de l’ESO

align=”top”

mostrarà el títol sobre la taula. predeterminat

align=”bottom”

mostrarà el títol sota la taula

Definició de les files de la taula <TR> cel.les </TR> Aquesta etiqueta marca el principi d’una fila de la taula. Dins d’aquesta hi podem incloure tantes cel.les com siguin necessàries. Cada cel.la definida dins d’aquesta etiqueta representarà una nova columna de la taula. La fila es tanca amb l’etiqueta

</TR>.

Deﬁnició de les cel•les de la taula Hi ha dos tipus de cel.les: les <TH> i les <TD>; l’única diferència que hi ha entre les dues és que les cel.les <TH> (de capçalera) apareixen amb el text en negreta i alineat al centre. Les més utilitzades són les <TD>.

align=”left|right|center|justify”

alineació horitzontal del contingut de la cel•la

valign=”top|middle|bottom|baseline“

alineació vertical del contingut de la cel•la

bgcolor=”#rrggbb | nom”

color del fons de la cel•la

background=”URL de la imatge”

imatge del fons de la cel•la

Informàtica 4t de l’ESO

Exemples:

Fixa’t en el “bloc de notes”, tindràs tantes cel.les com etiquetes <TD> posis.

En aquest segon exemple t’has de ﬁxar en el número de ﬁles, hi hauran tantes com etiquetes <TR> posis.

En resum: Com pots observar: cada <TR> obre una fila, cada <TD> defineix una cel•la; cada <TD> que hi ha entre les etiquetes <TR> i </TR> defineix una columna diferent.

En aquest últim exemple t’has de fixar en els paràmetres que hem donat a l’etiqueta <TD>

Informàtica 4t de l’ESO

Pràctica pràctica27 ____.____.___.HTML

Has de tenir en compte les següents característiques de la següent etiqueta:

1. Obre un nou l’arxiu, aquest el guardarem amb aquest nom.

<TD align=”left|right |center|justify”

2.Fes l’esquema bàsic d’una pàgina índex d’HTML.

valign=”top|middle|bo ttom|baseline” bgcolor=”#rrggbb nom”

background=”URL de la imatge” width=”amplada” height=”alçada” rowspan=”núm.files” colspan=”núm. columnes” nowrap>

3. Dins de les etiquetes de <BODY> fes el possible perquè quedi una taula de la següent forma. a) • Tres columnes • Tres files b) • Dins de la 1era fila posaràs una sèrie de números, del 1 al 3 • Dins de la 2a fila posaràs una sèrie de lletres, de l’ “A” a la “C” •Dins de la 3era fila, posaràs el teu nom a la primera cel·la, el teu primer cognom a la segona cel·la i a la 3era el teu segon cognom. c) • Els elements de la 1a fila han d’estar aliniats a la esquerra. • Els elements de la 2a fila han d’estar aliniats a la detra. • Els elements de la 3a fila han d’estar aliniats al centre.

d) • A la 2a cel·la de la 1era fila ha d’estar pintada de color Taronja. • A la 3era cel·la de la segona fila ha de ser de color Rosa. • A la 1era cel·la de l’última fila s’ha de pintar de color Gris e) • A la primera cel·la de la primera fila ha de tenir una imatge inserida. f) • Posa una nova fila a la taula, aquesta ha d’estar formada amb una única cel·la, i aquesta ocuparà el mateix espai que les tres columnes posteriors.

Informàtica 4t de l’ESO

Formularis Amb els formularis podrem sol·licitar informació als usuaris i processar-la. Les dades que els/les usuaris/es de la web envien mitjançant un formulari, són recollides automàticament per programes que les processen i el seu resultat és enviat a bases de dades, adreces de correu electrònic, altres pàgines web.... Si voleu allotjar la vostra web en un servidor (sobretot si és gratuït) i voleu utilitzar formularis, abans us haureu d’assegurar que aquest servidor us dóna eines per treballar amb formularis. Nosaltres, no practicarem la captació de dades en cap base de dades, només l’utilitzarem per fer la nostra web una mica més interactiva, així les persones que n’entrin podran dir la seva.

Estructura d’un Formulari:

Si posem aquesta estructura dins del Body de la nostra pàgina web, podràs veure el següent:

<FORM action=”URL del programa que processarà les dades” method=”POST | GET” name=”nom” enctype=”tipus” target=”destí”> action=”URL del programa que processarà localització i nom del fitxer (programa les dades” CGI, o PHP, o ASP, o JSP, o...) que processarà les dades mètode utilitzat per transmetre les dades method=”POST | GET” name=”nom” identifica el formulari amb un nom (útil per a scripts) enctype=”tipus” permet especificar el tipus de codificació MIME de les dades transmeses: application/x-www-form-urlencoded multipart/form-data text/plain target=”destí” indica en quin marc o finestra s’ha de mostrar el resultat de les dades processades pel programa CGI, o PHP, o ASP, o JSP, o...

Entrada

bàsica

name=”variable” value=”valor inicial”

</FORM>

dades

<FORM>

determina el tipus de camp d’entrada que es vol utilitzar especiﬁca el nom de la variable que tindrà el valor introduit en el camp especiﬁca el valor per defecte que tindrà el camp

<FORM>

<INPUT>

Informàtica 4t de l’ESO

Text: <INPUT type=”text” name=”variable” value=”valor inicial” size=”núm.” maxlength=”núm.”> <INPUT type=”text” size=”15” value=”Hola :-)” maxlength=”10”>

size=”núm.” maxlength=”núm.”

mida (en caràcters) de la finestreta d’introducció del text nombre màxim de caràcters que podran ser introduits en el camp

Contrasenya (password): <INPUT type=”password” name=”variable” value=”valor inicial” size=”núm.” maxlength=”núm.”> size=”núm.” <INPUT type=”password” size=”7” value=”clau001” maxlength=”7”>

maxlength=”núm.”

mida (en caràcters) de la finestreta d’introducció del text nombre màxim de caràcters que podran ser introduits en el camp

Quadre de veriﬁcació (checkbox): <INPUT type=”checkbox” name=”variable” v a l u e = ” v a l o r i n i c i a l ” c h e c k e d > checked el botó apareixerà seleccionat per defecte <INPUT type=”checkbox” checked> Conté el paràmetre checked <INPUT type=”checkbox”>No conté el paràmetre checked

Botó d’opció (radio button/option button): <INPUT type=”radio” name=”variable” v a l u e = ” v a l o r i n i c i a l ” c h e c k e d > checked

el botó apareixerà seleccionat per defecte

<INPUT type=”radio” checked > Conté el paràmetre checked <INPUT type=”radio”>No conté el paràmetre checked

Fitxer: <INPUT type=”file” name=”variable” size=”núm.”> S’utilitza per penjar (upload) fitxers en el servidor (per exemple quan adjuntem un fitxer a un correu electrònic web). És necessari afegir aquest atribut amb aquest valor a l’etiqueta FORM: enctype=”multipart/ f o r m - d a t a ” i u t i l i t z a r e l m è t o d e m e t h o d = ” p o s t ”.

Ocult (hidden): <INPUT type=”hidden” name=”variable” value=”valor”> Aquest

tipus

camp

és

visible

i no pot ser modificat pels usuaris de la pàgina web

Trametre (submit): <INPUT

type=”submit”

value=”missatge”

value=”missatge”>

missatge que es mostra en el botó

Informàtica 4t de l’ESO

Imatge (image): <INPUT type=”image” value=”Envia” src=”Puesta de sol.JPG” width=”52” height=”32”>

<INPUT type=”image” src=”URL de la imatge” name=”variable”> src=”URL de la imatge” name=”variable”

localització i nom del ﬁtxer especiﬁca el nom de la variable que recull el valor de les coordenades on s’ha fet clic sobre la imatge

Reiniciar (reset): <INPUT type=”reset” value=”Esborra les dades”>

<INPUT

type=”reset”

value=”missatge”

value=”missatge”> missatge que es mostra en el botó

Entrada de dades en un quadre de text < T E X TA R E A n a m e = ” va r i a b l e ” r o w s = ” f i l e s ” cols=”columnes”> contingut per defecte </TEXTAREA> n a m e = ” v a r i a b l e ” especifica el nom de la variable que tindrà el valor introduit en el camp r o w s = ” f i l e s ” número de files c o l s = ” c o l u m n e s ” número de columnes c o n t i n g u t p e r d e f e c t e valor per defecte que es mostra dins del quadre de text

< T E X T A R E A name=”comentaris” rows=”3” cols=”10”> </TEXTAREA>

El contingut per defecte s’escriu entre les dues etiquetes </TEXTAREA>

Entrada de dades mitjançant camps de selecció <SELECT name=”variable” multiple size=”núm.”> <OPTION value=”valor” selected>text del camp </SELECT> name=”variable” size=”núm.” multiple value=”valor” selected

especiﬁca el nom de la varia ble que tindrà el valor del camp seleccionat número de camps de selecció visibles es pot seleccionar més d’una opció especiﬁca el valor del camp selecciona una opció com a predeterminada

< S E L E C T name=”seleccio”> <option value=”1”>Opció 1 <option selected value=”2”>Opció 2 <option value=”3”>Opció

Informàtica 4t de l’ESO

<SELECT name=”seleccio”> <option value=”1”>Opció 1 <option selected value=”2”>Opció 2 <option value=”3”>Opció 3 </SELECT>

<SELECT name=”seleccio” multiple size=”3”> <option value=”1”>Opció 1 <option selected value=”2”>Opció 2 <option selected value=”3”>Opció 3 <option value=”4”>Opció 4 <option value=”5”>Opció 5 </SELECT>

text del camp

text que es mostra en el camp de selecció

Botons <BUTTON name=”nom” value=”valor” ty pe=”submit|button|reset”> </BUTTON> name=”nom” value=”valor” type=”submit|button|reset”

identiﬁca el botó especiﬁca el valor inicial tipus de botó

name=”sexe”

name=”sexe”

<BUTTON name=”envia” value=”submit” type=”submit”>Envia<IMG src=”envia.png” alt=”Envia” border=”0” align=”absmiddle”></BUTTON> <BUTTON name=”neteja” type=”reset”> Esborra<IMG src=”esborra.png” alt=”Neteja” border=”0” align=”absmiddle”></BUTTON> </FORM>

Informàtica 4t de l’ESO

Pràctica pràctica28text __.__.___.HTMl

1. Obre un nou l’arxiu, aquest el guardarem amb aquest nom. 2.Fes l’esquema bàsic d’una pàgina índex d’HTML. 3. Dins de les etiquetes de <BODY> fes el possible perquè posis una entrada de text, dins de l’entrada hauria de sortir el següent misatge:

He aconseguit posar un formulari de text”

“

pràctica29contrasenya ___.__._.HTML

“Topsecret”

pràctica30verificació ___.__._.HTML

1. Obre un nou l’arxiu, aquest el guardarem amb aquest nom. 2.Fes l’esquema bàsic d’una pàgina índex d’HTML. 3. Dins de les etiquetes de <BODY> fes el possible perquè posis un quadre de veriﬁcació. Al quadre de veriﬁcació sortiran dos opcions:

a. Aporvaré l’assignatura d’informàtica b. No l’aprovaré

pràctica31botó ___.__._.HTML

1. Obre un nou l’arxiu, aquest el guardarem amb aquest nom. 2.Fes l’esquema bàsic d’una pàgina índex d’HTML. 3. Dins de les etiquetes de <BODY> fes el possible perquè posis un botó d’opció. Al quadre de veriﬁcació sortiran dos opcions:

a. Fàcil b. Difícil

Informàtica 4t de l’ESO

pràctica32fitxer ___.__._.HTML

1. Obre un nou l’arxiu, aquest el guardarem amb aquest nom. 2.Fes l’esquema bàsic d’una pàgina índex d’HTML. 3. Dins de les etiquetes de <BODY> fes el possible perquè posis un botó per inserir-hi ﬁtxers.

pràctica32imatge ___.__._.HTML

1. Obre un nou l’arxiu, aquest el guardarem amb aquest nom. 2.Fes l’esquema bàsic d’una pàgina índex d’HTML. 3. Dins de les etiquetes de <BODY> fes el possible perquè posis 3 botons d’imatge. pràctica32reiniciar ___.__._.HTML

Esborrar continguts 68

pràctica32quadre text ___.__._.HTML

1. Obre un nou l’arxiu, aquest el guardarem amb aquest nom. 2.Fes l’esquema bàsic d’una pàgina índex d’HTML. 3. Dins de les etiquetes de <BODY> fes el possible perquè et sorti una entrada de dades en un quadre de text. El text que ha de sortir per defecta srà:

Aquí s’hi pot escriure pràctica33qüestionari text ___.__._.HTML

1. Obre un nou l’arxiu, aquest el guardarem amb aquest nom. 2.Fes l’esquema bàsic d’una pàgina índex d’HTML. 3. Dins de les etiquetes de <BODY> posa les següents etiquetes <FORM action=”mailto:el.meu@correu.electronic” method=”POST” enctype=”text/plain”> Nom:<INPUT type=”text” name=”nom” value=”escriu el teu nom” size=”30” maxlenght=”40”><BR> Nom: <INPUT type=”radio” name=”sexe” value=”noia”>noia <INPUT type=”radio” name=”sexe” value=”noi”>noi <INPUT type=”radio” name=”sexe” value=”nsnc” checked>per deﬁnir<BR> noia noi per deﬁnir <INPUT type=”checkbox” name=”programo” value=”si”>Jo escric el codi HTML<BR> 69

Informàtica 4t de l’ESO

<INPUT type=”checkbox” name=”programes” va l u e = ”s i ” > U t i l i t z o p r o g ra m e s a u t o m à t i c s c o m e l Dreamweaver<BR> <INPUT type=”checkbox” name=”pero” value=”si”>Controlo sempre el codi que genera el programa automàtic<BR> Jo escric el codi HTML Utilitzo programes automàtics com el Dreamweaver Controlo sempre el codi que genera el programa automàtic Posa nota al manual<SELECT name=”puntuacio”> <option value=”6”>6 <option value=”7”>7 <option value=”8”>8 <option value=”9”>9 <option value=”10”>10 </SELECT>Posa nota al manual <TEXTAREA name=”comentari” rows=”5” cols=”15”>Escriu els teus comentaris</TEXTAREA>Comentaris Comentaris Accions:<INPUT type=”submit” value=”Envia”><INPUT type=”reset” value=”Esborra”> Accions: </FORM>