codi Html osanroma

HTML
Consells pràctics sobre el codi HTML.

Generat per:Oscar Sanromà

1

INDEX
Programes.................................................................................................................................. 3
Començant... ................................................................................................................................... 4
El llenguatge HTML i l'estructura d'un document.......................................................................... 4
El títol de la pàgina web.................................................................................................................. 7
El cos del document d'HTML......................................................................................................... 7
Els colors estàndard .................................................................................................................... 8
Caràcters especials i espais....................................................................................................... 9
Salts de línia................................................................................................................................ 10
Estil del text ................................................................................................................................. 10
Tipus, mida i color de la lletra................................................................................................... 11
Capçaleres .................................................................................................................................. 11
Paràgrafs ..................................................................................................................................... 12
Text preformat............................................................................................................................. 13
Línia horitzontal .......................................................................................................................... 14
Agrupar elements: DIV i SPAN ................................................................................................ 14
Compaginar text i gràfics.............................................................................................................. 14
Utilitzar una imatge com a enllaç ................................................................................................. 15
Les llistes ...................................................................................................................................... 16
Llistes no ordenades i llistes ordenades ........................................................................................ 16
Llistes de definicions .................................................................................................................... 17
formulari ....................................................................................................................................... 17
Estructura d'un formulari .............................................................................................................. 17
Entrada bàsica de dades ................................................................................................................ 18
Entrada de dades en un quadre de text.......................................................................................... 20
Entrada de dades mitjançant camps de selecció ........................................................................... 21
Botons ........................................................................................................................................... 22
Formulari d'exemple ..................................................................................................................... 22
Imatges sensibles, mapes sensibles............................................................................................... 25
Els frames...................................................................................................................................... 26
Estructura d'un document HTML amb marcs (FRAMES): .......................................................... 26
Especificar els marcs..................................................................................................................... 26
Definició de cada marc ................................................................................................................. 27
Els enllaços i l'atribut target.......................................................................................................... 29
NOFRAMES................................................................................................................................. 29
Marcs interns................................................................................................................................. 29
Inserir multimèdia en una pàgina web .......................................................................................... 30
Inserir Flash .................................................................................................................................. 30
Inserir un applet de Java ............................................................................................................... 31
Integrar estil a una etiqueta determinada ...................................................................................... 32
Inserir estil al document................................................................................................................ 32
Text preformat .............................................................................................................................. 33
Les etiquetes META ..................................................................................................................... 33
BASE ............................................................................................................................................ 34
Fulls d'estil externs........................................................................................................................ 34
Fulls d'estil en cascada (CSS) ....................................................................................................... 35
JavaScript...................................................................................................................................... 36
PHP ............................................................................................................................................... 37

2

Què es la Web 2.0: permet als seus usuaris interactuar amb altres usuaris o canviar el contingut
del lloc. Fou emprat des del 2006 fins a l’actualitat i s’associa habitualment amb les aplicacions
web que faciliten la compartició interactiva d’informació, el disseny centrat en l’usuari i la
col·laboració dins el World Wide Web. Alguns exemples del Web 2.0 serien les comunitats
basades en web, les xarxes socials, els llocs de compartició de vídeos, els wikis i els blocs.
Actualment els llocs Web 2.0 no són interactius ja que els usuaris es limiten a mirar passivament
la informació que se’ls proporciona.

WYSIWYG és l'acrònim de la frase anglesa "What You See Is What You Get" (el que veus és el
que obtens). En l'àmbit de la programació i el disseny es refereix a la tecnologia informàtica que
permet que el que es veu durant l'edició o programació es correspongui més o menys
acuradament amb el resultat final (ex:Blogger).

Els editors d'HTML són programes que s'ocupen d'escriure el codi, i l'usuari només ha d'editar
una pàgina semblant a la d'un editor de text. Una altra filosofia semblant és WYSIWYM: What
You See Is What You Mean, utilitzada en els processadors de text de l'estil de LaTeX, com per
exemple LyX.

Programes

Alguns exemples de programes per editar pàgines web són: Dreamweaver, NVU, Amaya,
Microsoft Frontpage, Writer, Microsoft Word, les versions de Composer de Netscape i Mozilla.

3

Començant...
QUE ES?

HTML, són les sigles de HyperText Markup Language (Llenguatge de Marcat de Hipertext), i és
el llenguatge de marcat predominant per a l'elaboració de pàgines web creat per el Tim Berners-
Lee en 1991. És usat per a descriure l'estructura i el contingut en forma de text, així com per
complementar el text amb objectes tals com imatges. HTML s'escriu en forma de "etiquetes",
envoltades per claudàtors angulars (<,>).

D'aquest tipus de llenguatge quan el veiem en una web s'anomena codi font.

PER A QUÈ SERVEIX?

Ens serveix per poder el crear o modificar una pàgina web que en un futur els usuaris de la xarxa
en puguin ser beneficiats de l'informació que pugui aportar.

QUE NECESITEM?

Per començar a practicar el llenguatge HTML i construir una pàgina web n'hi ha prou amb un
editor de fitxers de text i amb un programa navegador. S'utilitza l'editor de text per escriure el
codi font del document i un programa navegador per veure'n el resultat.

Cal tenir en compte que el si volem que els usuari d'Internet accedeixin a la nostra pàgina hem de
publicar-ho en un servidor web. Els servidors distingeix entre majúscules i minúscules. És
necessari escriure els noms dels diferents fitxers que s'inclouen a les pàgines (imatges, gràfics,
sons, ...) i els noms dels fitxers HTML en minúscules, sense caracters especials (accents, ç, ...) i
sense espais.

El llenguatge HTML i l'estructura d'un document
Considero que aquests programes són fantàstics només quan ets capaç d'entendre i controlar tot
el codi font que s'està generant automàticament. Per aquest motiu, aconsello començar estudiant i
creant el codi HTML un mateix.

L'HTML són un conjunt d'etiquetes que el programa navegador ha d'interpretar. Amb l'HTML
creem pàgines web sempre estàtiques. Un cop carregada la pàgina web en el programa
navegador del client, aquesta no pot ser modificada. Per crear pàgines web dinàmiques,
interactives, convinarem l'HTML amb el Javascript (el codi font d'un script Javascript és
interpretat i executat pel programa navegador de l'ordinador del client).
També podem crear pàgines web dinàmiques mitjançant els anomenats llenguatges de servidor.
Els llenguatges de servidor són llenguatges de script que s'insereixen dins del document d'HTML
i són interpretats i executats pel servidor de pàgines web. El client sol·licita una pàgina web al
servidor i aquest llegeix el codi de script que conté, executa les comandes, i envia un document
HTML que el client pot visualitzar amb el seu programa navegador. El client sempre rep un
document HTML resultat de l'execució del codi, mai rep el codi font del script. Diferents

4

llenguatges de servidor són el PHP (Hypertext PreProcessor com a projecte Open Source), o el
JSP (Java Server Pages de Sun Microsystems) o l'ASP (Active Server Pages de Microsoft).

Els documents o fitxers d'HTML es guarden amb les extensions .html o .htm. Generalment, el
primer fitxer d'un lloc web rep el nom de index.htm o index.html.

• L'HTML o Hyper Text Markup Language (Llenguatge Marcador d'HiperText)
permet, mitjançant una sèrie de marques que les anomenarem etiquetes, crear
documents per a presentar (mostrar) informació a la web.
• L'HTML utilitza etiquetes (tags):

<ETIQUETA atributs> contingut
</ETIQUETA>

• Quan visualitzem un document d'HTML(una pàgina web) amb un programa
navegador, no podem veure les etiquetes que el componen. Per fer-ho necessitem
visualitzar el codi font del document.
• Tot el contingut que hi ha entre dues etiquetes estarà influenciat 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 podrà tenir un aspecte diferent segons el programa
navegador amb el que l'estiguem visualitzant.
• Hi ha llibertat per escriure les etiquetes en majúscules i/o en minúscules. Per facilitar
l'edició/visualització del codi font, convé utilitzar sempre un mateix format pel codi
en tots els documents d'HTML del web. Per exemple, escriure sempre el nom de
l'etiqueta en majúscules i els atributs i els seus valors en minúscules: <ETIQUETA
atribut1="valor" atribut2="valor"></ETIQUETA>.
• La <ETIQUETA> és una etiqueta d'obertura i la </ETIQUETA> és una etiqueta de
tancament.
No sempre existeix una etiqueta de tancament i, en alguns casos, la </ETIQUETA>
no és necessària.
• Existeixen alguns atributs comuns a la majoria de les etiquetes i existeixen també
atributs que són específics d'una etiqueta determinada. Durant la creació dels
documents, introduïrem només l'atribut o atributs vàlids per a cada etiqueta i
introduirem només l'atribut o atributs que siguin necessaris per aconseguir l'aspecte o
el funcionament desitjat.
• Un document d'HTML té una estructura que sempre cal respectar. Per marcar
aquesta estructura s'utilitzen unes etiquetes específiques:

El document d'HTML s'escriu sempre entre aquestes dues etiquetes:

<HTML> document </HTML>

El document es divideix sempre en dues parts:
o La capçalera:
<HEAD> ... </HEAD>
La capçalera conté informació del document: el seu títol, quin tipus de
document és, en quina llengua està escrit, quines són les paraules claus, una
breu descripció del seu contingut,... La informació que hi ha dins de la
5

capçalera del document és utilitzada pel programa navegador, pels cercadors
de pàgines web...
o El cos:
<BODY> ... </BODY>
Dins del cos del document hi introduïrem i compaginarem tot allò que es vol
mostrar a la pàgina web: textos, imatges, gràfics, formularis,... mitjançant les
etiquetes necessàries i els seus atributs.

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

<HTML>
<HEAD>
...
</HEAD>
<BODY>
. . . (part visible del document en el navegador) . . .
</BODY>
</HTML>

• Dins de cada part hi corresponen unes etiquetes diferents:

o La capçalera conté tota la informació sobre el document:
El títol
fulls d'estil (CSS)
...
o 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 ordenades, ordenades, de definicions
línies horitzontals
imatges o gràfics
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.

6

El títol de la pàgina web
El títol del document que apareix a la finestra del nostre programa navegador s'escriu entre
aquestes dues etiquetes. Cal tenir en compte que alguns cercadors utilitzen el títol per indexar la
pàgina web en les seves bases de dades. És important posar títol a totes les pàgines (fins hi tot
encara que s'utilitzin marcs).

<TITLE> títol </TITLE>

<HTML>
<HEAD>
<TITLE>Manual HTML en català</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

El cos del document d'HTML
Les imatges
En el cos del document, dins d'una cel·la, dins d'una llista, dins d'un paràgraf o dins d'un enllaç 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="nom_fitxer" alt="text alternatiu" border="núm." width="amplada" height="alçada"
hspace="núm." vspace="núm." align="top|middle|bottom|left|right">
Atribut Valor Descripció
src nom_fitxer (localització i) nom del fitxer
alt text_alternatiu mostra el text_alternatiu quan el navegador no pot oferir
la imatge
border píxles mida del contorn ( border="0" sense contorn )
width píxels amplada de la imatge (en punts o en %) *
height píxels alçada de la imatge (en punts o en %) *
hspace píxels espai horitzontal (en punts) que separa la imatge de
qualsevol altre element**
vspace píxels espai vertical (en punts) que separa la imatge de
qualsevol altre element**

7

align top | middle | determina l'alineació del text que segueix la imatge**
bottom | left | right
(*) s'haurien d'especificar sempre aquests dos atributs (per conèixer les dimensions d'una imatge
s'han de consultar les seves Propietats)
(**) actualment s'aconsella utilitzar els fulls d'estil +.

<IMG border="0" src="navegador.jpg" alt="Navegador en català" width="88" height="33"
align="middle">text a la dreta

text a la dreta

Modificant els atributs de l'amplada (width) i l'alçada (height) provoquem un canvi en les
dimensions reals:

text a l'esquerra<IMG border="0" src="navegador.jpg" width="180" height="68">

text a l'esquerra

El cos del document d'HTML
En el cos del document hi inclourem i compaginarem tot el contingut que volem mostrar
a la pàgina web: text, imatges, gràfics, 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>

background nom_fitxer mostrarà una imatge de fons*
bgcolor #rrggbb | nom color del fons*
text #rrggbb | nom color del text. El color predeterminat és el negre*
link #rrggbb | nom color dels enllaços. El color predeterminat és el blau*
vlink #rrggbb | nom color dels enllaços visitats. El color predeterminat ésel púrpura*
alink #rrggbb | nom color dels enllaços actius. El color predeterminat és el
vermell*
Actualment, enlloc d'utlitzar aquests atributs, s'aconsella utilitzar els fulls d'estil .

Els colors estàndard

8

Per especificar el valor d'un atribut de color podem utilitzar el seu codi de color (precedit
pel símbol #) o, si és el cas, el seu nom estàndard. El codi de color es defineix amb tres
parelles de valors hexadecimals. La primera parella de valors indica la quantitat de
vermell (Red), la segona indica la quantitat de verd (Green) i la tercera la de blau (Blue).
informació: els colors en el web
Nom Codi
black #000000
teal #008080
blue #0000FF
navy #000080
lime #00FF00
white #FFFFFF
purple #800080
yellow #FFFF00
olive #808000
red #FF0000
maroon #800000
gray #808080
fuchsia #FF00FF
green #008000
silver #C0C0C0
aqua #00FFFF

<HTML>
<HEAD>
<TITLE>La meva pàgina
web</TITLE>
</HEAD>
<BODY bgcolor="#FFFF00" >
Aquesta és la meva primera pàgina
web!
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>La meva pàgina
web</TITLE>
</HEAD>
<BODY bgcolor="yellow" >
Aquesta és la meva segona pàgina
web!
</BODY>
</HTML>

Caràcters especials i espais
Per mostrar símbols i caràcters especials en els textos de la pàgina web cal utilitzar uns
codis especials (aquí en tens alguns):

Caràcter Codi Caràcter Codi

9

< < à à
> > À À
" " Á Á
Ø Ø â â
© © Â Â
® ® ä ä
« « Ä Ä
» » å å
± ± Å Å
÷ ÷ · ·
ƒ ƒ Ç Ç

<HTML>
<BODY>
®<<Manual d'HTML en català>>, des del 2001
per ©jo
</BODY>
</HTML>

Podem classificar 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  
1 2  3   4 Final.
1 2 3 4 Final.

Salts de línia
L'etiqueta <BR> (break) provoca un salt de línia. No necessita etiqueta de tancament.
salt de<BR>línia salt de línia

Estil del text
Les etiquetes següents marquen (defineixen) quin és l'estil del text que hi ha entre
l'etiqueta d'obertura i la de tancament.
Estil Codi d'exemple Resultat
<B> negreta </B> negreta
Negreta:
<STRONG> marcat </STRONG> marcat
<I> cursiva </I> cursiva
<EM> emfatitzat </EM> emfatitzat
Cursiva:
<DFN> definició </DFN> definició
<CITE> cita </CITE> cita
<U> subratllat </U> subratllat
Subratllat:
<INS> inserit </INS> inserit
<S> tatxat </S> Tatxat
Tatxat:
<DEL> eliminat </DEL> eliminat
<TT> text tipus teletip </TT> text tipus teletip
<KBD> teclat </KBD> teclat
Tipus teletip:
<SAMP> exemple </SAMP> exemple
<CODE> codi </CODE> codi
Subíndex: normal<SUB>subíndex</SUB> normalsubíndex

10

Superíndex: normal<SUP>superíndex</SUP> normalsuperíndex
Petit: <SMALL> petit </SMALL> petit
Gran: <BIG> gran </BIG> gran
Cita: <BLOCKQUOTE> cita </BLOCKQUOTE> cita

El text contingut en aquesta etiqueta BLOCKQUOTE apareixerà sagnat respecte els
marges esquerre i dret del document <U><I>Estem aprenent a crear documents d'</I>
<STRONG>Hyper Text Markup Language</STRONG></U> Estem aprenent a crear
documents d ' Hyper Text Markup Language
2<SUP>2</SUP>=2*2=<B>4</B><BR>5<SUP>3</SUP>=5*5*5=<B>125</B>
22=2*2=4
53=5*5*5=125

Tipus, mida i color de la lletra
La següent etiqueta defineix el tipus, la mida i el color del text que es troba entre
l'etiqueta
d'obertura i la de tancament. Actualment s'aconsella utilitzar els fulls d'estil +.
<FONT face="nom" size="núm. | ±núm." color="#rrggbb |
nom">text</FONT>
face nom tipus de lletra. Es poden posar varis tipus de lletres
separats per comes (,)
size núm. | ±núm. mida (del 1 al 7) Predeterminada la 3: +1 és 4; -1 és 2 ...
color #rrggbb | nom color del text

Noms de tipus de lletra:  Arial
 Arial Black
 Comic Sans MS
 Fixedsys
 System
 Times News Roman
 Helvetica
 Sans-Serif
 Verdana
 Terminal

<FONT face="Arial Black" size="5" color="red">text <U>Arial Black</U> de mida
<U>5</U> i en color <U>vermell</U></FONT>
text Arial Black de mida 5 i en color vermell
<FONT face="Times New Roman" size="7" color="#000000">text <U>Times New
Roman</U>de mida <U>7</U> i en color <U>negre</U> </FONT>
text Times New Roman de mida 7 i en color negre

Capçaleres
Les etiquetes que defineixen les capçaleres es poden utilitzar, per exemple, per marcar
el títol i/o els diferents subapartats que formen el document o simplement per a ressaltar
qualsevol text. Existeixen sis tipus de capçaleres, van de la 1 (la més gran) a la 6 (la més
11

petita), i és necessari utilitzar l'etiqueta de tancament per senyalar-ne el final.

<Hnúm.>capçalera</Hnúm.>
<FONT color="green" face="Arial, Helvetica, sans-serif" size="2">
<H2>Ausiàs March</H2>
<H3> Poemes:</H3>
<H4>SÍ COM LO TAUR SE'N VA FUIT PEL DESERT...</H4>
Sí com lo taur se'n va fuit pel desert <BR>
quan és sobrat per son semblant qui el força, <BR>
ne torna mai fins ha cobrada força <BR>
per destruir aquell qui l'ha desert, <BR>
tot enaixí em cové llunyar de vós, <BR>
car vostre gest mon esforç ha confús: <BR>
no tornaré fins del tot haja fus <BR>
la gran paor qui em tol ser delitós. </FONT>
Ausiàs March
Poemes:
SÍ COM LO TAUR SE'N VA FUIT PEL DESERT...
Sí com lo taur se'n va fuit pel desert
quan és sobrat per son semblant qui el força,
ne torna mai fins ha cobrada força
per destruir aquell qui l'ha desert,
tot enaixí em cové llunyar de vós,
car vostre gest mon esforç ha confús:
no tornaré fins del tot haja fus
la gran paor qui em tol ser delitós.

Paràgrafs

Un paràgraf és un bloc de text, delimitat per l'etiqueta d'obertura i per la de tancament,
que es
mostra separat de la resta per un salt de línia.

<P align="left | right | center | justify ">text</P>

align left | right | center |
justify alineació del text*
Actualment s'aconsella utilitzar els fulls d'estil .

<P align="center">text alineat<BR>al<BR>centre</P>
text alineat al centre

<H4>LO JORN HA POR DE PERDRE SA CLAROR...</H4>
<P>Lo jorn ha por de perdre sa claror: <BR>
quan ve la nit que expandeix ses tenebres, <BR>
pocs animals no cloen les palpebres <BR>
e los malalts creixen de llur dolor. <BR>
Los malfactors volgren tot l'any duràs, <BR>

12

perquè llurs mals haguessen cobriment; <BR>
mas jo, qui visc menys de par, en turment <BR>
e sens mal fer, volgra que tost passàs. </P>
<P>E d'altra part faç pus que si matàs <BR>
mil hòmens justs, menys d'alguna mercé, <BR>
car tots mos ginys jo solt per trair me. <BR>
E no cuideu que el jorn me n'excusàs, <BR>
ans en la nit treball rompent ma pensa <BR>
perquè en lo jorn lo traïment cometa: <BR>
por de morir ne de fer vida estreta <BR>
no em tol esforç per donar-me ofensa. </P>
<P>Plena de seny, mon enteniment pensa <BR>
com aptament lo llaç d'amor se meta. <BR>
Sens aturar pas, tenint via dreta, <BR>
vaig a la fi, si mercé no em defensa. </P>

LO JORN HA POR DE PERDRE SA CLAROR...
Lo jorn ha por de perdre sa claror:
quan ve la nit que expandeix ses tenebres,
pocs animals no cloen les palpebres
e los malalts creixen de llur dolor.
Los malfactors volgren tot l'any duràs,
perquè llurs mals haguessen cobriment;
mas jo, qui visc menys de par, en turment
e sens mal fer, volgra que tost passàs.
E d'altra part faç pus que si matàs
mil hòmens justs, menys d'alguna mercé,
car tots mos ginys jo solt per trair me.
E no cuideu que el jorn me n'excusàs,
ans en la nit treball rompent ma pensa
perquè en lo jorn lo traïment cometa:
por de morir ne de fer vida estreta
no em tol esforç per donar-me ofensa.
Plena de seny, mon enteniment pensa
com aptament lo llaç d'amor se meta.
Sens aturar pas, tenint via dreta,
vaig a la fi, si mercé no em defensa.

Text preformat

Aquesta etiqueta 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ífic.

<PRE> text </PRE>
<PRE><U><I>Estem aprenent a crear
documents d'</I> <STRONG>Hyper Text Markup
Language</STRONG></U></PRE>
<U><I>Estem aprenent a crear

13

documents d'</I> <STRONG>Hyper Text Markup Language</STRONG></U>

Línia horitzontal
La línia horitzontal s'acostuma a utilitzar per a dividir la pàgina en diferents apartats o
seccions.
No necessita l'etiqueta de tancament.
<HR align="left | right | center" noshade size="núm."
width="amplada">
align left | right | center |
justify alineació *
noshade línia sòlida, sense ombra, sense efecte 3D*
size núm. mida (en punts o %) de la línia*
width amplada amplada (en punts o %) de la línia*
Actualment s'aconsella utilitzar els fulls d'estil +.
<HR align="center" width="40%" size="15" color="blue" noshade>
<HR size="10" align="center" width="60%">

Agrupar elements: DIV i SPAN
S'utilitza l'etiqueta DIV per agrupar elements amb el mateix estil. Sempre hi ha un salt de
línia abans i després dels elements agrupats per aquesta etiqueta:

<DIV style="estil" id="identificació" class="classe"> elements </DIV>
L'etiqueta SPAN també serveix per agrupar elements que han de tenir el mateix estil
però sense forçar un salt de línia abans i després dels elements agrupats:
<SPAN style="estil" id="identificació" class="classe"> elements</SPAN>
<DIV style="word-spacing: 25px; text-align:center; font-size:24px">
Manual d'<SPAN style="color:red; font-weight:bold; font-size:36px">HTML</SPAN> en
català<BR>HTML i CSS </DIV>

Compaginar text i gràfics
Per poder compaginar correctament elements gràfics i textuals és necessari utilitzar les taules i/o
els fulls d'estil.

Per exemple, crearem una taula i inserirem els elements que corresponguin en cada cel·la.
Inserirem una imatge dins la cel·la A1, un peu de fotografia dins la cel·la A2 i la biografia dins la
cel·la B1+B2. Assignarem el valor 1 a l'atribut contorn de la taula (border="1") per poder veure'n
les cel·les:

14

Ausiàs March
Gandia, finals s. XIV? - València, 1459

Va ser cavaller de la cort d'Alfons el Magnànim. Es va
casar dues vegades, al 1437 amb Isabel Martorell
germana de Joanot Martorell però enviudà dos anys i
després i al 1443 es va casar amb Joana Escorna amb la
que va viure entre València i Gandia fins l'any 1454 en
que va tornar a enviudar. De cap d'aquests dos
matrimonis va tindre fills però de les seues aventures
amoroses nasqueren cinc fills bastards.La poesia
d'Ausiàs March és plena del conflicte cabdal de la seva
vida : el contrast i la contradicció entre les idees del
poeta sobre l'amor i la dona, preses del Dant i de la
filosofia tomista, i la seva vida real, plena de caigudes i
Ausiàs March de misèries morals. El resultat és el to desolat i
angoixat dels seus poemes. La seua obra consta de 128
poemes que classifiquem en quatre blocs : Cants
d'Amor, Cants de Mort, Cants Morals, i Cant Espiritual.
Utilitzar una imatge com a enllaç
Podem utilitzar una imatge o gràfic per a enllaçar d'un document d'HTML a un altre document,
per enllaçar amb un altre lloc web o per enllaçar amb un fitxer i iniciar la seva descàrrega...

Amb l'HTML és possible dividir una imatge o gràfic en diferents zones sensibles que, en fer clic
damunt d'elles, actuen com un enllaç (veure imatges sensibles, mapes sensibles a enllaços).

15

Les llistes
S'utilitzen per a representar elements en forma de llista. Existeixen tres tipus de llistes: les no
ordenades, les ordenades i les llistes de definicions. Podem inserir una llista dins d'una altra.

Llistes no ordenades i llistes ordenades
Les llistes no ordenades (Unordered List) es defineixen:

<UL type="disk|circle|square"> elements de la llista</UL>
square disk | circle | square indica el tipus de llista*

Les llistes ordenades(Ordered List):

<OL start="núm." type="A | a | I | i | 1"> elements de la llista
</OL>
indica el número que tindrà el primer element de la
start núm.
llista*
type A|a|I|i|1 indica el tipus de llista*

Cada element de la llista, tan en les no ordenades com en les ordenades, es defineix amb l'etiqueta
LI (List Item):

<LI> element de la llista </LI>

<UL type="square">
<LI>1r element</LI>
<LI>2n element</LI>
</UL>

• 1r element
• 2n element

<OL start="3" type="A">
<LI>1r element</LI>
<LI>2n element</LI>
</OL>

C. 1r element

16

D. 2n element

Llistes de definicions
Una llista de definicions (Definition List) es defineix:

<DL> elements de la llista </DL>

I els elements d'aquesta llista:

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

<DL>
<DT>terme 1</DT>
<DD>descripció terme 1</DD>
<DT>terme 2</DT>
<DD>descripció terme 2</DD>
</DL>

terme 1
descripció terme 1
terme 2
descripció terme 2

Recorda que en els elements de les llistes s'hi pot posar text, imatges, enllaços,... i fins i tot una
llista dins d'una altra (clica aquí per veure un exemple de llista amb tres nivells que s'utilitza com
a índex dels continguts del Manual > ).

formulari

Els formularis s'utilitzen per a 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, a adreces de correu
electrònic, a altres pàgines web....
Si voleu allotjar el vostre 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.

Estructura d'un formulari
<FORM>
<INPUT>
<TEXTAREA></TEXTAREA>

17

<SELECT><OPTION></SELECT>
<BUTTON></BUTTON>
</FORM>

<FORM action="URL del programa que processarà les dades" method="POST | GET"
name="nom_formulari" enctype="tipus_MIME" target="destí">
action URL localització i nom del fitxer (programa CGI, o PHP, o ASP, o
JSP, o...) que processarà les dades
method POST | GET mètode utilitzat per transmetre les dades
name nom_formulari identifica el formulari amb un nom (útil per a scripts)
enctype tipus_MIME 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 de dades
L'etiqueta <INPUT> defineix el tipus de camp d'entrada de dades que es vol utilitzar en el
formulari. Té uns atributs comuns a tots els tipus i d'altres especifics que depenen del type escollit.

<INPUT type="text | password | checkbox | radio | file | hidden | submit | image | reset"
name="nom_camp" value="valor_inicial">

Quadre d'atributs comuns:

type text | password | determina el tipus de camp d'entrada que es vol
checkbox | radio | utilitzar
file | hidden | submit
| image | reset
name nom_camp especifica un nom únic que identifica el camp
value valor_inicial especifica el valor per defecte que tindrà el camp
disabled inhabilita el camp. No es vàlid pels atributs de
type="hidden"

Entrada de text:

<INPUT type="text" name="nom_camp" value="valor_inicial" size="núm." maxlength="núm."
readonly disabled >

18

size núm. mida (en caràcters) de la finestreta d'introducció del text
maxlength núm. nombre màxim de caràcters que podran ser introduits en
el camp
readonly només de lectura: l'usuari no pot modificar el contingut
del camp de text

<INPUT type="text" size="20" value="Escriu aquí el teu nom" maxlength="25">

Contrasenya (password):

<INPUT type="password" name="nom_camp" value="valor_inicial" size="núm."
maxlength="núm." disabled >

<INPUT type="password" size="7" value="clau001" maxlength="7">

Quadre de verificació (checkbox):

<INPUT type="checkbox" name="nom_camp" value="valor_inicial" checked disabled
>
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

Conté el paràmetre checked No conté el paràmetre checked

Botó d'opció (radio button/option button):

<INPUT type="radio" name="nom_camp" value="valor_inicial" checked disabled
>

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

Conté el paràmetre checked No conté el paràmetre checked

Fitxer (file):
S'utilitza per penjar (upload) fitxers en el servidor (per exemple quan adjuntem un fitxer a un
correu electrònic web). És necessari afegir l'atribut enctype="multipart/form-data" i utilitzar el
mètode method="post" en l'etiqueta FORM.

<INPUT type="file" name="nom_camp" size="núm." disabled
>

<INPUT type="file" name="penjar_upload" size="35">

19

Ocult (hidden):
Aquest tipus de camp no és visible i no pot ser modificat pels usuaris de la pàgina web.

<INPUT type="hidden" name="nom_camp"
value="valor">

Trametre (submit):
Mostra un botó d'enviament que en fer clic realitza l'acció definida en l'atribut action de l'etiqueta
<FORM>.

<INPUT type="submit" value="missatge" disabled
>
value missatge missatge que es mostra en el botó

<INPUT type="submit" value="Envia les dades">

Reiniciar (reset):
Mostra un botó que en fer clic reinicia els camps del formulari.

<INPUT type="reset" value="missatge" disabled
>

<INPUT type="reset" value="Esborra les dades">

Imatge (image):

<INPUT type="image" src="URL de la imatge" name="nom_camp" disabled
>
src URL de la imatge localització i nom del fitxer

<INPUT type="image" value="Envia" src="disc.gif" width="52" height="32">

Entrada de dades en un quadre de text
<TEXTAREA name="nom_quadre_text" rows="número" cols="número" readonly disabled >
contingut per defecte </TEXTAREA>
name nom_quadre_text especifica un nom únic per al quadre de text
rows número número de files
cols número número de columnes
readonly només de lectura: l'usuari no pot modificar el contingut
del quadre de text
disabled inhabilita el quadre de text
contingut per valor per defecte que es mostra dins del quadre de text
defecte

20

<TEXTAREA name="comentaris" rows="3" cols="10" readonly >
El contingut per defecte s'escriu entre les dues etiquetes
</TEXTAREA>

El contingut per defecte s'escriu entre les dues etiquetes

Entrada de dades mitjançant camps de selecció
<SELECT name="nom_variable" multiple size="núm." disabled
>
<OPTION value="valor" selected>text del camp
</SELECT>
name nom_variable especifica un nom únic de la variable que tindrà com a valor
el/s camp/s seleccionat/s per l'usuari
size núm. número de camps de selecció visibles
multiple es pot seleccionar més d'una opció
value valor especifica el valor del camp
selected selecciona una opció com a predeterminada
disabled inhabilita el camp de selecció
text del camp text que es mostra en el camp de selecció

<SELECT name="seleccio">
<OPTION value="1">Opció 1
<OPTGROUP>
<OPTION>Opció 1.A</OPTION>
<OPTION>Opció 1.B</OPTION>
</OPTGROUP>
<OPTION selected value="2">Opció 2
<OPTGROUP>
<OPTION>Opció 2.B</OPTION>
<OPTION>Opció 2.C</OPTION>
</OPTGROUP>
<OPTGROUP>
</OPTGROUP>
</SELECT>

Opció 1 Opció 1.A Opció 1.B Opció 2 Opció 2.A Opció 2.B Opció 2.C Opció 3Opció 4 Opció
4.A

<SELECT name="seleccio" multiple size="3">

21

</SELECT>

Opció 1 Opció 2 Opció 3 Opció 4 Opció 5

Botons
Defineix un botó dins del qual hi podem inserir text i/o imatges.

<BUTTON name="nom_botó" value="valor_inicial" type="submit|button|reset" disabled > ...
</BUTTON>
name nom_botó nom únic que identifica el botó
value valor_inicial especifica el valor inicial
type submit | button | reset defineix el tipus de botó
disabled inhabilita el botó

<FORM action="mailto:el.meu@correu.electronic" method="POST" enctype="text/plain" >
Nom: <INPUT type="text" name="nom"><BR>
<INPUT type="radio" name="sexe" value="Home">Home<BR>
<INPUT type="radio" name="sexe" value="Dona">Dona<BR>
<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>

Nom:
Home
Dona

Envia Esborra

Formulari d'exemple
El següent formulari s'envia a un fitxer que conté codi font en PHP que recull les dades del
formulari, les processa i retorna un document d'HTML on es mostren els valors rebuts. Omple el
formulari, envia'l i veuràs en un altre document les dades rebudes:

<FORM action="mostra_dades_formulari.php" method="POST">
Nom:<INPUT type="text" name="nom" value="escriu el teu nom" size="30"
maxlenght="40"><BR>

22

escriu el teu
Nom:

<INPUT type="radio" name="sexe" value="D" id="opcio_dona">
<LABEL for="opcio_dona">Dona</LABEL>
<INPUT type="radio" name="sexe" value="H" id="opcio_home">
<LABEL for="opcio_home">Home</LABEL>
<BR>

Dona Home

<INPUT type="checkbox" name="programo" value="si">Jo escric el codi HTML<BR>
<INPUT type="checkbox" name="programes" value="si">Utilitzo programes automàtics com el
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 com el Dreamweaver
Controlo sempre el codi que genera automàticament el programa

Posa nota al manual<SELECT name="puntuacio">
<option value="0">0
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
</SELECT>

0
Posa nota al manual

<TEXTAREA name="comentari" rows="5" cols="15">Escriu els teus
comentaris</TEXTAREA>Comentaris

Escriu els teus comentaris

Comentaris

<INPUT type="hidden" name="origen" value="Les dades provenen del formulari d'exemple del
document formularis.html">

23

Accions:<INPUT type="submit" value="Envia"><INPUT type="reset" value="Esborra">

Envia Esborra
Accions:

</FORM>

24

Imatges sensibles, mapes sensibles
Es parla d'imatges sensibles o mapes sensibles quan ens referim a una imatge que té diferents
zones sensibles que, quan fem clic damunt d'elles, enllacen amb altres documents o parts del
document. Per fer sensible una imatge cal crear un mapa i aplicar-lo a la imatge.
Crearem un mapa amb un nom i definirem les diferents àrees i els seus respectius enllaços.

<MAP name="nom_del_mapa">
<AREA shape="tipus" coords="coordenades" href="URL"
target="destí">
</MAP>
name nom_del_mapa el nom del mapa
shape rect forma de l'àrea
rectangle
circ
circle
poly
polygon
coords si shape="rect": definició de les coordenades
coords="x_esquerra,
y_esquerra, x_dreta, y_dreta"
si shape="circ":
coords="x_centre, y_centre,
radi"
si shape="poly":
coords="x1,y1,x2,y2,..,xn,yn"
href URL (localització i) nom del fitxer
target destí nom del marc o finestra on es
mostrarà

<MAP name="mapa_menu">
<AREA shape="rect" coords="14,14,76,37" href="index.html" target="_top" alt="Inici del
Manual">
<AREA shape="rect" coords="110,13,187,38" href="manual.html" target="_top" alt="Manual
d'HTML">
<AREA shape="rect" coords="231,16,285,39" href="css/manual_css.html" target="_top"
alt="Manual de CSS">
</MAP>

Per acabar, cal aplicar aquest mapa a la imatge incloent un nou atribut a l'etiqueta IMG, l'atribut
usemap:

<IMG src="imatge" usemap="#nom_del_mapa">

<P align="center"><IMG src="imatges/mnuimatge.gif" width="303" height="56" border="0"

25

usemap="#mapa_menu" alt="Selecciona una opció"></P>

Els valors de les coordenades es poden determinar amb algun programa com el "mapedit" o
directament utilitzant un programa de dibuix o de manipulació d'imatges que situant el cursor
damunt de la imatge ens mostri les coordenades.

Els frames
Podem dividir la finestra del navegador en varis marcs i mostrar un document diferent en cada
marc.

Estructura d'un document HTML amb marcs (FRAMES):
Per dividir la finestra del navegador en marcs crearem un document amb una estructura diferent a
la d'un document normal on únicament hi especificarem com es vol dividir la finestra del
navegador i quins documents d'HTML es carregaran (mostraran) en cada divisió o marc.
L'estructura d'aquest document és:

<HTML>
<HEAD>
...
</HEAD>
<FRAMESET>
<FRAME>
<NOFRAMES>
<BODY>
...
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

Especificar els marcs
S'utilitza aquesta etiqueta per indicar com i quantes vegades s'ha de dividir la finestra del
navegador:

<FRAMESET rows="llista de files"
<FRAMESET cols="llista de files"
rows píxels | % | * indica la grandària (en punts, % o *) de cada columna amb la

26

que es vol dividir la finestra separades per comes
cols píxels | % | * indica la grandària (en punts, % o *) de cada fila amb la que es
vol dividir la finestra separantdes per comes
Escollirem un dels dos atributs depenent de si volem dividir la finestra del navegador en files
(rows) o en columnes (cols).
Definició de cada marc
Segons el nombre de marcs que hem espeficicat amb l'atribut rows o cols de l'etiqueta
<FRAMESET> haurem d'utilitzar una etiqueta <FRAME> per definir cada un dels marcs.

<FRAME src="URL" name="nom" marginwidth="núm." marginheight="núm."
frameborder="núm." scrolling="yes|no|auto" noresize >
src URL localització i nom del document d'HTML que ha d'ocupar el marc
name nom_marc identifica amb un nom únic aquest marc. Necessari per a l'atribut target
dels enllaços.
marginwidth píxels marges (en punts) esquerre i dret del marc
marginheight píxels marges (en punts) superior i inferior del marc
frameborder 1 | 0 especifica si s'ha de mostrar o no el contorn
scrolling yes | no | barres de desplaçament: yes=sempre no=mai auto=quan són
auto necessàries
noresize impedeix que els usuaris de la pàgina web puguin redimensionar el
marc

Exemple d'aquesta pàgina amb marcs: fitxer 'manual.html'

<HTML>
<HEAD>
<TITLE>Manual d'HTML en català</TITLE>
</HEAD>

<FRAMESET cols="*,21%">

Crea dos marcs en forma de columnes: la de la dreta ocupa el 21% de la finestra del
navegador i la de l'esquerra n'ocupa la resta (*).

<FRAME name="pissarra" src="ppal.html" marginwidth="0" marginheight="0"
frameborder="0" scrolling="auto" noresize>

Marc de l'esquerra anomenat 'pissarra': document 'ppal.html' / sense marges / les
Barres de desplaçament apareixeran en el cas que siguin necessàries / els usuaris no
poden redimensionar aquest marc

<FRAME name="menu" src="menu.html" marginwidth="0" marginheight="0"
frameborder="0" scrolling="auto" noresize>

Marc de la dreta anomenat 'menu': document 'menu.html' / sense marges / les Barres
de desplaçament apareixeran en el cas que siguin necessàries / els usuaris no poden

27

redimensionar aquest marc

<NOFRAMES>
<BODY>
<CENTER><H3>PÀGINA WEB AMB MARCS. ACTUALITZA'T EL
PROGRAMA NAVEGADOR!!!</H3></CENTER>
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>

Veure l'exemple (sense els documents HTML)
Veure l'exemple

Si volguessim dividir algun dels marcs definits per una etiqueta <FRAMESET> només cal afegir
una altra etiqueta <FRAMESET> dins d'aquesta:

<FRAMESET cols="*,21%">
<FRAME name="pissarra"> 
<FRAMESET rows="50%,*"> 
<FRAME name="menuA">
<FRAME name="menuB">
</FRAMESET>
</FRAMESET>

En aquest cas, el marc definit per la primera etiqueta <FRAMESET> com a columna
de la dreta (el de 21%) el dividiríem en dues files (rows de 50%). Aquests marcs
s'anomenarien 'menuA' i 'menuB'

Veure l'exemple

Alguns exemples més...:

<HTML> <HTML>
<FRAMESET cols="100,200,*"> <FRAMESET rows="25%,*,25%">
<FRAME src="blau.html"> <FRAME src="blau.html">
<FRAME src="vermell.html"> <FRAME src="vermell.html">
<FRAME src="groc.html"> <FRAME src="groc.html">
</FRAMESET> </FRAMESET>
</HTML> </HTML>

Veure l'exemple Veure l'exemple
<HTML> <HTML>
<FRAMESET rows="50,*"> <FRAMESET cols="100,200,*">
<FRAME src="blau.html"> <FRAME src="blau.html">
<FRAMESET cols="150,*"> <FRAME src="vermell.html">
<FRAME src="vermell.html"> <FRAMESET rows="10%,*">
<FRAME src="groc.html"> <FRAME src="groc.html">
</FRAMESET> <FRAMESET cols="30%,*,30%">
</FRAMESET> <FRAME src="verd.html">

28

</HTML> <FRAME src="blau.html">
<FRAME src="vermell.html">
</FRAMESET>
</FRAMESET>
Veure l'exemple </FRAMESET>
</HTML>

Veure l'exemple
Els enllaços i l'atribut target
Per indicar al programa navegador en quin dels marcs s'ha de mostrar el document cridat des d'un
enllaç, ho fem afegint l'atribut target a l'enllaç. Si una etiqueta d'enllaç no té definit l'atribut target,
el document es mostrarà en el mateix marc que conté aquest enllaç.

target _self carregarà el document en el mateix marc que conté
l'enllaç
_parent carregarà el document en el marc primari
_top ocuparà tota la finestra, eliminant tots els marcs
nom_marc carregarà el document en el marc o FRAME anomenat
nom_marc

<A href="exemples/groc.html" target="menu" > Veure el document 'groc.html' en el marc de la
dreta</A> (marc anomenat 'menu')

Veure el document 'groc.html' en el marc de la dreta (marc anomenat 'menu')

<A href="menu.html" target="menu">Recupera el 'menu.html' en el marc de la dreta</A>

Recupera el 'menu.html' en el marc de la dreta

NOFRAMES
Aquesta etiqueta permet escriure el codi que executaran només aquells navegadors que no
suporten els frames. Entre les etiquetes <NOFRAMES> i </NOFRAMES> s'hi escriu el cos
(BODY) del document. Actualment no cal perdre el temps amb aquesta possibilitat.

Marcs interns
L'etiqueta IFRAME permet inserir un marc dins del cos d'un document. Mostrar un document dins
del cos d'un altre.

<IFRAME src="URL" name="nom" marginwidth="núm." marginheight="núm."
frameborder="núm." scrolling="yes|no|auto" width="amplada" height="alçada"></IFRAME>
src URL localització i nom del document d'HTML que s'ha de
mostrar en el marc intern

29

name nom_marc indentifica amb un nom únic aquest marc intern. Necessari
per a l'atribut target dels enllaços.
marginwidth píxels marges (en punts) esquerre i dret del marc
marginheight píxels marges (en punts) superior i inferior del marc
frameborder 1|0 especifica si s'ha de mostrar o no el contorn
scrolling yes | no | auto barres de desplaçament: yes=sempre no=mai auto=quan són
necessàries
width amplada indica l'amplada del marc intern (en punts o en % en funció
amb l'amplada de la finestra del navegador)
height alçada indica l'alçada del marc intern (en punts o en % en funció
amb l'alçada de la finestra del navegador)

<IFRAME src="ppal.html" frameborder="1" height="200" width="550"
scrolling="yes"></IFRAME>

Podem inserir sons, música de fons, vídeos o qualsevol altre fitxer que suporti el programa navegador o del que

Inserir multimèdia en una pàgina web
<OBJECT align="left|right|top|bottom" archive="URL" border"píxels" classid="classe|URL"
codebase="URL" codetype="tipus_MIME" data="URL" declare="declare" height="píxels"
hspace="píxels" name="nom_únic" standby="text" type="tipus_MIME" usemap="URL"
vspace="píxels" width="píxels"> text </OBJECT>
Atribut Valors Descripció
align left|right|top|bottom alineació del text al voltant de l'element
archive URL llistat amb l'ubicació dels fitxers necessaris separats per un
espai
border píxels mida del contorn
classid id_classe|URL especifica la id_classe o la seva URL
codebase URL especifica la ubicació del connector (plugin) necessari perquè
el navegador pugui el descarregar automàticament en el cas
que no el tingui instal·lat
codetype tipus_MIME tipus_MIME
data URL URL
declare declare
height píxels alçada
hspace píxels espai horitzontal entre l'objecte i els elements del seu voltant
name nom_únic identifica l'element amb un nom_únic. Utilitzat pels scripts.
standby text mostra el text mentre l'objecte s'està carregant
type tipus_MIME tipus_MIME
usemap URL
vspace píxels espai vertical entre l'objecte i els elements del seu voltant
width píxels amplada
Inserir Flash
30

El primer que cal saber és que Netscape utilitza l'etiqueta <OBJECT> i InternetExplorer utilitza

<EMBED>. Perquè sigui possible veure el Flash amb els dos navegadors introduirem el codi de la

següent manera:

<OBJECT classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" width="amplada"
height="alçada"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=
6,0,79,0">
<PARAM name="movie" value="nom_fitxer_flash.swf">
<PARAM name="quality" value="high">
<PARAM name="LOOP" value="true | false">
<PARAM name="PLAY" value="true | false">
<EMBED src="nom_fitxer_flash.swf" type="application/x-shockwave-flash"
width="amplada" height="alçada" QUALITY="high"
pluginspage="http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Ver
sion=ShockwaveFlash&Lang=Spanish&P5_Language=Spanish">
</EMBED>
</OBJECT>

Inserir un applet de Java
<APPLET code="nom_applet.class" width="núm."
height="núm.">
<PARAM name="nom" value="valor">
...
</APPLET>

31

Integrar estil a una etiqueta determinada
Es tracta d'integrar l'estil dins de l'etiqueta mitjançant l'atribut style:

<ETIQUETA style="propietat_1: valor; ... ; propietat_n:
valor">

A aquesta ETIQUETA se li poden aplicar de una a n propietats, segons convingui. S'indica el
nom de la propietat seguida de dos punts (:) i el valor desitjat. Les diferents propietats i els seus
valors es separen mitjançant un punt i coma (;).

Inserir estil al document
Es poden definir els estils necessaris per a un document inserint-los dins la capçalera entre les
etiquetes <STYLE> i </STYLE>.

Es pot definir un estil per cada etiqueta:

<STYLE type="text/css">
ETIQUETA_1 { propietat_1: valor; ... ; propietat_n:valor }
ETIQUETA_2 {propietat_1: valor; ... ; propietat_n: valor
}
</STYLE>

o aplicar el mateix estil a diferents etiquetes (separant-les per comes):

ETIQUETA_1, ... , ETIQUETA_n { propietat_1: valor; ... ; propietat_n: valor
}
</STYLE>

Aquests estils s'aplicaran a tot el document excepte en aquelles etiquetes que tinguin l'estil
integrat.

També es poden crear classes:

.classe { propietat_1: valor; ... ; propietat_n: valor }
</STYLE>

indicant a quina classe pertany una etiqueta se li aplica l'estil definit en la classe:

<ETIQUETA
class="classe">

32

Text preformat
Aquesta etiqueta 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ífic.

<PRE> text </PRE>

<PRE><U><I>Estem aprenent a crear
documents d'</I> <STRONG>Hyper Text Markup
Language</STRONG></U></PRE>

<U><I>Estem aprenent a crear
documents d'</I> <STRONG>Hyper Text Markup Language</STRONG></U>
Les etiquetes META
Les etiquetes META contenen informació del document que és utilitzada per certs cercadors
alhora d'indexar-lo automàticament:

<META name="propietat"
content="valor">
Propietat Valor Descripció
title títol el títol del document
keywords paraula_1, escull unes quantes paraules claus i anomena-les separades per
paraula_2, ..., comes. Fes-ho per odre de més descriptiva a menys. No convé
paraula_n abusar-ne!
description descripció descripció breu i precisa del contingut de la pàgina web
author autor nom de l'autor
distribution global | local
robots all | none | all: indexatge de tots els fitxers
index | follow | none: no indexar cap fitxer
index,follow | 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
index,follow: la pàgina pot ser indexada i el robot pot seguir els
enllaços cap a altres pàgines
noindex,nofollow: la pàgina no pot ser indexada i el robot no
pot seguir els enllaços
...
language llenguatge del document: ca - català es - espanyol en -
ca | es | en | ...
anglès ...

Les següents etiquetes contenen informació per al programa navegador:

<META http-equiv="propietat"
content="valor">
Propietat Valor Descripció

33

el llenguatge del document: ca - català es - espanyol en -
Content-Language ca | es | en | ...
anglès ...
refresh número_segons; indica al programa navegador el document nou_URL que ha
URL=nou_URL de substituir automàticament l'actual transcorreguts els
número_segons especificats. S'utilitza sovint per
redireccionar els usuaris quan una pàgina web ha canviat el
seu URL.
Pragma no-cahce impedeix que el programa navegador desi la pàgina web en
la memòria cau del disc de l'usuari. Sempre que es vulgui
veure aquesta pàgina web caldrà descarregar-la del servidor
de pàgines web
Cache-control no-cache, no- impedeix que el programa navegador desi la pàgina web en
store, must- la memòria cau del disc de l'usuari. Sempre que es vulgui
revalidate veure aquesta pàgina web caldrà descarregar-la del servidor
de pàgines web

<META http-equiv="refresh" content="5;URL=http://www.softcatala.org/">

BASE
Amb aquesta etiqueta i amb l'atribut href s'indica on estan localitzats tots els fitxers (imatges,
sons, altres documents HTML...) que fa referència (estan vinculats a) el document. I amb l'atribut
target s'indica on s'han de mostrar/carregar els documents o fitxers als que fan referència els
enllaços (links) del document.

<BASE href="URL"
target="destí">
href URL indica la URL base
target _blank indica en quin marc o finstra es mostraran els
_parent documents dels enllaços
_self
_top
nom_del_marc

Quan es volen utilitzar URLs relatius i els fitxers que fa referència (o estan vinculats a) el
document actual es troben en un URL diferent al d'aquest, és necessari utilitzar aquesta
etiqueta indicant l'atribut href amb l'URL absoluta d'on estan situats aquests fitxers.
Quan la majoria o tots els enllaços que hi ha en un document tenen el mateix valor per
l'atribut target, és a dir, que han de mostrar el document al que fa referència cada enllaç en
un mateix marc o finestra, podem utilitzar l'etiqueta amb aquest atribut per indicar un destí
predeterminat per a tots els enllaços del document. En aquest cas, només caldrà especificar
l'atribut target en aquells enllaços en que tingui un altre valor.

Fulls d'estil externs
Els fulls d'estil es poden desar separats del document d'HTML en un fitxer de text sense format

34

extern facilita la feina alhora de realitzar algun canvi en l'aparença dels documents: modificant
només els estils definits dins del fitxer es canvia l'aparença de tot el lloc web en un moment, sense
necessitat de modificar pàgina per pàgina, etiqueta per etiqueta i atribut per atribut.

Per vincular el document d'HTML amb el fitxer extern que conté definits els estils s'inclou aquesta
etiqueta dins de la capçalera del document:

<LINK rel="stylesheet" type="text/css"
href="nom_fitxer.css">

Dins d'un mateix document d'HTML es poden aplicar els fulls d'estil com sigui convenient:
un mateix document pot estar vinculat a un (o més) fulls d'estil extern i tenir inserit un full
d'estil a la capçalera a més a més de tenir estils integrats en diferents etiquetes.

Fulls d'estil en cascada (CSS)
Els CSS (Cascading Style Sheet) són un conjunt de propietats que permeten millorar la
presentació de les pàgines web i facilitar-ne la creació. Es pot donar estil a una o varies etiquetes
(elements) d'HTML i definir l'aparença de la pàgina web en la pantalla, o impresa. Els fulls d'estil
prenen el relleu a etiquetes i atributs HTML alhora de donar format a les dades (tipus de lletra,
mida, color, alineació,...)

Existeixen diferents maneres de donar estil a un document:

Són unes propietats que permeten modificar l'aparença del document i la dels diferents elements:
definir els colors, l'alineació, els tipus de lletra... del document, dels enllaços, dels paràgrafs, de
les taules, de les llistes...

Aquestes propietats es poden definir dins de la capçalera del document entre aquestes dues
etiquetes:

<STYLE type="text/css"> propietats CSS
</STYLE>

També es pot definir l'estil dins d'una etiqueta d'HTML, afegint-lo com un atribut:

<ETIQUETA style="estil
">

La millor opció és vincular el document d'HTML a un full d'estil contingut (escrit) en un fitxer de
text extern:

<LINK rel="stylesheet" type="text/css"
href="nom_del_full_d'estil.css">

El fet de vincular tots els documents del lloc web a un mateix full d'estil permet que,
modificant el fitxer de text que conté el full d'estil, canviem tota l'aparença de la web
en un moment, sense haver de modificar document per document, etiqueta per

35

...fes clic aquí per veure aquest document sense el seu Full d'estil >
També es poden crear varis fulls d'estil en diferents fitxers de text i vincular cada
document d'HTML al fitxer o fitxers que siguin necessaris.

JavaScript
És un llenguatge creat per Netscape per complementar el llenguatge HTML. El seu codi es pot
incloure dins del document d'HTML.
Els scripts de Javascript s'executen en i pel programa navegador del client (en el teu; sempre i
quant disposis d'un navegador compatible amb aquest llenguatge, actualment el 100% dels
navegadors el suporten). Un script es pot executar de dues maneres:
- directament (a mesura que el programa navegador llegeix el document HTML i el script executa
les ordres d'aquest)
- com a resposta a un esdeveniment (resposta a una acció de l'usuari sobre la pàgina web: prémer
un botó, seleccionar una opció, passar el ratolí per sobre de...).
Amb Javascript podem crear pàgines web amb continguts dinàmics, textos en moviment, canvi de
colors o d'imatges, interacció amb l'usuari de la pàgina web, comprovació de formularis abans de
ser enviats...

Aquí tens un script per mostrar la data actual a la pàgina web (selecciona, copia i enganxa'l en el
codi font del teu document d'HTML):

<SCRIPT>
mesos=new Array("de gener",
"de febrer", "de març", "d'abril",
"de maig", "de juny", "de

Dimecres, 29 de setembre del 2010

El següent script canvia la imatge quan el ratolí es situa al damunt seu:

<script language="javascript">
<!--
imatge1=new Image()
imatge1.src="carpeta.gif"

És un llenguatge creat per Netscape per amb l'intenció de complementar el llenguatge HTML. El
seu codi s'inclou dins del propi codi HTML i és interpretat i executat en i pel programa navegador.

* * * Manual en període d'actualització * * *

Inserir JavaScript en un document d'HTML

Dins d'un document d'HTML s'hi pot inserir codi JavaScript de tres maneres diferents:

1. Entre les etiquetes <SCRIPT> i </SCRIPT> tan en la capçalera com en el cos del document i el
nombre de vegades que sigui necessari:

<SCRIPT language="JavaScript"> script </SCRIPT>

36

script codi del JavaScript

2. Vinculant el document d'HTML a un fitxer: fitxer_extern.js (fitxer de text que conté el codi).
Per exemple, quan diferents documents HTML han d'utilitzar un mateix codi JavaScript podem
crear un fitxer amb aquest codi per evitar haver-lo de copiar en cada document.

<SCRIPT language="JavaScript" src="fitxer_extern.js" > </SCRIPT>
src="fitxer_extern.js" URL del fitxer que conté el codi

3. Integrant-lo dins d'una etiqueta d'HTML: per controlar diferents esdeveniments. Per exemple:

<INPUT type="submit" value="Fes clic!" OnClick="alert('Has fet clic al botó!');">

<IMG border="0" src="../imatges/tux.gif" width="88" height="33" OnMouseOut="alert('Has
passat per damunt la imatge!!!');">

PHP
Llenguatge creat per Rasmus Lerdorf, de codi font obert (està escrit en llenguatge C), gratuït,
escrit especialment per a Web, multiplataforma (Unix, Linux, Windows 98 - 2000 - XP - NT,
Mac, ...), s'executa en el servidor Web, amb suport per a diferents servidors Web (Apache,
Microsoft Internet Information Server, Personal Web Server, ...).

Amb el PHP es poden consultar/inserir/esborrar/modificar registres de diferents sistemes gestors
de base de dades, processar formularis, enviar correus electrònics, crear fitxers, generar
documents XHTML, XML, PDF, fitxers d'imatges, pel·lícules Flash,... conté una gran varietat de
llibreries gratuïtes per realitzar aquestes i altres funcions.

Amb PHP es poden crear enquestes, fòrums, agendes, clients de correu electrònic,
descarregar i pujar fitxers a un servidor, weblogs, ...

Bibliografia:
Tot aquesta informació es recopilada en data 29-09/2010 de les pàgines web

http://ca.wikipedia.org/wiki/Web_2.0

http://www.imaginaserveis.com/manuals/javascript/manual_js.html

Per més informació, consultar o realitzar algunes proves podeu dirigir-vos a :

http://www.w3schools.com/html/default.asp

37

codi Html osanroma

Recomendados

Recomendados

Más contenido relacionado

Similar a codi Html osanroma

Similar a codi Html osanroma (7)

Más de Pedro Vilas

Más de Pedro Vilas (18)

codi Html osanroma