| Prima pagina | |
|
Structura |
Formatarea |
Liste |
Referinte |
Imagini |
Tabele |
Formulare |
|
 |
|
|
|
|
|
|
|
|
|
|
 |
 |
 |
 |
 |
 |
 | ||||
 |
 |
 |
 |
 |
 |
 |
 | |||
Avand cunostiinte despre titluri, paragrafe, liste, linii orizontale, precum si alte elemente care intervin in lucrul cu acestea (cum ar fi tagul BR, entitatea nbsp, etc), poti realiza partea cea mai importanta a unui document HTML. Cu alte cuvinte, poti realiza un document care sa cuprinda titluri, paragrafe, liste, etc.Elementele discutate in continuare permit finisarea documentului, acestea actionand asupra modului de aparitie a textului in document (este vorba de cuvinte sau fraze intregi evidentiate prin metode precum scrierea mai groasa a acestora, fie prin scrierea cu litere cursive, fie prin subliniere, etc). Elementele HTML care realizeaza aceste lucruri se numesc elemente de formatare a textului. Elementele de formatare, desi au rezultate vizuale identice, se impart in doua categorii: elemente de formatare fizica si elemente de formatare logica. Pentru a intelege aceasta clasificare, mai intai am prezentat aceste elemente si apoi am explicat care este diferenta dintre ele. Chiar daca ti se va parea neclar, trebuie mai intai sa parcurgi aceste elemente pentru ca, ulterior, sa poti antelege mai usor care este diferenta dintre acestea. In concluzie, inarmeaza-te cu rabdare si parcurge sectiunile urmatoare. Am facut tot posibilul sa nu pleci nelamurit. Elementele de formatare logica sunt numite prin cuvinte sau initiale ale unor cuvinte (din limba engleza) care nu au legatura cu modul in care va fi afisat textul cuprins intre tag-urile lor dar au o stransa legatura cu ceea ce vrea sa sugereze textul in cauza. De exemplu, elementul CODE "sugereaza" ca textul cuprins intre tagurile <CODE> si </CODE> reprezinta un cod de program (ca de exeplu C, JavaScript, etc) dar, numele acestui element nu face nici o referire la modul in care va arata textul in cauza. Acest text va fi scris cu caractere typewriter similare masinii de scris, cunoscut si sub numele de text monospatiat. Cam atat deocamdata.Ceea ce trebuie retinut este ca elementele de formatare logica sugereaza ce reprezinta textul cuprins intre tag-urile acestora si nu spune nimic despre modul in care va arata textul in fereastra browser-ului. Elementele de formatare logica sunt prezentate mai jos. <CITE> elementul CITE este utilizat pentru a sugera autorul sau sursa unui citat, precum si orice referire la alte surse. Poate indica un titlu de carte, ziar, articol, precum si numele autorului din care s-a redat un citat (a se vedea exemplul dat la tratarea elementului BLOCKQUOTE). Mai Jos este un exemplu:
<CODE> indica o mica portiune de cod de program. Este utlizat pentru portiuni mici. Pentru portiuni mari se utilizeaza PRE. Textul cuprins intre taguri va fi scris cu caractere typewriter (TT).
<DFN> indica definitia unui termen
<EM> utilizat pentru a scoate in evidenta o portiune de text care indica ceva important. Vor fi utilizate caractere cursive (italic).
<KBD> elementul KBD indica ce trebuie sa tasteze (sa introduca de la tastatura) un utilizator.
<SAMP> este utilizat pentru a indica anumite litere. Acestea ar trebui sa fie un grup de litere ce trebuie identificate in mod precis.
<STRONG> este utilizat pentru a evidentia un text de maxima importanta.
<VAR> este utilizat pentru a indica numele unei variabile. Aceasta poate fi o variabila dintr-un program sau un nume generic ce urmeaza sa fie inlocuit in practica. Mai jos am prezentat cate un exemplu pentru fiecare varianta mentionata.
Confuzie totala!! Atatea elemente diferite dar, in unele cazuri, rezultatul este identic. Adu-ti aminte ca elementele de formatare logica sugereaza ce reprezinta textul delimitat de tag-urile lor (sau, daca vrei, intentiile autorului) si nicidecum modul in care va arata in pagina. Daca vrei sa stii exact cum va arata in fereastra browser-ului va trebui sa apelezi la elementele de formatare fizica a textului. Observatie:elementele de formatare (atat fizica, cat si logica) necesita prezenta tag-ului de sfarsit
Spre deosebire de elementele de formatare logica, elementele de formatare fizica indica in mod exact modul in care va fi afisat textul. Numele acestor elemente sunt date de initiale (mai mult) si cuvinte (mai putin) reprezentand initialele sau prescurtarile din limba engleza a unor cuvinte care, fiecare in parte, indica modul in care va arata textul. de exemplu, I este initiala de la ITALIC (cursiv), indicand in mod exact ca textul cuprins intre tag-urile acestui element va fi scris cu caractere cursive. In concluzie, elementele de formatare fizica nu sugereaza intentia realizatorului. In schimb ele indica foarte clar modul in care va arata.Mai jos am prezentat elementele de formatare fizica precum si rezultatele utilizarii acestor elemente. <B> aplica stilul bold textului. Este utilizat pentru evidentierea anumitor cuvinte, propozitii etc. Nu produce o rupere de rand.
<I> aplica textului stilul italic (inclinat). Este utilizat pentru evidentierea anumitor cuvinte, propozitii etc. Nu produce o rupere de rand.
<TT> afiseaza textul in fontul teletype (neproportional). Este utilizat, in general, pentru prezentarea unei iesiri de tip listing (clasic) de calculator. Nu produce o rupere de rand.
<U> subliniaza textul continut. Nu provoaca trecerea pe un rand nou.
<STRIKE> produce "taierea" cu o linie a textului continut (utilizat de obicei pentru producerea unor exemple negative: asa nu se face). Nu are loc rupere de rand.
<BIG> afiseaza textul din container cu dimensiune mai mare decat fontul de baza. Unele editoare HTML (inclusiv Netscape Editor) convertesc tagul BIG in <FONT SIZE=+1>text</FONT>.
<SMALL> afiseaza textul cu o dimensiune mai mica decat textul inconjurator.
Netscape Editor utilizeaza conversia in
<SUB> muta textul selectat mai jos decat linia de baza a textului precedent si aplica un font mai mic (face trecerea in indice inferior).
<SUP> muta textul selectat mai sus decat linia de baza a textului precedent si aplica un font mai mic (face trecerea in indice superior).
Nu sunt prea multe de spus despre aceste elemente. Cred ca exemplele sunt edificatoare. Doar in cazul elementelor BIG si SMALL trebuie sa spun ca sunt scrise cu litere mai mari (BIG), respectiv mai mici cu o unitate fata de restul textului. Despre unitatile de masura ale caracterelor voi discuta in cadrul elementului FONT. Elementele de formatare fizica pot fi incluse unele in altele dar nu pot fi inlantuite.De ce formatare logica si de ce formatare fizica a textuluiDupa ce ai parcurs elementele de formatare (atat fizica cat si logica) nu pot sti daca ai inteles de ce exista doua stiluri de formatare. De un lucru sunt sigur: ai vazut ca atat elementele de formatare logica cat si elementele de formatare fizica duc la obtinerea unor rezultate similare. Ba mai mult, in cazul formatarii logice exista elemente care, desi sunt diferite, au acelas rezultat din punct de vedere vizual. Indraznesc sa spun ca ai inteles si faptul ca elementele logice indica ce vrea sa spuna textul cuprins intre tagurile unui asemenea element, in timp ce elementele fizice sunt mult mai pragmatice si indica exact modul in care va arata textul in pagina. De exemplu, elementul CODE ne spune foarte clar ca ceea ce cuprinde intre tag-urile sale reprezinta un cod de program in timp ce, daca utilizam TT in loc de CODE, am fi obtinut un rezultat identic.Acum, iti pui intrebarea: "bine, bine, ce ma intereseaza pe mine ca elementul CODE sugereaza un cod de program atita timp cit eu nu vad sursa documentului HTML ci vad rezultatul?". In mod concret, "pot sa-mi dau seama ca ceea ce este scris altfel decat textul normal sugereaza ceva (in cazul de fata un cod de program). Deci, foarte bine puteam sa folosesc TT fara sa-mi incarc capul cu atatea elemente inutile".Daca ai dreptate sau nu (in cazul in care gandesti ca mai sus) urmeaza sa vezi in continuare. Pentru aceasta trebuie sa fac o mica paranteza si sa prezint si alte notiuni legate de "net" Sa presupunem ca ai realizat un document HTML care arata extraordinar si, in plus, contine un subiect legat de HTML. Ei, acum, ca sa-l citeasca cineva, trebuie sa stie unde este plasat (adresa de internet a acestuia). Pentru aceasta l-ai inscris la citeva motoare de cautare (precum Altavista, Yahoo, Gaseste.com) si astepti vizitatorii. Dupa ceva vreme constati ca nu prea sunt vizitatori. De ce oare? Cauzele pot fi multiple dar am sa prezint numai una intrucat are legatura cu subiectul discutat. Sa vedem cum lucreaza un motor de cautare. Pentru aceasta am sa extind exemplul prezentat si am sa presupun ca documentul tau are cateva titluri si cateva paragrafe. Titlurile sunt definite sub forma:
Rezultatul este redat mai jos:
|
| <FONT SIZE="3"><B>Despre HTML</B></FONT> |
Rezultatul vizual este absolut identic. Cu toate acestea, cand am utilizat elementul FONT, nu am mai sugerat ca expresia Tutorial HTML este un titlu ci, pur si simplu, o expresi care, in pagina, nu se deosebeste cu nimic fata de un titlu scris cu H3. Cititorul nu va sti (si nici nu-l va interesa) daca titlul a fost realizat cu elementul H sau cu FONT.
Pentru a putea merge mai departe, sa vedem ce face un motor de cautare cand ajunge la pagina ta. Pentru aceasta trebuie sa spun ca intre tag-urile <HEAD> si </HEAD> mai exista un tag in care sunt precizate cuvintele cheie pentru pagina ta. Mai exact spus, cuvintele cheie reprezinta cuvintele cele mai semnificative care descriu pagina ta. In concluzie, unul dintre cuvintele cheie va fi "Tutorial HTML". Cand motorul de cautare va ajunge la pagina ta va contoriza de cate ori a intalnit expresia "Tutorial HTML" in pagina. Pentru a nu se produce confuzii, el va vedea daca aceasta expresie apare mai intai intr-un titlu (sau in mai multe). Daca se va intampla sa regaseasca cuvantul cheie intr-un titlu el va considera ca documentul tau este mult mai semnificativ decat alte documente ce se regasec in baza de date a lui si care contin acelasi cuvant cheie dar in cadrul unor paragrafe. In consecinta, documentul tau va fi plasat pe un loc superior fata de alte site-uri care prezinta problema de mai sus.
Dar, de unde poate sti un motor de cautare ca expresia "Tutorial HTML" se afla intr-un titlu daca acesta ar fi fost scris cu elementul FONT? Mai clar spus, de unde ar sti ca "Tutorial HTML" este un titlu daca nu ai sugerat acest lucru prin intermediul elementului H?
In concluzie, o formatare logica a textului nu este necesara vizitatorului unei pagini de web, in schimb poate fi foarte utila pentru moatoarele de cautare (si nu numai). De exemplu, un motor de cautare ar putea avea o optiune care sa permita cautarea unor citate dintr-un anumit autor. De unde ar putea sa stie un asemenea motor ca documentul tau contine un citat din acel autor daca ai folosit formatarea fizica si nu logica (nu ai folosit CITE) atunci cand ai scris numele autorului? Un motor de cautare nu va fi capabil sa regaseasca citate dupa numele autorului daca, in cadrul elemenutului BLOCKQUOTE, vom preciza autorul printr-o simpla scriere cursiva a numelui acestuia (va fi utilizat elementul I).
am vorbit cam mult despre elementele de formatare. Daca am facut-o a fost pentru a te face sa intelegi cat mai bine cum stau lucrurile dar si pentru a te introduce si in alte probleme pe care le implica realizarea si publicarea paginilor HTML. Dupa cum ai vazut (si o sa mai vezi) cunostiintele de HTML nu se limiteaza doar la niste simple tag-uri. Aceste cunostiinte implica si alte domenii conexe precum motoarele de cautare, etc...Observatie:
La urma urmei, intrebarea cea mai acuta care se pune este daca sa folosesti sau nu elemente de formatare logica. Din propria experienta pot sa-ti spun ca pentru inceput, pana te acomodezi cu elemntele HTML dar si cu modul in care sunt redate in pagina elementele logice, poti folosi elementele de formatare fizica (mai ales ca au o stansa asemanare cu butoanele pe care le foloseai in Word pentru evidentierea textului).
daca doresti sa ramai la stadiul de amator (adica pagina ta nu va ajunge niciodata pe web) nu are nici un sens sa-ti incarci capul cu tot felul de elemente.
daca vrei sa fi sigur de faptul ca un element va fi afisat asa cum doresti (asta in cazul in care elemnetul logic necesar nu este suportat de mai multe browser-e) atunci utilizeaza elementele de formatare fizica.
daca te gandesti ceva mai serios la realizarea paginilor de web, este obligatoriu sa te obisnuiesti cu elementele logice. In afara de faptul ca acestea sunt mult mai indicate, utilizarea lor poate spune multe unui eventual angajator.
pe masura ce complexitatea paginilor realizate de tine va creste vei constata ca este indispensabila cunoasterea ambelor stiluri de formatare.
incearca sa fii consecvent cu stilurile utilizate. Daca utilizezi stiluri fizice atunci fa-o asa pentru intreg documentul.
<P>
Structura unui document poate contine mai multe elemente cum ar fi: un titlu sau antet, unu sau mai multe paragrafe, un tabel, un citat, etc. In cazul HTML exista echivalentul acestor elemente si care poarta tot denumirea de elemente. Denumirea acestor elemente reprezinta, de regula, prescurtarea (in unele cazuri doar initialele) de la forma in limba engleza a elementului respectiv. Unul dintre acestea este elementul P (paragraph) care indica un paragraf. La intalnirea marcajului de paragraf, navigatorul lasa cateva randuri libere intre paragraful care tocmai s-a terminat si paragraful care tocmai incepe, deci nu se lasa un "alineat" la inceputul paragrafului asa cum se intampla cu tipariturile clasice. Incepand cu Html 2.0 tagul <P> este nevid, insa tagul </P> este optional. Daca nu se foloseste marcajul in forma container, paragraful se va termina la intalnirea unui alt marcaj <P>.
Sa privim putin acest exemplul :
<P> Acesta este un paragraf</P> <P> Acesta este un alt paragraf si, prin urmare, va fi scris pe un rind nou.</P>
rezultat:Acesta este un paragraf
Acesta este un alt paragraf si, prin urmare, va fi scris pe un rind nou.
Asa cum se vede din exemplul de mai sus, pentru a indica ca o anumita portiune din text trebuie sa fie afisata ca un paragraf folosim elementul P, element ce este format din 2 tag-uri. Primul tag, care este si tagul de inceput, este format din doua paranteze unghiulare (<) si (>) intre care se pune elementul dorit (in cazul nostru P). Tagul de sfirsit are in plus fata de tag-ul de inceput si un slash (/) dupa prima paranteza unghiulara . Tag-ul de inceput indica browser-ului unde incepe elementul respectiv si tag-ul de sfirsit unde se termina acel element. De regula, elementele sunt formate din aceasta pereche de tag-uri, dar exista si elemente care nu au decit un singur tag. Arunca o privire asupra exemplului de mai jos:<P>Acesta este un rand<BR> Acest text va fi scris pe randul urmator</P>
rezultat:<PRE>
Inainte de a trece la prezentarea acesui subiect este cazul sa vedem ce inseamna text preformatat. Acest lucru se refera la un text cu o anumita aranjare in pagina, cum ar fi o secventa de program, versuri, etc. In cadrul unui paragraf, browserul nu va tine cont de modul de aranjare al textului. Sa privim la exemplul de mai jos si sa vedem cum va fi afisata sursa unui program scris in limbajul C atunci cand este incadrata intr-un paragraf.
|
<p> #include "stdio.h" #include "conio.h" void main(void) { int nr; printf("\nIntroduceti un numar intreg:"); scanf("%d",&nr); printf("Patratul sau este %d.",nr*nr); getch(); } </p> |
#include "stdio.h" #include "conio.h" void main(void) { int nr; printf("\nIntroduceti un numar intreg:"); scanf("%d",&nr); printf("Patratul sau este %d.",nr*nr); getch(); }
Asa cum se vede si in exemplu, textul cuprins intr-un paragraf va fi afisat pe un rand pana ce acesta se va ocupa dupa care se trece la randul urmator. Daca am fi utlizat tag-ul
BR pentru a forta trecerea la alt rand am fi reusit sa facem ca liniile de program sa arate ca in realitate, dar efortul depus ar fi fost mai mare. In plus, pentru obtinerea alinierii, ar fi trebuit sa utilizam entitatea de mai multe ori.Pentru a permite afisarea textului preformatat, HTML dispune de elementul
PRE. Textul cuprins intre tag-urile <PRE> si </PRE> va fi redat exact cum apare el in codul sursa. Acest text va pastra toate caracteristicile referitoare la aliniere, distanta intre randuri, etc. Textul cuprins intre cele doua tag-uri se va deosebi de restul documentului prin faptul ca va fi scris cu caractere de tip teletype, care imita caracterele utilizate la masina de scris.La redarea unor exemple in acest tutorial am folosit elementul
PRE pentru a afisa in document sursa acelor exemple. Mai jos am prezentat un exemplu in care am utlitat elementul PRE pentru a reda un program scris in C.|
<PRE> #include "stdio.h" #include "conio.h" void main(void) { int nr; printf("\nIntroduceti un numar intreg:"); scanf("%d",&nr); printf("Patratul sau este %d.",nr*nr); getch(); } </PRE> |
#include "stdio.h"
#include "conio.h"
void main(void)
{
int nr;
printf("\nIntroduceti un numar intreg:");
scanf("%d",&nr);
printf("Patratul sau este %d.",nr*nr);
getch();
}
Observatie:Atunci cand dorim sa redam in pagina noastra o secventa de cod HTML, trebuie tinut cont de faptul ca anumite caractere (cum ar fi parantezele unghiulare care incadreaza tag-urile) nu pot fi redate daca sunt scrise ca atare. Pentru a putea fi redate trebuie folosite entitatile corespunzatoare fiecarui caracter special. Mai jos am redat trei dintre cele mai utilizate caractere speciale precum si entitatile acestora.
( < ) - semnul mai mic decat- <
( > ) - semnul mai mare decat- >
( & ) - semnul ampersand- &
De exemplu, daca dorim ca in cadrul unei expresii sa introducem caracterul ( < ) atunci va trebui sa folosim entitatea corespunzatoare acestui caracter. Entitatea ce defineste acest caracter este de forma <
Intre tag-urile
PRE si PRE putem utiliza si tag-ul <BR> precum si tag-ul <P>. Pe linga aceste elemente, putem folosi si elementele de formatare fizica sau logica a caracterelor. Chiar daca nu am discutat despre aceste elemente, mai jos am prezentat un asemenea exemplu.
<pre>
<em>Viata e un bun pierdut</em>
<em><b>Cand n-o traiesti cum ai fi vrut</b></em>
</pre> |
Viata e un bun pierdut
Cand n-o traiesti cum ai fi vrut
Tagul <PRE> are un singur atribut si anume atributul WIDTH. Forma generala este:
| <PRE WIDTH="Numar"> |
unde valoarea
numar este un numar zecimal care reprezinta numarul de caractere ce pot fi scrise pe un rand. In practica, acest atribut este ignorat de browsere.intrucat atributl WIDTH este ignorat de browsere, trebuie sa fim precauti atunci cand dorim sa introducem in pagina un text preformatat. Cu alte cuvinte, daca textul cuprins intre tag-urile <PRE> si </PRE> va fi scris doar pe o singura linie, acesta va fi afisat in pagina doar pe o singura linie, indiferent de cat de lunga este aceasta. Intrucat, pentru textul cuprins intre tag-urile elementului PRE, ruperea randurilor nu este realizata in mod automat de catre browser, s-ar putea sa ne trezim ca avem o pagina de web cu o latime egala cu lungimea expresiei cuprinse intre tag-urile elementului amintit mai sus.Observatie:
<ADDRESS>
Elementul
ADDRESS este utilizat pentru a oferi informatii despre persoana de contact. Persoana de contact poate fi autorul unui material publicat pe Internet sau , la fel de bine, poate fi vorba despre modalitatile de contactare a unei firme care prezinta produse "online". De regula, intre tag-urile ADDRESS vom plasa numele persoanei de contact dar si o legatura catre aceasta. Desi nu am discutat despre legaturi HTML, am sa ilustrez mai jos doua situatii de utilizare a elementului ADDRESS.|
<ADDRESS> Autor: <A HREF="http://www..ro"> <A> </ADDRESS> |
In exemplul dat, legatura este facuta catre site-ul autorului. La fel de bine puteam sa precizam o adresa de email. Mai jos am facut acest lucru.
|
<ADDRESS> Autor: <A HREF="mailto:@personal.ro"> <A> </ADDRESS> |
Diferentele dintre cele doua exemple se pot observa cand te pozitionezi cu mouseul deasupra numelui. In acel moment, in bara de stare a browserului va fi afisata adresa le care se face trimitere. Daca autorul documentului dispune de un site propriu si de adresa de mail, atunci pot fi redete ambele legaturi.
|
<ADDRESS> Autor: <A HREF="http://www..ro"> <A> < <A HREF="mailto:@personal.ro">@personal.ro<A> > </ADDRESS> |
In continuare este prezentata o alta situatie in care se impune utilizarea elementului
ADDRESS. In practica aceasta situatie poate fi intilnita la sfatsitul unei pagini in care se face prezentarea unui produs.|
<ADDRESS> Pentru detalii si comenzi contactati <A HREF="mailto:comenzi@dnt.ro">comenzi@dnt.ro<A> sau la telefon XXX.47.29 <ADDRESS> |
Elementul
ADDRESS nu trebie utilizat decat pentru a sugera persoana de contact. Daca vrei sa redai o adresa postala va trebui sa utilizezi BR.<DIV>
Elementul
DIV dispune de mai multe atribute dar numai atributul ALIGN face obiectul prezentei discutii. Restul atributelor sunt utilizate in combinatie cu CSS.|
<DIV ALIGN="right"> <P>Aici avem un paragraf</P> <ul> <li>Bucuresti <li>Brasov <li>Constanta </ul> </DIV> |
Aici avem un paragraf
| Instructiunea | Atribute | Descriere |
|---|---|---|
| < div atribute > < / div > |
- | marcaj pentru blocuri de text (aliniat implicit la stanga daca nu este in
interiorul unui marcaj care face o alta aliniere, de ex. CENTER) |
| align= |
aliniat la stanga (left), - este alinierea implicita, deci
nu este necesar decat in interiorul unui marcaj care face o alta aliniere,
de ex. CENTER
aliniat pe centru (center),
aliniat la dreapta (right),
pentru ambele margini aliniate (justify); observati spatiul
din dreapta dintre text si marginea tabelului si distanta dintre cuvinte, care
este reglata astfel incat marginea din dreapta a textului sa nu fie neregulata.
Sesizati diferenta fata de paragrafele cu align = left sau fara align de mai sus.
Deosebirea dintre p si div consta in faptul ca prima lasa un spatiu mai mare deasupra si dedesubtul paragrafului, pe cand div lasa spatiul egal cu cel dintre randuri. |
Intre tag-urile elementului
DIV pot fi incluse toate elementele de tip "in linie" si de tip "bloc".<BLOCKQUOTE>
Atunci cand redam un citat mai mare, vom dori ca acesta sa fie pus in evidenta fata de restul textului cuprins in pagina.
Pentru a realiza acest lucru, exista elementul BLOCKQUOTE care va reda un citat separat de restul textului. Citatul cuprins intre tag-urile <BLOCKQUOTE> si </BLOCKQUOTE> va fi plasat in pagina la distanta egala atat fata de marginea stanga cat si fata de marginea dreapta a documentului. Mai jos am prezentat un citat pentru a vedea cum este pozitionat fata de restul textului.
|
<BLOCKQUOTE> |
...Care este insusirea romanului ULTIMA NOAPTE DE DRAGOSTE, INTAIA NOAPTE DE RAZBOI? Este aceea de a fi o proza superioara. Un om cu un suflet clocotitor de idei si pasiuni, un om inteligent si neprihanit totodata, plin de subtilitate, de patrundere psihologica, dar si naiv cu inocente (si cu talent de poet), vorbeste despre dragostea lui, despre femeie, asa cum o vede el ...
Chiar si in prezent se pot intalni multe pagini de web care utilizeaza acest element pentru a obtine diferite efecte de aliniere. De exemplu, utilizarea elementului
BLOCKQUOTE, la care se adauga doua linii orizontale, poate fi utilizata cu succes pentru realizarea unor note explicative (asa am realizat observatiile si notele incluse in paginile din acest site). Iata cum ar arata sursa pentru o asemenea constructie:|
<BLOCKQUOTE> |
Observatie: in acest loc poate fi introdusa o mica observatie sau explicatie, urmand ca aceasta sa fie evidentiata printr-o aliniere mai speciala, precum si prin incadrarea intre doua linii orizontale
Intre tag-urile elementului
BLOCKQUOTE pot fi incluse si alte elemente. De regula, se pot include alte paragrafe (P), tabele (TABLE), sau poate fi inclus chiar si un alt element BLOCKQUOTE.De retinut este ca, daca intre tag-urile
<BLOCKQUOTE> si </BLOCKQUOTE> putem avea paragrafe, intr-un paragraf nu putem introduce un element BLOCKQUOTE (este si lipsita de logica o asemenea constructie). Mai jos este dat un exemplu de includere a unor elemente intre tagurile <BLOCKQUOTE> si </BLOCKQUOTE>.|
<BLOCKQUOTE> |
In acest loc poate fi introdus un citat urmand ca acesta sa fie evidentiat printr-o aliniere mai speciala.
Aici ar putea fi introdus un alt citat care va fi evidentiat in cadrul citatului initialAici se poate relua citatul initial
Ca sa te scutesc de necazuri am sa fac o precizare. Daca privesti cu atentie la modul in care sunt aliniate notele explicative din acest site vei observa ca textul acestor note este aliniat la ambele margini. Cu alte cuvinte am folosit un paragraf al carui atribut ALIGN este de forma ALIGN="justify". Daca vei incerca acelasi lucru vei obtine ceva ca mai jos:
Observatie:........text.......
Dupa cum vezi nu este chiar asemanator cu notele mele. Spatiul dintre linii si notele explicative este destul de mare si chiar inestetic. Acest lucru se datoreaza elementului P care, asa cum ai invatat, va lasa un rand gol intre el si urmatorul element (in cazul acestui exemplu este vorba de elementul HR). Pentru a defini spatiul care trebuie sa existe intre un paragraf si elementele care il inconjoara am folosit CSS. Prin urmare, pana vei invata CSS, nu trebuie sa folosesti o astfel de constructie. In locul acesteia poti utiliza BLOCKQUOTE, dar fara sa mai adaugi si linii orizontale.
Elementul
BLOCKQUOTE are un singur atribut (CITE) a carui forma generala este:CITE="URI"
Acest atribut este ignorat de browsere si, prin urmare, nu va fi afisat. Cu toate acestea, am sa spun ca, valoarea URI (Universal Resource Identifier sau URL in alte notatii), este o expresie de forma "http://www.unibuc.ro/carte/marinpreda/opere.htm". Acest atribut ar trebui sa fie afisat imediat dupa terminarea citatului, pentru a sugera sursa citatului in cauza (in exemplul meu am sugerat ca este preluat de pe INTERNET).
Pentru a scrie sursa citatului, putem utiliza elementul
CITE (a nu se confunda cu atributul CITE) care are ca rezultat scrierea textului sub forma inclinata. Acest element este utilizat in astfel de situatii, dar si pentru a evidentia titluri de publicatii, de carti, etc. Acest element poate fi inclus si in alte elemente HTML. Mai jos am utilizat elementul CITE pentru a nominaliza autorul citatului de la inceputul capitolului.|
<BLOCKQUOTE> |
...Care este insusirea romanului "ULTIMA NOAPTE DE DRAGOSTE, INTAIA NOAPTE DE RAZBOI?" Este aceea de a fi o proza superioara. Un om cu un suflet clocotitor de idei si pasiuni, un om inteligent si neprihanit totodata, plin de subtilitate, de patrundere psihologica, dar si naiv cu inocente (si cu talent de poet), vorbeste despre dragostea lui, despre femeie, asa cum o vede el ... George Calinescu
Observatie:daca se omite utilizarea tag-urilor <P> si <P> atunci, textul delimitat de tag-urile elementului CITE nu va mai fi plasat pe rand nou, el va fi scris in continuarea citatului.
Daca dorim ca numele autorului sa fie aliniat la marginea dreapta a ferestrei, vom putea folosi o expresie de forma:
| <P Align="right"><cite>George Calinescu</cite></P> |
Iata cum va arata citatul nostru in urma acestei modificari:
...Care este insusirea romanului ULTIMA NOAPTE DE DRAGOSTE, INTAIA NOAPTE DE RAZBOI? Este aceea de a fi o proza superioara. Un om cu un suflet clocotitor de idei si pasiuni, un om inteligent si neprihanit totodata, plin de subtilitate, de patrundere psihologica, dar si naiv cu inocente (si cu talent de poet), vorbeste despre dragostea lui, despre femeie, asa cum o vede el ...
George Calinescu
Trebuie sa spun ca pot exista si alte metode de aliniere a textului la marginea din dreapta a ferestrei dar cea prezentata mai sus cred ca se potriveste cel mai bine in contextul de fata. Metode mai avansate de control asupra alinierii textului, pot fi obtinute prin intermediul CSS dar, momentan, nu acesta este subiectul prezentat.
Este usor de observat ca numele (sau sursa de unde a fost preluat citatul) cuprins intre tagurile
CITE si CITE sunt scrise cu litere inclinate. Nu constituie o eroare dar nici nu este corect daca in loc de CITE vom formata textul cu ajutorul elementului I (voi prezenta mai tarziu elementele de formatare a textultui). Cu toate acestea, nu recomand o asemenea solutie, din motive pe care le voi prezenta atunci cand voi discuta despre elementele de formatare a textului. Pana atunci ar trebui sa ai incredere ca ceea ce este scris aici este corect.<H1> la <H6>
Un document poate contine unul sau mai multe titluri. Pentru aceasta HTML dispune de elementul H (heading). Forma generala este:
<Hnr> TITLU </Hnr>
unde nr este un numar ce poate avea valori de la 1 la 6 in functie de importanta care o are titlul respectiv in cadrul documentului. H1 va duce la realizarea de titluri foarte evidente iar H6 va reprezenta forma cea mai putin evidenta. In urmatorul exemplu sunt redate modurile de afisare pentru fiecare valoare in parte.
Modul de afisare al titlurilor difera in functie de fonturile utilizate (setul de caractere care este utilizat pentru afisarea paginii in fereastra browser-ului). De exemplu chiar daca utilizam H2 pentru realizarea titlurilor, modul de prezentare poate diferi daca sunt utilizate fonturi diferite.
Pentru alinierea pe orizontala se foloseste atributul ALIGN iar valorile pe care le poate lua sunt left, right, center si justify. Mai jos este un exemplu de titlu centrat in pagina.
<H3 ALIGN="center">Acest titlu este centrat</H3>
Nota: utilizarea elementului H trebuie facuta cu dicernamant. Ca regula generala nu este estetic sa intercalam in sens invers doua titluri de marimi diferite, adica sa avem in pagina o succesiune de titluri de forma H2, H1, H5. Ele trebuie utilizate in ordinea importantei care o sugereaza si este corect sa le folosim intr-o ordine descrescatoare. Arunca o privire la acest exemplu incearca sa-ti imaginezi cat de inestetic ar putea arata o pagina in care sa fie prezente titluri in succesiunea prezentata.
| Instructiunea | Atribute | Descriere / Exemple |
|---|---|---|
| < font atribute > < / font > |
size = i | marimea fontului: i = 1, 2, ... , 7; 1 = mic, 7 = mare |
| color = | culoarea poate fi data prin numele ei sau prin valoarea RGB | |
| face = " font1 , font2 , ..." |
o lista de minim 2 fonturi: |
specifica numele fontului. Optiunea este doar Microsoft.
|
Instructiune |
Atribute |
Descriere |
|
<basefont atribute> </basefont> |
Size= |
marimea fontului implicit al intregii pagini: i = 1, 2, ... , 7; 1 = mic, 7 = mare; fontul implicit are marimea 3; nu are influenta asupra textului din interiorul tabelelor |
|
Color= |
culoarea poate fi data prin numele ei sau prin valoarea RGB Optiunea este doar Microsoft. |
defineste fontul care va fi utilizat pentru textul care urmeaza tagului BASEFONT.
<BLINK>
produce "clipirea" textului continut.
Acesta este un <BASEFONT SIZE=5>exemplu</BASEFONT> de utilizare a formatarii BASEFONT si <BASEFONT SIZE=4> <BLINK>BLINK</BLINK>. De remarcat ca dimensiunea din BASEFONT se pastreaza in continuare.
<NOBR>
anuleazaa wrap-ul automat al cuvintelor pentru textul din container si ruperile de randuri generate, cu exceptia celor provocate de BR, P si WBR.
Aceasta este extensie Netscape si Microsoft si poate servi la aranjarea unor texte in linii predefinite.
insereaza o rupere de rand, daca aceasta este necesara, intr-o linie aflata in containerul NOBR, este similar unui cratime optionale (intentia autorilor, dar diverse browsere pot sa considere obligatorie trecerea pe un nou rand).
Utilizarea uzuala este deci
<NOBR>text<WBR>text</NOBR>
Dupa ce am vorbit despre titluri, paragrafe, liste precum si alte elemente HTML necesare in lucrul cu acestea acum vom discuta despre o modalitate de divizare a unui document construit pe baza elementelor invatate pana acum.
Daca dorim sa separam doua portiuni de text care abordeaza subiecte total diferite (si nu numai) va trebui sa utilizam un element HTML care sa poata produce aceasta separare intr-un mod cat se poate de evident din punct de vedere vizual.
Pentru aceasta HTML dispune de elementul
HR (denumirea reprezinta initialele de la Horizontal Rule) care este utilizat pentru trasarea liniilor orizontale. Utilizarea acestui element reprezinta o metoda forte eficienta de divizare a unui document HTML.Elementul
HR consta intr-un singur tag si anume <HR>. Prin simpla inserare a acestui tag in codul HTML al unei pagini de web vom obtine o linie orizontala, asa cum se vede in exemplul de mai jos.|
<HTML> <HEAD> <TITLE>Elementul HR</TITLE> </HEAD> <BODY> <HR> </BODY> </HTML> |
Rezultatul va fi ca mai jos:
Tag-ul
<HR> dispute de mai multre atribute. Acestea sunt prezentate in tabelul de mai jos. Mai trebuie spus ca, atunci cand nu sunt specificate aceste atribute, ele vor avea valorile implicite specificate in tabel.|
Instructiune |
Atribute |
Descriere |
| < hr atribute > | - | rigla orizontala; fara atribute obtinem: |
| noshade | elimina umbra riglei: |
|
| size = z | z = inaltimea riglei (in pixeli); pentru z = 7: |
|
| width = x | x = latimea riglei, in pixeli sau procente din spatiul disponibil
(pagina, celula de tabel, etc.); aliniaza implicit pe centru;
pentru x = 50 %: |
|
| align = | alinierea riglei in pagina; pentru width = 50 % obtinem: left center right |
|
| color = | culoarea (data prin nume sau valoarea RGB), pentru color = #00ffff obtinem:
|
In continuare voi da cateva exemple pentru intelege mai bine efectul vizual pe care il are fiecare atribut utilizat in cadrul tag-ului
<HR>.Inainte de toate sa vedem modul de afisare al unei linii orizontale atunci cand este specificat atributul
WIDTH. Pentru aceasta am dat trei exemple in care atributul WIDTH are valori diferite.| <HR WIDTH="400"> |
| <HR WIDTH="50%"> |
| <HR> |
Pana aici cred ca lucrurile sunt foarte clare (de retinut ca atunci cand atributul WIDTH nu este specificat valoarea implicita pentru acesta va fi 100%). Acum voi prezenta cateva exemple in care am utilizat atributul SIZE. Sa aruncam o privire peste aceste exemple:
| <HR WIDTH="50%" SIZE="1"> |
| <HR WIDTH="50%"> |
| <HR WIDTH="50%" SIZE="6"> |
La o prima vedere nu sunt foarte multe lucruri de observat. Totusi, priveste mai atent aspectul unei asemenea linii (este mai usor de observat in cazul exemplului in care atributul
SIZE are valori mai mari de unu). Daca nu ai remarcat nimic deosebit atunci iti spun eu. Este vorba de caracterul tridimensional al liniilor trasate (acest lucru este mai evident in Netscape Comunicator).| <HR WIDTH="50%" SIZE="2" NOSHADE> |
| <HR WIDTH="50%" SIZE="6" NOSHADE> |
La atributele prezentate pana acum se mai adauga si atributul
ALIGN, atribut ce specifica modul de amplasare in pagina al unei linii orizontale. Valorile si utilizarea acestui atribut sunt similare ca si in cazul paragrafelor. Chiar daca stii cum se foloseste acest atribut, mai jos am dat un exemplu:| <HR ALIGN="left" WIDTH="50%" SIZE="1"> |
In mod deliberat am lasat la sfarsit prezentarea atributului COLOR. Desi este foarte util in practica, acesta are un mare dezavantaj: nu este redat corect decat de Microsoft Internet Explorer. Marele rival de pe piata navigatoarelor de Internet (este vorba de Netscape Comunicator) ignora complet prezenta acestui atribut. Chiar daca este asa, am prezentat doua exemple care vor putea fi vizualizate corect daca folosesti Internet Explorer-ul pentru a citi aceasta pagina.
| <HR WIDTH="50%" SIZE="2" COLOR="red"> |
| <HR WIDTH="50%" SIZE="6" COLOR="green"> |
Singura observatie ce trebuie facuta este ca, pe post de valoare atribuita atributului
COLOR, am folosit nume de culori (si nu valoarea hexazecimala a acestora, subiect ce va fi tratat in alt capitol.)Nota:ai putea fi tentat sa crezi ca nu este mare lucru daca atributul color nu este interpretat corect de Netscape Communicator, intrucat acesta nu mai este foarte utilzat. La o prima vedere este foarte posibil sa ai dreptate. Intr-o statistica mai recenta realizata in SUA am citit ca cca. 80% dintre utilizatorii de internet foloseau Internet Explorer iar restul Netscape Communicator (mai exista si un procent de 1% care folosesc alte navigatoare). Despre ce se intampla in Romania nu pot spune mare lucru. Din datele statistice colectate de la vizitatorii acestui site se pare ca lucrurile ar sta cam la fel (dar acest lucru nu poate fi generalizat). Este posibil ca in Romania browser-ul Netscape Comunicator sa aiba o utilizare ceva mai larga fapt datorat distribuirii gratuite a acestui software. Chiar daca procentele prezentate de mine sunt sau nu foarte exacte problema de fond ramane. Ceea ce vreau sa subliniez este ca un site trebuie realizat in asa fel incat sa arate identic (sau macar asemanator) indiferent de browser-ul utilizat pentru citirea acestuia. Acest subiect va fi tratat intr-un capitol distinct.
Dupa ce am prezentat atributele elementului
HR este cazul sa vedem un mic exemplu practic al utilizarii acestora. Pentru aceasta voi realiza o enumerare de judete din Romania respectiv de state din SUA care vor fi delimitate cu ajutorul unor linii orizontale. Mai jos este redata sursa acestui exemplu:|
<HTML> <HEAD> <TITLE>Judete si state</TITLE> </HEAD> <BODY> <H4>Judete din Romania</H4> Alba<BR> Arad<BR> Covasna<BR> <HR ALIGN="left" WIDTH="30%" SIZE="3"> <H4>State din SUA</H4> Colorado<BR> California<BR> Texas (tag-ul BR este optional) <HR ALIGN="left" WIDTH="30%" SIZE="3"> |
Alba
Arad
Covasna
Colorado
California
Texas
Ceea ce trebuie retinut din acest exemplu este ca linia orizontala va fi trasata in mod automat la inceputul randului urmator si nu in continuarea acestuia. In consecinta, poate fi omisa utilizarea tag-ului <BR>. Chiar daca lucrurile stau asa, este bine sa folosim tag-ul
<BR>.
<DL>
<DT>HTML-Hypertext Markup Language
<DD><HR SIZE="1">
HyperText Markup Language este limbajul care sta la baza
tuturor paginilor de Internet.Este un limbaj usor de asimilat.
Fisierele HTML sunt fisiere de tip text si pot fi realizate cu
orice editor de text.
<HR SIZE="1">
<DT>DHTML
<DD><HR SIZE="1">
Dynamic HTML este o combinatie de HTML, CSS si JavaScript
care are drept rezultat obtinerea unor efecte speciale in cadrul
unei pagini de web. Invatarea DHTML presupune cunostiinte de CSS
si JavaScript.
<HR SIZE="1">
</DL> |
Mai jos este prezentat rezultatul:
Mai exista si alte elemente HTML care, combinate cu liniile orizontale, duc la obtinerea unui aspect mai "special". Un astfel de element este elementul
Ceea ce este de retinut este ca putem include o linie orizontala in anumite elemente HTML dar nu in oricare din aceste elemente. De exemplu, in cazul prezentat mai sus tag-ul
Cat despre locurile unde nu trebuie amplasate liniile orizontale nu sunt foarte mult de spus. Ca regula generala, ele nu trebuie utilizate astfel incat sa produca un aspect neplacut vederii. De exemplu, plasarea unei linii orizontale imediat dupa un titlu ar duce la un aspect neplacut. Exemplele ar putea continua dar ma opresc aici. Totusi, mai este ceva de spus referitor la acest aspect si anume ca nu trebuie incluse linii orizontale in tag-urile care nu permit acest lucru. Spun aceasta intrucat browser-ul va afisa acele linii si, daca nu ai un mic program care sa verifice corectitudinea codului HTML scris de tine, vei avea senzatia ca lucrurile sunt facute perfect.
<LISTING>
aplica textului din container un font similar iesirilor de calculator. Este un tag pastrat doar pentru compatibilitate cu versiuni mai vechi.
Provoaca trecerea la un nou paragraf.
Este preferabil sa se utilizeze tagul PRE pentru realizarea functiunilor LISTING si CODE.
<CENTER>
Elementul
CENTER defineste un bloc al carui continut este centrat orizontal. Cu alte cuvinte, toate elementele cuprinse intre tag-urile <CENTER> si </CENTER> vor fi centrate in pagina. Pentru a intelege cum lucreaza acest element am prezentat exemplu an care am folosit o lista neordonata.|
<CENTER> <P>Aici avem un paragraf</P> <ul> <li>Bucuresti <li>Brasov <li>Constanta </ul> </CENTER> |
Rezultatul consta in centrarea tuturor elementelor incluse intre tagurile
<CENTER> si </CENTER>, asa cum se poate observa mai jos.Aici avem un paragraf
Sa vedem ce se intampla daca elementul CENTER este inclus in alte tag-uri. Pentru aceasta sa privim exemplul de mai jos:
|
<P>Aici avem un paragraf</P> <UL> <LI><center>Bucuresti</center> <LI>Brasov <LI>Constanta </UL> |
Aici avem un paragraf
Dupa cum se poate deduce foarte usor din cele doua exemple prezentate, elementul
CENTER poate contine alte elemente HTML (toate elementele de tip bloc cat si elementele inline) dar poate fi continut de elemnte precum BODY, BLOCKQUOTE, DL, LI, precum si alte elemente mai putin utilizate. Elementul CENTER nu poate fi plasat in elemente precum P, OL, UL sau TABLE (poate fi plasat in LI).|
<BLOCKQUOTE> <P>...Care este insusirea romanului ULTIMA NOAPTE DE DRAGOSTE, INTAIA NOAPTE DE RAZBOI? Este aceea de a fi o proza superioara. Un om cu un suflet clocotitor de idei si pasiuni, un om inteligent si neprihanit totodata, plin de subtilitate, de patrundere psihologica, dar si naiv cu inocente (si cu talent de poet), vorbeste despre dragostea lui, despre femeie, asa cum o vede el ...</P> <CENTER><CITE>George Calinescu</CITE><CENTER> </BLOCKQUOTE> |
...Care este insusirea romanului ULTIMA NOAPTE DE DRAGOSTE, INTAIA NOAPTE DE RAZBOI? Este aceea de a fi o proza superioara. Un om cu un suflet clocotitor de idei si pasiuni, un om inteligent si neprihanit totodata, plin de subtilitate, de patrundere psihologica, dar si naiv cu inocente (si cu talent de poet), vorbeste despre dragostea lui, despre femeie, asa cum o vede el ...
George Calinescu
In exemplele date de mine am utilizat elementul
CENTER pentru a centra o lista. In practica este putin probabil sa se realizeze centrarea unei liste utilizanduse o astfel de solutie (se observa foarte usor ca centrarea obtinuta in acest mod lasa de dorit). Cu alte cuvinte exemplul dat are un scop mai mult didactic si mai putin practic. In realitate, centrarea unei asemenea liste se realizeaza cu ajutorul tabelelor. De fapt este vorba de un tabel in care am introdus o lista. Deoarece nu am discutat inca despre tabele nu am prezentat aici solutia completa pentru centrarea unei liste. Cu toate acestea, am prezentat mai jos modul in care va arata o asemenea lista.
|
 |
 |
 |
 |
 |
 |