Limbajul HTML este compus din coduri speciale numite marcaje (tag-uri) care se insereaza intr-un document text pentru a specifica modul de formatare a acestuia. Orice marcaj este inclus intre doua paranteze unghiulare <nume_marcaj>, cu ajutorul careia browserul detecteaza si recunoaste acest simbol drept marcaj. De obicei marcajele sunt in perechi (ex: <p>...</p>). Primul element este marcajul de deschidere iar cel de- al doilea este marcajul de inchidere, care are pus in fata numelui simbolul "/". De mentionat ca exista si marcaje fara pereche, ca de exemplu marcajul <br>.
Structura unui document HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head> <title>Pagina personala a lui Ion!</title> </head>
<body> ................ </body>
</html>
Un document HTML este alcatuit din trei sectiuni: <html> Prima linie contine versiunea documentului HTML. Pana nu demult lipsa acesteia nu influenta in nici un mod afisarea paginii. Totusi, includerea ei este recomandata cel putin din doua considerente: 1. Asa o cere standardul 4.0 2. Exista programe validatoare HTML, cu ajutorul careia se poate verifica corectitudinea documentului. Pentru a analiza pagina web ele folosesc acea versiune pe care o ai indicata in pagina. <html> - Orice document html se incepe cu marcajul html <head> - Cu acest marcaj se incepe cea de-a doua sectiune, care contine informatii ce nu se afiseaza in browser, cu exceptia marcajului <title> in care se specifica titlul paginii web si apare ca titlul ferestrei browser-ului. Marcajul <head> contine informatii cu privire la cuvintele cheie, descrierea site-ului, inserare de cod JavaScript in pagina, etc. <body> - In interiorul acestui marcaj se afla tot continutul paginii web care va aparea in browser (text, imagini,etc.).
Exemplu <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Exemplu 1</title> </head> <body> <h1>Titlul paginii</h1> <h2>Un titlu mai mic</h2> <h3>Un titlu si mai mic</h3>
<p>Ceva text, ceva text, ceva text....</p> <p align="center">Paragraf aliniat la centru</p> <p align="right">Paragraf aliniat la dreapta</p> <br>
<b>caractere ingrosate</b>, de asemenia <strong>caractere ingrosate</strong><br> <i>caractere inclinate</i>, de asemenia <em>caractere inclinate</em><br>
</body> </html> Titlul paginii Un titlu mai mic Un titlu si mai mic Ceva text, ceva text, ceva text.... Paragraf aliniat la centru Paragraf aliniat la dreapta caractere ingrosate, de asemenia caractere ingrosate caractere inclinate, de asemenia caractere inclinate caractere subliniate caractere taiate Font Arial, culoare rosie, dimensiunea 5. Cod sursa: if(x==5){ alert(x); } Text Explicatii
Sa o luam de la inceputul sectiunii <body>: Primul marcaj <h1>(si in continuare cele doua <h2>,<h3>) este folosit in general pentru evidentierea titlurilor (h - headings). Dimensiunea fontului variaza in functie de numarul din dreptul numelui marcajului . Exista sase categorii de marcaj, de la <h1>...</h1> cu dimensiunea cea mai mare a fontului, pana la <h6>...</h6> cu dimensiunea cea mai mica a fontului.
Marcajul <p>...</p> specifica un paragraf si are un atribut optional align ce specifica alinierea paragrafului, la dreapta - right, la centru - center, sau la stanga - left. Aparitia textului in partea stanga este stabilita implicit, deci nu este nevoie sa specifici asta.
Marcajul <br> inseamna rand nou. Atunci cand vrei ca o propozitie sa apara in rand nou, va trebui sa incluzi acest marcaj, pentru ca altfel browser-ul nu va intelege si propozitia va aparea in acelasi rand. (<br> e ca si cum ai apasa "Enter" in Word, de exemplu.)
Textul scris in interiorul marcajelor <b>...</b> va aparea in pagina web, ingrosat. De asemenia se poate utiliza marcajul <strong>...</strong> petru acelasi rezultat.
<i>...</i>, sau <em>...</em> pentru caractere inclinate, <u>...</u> pentru a sublinia un text, <s>...</s> pentru a taia un text.
Marcajul <font>...</font>are trei atribute optionale: color(culoare), face(tip font), si size(marime font).
Tot ceea ce urmeaza in interiorul marcajului <code>...</code>, specifica un fragment de cod. Acesta apare sub un font monospace, Courier New de obicei.
Exista trei tipuri de liste in HTML: 1. Liste de definitii 2. Liste neordonate 3. Liste ordonate Liste de definitii:
Se creaza cu ajutorul marcajelor: <dl>...</dl> - lista de definitii <dt>...</dt> - termenul definit <dd>...</dd> - definitia
Rezultat: Liste ordonate: 1. HTML 2. CSS 3. JavaScript
Linkurile (legaturi) constitue un element fundamental in elaborarea unui site. In lipsa lor, site-ul s-ar forma doar dintr-o pagina de dimensiuni foarte mari si aceasta ar duce la la o nestructure a sa. Un link se defineste cu ajutorul marcajului <a>...</a> care trebuie sa includa atributul href continind calea pana la fisierul destinatie.
Exista doua tipuri de linkuri: interne si externe.
Link intern este o legatura in interioul site-ului tau. Deci, daca ai un site in care ai definit linkul Servicii si acesta duce catre o pagina din interiorul site-ului servicii.html, atunci codul va arata ca cel de mai jos:
<a href="servicii.html">Servicii<a>
Link extern este o legatura care duce spre un site extern. In cazul acesta, accesarea unei pagini servicii.html de pe site-ul www.un_sait_oarecare.com se va efectua astfel:
Implicit, dupa accesarea linkului, pagina nou ceruta va fi afisata in fereastra curenta. In cazul cand doresti ca pagina sa se deschida intr-o noua fereastra, marcajului <a> i se adauga atributul target=_blank.
De mentionat ca legaturile pot fi si catre alte tipuri de fisiere: imagini, fisiere audio, fisiere video.
Imaginile in paginile web sunt foarte importante. Cu ajutorul lor site-ul prinde viata si capata atractivitate, dar trebuie luat in consideratie si faptul ca excesul de imagini va duce la incarcarea greoaie a site-ului.
Inserarea unei imagini in pagina se face cu ajutorul marcajului <img> care are ca atribute:
src - fisierul imagine (src - source) width - latimea imaginii height - inaltimea imaginii alt - valoarea acestuia este un text. Poate fi o descriere a imaginii sau paginii. Textul este afisat in browser doar atunci cand imaginea nu s-a incarcat sau nu poate fi gasita. border - chenar. Poate lua valorile 1 (cu chenar) sau 0 (fara chenar). align - alinierea imaginii la dreapta - right, stanga - left, centru - center. <a href="http://www.un_sait_oarecare.com/servicii.html">Servicii<a> Linkuri Imagini
Exemplu 1: <img src="flowers.jpg" >
Exemplu 2: <img src="flowers.jpg" align="right" border="1" alt="Frumusetea naturii" > <p>Textul in partea stanga, imaginea in dreapta.</p>
Textul in partea stanga, imaginea in dreapta.
Imagini linkuri O simpla imagine poate avea rol de link in cazul cand se include in interiorul marcajului <a>...</a>
Cu ajutorul tabelelor informatia capata o claritate mai mare. Deasemenea, importanta tabelelor se remarca si prin faptul ca acestea pot fi folosite la definirea structurii paginii (layout-ul), ex: headerul, meniul, footerul, etc. Desi acum aceasta nu mai este o practica obisnuita (locul ei fiind luat de CSS), ramane totusi ca o alternativa. Un tabel este compus din randuri si coloane si se se defineste cu ajutorul marcajului <table>, continand in sine definitiile randului - <tr> (tr - table row) si definitiile coloanei - <td> (td - table data).
In continuare vom crea un tabel cu doua randuri si trei coloane:
align - alinirea tabelului, valori posibile: left,center,right. valign - alinierea pe verticala, valori posibile:top (sus), middle (mijloc), bottom (jos). width - latimea, se specifica in pixeli height - inaltimea, se specifica in pixeli bgcolor - culoarea de fundal border - chenar. In cazul cand border=0, chenarul este invizibil. cellpadding - distanta dintre marginile celulelor si continutul acestora cellspacing - distanta dintre celulele unui tabel Tabele In afara de aceste atribute, exista inca doua atribute foarte importante ale marcajului <td>.
colspan - numarul de coloane pe care se intinde celula rowspan - numarul de randuri pe care se intinde celula Exemplu colspan: <table border="1" align="center" width="200"> <tr> <td colspan="2" bgcolor="orange"><b>Vechime in munca </b> </td> </tr> <tr> <td>Ion Paladi</td> <td width="30">5</td> </tr> <tr> <td>Mihai Cretu</td> <td>3</td> </tr> <tr> <td>Anton Stolbetski</td> <td>6</td> </tr> </table>
Rezultat: Vechime in munca Ion Paladi 5 Mihai Cretu 3 Anton Stolbetski 6
Datorita faptului ca am specificat in celula primului rand colspan="2", in rezultat celula se intinde pe distanta celor doua celule.
Rezultat: Angajati Ion Paladi 5 Mihai Cretu 3 Anton Stolbetski 6
rowspan ia valoarea "3", doarece acum celula trebuie sa se intinda pe toata inaltimea celor trei celule.
1. Text John
2. Password *********
3. File
Campurile reprezinta controale care au menirea de a prelua de la utilizator date, care ulterior sa fie prelucrate.
Definirea unui camp se face prin intermediului marcajului <input />:
<input type="text" name="email"/>
Atributul type determina tipul campului, si poate lua valorile: "text", "password" si "file", pentru definirea unui camp de tip text, parola si respectiv fisier, asa dupa cum se vede in exemplele 1, 2 si 3 aratate mai sus.
Butoanele, ca si campurile sunt definite prin intermediul marcajului <input /> <input type="button" /> defineste un buton
Butonul Reset: <input type="reset" /> defineste un buton de tip reset. El are menirea de a goli toate campurile unui formular.
Pentru functionarea corecta, butonul reset trebuie sa fie inclus intr-un formular. <form> <input type="text"/> <input type="reset" /> </form>
Reset
Butonul Submit: <input type="submit" /> defineste un buton de tip submit. Butonul submit trebui sa fie inclus intr-un formular pentru ca sa fie functional. El are menirea de a trimite toate datele dintr-un formular la server.
Butoane radio permit utilizatorului sa aleaga doar o singura optiune din cele disponibile. Pentru gruparea mai multor radio butoane intr-o singura categorie, fiecare camp trebuie sa fie definit cu acelasi nume.
Checkbox-urile, la fel ca si radio butoanele ofera utilizatorului posibilitatea de a alege o optiune din mai multe variante.
Spre deosebire de radio butoane, unde este permisa alegerea doar a unei singure optiuni, checkbox-urile permit alegerea simultana a mai multor optiuni.
Un element de tip textarea defineste un control de text cu mai multe linii. Campurile de acest fel sunt folosite de obicei pentru introducerea unor comentarii, scrierea unui mesaj sau in general atunci cand utilizatorul are nevoie de mai mult spatiu de exprimare.
Definirea controlului are loc prin intermediul marcajelor <textarea> </textarea>
Dimensiunele controlului textarea se determina prin numarul de coloane si randuri specificate cu ajutorul atributelor cols si respectiv rows
Atributul "wrap" Atributul "wrap" specifica felul in care va reactiona textul atunci cand acesta va atinge sfarsitul liniei. Exista 3 valori pe care le poate lua acest atribut: 1. soft - va plasa un enter la sfaritul fiecarei linii, dar nu va trimite la server caracterul enter (carriage return) 2. hard - arata exact asa ca si "soft", insa spre deosebire de acesta, caracterul enter este trimis la server. 3. off - textul este afisat si trimis la server exact asa cum este scris.
<textarea rows="4" cols="15" wrap="soft" > Hello World! </textarea> <textarea rows="4" cols="15" wrap="hard" > Hello World! </textarea> <textarea rows="4" cols="15" wrap="off"> Hello World! </textarea> Soft Hard Off va plasa un ent
arata exact asa
Textul este afis
TextArea Readonly si Disabled 1. readonly - poate lua valorile "yes" sau "no". Cu ajutorul acestui atribut se specifica daca continutul campului de text va putea fi sau nu modicat. 2. disabled - atributul disabled este asemanator lui readonly, nu permite modificarea textului, insa spre deosebire de acesta, textul va fi afisat in gri. In asa fel utilizatorul va percepe vizual ca acel camp nu poate fi modificat. De mentionat ca textul dintr-un textarea definit cu "readonly" poate fi selectat cu mouse-ul si ulterior copiat, pe cand "disabled" nu ofera aceasta posibilitate. <textarea rows="4" cols="15" readonly="yes" > Hello World! </textarea> <textarea rows="4" cols="15" disabled="yes" > Hello World! </textarea> disabled readonly Hello World!
Hello World!
Este utilizat pentru crearea listelor drop-down . Cu ajutorul tagului <option> din interiorul elementului <select> se definesc optiunile disponibile in lista.
Exemplu: Limba materna: <select> <option>Romana</option> <option>Engleza</option> <option>Franceza</option> </select>
Limba materna: Romana
Implicit meniul va afisa primul element din lista. Pentru a afisa un alt element decat cel implicit, se va specifica atributul selected="yes" optiunii care dorim sa fie afisata prima in lista.
Limba materna: <select> <option>Romana</option> <option selected="yes">Engleza</option> <option>Franceza</option> </select>
Limba materna: Engleza
Select Atributul "size"
Implicit doar un singur element din lista este vizibil, insa acest lucru se poate schimba cu ajutorul atributului size adaugat marcajului <select>
Limba materna: <select size="3"> <option>Romana</option> <option>Engleza</option> <option>Franceza</option> </select>
Limba materna: Romana Engleza Franceza
Selectare multipla
Implicit se permite selectarea unui singur element din lista, insa este posibil ca mai mult de un element din lista sa poata fi selectat. Pentru aceasta se va specifica atributul multiple="yes"
Limba materna: <select size="3" multiple="yes"> <option>Romana</option> <option>Engleza</option> <option>Franceza</option> </select>
Limba materna: Romana Engleza Franceza
CTRL + click pe un element din lista - pentru a testa selectarea multipla.
Reprezinta o modalitate de comunicare intre utilizatori si server. Pentru prelucrarea lor, sunt folosite diferite scripturi server-side: PHP, Perl.
Un formular se defineste cu ajutorul marcajului <form>, iar in interiorul acestuia se gasesc diferite campuri de introducere a datelor. Campurile unui formular destinate pentru introducerea datelor se definesc prin intermediul marcajului <input>.
Pentru transmiterea informatiilor catre server se utilizeaza una din cele doua metode: metoda get - informatiile din formular sunt vizibile in URL metoda post- informatiile din formular nu sunt vizibile in URL Atributul action are ca valoare URL-ul careia ii vor fi transmise informatiile din formular, pentru prelucrare.
Campurile unui formular sunt definite cu ajutorul marcajului <input> care poate lua urmatoarele atribute: type - tipul campului. Poate lua urmatoarele valori: o button - definirea unui buton o checkbox - casute de bifat. Prin intermediul lor utilizatorul poate selecta (bifa) mai multe variante de raspuns simultan. o file - permite utilizatorului sa selecteze un fisier din calculatorul sau. (ex. un fisier care se doreste a fi incarcat pe server). o hidden - acest camp nu va aparea in formular, va fi invizibil. o submit - informatiile din formular sunt trimise spre prelucrare la URL-ul indicat in action. o password - acest camp se foloseste la introducerea parolei. Din motive de securitate se inlocuieste fiecare caracter tastat cu un asterix (*). Formulare o radio - reprezinta un set de elemente cu un singur nume, din care se poate selecta doar unul. o text - camp in care utilizatorul poate introduce text. o reset - buton la apasarea careia se goleste formularul. name - numele elementului value - valoarea atributului elementului size - lungimea campului de tip text sau password maxlength - numarul maxim de caractere care pot fi introduse intr-un camp de tip text sau password disabled - dezactivarea unui element.
TAGURI HTML De baza <HTML> </HTML> Defineste un fisier in format Web <HEAD> </HEAD> Antetul documentului <TITLE> </TITLE> Tilul documentului <BODY> </BODY> Corpul paginii HTML BGCOLOR = culoare Culoarea de fond a pagini TEXT=culoare Culoarea textului pe pagini LINK=culoare Culoarea legaturiilor nevizitate din pagini VLINK=culoare Culoarea legaturiilor vizitate din pagini ALINK=culoare Culoarea legaturiilor pe durata clicului exacutat de utilizator BACKGROUND = url Imaginea de fond pentru pagina <P> Paragraf <FONT> </FONT> Specifica atribute ale textului incadrat SIZE=n Dimensiunea textului este 1-7 FACE="a,b" Specifica fontul: a, daca este disponibil, sau b COLOR=s Culoarea textului: fie un nume de culoare , fie o valoare RGB <BR> Linie noua <PRE> </PRE> Informatie preformatata <!-- --> Comenatriu HTML <CENTER> </CENTER> Centreaza materialul in pagina <HR> Rigla orizontala SIZE=x Inaltimea riglei in pixeli WIDTH=x Latimea riglei in pixeli sau in procente NOSHADE Dezactiveaza afisarea umbrei pentru rigla orizontala ALIGN=x Alinierea riglei orizontala in pagina (left, center, right) COLOR=x Culoarea riglei orizontale(numai pentru IE) <A> </A> Marcaj de tip ancora HREF=url Referinta hipertext HREF=#nume Referinta catre o ancora interna Name=nume Definitia unei ancore interne
Pentru liste <DD> Descriere definitie(definition description) <DL> </DL> Lista de tip definitie(definition list) <DT> Termen de definitie(definition term ) <LI> Element de lista <OL> Lista ordonata (numerotata) TYPE=tip Tipul numerotarii. Valori posibile: A, a, I, i, 1 START=x Numarul de inceput al listei ordonate <UL> Lista neordonata (marcata) TYPE=forma Forma marcajului. Valori posibile: circle, square, disc.
Formatarea caracterelor <B> </B> Afiseaza text ingrosat(bold) <I> </I> Afiseaza text inclinat(italic) <U> </U> Afiseaza text subliniat <TT> </TT> Text cu font monospatiu <CITE> </CITE> Citare bibliogarfica <CODE> </CODE> Listing de program <EM> </EM> Stil logic de evidentiere <KBD> </KBD> Text de la tastatura <STRONG> </STRONG> Evidentiere puternica(idem <B>) <VAR> </VAR> Program sau variabila <BASEFONT SIZE = n> Specifica dimensiunea implicita a fontului din pagina
Pentru tabele <TABLE> </TABLE> Tabel HTML BORDER=x Chenarul tabelului CELLPADDING=x Spatiul suplimentar in cadrul celulelor tabelului CELLSPACING=x Spatiul suplimentar intre celulele tabelului WIDTH=x Latimea impusa tabelului FRAME=valoare Ajustarea fina a tabelului RULES=valoare Ajustarea fina a riglelor tabelului BORDERCOLOR = culoare Specifica culoarea chenarului tabelului BORDERCOLORLIGHT = culoare Cea mai deschisa culoare din cele doua culori specificate BORDERCOLORDARK = culoare Cea mai inchisa culoare din cele doua culori specificate ALIGN=left Aliniaza tabelul la marginea din stanga a paginii, iar textul curge in partea dreapta ALIGN=right Aliniaza tabelul la marginea din dreapta a paginii, iar textul curge in partea stanga HSPACE=x Spatiu suplimetar pe orizontala in jurul tabelului VSPACE=x Spatiu suplimetar pe verticala in jurul tabelului COLS=x Specifica numarul de coloane ale unui tabel <COLGROUP> </COLGROUP> Defineste un set de definitii de coloane cu ajutorul marcajului <col> <COL WIDTH=x> Defineste latimea unei coloane exprimata in pixeli <THEAD> </THEAD> Defineste titlul tabelului <BODY> </TBODY> Defineste corpul tabelului <TR </TR> Linie de tabel BGCOLOR=culoare Specifica culoarea de fond pentru intreaga linie ALIGN=aliniere Alinierea celulelor de pe linia curenta (left, center, right) <TD </TD> Celula de date a tabelului/font> BGCOLOR=culoare Specifica culoarea de fond pentru celula de date COLSPAN=x Numarul de coloane pe care se intinde celula curenta de date ROWSPAN=x Numarul de linii pe care se intinde celula curenta de date ALIGN=aliniere Alinierea materialului din cadrul celulei de date.Valori posibile: (left, right, center) VALIGN=aliniere Alinierea pe verticala a materialului din cadrul celulei de date.Valori posibile: (top, bottom, middle) BACKGROUND=url Specifica imaginea de fond pentru celula tabelului NOWRAP Nu permite despartirea textului pe linii in cadrul unei celule ALIGN=baseline Aliniaza celule de date cu linia de baza a textului adiacent ALIGN=caracter Aliniaza o coloana fata de un anumit carcater (caracterul prestabilit este ".") ALIGN=justify Aliniaza atat marginea din stanga cat si marginea din dreapta a unui text
Pentru formulare <FORM> </FORM> Formular HTML activ ACTION=url Programul CGI de pe serverul care receptioneaza datele METHOD=metoda Modul in care datele sunt transmise serverului(GET sau POST) <INPUT Camp de text sau alte date de intrare TYPE=optiune Tipul campului de intrare <INPUT>. Valori posibile: text,password,checkbox,hidden,file, radio,submit,reset,image. NAME=nume Numele simbolic al valorii campului VALUE=valoare Continutul prestabilit al campului de text CHECKED= optiune Buton/caseta marcata in mod prestabilit SIZE=x Numarul de caractere al unui camp de text SIZE=x Numarul maxim de caractere acceptate <SELECT> </SELECT> Grup de casete de validare NAME=nume Numele simbolic al valorii campului SIZE=x Numarul de articole de meniu care se afiseaza odata (prestabilit=1) MULTIPLE=x Permite selectia unor articole de meniu multiple <OPTION Alegerea particulara intr-un domeniu <SELECT> VALUE=valoare Valoarea rezultanta a acestei selectii din meniu <TEXTAREA> </TEXTAREA> Camp de intare de tip text pe linii multiple NAME=nume Numele simbolic al valorii campului ROWS=x Numarul de linii al casetei de text COLS=x Numarul de coloane (caractere) pe linie al casetei de text <FIELDSET> </FIELDSET> Imparte formularul in parti logice <LEGEND> </LEGEND> Numele asociat setului de campuri (fieldset) ALIGN=s Specifica alinierea legendei (explicatiei) afisate (top,bottom,left,right) TABINDEX=x Specifica ordinea elementelor atunci cand utilizatorul apasa tasta Tab ACCESKEY=c Specifica tasta care asigura comanda rapida de la tastatura asociata unui anumit element DISABLED Elementul este inactiv, dar este afisat pe ecran READONLY Elementul este afisat pe ecran dar nu poate fi editat