codi Html osanroma

1

HTML

Consells pràctics sobre el codi HTML.

Generat per:Oscar Sanromà

2

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

3

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.

4

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

5

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

6

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.

7

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**

8

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) (**) 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> Atribut Valor Descripció 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

9

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

10

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

<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

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

negreta marcat

Cursiva:

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

cursiva emfatitzat definició cita

Subratllat: <U> subratllat </U> <INS> inserit </INS>

subratllat inserit

Tatxat: <S> tatxat </S> <DEL> eliminat </DEL>

Tatxat eliminat

Tipus teletip:

<TT> text tipus teletip </TT> <KBD> teclat </KBD> <SAMP> exemple </SAMP> <CODE> codi </CODE>

text tipus teletip teclat exemple codi

Subíndex: normal<SUB>subíndex</SUB> normalsubíndex

11

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> Atribut Valor Descripció 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

12

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> Atribut Valor Descripció 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>

13

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

14

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"> Atribut Valor Descripció 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:

15

Ausiàs March

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 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).

16

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*

Actualment s'aconsella utilitzar els fulls d'estil .

Les llistes ordenades(Ordered List):

<OL start="núm." type="A | a | I | i | 1"> elements de la llista </OL>


start núm. indica el número que tindrà el primer element de la llista*

type A | a | I | i | 1 indica el tipus de llista*

Actualment s'aconsella utilitzar els fulls d'estil .

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

17

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>

18

<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 | checkbox | radio | file | hidden | submit | image | reset

determina el tipus de camp d'entrada que es vol utilitzar

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 >

19


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">

20

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 defecte

valor per defecte que es mostra dins del quadre de text

21

<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.A</OPTION> <OPTION>Opció 2.B</OPTION> <OPTION>Opció 2.C</OPTION> </OPTGROUP> <OPTION value="3">Opció 3 <OPTION value="3">Opció 4 <OPTGROUP> <OPTION>Opció 4.A</OPTION> </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"> <OPTION value="1">Opció 1 <OPTION selected value="2">Opció 2

22

<OPTION selected value="3">Opció 3 <OPTION value="4">Opció 4 <OPTION value="5">Opció 5 </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:[email protected]" 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>

23

Nom: escriu el teu

<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>

Posa nota al manual 0

<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">

24

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

Accions: Envia Esborra

</FORM>

25

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 rectangle circ circle poly polygon

forma de l'àrea

coords si shape="rect": 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"

definició de les coordenades

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"

26

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

27

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 | auto

barres de desplaçament: yes=sempre no=mai auto=quan són 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

28

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> <FRAMESET cols="100,200,*"> <FRAME src="blau.html"> <FRAME src="vermell.html"> <FRAME src="groc.html"> </FRAMESET> </HTML>

Veure l'exemple

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

Veure l'exemple

<HTML> <FRAMESET rows="50,*"> <FRAME src="blau.html"> <FRAMESET cols="150,*"> <FRAME src="vermell.html"> <FRAME src="groc.html"> </FRAMESET> </FRAMESET>

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

29

</HTML>

Veure l'exemple

<FRAME src="blau.html"> <FRAME src="vermell.html"> </FRAMESET> </FRAMESET> </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>

Atribut Valor Descripció src URL localització i nom del document d'HTML que s'ha de

mostrar en el marc intern

30

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 es pugui ajudar amb un altre programa per la seva execució.

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

31

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_Version=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>

32

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):

<STYLE type="text/css"> 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:

<STYLE type="text/css"> .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">

33

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, paraula_2, ..., paraula_n

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!

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 | index | follow | index,follow | ... |

all: indexatge de tots els fitxers none: no indexar cap fitxer 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 ca | es | en | ...

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

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

<META http-equiv="propietat" content="valor">

Propietat Valor Descripció

34

Content-Language ca | es | en | ... el llenguatge del document: ca - català es - espanyol en - anglès ...

refresh número_segons; URL=nou_URL

indica al programa navegador el document nou_URL que ha 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-store, must-revalidate

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

<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í">

Atribut Valor Descripció href URL indica la URL base

target _blank _parent _self _top nom_del_marc

indica en quin marc o finstra es mostraran els documents dels enllaços

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

35

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

36

...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>

37

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

codi Html osanroma

Technology

Transcript of codi Html osanroma