TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
HTML - HyperText Markup Language
5. MARCATORI. NUMEROTARE.
Pentru a organiza cât mai facil conținutul paginii Web, HTML pune la dispoziția dezvoltatorilor câteva
tag-uri/etichete utile pentru așezarea și evidențierea acestuia în pagină.
5.1 Elemente pentru marcatori sau numerotare
HTML oferă trei posibilități de realizare a listelor, prin intermediul unor etichete specifice:
- Liste neordonate: se realizează prin intermediul etichetei <ul> și au rolul de a lista informațiile
folosind buline simple (exemplu: ● Primul element al listei);
- Liste ordonate: se realizează prin intermediul etichetei <ol> și au rolul de a lista informațiile
prin numerotare (exemplu: 1. Primul element al listei);
- Liste de definiții: se realizează prin intermediul etichetei <dl> și au rolul de a afișa elementele
în același mod în care sunt aranjate într-un dicționar.
Liste neordonate
Tag-ul HTML folosit pentru formarea listelor neordonate este <ul>. Astfel, <ul> reprezintă elementul
de început și, după scrierea listei, acesta se încheie cu </ul>.
Majoritatea elementelor folosite pentru marcatori și numerotare sunt compuse din unul sau mai
multe elemente de tipul <li> ... </li> (eng. list element). Fără atributul “type” specificat în “<ul>”
acestea prezintă un marcaj ca un bullet (buline - ●).
Exemplu:
<html>
<head>
<title>Titlul documentului</title>
</head>
<body>
<ul>
<li>Contabilitate și Informatică de Gestiune</li>
<li>Finanțe și Bănci</li>
<li>Management</li>
</ul>
</body>
</html>
Rezultat:
Contabilitate și Informatică de Gestiune
Finanțe și Bănci
Management
1
TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
Important! – Atributul TYPE
Puteți utiliza atributul “type” pentru tag-ul <ul> cu scopul de a specifica tipul de marcaj pe care
intenționați să îl folosiți. Implicit, este un disc sau o bulină, așa cum ați observat în exemplul anterior.
Cele trei opțiuni posibile:
- <ul type = "square">
- <ul type = "disc">
- <ul type = "circle">
Exemplu:
<html>
<head>
<title>Titlul documentului</title>
</head>
<body>
<ul type = "square">
<li>Contabilitate și Informatică de Gestiune</li>
<li>Finanțe și Bănci</li>
<li>Management</li>
</ul>
</body>
</html>
Rezultat:
Contabilitate și Informatică de Gestiune
Finanțe și Bănci
Management
Liste ordonate
Dacă se cere plasarea articolelor/elementelor sub formă de listă numerotată în loc de buline, atunci
va fi utilizată eticheta HTML <ol>. Numerotarea elementelor din listă începe de la 1 și este
incrementată cu câte o unitate pentru fiecare element succesiv etichetat cu <li>.
Exemplu:
<html>
<head>
<title>Titlul documentului</title>
</head>
<body>
<ol>
<li>Contabilitate și Informatică de Gestiune</li>
<li>Finanțe și Bănci</li>
<li>Management</li>
</ol>
</body>
</html>
2
TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
Rezultat:
1. Contabilitate și Informatică de Gestiune
2. Finanțe și Bănci
3. Management
Important! – Atributul TYPE
Există mai multe tipuri de numerotare care pot fi folosite. Acestea sunt controlate de atributul “type”
care este adăugat în elementul <ol>. Astfel:
- type="1" – numerotarea va fi de forma: 1, 2, 3, ...
- type="a" – numerotarea va fi de forma: a, b, c, ...
- type="i" – numerotarea va fi de forma: i, ii, iii, ...
- type="I" – numerotarea va fi de forma: I, II, III, ...
Exemplu:
<html>
<head>
<title>Titlul documentului</title>
</head>
<body>
<ol type="a">
<li>Contabilitate și Informatică de Gestiune</li>
<li>Finanțe și Bănci</li>
<li>Management</li>
</ol>
</body>
</html>
Rezultat:
a. Contabilitate și Informatică de Gestiune
b. Finanțe și Bănci
c. Management
Important! – Atributul START
Pentru a specifica numărul de început al listei, se folosește atributul “start”. De exemplu:
- <ol type = "1" start = "4"> - Numerotarea începe cu 4.
- <ol type = "I" start = "4"> - Numerotarea începe cu IV.
- <ol type = "i" start = "4"> - Numerotarea începe cu iv.
- <ol type = "a" start = "4"> - Literele încep cu d.
- <ol type = "A" start = "4"> - Literele încep cu D.
3
TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
Exemplu:
<html>
<head>
<title>Titlul documentului</title>
</head>
<body>
<ol type="1" start="3">
<li>Contabilitate și Informatică de Gestiune</li>
<li>Finanțe și Bănci</li>
<li>Management</li>
</ol>
</body>
</html>
Rezultat:
3. Contabilitate și Informatică de Gestiune
4. Finanțe și Bănci
5. Management
Liste de definitii
HTML și XHTML acceptă un stil de listă denumită listă de definiții, în cadrul căreia informațiile sunt
listate ca într-un dicționar sau enciclopedie. Lista de definiții reprezintă modalitatea ideală pentru a
prezenta un glosar, o listă de termeni sau altă listă de tipul nume/valoare.
Lista de definiții utilizează următoarele trei etichete:
- <dl> ... </dl> - definește începutul, respectiv sfârșitul listei și este folosit (împreună cu “dt” si
“dd”) pentru definirea și încadrarea unei liste de definiții.
- <dt> ... </dt> - defineste elementul din listă; fiecare tip de astfel de element trebuie precedat
de unul sau mai multe elemente <dd> ... </dd>, folosite pentru descrierea elementului
definit.
Exemplu:
<body>
<dl>
<dt>HTML</dt>
<dd> - Hyper Text Markup Language</dd>
<dd> - Limbaj pentru pagini Web</dd>
<dt>Dog</dt>
<dd>dog = câine</dd>
<dd>animal de companie</dd>
</dl>
</body>
4
TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
Rezultat:
HTML
- Hyper Text Markup Language
- Limbaj pentru pagini Web
Dog
dog = câine
animal de companie
5.2 Liste imbricate
Pentru o eficiență mai bună se pot combina elementele de marcaj și numerotare, introducând
elementele <ul> și <ol> imbricate (unele în celelalte) împreună cu elementele <li>.
Exemplu:
<html>
<head>
<title>Titlul documentului</title>
</head>
<body>
<ul type="square">
<li> List item 1 ... </li>
<li> List item 2 ...
<ol type="a" start="3">
<li> Alt List item ... </li>
<li> Alt List item ... </li>
</ol></li>
<li> List item 5 ... </li>
</ul>
</body>
</html>
Rezultat:
List item 1 ...
List item 2 ...
c. Alt List item ...
d. Alt List item ...
List item 5 ..
6. IMAGINI
6.1 Inserarea unei imagini
Inserarea unei imagini în cadrul paginii Web va fi făcută utilizând eticheta <img>. Eticheta <img> este
o etichetă goală, ceea ce înseamnă că poate conține doar o listă de atribute, fără să conțină o etichetă
de închidere. Pentru a plasa o imagine simplă pe o pagină Web, alături de eticheta <img>, folosim
atributul src. Acest atribut face referire la adresa URL a imaginii, indicând locația în care se află
imaginea.
5
TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
Sintaxă:
<img src = "Adresa URL a imaginii" ... listă de atribute/>
Exemplu:
<html>
<head>
<title>Titlul documentului</title>
</head>
<body>
<img src="[Link]"></img>
</body>
</html>
6.2 Formatarea imaginii
Cele mai folosite formate pentru imaginile adăugate într-o pagina HTML sunt PNG și JPEG. Avantajul
acestora este că imaginile au o mărime mică (în bytes), având maximum 256 de culori. Alte tipuri de
formate (folosite mai rar) sunt: GIF, BMP, TIFF, PCX.
Important!
Pe lângă atributul fundamental src, folosit alături de tag-ul specific inserării imaginilor, HTML oferă o
serie de atribute adiționale prin intermediul cărora imaginile pot fi formatate:
- Alt: indică textul care va apărea dacă imaginea nu e afișată (de unele browsere) sau textul care
apare atunci când utilizatorul poziționează, în browser, mouse-ul peste imagine;
- Align: permite așezarea imaginii în locuri diferite pe pagină. Pot fi folosite următoarele
opțiuni: Bottom , Middle , Top , Left , Right , TextTop , ABSMiddle , Baseline , ABSBottom;
- Width: valoarea acestui atribut reprezintă lățimea imaginii, în pixeli. Dacă nu este scris
imaginea va fi prezentată cu lățimea original;
- Height: valoarea acestui atribut reprezintă înălțimea imaginii, în pixeli. Dacă nu este scris
imaginea va fi prezentată cu înălțimea originală;
- Border: prin adăugarea acestui atribut imaginea va apărea înconjurată de un chenar, valoarea
acestui atribut reprezentând grosimea chenarului, în pixeli;
- Hspace: acest atribut este utilizat pentru setarea spațiului orizontal pe ambele parți ale
imaginii, specificat în pixeli. De exemplu, o valoare de 5 va pune un spațiu invizibil, de 5 pixeli,
în părțile orizontale ale imaginii;
- Vspace: acest atribut este utilizat pentru setarea spațiului vertical pe ambele părți ale
imaginii, specificat în pixeli. De exemplu, o valoare de 5 va pune un spațiu invizibil, de 5 pixeli,
în părțile verticale ale imaginii.
Exemplu:
<html>
<head>
<title>Titlul documentului</title>
6
TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
</head>
<body>
<img src="[Link]" alt="puteti adauga orice text" align="top" width="100" height="120"
border="3" hspace="12" vspace="8"></img>
</body>
</html>
Notă: Încercați singuri mai multe exemple, folosind și alte atribute și valori prezentate mai sus.
7. LINK-URI
O pagină Web poate conține diferite link-uri care au rolul de a direcționa utilizatorul către alte pagini
Web sau către părți specifice dintr-o anumită pagină. Aceste link-uri sunt cunoscute sub numele de
hyperlink-uri. Link-urile hyperlink permit vizitatorilor să navigheze între site-uri Web printr-un simplu
click pe cuvinte, expresii și/sau imagini. Astfel, puteți realiza hyperlink-uri folosind texte sau imagini
disponibile pe pagina dumneavoastră Web.
7.1 Crearea link-urilor
Pentru a insera un link în cadrul paginii Web, se folosește eticheta HTML <a>. Această etichetă se
numește etichetă de ancorare și orice element cuprins între eticheta de deschidere <a> și eticheta
de închidere </a> devine parte a link-ului. Astfel, orice utilizator poate da click pe respectiva parte
pentru a ajunge la documentul conectat.
Sintaxă:
<a href = "URL " title= "titlu link ">nume</a>
Unde:
- a reprezintă elementul specific pentru crearea link-urilor;
- href reprezintă atributul care marchează indicarea adresei link-ului;
- url reprezintă adresa link-ului (a paginii care va fi deschisă). De exemplu: [Link]
- title reprezintă atributul prin care se dă un titlu link-ului (un text ascuns, care apare numai când este
poziționat mouse-ul deasupra link-ului);
- titlu link reprezintă textul ascuns care apare când este poziționat mouse-ul deasupra link-ului;
- nume reprezintă textul care va apărea în browser și pe care trebuie dat click cu mouse-ul. În loc de
acest text se poate folosi și o imagine, astfel “nume” va fi înlocuit cu <img
src="nume_imagine.extensie">
Exemplu:
<html>
<head>
<title>Titlul documentului</title>
</head>
<body>
7
TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
<p>Mai multe detalii disponibile la:</p>
<a href = "[Link] target = "_blank">W3Schools</a>
</body>
</html>
Important!
Culoarea link-urilor poate fi schimbată prin utilizarea următoarele atribute, care trebuie scrise în
interiorul elementului <body>:
- link="#0000ff" - reprezintă culoarea link-ului în browser;
- vlink="#00ffff" - reprezintă culoarea link-ului când pagina respectivă a fost/este vizitată;
- alink="#ff0000" - reprezintă culoarea link-ului când acesta este activat.
Exemplu:
<html>
<head>
<title>Titlul documentului</title>
</head>
<body bgcolor="#00ffff" link="#000000" vlink="#ff0000" alink="#00ff00">
<p>Mai multe detalii disponibile la:</p>
<a href = "[Link] target = "_blank">W3Schools</a>
</body>
</html>
7.2 Link-uri externe
Sunt cele mai utilizate și, la rândul lor, sunt de două tipuri:
Link-uri externe către pagini din cadrul aceleiași pagini Web
În cazul acestor tipuri de link-uri, nu este obligatoriu ca adresa URL să includă și domeniul site-ului,
cum ar fi “[Link] ci se poate folosi doar calea în directoare, adică denumirea și
extensia documentului la care se face saltul.
Astfel:
- dacă documentul țintă se află în același director cu fișierul în care se scrie link-ul, codul va fi scris
sub forma: <a href="nume_fisier.extensie" title="Titlu link">Nume</a>
- dacă documentul țintă se află într-un director anterior celui în care se află fișierul în care se scrie
link-ul, codul va fi scris sub forma: <a href="../nume_fisier.extensie" title="Titlu
link">Nume</a>
- dacă documentul țintă se află într-un director din cel care se află fișierul în care se scrie link-ul,
codul va fi scris sub forma: <a href="director/nume_fisier.extensie" title="Titlu link">Nume</a>
8
TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
Link-uri externe către alte site-uri Web
În cazul acestor tipuri de link-uri, adresa URL trebuie sa conțină și domeniul (numele site-ului) paginii
țintă. Astfel, codul HTML se va scrie, de exemplu, sub forma: <a href="[Link]
title="Titlu link">Nume</a>
7.3 Link-uri interne
Link-uri interne reprezintă link-uri către alte texte din aceeași pagină. Se folosesc atunci când pagina
respectivă este formată dintr-un conținut extins și e nevoie sa se “sară” spre anumite texte din
pagină.
Crearea de link-uri interne poate fi efectuată în două moduri, astfel:
METODA 1. Se scrie următorul cod la textul țintă, care marchează locația unde se va face saltul și se
află în aceeași pagină cu link-ul: <a name="cuvant">Textul țintă</a>
Unde:
- atributul "name" indică ținta pentru link și poate fi considerat un fel de semn care indica locația.
- "cuvânt" poate fi orice cuvânt, însă trebuie sa fie unic pentru fiecare link.
- "Textul țintă" reprezintă textul unde se face saltul.
METODA 2. În locul în care se dorește să fie link-ul (acolo unde o să dăm click pentru a face saltul
către textul ales), se scrie următorul cod: <a href="#cuvant">Nume</a>
Unde: "cuvânt" este același text scris la pasul 1.
Notă: Link-urile interne și externe pot fi combinate. Astfel, putem face saltul către un anumit text
aflat într-o altă pagină. În pagina respectivă se scrie codul de la pasul 1, la textul ales pentru ținta link-
ului, iar în pagina în care va fi link-ul se scrie: <a href="adresa_pagina#cuvant">Nume</a>
8. TABELE
8.1 Crearea tabelelor
Tabelele HTML permit autorilor Web să aranjeze diverse date, sub formă de text, imagini, link-uri,
alte tabele etc., în rânduri și coloane de celule.
Pentru crearea tabelelor, se folosește tag-ul <table>. La rândul său, acesta încadrează alte patru sub-
elemente, care alcătuiesc structura tabelului:
- Linia (rândul) tabelului: <tr> ... </tr>
- Titlul tabelului: <th> ... </th>
- Coloanele tabelului (datele): <td> ... </td>
- Sub-titlul tabelului: <caption> ... </caption>
9
TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
Exemplu:
<html>
<head>
<title>Titlul documentului</title>
</head>
<body>
<table border="1">
<tr>
<th>titlul 1</th>
<th>titlul 2</th>
</tr>
<tr>
<td>linia 2 - coloana 1</td>
<td>linia 2 - coloana 2</td>
</tr>
<tr>
<td>linia 3 - coloana 1</td>
<td>linia 3 - coloana 2</td>
</tr>
<tr>
<td>linia 4 - coloana 1</td>
<td>linia 4 - coloana 2</td>
</tr>
</table>
</body>
</html>
Rezultat:
8.2 Atributele tabelelor
HTML oferă următoarea serie de atribute specifice tabelelor:
- Bgcolor: definește culoarea tabelului;
- Width: specifică lățimea tabelului (în pixeli sau procente din lățimea paginii);
- Border: grosimea liniei (în pixeli) ce definește tabelul și înconjoară fiecare celulă;
- Cellspacing: spațiul dintre celule (în pixeli);
- Cellpadding: spațiul dintre linia celulei și conținutul acesteia (în pixeli);
- Align: controlează poziționarea tabelului în pagină, cu următoarele atribute: left, right, sau
center;
10
TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
- Background: controlează imaginea de fundal a tabelului;
- Bordercolor: culoarea liniei din jurul tabelului;
- Bordercolorlight: culoarea luminoasă folosită de două linii din cele patru care înconjoară tabelul;
- Bordercolordark: culoarea întunecată folosită de doua linii din cele patru care înconjoară tabelul.
Exemplu:
<html>
<head>
<title>Titlul documentului</title>
</head>
<body>
<table border="1" cellpadding="2" bordercolor="green" bgcolor="#ffcccc">
<tr>
<th>titlul 1</th>
<th>titlul 2</th>
</tr>
<tr>
<td>linia 2 - coloana 1</td>
<td>linia 2 - coloana 2</td>
</tr>
<tr>
<td>linia 3 - coloana 1</td>
<td>linia 3 - coloana 2</td>
</tr>
<tr>
<td>linia 4 - coloana 1</td>
<td>linia 4 - coloana 2</td>
</tr>
</table>
</body>
</html>
Rezultat:
8.3 Atribute specifice titlurilor/coloanelor
- Colspan: specifică numărul de coloane ale tabelului care vor fi înlocuite de celulă;
- Rowspan: specifică numărul de rânduri ale tabelului care vor fi înlocuite de celulă;
- Align: alinierea datelor celulei pe orizontală (left, right sau center);
- Valign: alinierea datelor celulei pe verticală (top, middle sau bottom);
11
TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
- Background: controlează culoarea de fond a celulei, care poate fi și o imagine;
- Bgcolor: definește culoarea celulei (dar nu imagine);
- Width: specifică lățimea celulei (în pixeli sau procente din lățimea paginii);
- Height: specifică înălțimea celulei (în pixeli sau procente din înălțimea paginii).
Exemplu:
<html>
<head>
<title>Titlul documentului</title>
</head>
<body>
<table border="1" cellpadding="2" bordercolor="green" bgcolor="#ffcccc">
<tr>
<th colspan="2">titlul 1</th>
</tr>
<tr>
<td>linia 2 - coloana 1</td>
<td>linia 2 - coloana 2</td>
</tr>
<tr>
<td>linia 3 - coloana 1</td>
<td>linia 3 - coloana 2</td>
</tr>
<tr>
<td>linia 4 - coloana 1</td>
<td>linia 4 - coloana 2</td>
</tr>
</table>
</body>
</html>
Rezultat:
-
Notă: Exersați singuri și alte exemple de tabele, cu mai multe rânduri și coloane.
12
TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
9. UTILIZAREA CADRELOR – FRAME-URI
Cadrele (eng. frame), au rolul de a secționa fereastra browser-ului astfel încât să fie afișate mai multe
pagini Web în aceeași fereastră de browser.
Un frame (cadru) reprezintă, de fapt, o parte din suprafața ferestrei browser-ului. Fiecare frame
prezintă în interior un document propriu (în general, acesta este un document HTML). De exemplu,
puteți realiza două cadre într-o fereastră, în primul cadru puteți încărca un document HTML (ex.
[Link]) iar în al doilea cadru un alt document HTML, de la alta adresa (ex. [Link])
Pentru realizarea cadrelor, se pot folosi următoarele etichete HTML: <frameset> și <frame> sau
<iframe>.
9.1 Configurarea cadrelor
Pentru început se adaugă un element <FRAMESET> ... </FRAMESET> în interiorul documentului
HTML, în secțiunea HEAD.
Important!
- <FRAMESET> determină cât din spațiul ferestrei este atribuit fiecărui cadru, folosind atributele
ROWS sau COLS care împart ecranul în linii sau coloane.
- <FRAMESET> va conține elemente <FRAME>, câte unul pentru fiecare divizare a ferestrei din
browser.
- ROWS determină numărul de linii și mărimea cadrelor care vor fi așezate în linie, începând de sus.
Pot fi folosite următoarele valori:
- pixeli absoluți (ex: "360,120");
- procente din înălțimea ecranului (ex: "75%,25%");
- valori proporționale, folosind (*).
Acesta putând fi combinat cu procente sau pixeli.
(ex: "120,*" sau "30%,*").
- COLS determină numărul de coloane și mărimea cadrelor care vor fi așezate pe coloane, începând
din stânga.
Pot fi folosite următoarele valori: - pixeli absoluți (ex: "380,120");
- procente din lungimea ecranului (ex: "33%,77%");
- valori proporționale, folosind (*).
Acesta putând fi combinat cu procente sau pixeli.
(ex: "120,*" sau "30%,*")
Alte atribute ale elementului <FRAMESET>
- FRAMEBORDER - Stabilește afișarea sau nu a unei borduri în jurul cadrelor. Posibile valori: 0, 1
sau YES, NO.
- FRAMESPACING - Acest atribut este specificat în pixeli. Daca FRAMEBORDER este 0 atunci și
acesta trebuie să aibă valoarea 0;
- BORDER - Marginea cadrelor. Valori posibile: 0 sau 1;
13
TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
- BORDERCOLOR - Acest atribut vă permite să alegeți culoarea bordurii;
9.2 Elementul <FRAME>
Elementul/eticheta <frame> definește un singur cadru și este scris în interiorul elementului
<frameset>. Pentru fiecare cadru în parte trebuie scris câte un element <frame>
Important! – Atributele elementului <FRAME>
- SRC - Aici trebuie scrisă adresa și numele paginii folosite pentru cadru;
- NAME - Aici trebuie scris numele de identificare al cadrului;
- MARGINWIDTH - Atribut opțional, valoare în pixeli. Determină spațiul orizontal dintre conținutul
cadrului și marginea acestuia;
- MARGINHEIGHT - Atribut opțional, valoare în pixeli. Determină spațiul vertical dintre conținutul
cadrului și marginea acestuia;
- SCROLLING - Afișează un Scroll Bar (bara de derulare) în cadru. Valori posibile: YES (permite
afișarea Scroll Bar-ului), NO (nu va fi prezentat nici un Scroll Bar) și AUTO (browser-ul va decide
dacă este nevoie de Scroll Bar. Aceasta valoare este cea mai indicată);
- NORESIZE - Opțional, împiedică utilizatorul să modifice mărimea cadrului, prin selectarea marginii
acestuia și mutarea în stânga sau dreapta ori sus sau jos.
Exemplu:
<html>
<head>
<title>Titlul paginii</title>
</head>
<frameset cols="220,*">
<frame src="[Link]">
<frameset cols="320,*">
<frame src="[Link]" name="liste">
<frame src="[Link]" name="pagina_acasa">
</frameset>
</frameset>
<body>
</body>
</html>
Rezultat:
Observație! În exemplul anterior au fost adăugate, la întâmplare, trei pagini HTML existente.
14
TEHNOLOGII WEB PENTRU DEZVOLTAREA APLICAȚIILOR FINANCIAR-CONTABILE
9.3 Atributul TARGET
În momentul în care, pentru deschiderea anumitor pagini în cadre, sunt folosite link-uri, este
necesară specificarea unui atribut în eticheta de link “<a>”, denumit “target”. Acest atribut are rolul
de a transmite browser-ului în ce cadru să se deschidă pagina. Atributul “target” folosește ca valoare
textul din atributul NAME al elementului FRAME, în care se va deschide nouă pagină.
Important!
- În cazul în care nu se specifică atributul “target”, pagina se va deschide în cadrul current;
- Atributul “target” trebuie să aibă aceeași denumire specificată în codul HTML, ca și atributul
NAME din FRAME-ul în care se dorește afișarea paginii.
Special Target
Există patru valori speciale ale atributului “target”, care nu pot fi asociate cu atributul NAME. Fiecare
are o funcție special, astfel:
- target="_top" - acesta va încărca link-ul în toată fereastra browser-ului, dispărând astfel cadrele;
- target="_blank" - acesta va încărca link-ul într-o nouă fereastră de browser, astfel rămânând
deschisă și fereastra anterioară;
- target="_self" - acesta va încarca link-ul în aceeași fereastră de unde a fost acționat;
- target="_parent" - cadrul "_parent" este cadrul anterior de la care a fost deschis noul cadru; dacă
acesta nu există atunci link-ul se va deschide în actuala fereastră de browser.
9.4 Adăugarea cadrelor iframe
Pentru crearea unui cadru cu “<iframe>” puteți folosi, ca exemplu, următoarea sintaxă (aceasta se
adaugă în secțiunea BODY, în locul în care doriți să apară frame-ul):
Sintaxă
<iframe src="url_pagină" width="600" height="200" align="center" scrolling="yes" frameborder="0"
name="nume_frame"> </iframe>
Unde:
- "iframe" reprezintă elementul principal care indică adăugarea unui frame în pagină.
- "url_pagină" reprezintă adresa paginii care va fi încărcată în iframe;
- "width" și "height" reprezintă lungimea, respectiv înălțimea cadrului (exprimată în procente sau
pixeli);
- "scrolling" reprezintă permisiunea de derulare a paginii din cadru (yes sau no);
- "frameborder" specifică dacă va fi sau nu afișată o margine (bordură) pentru cadru (1=da, 0=nu);
- "nume_frame" este numele cadrului (necesar pentru atributul "TARGET" în link-uri sau când frame-
ul este folosit de JavaScript).
15