Structura si elementele paginii html
O pagina (x)html trebuie sa aiba cel putin structura urmatoare:Cod: Selectaţi tot
<html>
<head><title>Pagina web</title>
</head>
<body>
</body>
</html>Intre marcajele <head> </head> si <body> </body> am lasat spatiu liber care va fi complectat mai devreme sau mai tarziu,cu ce si cum va aparea in pagina. Numai ce este scris intre tagurile <body> si </body> va fi interpretat si va apare in pagina .
Unde se scrie, unde se copie nu mai scriu doar repet ca pagina html poate fi deschisa atat din browser cat si de la ‘fata locului’ cu clic dreapta pe numele fisierului si se alege open with… sau cu open.
Tipuri de marcaje:
Marcaje de baza ele delimiteaza structura primara a unui document:<html>,<head> si <body> (am scris numai tagurile de deschidere celelalte, de inchidere,sunt subintelese fiind obligatorii).
Marcaje de structurare a documentului ele permit introducerea de elemente in document precum trecerea la linie noua titluri , paragrafe .
Marcajul linie noua are forma <br /> si semnifica “lasa o linie orizontala nescrisa si apoi scrie ce urmeaza in documentul html”.
Pentru introducerea unui titlu (antet) se folosesc marcajele < hN> si </hN> unde N este un numar natural cu valori intre 1 si 6;h1 afiseaza titlul cu inaltimea cea mai mare iar h6 afiseaza titlul cu inaltimea cea mai mica posibila (pot sa apara mici diferente de afisare in functie de tipul de browser folosit).Marcajul de titlu poate fi formatat:aliniere,culoare, forma,stil,spatiul dintre litere,etc,dar despre formatare o sa vorbim in cadrul prezentarii CSS(foi de stil in cascada).De ce ?Multe din atributele marcajelor sunt depreciate si in viitor nu vor mai putea fi folosite.
Tagul paragraf se foloseste la separarea vizuala a diferitelor portiuni de text .El are forma <p> respectiv</p> si tot ceea ce este scris intre aceste marcaje formeaza un paragraf.
Atentie !Tineti minte acest lucru: cand incepe scrierea unui nou paragraf se face obligato riu saltul la linie noua-acest tip de element se numeste element la nivel de bloc-adica elementul respectiv este scris dupa introducerea unei linii noi.Ne vom intalni des cu acest tip de element.
Deci un prim criteriu de clasificare(afisare) a elementelor:
- elemente la nivel de bloc – adica elementele respective se afiseaza incepand cu un rand nou
- elemente la nivel de linie - adica se afiseaza in continuare asa cum apar ele scrise in fisier ,fara a fi nevoie sa inceapa un rand nou.
Si pentru ca am ajuns la elemente la nivel de bloc sau linie va prezint doua tipuri speciale de taguri,si anume:
Tagul div permite divizarea paginii in sectiuni ;are un caracter mai general decat tagul p(paragraf).Este un tag la nivel de bloc.Iata forma generala de folosire:
<div id=”un_nume_ales_de_noi”> Elemente html nu conteaza care si cate </div>
Tagul span este foarte util daca vrem sa localizam prin nume portiuni mai mici din pagina:fragmente de text,elemente aflate in interiorul tagurilor.Este un element la nivel de linie.Cu ajutorul acestui tag putem formata portiunile din pagina cu ajutorul stilurilor.
Iata forma de folosire :
<span id=”nume_ales_de_noi”>Elementul html</span>;
Utilitatea acestora este f mare.Iata cate un exemplu simplu :
Ptr div : vreti sa afisati mai multe imagini toate pe un fundal de o anumita culoare;
Ptr span : vreti sa scoateti in evidenta (prin forma,marime,culoare) cateva cuvinte dintr-un text.
Va sugerez sa descoperiti si sa exersati cu diferitele elemente care compun o pagina xhtml.Material bibliografic aveti din belsug.Eu voi prezenta foarte pe scurt cate ceva:
Ptr imagini avem
Cod: Selectaţi tot
<img id=”nume_ales_de_noi” src=”adresa_fisierului _de_imagine” width=”x” height=”y” alt=” text_scris_de_noi” align=”valori” hspace=”h” vspace=”v” />Src=este adresa relative a fisierului care contine imaginea
Alt=textul care apare in cazul in care nu apare imaginea.
Width ,height= reprezinta latimea respectiv inaltimea cu care va apare respective imagine in cadrul paginii indiferent de dimensiunile initiale ale imaginii.
Align=atribut care permite ca imaginea sa se afle in partea stanga a ecranului (daca valori=left) sau (si) in partea dreapta (daca valori=right) iar textul si celelalte elemente in partea cealalta.Cheia este sa amplasati imaginea chiar inaintea textului pe care trebuie sa-l “intrerupa”. Acest atribut este depreciat,asa ca pe viitor vom folosi in locul lui foile de stil.
Hspace ,vspace=spatiulasat liber,intre imagine si celelalte elemente ,pe orizontala (dat de h) si pe verticala(dat de v).Aceste atribute sunt depreciate si pe viitor vom folosi foile de stil.
Observati ca nu exista tag de inchidere si este vorba de un tag la nivel de linie,adica scrierea mai multor taguri img ,scrise una dupa alta,fara <br /> sau alt separator de spatiu, va face ca imaginile sa apara una langa alta.
Atribute obligatorii sunt doar id si src.
Ptr legaturi si ancore avem tagurile:
Legatura este un tag care permite incarcarea altei pagini html(toata sau de la un anumit punct incolo).Forma generala a acestui tag este:
Cod: Selectaţi tot
<a href=”adresa_fisierului_de_incarcat”>Cand se da clic pe textul etichetei sau pe imagine se va incarca si afisa continutul fisierului respective,specificat la href.Ne dam seama de prezenta unei legaturi atunci cand cursorul se transforma intr-o mana cu degetul aratator intins.
Ancora reprezinta un punct intermediar in interiorul documentului:sa presupunem ca nu vrem sa vizualizam un intreg document ci doar o parte a sa.In loc sa derulam noi manual pana la locul de unde incepem sa vizualizam documentul,putem face asta automat.Pentru aceasta scrim la inceput legatura : <a href=”#nume_ancora”>Text </a>.Cand dam clic pe Text(sau o alta expresie scrisa de noi) in fata ochilor ne va apare doar portiunea care ne intereseaza. Cum stie calculatorul de unde sa inceapa afisarea din interiorul unui document? Va cauta o expresie de genul :<a name=”nume_ancora”> Alt text scris de noi </a>In loc sa vedem tot fisierul vom vedea doar o parte din el incepand de la Alt text scris de noi pana la sfrsitul fisierului.Se intelege ca nume ancora si text scris de noi sunt doar nume formale,noi putem scrie altceva.
Obs: Daca dam clic pe o legatura ptr a deschide un nou document ,dar nu de la inceput scrim <a href=”nume_fisier.html#nume_ancora”>Text</a>;
Daca documentul nou se afla in alt director decat documentul initial din care apelam noul document trebuie trecuta si calea de directoare.
Incercati singuri sa descoperiti functionalitatile altor taguri precum liste ordonate si neordonate,tabele,cadre,formulare,etc.
Cateva precizari
1 nu insistati cu perechile de atribute si valori;doar acomodati-va cu ele. Multe din ele sunt depreciate si in locul lor se folosesc foile de stil (CSS=foi de stil in cascada ) despre care vom aminti data viitoare.
2.daca vreti ca intr-o anumita portiune de fisier sa folositi mai multe spatii sau linii noi consecutiv cu ajutorul tastaturii, folositi tagurile de preformatare: <pre> si </pre> sau <br /> ptr linie noua si ptr un spatiu;Daca scrim expresia de trei ori consecutiv vom obtine trei spatii consecutive(atentie la caracterul de sfarsit :punct si virgula).
3.Obisnuiti-va cu urmatoarele reguli:
-pentru scrierea continutul unui tag folositi numai litere mici.
-valorile de atribute sa fie puse intre ghilimele
-folositi mereu cand este cazul tagul de inchidere sau dupa ce ati scris tot ce trebuie in interiorul unui tag lasati un spatiu liber apoi scriti un slah (/) si apoi paranteza unghiulara de inchidere a tagului <nume tag …. />.
-fiecare tag sa aiba cate un identificator de tipul id=”identificator_tag” ; acest lucru va fi foarte util ptr viitor.
-tagul deschis primul se va inchide de regula ultimul;verificati corespondenta corecta a tagurilor de deschidere/inchidere .
-daca vreti sa scoateti in evidenta ceva folositi tagurile <div> si <span>.
-nu toate atributele unui tag sunt obligatorii, dar ele ajuta la descrierea cat mai exacta a respectivului tag; daca ptr un atribut nu folositi nici o valoare se va folosi valoarea implicita ptr ace atribut.
- Tutorialul urmator: CSS (foile de stil in cascada).
