Indrumar laborator Anul I – text preliminar 115 Aplicaia nr. 10 Organizarea informaiei î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 ISe 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>
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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
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.
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
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>.
<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>
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>
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.
Registered ® ® sau ®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 informaii în mod organizat, într-o manieră accesibilă şi uşor de parcurs.
- 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
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 )
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:
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>
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