JORDIANWEB...ict...tic...tic..CURS DE DISSENY I EXECUCIÓ D'ACTIVITATS D'ENSENYAMENT - APRENENTATGE QUE EMPREN LES TIC. DISSENY i EDICIÓ DE PÀGINES WEB.

Que és una pàgina web? Doncs un document textual, al que se l’afegeixen un senyals (marques o etiquetes) que serviran per a definir atributs, la posició de les imatges, els enllaços, etc.

A les unitats anteriors vàreu adquirir coneixements, hàbits, ..., d’edició de documents que en principi tenien un destí, la impressió o la visualització des del propi programa editor.

Molts d’aquest coneixements els emprareu ara per dissenyar pàgines web. Ens serviran? Es clar que sí!!

El primer que farem serà reflexionar sobre la manera en que presentarem la informació en la nostra pàgina web. Recordeu que en una pantalla d'ordinador, només tenim el referent de les coordenades 0,0 (l’extrem superior – esquerra).

Així doncs l'organització del text i les imatges, i sobretot de la quantitat d'informació, és fonamental. ( Per això treballàvem dins de taules, distribuint-la en petits blocs, relacionats els uns amb els altres, mirant de fer-los tant atractius i dinàmics com siguem capaços de fer-ho)

Abans ens preguntàvem si ens serviria el que hem après fins ara. Què és el que feiem sempre abans de començar un document? Redordeu que sempre serà més fàcil fer, que saber el que hem de fer?

1er. Escriurem el text amb un editor. ( El que us faci sentir més còmodes )

2on. Formatarem el text tot inserint les marques adients.

3er. Crearem o cercarem les imatges que acompanyaran el text. Recordeu que aquestes han d’estar en format gif o jpg, sinó, les haureu de convertir.

4art. Inserirem les imatges en el document tot referenciant-les adequadament.

5èr. Definirem els enllaços (links)

6è. Visualitzarem el resultat en el navegador ( Convé provar el resultat en dos de diferents per tal de contrastar possibles diferencies o dissonàncies entre el que volíem l’obtingut. No sempre aconseguirem a la primera els resultats desitjats)

Una marca en el llenguatge HTML és un text tancat entre els signes < >. Gairebé sempre, s’escriuen per parelles, l'una al començar i l'altra al finalitzar. Generalment, la marca que tanca és la mateixa que la que obre però amb el caràcter / al davant. ( p.e.: text en negreta  )

Tot document web tindrà la marca <HTML> al començament i </HTML> al final d'aquest.

La capçalera estarà situada entre les marques <HEAD> i </HEAD> I contindrà informació propia del document. Per exemple dins d'aquesta es posa el títol del document ( Text que es pot llegir a la barra de títol i s'utilitza per als Bookmarks), entre les marques < TITLE> i </TITLE>.

Tot document HTML consta de dues parts:

El llenguatge HTML presenta sis nivells d'encapçalament, que poden servir per definir estils de títol. Cada encapçalament incorpora un salt de paràgraf.

Amb les marques adequades definirem els atributs de text i totes les seves possibles combinacions.

El tipus i mida de la lletra resta definit per la configuració del visualitzador.

Alguns visulitzadr permeten que un document pugui modificar aquests atributs.

<BASEFONT SIZE=n> Situat en qualsevol lloc de la pàgina HTML definirà la mida de referència d'un text.

establirà una mida absoluta del text. Si el valor de n és més petit que l'especificat a <BASEFONT SIZE=n> la lletra es visualitzarà més petita que en la resta de la pàgina.

Amb o la mida de la lletra serà relativa respecte a l'especificada a <BASEFONT SIZE=n>

En cada pàgina, només podrem definir un sol color pel fons i altre o pel text.

La definició del color està d'una pàgina resta configurada en el programa visualitzador. Tota pàgina HTML podrà incorporar marques que modifiquin aquests colors predeterminats.

Tot color restarà definit per sis caràcters (numeració hexadecimal i format RGB). Per obtenir els tres components d'un determinat color podeu emprar la paleta de color de qualsevol programa que mostri la codificació RGB o la seva notació hexadecimal.

En la figura del costat els components RGB del color blanc són 255, 255 i 255, que escrits en notació hexadecimal són FFFFFF.

Les marques per fer-ho són:

Paràgraf a l'esquerra

Paràgraf centrat

Paràgraf a la dreta

Els encapçalaments <H1> impliquen un salt de línia.

Per forçar un salt, sense deixar una línia en blanc, ho podeu fer amb .

Un text inclòs entre les marques <PRE> i </PRE> es presentarà tal com està escrit en el text original: respectant espais, salts de línia, tabuladors i lletra monoespaiada.

Podrem estructurar un text en llistes numerades <OL> </OL> o amb símbols tipogràfics <UL></UL>.

Cada ítem de la llista ha de començar amb la marca <LI>.

Si volem triar el símbol tipogràfic a visualitzar caldrà indicar-ho amb la marca <UL>. Les opcions possibles són:

Les marques d'una taula hauran de seguir una jerarquia ben definida. Recordeu que una taula pot tenir una o més files i cada una de les files pot dividir-se en una o més columnes.

Com el text, les imatges es podran alinear de tres maneres: a l'esquera centrades o a la dreta. Però només podreu posar una línia de text al seu costat.

Si les imatges són el suficientment petites les podrem posar una al costat de l'altra

Dins la referència a una imatge, es poden incloure també altres paràmetres addicionals:

Enllaç a un fitxer que es troba en el mateix servidor i directori que la pàgina origen de l'enllaç.

Enllaç absolut a altres documents (pàgines o imatges), amb format URL.

Enllaç a una imatge.

SI VOLS AMPLIAR FES CLIC SOBRE LA IMATGE

<H1>Encapçalament 1</H1>

<H2>Encapçalament 2</H2>

<H3>Encapçalament 3</H3>

<H4>Encapçalament 4</H4>

<H5>Encapçalament 5</H5>

<H6>Encapçalament 6</H6>