3 Cursul 3

Tehnologii WEB
Cursul 3
Liste in HTML
n HTML exista posibilitatea ca anumite enunuri s fie numerotate sau marcate ntrun anumit fel. O astfel de organizare poart numele de list.
n HTML se pot descrie trei tipuri de liste:
1. liste ordonate, n care elementele sunt numerotate
2. liste neordonate, n care elementele sunt marcate de asa natura nct nu se
sugereaz o anumit ordine a lor
3. liste de tip definitie
Mai jos putei observa cele trei tipuri de liste:
1. Lista ordonat
Elementul OL (Ordered Lists) creeaz o list ordonat. Elementele listei sunt trecute
ntre tag-urile <OL> i </OL>.
Elementul LI (List Item) descrie un element al listei. Tag-ul obligatoriu este cel de
nceput <LI>, iar cel de sfrit este facultativ: </LI>.
Elementul OL are atributul type. Valorile pe care le poate lua acest atribut, sunt:
<OL type = a>
<OL type = i>
<OL type = A>
<OL type = I>
<OL type = 1>
Exemplu:
Efect:
2. Lista neordonat
Elementul UL (Unordered Lists) descrie o list neordonat. Elementele listei sunt
cuprinse ntre tag-urile <UL> i </UL>.
Elementul UL are atributul type.Valorile pe care le poate lua acest atribut, sunt:
<UL type = cyrcle>
<UL type = disc>
<UL type = square>
Exemplu:
Efect:
Se pot construi si liste imbricate, dupa cum urmeaza din exemplul urmator:
Exemplu:
Efect:
3. Lista de tip definitie

Elementul DL (Definition Lists) are rolul de a descrie o list de definiii. El folosete
tag-urile <DL> si </DL>.
Elementul DT (Definition Term) definete termenul din list care trebuie descris. El
utilizeaz tag-ul <DT>.
Elementul DD (Definition Description) are rolul de a reine descrierea termenului. El
utilizeaz tag-ul <DD>.
Exemplu:
Efect:
Utilizari speciale ale listelor

Daca intr-o lista, in loc de elementele acesteia introduse prin <li> se insereaza un bloc
de text, aceasta va fi indentat ( intocmai ca elementele unei liste).
Exemplul 1:
<html>
<head><title>liste_exemplu</title></head>
<body>
<h1>Un bloc de text indentat</h1><hr>
<ol> Un bloc de text indentat. Un bloc de text indentat. Un
bloc de text indentat. Un bloc de text indentat. Un bloc de
text indentat. Un bloc de text indentat. Un bloc de text
indentat. Un bloc de text indentat. Un bloc de text
indentat.
</ol>
</body>
</html>
In exemplul urmator lista de definitii are itemii <dt> si <dd> multipli.
Exemplul 2:
<html>
<body>
<h1 align="center">O lista de definitii speciala</h1><hr>
<dl>program
<dt><b>Luni</b>
<dt><b>Marti</b>
<dt><b>Miercuri</b>
<dd><i>Ora 9.00.</i>Insciere
<dd><i>Ora 11.00.</i>Audieri
<dd><i>Ora 13.30.</i>Raspunsuri
</dl>
</body>
</html>
Ultimul exemplu este o lista neordonata personalizata care utilizeaza pe post de
elemente imagini si texte.
Exemplul 3:
<html>
<body>
<h1>O lista personalizata</h1><hr>
<ul>Tipuri de masini Volkswagen sunt:<br>
<li> <img src="images/reddot1.gif">Golf<br> </li>
<li> <img src="images/reddot2.gif">Jetta<br> </li>
<li> <img src="images/reddot3.gif">Passat<br> </li>
<li> <img src="images/reddot4.gif">Bora<br> </li>
<li> <img src="images/reddot5.gif">Corrado<br> </li>
<li> <img src="images/reddot6.gif">Transporter<br></li>
</ul>
</body>
</html>
Tabele in HTML
Paginile pot conine tabele. Elementul TABLE descrie un tabel. Tabelul utilizeaz tagurile <TABLE> i </TABLE>.
Elementul TR(table row) descrie o linie a tabelului. O linie a tabelului ncepe cu
<TR> i se termin atunci cnd este ntlnit un nou <TR>. Opional, se poate folosi </TR>.
Elemenul TD(table data) descrie o celul a tabelului. Se utilizeaz tag-urile <TD> i,
opional, </TD>.
Exemplu:
Efect:
Atributele elementului TABLE

Border definete grosimea liniilor (n pixeli) care nconjoar tabelul. Alturat putei
observa cum arat acelai tabel n care atributul border lipsete.
Exemplu:
Efect:
Un tabel poate conine i una sau mai multe imagini aa cum se vede mai jos, unde
imaginea este coninut de o celul a tabelului.
Exemplu:
Efect:
Mai mult, o celul a tabelului poate conine i imagine i text. De asemenea, tot ce am
nvat n paragrafele anterioare se poate aplica i aici. De exemplu, textul poate fi organizat
n paragrafe, apoi se pot folosi diverse stiluri de scriere, bold, italic, etc.
Exemplu:
Efect:
1. width - limea tabelului

Poate fi dat n procent fa de limea ferestrei browser-ului (width="50%")
sau n pixeli (width="500").
2. height - nlimea tabelului
Poate fi dat n procent fa de nlimea ferestrei browserului (height="75%")
sau n pixeli (height="200").
3. align - determin alinierea tabelului n pagin
Poate lua una din valorile: left (stnga), right (dreapta) sau center (n centru).
Dac, pe lng tabel, mai scriem i text, acesta se poziioneaz fa de tabel la fel cum
se poziioneaz fa de imagini.
Exemplu:
Efect:
Atributele elementului TR
align pentru toate celulele aliniaza continutul pe orizontala n cadrul celulei. Poate
lua valorile:
Left (aliniat stanga)
Right (aliniat dreapta)
Center (aliniat la centru)
Justify (aliniat n ambele parti)
valign - aliniaza continutul pe verticala n cadrul celulei. Poate lua valorile:
Top (sus)
Bottom (jos)
Middle (la mijloc)
bgcolor culoare de fond
Exemplu:
Efect:
Atributele elementului TD
width, height - limea i nlimea celulei (n procente din limea, respectiv
nlimea tabelului.), n plus, au efecte i pentru celelalte celule, pentru ca tabelul s fie
aliniat.
Exemplu:
Efect:
Elementele TH i CAPTION
Elementul TH
n loc de <TD> </TD> se poate folosi <TH> </TH>. Parametrii sunt aceiai, doar c
textele, implicit, sunt tiprite bold.
Elementul CAPTION are rolul de a permite scrierea titlului unui tabel. Titlul se scrie
ntre cele dou tag-uri <CAPTION> i </CAPTION>. Cele dou tag-uri trebuie s se
gseasc imediat dup <TABLE>.
Exemplu: <CAPTION> Un titlu </CAPTION>
Elementul CAPTION are atributul align.
Gruparea liniilor i a coloanelor unui tabel
Liniile unui tabel pot fi mprite n trei categorii:
1. linii de antet (primele linii ale tabelului)
2. linii de corp
3. liniile finale ale tabelului
Elementul THEAD are rolul de a marca liniile din antet. Se folosete tag-ul
<THEAD> i, opional </THEAD>.
Elementul TBODY are rolul de a marca liniile din corpul tabelului. Se folosete tag-ul
<TBODY> i, opional </TBODY>.
Elementul TFOOT are rolul de a marca liniile de sfritul tabelului. Se folosete tag-ul
<TFOOT> i, opional </TFOOT>.
Structura unui tabel care utilizeaz aceast facilitate este:
<TABLE ...>
<CAPTION> . .. </CAPTION>
<THEAD>
<TR>
...
</THEAD>
<TBODY>
<TR>
...
</TBODY>
<TFOOT>
<TR>
...
</TFOOT>
</TABLE>
n continuare, prezentm cteva atribute pe care le ntlnim la oricare din aceste trei
elemente:
align - aliniere orizontal (poate lua valorile pe care le-am ntlnit deja).
valign - aliniere vertical (se pot grupa i coloanele unui tabel, nu numai liniile).
Elementul COLGROUP permite gruparea coloanelor unui tabel. Se utilizeaz tag-urile
<COLGROUP atribute> i, opional </COLGROUP>.
Privii tabelul urmtor. El are trei coloane. Alinierea coninutului coloanelor i spaiul
ocupat de ele a fost determinat cu ajutorul a dou elemente COLGROUP.
Primul element stabilete caracteristicile de afiare ale primei coloane, al doilea
stabilete caracteristicile de afiare a urmtoarelor dou coloane.
Observai, mai jos, cum s-a obinut acest tabel.
Exemplu:
Efect:
Tabele in HTML
Cadrele permit mprirea unei ferestre n seciuni independente ntre ele, n fiecare
dintre acestea fiind posibil ncrcarea unui document HTML. Astfel, utilizatorul poate
vizualiza simultan mai multe documente.
De exemplu, putem mpri documentul n dou cadre. n primul cadru va fi afiat o
bara de navigaie. Selectarea unui meniu al barei de navigaie va determina ncrcarea paginii
corespunztoare n cel de-al doilea cadru. Astfel, bara de meniuri va fi vizibil n orice
moment al navigrii site-ului.
Pentru structurarea unui document HTML n cadre sunt utilizate tagurile:
<frameset>
<frame>
<noframe>
<iframe>
Organizarea documentului n cadre Tagul <frameset>

Un document cu cadre se realizeaz similar unui document HTML oarecare, n care
tagurile <body>, respectiv </body> sunt nlocuite cu tagurile <frameset>, respectiv
</frameset>:
<html>
<head>
...
</head>
<frameset>
</frameset>
</html>
Aadar, tagul <frameset> permite structurarea documentului principal n cadre. n
interiorul perechii <frameset> </frameset> nu pot exista dect elemente:
<frameset>
<frame>
<noframe>
Tagul <frameset> accept urmtoarele atribute:

rows primete ca parametru o list de valori, separate prin virgul, ce reprezint
nlimea cadrelor orizontale ale documentului principal. Numrul de cadre orizontale este dat
de numrul de valori din list.
Valorile sunt exprimate:
fie prin numere ntregi pozitive (nlime absolut exprimat n pixeli)
fie prin procente din nlimea cadrului printe (nlime relativ)
fie prin caracterul de puncuaie *, care semnific o nlime relativ
Observaii:
Nu se recomand ca toate valorile s fie absolute, deoarece browserele pot utiliza
rezoluii diferite, ceea ce poate duce la distorsiuni ale afirii;
n cazul utilizrii procentelor, suma acestora nu poate s depeasc 100%, n caz
contrar, browserul va trunchia toate valorile pn ce suma va fi 100.
cols permite mprirea cadrului curent n sectoare verticale. Parametrii acceptai respect
aceleai reguli ca i n cazul atributului rows, numai c se refer la lungimea cadrului.
border primete o valoare ntreag nenegativ, reprezentnd grosimea, exprimat n pixeli,
a chenarului cadrelor. Implicit, grosimea chenarului este de 5 pixeli. Valoarea 0 a atributului
border inhib afiarea chenarelor tuturor cadrelor.
bordercolor permite setarea culorii chenarelor cadrelor. Culoarea poate fi specificat fie
printr-un triplet hexa de forma #rrggbb, fie printr-un nume predefinit de culoare.
frameborder controleaza afiarea/ascunderea chenarelor tuturor cadrelor. Atributul poate
primi valorile:
yes sau 1 (se foreaz afiarea chenarelor)
no sau 0 ( se foreaz ascunderea chenarelor)
framespacing permite specificarea distanei, n pixeli, de spaiu liber n jurul tuturor
cadrelor.
Observaie:
Ascunderea unui chenar, prin utilizarea perechii frameborder=no sau border=0,

face ca acesta s nu mai fie vizibil pentru utilizator. Totui, n Internet Explorer, utilizatorul
poate opta pentru redimensionarea cadrului, prin operaia Drag and Drop asupra marginii
invizibile. Pentru a inhiba aceast posibilitate, ascunderea chenarului trebuie nsoit de
secvena: framespacing=0.
Definirea cadrelor - Tagul <frame>
Tagul <frame> permite definirea unui cadru n interiorul unui set de cadre. El are sens
numai atunci cnd apare n interiorul perechii <frameset> </frameset>.
Atribute acceptate:
src specific adresa URL a documentului ce va fi ncrcat n cadrul respectiv;
name specific numele cadrului, nume ce va fi utilizat pentru referirea cadrului
respectiv atunci cnd se va ncrca n el un alt document HTML, prin intermediul unei
hiperlegturi aflate n alt cadru. Numele este o combinaie de caractere alfanumerice;
marginwidth, marginheight controleaza distana, exprimat n pixeli, ntre
coninutul cadrului i chenarul su;
scrolling atributul controleaz afiarea/ascunderea barelor de defilare
(orizontal sau vertical).
Poate primi valorile:
yes se foreaz afiarea barelor de defilare;
no - se foreaz ascunderea barelor de defilare;
auto - barele de defilare vor fi afiate numai atunci cnd este necesar (cnd
coninutul cadrului depete lungimea i/sau nlimea cadrului va fi afiat bara de defilare
orizontal i/sau cea vertical);
border permite setarea grosimii chenarului cadrului curent. Valoarea atributului
border aflat n interiorul tagului frame este prioritar fa de valoarea aceluiai atribut aflat n
tagul frameset.
noresize se inhib utilizatorului posibilitatea de a redimensiona cadrele. Altfel,
el are aceast posibilitate, prin operaia Drag and Drop asupra marginilor cadrelor.
frameborder controleaza afiarea/ascunderea chenarului cadrului curent.
Atributul poate primi valorile: yes sau 1(se afieaz chenarul), no sau 0 (se ascunde chenarul);
framespacing permite specificarea distanei, n pixeli, de spaiu liber n jurul
cadrului.
bordercolor permite specificarea culorii chenarului cadrului respectiv.
Browserele vechi - Tagul <noframe>
Tagul <noframe> este utilizat n cazul n care se navigheaz cu un browser mai vechi,
care nu suport cadrele. n aceast situaie, browserul va afia coninutul inclus n interiorul
perechii <noframe> </noframe>. Dac ns, browserul recunoate cadrele, el va ignora
coninutul perechii <noframe> </noframe>.
De regul, atunci cnd un browser nu recunoate un tag, nu l interpreteaz. Acest
lucru se poate ntmpla i n cazul tagurilor <frameset>, <frame>. Este evident c dac un
browser nu recunoate tagurile <frameset> i <frame> el nu va recunoate nici <noframe>.
ns, va interpreta tagurile pe care le recunoate, adic, n acest caz, cele cuprinse ntre
<noframe> i </noframe>. De fapt, efectul tagului <noframe> este, n cazul browserelor care
recunosc cadre, acela de a ignora coninutul inclus n interiorul perechii <noframe>
</noframe>.
Cadre in-line - Tagul <iframe> (in-line frame)
Tagurile <iframe> sunt similare tagurilor <frame>, cu deosebirea c se includ n

documente HTML obinuite (nu n documente HTML cu cadre), adic n interiorul perechii
<body> </body>.
La ora actual numai Internet Explorer accept cadre in-line. Dac un browser nu
recunoate cadre, el va afia coninutul cuprins ntre <iframe> i </iframe>.
Tagul <iframe> accept aceleai atribute ca i tagul <frame>, n plus accept atribute
preluate de la tagul <img>, care controleaz modul de afiare al cadrului n interiorul
documentului.
Atribute acceptate:
1. preluate de la tagul <frame>:
2. preluate de la tagul <img>:
src
align
name
width, height
scrolling
vspace, hspace
border
bordercolor
frameborder
framespacing
noresize
marginwidth, marginheight
EXEMPLE:
1. Realizarea cadrelor orizontale

<html>
<head>
<title>Universitatea Constantin Brancusi</title>
</head>
<frameset rows="150,*,20%">
<frame src="antet.html">
<frame src="continut.html">
<frame src="adresa.html">
</frameset>
</html>

<html>
<head>
</head>
<body>
<center>
<h3>Universitatea Constantin Brancusi</h3>
<h3>Facultatea de Inginerie</h3>
<h3>Catedra de Automatica si Informatica</h3>
</center>
</body>
</html>

<html>
<head>
</head>
<body>
<p>Specializarile Facultatii de Inginerie sunt: </p>
<p>Automatica si Informatica; Mecanica;
Energetica.</p>
</body>
</html>

<html>
<head>
</head>
<body>
<p align="center"><b>Targu-Jiu, Str. Geneva
3, Telefon: 0253.111.111.</b></p>
</body>
</html>
2. Imbricarea cadrelor

<html>
<head>
<title>Universitatea Constantin Brancusi</title></head>
<frameset cols="100,*">
<frame src="meniu.html">
<frame src="desprenoi.html">
</frameset>
</frameset>
</html>
3. Cadre imbricate cu chenare colorate de diverse grosimi

<html>
<head>
<title>Cadre imbricate</title>
</head>
<frameset cols="25%,*" border="30"
bordercolor="red">
<frame src="Pagina1.html">
</frameset>
<frameset cols="*,2*,3*" >
<frame src="Pagina3.html" scrolling=yes>
<frame src="Pagina4.html" scrolling=auto>
<frame src="Pagina5.html" scrolling=no>
</frameset>
<frameset cols="*,100" border="15">
<frame src="Pagina7.html bordercolor="maroon"
noresize>
</frameset>
</frameset>
</html>
4. Chenare inactive

<html>
<head>
<title>Universitatea Constantin Brancusi</title>
</head>
<frameset rows="92,*,20%" frameborder="no" framespacing="0">
<frameset cols="100,*">
<frame src="meniu.html">
<frame src="desprenoi.html">
</frameset>
</frameset>
</html>
5. Cadre in-line
<html>
<head>
<title>Formate de Imagini</title>
</head>
<body>
<iframe name="cadru" src="Generalitati.html" width="200" height="100"
border="3" align="right">Site realizat cu cadre in-line. Browserul dvs. nu
suporta!</iframe>
<b>Formate de Imagini:
<ul>
<li><a href="bmp.html" target="cadru">BMP</a></li>
<li><a href="jpeg.html" target="cadru">JPEG</a></li>
<li><a href="tiff.html" target="cadru">TIFF</a></li>
</ul>
</b>
</body>
</html>

3 Cursul 3

Încărcat de

Informații document

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

3 Cursul 3

Încărcat de

Drepturi de autor:

Formate disponibile

Tehnologii WEB

3. Lista de tip definitie

Utilizari speciale ale listelor

Atributele elementului TABLE

1. width - limea tabelului

Organizarea documentului n cadre Tagul <frameset>

Tagul <frameset> accept urmtoarele atribute:

Ascunderea unui chenar, prin utilizarea perechii frameborder=no sau border=0,

Tagurile <iframe> sunt similare tagurilor <frame>, cu deosebirea c se includ n

3. Cadre imbricate cu chenare colorate de diverse grosimi

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