Toate paginile HTML incep si se termina cu etichetele <html> si </html>.
In interiorul acestor etichete gasim perechile <head>, </head> si <body>, </body>.
Marcajul < BODY > ... < / BODY > ncadreaz coninutul propriu-zis al paginii, avnd urmtoarele atribute: bgcolor, background, Sintaxa este: < body bgcolor="pink" > sau < body background="imagine.jpg" > head contine titlul paginii intre etichetele <title> si </title>Exemplu: o pagina HTML cu titlul Exemplu iar continutul Continut pagina <html> <head> <title>Titlu</title> </head> <body> Continut pagina </body> </html>
Formatare text In HTML trecerea la un rand nou se face doar prin introducerea etichetei <br> iar pentru paragraf nou cu eticheta <p>. Exemplu HTML Afisare Proba text.<br> Text pe un rand nou.<p> Text intr-un paragraf nou. Proba text. Text pe un rand nou. Text intr-un paragraf nou. <hr> introduce o linie linie orizontala si trecerea la un rand nou.
Folosind etichete adecvate textul poate fi formatat. Spre exemplu fonturilor li se poate modifica: marimea, culoarea, forma (normal, bold, italic), familia (Arial, Verdana, etc.), textul poate fi aliniat pe orizontala sau verticala iar titlurile (header), de la 1 la 6, sunt diferite ca marime (1 cel mai mare iar 6 cel mai mic). -ului < Font > ... < / Font > cu atributele: - pentru stabilirea fonturilor, avnd sintaxa < font face="Tahoma" Utilizm fontul Tahoma > < / font >; - pentru stabilirea dimensiunii fonturilor, avnd sintaxa < font size="2" Acest text are dimensiunea 2 > < / font >; - pentru stabilirea culorii fonturilor, avnd sintaxa < font color="red" Acest text este rou > < / font >; Stabilirea elementelor de stil se face cu ajutorul tag-urilor < I > ... < / I >, < B > ... < / B >, < U > ... < / U >, < S > ... < / S >, avnd ca efect nclinarea, ngroarea, sublinierea i tierea textului cu o linie. <b>text bold</b> text bold <i>text cursiv</i> text cursiv <u>text subliniat</u> text subliniat <font color="red">font rosu</font> font rosu <font face="Courier">font Courier</font> font Courier <font size="6">font size=6</font> font size=6 <h1>Titlu 1</h1> Titlu 1 <h2>Titlu 2</h2> Titlu 2 <h3>Titlu 3</h3> Titlu 3 <h4>Titlu 4</h4> Titlu 4 <h5>Titlu 5</h5> Titlu 5 <h6>Titlu 6</h6> Titlu 6
Liste Listele sunt un mod simplu de organizare a informatiei si pot fi neordonate, ordonate si de definitii. Liste neordonate Aceste liste sunt delimitate de etichetele <ul> si </ul> iar elementele de <li> si </li>. Exemplu HTML Afisare Exemple de fructe: <ul> <li>mere</li> <li>pere</li> <li>struguri</li> </ul> Exemple de fructe: mere pere struguri Elementele listei pot fi particularizate folosind atributul type care poate lua valorile square, circle si disc. Exemplu HTML Afisare Exemple de legume: <ul> <li type="square">rosii</li> <li type="circle">cartofi</li> <li type="disc">morcovi</li> </ul> Exemple de legume: rosii o cartofi morcovi Liste ordonate Aceste liste sunt delimitate de etichetele <ol> si </ol> iar elementele de <li> si </li>. Exemplu HTML Afisare Exemple de combustibili: <ol> <li>benzina</li> <li>motorina</li> <li>gaz lichefiat</li> </ol> Exemple de combustibili: 1. benzina 2. motorina 3. gaz lichefiat Elementele listei pot fi particularizate folosind atributul type care poate lua valorile A (litere mari), a (litere mici), I (cifre romane mari), i (cifre romane mici), 1 (optiunea default):
Exemplu HTML Afisare Medii de stocare: <ol> <li type="I">HDD-ul</li> <li type="I">discheta</li> <li type="I">CD-ROM-ul</li> </ol> Medii de stocare: I. HDD-ul II. discheta III. CD-ROM-ul Legaturi Legaturi Legatura (link-ul) este o eticheta foarte importanta in HTML deoarece confera utilizatorului posibilitatea navigarii de la o pagina la alta. Deobicei link-ul este subliniat iar atunci cand suntem deasupra lui cursorul isi schimba forma. Link-ul este definit cu etichetele <a> si </a> si are atributele: href - adresa fisierului destinatie target - in ce fereastra se va deschide fisierul destinatie title - mica descriere asociata legaturii afisata in momentul in care mouse-ul se afla deasupra legaturii <a href="adresa-fisier" target="_blank" title="titlu"> Adresa fisierului destinatie poate fi exprimata astfel: nume fisier, daca se afla in acelasi folder cu pagina curenta <a href="fisier.html">
Imagini Folosind imagini pagina capata un plus de atractivitate dar puteti plati pretul unei incarcari greoaie daca dimensiunile imaginii sunt mari. Cateva din formatele de imagini utilizate in paginile web sunt: JPEG (*.jpg sau *.jpeg), GIF (*.gif), BMP (*.bmp), PNG (*.png). Eticheta folosita pentru inserarea unei imagini in pagina este <img> si are urmatoarele atribute: src = sursa, locul unde se afla imaginea width = latimea imaginii height = inaltimea imaginii alt = numele care inlocuieste imaginea pana aceasta se incarca sau cand nu a fost gasita border = chenar (0 = lipsa bordura) Dimensiunea imaginii afisate de browser este stabilita de argumentele width si height care pot fi diferite de dimensiunile imaginii originale, caz in care imaginea va fi redimensionata automat de catre browser. Exemplu: o imagine cu latime 100px, inaltime 75px, alt=poza si border=0 si inca o data cu border=1 HTML Afisare <img src="poza.jpg" width="100" height="75" alt="poza" border="0">
Tabele Aceste etichete au o mare utilizare deoarece tabele constituie structura care sta la baza organizarii marii majoritati a paginilor web (inclusiv cea de fata). Tabelul este format din linii si coloane impartind zona in celule. Fiecare celula pastreaza informatia care va fi afisata. Pentru o afisare corecta a tabelului fiecare rand va avea acelasi numar de celule. Daca dorim ca o celula sa fie goala vom introduce un spatiu gol (space) sau codul echivalent . Pentru inserarea unui tabel este folosita perechea de etichete <table> si </table>, pentru un rand <tr> si </tr> iar pentru o celula <td> si </td>. Tabele pot fi imbricate, adica in interior pot contine unul sau mai multe tabele. Exemplu: tabel cu 2 coloane si 2 randuri, border 1, coloana 1 latime 80px, coloana 2 latime 160px, fiecare celula are o alta culoare de fond (bgcolor) HTML Afisare <table border="1"> <tr><td width="80" bgcolor="red">rosu</td><td width="160" bgcolor="yellow">galben</td></tr> <tr><td bgcolor="white">alb</td><td bgcolor="green">verde</td></tr> </table> rosu galben alb verde