Current time: 05-18-2008, 07:36 AM
Hello There, Guest! (Login — Register)
Bine ai venit pe Invatam.Net
Te invitam sa te inregistrezi pe forum, daca nu esti deja membru in Invatam.Net
...
Invatam.Net este unul dintre cele mai noi forum-uri de web design si dezvoltare
din Romania. Vei gasi aici tutoriale, articole unicat si o comunitate prietenoasa.
Daca esti incepator sau avansat iti vei gasi locul alaturi de alti pasionati
de design. Poti discuta despre diferite aspecte ale activitatii tale, cere informatii,
schimba links sau mesaje de forum, posta anunturi si descarca fisiere exclusive
pentru Invata.Net si Wtricks.com
Acesta nu e un tutorial despre coduri html sau semnificatia html-ului ci despre modul cum interpreteaza browserul o pagina html. Cum o gandeste, cum o reda pe monitorul nostru ...etc...despre coduri, modul lor de folosire si semnificatiile lor gasiti pe net o gramada.
Atunci cand noi tastam intr-un browser o adresa web, de fapt, ceea ce facem este sa dam o comanda browserului. Trebuie sa ne gandim la browser ca la un program ce este instalat in sistemul nostru de operare. Prin urmare , cand tastam in browser adresa http://www.invatam.net de fapt spunem browserului sa caute siteul ce are aceasta adresa si sa o interpreteze pe monitorul nostru.
Nu browserul cauta siteul..ci el trimite mai departe cererea noastra unui server (celui care il detine firma de internet unde sunteti conectati) serverul cauta siteul si apoi il "trimite" inapoi browserului.
Modul in care browserul comunica cu serverul se numeste protocol de comunicare adica http. Mai pe scurt se intampla asa : noi tastam adresa http://www.invatam.net in browser, browserul trimite aceasta cerere serverului prin protocolul http, serverul cauta adresa si dupa ce o gaseste trimite , folosind acelas protocol http, trimite informatiile continute la acea adresa browserului...adica trimite exact pagina http://www.invatam.net(cu informatii, poze, linkuri etc).Browserul are toate informatiile pentru a ne reprezenta pagina pe monitor ...dar nu stie cum s-o faca decat cu ajutorul unui limbaj pe care el il cunoaste...adica HTML. De retinut....serverul trimite browserului exact pagina ce am tastat-o.....nu tot siteul. De exemplu....daca noi dam clik pe "Regulament" din pagina http://www.invatam.net, procesul descris mai sus se repeta si browserul ne interpreteaza pe monitor cu totul alta pagina, adica : http://www.invatam.net/misc.php?action=rules
Sper ca ati inteles pana aici.
Intrebarea e : Cum stie browserul sa ne redea pagina ceruta de noi pe monitor? Aici intervine html-ul.
Sa vedem cum interpreteaza browserul comenzile limbajului html.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titlul siteului</title>
</head>
<body>
SA INVATAM ESTE UN FORUM EXTRAORDINAR
</body>
</html>
Semnificatiile celor de mai sus le gasiti pe net.Tot ce pot sa va spun e ca intotdeauna sa folositi un doctype chiar si atunci cand faceti diferite teste. Este extrem de important. Dar despre altceva vreau sa vorbim aici. Daca scrieti codul de mai sus intr-un editor de text, il salvati cu extensia .html si apoi deschideti cu un browser , pe monitor va vor aparea cuvintele :
SA INVATAM ESTE UN FORUM EXTRAORDINAR
Sa facem cateva observatii:
Dupa cum stim intre tagurile <html> si </html> este intreg documentul nostru. Toat codurile ce le vom scrie noi in pagina vor fi incluse intre aceste doua taguri. Elementul html este de fapt tagul de deschidere <html> plus toate codurile noastre si tagul de inchidere </html>, cauza pentru care are denumirea de element radacina.Deci browserul citeste doctypul si stie ce tip de document html trebuie sa interpreteze..apoi ajunge la tagul <html> si stie ca de acolo incepe documentul. Elementul html fiind elementul radacina, adica cel ce contine toate codurile noastre , browserul il interpreteaza ca fiind containerul general, si nu executa alte modificari decat cand gaseste alta comanda, alta linie de cod care sa ii spuna sa faca altceva. Sa exemplificam:
Imaginea alaturata este interpretata de browser in felul urmator: Browserul citeste tagul <html> ceea ce reprezinta container pentru toate elementele ce urmeaza.Nu stiu cum sa va explic....chiar daca toate elementele ce urmeaza sunt incluse in acest container, el de fapt nu are dimensiuni.Dimensiunile containerului sunt date de elementele ce le vom introduce in el...adica in exemplul de fata dupa tagul de deschidere <html> urmeaza <head>.Tot ceea ce este inclus in elementul head adica intre tagurile <head> si </head> nu este reprezentat pe monitorul nostru..deci sarim peste el. Apoi urmeaza <body>.. . tot ceea ce contine elementul body vedem noi pe monitor. In exemplul de mai sus in body este acel text.Acum...fiecare element ce apare pe monitorul nostru isi face propriul lui container ce apartine de elementul superior.Confuzie?!!! Pai cred si eu....
Asta e arborele de care vorbeam.....html elementul radacina din care se desprinde headul si body-ul si din body textul cu pricina.
Acum....body-ul documentului nostru este inclus in elementul html... containerul ce reprezinta elementul html reprezinta rezolutia browserului nostru....iar in cadrul acestui container este un container mai mic ce reprezinta body-ul documentului. De ce asa?!! Pentru ca browserele au un mod presabilit de a interpreta documentul (default se numeste).Dupa cum vedeti , textul nostru nu este chiar in marginea monitorului in partea stanga si nici nu este lipit de partea de sus a rezolutiei browserului. Acolo sunt niste distante ce variaza de la browser la browser.Aceste distante se numesc : margin(padding si border are legatura).
Datorita acestor distante putem considera bodyul ca un container mai mic ce este inclus in elementul html.
Si cum am spus mai devreme ca exista o margine in stanga si in partea de sus atunci cand textul nostru este reprezentat pe monitor, stim si ca textul face parte din body , inseamna ca body are margin (in mozilla e de 8 pixeli) .Are margin dar fata de ce? Fata de elementul html, deoarece body face parte dintr-un container mai mare adica din elementul html. Cum elementul html reprezinta de fapt intreaga rezolutie a browserului rezulta ca body are margin fata de aceasta rezolutie.Pading este distanta dintre continutul unui element html si border.Border este exact ce zice...bordura ce o putem folosi in jurul unor elemente html. Margin este distanta pana la elementul invecinat.Mai multe date gasiti o sumedenie pe net.Textul nostru nu este incadrat de nici un tag, de aceea distantele prestabilite de catre browser apartin de fapt bodyu-lui si nu textului.Cum body este un element , asta inseamna ca browserul aplica acestui element marginile ce le observam si noi, margin ce le aplica fata de elementul superior body-ului....adica elementul html.offffff ati inteles ceva?!!! daca nu..va cred. Nici eu n-am inteles nimic.
Aceste margini creeaza dupa cum am spus mai sus un container in cadrul elmentului radacina html , mai mic decat rezolutia browserului....adica avem elementul html, browserul considera acest element pe toata lungimea monitorului (adica a rezolutiei browserului) apoi avem elementul body caruia browserul ii atribuie niste distanfe fata de elementul radacina, in cazul browserului mozilla este de 8 pixeli.Deci 8 pixeli in stanga , 8 pixeli in dreapta . Asta inseamna ca in mozilla lungime bodyului este lungimea elementului html (adica toata rezolutia browserului) minus 16 pixeli.Daca avem o rezolutie de 1024 asta inseamna ca exista containerul mare a elementului radacina html ce are lunginmea de 1024 , in interior este containerul mai mic body ce are lungimea de 1024-16 adica 1008...si in acest container este textul nostru ce are o distanta in stanga de 8 pixeli fata de containerul mare html si o distanta in drepata de 8 pixeli fata de containerul mare html.
Desigur...textul nostru nu cuprinde toata lungimea bodyului de 1008 pixeli dar daca vom continua sa scriem cand ajungem sa ocupam toata lungimea bodyului de 1008 pixeli textul nostru o ia de la capat pe un nou rand.
Inaltimea elementului body este exact inaltimea textului(20 de pixeli) deoarece textul nostru nu are nici un fel de taguri. Prin urmare inaltimea elementului radacina este de, 20 de pixeli inaltimea elementului body ,plus 8 pixeli marginea de sus a elementului body fata de containerul mare html ,plus 8 pixeli marginea de jos a elementului body fata de containerul mare html = in total 36 de pixeli.
Deci avem un container mare html cu dimensiunile de 1024 pe 36 de pixeli in care este continut alt container mai mic ce reprezinta body de 1008 pe 20 de pixeli.(ganditiva la aceste containere ca la niste dreptunghiuri ce au continut...in cazul nostru text..ele pot avea culori , imagini etc..)
Dreptunghiul albastru reprezinta containerul mare html iar cel rosu reprezinta containerul body.Observati distantantele dintre dreptunghiul rosu si cel albastru (8 pixeli in mozilla).Acele distante sunt marginile de care vorbeam.
Sa continuam si sa mai adaugam ceva in codul nostru:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titlul siteului</title>
</head>
<body>
<p>SA INVATAM ESTE UN FORUM EXTRAORDINAR</p>
</body>
</html>
Dupa cum observam am adaugat cele doua taguri <p> si </p>.Din textul nostru pe care browserul il reda exact asa cum era datorita faptului ca nu avea nici un cod html atasat si astfel browserul nu il modifica in nici un fel, am facut, din text adica, un element html datorita faptului introducerii celor doua taguri.A cum problema se schimba.Daca tineti minte am spus ca fiecare element are margin, fata de elementul superior lui (elementul parinte). .Avem un container ce contine elementul <p></p>(paragraf) care este in interiorul elementului body care este in interiorul elementului html. PFIUUUUUUUUUUUU.
Acum paragraful nostru are si el margin.Deci browserul nostru interpreteaza elementul radacina html si arata toata pagina in functie de rezolutia lui...apoi ajunge la elementul body si avand valori prestabilite(8 pixeli la mozilla) lasa margini intre containerul body si containerul mare html (dupa cum am vazut mai sus) apoi ajunge la <p>.......</p> si cand intalneste tagul de deschidere stie ca urmeaza un cod in limbajul ce-l cunoaste si trebuie interpretat intr-un anumit fel. <p>...</p> fiind elemet html ii atribuie si acestuia margini , fata de containerul din care face parte paragraful..adica fata de body.
Cum body reprezinta de fapt containerul elementelor noastre ce ne apar pe monitor ,browserul atribuie margin numai in partea de sus si de jos a paragrafului nostru.(de fapt asta se numeste collapse margin dar mai rau va incurc...retineti ca marginile se pot combina in unele cazuri cum este cel de fata numai cand elementele in cauza nu au padding sau border...si numai marginile verticale se pot combina pentru a forma o singura margine...cele orizontale nu se combina niciodata) Prin urmare avem un container mare html pentru body cu dimensiunile rezolutiei browserului, apoi containerul body ce are margini fata de containerul mare html (de 8 pixeli) ceea ce face ca dimensiunile lui sa fie de 1008 in lungine si avem paragraful ce are si el margini (tot de 8 pixeli) fata de body..prin urmare va fi la o distanta fata de body de 8 pixeli si cum body are o margine tot de 8 pixeli fata de containerul mare html rezulta ca paragraful era o distanta fata de containerul mare html de 16 pixeli.
Deci avem un container mare html ce contine un altul mai mic body...care are o margine fata de html de 8 pixeli...body contine la randul lui un paragraf care are si el margini fata de body tot de 8 pixeli rezulta ca fata de containerul mare html va avea o distanta de 16 pixeli.
Prin urmare (la o rezolutie a browserului de 1024 avem:
container mare html de 1024 pe inaltimea textului de 20 de pixeli plus marginea paragrafului fata de body de 8 pixeli jos, 8 pixeli sus, plus marginea body-ului fata de containerul mare html de 8 pixeli jos, si 8 pixeli sus : adica 20+8+8+8+8=52 pixeli.
Zona albastra reprezinta paragraful(adica body ca e singurul element din body)...observati ca distanta de la paragraf la marginile superioare nu este de 8 pixeli ci de 16 pixeli...identic si la marginea inferioara.
OFFFFFF Nu stiu cat ati inteles din aberatiile de mai sus.Daca luati un pix si va notati si desenati dupa ce am zis eu cu siguranta veti intelege.Sunt chestii importante..cand faceti pagini web si vedeti ca elementele voastre pe care incercati sa le pozitionati in pagina o iau razna si se aseaza in pagina exact cum nu doriti din cauza aceasta se intampla... margin si padding si border...Tot ceea ce am icercat sa explic se numeste "box model" si indiferent daca faceti pagina html si apoi css-ul aferent browserul interpreteaza codurile voastre dupa aceste principii.
Daca observati inadvertente, chestii incorecte sau pasaje ce pot fi intelese altfel decat ar trebui lasati un mesaj...ca webmasterii sa schimbe ceea ce trebuie si cei ce vor citi sa nu fie indusi in eroare.
Poate mai fac despre css...sau float...sau ce preferati voi...asta in functie de cum intelegeti explicatiile....mi-am dat toata silinta...mai clar de atat nu ma duce capul sa fiu )
Sper ca va fost de ajutor totusi...bafta vremuri frumoase.
) 
