Tehnologii WEB

Laborator 2
Planul lectiei:

• Sintaxa folosita la afisarea listelor

• Sintaxa folosita la crearea tabelelor

• Sintaxa folosita la crearea cadrelor

Ce trebuie stiut?
Forma generala a unui document HTML este:
Tag-uri utilizate pentru afisarea listelor:
Exemplul nr. 1:
<ol type=I> <li>termen 2
<ul type=square>
<li>termen 1
<li>termen2-1 :
<ul>
<dl>
<li>termen1-1 : <dt>termen2-1a
<dl> <dd>descriere termen2-1a
<dt>termen1-1a <dt>termen2-1b
<dd>descriere termen1-1a <dd>descriere termen2-1b
<dt>termen1-1b </dl>
<dd>descriere termen1-1b <li>termen2-2 :
</dl> <dl>
<li>termen1-2 : <dt>termen2-2a
<dl>
<dd>descriere termen2-2a
<dt>termen1-2a
<dt>termen2-2b
<dd>descriere termen1-2a
<dd>descriere termen2-2b
<dt>termen1-2b </dl>
<dd>descriere termen1-2b </ul>
</dl> <li>termen 3
</ul> </ol>
<li>termen 2
Tabele

2. Notiuni introductive

2.1. Tabele şi cadre

Dacă se doreşte existenţa unor date adiacente într-o pagină (de exemplu text pe
mai multe coloane) soluţia optimă o reprezintă tabelele.

2.2.Bazele formatării tabelelor

Trebuie început prin specificarea parametrilor tabelului, apoi parametrii fiecărei
linii ţi fiecare celulă trebuie înconjurată de marcaje <TD> </TD> date de tabel.

Considerăm secvenţa de mai jos în care datele sunt plasate pe acelaşi rând
delimitat de maarcajele <TD></TD>.

<B> Canale de televiziune uzuale </B>

<TABLE BORDER=1>
<TR>
<TD>PROTV</TD>
<TD>ANTENA1</TD>
<TD>PRIMA</TD>
<TD>ACASA</TD>
</TR>
</TABLE>
Tabele

În secvenţa următoare aceleaşi date sunt organizate sub

forma unui element pe fiecare rând.

<B> Canale de televiziune uzuale </B>

<TABLE BORDER=1>
<TR>
<TD>PROTV</TD>
</TR>
<TR>
<TD>ANTENA1</TD>
</TR>
<TR>
<TD>PRIMA</TD>
</TR>
<TR>
<TD>ACASA</TD>
</TR>
</TABLE>
Tabele
Fiecare dintre liniile de mai sus poate avea o aliniere specificata prin ALIGN= iar
marcajul TABLE poate avea următoarele opţiuni:
Marcaj Semnificaţie
BORDER=n Lăţimea zonei umbrite din jurul tabelului, dacă are valoarea 0 atunci se elimină caroiajul
din interiorul tabelului
CELLSPACING=n Spaţierea dintre celule (pixeli)
CELLPADDING=n Spaţierea dintre chenar şi conţinutul celulei (pixeli)
WIDTH=n Lăţimea dorită, prioritară faţă de lăţime celulă (pixeli sau procente)

Controlul lăţimii tabelului se poate realiza cu WIDTH pentru specificare lungime

exactă tabel pe ecran indiferent de conţinut respectiv CELLPADDING care indică spaţiul în
pixeli dintre marginea interioară a chenarului unei celule ţi marerialul conţinut în celulă sau
CELLSPACING care se referă la lăţimea liniilor de caroiaj dintre celulele de date.

Ex.

<B> Canale de televiziune uzuale </B>

<TABLE BORDER=1 WIDTH=”75%”>
sau <TABLE BORDER=1 CELLPADDING=10>
<TR><TD>PROTV</TD></TR>
<TR><TD>ANTENA1</TD></TR>
<TR><TD>PRIMA</TD></TR>
<TR><TD>ACASA</TD></TR>
</TABLE>
Tabele
În cadrul unui tabel se pot specifica antete de coloane prin
intermediul marcajului TH care înlocuieşte marcajul TD în definiţia liniei. TH
este aproape identic cu cu TD cu 2 excepţii şi anume textul din cadrul unui
marcaj TH este scris cu aldine si centrat orizontal într-o celulă.
Se mai poate specifica şi alinierea orizontală a celulelor de date cu
opţiunea ALIGNcare poate lua valorile- center, right. VALIGN poate permite
specificarea alinierii pe verticală – top, bottom, middle. Liniile şi coloanele
se pot întinde pe mai multe unitaţi din tabel de exemplu specificând
COLSPAN=2 pot extinde o nouă celulă de date pe 2 coloane.

Ex.

<TABLE BORDER=5 WIDTH=”50%”>

<TR>
<TD COLSPAN=2
ALIGN=Center><FONT SIZE=5>Film & muzica</FONT></TD>
</TR>
<TH>Filmul</TH><TH>Ziua</TH>
<TR ALIGN=CENTER><TD>Independence Day</TD><TD>Marti</TD></TR>
<TR ALIGN=CENTER><TD>Volcano</TD><TD>Marti</TD></TR>
</TABLE>
Tabele
2.3 Formatarea avansată a tabelelor

Pentru crearea tabelelor există şi opţiuni suplimentare. Una dintre cele mai
importante este controlul culorilor din tabele, adică culoarea de fond a celulelor. Culorile
din cadrul unei celule apar în cadrul marcajului <TD>.

Ex.

<TD> BGCOLOR=red>Text pe fond rosu</TD>

Atributul COLSPAN a fost discutat mai sus, pentru înţelegerea utilizarii ROWSPAN -
extindere celulă de date pe mai multe rânduri, se consideră exemplul de mai jos în care în
celula multilinie se include o imagine grafică.

Ex.

<TABLE BORDER=1 CELLPADDING=5>

<TR>
<TD BGCOLOR=blue ROWSPAN=5><IMG SRC=”grafice/programe.gif”</TD>
</TR>
<TR><TD>PROTV</TD></TR>
<TR><TD>ANTENA1</TD></TR>
<TR><TD>PRIMA</TD></TR>
<TR><TD>ACASA</TD></TR>
</TABLE>
Tabele
Internet Explorer adaugă marcajele BACKGROUND ce permite grafice de fond în
interiorul celulelor din tabele, BORDERCOLOR ce permite controlul detaliat al culorii
chenarului, oferă şi posibilitatea de a defini cele două culori utilizate pentru chenar prin
BORDERCOLORBLACK şi BORDERCOLORLIGHT, şi specificarea unei imagini grafice de fond în
cadrul celulelor individuale de date prin BACKGROUND=fisier_grafic.

Ex.

<TABLE BORDERCOLOR=blue BORDER=5 CELLPADDING=20>

<TR>
<TD BACKGROUND=”fond.gif”>
<FONT SIZE=5 COLOR=teal>Drumul e lung si pana ajung…</FONT>
</TD>
</TR>
</TABLE>
<HR>
<TABLE BORDERCOLORLIGHT=yelow BORDERCOLORDARK=red CELLPADDING=10 BORDER=10>
<TR>
<TD>
<FONT SIZE=4>Rock’n Roll</FONT>
</TD>
</TR>
</TABLE>
Cadre

Pagini în pagini

O noţiune nouă care face ca tabelele să fie mai uşor de

înţeles este cea de cadru. Practic cadrele răspund la
întrebarea ce se întămplă dacă fiecare celulă din tabel ar fi o
pagină proprie Web deci în momentul în care avem pagini în
cadrul paginilor.

Cadrul individual este specificat printr-un marcaj

<FRAME> care la rîndul său este inserat într-un specificator
<FRAMESET> ce indică volumul de spaţiu alocat fiecărui panou
de informaţie.

În exemplul de mai jos se separă ecranul în două

secţiuni prima de 75 pixeli iar cealaltă ocupând întreg ecranul.
Cadre
EX.

<HTML>
<FRAMESET ROWS=”75,*”>
<FRAME SRC=”frames/sus.html”>
<FRAME SRC=”frames/jos.html”>
</FRAMESET>
</HTML>

unde
sus.html
jos.html

<BODY BGCOLOR=yellow>
<BODY BGCOLOR=blue TEXT=white>
<CENTER><h2> partea de sus !</h2>
<TABLE WIDTH=100% HEIGHT=100%>
</CENTER>
<TR><TD ALIGN=center VALIGN=center>
</BODY><h2>partea de jos !!</h2>
</TD></TR>
</TABLE>
</BODY>
Cadre
Marcajul <FRAMESET> crează un grup de cadre în care se va împărţi o pagină Web.
Se pot utiliza opţiunile ROWS pentru împărţire în panouri orizontale şi COLS pentru
specificare panouri verticale. Puteţi utiliza în cadrul atributelor trei valori diferite – număr
care specifică dimensiunea dorită în pixeli, asterisc pentu specificare rest spaţiu şi n%
pentru specificare un procent din lăţime.

Ex.

<HTML>
<FRAMESET COLS=”80%,*”>
<FRAMESET ROWS=”30%,70%”>
<FRAME SRC=”frames/sus.html”>
<FRAME SRC=”frames/jos.html”>
</FRAMESET>
<FRAMESET ROWS=”33%,33%,*”>
<FRAME SRC=”frames/img1.html”>
<FRAME SRC=”frames/img2.html”>
<FRAME SRC=”frames/img3.html”>
</FRAMESET>
</FRAMESET>
</HTML>
Cadre
Exista câteva atribute care pot fi specificate la definirea cadrelor din care cel mai important este NAME=,
prin care se atribuie câte un nume unic fiecărui cadru care poate fi utilizat ca mijloc de a controla care dintre
ferestre să fie afectată de anumite acţiuni.

EX.

<HTML>
<FRAMESET COLS=”20%,*”>
<FRAME SRC=”frames/animale.html”>
<FRAME SRC=”frames/implicit.html” NAME=main>
</FRAMESET>
</HTML>
iar animale.html este
unde implict.html are forma
<BODY BGCOLOR=yellow>
<BODY BGCOLOR=white>
<CENTER>
<IMG SRC=”animal.gif”>
<FONT SIZE=6 COLOR=blue>
</BODY>
<B>Alege un animal</B>
</FONT>
<P>
<FONT SIZE=5>
<A HREF=”caine.html” target=main> Caine</A>
<P>
<A HREF=”pisica.html” target=main> Pisica</A>
<P>
<A HREF=”pasare.html” target=main> Pasare</A>
<P>
<A HREF=”implicit.html”>[home]</A>
</FONT>
</CENTER>
</BODY>
Cadre
Marcajul FRAME are două atribute importante. Primul permite specificarea
laţimii unei margini a cadrului – FRAMEBORDER cu un atribut în pixeli. Al doilea
SCROLLING permite forţarea unei bare de derulare sau eliminarea acesteia.

Ex.

<HTML>
<FRAMESET COLS=”20%,*”>
<FRAME SRC=”animale.html” FRAMEBORDER=5 SCROLLING=on>
<FRAME SRC=”implicit.html” name=main>
</FRAMESET>
</HTML>