Você está na página 1de 15

Llenguatge HTML

Els documents HTML tenen un format ASCII i es poden crear amb qualsevol editor
de text. Per especificar laparena de la informaci sutilitzen uns codis especials
que sidentifiquen amb els smbols < i >, per exemple <TITLE>. Els codis
normalment es troben per parelles delimitant el text sobre el que surten efecte.
Aix per a indicar un ttol tindrem:
<TITLE> Aix&ograve s un t&iacutetol </TITLE>
El codi que tanca la parella inclou el smbol / per identificar-lo.
El document HTML est format per dos parts, la capalera i el cos i ambds
delimitats pel codi <HMTL> ... </HTML> per a indicar al client que el document
s un fitxer daquest tipus.
La capalera <HEAD> ... </HEAD> cont informaci relativa
al document que no afecta a laparena del mateix en el
navegador, per exemple el ttol de la pgina.
El cos <BODY> ... </BODY> cont tota la informaci visible
que volem que contingui el document. La informaci del
document pot tenir diferents estils mentre que el ttol no. Els
estils aplicables al text del cos pot ser fsic o lgic. Lestil fsic
especifica exactament com sha de presentar el text mentre
que lestil lgic depn de la semntica (cada visor pot tenir una
configuraci diferent)

Formats fsics
Negreta <B> ... </B>
Cursiva <I> ... </I>

Teletipus <TT> ... </TT>


Tatxat <Strike> ... </Strike>

Formats lgics
Cita <CITE> ... </CITE>
Definici <DFN> ... </DFN>
Gruix <STRONG> ... </STRONG>

Codi <CODE> ... </CODE>


mfasi <EM> ... </EM>
Clau <KEY> ... </KEY>

Capalera (1..6) <Hn> ... </Hn> on n s el nmero de la capalera.


Les capaleres poden quedar alineades segon un parmetre de la forma:
<H1 ALIGN=CENTER> ..... </H1>
El text est definit per pargrafs i delimitadors pels codis <P> ... </P>
Cada <P> indica un salt de lnia i insereix una lnia en blanc.
Lnies de regles
Les lnies de regles serveixen per a separar seccions de text, la forma de definirla s mitjanant el codi <HR>. Possibles modificadors sn:
ALIGN Indica el tipus dalineaci, centrat, a la dreta o esquerra.
WIDTH Determina lamplada de la lnia.
SIZE Indica la mida de la lnia.

Blocs de text
Els blocs de text sn pargrafs que estan sangrats a la dreta, per fer-ho sutilitza
el codi <BLOCKQUOTE> ... </BLOCKQUOTE>

Text preformatat
Aquest tipus de text s el que es mostra
amb el mateix format que lescrivim,
mantenint les mateixes caracterstiques
de disposici que shan indicat a lhora
de generar-lo. s molt til quan volem
crear taules o imatges predefinides.
Amb aquest tipus de text, encara que el
navegador canvi la seva amplada o
llargada, mantindr el mateix format.

Comentaris
Tamb es poden incloure comentaris a les pgines WEB per tal de millorar la
seva comprensi, els codis que identifiquen als comentaris sn:

<!-- Comentari -->

Carcters especials i seqncies descapada


Hi ha carcters especials que no es poden incloure al text HTML ja que formen
part dels codis daquest llenguatge, com per exemple < o >, per aquests
carcters i daltres nhi ha uns codis (entitats) especials:
&lt - < &gt - >

&amp - &

&quot

&copy

&reg

&ntilde -

&Ntilde

Per a indicar els accents sutilitza la forma &xacute on x s la vocal que volem
accentuar, en majscules o minscules segons el cas, amb accent tancat. Aix
per exemple per tenir seria &aacute. Pel contrari per laccent obert s de la
forma &xgrave, aix la vocal seria &Egrave.

Enlla HTML a altres documents


La potncia real del llenguatge HTML s la utilitzaci de lespai WWW (World
Wide Web) per a relacionar diferents pgines WEB i aconseguir un accs directe
des de qualsevol part del mn als documents que ens interessin o que fan
referncia a elements concrets de la nostra pgina.
Hi han dos tipus denlla, enlla de referncia i enlla nominal.
Lenlla de referncia indica un altre pgina WEB que pot estar al mateix
servidor o a un altre diferent.
Lenlla nominal especifica una part de la pgina WEB.
En ambds casos la referncia vol dir que saltem a aquell document o a aquella
pgina que indiquem. Per especificar la referncia es necessari ls dels codis
<A> . </A> anomenats ancora, i que sencarreguen de delimitar qu fa la
referncia i on sest referenciant.
Per exemple:
<A HREF=Document.Html>Enlla</A>
fa que al navegar surti : enlla
( El fet de que surti subratllat vol dir que s una referncia a un altre punt o
pgina )

Quan especifiquem el cam per arribar a la pgina normalment es millor fer un


accs relatiu a la nostra posici, pujant o baixant directoris, ja que no sabem on
quedar ubicada realment al servidor.
A lexemple anterior lenlla ha sigut de referncia, a un altre pgina, quan volem
que lenlla sigui a un punt de la pgina, s a dir, nominal, primer haurem
dhaver indicat on est aquest punt, aix es fa fent servir de nou els codis <A>
. </A> per amb la segent estructura:
<A NAME=Nom>Punt darribada</A>
on Nom es el nom que volem donar al punt darribada, quan vulguem fer el salt
haurem dindicar-lo de la segent manera:
<A HREF=#Nom>Enlla</A>
Ara el cam passa a ser el Nom i sha de incloure el smbol # per a especificar
que s un enlla nominal.
A la versi HTML 3 la referncia pot ser a qualsevol element de la pgina, una
imatge, una lnia de regla, etc. per poder fer-ho sha dafegir latribut ID= seguit
del nom per referenciar-lo a la identificaci de lelement, per exemple:
<HR SIZE=30 ALIGN=CENTER ID=Nom>
Per ltim indicar que tamb es poden referenciar fitxers que no siguin pgines
WEB i fins i tot un altre tipus de protocol, per exemple:
<A HREF=Imatge.gif>Gif</A> Carrega una imatge en format gif
<A HREF=FTP://ftp.escom.com/Fitxer.zip>Fitxer</A> carrega un
fitxer zip
<A
subject=hola>Email</A>

HREF=mailto:rlotina@ceslesheures.com?

Quan sobre un fitxer automticament es posa en marxa una aplicaci que


sencarrega de processar el fitxer, si aquest t un format desconegut
lemmagatzemar al disc.

Imatges a les pgines WEB


Un dels aspectes ms destacats a les pgines WEB s la possibilitat dincloure
imatges que milloren la recepci de la informaci ha transmetre.
Normalment el format dimatge ms utilitzat per a les pgines s el GIF
( Graphics Interchange Format ), permet fins a 256 color i a ms incorpora
compressi per a reduir el fitxer dimatge, o b el JPEG (Joint Photographic
Experts Group).
El format per a incloure una imatge a la pgina WEB s:
<IMG SRC=Localitzaci ALT=Descripci>
latribut SRC t el mateix format que les referncies a pgines WEB i latribut
ALT serveix per a que els usuaris que treballen amb navegadors de tipus text
( que no poden visualitzar imatges ) tinguin una explicaci de que vol aportar la
imatge.
Les imatges carregades amb el IMG tamb poden indicar com el text sha de
collocar al voltant seu, per fer-ho sinclou latribut ALIGN= , el valor que se lhi
dona pot ser MIDDLE, TOP, BOTTOM per a indicar si la primera lnia ha de
quedar al mig a dalt o a baix i RIGHT i LEFT si el text sha dalinear a la dreta o
a lesquerra.

Una imatge tamb pot ser un punt dncora per arribar a un altre pgina o punt
de lactual, noms cal que la posem entre els codis <A> </A>

Taules a les pgines WEB


Lnica manera de poder tabular el text o informaci a una pgina WEB era
utilitzant els codis <PRE> </PRE> per a donar un format fsic al text. Aix
requeria per part del dissenyador un conjunt dassaigs i errors fins trobar el
format adequat, per a partir de lespecificaci HTML 3.0 queda solucionat amb
la inclusi de les taules.
Una taula s un grup de celles repartides en files i columnes i que poden estar
separades per una vorera. Els codis emprats per a la definici de les taules sn:

<TABLE BORDER=x CELLSPACING=y CELLPADDING=z >


<TR>
<TH> Capalera de la primera columna </TH>
<TH> Capalera de la segona columna </TH>
:
<TH> Capalera de lltima columna </TH>
</TR>
<TR>
<TD ALIGN=h VALIGN=v > Primera cella de la fila</TD>
:
<TD ALIGN=h> ltima cella de la fila</TD>
</TR>
:
<TR>
<TD ALIGN=h VALIGN=v > Primera cella de la fila</TD>
:
<TD ALIGN=h> ltima cella de la fila</TD>
</TR>
</TABLE>

on els parmetres volen dir:

BORDER=x
CELLSPACING=y
CELLPADDING=z
ALIGN=h
VALIGN=v

Amplada de la vorera de les celles, (x s un nmero)


Espai entre les columnes, (y s un nmero)
Espai entre la vorera i el contingut de la cella,
(x s un nmero)
Alineament horitzontal del contingut de les celles
(h t els valors CENTER, RIGHT, LEFT)
Alineament vertical del contingut de les celles
(v t els valors TOP, MIDDLE, BOTTOM)

Per exemple:
<HTML>
<HEAD>
<TITLE>Desenvolupament d'aplicacions inform&agrave;tiques</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=2 CELLSPACING=5 CELLPADDING=5>
<TR>
<TH>Primera columna</TH>
<TH>Segona columna</TH>
<TH>Tercera columna</TH>
</TR>
<TR>
<TD ALIGN=CENTER>Primera <BR>cella</TD>
<TD ALIGN=RIGHT VALIGN=TOP>Segona cella</TD>
<TD ALIGN=LEFT VALIGN=BOTTOM>Tercera cella</TD>
</TR>
</TABLE>
</BODY>
</HTML>
t la segent representaci:

Tamb existeix la possibilitat de fusionar les columnes o les files utilitzant els
parmetres COLSPAN i ROWSPAN amb el segent format:
:
<TR>
<TD COLSPAN=2 > Uneix dos columnes </TD>
<TD >Tercera cella </TD>
</TR>
<TD ROWSPAN=2 > Uneix les dos files A</TD>
<TD ROWSPAN=2 > Uneix les dos files B</TD>
<TD> ltima cella </TD>
</TR>
<TR>
<TD>ltima cella de la tercera fila </TD>
<TR>
:
produir el segent resultat:

Llistes a les pgines WEB


Les llistes fan referncia a llistats delements. Les llistes regulares poden ser
ordenades i no ordenades; el nom no fa referncia a lexistncia (o inexistncia)
dun ordre intern a la enumeraci sin al tem que precedeix a cada element de
la llista: al primer cas es tracta dun nmero, generalment, mentre que en el
segon apareix una vinyeta.
Letiqueta <LI> es com a ambds tipus de llista, precedint a cada element de
lenumeraci.
La sintaxi general de las llistes regulares s la segent:
<obertura de llista>
<LI> element 1 de la llista</LI>
<LI> element 2 de la llista</LI>
...
<LI> element n de la llista</LI>
<tancament de llista>
La diferncia, bviament, entre una llista ordenada i una altra no ordenada
resideix simplement en les etiquetes dobertura y tancament de la llista.
Pel cas duna llista ordenada sutilitzen les etiquetes <OL>...</OL> (ordered
list); mentre que per llistes no ordenades sutilitzen <UL>...</UL> (unordered
list).
El segent exemple illustra ls dambds tipus de llista.
:

Llista <B>no ordenada</B> de 3 elements: > de 3 elements:


<UL>
<LI>Pinta</LI>
<LI>Ni&ntilde;a</LI>
<LI>Santa Mar&iacute;a</LI>
</UL>
Llista <B>ordenada</B> de 5 elements:
<OL>
<LI>Miranda</LI>
<LI>Ariel</LI>
<LI>Umbriel</LI>
<LI>Titania</LI>
<LI>Ober&oacute;n</LI>
</OL>
6

Els navegadors tenen unes opcions per defecte a lhora de representar els tems
que precedeixen a les llistes ordenades i no ordenades; no obstant lautor de
documents HTML pot indicar les seves preferncies mitjanant un atribut de las
etiquetes <UL> i <OL> denominat TYPE. Aquest atributo pot prendre els
segents valors per llistes no ordenades: DISC, CIRCLE i SQUARE; i per a llistes
ordenades: 1, a, A, i e I.
Ex:
<UL TYPE=CIRCLE>
<LI>Pinta</LI>
<LI>Ni&ntilde;a</LI>
<LI>Santa Mar&iacute;a</LI>
</UL>

Frames ( Marcs ) a les pgines WEB


Els Marcs permeten fraccionar la zona de treball del navegador WEB en parts
independents que poden mostrar diferents pgines WEB i que poden
interrelacionar-se entre elles.
Per exemple :

Cadascun dels marcs funciona com una finestra independent amb les seves
prpies barres de desplaament.
La definici dels marcs es fa a partir dels codis <FRAMESET> i </FRAMESET>
indicant el nmero de columnes i de files que shan dincloure, de la segent
manera :
<HTML>
<HEAD>
<Title>Prova de Frames</Title>
</HEAD>
<FRAMESET COLS="30%,70%">
<FRAMESET ROWS="40%,60%">
<FRAME SRC="Primera practica.HTML">
<FRAME SRC="Primera practica.HTML">

</FRAMESET>
<FRAME SRC="Primera practica.HTML">
</FRAMESET>
</HTML>
El codi <FRAME SRC=nom_de_la_pgina_WEB> determina la pgina a
carregar en un marc. Tamb existeix la possibilitat de donar una etiqueta a un
marc de forma que puguem fer una referncia a aquest des dun altre marc.
Per exemple:
<FRAME SRC=Pgina.HTML NAME=MARC1>
determina letiqueta del marc com MARC1. Quan vulguem fer referncia a
aquest marc des dun altre punt ho farem de la segent manera:
<A HREF =Pgina.HTML TARGET=MARC1>Carrega</A>
fent que quan pitgem a la paraula Carrega es carregues al marc MARC1 la
pgina especificada.
Les dimensions dels marcs poden ser absoluts indicant un nmero sencer de
pixels o relatius especificant un percentatge de la finestra del navegador, aquest
ltim s la millor forma de fer-ho ja que en un principi no sabem quina ser
lamplada ni la llargada del navegador.
Per ltim indicar que sha devitar al mxim la recursivitat, es adir que una
pgina amb les definicions dels marcs faci referncia dintre dun marca a si
mateixa ja que aix provocaria la subdivisi successiva del marc, per evitar
aquest problema existeixen un conjunt datributs per al modificador TARGET,
aquest sn:
_blank
_self
_parent
_top

carrega la pgina en una finestra nova


carrega la pgina sobre lactual
carrega la pgina en la pgina inicial
carrega la pgina en el nivell superior .

Formularis a les pgines WEB.

Les pgines WEB poden enviar dades cap al servidor i esperar una resposta, per com
especificarem les dades, han dsser sempre fixes o pel contrari shaur de crear un enlla
diferent per a cada tipus de dades ha transmetre, aquesta pregunta t resposta amb ls dels
formularis. Els formularis permeten a lusuari especificar exactament qu dades shan de
transmetre mitjanant caixes de text, llistes, etc.
Un formulari podria ser el que se veu a la figura.
Per a crear un formulari s necessari utilitzar els codis <FORM> i </FORM> i de la segent
forma :
<FORM ACTION=/CGI/Programa METHOD=Mtode>
:
</FORM>

On ACTION indica qu programa ha de processar la informaci generada pel formulari i


METHOD diu com es passaran els parmetres i pot tenir dos valors GET i POST. GET si
volem que els parmetres els rebi la variable dentorn QUERY_STRING i POST si sutilitza
lentrada estndard.
Els parmetres senvien al servidor amb el segent format :
?variable1=valor1&variable2=valor2&&variablen=valorn

i en el cas dexistir algun espai en blanc es substituir pel smbol +. Si es dones el cas que
lusuari no envis cap dada la cadena transmesa :
?variable1=&variable2=&&variablen=

( Els carcters especials senvien codificats en hexadecimal i precedit pel smbol % )

Dins dels identificadors de les forms trobarem uns codis especials que determinen els elements
que formen el formulari. Aquestos sn :

Caixes de text
<INPUT [TYPE=Password] NAME=Nom VALUE=Valor_per_defecte
SIZE=N_carcters MAXLENGHT=N_carcters >

El parmetre TYPE indica el tipus de caixa, per defecte s de tipus text ,en aquest cas no
caldr inclourel, tamb pot tenir el valor PASSWORD si volem que el que escrivim surti
amb * ( amagat ), NAME s el nom que t la caixa i pel que el programa CGI podr
referenciar-la.
VALUE dona el valor per defecte que sortir a la caixa en una primera instncia i finalment
podem restringir la longitud de la caixa i del text escrit amb els modificadors SIZE i
MAXLENGHT respectivament.

10

Quadres de CheckBox i dOpcions

Per a determinar el tipus de quadre sutilitza el parmetre TYPE indicant CheckBox o


Radio. Per al dos tipus es poden crear grups de quadres amb el mateix nom i que poden
tomar diferents valors en funci de quin quadre activem essent la diferncia entre els dos
tipus que el quadre dOpci noms pot tenir un nic valor dels possibles i el quadre
CheckBox pot tenir diferents valors.
El format daquests quadres s :
<INPUT TYPE=CheckBox NAME=Nom VALUE=valor_per_defecte>
<INPUT TYPE=Radio NAME=Nom VALUE=valor_per_defecte>

Per exemple:
:
<INPUT TYPE=CheckBox NAME=SIOP VALUE=UNIX CHECKED>UNIX
<INPUT TYPE=CheckBox NAME=SIOP VALUE=Win95>Win95
<INPUT TYPE=CheckBox NAME=SIOP VALUE=OS2 CHECKED>OS2
:

produir la segent sortida :

En aquest cas el programa CGI rebr :


?SIOP=UNIX&SIOP=OS2

Mentre que :
:
<INPUT TYPE=Radio NAME=SIOP VALUE=UNIX CHECKED>UNIX
<INPUT TYPE=Radio NAME=SIOP VALUE=Win95>Win95
<INPUT TYPE=Radio NAME=SIOP VALUE=OS2>OS2
:

produir :

Botons

Els botons poden ser de dos tipus dacceptaci fent que els valors introduts senvin al
servidor o danullaci fent que el formulari sinici amb els valors per defecte. El format s
el segent per cadascun del botons :
<INPUT TYPE=Submit VALUE=Etiqueta>
<INPUT TYPE=Reset VALUE=Etiqueta>

Per identificar-los fem servir el modificador VALUE que correspon a letiqueta que sortir
al bot. Per exemple:

:
<INPUT TYPE="SUBMIT" VALUE="Transmetre"><BR>
<INPUT TYPE="RESET" VALUE="Esborrar">
:

que produir el segent resultat de la figura:

Quadres de text

11

La diferncia entre un quadre de text i una caixa de text s la possibilitat de escriure ms


duna lnia als quadres de text. El format s el segent:
<TEXTAREA NAME=Nom ROWS=N_Files COLS=N_Columnes>
Text escrit per defecte.
</TEXTAREA>

Llistes desplegables i de desplaament

La definici duna llista desplegable s la mateixa que la llista de desplaament per amb la
diferncia de lespecificaci del nmero de lnies que t. Si noms hi ha una lnia ser un
llista desplegable si sn dos o ms ser una llista de desplaament.
La definici de la llista ser de la segent forma :
:
<SELECT NAME=Nom SIZE=N_Files>
<OPTION VALUE=Valor1>Valor1
<OPTION VALUE=Valor2>Valor2
:
<OPTION VALUE=Valor_n>Valor_n
</SELECT>
:

Per exemple si tenim :


:
<TABLE>
<TR>
<TD>
<SELECT NAME=ValorsLlista>
<OPTION VALUE=Valor1>Valor1<OPTION VALUE=Valor2>Valor2
</SELECT>
</TD>
<TD>
<SELECT NAME=ValorsDesp SIZE=2>
<OPTION VALUE=Valor1>Valor1<OPTION VALUE=Valor2>Valor2
</SELECT>
</TD>
:

produir :
Tamb es pot indicar en el cas de Llistes de
desplaament la possibilitat descollir varies opcions de
les possibles afegint a la definici de la llista el
modificador MULTIPLE. El parmetre rebut pel
programa CGI seria de la forma en el cas de seleccionar
les dos opcions :
?Nom=Valor1&Nom=Valor2

ndex datributs HTML

12

Nom

Elements relacionats

Valors

Descripci

13

align

TABLE

%TAlign;

Posici relativa de la taula respecte


la finestra

align

HR

(left | center | right)

Alineaci de la lnia

align

DIV, H1, H2, H3, H4,


H5, H6, P

(left | center | right |


justify)

Alineaci del text

align

COL, COLGROUP,
TBODY, TD, TFOOT,
TH, THEAD, TR

(left | center | right |


justify | char)

alt

AREA, IMG

%Text;

Petita descripci

alt

INPUT

CDATA

Petita descripci

background

BODY

%URI;

Imatge de fons del document

bgcolor

TABLE

%Color;

Color de fons de la taula

bgcolor

TR

%Color;

Color de fons de la fila

bgcolor

TD, TH

%Color;

Color de fons de la columna

bgcolor

BODY

%Color;

Color de fons del document

border

TABLE

%Pixels;

Remarc de la taula

border

IMG

%Pixels;

Remarc de la imatge

cellpadding

TABLE

%Length;

Espai dins de cada cella

cellspacing

TABLE

%Length;

Espai entre columnes

color

BASEFONT, FONT

%Color;

text color

cols

FRAMESET

%MultiLengths;

Llistat de % de les columnes del


marc, per defecte: 100% (1 col)

colspan

TD, TH

NUMBER

N columnes fusionades

face

FONT

CDATA

Tipus de font (separades per comes)

FRAME, IFRAME

(1 | 0)

Remarc dels marcs

height

TD, TH

%Length;

Alada de la cella

height

IMG

%Length;

Alada de la imatge

marginheight

FRAME

%Pixels;

Alada del marge

marginwidth

FRAME

%Pixels;

Amplada del marge

name

FRAME

CDATA

Nom del marc

noresize

FRAME

(noresize)

Permetre a lusuari redimensionar el


marc

noshade

HR

(noshade)

Lnia sense ombra

nowrap

TD, TH

(nowrap)

Evita que el text pugui partir-se

FRAMESET

%MultiLengths;

Llistat de % de les files del marc, per


defecte: 100% (1 col)

rowspan

TD, TH

NUMBER

N de files fusionades

scrolling

FRAME, IFRAME

(yes | no | auto)

Barra de desplaament o no

size

HR

%Pixels;

Mida de la lnia

size

FONT

CDATA

Mida de la lletra

src

IMG

%URI;

url de la imatge a incloure

frameborder

rows

valign

COL, COLGROUP,
(top | middle | bottom
TBODY, TD, TFOOT,
| baseline)

Alineaci vertical a les celles

14

TH, THEAD, TR
width

HR

%Length;

Amplada de la lnia

width

IMG

%Length;

Amplada de la imatge

width

TABLE

%Length;

Amplada de la taula

width

TD, TH

%Length;

Amplada de la cella

VALIDAR PGINES HTML


Sha dafegir el tipus de document html qu crearem, s a dir, el dtd. Per tant
copiem aquestes lnies al principi del codi:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
...
</html>
I en la segent URL podem validar el nostre codi i veure si s correcte:
http://validator.w3.org

estils
horari
cv
galeria
pagina personal

15

Você também pode gostar