Organizarea Informatiei in Pagina HTML

Indrumar laborator Anul I – text preliminar
Aplicaţia nr. 10
Organizarea informaţiei în pagina HTML
1. Scopul lucrării
Nevoia de a sublinia prin format structura logică a unui document şi de a
rupe monotonia unui text lung este justificată de utilizarea titlurilor, paragrafelor,
preformatarea textului precum şi de inserarea unor caractere speciale
2. Titlurile
Titlurile dintr-un document HTML sunt marcate cu ajutorul etichetelor
container <H1>, <H2>, <H3>, <H4>, <H5>, <H6>.
Eticheta <H1> defineşte titlul de dimensiune maximă, iar <H6> defineşte
titlul de dimensiune minimă.
EXEMPLUL I
Se folosesc toate cele şase tipuri de etichete pentru titluri
<HTML>
<HEAD>
<TITLE> Titluri </TITLE>
</HEAD>
<BODY>
<H1> Titlul de dimensiune maximă H1 </H1> text normal
<H2> Titlul H2 </H2> text normal
<H6> Titlul de dimensiune minimă H6 </H6> text normal
</BODY>
</HTML>
115
Etichetele de titlu acceptă atributul align cu valorile left, center şi right

pentru alinierea titlului blocului de text la stânga (în mod prestabilit), în centru şi la
dreapta.
EXEMPLUL I
Se folosesc toate modurile de aliniere al titlurilor
<HTML>
<HEAD>
<TITLE> Alinierea titlurilor </TITLE>
</HEAD>
<BODY>
<H1 align = center> Titluri </H1> <HR>
<H1 align = center> Titlul de dimensiune maximă H1 aliniate la centru </H1>
<H2 align = right> Titlul de mărime 2 aliniat la dreapta </H2>
<H4> Titlul de mărime H4 aliniat la stânga </H4>
</BODY>
</HTML>
3. Paragrafele
Trecerea la un
nou paragraph în cadrul
textului se realizează cu
ajutorul etichetei
container <P> … </P>.
Prezenţa etichetei de
închidere </P> este
opţională şi ea indică
browserului să insereze
o linie liberă şi după blocul de text cuprins între cele două etichete.
116
Eticheta <P> pusă în documentul HTML fără eticheta de închidere </P>

comunică browserului să insereze o linie liberă în text şi să înceapă o nouă linie.
Această etichetă admite atributul align cu cele trei valori ale acestuia left, center
şi right, care permite alinierea textului la stânga (este implicită), în centru şi
ladreapta.
EXEMPLUL II
Se folosesc toate modurile de aliniere al titlurilor
<HTML>
<HEAD>
<TITLE> Paragrafele </TITLE>
</HEAD>
<BODY>
<H1 align = center> Paragrafele </H1> <HR>
<P> Acesta este un paragraph aliniat la stânga.
<P align = right > Acesta este un paragraph aliniat la dreapta
<P align = center> Acesta este un paragraph aliniat la centru
</BODY>
</HTML>
În exemplul de mai sus nu a fost folosită eticheta de închidere </P> a

paragrafelor, deoarece la întâlnirea unei noi etichete <P> vechiul paragraph se
consideră închis.
EXEMPLUL III
Se aliniază un nou paragraph în dreapta paginii, iar textul de pe rândul următor
paragrafului introdus prin eticheta <BR> , este scris normal de la capătul din stânga
paginii.
<HTML>
<HEAD>
<TITLE> Paragrafe </TITLE>
</HEAD>
<BODY>
<H1 align = center> Paragrafe </H1> <HR>
Acest text este scris normal, începând de la marginea din stânga.
<P align = right > Acest text este aliniat la dreapta
117
<BR> <B>Unde este afişat acest text?</B>

</BODY>
</HTML>
4. Preformatarea textului
Eticheta container <PRE> … </PRE> permite preformatarea textului şi
menţine spaţierea şi alinierea textului aşa cum au fost făcute în documentul sursă
HTML şi impune browserului să afişeze textul întocmai cum a fost el formatat în
documentul HTML.
EXEMPLUL IV
Modul cum poate fi folosită eticheta <PRE>.
<HTML>
<HEAD>
<TITLE> Preformatarea textului </TITLE>
</HEAD>
<BODY>
<H1 align = center> Textul preformatat </H1> <HR>
Acest text este un text scris normal. <P>
Orar:
Luni
8:00 Română
9:00 Matematică
10:00 Geografie
11:00 Istorie
12:00 Fizică <P><HR>
Acesta este textul de mai sus preformatat

<PRE>
Orar:
Luni
118
8:00 Română
9:00 Matematică
10:00 Geografie
11:00 Istorie
12:00 Fizică
</PRE>
</BODY>
</HTML>
Aspectul paginii descrise în exemplul de mai sus arată astfel:
5. Centrarea textului
Centrarea textului se face incluzând textul între cele două etichete
container <CENTER> … </CENTER>.
EXEMPLUL V
<HTML>
<HEAD>
<TITLE> Centrarea textului </TITLE>
</HEAD>
<BODY>
<H1 align = center> Centrarea textului </H1> <HR>
<CENTER> Acesta este un text centrat. Acesta este un text centrat. Acesta
este un text centrat. Acesta este un text centrat. Acesta este un text centrat.
</CENTER>
</BODY>
</HTML>
119
6. Afişarea textului pe o singură linie

Afişarea textului pe o singură linie, chiar dacă acest lucru înseamnă
depăşirea marginii ferestrei şi derularea acesteia pe orizontală, se face incluzând
textul între cele două etichete container <NOBR> … </NOBR>. Această etichetă
împiedică browserul să limiteze lungimea liniei la dimensiunea ferestrei.
EXEMPLUL VI
<HTML>
<HEAD>
<TITLE> Textul pe o singură linie </TITLE>
</HEAD>
<BODY>
<H1 align = center> Textul apare scris pe o singură linie </H1> <HR>
<NOBR> Acesta este un text care va fi afişat pe o singură linie, chiar dacă
depăşeşte dimensiunile unei ferestre obişnuite. Se poate verifica acest fapt prin reducerea
dimensiunilor ferestrei browserului. </NOBR>
</BODY>
</HTML>
7. Blocul <DIV>
Eticheta container <DIV> … </DIV> realizează divizarea unui document
HTML în secţiuni distincte, diviziune în care pot fi incluse, pe lângă text, şi alte
elemente: legături, imagini formulare. Eticheta <DIV> … </DIV> admite
atributul align cu cele trei valori ale acestuia left, center şi right, care permite
alinierea textului la stânga (este implicită), în centru şi ladreapta. Blocul <DIV>
… </DIV> admite şi atributul nowrap, care interzice întreruperea rândurilor de
către browser.
120
EXEMPLUL VII
Modul cum poate fi folosită eticheta <DIV> ... </DIV>
<HTML>
<HEAD>
<TITLE> Blocul DIV </TITLE>
</HEAD>
<BODY>
<H1 align = center> Blocul DIV </H1> <HR>
Această linie este o linie de text normală
<DIV align = right>
Aceasta este prima secţiune a textului aliniată la dreapta. <BR>
</DIV>
<DIV align = center>
Aceasta este a doua secţiune a textului aliniată la centru. <BR>
</DIV>
<DIV align = left>
Aceasta este a treia secţiune a textului aliniată la stânga. <BR>
</DIV>
</BODY>
</HTML>
8. Inserarea liniilor orizontale
Inserarea liniilor orizontale se face

cu ajutorul etichetei vide <HR>
(horizontal rule). Configurarea liniei
orizontale se face cu ajutorul
atributelor etichetei <HR>:
align – permite alinierea liniei orizontale. Valorile posibile sunt left,
center şi right
width – specifică lungimea liniei – lungimea poate fi stabilită în pixeli
sau în procente din lăţimea ecranului
size – specifică grosimea liniei, exprimată în pixeli
color – permite definirea culorii liniei
EXEMPLUL VIII
Modul cum poate fi folosită eticheta <HR>
<HTML>
<HEAD>
<TITLE> Linii orizontale </TITLE>
</HEAD>
<BODY>
<H1 align = center> Linii orizontale </H1>
Această linie este aliniată la stânga, lungime 100%, grosime 3 pixeli
<HR>
Această linie este aliniată la centru, lungime 50%, grosime 6 pixeli
<HR align = center width = 50% size = 6 color = blue>
121
Această linie este aliniată la dreapta, lungime 150 de pixeli, grosime 12 pixeli, de
culoare roşie
<HR align = right width = 150 size = 12 color = red>
</BODY>
</HTML>
EXEMPLUL IX
Modul cum poate fi folosită eticheta <DIV> … </DIV>
<HTML>
<HEAD>
<TITLE> Linii orizontale 1 </TITLE>
</HEAD>
<BODY>
<H1 align = center> Linii orizontale folosind eticheta DIV </H1> <HR>
Linia de mai jos este aliniată la stinga
<HR align = left width = 50% size = 8 color = yellow>
Liniile de mai jos sunt aliniate la centru cu ajutorul blocului DIV
<DIV align center>
<HR width = 50% size = 12 color = cyan>
<HR width = 400 size = 9 color = navy>
</DIV>
</BODY>
</HTML>
122
9. Inserarea unei adrese poştale

Eticheta <ADDRESS> …</ADDRESS> este o etichetă logică şi are ca
efect introducerea unei adrese cu caractere italice.
EXEMPLUL X
Modul cum poate fi inserată o adresă poştală în pagina Web
<HTML>
<HEAD>
<TITLE> Adresa poştală </TITLE>
</HEAD>
<BODY>
<H1 align = center> Inserarea unei adrese poştale </H1> <HR>
Adresa Universităţii din Piteşti este
<ADDRESS>
Universitatea din Piteşti <BR>
Str. Târgul din Vale, Nr. 1 <BR>
Piteşti, Jud. Argeş
</ADDRESS>
</BODY>
</HTML>
10. Inserarea unui citat
123
Inserarea unui citat în text se poate face în funcţie de dimensiunea citatului

folosind două blocuri de etichete:
dacă citatul depăşeşte câteva linii se foloseşte eticheta
<BLOCKQUOTE> … </BLOCKQUOTE>
dacă se citează un termen, titlul unei lucrări sau o referinţă se foloseşte
eticheta
<CITE> … </CITE>
Aceste etichete pot avea ca efect introducerea textului cu caractere italice.
EXEMPLUL XI
Modul cum poate fi inserat un citat în pagina Web
<HTML>
<HEAD>
<TITLE> Citate </TITLE>
</HEAD>
<BODY>
<H1 align = center> Inserarea unui citat în text </H1> <HR>
Textul de mai jos este un citat
<BLOCKQUOTE> HTML este o abreviere de la Hypertext Markup Language
şi reprezintă scheletul oricărei pagini de Web. HTML nu este un limbaj de programare.
</ BLOCKQUOTE >
Citatul de mai sus face parte din <CITE>Limbajul HTML şi elemente de Web
design </CITE>
</BODY>
</HTML>
11. Inserarea caracterelor speciale

Pentru introducerea spaţiilor suplimentare se foloseşte comanda
(no break space). Comanda începe cu simbolul & (ampersand) şi se termină cu ;
(punct şi virgulă).
EXEMPLUL XII
Modul cum poate fi inserată o adresă poştală în pagina Web
<HTML>
124
<HEAD>
<TITLE> Caractere speciale </TITLE>
</HEAD>
<BODY>
<H1 align = center> Inserarea unui character special </H1> <HR>
Cuvintele din acest
text sunt despărţite
de grupuri de
trei spaţii
</BODY>
</HTML>
Tabelul cu comenzile necesare

pentru a insera în text cele mai cunoscute caractere
Denumire caracter Reprezentarea grafică Comanda HTML

Spaţiu liber
Copyright © ©
Trademark TM
Registered ® ® sau &#174
Mai mic decât < <
Mai mare decât > >
Ampersand & &
Ghilimelele “ "
Cent ¢ ¢
Un sfert ¼ ¼
O jumătate ½ ½
Trei sferturi ¾ ¾
Grade º °
12. Liste
Listele sunt unele dintre cele mai obişnuite elemente dintr-o pagină Web,
fiind deseori folosite pentru a prezenta informaţii în mod organizat, într-o manieră
accesibilă şi uşor de parcurs.
Listele sunt de trei tipuri:
125
- liste ordonate – marcate prin numere sau litere

- liste neordonate – marcate prin cratime, buline sau alte simboluri
- liste de definiţii – sunt afişate fără nici un fel de marcaj.
12.1. Liste ordonate
O listă ordonată este un bloc de text delimitat de etichetele <OL> …
</OL> (ordered list – listă ordonată). Fiecare element al listei este iniţiat de
eticheta <LI> (list item). Lista va fi afişată indentat faţă de restul paginii şi fiecare
element al listei începe pe un rând nou marcat cu cifre.
Cele două etichete container <OL> … </OL> şi <LI> … </LI> se pot
seta cu ajutorul atributelor:
type, care stabileşte tipul de caractere utilizate pentru ordonarea listei.
Valorile pe care le poate lua acest atribut sunt:
- A – pentru ordonare de tipul A, B, C, … (litere mari)
- a – pentru ordonare de tipul a, b, c, … (litere mici)
- I – pentru ordonare de tipul I, II, III, … (cifre romane mari)
- i – pentru ordonare de tipul i, ii, iii, … (cifre romane mici)
- 1 – pentru ordonare de tipul 1, 2, 3, … (cifre arabe – opţiune
prestabilită)
start, care stabileşte valoarea iniţială a secvenţei ordonate. Valoarea
acestui atribut trebuie să fie un număr întreg pozitiv
EXEMPLUL I
Se construieşte o listă ordonată, marcată cu cifre arabe şi o altă listă ordonată
marcată cu cifre romane
<HTML>
<HEAD>
<TITLE> Liste ordonate </TITLE>
</HEAD>
<BODY>
<H1 align = center> <FONT color = red> Listă ordonată în care elementele sunt
marcate cu cifre arabe </FONT> </H1> <HR color = yellow size = 5>
<OL> <FONT color = brown size = 5>Florile mele preferate sunt:
<LI> trandafirii galbeni
<LI> garoafele
<LI> crizantemele
<LI> crinii imperiali
</OL> <HR color = green size = 8>
<H1 align = center> <FONT color = red> Listă ordonată în care elementele
sunt marcate cu cifre romane începând de la poziţia 3 </FONT> </H1>
<HR color = yellow size = 5>
<OL type = I start = 3> <FONT color = brown size = 5>Florile mele preferate
sunt:
<LI> trandafirii galbeni
<LI> garoafele
<LI> crizantemele
<LI> crini imperiali <FONT>
</OL> <HR color = green size = 8>
126
</BODY>
</HTML>
12.2. Liste neordonate

Lista neordonată reprezintă o colecţie de elemente înrudite aşezate într-o
ordine oarecare.
Exemplu: listă de link-uri spre alte documente
Lista neordonată este un bloc de text delimitat de etichetele <UL> …
</UL> (unordered list). Fiecare element al listei este introdus prin eticheta <LI> ...
</LI> (list item), deşi este o etichetă container, eticheta de închidere </LI> poate
să lipsească pentru că se consideră că la întâlnirea unei noi etichete <LI> vechea
etichetă este închisă.
Lista va fi afişată indentat faţă de restul paginii şi fiecare element al listei
începe pe un rând nou marcat cu “•” (bullet)
EXEMPLUL II
Se construieşte o listă neordonată
<HTML>
<HEAD>
<TITLE> Liste neordonate </TITLE>
</HEAD>
<BODY>
<H1> Listă neordonată </H1> <HR>
<UL> Culori
<LI> Black
<LI> White
127
<LI> Red
<LI> Green
<LI> Blue
<LI> Yellow
<LI> Purple
<LI> Aqua
</UL>
</BODY>
</HTML>
Etichetele <UL> şi <LI> au definit atributul type care stabileşte caracterul

afişat în faţa fiecărui element al listei. Valorile posibile ale acestui atribut sunt:
- circle - cerc
- disc - disc plin (valoarea prestabilită)
- square – pătrat
EXEMPLUL III
Lista are atributul type setat la valoarea “square”
<HTML>
<HEAD>
<TITLE> Liste neordonate1 </TITLE>
</HEAD>
<BODY>
<H1 align = center> Atributul type la liste neordonate </H1> <HR>
<UL type = square> Limbaje de programare
<LI> C
<LI> C++
<LI> Pascal
<LI> Basic
<LI> Perl
128
</UL>
</BODY>
</HTML>
Setarea atributului type pentru un item al listei înlocuieşte marcajul acelui

element cu tipul specificat.
EXEMPLUL IV
Lista are atributul type setat la valoarea “square”
<HTML>
<HEAD>
<TITLE> Itemul listei </TITLE>
</HEAD>
<BODY>
<H1 align = center> Atributul type la itemul unei liste </H1> <HR>
<UL type = square> Limbaje de programare
<LI> C
<LI> C++
<LI> Pascal
<LI type = circle> Basic
<LI> Perl
</UL>
</BODY>
</HTML>
129
Forme particulare de liste neordonate

Lista de directoare – este o listă introdusă prin eticheta <DIR> …
</DIR>. Eticheta a fost iniţial utilizată pentru alcătuirea listelor de fişiere. Multe
browsere nu fac nici o diferenţă între etichetele <DIR> şi <UL>, efectul lor fiind
acelaşi.
Lite de meniuri – utilizează eticheta <MENU>. Unele browsere afişează
lista doar în format uşor diferit faţă de listele neordonate, altele folosesc chiar un
fel de meniu grafic de tip pull-down pentru afişarea acestor liste.
12.3. Liste imbricate

Imbricarea - în cadrul unei liste ordonate sau neordonate se pot include
alte liste. Fiecare listă nou inclusă în precedenta se va afişa indentat faţă de nivelul
listei anterioare.
EXEMPLUL V
Liste imbricate în toate modurile dorite
<HTML>
<HEAD>
<TITLE> Liste imbricate </TITLE>
</HEAD>
<BODY>
<HR color = red>
<H1 align = center> <FONT color = green>Liste imbricate</FONT> </H1>
<HR color = red>
<UL>
<LI> Bulina 1
<OL>
<LI> Numărul 1
<LI> Numărul 2
</OL>
130
<LI> Bulina 2
<LI> Bulina 3
<UL type = square>
<LI> Pătrat 1
<LI> Pătrat 2
<LI> Pătrat 3
</UL>
<LI> Pătrat 4
</UL>
<HR color = red>
</BODY>
</HTML>
12.4. Liste de definiţii

Listele de definiţii sunt listele în care elementele listei nu sunt nici
numerotate (ca în listele ordonate), nici marcate prin buline (ca în listele
neordonate) şi prezintă două nivele de identare.
Aceste liste sunt blocuri de texte închise între etichetele <DL> … </DL>
(definition list), iar fiecare element al listei este introdus prin eticheta <DT>
(definition term). Fiecare element introdus prin eticheta <DT> conţine un număr de
elemente care îl definesc fiind introduce prin eticheta <DD> (definition
description).
EXEMPLUL VI
Constituirea unei liste de definiţii
<HTML>
<HEAD>
<TITLE> Liste de definiţii </TITLE>
</HEAD>
<BODY>
131
<HR color = maroon>

<H1 align = center> <FONT color = green>Liste de definiţii</FONT> </H1>
<HR color = maroon>
<FONT color = red>
<DL>
<DT> Iarna
<DD> Ninge
<DD> E frig
<DD> Ziua e mai scurtă decât noaptea
<DT> Primăvara
<DD> Natura se trezeşte la viaţă
<DD> Pomii înfloresc
<DD> Păsările călătoare se întorc din ţările calde
<DT> Vara
<DD> Totul e verde
<DD> E foarte cald
<DD> Ziua e mai lungă decât noaptea
<DT> Toamna
<DD> Fructele se coc
<DD> Recolta se strânge
<DD> Frunzele cad din copaci
</DL>
</FONT>
<HR color = maroon>
</BODY>
</HTML>
132
EXEMPLUL VII
Constituirea unei liste ale cărei elemente pot fi link-uri, imagini sau blocuri de text.
<HTML>
<HEAD>
<TITLE> Liste de legături şi imagini </TITLE>
</HEAD>
<BODY>
<H1 align = center> <FONT color = green>Liste de legături</FONT> </H1>
<HR color = maroon>
<FONT color = red>
<OL type = I>
<LI> Culori
<OL>
<LI> <A href = culori1.html> Culoarea fundalului </A>
<LI> <A href = culori2.html> Culoarea textului </A>
<LI> <A href = culori3.html> Culoarea legăturilor </A>
</OL>
<LI> Fonturi
<OL>
<LI> <A href = fonturi1.html> Eticheta FONT </A>
<LI> <A href = fonturi2.html> Eticheta BASEFONT </A>
<LI> <A href = fonturi3.html> Etichete de accentuare a textului </A>
</OL>
</OL>
</FONT><HR color = maroon>
<H1 align = center> <FONT color = maroon>Liste de imagini</FONT>
</H1>
<FONT color = Blue>
<DL>
<DT> <B>Trandafiri</B>
<DD> <IMG src = trandafir.jpg width = 120 height = 120>
<DD> <IMG src = tralb.jpg width = 170 height = 100>
<DT> <B>Animale</B>
<DD> <IMG src = panda.jpg width = 170 height = 100>
<DD> <IMG src = pandared.jpg width = 170 height = 100>
</DL>
</FONT>
</BODY>
</HTML>
133
13. Desfăşurarea lucrării
13.1. Se crează o pagină Web în care să apară un titlu, o linie sub titlu, un
paragraf şi un text care să fie preformatat.
13.2. În cadrul unei pagini Web se inserează un citat şi o adresă poştală.
13.3. Se inserează în pagina Web toate tipurile de titluri folosind etichetele
<H1>, <H2>, <H3>, <H4>, <H5> şi <H6>.
134

Organizarea Informatiei in Pagina HTML

Î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

Organizarea Informatiei in Pagina HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Indrumar laborator Anul I – text preliminar

Organizarea informaţiei în pagina HTML

Etichetele de titlu acceptă atributul align cu valorile left, center şi right

Eticheta <P> pusă în documentul HTML fără eticheta de închidere </P>

În exemplul de mai sus nu a fost folosită eticheta de închidere </P> a

<BR> <B>Unde este afişat acest text?</B>

Acesta este textul de mai sus preformatat

6. Afişarea textului pe o singură linie

8. Inserarea liniilor orizontale

Inserarea liniilor orizontale se face

9. Inserarea unei adrese poştale

10. Inserarea unui citat

Inserarea unui citat în text se poate face în funcţie de dimensiunea citatului

11. Inserarea caracterelor speciale

Tabelul cu comenzile necesare

Denumire caracter Reprezentarea grafică Comanda HTML

- liste ordonate – marcate prin numere sau litere

12.2. Liste neordonate

Etichetele <UL> şi <LI> au definit atributul type care stabileşte caracterul

Setarea atributului type pentru un item al listei înlocuieşte marcajul acelui

Forme particulare de liste neordonate

12.3. Liste imbricate

12.4. Liste de definiţii

<HR color = maroon>

13. Desfăşurarea lucrării

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