Curs de redacció i elaboració de webs · 2005. 10. 9. · Els continguts de la nostra web, els...

Curs de redacció i elaboració de websXavier Planes i Castellvi

1 EINES BÀSIQUES−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−

1.1 Editor de text (ASCII)

Un simple editor de text pot ser suficient per crear un document HTML.Un document HTML és simplement un fitxer de text (ascii), al qual s'afegeixen unes directives pròpies del mateixllenguatge HTML.

Els fitxers HTML han de tenir l'extensió [.html]. També es poden utilitzar altres extensions com [.htm ] o [.asp].El format [.asp] és utilitzat en pàgines web que contenen codi script.

Editors de text

NotePad• WordPad• Ultraed (http://www.ultraedit.com/)• Edit...• Simple Text•

Exemple: Editor Wordpad

1.2 Editor de pàgines web

Els editors de pàgines web (WYSIWYG) són editors que ens permeten crear pàgines web sense tenir cap coneixement d'HTML a priori.

La seva interfície és semblant a la d'un editor de text d'interfície gràfica, com el MS Word, en el qual introduïm elsdiferents components de la pàgina web i automàticament ja es generat el codi HTML de la pàgina..

Editors de pàgines web :

Dreamweaver• Composer (Netscape)• Front Page Express• Microsoft Office 97/2000/XP• Hotmetal• HotDog•

Exemple Editor Composer

1

http://www.ultraedit.com/

http://www.desarrolloweb.com/articulos/195.php

1.3 Editor gràfic

Dins d'un document HTML podem ficar imatges digitalitzades o creades per nosaltres.Per crear o editar aquestes imatges ens farà falta un editor gràfic:

Paint• Gimp (http://www.gimp.org)• Paint Shop Pro (http://www.paintshoppro.com)• Adobe Photoshop• Corel Draw...•

Aquests editors gràfics ens poden ser útils per convertir els formats de les imatges, així com pel tractament o retocs de lesmateixes.

Formats més utilitzats:

Gif (màx. 256 colors)• JPEG (jpg) (màx. 16,7 milions colors)•

1.4 Navegador (browse)

Per poder visualitzar/interpretar els nostres documents HTML han d'utilitzar un navegador (browser).Per indicar la situació del document (HTML) a Internet s'utilitza la URL (Uniform Resource Locator).La URL és el camí que ha de seguir el nostre navegador per Internet per accedir a un determinat recurs, ja sigui unapàgina web, un fitxer, un grup de notícies, etc.

Exemple URL: http://www.tinet.org/~xplanes

Navegadors coneguts:

Netscape (www.netscape.com)• Mozilla (www.mozilla.org)• Opera• Internet Explorer•

Exemple: Internet Explorer

Curs de redacció i elaboració de webs

2

http://www.gimp.org/

http://www.paintshoppro.com/

http://www.netscape.com/

http://www.mozilla.org/

© 2005−06 Xavier Planes i Castellvi


3

2 INTRODUCCIÓ−−−−−−−−−−−−−−−−

2.1 Introduccio a l'HTML

La principal característica del llenguatge HTML( HyperText Markup Language) és l'ús de les etiquetes.

Els arxius HTML estan compostos de text ASCII, i això significa que l'arxiu és independent de la plataforma utilitzada: PC, AppleMacintosh, Sun etc, i també independent del sistema operatiu emprat : Windows , Linux , O.S, Solaris , etc..

Les etiquetes es poden escriure amb majúscules o minúscules (entre els signes < >);té el mateix significat escriure <HTML> que<html>.Normalment s'escriuen amb majúscules per poder així diferenciar−les de la resta del text.

Format d'una etiqueta :

<etiqueta> Inici de l'etiqueta .</etiqueta> fi .

Tipus d'etiquetes:

Obertes: <HR>♦ Tancades: <CENTER> la meva pàgina </CENTER>♦

2.1 Directives basiques d'una pàgina

Les primeres etiquetes d'estructuració que tot document HTML ha de tenir són:

<HTML> : Etiqueta d'inici i final de document<HTML> [document] </HTML>

<HEAD>: Encapçalament del document<HEAD> [Encapçalament ] </HEAD>

<BODY>: Cos del document<BODY> [Cos del document ]</BODY>

<TITLE>: Títol del document<TITLE> [Títol ] </TITLE>

Exemple 1Disseny de la nostra primera pàgina web index.html

<HTML> <HEAD> <TITLE> Primera Pàgina WEB </TITLE> </HEAD> <BODY>

AQUESTA ES LA MEVA PAGINA WEB </BODY></HTML>

2.3 Organització del nostre projecte web

Una bona organització de la informació de la nostra web , pot facilitar−nos un bon seguiment i futures actualitzacions de lamateixa.Els continguts de la nostra web, els classificarem en carpetes temàtiques i en forma d'arbre, on el punt inicial serà la pàginaprincipal de la nostra web index.html .

S'ha de tenir present, que provablement la nostra web estarà allotjada en un servidor Unix , es per aquest motiu, que s'han detenir en conte una sèrie de consideracions inicials:

S'ha de crear una carpeta o directori inicial, amb el nom de la nostra web. Exemple: A:\web•

El servidor diferencia entre majúscules i minúscules , per defecte tots el noms d'arxius en• minúscules.•

4

No feu servir espais entre noms. Exemple: pagina index.html => pagina_index.html•

No feu servir accents. Exemple índex.html•

No feu servir símbols o caràcters especials. Exemple: [email protected] , €uro.html , x&j.html•

IMPORTANT: La pàgina inicial de la nostra web s'ha d'anomenar index.html•

Una possible estructura de la nostra web, podria ser la següent :(exemple de la documentació del curs)

Nota : És important saber com accedir a les diferents pàgines de l'arbre de directoris : Per exemple : Directori de treball : f:\web\ Directori actual: f:\web\12frames\ Volem accedir a la imatge : f:\web\imatges\azul07.jpg El camí serà : "..\imatges\azul07.jpg"

Contingut de la carpeta temàtica imatges


5

Pràctica Nº 1 . Dissenyar l'estructura i la distribució dels continguts de la web que voleu implementar.



6

3 ESTRUCTURA−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−

Tot document HTML està format per dos parts ben diferenciades:

La capçalera• Cos del document•

A continuació explicarem cadascuna d'aquestes parts amb els trets més característics.

3.1 Capçalera del document

L'encapçalament del document està format per l'etiqueta<HEAD>:

<HEAD> [Encapçalament del document ]</HEAD>

Dins de l'encapçalament podem definir el títol del document amb l'etiqueta <TITLE>:

<TITLE> Títol </TITLE>

3.1.1 Comandes especials de la capçalera (opcionals) Tenim l'opció d'introduir etiquetes addicionals dins de la capçalera del document:

Etiqueta META:Es un element que ens permet especificar informació de diferent tipus "Metainformació".Una aplicació molt important de l'etiqueta META és la possibilitat que els motors de cerca utilitzin aquestaetiqueta per ajudar−se en la correcta classificació de les pàgines web pròpies. També la podem utilitzar perdescriure informació general sobre la pàgina web, la data de creació, l'autor, etc.

<META [Tipus d'informació] [Contingut de la informació] >

Exemples de l'etiqueta META:

<META name="GENERATOR" content="Mozilla/4.78 [es] (Windows NT 5.0;U) [Netscape]">

<META name="Pagina del xavier" content="La meva paginaWEB,links,ftp">

<META http−equiv="Content−Type" content="text/html;charset=iso−8859−1">

<META name="keywords"content="Curs HTML,Software,Recursos">

<META name="NameAutor" content="Xavier Planes Castellvi">

<META http−equiv="Date" content="11.11.03">

També es pot utilitzar l'etiqueta META per efectuar un refresc en la pantalla del nostreordinador.Transcorreguts 20 segons, s'accedirà a la pàgina de http://www.Barrapunto.com

Exemples de l'etiqueta META:

<META http−equiv="refresh"content="20;URL=http://www.barrapunto.com">

Exemple.Capçalera completa d'un document HTML

<!doctype html public "−//w3c//dtd html 4.0 transitional//en">

<html><head>

7

Red = "#FF0000" Blue ="#0000FF"

Purple = "#800080" Teal ="#008080"

Fuchsia = "#FF00FF" Aqua ="#00FFFF"

Exemple. Cos del document HTMLExemple d'un document HTML amb una imatge de fons. Exem2.htmlExemple d'un document HTML amb el fons de color .Exem22.html

<!doctype html public "−//w3c//dtd html 4.0 transitional//en"><html><head> <meta http−equiv="Content−Type" content="text/html; charset=iso−8859−1"> <meta name="keywords" content="Exemples HTML"> <meta name="refresh" content="20;URL=http://www.netscape.com"> <meta name="GENERATOR" content="Mozilla/4.78 [es] (Windows NT 5.0; U)[Netscape]"> <title>Aquesta es la meva segona pagina WEB </title></head><body text="#FFFF00" bgcolor="#FFFFFF" link="#000066" vlink="#000099"alink="#000099" background="linux.gif"> <center> Pàgina inicial de la web del Xavier </center> </body></html>

Direccions d'interès:

Imatges de fons ===> http://www.netscape.com/assist/net_sites/bg/backgrounds.htmlImatges ==>



9

http://www.netscape.com/assist/net_sites/bg/backgrounds.html

4 ENLLAÇOS−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−

Els enllaços (links) son elements que ens permeten enllaçar diferents recursos en una pàgina web.Es poden utilitzar per llegir una pàgina web d'una forma no seqüencial , accedint a diferents parts d'una pàgina web d'unamanera ràpida i eficient .

En general, els enllaços tenen la següent estructura:

<A HREF="#enllaç destí "> text indicatiu de l'enllaç </A>

Podríem distingir quatre tipus d'enllaços :

Enllaç dins d'una mateixa pàgina 1.

Enllaç a una altra pàgina o recurs local. 2.

Enllaç a una altra pàgina o recurs extern. 3.

Enllaç a una direcció de correu electrònic (e−mail).4.

4.1 Enllaç dins d'una mateixa pàgina

Aquest tipus d'enllaç l'utilitzarem per accedir d'una forma no seqüencial a una determinada part d'un document HTML o pàginaweb.Crear enllaços dins la mateixa pàgina

Per crear un enllaç dins la mateixa pàgina, per exemple un enllaç que el lector pot utilitzar per saltar d'una secció a una altre,heu de crear un objectiu (localització de la destinació), i llavors creeu un enllaç que apunti a l'objectiu. Els objectius també s'anomenen objectiuanomenat.

Situeu el punt d'inserció a l'inici de la línia on voleu crear un objectiu, o seleccionar un troç de text.• Feu un clic al botó Objectiu en l abarra d'eines, o obriu el menú Insereix i escolliu Objectiu anomenat.• Teclejeu un únic nom per l'objectiu en el quadre de diàleg (fins a 30 caràcters). Si incloeu espais, es convertiran en elcaràcter de subratllat (_). Si heu seleccionat un troç de text al pas #1, aquest quadre ja conté un nom.

• Feu un clic a D'acord.Una icona objectiu apareixerà en el vostre document per marcar la localització de l'objectiu:•

Per crear l'enllaç que el lector pot fer clic per saltar a l'objectiu:

Seleccioneu el text o la imatge que voleu enllaçar a l'objectiu.• Feu clic al botó Enllaç o obriu el menú Insereix i trieu Enllaç.• Per visualitzar una llista de tots els objectius anomenats i capçaleres a la pàgina, feu un clic a Més propietats.• Utilitza el quadre de diàleg Propietats de l'enllaç per escollir el nom de l'objectiu apropiat.•

Seleccioneu un objectiu anomenat: Si esteu creant un enllaç a un objectiu anomenat (objectiu), seleccioneudes d'una llista dels objectius actualment disponibles en la pàgina.

♦ Seleccioneu una capçalera: Si esteu creant un enllaç a un nivell capçalera (per exemple, Capçalera 1 −Capçalera 6), seleccioneu des d'una llista de capçaleres disponibles actualment a la pàgina.

♦ Feu un clic a D'acord.• Per provar l'enllaç que heu creat, obriu el menú Fitxer i trieu Pàgina del Mozilla, llavors feu un clic a l'enllaç.•

Consell: Si no heu creat objectius anomenats, podeu usar el quadre de diàleg Enllaç per crear enllaços a capçaleres que jaestan ocupades a la pàgina.

Format de l'etiqueta:

<A HREF="#marca"> text de l'enllaç </A>

El punt exacte de la pàgina web on volem saltar , tenim que insertar :

<A NAME="marca"> </A>

Exemple 1 . Enllaç dins d'una mateixa pàgina.

10

Exemple1.html <> ... <A HREF="#fi"> Anar al final del document </A> ... ... <A NAME="fi"> </A> ...

4.2 Enllaç a una pàgina o recurs local.

En el nostre projecte web podem tenir més d'una pàgina web o recurs (imatge, docs , ..tc).Aquest tipus d'enllaç serà utilitzat per enllaçar una pàgina web o recurs del nostre sistema local.La manera d'accedir a aquestes pàgines o recursos és la següent:

Format de l'etiqueta:

<A HREF="document.html#marca"> text de l'enllaç </A>

Exemple 2Volem accedir a la marca "fi" del document HTML exemple2.html

Principal.html <> ... <A HREF="exemple2.html#fi"> Anar al final del document Exemple2.html </A> ...

Exemple2.html

... <A NAME="fi"> </A>

4.3 Enllaç a una altra pàgina o recurs extern.

Si volem accedir a una pàgina web o recurs que estigui fora del nostre sistema , pàgina web o recurs extern (és a dir, queestigui en un servidor diferent al nostre o fora de la nostra direcctori de treball ) és necessari conèixer la seva direcció complertaURL (Uniform Resource Locator).

Aquesta direcció URL pot ser del tipus http , ftp, document, imatge etc.

Podeu crear enllaços des de la vostra pàgina a pàgines locals del vostre ordinador o del vostre lloc de treball a la xarxa, o apàgines remotes en Internet.

Podeu crear ràpidament un enllaç arrossegant i deixant anar des d'una altre finestra. Per exemple, podeu seleccionar un enllaçdes d'una pàgina web, adreçad'interés, o correu i finestra de notícies i arrossega i deixa anar dins la vostra pàgina.

També podeu utilitzar el quadre de diàleg Propietats de l'enllaç per crear un enllaç a un altre pàgina:

Situeu el punt d'inserció on voleu crear un enllaç, o seleccioneu el text o la imatge que voleu enllaçar a l'objectiu.• Feu un clic al botó Enllaç.• Per visualitzar una llista de tots els objectius anomenats i capçaleres de la pàgina, feu un clic a Més Propietats.• Utilitzeu el quadre de diàleg Propietats de l'enllaç per definir el vostre enllaç.•

Text de l'enllaç: Si ja heu escollit un fitxer imatge o un text abans de fer un clic a l'enllaç de la icona, el text o el fitxerseleccionat estarà totalment enllaçat aquí. Tanmateix, heu d'entrar el text que voleu utilitzar com a enllaç. Ubicació de l'enllaç: Teclejeu el camí local i el nom del fitxer o la URL remota de la pàgina que voleu enllaçar. Si no esteusegur del camí i del nom del fitxer o d'un fitxer local, feu un clic Tria un fitxer per cercar−lo al vostre disc dur o la vostra xarxa.Per URL remotes, podeu copiar la URL des del camp ubicació del navegador. Altrement, podeu seleccionar un objectiuanomenat o una capçalera de la pàgina actual per enllaçar−lo.

Per aplicar atributs addicionals o esdeveniments de JavaScript, feu un clic a Editor avançat per visualitzar l'editor depropietats avançat.

• Feu un clic a D'acord.• Per comprovar un enllaç que acabeu de crear, obriu el menú Fitxer i trieu Pàgina del Mozilla, llavors feu un clic al'enllaç.

•

Format de l'etiqueta


11

<A HREF="URL"> Comentari de la URL</A>

Exemple 3Volem accedir a la pàgina web de netscape.

Exemple3.html

.... <A HREF="http://www.mozilla.org/"> Pàgina de Mozilla </A> ...

4.4 Enllaç a una direcció de correu electrònic (e−mail).

De vegades pot ser útil inserir en un document HTML un enllaç a una direcció de correu electrònic (e−mail) .Al prémer damunt d'aquest l'enllaç , sens obrirà el client de correu electrònic prederminat (eudora, messenger , Outlook) i si eltenim correctament configurat podrem enviar el correu electrònic directament al seu destinatari.

Format de l'etiqueta :

<A HREF="mailto: direcció e−mail"> Text de l'enllaç </A>

Exemple 4.Volem enviar un e−mail a [email protected]

Exemple4.html

... <A HREF="mailto: [email protected]">E−mail del Xavier </A>

....

Nota. Si el navegador o browser no pot executar un enllaç ( recurs de la web , pàgina html , imatge , etc ) ens donarà

l'opció de gravar−ho al disc.

Exemple.

<A HREF="psp/psp50ev.exe"> ProgramariPaintShop Pro </A>



12

5 FORMAT DE LES IMATGES−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−

El fet d'incloure imatges en una pàgina web, pot reduir el procés de càrrega del navegador (browser) . Una imatge es consideragran si la seva mida supera els 150 Kbyes .

Si reduïm l'alçada i l'amplitud de la imatge en 1/2 reduïm la mida a 1/4 Kbs..

Existeixen eines gràfiques com Paint Shop Pro (shareware) , Gimp (GNU) que ens permeten reduir i ampliar la mida delsgràfics, configurar la ràtio de compressió en segons quins formats i fer el tractament de la image en general.

Una opció vàlida si volem tenir imatges de bona qualitat és la possibilitat de situar imatges petites (thumbnails) en la pàginaweb, imatges que estaran enllaçades a la mateixa imatge amb la mida original .

Exemples imatges fons / barres / icones / animacions. •

5.2 Formats jpeg (jpg).

Format jpeg (.jpg) és un format de compressió d'imatges que pot arribar a emmagatzemar fins a 16,7 milions de colors.Aquest format de compressió fa ús de complicats algoritmes matemàtics per comprimir la mida de les imatges .

Quan guardem una imatge amb aquest format , podem establir la ràtio de compressió que vulguem aplicar sobre la imatge.Com més compressió apliquem, menys qualitat i mida (Kbs) tindrem, es tracta de trobar el punt d'equilibri entre mida i qualitatde la imatge.

5.3 Formats gif.

El format gif és recomanable per imatges monocolor i senzilles amb un màxim de 256 colors.Existeixen diversos subformats que veurem a continuació.

5.3.1 Gif transparents.Amb aquest format podem definir un color dels utilitzats en la imatge com a transparent. D'aquesta manera

el navegador ens mostrarà la imatge deixant veure el fons de la pàgina.

Exemple :

Com fer que una imatge sigui transparent?Depenent de l'editor gràfic que estem utilitzant, però hem de guardar la imatge amb format gif, subformat89a.

5.3.2 Gif animats.

Els gifs animats són imatges que estan compostes per una seqüència d'imatges.

En realitat es tracta d'una sèrie d'imatges gif que amb un determinat software s'agrupen formant una imatgeresultat gif. Al visualitzar aquesta imatge veurem totes les imatges que la componen i tindrem la sensació demoviment .

Programari utilitzat el Animation Shop (Paint Shop Pro )

GIF ANIMAT

13

http://www.gimp.org

http://www.areas.net/colorvivo/home.htm

Pàgina ( URL ) de gifs animats : http://www.animaniacos.com• Manual de PSP professional• Exemples d'imatges Exemple1 Exemple2• Imatges de paisatges•

5.4 Formats ICO.

És el format de les icones.A partir d'una imatge .jpg o .gif, amb unes determinades mides, i gràcies al programa Microangelo, podem iconitzar aquestaimatge.Una utilitat que pot tenir aquesta icona .ico , es tenir la possibilitat de posar una icona (que podria ser el logotip de la nostrapàgina) a la barra de direccions (URL) de la nostra pàgina.

Exemple:La pàgina inicial de .A la capçalera de la nostra pàgina index.html , tindrem de posar dins del <HEAD> :

<link rel="shortcut icon"href="http://www.tinet.org/favicon.ico">



14

http://www.animaniacos.com/

http://www.coloredhome.com/fotos_flores_rosas_paisajes_1.htm

http://www.microangelo.us/

http://www.tinet.org

6 MARCS (FRAMES)−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−

Una de les tècniques que tenim per poder dividir la pantalla en diverses zones o finestres, d'una forma independent l'una del'altra, és amb els Marcs (frames).

Aquesta divisió de la presentació de les finestres s'efectua mitjançant un document especial HTML, el document índex, quesempre té que estar activat com primera part integrant d'un projecte amb marcs.

Un grup de marcs es denomina frameset i s'utilitza en el document índex en lloc del tradicional BODY de qualsevol documentHTML.

L'estructura bàsica d'un document índex HTML amb marcs és:

Exemple: Pàgina inicial de la nostra web index.html

<HTML> <HEAD> <TITLE>Document Index amb marcs</TITLE> </HEAD> <FRAMESET>

[Definicio dels marcs (Rows,Cols)]

</FRAMESET> </HTML>

6.2 Definició del FRAMESET

Atributs de l'etiqueta FRAMESET

− ROWS. Amb aquest atribut ROWS=" x% , x% " assignem la mida relativa a cada marc en forma de files . Exemple. 2 files (2 marcs)

−−−−−−−−−−−−−−−−−− | Marc 1 | |−−−−−−−−−−−−−−−−−−| | | | | | Marc 2 | | | | | −−−−−−−−−−−−−−−−−−<HTML> <HEAD> <TITLE>Pàgina index Marcs</TITLE> </HEAD> <FRAMESET ROWS="25%,75%">

<FRAME [Definció del Marc1] > <FRAME [Definció del Marc2] >

</FRAMESET></HTML>

− COLS. Amb l'atribut COLS=" x% , x%" assignem la mida relativa a cada marc en forma de columnes . Exemple. 2 columnes (2 marcs)

15

−−−−−−−−−−−−−−−−−− | | | | M | M | | a | a | | r | r | | c | c | | | | | 1 | 2 | −−−−−−−−−−−−−−−−−<HTML> <HEAD> <TITLE>Pàgina index Marcs</TITLE> </HEAD> <FRAMESET COLS="25%,75%">

<FRAME [Definció del Marc1 ] > <FRAME [Definció del Marc2 ] >

</FRAMESET></HTML>

La mida del marc es pot definir amb valor absolut (píxels) en lloc de xifres amb %.

Nota: Es el mateix definir ROWS="25%,75%" que ROWS="25,75" que ROWS="25, * "

6.3 Definició del marc.

El contingut del marc ve determinada per la seva definició. Amb l'etiqueta FRAME es defineix el contingut d'un marc o dels marcs inclosos dins d'un FRAMESET.

<FRAME SRC="Nom de l'arxiu" NAME="Nom del frame">

Atributs de l'etiqueta FRAME:

SRC="Nom_recurs". Aquest Nom_recurs pot ser un document HTML o un altre recurs de la web (o URL). Ambaquest atribut indiquem el recurs que es carregarà inicialment al frame.Si no especifiquem cap recurs el frameapareixerà buit.

•

NAME= "Nom_finestra". Amb aquest atribut indiquem el nom del marc•

MARGINWIDTH="número". Indiquem l'amplada dels marges dins d'un marc. El número que hi fiquem representaràl'amplada del marge amb píxels. Atribut opcional

•

MARGINHEIGHT="número". Igual que l'anterior però es refereix al marge de l'alçada. Atribut opcional•

SCROLLING="yes|no|auto". Amb aquest atribut podem indicar si el marc tindrà una barra de desplaçament• Opció yes: marc amb barra de desplaçament♦ Opció no : marc sense barra de desplaçament♦ Opció auto: Opció per defecte.♦

NORESIZE. No porta valor numèric. Indiquem que el marc no es pot redimensionar (resize) per part de l'usuari. Perdefecte tots els frames són redimensionables

•

FRAMEBORDER="no". Aquest atribut elimina el contorn d'un frame.Si es vol eliminar el contorn de tots els framesdins d'un frameset s'ha d'especificar a l'etiqueta FRAMESET

•

El atributo TARGET . Amb aquest atribut seleccionem el marc que volem , a partir del nom de l'etiquetaNAME="nom_frame"

•

Noms reservats del atribut TARGET:

TARGET="_blank". Obre una nova còpia del navegador i l'enllaç actiu es carrega en ella amb lapantalla complerta.

♦ TARGET="_self". Fa que l'enllaç es carregui en el mateix frame♦ TARGET="_top". L'enllaç es carrega en la pantalla complerta del navegador . L'estructura del frame

desapareix♦


16

Exemples :

<A HREF="arxiu.html" TARGET="imatge_1" >Referencia al frame ambNAME="imatge_1", on el document arxiu.html tindrà que ser visualitzat </A>

<A HREF="arxiu.html" TARGET="_blank" > El document HTML arxiu.html seràvisualitzat en una nova finestra o frame amb la pantalla complerta </A>

6.4 Exemple complert de marcs.Pàgina index de la etse (http://www.etse.urv.es )

<html><head><title>ETSE − Escola Tècnica Superior d'Enginyeria</title><meta http−equiv="Content−Type" content="text/html; charset=iso−8859−1"></head><frameset cols="163,*" frameborder="NO" border="0" framespacing="0" > <frame name="leftFrame" leftMargin=0 topMargin=0 marginheight=0marginwidth=0 scrolling="NO" noresize src="PagPincipal/index1.htm"> <frame name="rightFrame" leftMargin=0 topMargin=0 marginheight=0marginwidth=0 src="PagPincipal/frame_dreta.htm"></frameset><noframes> <body bgcolor="#FFFFFF" text="#000000"></body></noframes> </html>

Pràctica sobre Marcs (frames): cercadors.html



17................................................................................................................................................................................................1................................................................................................................................................................................................4................................................................................................................................................................................................7..............................................................................................................................................................................................10..............................................................................................................................................................................................13..............................................................................................................................................................................................15

http://www.etse.urv.es

Curs de redacció i elaboració de webs · 2005. 10. 9. · Els continguts de la nostra web, els...

Documents

Transcript of Curs de redacció i elaboració de webs · 2005. 10. 9. · Els continguts de la nostra web, els...