Organizarea Informatiei in Pagina HTML

8/6/2019 Organizarea Informatiei in Pagina HTML

http://slidepdf.com/reader/full/organizarea-informatiei-in-pagina-html 1/20

Indrumar laborator Anul I – text preliminar

115

Aplicaia nr. 10

Organizarea informaiei în pagina HTML

1. Scopul lucrăriiNevoia 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. TitlurileTitlurile 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

<H3> Titlul H3 </H3> text normal

<H4> Titlul H4 </H4> text normal<H5> Titlul H5 </H5> text normal

<H6> Titlul de dimensiune minimă H6 </H6> text normal

</BODY>

</HTML>




116

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 ladreapta.

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. ParagrafeleTrecerea la un

nou paragraph în cadrultextului se realizează cuajutorul eticheteicontainer <P> … </P>.Prezena etichetei de închidere </P> este

opională şi ea indică browserului să inserezeo linie liberă şi după blocul de text cuprins între cele două etichete.




117

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 şiladreapta.

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> aparagrafelor, deoarece la întâlnirea unei noi etichete <P> vechiul paragraph seconsideră î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




118

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

</BODY></HTML>

4. Preformatarea textuluiEticheta container <PRE> … </PRE> permite preformatarea textului şi

menine spaierea ş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 îndocumentul 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 Geografie11:00 Istorie12:00 Fizică <P><HR>

Acesta este textul de mai sus preformatat

<PRE>Orar:

Luni




119

8:00 Română

9:00 Matematică 10:00 Geografie11:00 Istorie12:00 Fizică

</PRE>

</BODY>

</HTML> Aspectul paginii descrise în exemplul de mai sus arată astfel:

5. Centrarea textuluiCentrarea textului se face incluzând textul între cele două etichetecontainer <CENTER> … </CENTER>.

EXEMPLUL V Modul cum poate fi folosită eticheta <PRE>.

<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. Acestaeste un text centrat. Acesta este un text centrat. Acesta este un text centrat.</CENTER>

</BODY></HTML>




120

6. Afişarea textului pe o singură linieAfişarea textului pe o singură linie, chiar dacă acest lucru înseamnă

depăşirea marginii ferestrei şi derularea acesteia pe orizontală, se face incluzândtextul între cele două etichete container <NOBR> … </NOBR>. Această etichetă împiedică browserul să limiteze lungimea liniei la dimensiunea ferestrei.

EXEMPLUL VI Modul cum poate fi folosită eticheta <PRE>.

<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 reducereadimensiunilor ferestrei browserului. </NOBR>

</BODY>

</HTML>

7. Blocul <DIV>Eticheta container <DIV> … </DIV> realizează divizarea unui document

HTML în seciuni distincte, diviziune în care pot fi incluse, pe lângă text, şi alteelemente: legături, imagini formulare. Eticheta <DIV> … </DIV> admite

atributul align cu cele trei valori ale acestuia left, center şi right, care permitealinierea textului la stânga (este implicită), în centru şi ladreapta. Blocul <DIV>

… </DIV> admite şi atributul nowrap, care interzice întreruperea rândurilor decătre browser.




121

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 seciune a textului aliniată la dreapta. <BR>

< /DIV>

<DIV align = center>Aceasta este a doua seciune a textului aliniată la centru. <BR>

< /DIV>

<DIV align = left>Aceasta este a treia seciune a textului aliniată la stânga. <BR>

</DIV>

</BODY>

</HTML>

8. Inserarea liniilor orizontale

Inserarea liniilor orizontale se facecu ajutorul etichetei vide <HR>

(horizontal rule). Configurarea linieiorizontale se face cu ajutorulatributelor etichetei <HR>:

align – permite alinierea liniei orizontale. Valorile posibile sunt left,center şi right

width – specifică lungimea liniei – lungimea poate fi stabilită în pixelisau î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>




122

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>




123

9. Inserarea unei adrese poştaleEticheta <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




124

Inserarea unui citat în text se poate face în funcie 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 Webdesign </CITE>

</BODY>

</HTML>

11. Inserarea caracterelor specialePentru introducerea spaiilor 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>




125

<HEAD>

<TITLE> Caractere speciale </TITLE></HEAD>

<BODY><H1 align = center> Inserarea unui character special </H1> <HR>

Cuvintele din acest text sunt despărite de grupuri de trei spaii

</BODY>

</HTML>

Tabelul cu comenzile necesare

pentru a insera în text cele mai cunoscute caractere

Denumire caracter Reprezentarea grafică Comanda HTML

Spaiu liber Copyright © ©Trademark TM

Registered ® ® sau &#174Mai 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 informaii în mod organizat, într-o manieră accesibilă şi uşor de parcurs.

Listele sunt de trei tipuri:




126

- liste ordonate – marcate prin numere sau litere

- liste neordonate – marcate prin cratime, buline sau alte simboluri- liste de definiii – sunt afişate f ără nici un fel de marcaj.12.1. Liste ordonateO listă ordonată este un bloc de text delimitat de etichetele <OL> …

</OL> (ordered list – listă ordonată). Fiecare element al listei este iniiat deeticheta <LI> (list item). Lista va fi afişată indentat faă de restul paginii şi fiecareelement al listei începe pe un rând nou marcat cu cifre.

Cele două etichete container <OL> … </OL> şi <LI> … </LI> se potseta 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 – opiune

prestabilită) start, care stabileşte valoarea iniială a secvenei ordonate. Valoarea

acestui atribut trebuie să fie un număr întreg pozitivEXEMPLUL 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 poziia 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>




127

</BODY>

</HTML>

12.2. Liste neordonateLista neordonată reprezintă o colecie de elemente înrudite aşezate într-o

ordine oarecare.Exemplu: listă de link-uri spre alte documenteLista 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> poatesă lipsească pentru că se consideră că la întâlnirea unei noi etichete <LI> vecheaetichetă 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




128

<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 caracterulafişat în faa 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




129

</UL>

</BODY></HTML>

Setarea atributului type pentru un item al listei înlocuieşte marcajul aceluielement 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>




130

Forme particulare de liste neordonateLista de directoare – este o listă introdusă prin eticheta <DIR> …

</DIR>. Eticheta a fost iniial utilizată pentru alcătuirea listelor de fişiere. Multebrowsere nu fac nici o diferenă între etichetele <DIR> şi <UL>, efectul lor fiindacelaş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 unfel de meniu grafic de tip pull-down pentru afişarea acestor liste.

12.3. Liste imbricateImbricarea - î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 nivelullistei 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>






132

<HR color = maroon>

<H1 align = center> <FONT color = green>Liste de definiii</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>




133

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>




13. Desf ăşurarea lucrării

13.1. Se crează o pagină Web în care să apară un titlu, o linie sub titlu, unparagraf ş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>.

Date post:	08-Apr-2018
Category:	Documents
Upload:	dulcemoniq
View:	227 times
Download:	0 times

Organizarea Informatiei in Pagina HTML

Documents