Curs 03

21
Marcaje pentru realizarea legaturilor

Una dintre caracteristicile care dau putere Web-ului consta în
posibilitatea includerii de referinte la alte pagini, din acelasi site sau aflate
undeva în retea si indicate prin URL. Selectarea cu mouse-ul a legaturii
provoaca afisarea paginii referite.
Pentru includerea unei referinte se va folosi marcajul <A> (ancora):
<A HREF="referinta">Entitate de selectat </A>
<HTML><HEAD><TITLE>Referinte</TITLE></HEAD>
<BODY LINK="#0000FF" VLINK="#800080">
<H1>MICHELANGELO</H1>
<OL TYPE=I>
<LI><A HREF="Introd.html">INTRODUCTION</A>
<LI><A HREF="Early.html">EARLY LIFE IN FLORENCE</A>
<LI><A HREF="First.html">FIRST ROMAN SOJOURN</A>
<LI><A HREF="Retour.html">FIRST RETOURN TO FLORENCE</A>
<LI><A HREF="Sistine.html">THE SISTINE CHAPEL CEILING</A>
<LI><A HREF="JuliII.html">THE TOMB OF JULIUS II</A>
<LI><A HREF="Laurent.html">THE LAURENTIAN LIBRARY</A>
<LI><A HREF="Medici.html">THE MEDICI TOMBS</A>
<LI><A HREF="Last.html">THE LAST JUDGMENT</A>
<LI><A HREF="Campido.html">THE CAMPIDOGLIO</A>
</OL>
<HR>
<A HREF="http://sunsite.unc.edu/wm/paint/auth/michelangelo/">
WebMuseum, Paris: Michelangelo</A>
<I>Biographical information and images of several of his works
on the Web.</I>
</BODY>
</HTML>
22
Atributul LINK din marcajul BODY serveste la declararea culorii în care

apar caracterele sirului care specifica o legatura. Atributul VLINK din marcajul
BODY serveste la declararea culorii în care apar caracterele sirului care specifica
o legatura dupa ce aceasta a fost selectata ("vizitata").
Folosirea imaginilor pentru specificarea legaturilor

În acelasi fel în care sunt atasate sirurilor de caractere, referintele pot fi
atasate si imaginilor dintr-o pagina Web:
<A HREF=http://www.tigerworld.com><IMG SRC="tiger.jpg"></A>
Imaginea folosita pentru specificarea legaturii va fi afisata într-un chenar.

Este utila plasarea unei mici imagini într-o pagina având o legatura spre o
imagine marita. De exemplu o pagina din situl despre Michelangelo poate avea
în pagina despre Capela Sixtina (Sistine.html) câteva astfel de imagini:
<HTML><HEAD><TITLE>The Sistine Chapel</TITLE></HEAD>

<BODY>
<H1>V THE SISTINE CHAPEL CEILING</H1>
<P><A HREF="tavan1.jpg"><IMG SRC="imag1.jpg"></A>

<A HREF="tavan2.jpg"><IMG SRC="imag2.jpg"></A>

<A HREF="tavan3.jpg"><IMG SRC="imag3.jpg"></A></P>
<P>Michelangelo was recalled to Rome by Pope Julius II in 1505
for two commissions. The most important one was for the
frescoes of the Sistine
23
O legatura poate provoca afisarea unei alte parti din cadrul aceleiasi
(lungi) pagini. Punctele spre care se poate sari vor fi definite printr-un marcaj
<A> având un atribut NAME :
<HTML><HEAD><TITLE>Airplanes</TITLE></HEAD>
<BODY>
<H1>AIRPLANE STRUCTURE</H1>
Airplanes generally share the same basic configuration—each
usually has a fuselage, <A HREF="#wings">wings</A>,
<A HREF="#tail">tail</A>, landing gear, and a set of
specialized control surfaces mounted on the wings and tail.
<H2> A   Fuselage</H2>
The fuselage is the main cabin, or body of the airplane.
Generally the fuselage has a cockpit section at the front end,
where the pilot controls the airplane, and a cabin section.
The cabin section may be designed to carry passengers, cargo,
or both. In a military fighter plane, the fuselage may house
the engines, fuel, electronics, and some weapons. In some of
the sleekest of gliders and ultralight airplanes, the fuselage
may be nothing more than a minimal structure connecting the
wings, tail, cockpit, and engines.
<H2>B   <A NAME="wings"></A>Wings</H2>
All airplanes, by definition, have wings. Some, like the
flying wings built by the Northrop-Grumman Corporation, based
in the United States, are nearly all wing with a very small
cockpit. Others have minimal wings, or wings that seem to be
merely extensions of a blended, aerodynamic fuselage, such as
the space shuttle.
<H2>C   <A NAME="tail"></A>Tail Assembly</H2> Most
airplanes, except for flying wings, have a tail assembly
attached to the rear of the fuselage, consisting of vertical
and horizontal stabilizers, which look like small wings; a
rudder; and elevators. The components of the tail assembly are
collectively referred to as the empennage.
O legatura poate declansa afisarea ferestrei pentru trimiterea unui mesaj

prin e-mail :
<I><FONT COLOR="#000099">Pentru orice informatii suplimentare puteti scrie

directorului scolii, conf.dr.ing. Mihai DAMIAN </FONT></I>
(<A HREF="mailto:damian_mihai@yahoo.com,Damian@tempus.east.utcluj.ro">
damian_mihai@yahoo.com </A>)
Varianta : folosirea unei imagini :

<A HREF =
"mailto:Damian_Mihai@yahoo.com,Damian@tempus.east.utcluj.ro">
24
<IMG SRC="http://www.baleares.com/fincas/img/email36.gif"
ALT="" BORDER=0></A>
Tot prin referinte se comanda încarcarea unei aplicatii existente pe

server :
<A HREF="test.exe">Testare calculator</A>
Aplicatia astfel încarcata se va lansa automat în executie pe calculatorul

care a încarcat pagina. Desigur, executia unei aplicatii pune probleme mai
complicate decât încarcarea unui fisier continând o imagine sau o pagina Web.
Harti de imagini
Se poate crea o imagine având mai multe regiuni, fiecare legata de o
pagina Web diferita. Zonele sensibile la selectarea cu mouse-ul pot fi
rectangulare, poligonale sau circulare. Determinarea coordonatelor punctelor
care definesc regiunile se poate realiza folosind aplicatia Paint Shop Pro, care
afiseaza în permanenta coordonatele cursorului. Marcajele care se vor folosi în
acest caz sunt <MAP> si <AREA>. Numele hartii se declara cu ajutorul
atributului USEMAP="#nume" introdus în cadrul marcajului <IMG>..
Exemplu:
<IMG SRC="londra.gif" USEMAP="#depozite">
<MAP NAME="depozite">
<AREA SHAPE="rect" COORDS="29,48,52,70" HREF="dep1.html">
</MAP>
25
Pentru declararea zonelor sensibile se va folosi rect pentru zonele

dreptunghiulare, circle pentru zonele circulare si poly pentru zonele poligonale
având un contur neregulat.
axa X
(29, 48)
axa Y
(52, 70)

(50,10)
(10,80)
(100,100)
<AREA SHAPE="poly" COORDS="10,80,50,10,100,100" HREF="cluj.html">
R40
(150,100)
<AREA SHAPE="circle" COORDS="150,100,40" HREF="departe.html">
Atributul ONMOUSEOVER
Într-o pagina Web se pot afisa imagini care se se modifica la trecerea
mouse-ului peste ele. Aceasta facilitate ar permite de exemplu schimbarea
culorii unui buton înaintea actionarii sale efective.
26
Exemplu:
<A HREF="egipt.html" ONMOUSEOVER='rollover.src="ramses.jpg"'

ONMOUSEOUT='rollover.src="piramida.jpg"'>
<CENTER><IMG SRC="piramida.jpg" NAME="rollover"> </CENTER>
</A>
La trecerea cursorului mouse-ului peste imaginea continuta în fisierul

"piramida.jpg" aceasta este înlocuita cu imaginea continuta în fisierul
"ramses.jpg". Deplasarea cursorului în afara zonei imaginii provoaca revenirea
la imaginea initiala. Selectarea cu mouse-ul a imaginii ("ramses.jpg") provoaca
desigur afisarea paginii Web "egipt.html".
Observatie : atributul ONMOUSEOVER necesita folosirea atât a
ghilimelelor cât si a apostrofului.
Site-uri FTP
Un site FTP permite transferul de fisiere dinspre un server care le
gazduieste spre calculatorul pe care ruleaza programul de navigatie. Fisierele
pot fi de orice tip. În momentul selectarii cu mouse-ul a referintei corespunzând
unui fisier se afiseaza o fereastra care permite selectarea fie a optiunii de
deschidere a fisierului cu aplicatia care le-a creat fie a optiunii de transfer a
fisierului într-un folder care va fi precizat. Exemplu :
<blockquote>
<li><b><a
href="ftp://tcm.east.utcluj.ro/pub/mb/iasp/plata.doc">
Formular decontare ore prestate</a></b></li>
<li><b><a
href="ftp://tcm.east.utcluj.ro/pub/mb/iasp/contr_aplicm.doc">
Formular contract aplicatii multimedia</a></b></li>
<li><b><a
href="ftp://tcm.east.utcluj.ro/pub/mb/iasp/contr_bdate.doc">
Formular contract baze de date</a></b></li>
</blockquote>
Tabele
Tabelele sunt realizate folosind marcajul <TABLE>. Liniile încep cu
marcajul <TR>. Fiecare celula este marcata cu <TD>. Celulele al caror text se
doreste a fi scris bold (de obicei prima pozitie a fiecarei coloane) se marcheaza
cu <TH>.
<HTML>
<HEAD><TITLE>Tabele</TITLE></HEAD>
27
<BODY>
<H1>Lista de preturi</H1>
Preturile practicate de firma noastra sunt prezentate în
tabelul 1: <BR><BR>
<TABLE>
<TR> <TH>Produs</TH>
<TH>Pret</TH>
<TH>Cantitate disponibila</TH>
</TR>
<TR> <TD>Pantofi Lux</TD>
<TD>560000</TD>
<TD>243</TD>
</TR>
<TR> <TD>Pantofi Carmens</TD>
<TD>740000</TD>
<TD>189</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Formatarea tabelului :
• Centrarea în pagina se realizeaza cuprinzând declararea tabelului
între marcaje <CENTER> . . . </CENTER>.
• Adaugarea liniilor separatoare se realizeaza adaugând marcajului
<TABLE> atributul BORDER :
<TABLE BORDER=4>
• Cadrarea textului în cadrul celulei se realizeaza folosind în cadrul

marcajului <TH> sau <TD> a atributului ALIGN=center (sau
ALIGN=right) respectiv VALIGN=top / middle / bottom :
<CENTER>
<TABLE BORDER=4>
<TR>
<TH>Produs</TH>
28
<TH>Pret</TH>
</TR>
<TR>
<TD ALIGN=center>Pantofi Lux</TD>
<TD ALIGN=center>560000</TD>
</TR>
<TR>
<TD ALIGN=center>Pantofi Carmens</TD>
</TR>
</TABLE>
</CENTER>
• Culoarea fondului unei linii sau a unei celule se impune adaugând

marcajului <TR> sau <TD> (sau <TH>) atributul BGCOLOR:
<TR BGCOLOR="#AAAAAA">
<TH>Produs</TH>
<TH>Pret</TH>
</TR>
<TR>
<TD ALIGN=center>Pantofi Lux</TD>
<TD ALIGN=center BGCOLOR="#FF0000">560000</TD>
</TR>
• Afisarea unei imagini pe fundalul unui tablou se realizeaza

adaugând marcajului <TABLE> atributul BACKGROUND:
<TABLE BORDER=5 BACKGROUND="stele.gif"> . . .

29
• Marirea distantelor dintre liniile tabelului si text se realizeaza

agaugând marcajului <TABLE> atributul CELLPADDING:
<TABLE BORDER=8 CELLPADDING=10> . . .
• Cresterea latimii liniilor tabelului se realizeaza adaugând

marcajului <TABLE> atributul CELLSPACING:
<TABLE CELLSPACING=8> . . .
• Includerea unei imagini într-o celula a tabelului:

<TD><IMG SRC="pictura.jpg"></TD>
• Unirea mai multor celule de pe aceeasi linie se realizeaza adaugând

marcajului <TH> sau <TD> atributul COLSPAN=n. Celula va fi
unita cu urmatoarele n celule:
<TD COLSPAN=3>Zona de est</TD>
• Unirea mai multor celule de pe aceeasi coloana se realizeaza

adaugând marcajului <TH> sau <TD> atributul ROWSPAN=n.
Celula va fi unita cu cele n celule de sub ea :
<TD ROWSPAN=3>Valori</TD>
• Adaugarea unui titlu deasupra unui tabel, în pozitie centrala, se

realizeaza adaugând dupa marcajul <TABLE> marcajul
<CAPTION>, ca mai jos :
<TABLE BORDER=8>
<CAPTION> Studiul comparativ al preturilor companiilor West si
International</CAPTION>
<TR> . . .
• Alinierea pe verticala a textului dintr-o celula poate fi modificata

adaugând marcajulu <TH> sau <TD> atributul VALIGN cu
valorile posibile top, middle sau bottom. Valoarea implicita este
middle.
• Indicarea marimii zonei ocupate de tabel în pagina se realizeaza
adaugând marcajului <TABLE> atributele WIDTH si HEIGHT.
Marimile se introduc în pixeli.
<TABLE BORDER=5 WIDTH=600 HEIGHT=450>

30
<TR> . . .
• Indicarea marimii unei celule se realizeaza adaugând marcajului
<TH> sau <TD> atributele WIDTH si HEIGHT. Marimile se
introduc în pixeli.
Exemplu : Realizati o pagina Web care afiseaza tabelul din figura de mai
jos :
Pe lânga utilizarea prezentata deja a tabelelor, acestea sunt frecvent

folosite pentru a realiza pagini sau zone din pagini în care informatia este
dispusa pe mai multe coloane. Un astfel de tabel va avea deci o linie si mai
multe coloane.

Curs 03

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curs 03

Încărcat de

Drepturi de autor:

Formate disponibile

21

Marcaje pentru realizarea legaturilor

Atributul LINK din marcajul BODY serveste la declararea culorii în care

Folosirea imaginilor pentru specificarea legaturilor

Imaginea folosita pentru specificarea legaturii va fi afisata într-un chenar.

<HTML><HEAD><TITLE>The Sistine Chapel</TITLE></HEAD>

O legatura poate declansa afisarea ferestrei pentru trimiterea unui mesaj

<I><FONT COLOR="#000099">Pentru orice informatii suplimentare puteti scrie

Varianta : folosirea unei imagini :

Tot prin referinte se comanda încarcarea unei aplicatii existente pe

<A HREF="test.exe">Testare calculator</A>

Aplicatia astfel încarcata se va lansa automat în executie pe calculatorul

Pentru declararea zonelor sensibile se va folosi rect pentru zonele

<AREA SHAPE="rect" COORDS="29,48,52,70" HREF="dep1.html">

<AREA SHAPE="poly" COORDS="10,80,50,10,100,100" HREF="cluj.html">

<AREA SHAPE="circle" COORDS="150,100,40" HREF="departe.html">

<A HREF="egipt.html" ONMOUSEOVER='rollover.src="ramses.jpg"'

La trecerea cursorului mouse-ului peste imaginea continuta în fisierul

• Cadrarea textului în cadrul celulei se realizeaza folosind în cadrul

• Culoarea fondului unei linii sau a unei celule se impune adaugând

• Afisarea unei imagini pe fundalul unui tablou se realizeaza

<TABLE BORDER=5 BACKGROUND="stele.gif"> . . .

• Marirea distantelor dintre liniile tabelului si text se realizeaza

• Cresterea latimii liniilor tabelului se realizeaza adaugând

• Includerea unei imagini într-o celula a tabelului:

• Unirea mai multor celule de pe aceeasi linie se realizeaza adaugând

<TD COLSPAN=3>Zona de est</TD>

• Unirea mai multor celule de pe aceeasi coloana se realizeaza

• Adaugarea unui titlu deasupra unui tabel, în pozitie centrala, se

• Alinierea pe verticala a textului dintr-o celula poate fi modificata

<TABLE BORDER=5 WIDTH=600 HEIGHT=450>

Pe lânga utilizarea prezentata deja a tabelelor, acestea sunt frecvent

S-ar putea să vă placă și