introducere în html - manual.doc
TRANSCRIPT
Introducere în HTML
Realizarea unui pagini web presupune cunoaşterea limbajului HTML (HyperText Markup Language). Acesta e un limbaj de marcare, introdus de Tim Berners-Lee. Fiind un limbaj de marcare, HTML nu utilizează instrucţiuni sau comenzi, ci etichete, acestea fiind numite şi balize, elemente sau tag-uri.
OriginiUnul din primele elemente, fundamentale de altfel, ale WWW (World Wide Web) este HTML, standard ce descrie formatul primar în care documentele sunt distribuite şi văzute pe Web. Multe din trăsăturile lui, cum ar fi independenţa faţă de platformă, structurarea formatării şi legăturile hipertext, fac din el un foarte bun format pentru documentele Internet şi Web. Primele specificaţii de bază ale Web-ului au fost HTML, HTTP şi URL.
Menire şi semnificaţiiHTML a fost dezvoltat iniţial de Tim Berners-Lee la CERN în 1989. HTML este un limbaj bazat pe SGML (Standard Generalized Markup Language), o aşa-numită aplicaţie a acestuia. SGML este un standard internaţional (ISO-8879) aprobat în 1986. HTML a fost iniţial văzut ca o posibilitate pentru fizicienii care utilizează computere diferite să schimbe între ei informaţie prin mijlocirea Internetului. Erau prin urmare necesare câteva condiţii esenţiale: independenţa de platformă, posibilităţi hipertext şi structurarea documentelor. Independenţa de platformă semnifică faptul că un document poate fi afişat în mod asemănător (sau aproape identic) de computere diferite (deci cu font, grafică şi culori aidoma), lucru vital pentru o audienţă numeroasă şi extrem de variată. Hipertext se traduce prin faptul că orice cuvânt, frază, imagine sau element al documentului văzut de un utilizator (client) poate face referinţă la un alt document sau chiar la paragrafe din interiorul aceluiaşi document, ceea ce uşurează mult navigarea între părţile componente ale unui document sau între multiple documente. Structurarea riguroasă a documentelor permite convertirea acestora dintr-un format în altul precum şi interogarea unor baze de date înglobând aceste documente.
ÎnceputurileNăscut în urmă cu aproximativ 30 de ani, într-o tentativa de a rezolva unele probleme ivite la transportul documentelor între diferite computere, limbajul hipertext a evoluat încet. În primii ani de evoluţie HTML a demarat lent în principal pentru că îi lipseau posibilităţile de a reda publicaţii electronice profesionale; limbajul permitea oarece control asupra fonturilor dar nu permitea inserarea graficii. În 1993, NCSA a îmbogăţit limbajul pentru a permite inserarea graficii şi a construit primul navigator grafic: Mosaic. Au urmat apoi contribuţii ad hoc ale diverselor firme care au adus tot felul de adăugiri limbajului HTML astfel încât, în 1994, limbajul părea scăpat de sub control. Urmarea a fost că la prima conferinţă WWW de la Geneva (Elveţia) s-a constituit un grup de specialişti (HTML Working Group) a cărui primă misiune a fost formalizarea HTML, lucru care s-a concretizat în HTML 2.0. Importanţa acţiunii acestui grup constă în faptul că, odată standardizat, limbajul a putut fi apoi extins într-un mod mai controlat la alte nivele.
StandardizareaStandardul oficial HTML este dat de World Wide Web Consortium (W3C), care este afiliat la Internet Engineering Task Force (IETF). W3C a enunţat câteva versiuni ale specificaţiei HTML, printre care şi HTML 2.0, HTML 3.0, HTML 3.2, HTML 4.0 şi, cel mai recent, HTML 4.01. În acelaşi timp, autorii de browsere cum ar fi Netscape şi Microsoft, au dezvoltat adesea propriile "extensii" HTML în afara procesului standard şi le-au încorporat în browserele lor. În unele cazuri (cum ar fi tagul Netscape), aceste extensii au devenit standarde de facto adoptate de autorii de browsere. Când navigatorul încarcă un document HTML, el "citeşte" documentul în căutarea tag-urilor HTML, formatează textul şi imaginea şi le afişează pe ecran. Este motivul pentru care acelaşi document HTML apare uşor diferit când este privit utilizând navigatoare diferite. Stadiile prin care trece un standard elaborat de W3C sunt:
1. Orice standard îşi începe aventura ca W3C Note.
2. De aici este preluat de către un grup particular de lucru (Working Group) şi este discutat până când se ajunge la un consens.
3. În acest moment este publicat ca propunere (Working Draft) şi în acest stadiu oricine poate face comentarii.
4. În momentul în care se obţine o susţinere şi un consens suficient de larg, directorul W3C decide dacă specificaţia este gata să devină propunere oficială de recomandare (Proposed Recommendation).
5. Urmează o perioadă de 6 săptămâni în care toţi membrii W3C au sansa să voteze această propunere de recomandare; votul nu este obligatoriu, putându-se vota în 4 moduri diferite:
o da;
o da, sub rezerva unor îmbunătăţiri;
o nu, până când anumite sarcini nu sunt îndeplinite;
o nu, specificaţia trebuie abandonată.
6. Charta W3C stipulează necesitatea obţinerii consensului complet, astfel că fiecare vot trebuie să fie un da fără rezerve.
7. Dacă toţi paşii anteriori au fost îndepliniţi, specificaţia trebuie aprobată în final de Director şi se publică sub forma unui standard (W3C Recommendation).
De ce HTMLDar de ce a fost preferat HTML pentru publicaţii pe Web, când pentru realizarea publicaţiilor electronice există multe alte tehnologii? Primul motiv este simplitatea. Al doilea este că permite formatarea textului ASCII cu tag-uri în format ASCII. Rezultă de aici o compresie bună, suport pentru legături hipertext şi uşurinţa în a scrie navigatoare pentru vizualizarea documentelor.
Varianta 2.0HTML 2.0, elaborat în Iunie 1994, este standardul pe care ar trebui să-l suporte toate browserele curente - inclusiv cele în mod text. HTML 2.0 reflectă concepţia originală a HTML ca un limbaj de marcare independent de obiectele existente, focalizându-se pe aşezarea lor în pagină, în loc de a specfica exact cum ar trebui să arate acestea. Dacă doriţi să fiţi siguri că toţi vizitatorii vor vedea paginile aşa cum trebuie, folosiţi tagurile HTML 2.0.
Varianta 3.0Specificaţia HTML 3.0, enunţată în 1995, a încercat să dezvolte HTML 2.0 prin adăugarea unor facilităţi precum tabelele şi un mai mare control asupra textului din jurul imaginilor. Deşi unele din noutăţile HTML 3.0 erau deja folosite de autorii de browsere, multe nu erau încă oficializate. În unele cazuri, taguri asemănătoare implementate de autorii de browsere au devenit mai răspândite decât tagurile "oficiale". Specificaţia HTML 3.0 a expirat repede, deci nu mai este un standard oficial în prezent.
Varianta 3.2În Mai 1996, W3C a scos pe piaţă specificaţia HTML 3.2 , care era proiectată să reflecte şi să standardizeze practicile acceptate la scară largă. Deci HTML 3.2 include tagurile HTML 3.0 care erau adoptate de autorii de browsere precum Netscape şi Microsoft plus noi extensii HTML.
Revoluţia HTML 4.0, HTML 4.01În acest moment, HTML 4.0 este larg utilizat şi au fost deja publicate specificaţiile HTML 4.01. Limbajul HTML dă proiectanţilor de pagini web posibilitatea:
să publice documente cu headere, texte, tabele, liste, fotografii, etc... să regăsească on-line informaţii prin intermediul hiperlink-urilor accesate printr-un
simplu click de mouse
să proiecteze formulare pentru realizarea tranzacţiilor cu servere aflate la distanţă, pentru căutări de informaţie sau pentru activităţi specifice comerţului
să includă foi de calcul tabelar, clipuri video, sunete şi alte aplicaţii direct în documente.
Elementul esenţial diferit adus de versiunea 4.0 şi mai ales 4.01 faţă de versiunea 3.2 este posibilitatea separării structurii unui document de prezentarea lui prin introducerea „stilurilor de documente“ (style sheet). Utilizând limbajul HTML pentru structurarea unui document şi style sheet-urile pentru a stiliza prezentarea acestuia, proiectanţii pot obţine mult mai usor independenţa de periferic/computer/platforma hard-soft, lucru care a facut HTML-ul atât de popular. Un document cu o structură complexă poate fi prezentat în diferite moduri pe medii diferite, permiţând documentului însuşi să se adapteze mai uşor noilor tehnologii (cum ar fi, de exemplu, browserele capabile să vorbească, cititoarele braille, etc...).
În plus, separarea conţinutului de partea de prezentare permite modificarea înfăţişării chiar a unui întreg site doar prin modificarea unui style-sheet (a unui document care descrie stilul). Experienţa a demonstrat că o astfel de abordare poate reduce dramatic costurile de deservire a unui spectru larg de platforme şi probleme, facilitând şi o intreţinere ulterioară şi modificări mult mai uşoare.
HTML este utilizat pentru a structura informaţia unei pagini web, pentru a stabili partea de început, titlul, conţinutul paginii şi încheierea pagini. Aceste informaţii se realizează prin tagurile HTML care explică browserului cum să afişeze textul pe ecranul monitorului. Tag-urile în limba engleză înseamna "eticheta". Pentru a se putea deosebii de textul propriuzis, tag-urile sunt incluse între paranteze speciale şi anume < şi >. De obicei tagurile sunt folosite în perechi, de exemplu pentru a scrie un text cu caractere îngroşate se foloseste partea de deschidere a tagului <b>textul propriuzis</b> şi la încheiere se foloseşte acelaşi marcaj la care se adaugă semnul / care specifică că acolo se închide marcajul cu acelaşi nume deschis anterior. Versiunile de început ale limbajului, erau destul de limitate, dar mai apoi, odată cu dezvoltarea web-ului şi apariţia mai multor browsere, au fost introduse mai multe taguri, elemente şi atribute pentru un impact şi o structurare a informaţiilor dintr-o pagina mult mai bune. Deşi browserele actuale pot afişa o pagina web chiar dacă sintaxa limbajului acelei pagini nu este corectă, este de preferat să se respecte standardele, asa fiind siguri că acea pagină se va vedea aproximativ la fel pe orice browser. Spun "aproximativ" şi nu "la fel", deoarece sunt unele browsere care nu respecta întru totul standardele.În continuare, o să încerc să vă explic câte ceva despre structura şi sintaxa unui document HTML.
Cod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title> </head>
<body> </body> </html> Pentru orice document web trebuie sa i se atribuie un tip. Acest tip este specificat in prima linie a documentului. Este important pentru a se putea deosebi documentul de tip HTML de cel de tip XHTML sau alte tipuri existente. Pentru documentele de tip HTML exista 3 tipuri şi anume strict, transitional şi frameset. În mare, documentele de tipul "strict" exclud din prezentarea lor atributele şi elementele cu suport pentru formatarea paginii (CSS), cele "transitionale" includ şi aceste atribute iar cele de tip "frameset" sunt în general construite din mai multe bucăţi (frame)
Următoarea linie conţine un tag care anunţă browserul că începe un document in format HTML.
Linia următoare specifică partea de sus a documentului, antetul (head). În această parte sunt incluse diferite informaţii cum ar fi titlul paginii sau diferite taguri care spun bowserului anumite informaşii despre pagina curenta. Aceste taguri sunt cunoscute sub numele de meta-taguri şi au o importanţă mai mare decât tagurile normale. În cazul exemplului de mai sus este specificat un meta-tag care spune browserului ce tip de caractere sunt folosite în pagina curentă (este util în cazul în care scrieţi pagini în mai multe limbi, browserele şi motoarele de căutare vor şti să afişeze caracterele din acele pagini).
Următoarea linie din cadrul antetului este linia care conţine titlul paginii curente. Este de preferat ca fiecare pagină de web să aibă un titlu căt mai sugestiv (util în cadrul motoarelor de căutare, dar şi dacă vreţi sa tipăriţi pagina la imprimantă)
Tagul următor este un tag de închidere, şi anume se specifică browserului că acolo se termina partea de antet a documentului. După antet, urmează conţinutul efectiv al documentului, care este specificat prin tagul de deschidere <body> Între acest tag şi până când browserul întâlneste tagul de închidere </body> se poate pune conţinutul efectiv al paginii, şi anume text, taguri de formatare a textului, elemente de aranjare în pagină precum si hipertext Ultima linie din document trebuie sa fie întotdeauna tagul de închidere al documentului HTML şi anume tagul </html>
Un document html se poate scrie în orice tip de editor de texte care ştie să salveze textul neformatat (gen Notepad, dar nu şi Word care preformatează textul). Documentele HTML de obicei au extensia .htm sau .html dar pot fi şi alte extensii cum ar fi .dhtml sau .xml sau .php Desigur alte extensii sunt date de tipuri diferite de documente HTML, despre care o sa vorbesc pe masură ce discutăm despre ele. După crearea unei pagini, pentru a verifica dacă este compatibilă cu standardul, se poate verifica la adresa http://validator.w3.org/ unde găsiţi un validator automat care verifică structura şi corectitudinea sintaxei paginii.
Crearea formularelor HTML
Majoritatea paginilor web folosesc formulare HTML pentru a prelucra datele de la utilizator şi pentru a afişa rezultatele calculelor. În cadrul acestui articol, vă explic cum să creaţi formulare HTML care permit paginilor dumneavoastră să interacţioneze cu utilizatorul.
Proiectarea unui formular- alegeţi controale care sunt adecvate pentru categoria de date pe care le adună şi pentru interacţiunile pe care le furnizează. - Eticheţati cu claritate fiecare control, astfel încât utilizatorul să înteleagă funcţia acestuia.- În măsura posibilităţilor, aliniaţi etichetele şi marginile din stânga ale controalelor. Structura unui formular bine proiectat este asemănătoare cu aceea a unei pagini de ziar, fiind compusă dintr-o serie de coloane în cadrul cărora fiecare element vizual este aliniat cu elementele plasate deasupra, respectiv dedesubtul său. Puteţi obţine acest tip de structură folosind tabele HTML sau eticheta <BR>.- Grupaţi controalele corelate şi separaţi fiecare asemenea grup de celelalte grupuri prin
încorporarea de spaţii albe în structura dvs.- Secvenţa de controale din formular trebuie să fie asemănătoare cu ordinea în care le va manipula utilizatorul. În caz contrar, utilizatorul va fi obligat să piardă timp navigând de la un control la altul.Este important să reţineţi că acestea sunt doar îndrumări, nu reguli. Nefiind reguli, puteţi opta pentru încălcarea lor, din când în când. Pentru a determina dacă o variantă de proiectare este superioară alteia, este util să cereţi părerea unui utilizator. Dacă nici utilizatorul nu vă poate fi de ajutor, obţineţi asistenţa unui alt programator. În cel mai rău caz, străduiţi-vă să vă puneţi dvs. înşivă în rolul unui utilizator al formularului. Întrebaţi pe utilizator sau pe inlocuitorul acestuia dacă formularul este clar, uşor de utilizat şi eficient. În caz afirmativ, este momentul să treceţi mai departe şi să creaţi efectiv formularul HTML.
Crearea unui formular HTMLDacă procesul de proiectare este bazat pe oportunism, procesul de creare a unui formular, pornind de la structura dvs. este mai direct. Mai întâi, creaţi schiţa HTML elementară, care va conţine controalele din formular. Apoi, încorporaţi controalele în structură; în particular, un formular HTML trebuie să includă un buton de expediere pe care utilizatorul execută clic pentru a trimite serverului datele din formular. Deoarece o singură pagină HTML poate conţine mai multe formulare, puteţi repeta de mai multe ori etapele intermediare ale acestui proces.
Crearea structurii HTMLStructura HTML pe care o folosiţi pentru a include un formular nu este deloc diferită, de fapt, de cea folosita pentru includerea unei pagini HTML obişnuite. De exemplu, iată o structură caracteristică paginilor HTML:
Cod:
<HTML> <HEAD> <TITLE>Titlul paginii este introdus aici</TITLE> </HEAD> <BODY> Continutul paginii sau al formularului este introdus aici </BODY> </HTML>
În interiorul corpului unei pagini HTML care conţine un formular puteţi folosi orice etichetă HTML obişnuită. Pentru a descrie formularul în sine, folosiţi eticheta FORM, care are următoarea formă:
<FORM METHOD="metoda" ACTION="url">
Atributul METHOD al etichetei FORM poate lua una din valorile GET sau POST. Pentru moment, specificaţi întotdeauna valoarea POST. Atributul ACTION specifică adresa URL a scriptului PHP care prelucrează datele adunate prin intermediul formularului. Adresa URL poate fi o adresă completă (de genul http://www.pagina_mea.ro/prelucrare_formular.php), respectiv o adresă parţială, care specifică o locaţie relativă la locaţia paginii curente (de genul prelucrare_formular.php). Între eticheta <FORM> şi eticheta sa </FORM> corespunzătoare, plasaţi controalele formularului. Ca începător, este mai bine să folosiţi în mod consecvent metoda POST, deoarece alegerea între metodele GET şi POST este destul de complicată. Ca regulă empirică, mulţi programatori folosesc GET pentru formulare care execută o căutare sau o interogare, respectiv POST pentru formulare care actualizează o bază de date sau un fişier. Două dezavantaje ale metodei GET sunt acelea că impune o limită asupra cantitaţii de date care pot fi trimise scriptului de prelucrare şi că transferă datele prin ataşarea şirurilor codificate la adresa URL a scriptului de prelucrare. Astfel, datele trimise prin metoda GET pot fi vizualizate de către utilizator. Un avantaj al metodei GET este acela că utilizatorii pot insera semne de carte în rezultatele unei
interogari sau al unei căutari care foloseşte metoda GET, dar nu pot executa aceeaşi operaţie în cazul unei interogări sau al unei căutari care foloseste metoda POST.
Încorporarea controalelorAceastă secţiune descrie două controale elementare pe care le veţi folosi frecvent: caseta cu text şi butonul de expediere. O casetă cu text permite utilizatorului să tasteze informaţii care pot fi apoi trimise unui script PHP. Casetele cu text sunt frecvent folosite pentru a obţine date precum numele utilizatorului, adresa sa poştală sau adresa de e-mail. Pentru a crea o casetă cu text, scrieţi o etichetă HTML care are următoarea formă elementară:
<INPUT TYPE="TEXT" NAME="text">
Atributul NAME atribuie casetei cu text un nume, astfel încât conţinutul său să fie accesibil unui script PHP. Numele pe care îl atribuiţi unui control trebuie să fie unic în cadrul formularului şi trebuie să respecte anumite reguli. Cu alte cuvinte, numele trebuie să înceapă cu o literă şi nu trebuie să conţină alte caractere în afara literelor, a cifrelor şi a caracterelor de subliniere; în particular, numele nu trebuie să conţină spaţii. HTML nu are o eticheta </INPUT> deci nu încercaţi să combinaţi o etichetă <INPUT> cu o asemenea etichetă. Un buton de expediere permite utilizatorului să trimită serverului conţinutul unui formular. Fiecare formular HTML trebuie să aibă un buton de expediere. Pentru a crea un buton de expediere, scrieţi o etichetă HTML care are următoarea formă elementară:
<INPUT TYPE="SUBMIT" VALUE="text">
Atributul VALUE specifică textul care trebuie să apară pe suprafaţa butonului de expediere. În continuare este un exemplu de formular care include casete cu text ce preiau numele şi adresa de e-mail a utilizatorului:
EXEMPLU REZULTAT
<HTML> <HEAD> <TITLE> Numele si adresa de e-mail ale utilizatorului </TITLE> </HEAD> <BODY> <FORM METHOD="POST" ACTION="prelucrare_formular.php"> <H3>Numele si adresa de e-mail ale utilizatorului</H3> <BR>Nume: <BR><INPUT TYPE="TEXT" NAME="numele_utilizatorului"> <BR>Adresa de e-mail: <BR> <INPUT TYPE="TEXT" NAME="adresa_email"> <BR> <BR><INPUT TYPE="SUBMIT" VALUE="Trimite datele"> </FORM> </BODY> </HTML>
Numele si adresa de e-mail ale utilizatorului
Nume:
Adresa de e-mail:
Observaţi utilizarea etichetelor <BR> pentru alinierea etichetelor şi a controalelor, precum şi numele atribuite controalelor de tip casetă cu text. Când utilizatorul execută clic pe butonul de expediere, datele întroduse de utilizator sunt trimise scriptului prelucrare_formular.php (în acest caz este doar o demonstraţie şi apăsarea butonului va afişa această pagina).
Lucrul cu formulare multipleÎn interiorul corpului unei pagini HTML se pot include mai multe formulare. Dacă procedaţi astfel, nu uitaţi să inseraţi o etichetă </FORM> anterior etichetei <FORM> a următorului formular. Browserul utilizatorului va face indigestie dacă suprapuneţi formularele într-o pagină.
Exemplu Rezultat
<HTML> <HEAD> <TITLE> Numele si adresa de e-mail ale utilizatorului </TITLE> </HEAD> <BODY> <FORM METHOD="POST" ACTION="prelucrare_formular.php"> <H3>Numele si adresa de e-mail ale utilizatorului</H3> <BR>Nume: <BR><INPUT TYPE="TEXT" NAME="numele_utilizatorului"> <BR>Adresa de e-mail: <BR> <INPUT TYPE="TEXT" NAME="adresa_email"> <BR> <BR><INPUT TYPE="SUBMIT" VALUE="Trimite datele"> </FORM> <FORM METHOD="POST" ACTION="prelucrare_formular2.php"> <H3>Numerele de telefon si fax ale utilizatorului</H3> <BR>Numar de telefon: <BR><INPUT TYPE="TEXT" NAME="telefon"> <BR>FAX: <BR><INPUT TYPE="TEXT" NAME="fax"> <BR> <BR><INPUT TYPE="SUBMIT" VALUE="Trimite datele"> </FORM> </BODY> </HTML>
Numele si adresa de e-mail ale utilizatorului
Nume:
Adresa de e-mail:
Numerele de telefon si fax ale utilizatorului
Numar de telefon:
FAX:
Când utilizatorul execută clic pe butonul de expediere, datele incluse în câmpurile formularului care conţine butonul pe care s-a executat clic sunt trimise la server. Astfel, serverul primeşte fie un nume şi o adresă de e-mail, fie numerele de telefon şi fax, nu conţinutul tuturor celor patru câmpuri.
Crearea casetelor cu text personalizateÎn secţiunea precedentă am prezentat sintaxa elementară pentru crearea unei casete cu text. Cu toate acestea, HTML furnizează numeroase atribute suplimentare care vă permit să modificaţi aspectul şi comportamentul unei casete cu text. Iată sintaxa completă pentru crearea unei casete cu text:
<INPUT TYPE="TEXT" NAME="text" SIZE="numar" MAXLENGTH="numar" VALUE="text">
Atributele TYPE şi NAME sunt obligatorii, celelalte atribute sunt opţionale. Atributul SIZE, care este dat sub forma unui număr de caractere, stabileşte dimensiunea vizibilă a casetei cu text, atributul MAXLENGTH specifică numărul maxim de caractere pe care utilizatorul are permisiunea de a le tasta. Valoarea atributului MAXLENGTH o poate depăşi pe aceea a atributului SIZE, în care caz conţinutul controlului defilează spre dreapta atunci când utilizatorul a introdus SIZE caractere. Atributul VALUE constituie o valoare care este afişată iniţial în caseta cu text.
Crearea de suprafeţe cu textCa o casetă cu text, o suprafaţă cu text permite unui utilizator să introducă text. Cu toate acestea, o suprafaţă cu text poate permite utilizatorului să introducă mai multe linii de text, în timp ce o caseta cu text permite utilizatorului să introducă o singură linie. Iată sintaxa pentru crearea unei suprafeţe cu text:
<TEXTAREA NAME="text" ROWS="numar" COLS="numar" WRAP="wrap">
Atributele NAME şi ROWS sunt obligatorii, atributele COLS şi WRAP sunt opţionale. Atributul ROWS specifică numărul liniilor de text vizibile în suprafaţa cu text; deoarece suprafaţa de text defilează după ce a fost umplută, utilizatorul poate introduce linii suplimentare. Atributul COLS specifică numărul coloanelor de text vizibile în suprafaţa cu text; deoarece suprafaţa cu text se derulează sau se înfăşoară după ce s-a umplut, utilizatorul poate introduce linii mai lungi. Atributul WRAP specifică maniera de înfăşurare a textului în interiorul suprafeţei cu text. Atributul WRAP poate avea următoarele valori:
- off - Înfăşurarea cuvintelor la sfârşitul liniei de text este dezactivată; utilizatorul poate introduce caractere de sfârşit de linie pentru a forţa înfăşurarea liniilor- virtual - Liniile par înfaşurate, dar caracteristica de înfăşurare a liniilor nu este trimisă la server- physical - Înfăşurarea cuvintelor la sfârşitul liniei este activată- soft - Identic cu virtual- hard - Identic cu physical
O etichetă <TEXTAREA> trebuie combinată cu o etichetă </TEXTAREA>. Orice text care apare între etichete va fi prezentat drept conţinut iniţial al controlului de tip suprafaţă cu text.
Crearea casetelor cu parolăDacă o aplicaţie impune unui utilizator să introducă o parolă, puteţi crea o casetă cu text în acest scop. Totuşi, când utilizatorul introduce parola, orice persoană aflată în apropiere poate vizualiza parola, situaţie care duce la o posibilă breşă de securitate. În loc de a se folosi o casetă cu text pentru introducerea de informaţii confidenţiale, trebuie să folosiţi o casetă cu parolă. Pentru a crea o casetă cu parolă, folosiţi aceeaşi sintaxă ca şi cea utilizată pentru crearea unei casete cu text, cu excepţia faptului că specificaţi PASSWORD (parola) în loc de TEXT ca valoare a atributului TYPE:
<INPUT TYPE="PASSWORD" NAME="text" SIZE="numar" MAXLENGTH="numar" VALUE="text">
Atributele unei casete cu parolă au aceeaşi semnificaţie ca şi acelea ale unei casete cu text.
Crearea casetelor de validarePentru date care pot avea numai una din două valori, cum ar fi "pornit" sau "oprit", caseta de validare este controlul ideal. De exemplu, caseta de validare este un control adecvat pentru a permite utilizatorului să opteze pentru livrarea rapidă a unui colet. În cazul în care caseta de validare corespunzătoare este validă, coletul va fi livrat mai rapid; în caz contrar, coletul se va deplasa cu mijloacele obişnuite. Pentru a crea o casetă de validare, folosiţi următoarea sintaxă:
<INPUT TYPE="CHECKBOX" NAME="text" CHECKED VALUE="text">
Atributul TYPE este obligatoriu; atributele NAME, CHECKED şi VALUE sunt opţionale. Dacă atributul CHEKED apare, caseta de validare va fi selectată în mod prestabilit; în caz contrar, caseta de validare nu este selectată iniţial. Atributul VALUE specifică valoarea care este trimisă serverului în cazul în care caseta de validare este selectată; dacă atributul nu este specificat, se va trimite valoarea on (activat).
Crearea butoanelor radioCa şi casetele de validare, butoanele radio pot avea numai una din două valori. Cu toate acestea, butoanele radio sunt organizate în grupuri, iar la un moment dat poate fi activat un singur buton radio din cadrul unui grup; toate celelalte trebuie să fie dezactivate. (se aseamănă ca la un chestionar grilă cu mai multe răspunsuri, pe care trebuie să îl alegeti pe cel corect - acelaşi lucru se întâmplă şi cu un grup de butoane radio - la un moment dat nu poate fi activ decât unul). De exemplu, puteţi folosi un set de trei butoane radio pentru a permite utilizatorului să specifice tipul de ambalaj pentru cadou: fără ambalaj, cu ambalaj simplu sau sofisticat. Numai unul dintre cele trei butoane radio poate fi activat; la un loc, setul de butoane radio oferă utilizatorului o triplă opţiune. Pentru a crea un buton radio, sintaxa este următoarea:
<INPUT TYPE="RADIO" NAME="text" CHECKED VALUE="text">
Reţineţi că aceasta este aceeaşi sintaxă folosită pentru crearea unei casete de validare, cu deosebirea că atributul TYPE are valoarea RADIO în locul valorii CHECKBOX. Atributele unui buton radio au aceeaşi semnificaţie ca şi acelea ale unei casete de validare. Totuşi, atributul NAME este obligatoriu pentru butoanele radio, chiar dacă este opţional pentru casetele de validare. Toţi membrii unui set de casete de validare prezintă aceeaşi valoare a atributului NAME.
Crearea de selecţiiO selecţie este un meniu care defilează, de unde utilizatorul poate alege una sau mai multe opţiuni. De exemplu, într-o selecţie pot fi enumerate garniturile pentru pizza, astfel încât un utilizator să poată selecta orice combinaţie de garnituri pe care o doreşte. Pentru a crea o selecţie, folosiţi următoarea sintaxă:
<SELECT NAME="text" MULTIPLE SIZE="numar">etichetele OPTION se insereaza aici</SELECT>
Eticheta <SELECT> este folosită în combinaţie cu eticheta </SELECT>. Între cele două etichete este introdusă o serie de etichete OPTION. Într-o etichetă SELECT, numai atributul NAME este obligatoriu. Atributul MULTIPLE arată că utilizatorul poate alege mai multe opţiuni menţinând apăsată tasta CTRL şi executând clic pe aceasta. În absenţa atributului MULTIPLE, utilizatorul poate selecta o singură opţiune. Dacă specificaţi atributul MULTIPLE, trebuie să specificaţi şi un atribut NAME, care atribuie un nume de tablou ca nume al controlului. De exemplu, un control de tip selecţie care permite utilizatorului să aleagă mai multe garnituri pentru desert trebuie denumit folosind sintaxa garnitura[], nu garnitura. Comportarea unei selecţii care permite o singură opţiune este echivalentă cu aceea a unui set de butoane radio, dar aspectul unei selecţii este diferit de acela al unui set de butoane radio. Atributul SIZE specifică numărul opţiunilor vizibile. Prin utilizarea unui buton de derulare în jos sau a unei bare de defilare, utilizatorul poate manipula selecţia pentru a obţine accesul la restul opţiunilor şi a alege dintre acestea. Aşa cum am spus, o selecţie este asociată cu una sau mai multe opţiuni. Pentru a crea o opţiune care urmează a fi utilizată în cadrul unei selecţii, folosiţi următoarea sintaxă:
<OPTION SELECTED VALUE="text">continutul optiunii este inserat aici</OPTION>
Eticheta <OPTION> este combinată cu o etichetă </OPTION>. Textul dintre aceste etichete este cunoscut sub numele de conţinut al opţiunii. Conţinutul opţiunii apare în controlul SELECT. Mulţi programatori HTML omit eticheta </OPTION>, caz în care textul opţiunii se extinde până la următoarea etichetă <OPTION> sau </SELECT>. Totuşi nu este recomandat din motive de compatibilitate între browsere. Ambele atribute ale etichetei OPTION sunt opţionale. Dacă apare atributul VALUE, valoarea sa este trimisă serverului atunci când este selectată opţiunea asociată; în caz contrar, conţinutul opţiunii este trimis la server. Atributul SELECTED arată că opţiunea corespunzătoare este selectată iniţial; în caz contrar, opţiunea respectivă nu este selectată iniţial.
Crearea câmpurilor ascunseUneori este utilă crearea aşa-numitelor câmpuri ascunse. Valorile câmpurilor ascunse sunt
trimise la server alături de valorile altor controale; cu toate acestea, utilizatorul nu are posibilitatea de a vizualiza sau manipula valorile câmpurilor ascunse. Câmpurile ascunse se utilizează frecvent în cadrul unei serii de formulare. De exemplu, datele introduse de utilizator în primul formular din serie pot fi necesare în formularele ulterioare. În loc de a determina utilizatorul să introducă datele în fiecare formular, datele pot fi stocate într-un câmp ascuns, creat şi iniţializat de scriptul care prelucrează primul formular. Astfel, utilizatorul este scutit de o muncă suplimentară şi sunt preântâmpinate eventualele erori, care ar fi putut apărea dacă utilizatorul nu ar fi introdus aceleaşi date în formularele ulterioare. Sintaxa este:
<INPUT TYPE="HIDDEN" NAME="text" VALUE="text">
Numai atributele TYPE şi NAME sunt obligatorii; cu toate acestea, controlul este practic inutil în absenţa atributului VALUE, a cărui valoare este trimisă în mod automat la server în momentul expedierii formularului.
Trimiterea unui fişier către server prin intermediul unui formularPuteţi permite utilizatorului să aleagă un fişier şi apoi să trimită serverului conţinutul fişierului creând un control de tip fişier, prin intermediul următoarei sintaxe:
<INPUT TYPE="FILE" NAME="nume" ACCEPT="tip_mime" VALUE="text">
Atributul TYPE este singurul obligatoriu; cu toate acestea, în general, apare şi atributul NAME. Atributul VALUE specifică un nume de fişier prestabilit. Atributul ACCEPT specifică formatul conţinutului fişierului. Pot fi indicate mai multe formate, dar fiecare format trebuie separat de vecinii săi prin intermediul unei virgule. Formatul este specificat folosind un cod MIME (Multipurpose Internet Mail Extensions). Tabelul următor descrie formatele folosite cel mai frecvent:
TIP MIME TIP DE DATE EXTENSII DE FISIER
application/msexcel Microsoft Excel xls
application/msword Microsoft Word doc, dot
application/octet-streamBinara exe
application/pdf Adobe Acrobat pdf
application/postscript Postscript ai, eps, ps
application/ppt Microsoft PowerPoint ppt
application/zip Date comprimate in format ZIP zip
audio/midi Musical Instrument Digital Interface (MIDI) mid, midi
audio/x-wav Windows Audio Format (WAV) wav
image/gif Compuserve Graphics Interchange Format (GIF) gif
image/jpeg Joint Photographics Expert Group (JPEG) jpeg, jpg, jpe
image/TIFF Tagged Image Format (TIF) tif, tiff
text/HTML HTML htm, html
text/plain Text simplu txt
text/richtext Rich Text Format (RTF) rtf
video/mpeg Secventa video mpg, mpv, mpe, mpeg
video/quicktime Secventa video qt, mov
video/x-msvideo Secventa video avi
Eticheta FROM de delimitare trebuie să aibă POST ca valoare a atributului său METHOD. De asemenea, trebuie să includă un atribut ENCTYPE cu valoarea multipart/form-data. Iată sintaxa pe care trebuie să o folosiţi:
<FORM METHOD="POST" ENCTYPE="multipart/form-data" ACTION="url">
Este posibil ca serverul pe care aveţi pagina să nu fie configurat astfel încât să accepte fiecare tip MIME. În accest caz trebuie să vorbiţi cu administratorul serverului, pentru a putea încărca fişiere pe server.
Exemplu de formularAm creat mai jos un exemplu care conţine casetele descrise până acum (mai putin cele cu câmp ascuns şi cel de încărcare a unui fişier pe server), cu scopul de a înţelege mai bine fiecare funcţie în parte:
Cod:
<form name="form1" method="post" action="pagina.html"> <input type="text" name="textfield">Textfield<br> </form>
Iar rezultatul este:
TextfieldÎn continuare un cămp de tip textarea:
Cod:
<form name="form1" method="post" action="pagina.html"> <textarea name="textarea"></textarea>Textarea<br> </form>
Şi rezultatul:
TextareaCămpul pentru parole:
Cod:
<form name="form1" method="post" action="pagina.html"> <input type="password" name="textfield2">Textfield pentru parole <br> </form>
Care va arăta asa:
Textfield pentru parole
Apoi avem cămpurile ceckbox:
Cod:
<form name="form1" method="post" action="pagina.html"> <input type="checkbox" name="checkbox" value="checkbox">Checkbox<br> <br> <input name="checkbox2" type="checkbox" value="checkbox" checked> Checkbox cu valoarea checked<br> </form>
Cu rezultatul următor:
Checkbox
Checkbox cu valoarea checkedÎn continuare exemplu pentru butoanele radio şi radiogroup:
Cod:
<form name="form1" method="post" action="pagina.html"> <input name="radiobutton" type="radio" value="radiobutton"> Radio buton<br> </form>
Care arată asa:
Radio buton
Cod:
<form name="form1" method="post" action="pagina.html"> <p> <label> <input name="RadioGroup1" type="radio" value="radio" checked> Radio</label> Group1<br> <label> <input type="radio" name="RadioGroup1" value="radio"> Radio</label> Group1 </p> </form>
Radio Group1
Radio Group1
Şi ultimul exemplu conţine un list-meniu:
Cod:
<form name="form1" method="post" action="pagina.html">
<select name="select"> <option selected>optiunea 1</option> <option>optiunea 2</option> <option>alegerea 3</option> </select> List / Menu<br> </form>
Cu rezultatul următor:
List / Menu
Înlocuirea unui buton cu o imagineAspectul unui buton de expediere este monoton şi obişnuit. Dacă aspectul paginii este important, puteţi folosi o imagine în locul unui buton de expediere. O asemenea imagine se numeşte buton imagine. Când un utilizator execută clic pe buton imagine, datele din formular sunt trimise serverului, ca şi cum utilizatorul ar fi executat clic pe un buton de expediere. Sintaxa pentru crearea unui buton imagine este:
<INPUT TYPE="IMAGE" SRC="url" NAME="text" ALIGN="aliniere">
Atributele SRC si TYPE sunt obligatorii; celelalte atribute sunt opţionale. Atributul SRC determină adresa URL a fişierului care conţine imaginea ce va fi afişată. Atributul NAME atribuie un nume controlului de tip buton imagine. Atributul ALIGN poate lua oricare din valorile top (sus), middle (la mijloc) sau bottom (jos) şi specifică modul de aliniere a butonului imagine relativ la textul înconjurător.
Crearea unui buton de reiniţializareUneori, este folositor ca utilizatorul să poată executa clic pe un buton care să şteargă toate informaţiile incluse într-un formular. Un asemenea buton se numeşte buton de reiniţializare. Sintaxa este:
<INPUT TYPE="RESET" VALUE="text">
Unicul atribut obligatoriu este TYPE. Atributul opţional VALUE specifică textul care va apărea pe suprafaţa butonului de reiniţializare; dacă atributul este omis, pe buton va scrie "Reset".
Utilizarea unei legaturi pentru a furniza date unui scriptÎn afară de a expedia unui script datele dintr-un formular prin intermediul câmpurilor din formular, puteţi expedia date cu ajutorul adresei URL a scriptului, aşa cum se specifică în atributul ACTION al etichetei FORM. Pentru aceasta, ataşati la sfârşitul adresei URL un semn al întrebării (?) şi apoi includeţi o serie de perechi nume-valoare cu următoarea formă:
nume1=valoare1&nume2=valoare2&nume3=valoare3
Exemplul include numai trei perechi nume-valoare; cu toate acestea, puteţi include oricâte asemenea perechi doriţi, în funcţie de limita impusă de browserul utilizatorului. Adresa URL rezultată se numeşte şir de interogare şi nu poate conţine spaţii. Dacă doriţi să trimiteţi un spaţiu ca parte a unui şir de interogare, trimiteţi în locul spaţiului un semn plus (+). Iată un exemplu de şir de interogare care cere de pe server o anumită pagină:
http://www.tutoriale.far-php.ro/index.php?p=content
Adresa de mai sus trimite scriptului inclus în pagina index.php variabila cu numele "p" cu valoarea "content". Dacă doriţi să trimiteţi unui script, prin intermediul adresei URL, caractere speciale precum un semn al întrebării, un semn egal sau un ampersand, pentru a nu se crea confuzie şi pentru a funcţiona corect, un şir trebuie codificat URL. Pentru a codifica URL un şir care conţine o
interogare, caracterele speciale se înlocuiesc cu echivalentele lor hexazecimale, precedate de un simbol procent (%). Pentru detalii, consultaţi documentul Request for Comments (RFC) 1738, disponibil la adresa www.rfc.net. Unele dintre cele mai comune caractere speciale şi echivalentele lor codificate URL sunt prezentate mai jos. De exemplu, forma codificată URL a şirului "la multi ani!" este %22la multi ani%21%22.
Caracter special Echivalent codificat URL
. %2e
? %3e
^ %5e
~ %7e
+ %2b
` %2c
/ %2f
: %3a
;
%3b
< %3c
= %3d
> %3e
[ %5b
\ %5c
] %5d
- %5f
{ %7b
| %7c
} %7d
Tab %09
Spatiu %20
! %21
" %22
# %23
$ %24
% %25
& %26
' %27
( %28
) %29
@ %40
, %60
Formatare text
În HTML trecerea la un rând nou se face doar prin introducerea etichetei <br> (prescurtarea de la break row - rând rupt) iar pentru paragraf nou cu eticheta <p> (prescurtarea de la paragraph) .
Eticheta <hr> (prescurtarea de la horizontal rule - regula orizontală) introduce o linie orizontală şi trecerea la un rând nou.
Folosind etichete adecvate textul poate fi formatat.Spre exemplu fonturilor li se poate modifica: mărimea, culoarea, forma (normal, bold, italic), familia (Arial, Verdana, etc.), textul poate fi aliniat pe orizontală sau verticală iar titlurile (header), de la 1 la 6, sunt diferite ca mărime (1 cel mai mare iar 6 cel mai mic).
Etichetele <div> şi </div> delimiteaza un bloc (un container generic) în vederea formatării. Unul din atributele blocului div este align care poate lua valorile:center aliniere pe centruleft aliniere la stangaright aliniere la dreapta justify aliniere justificată la ambele capete ale paginii
În situaţia în care dorim ca textul introdus să fie afişat exact aşa cum a fost introdus (text preformatat) în fişierul sursă vom folosi perechea de etichete <pre> şi </pre> (prescurtarea de la preformatted text - text preformatat) .
Exemplu:
Codul HTML: Ce se afişează în browser: text normal text normal<b>text bold</b> text bold<i>text cursiv (italic) </i> text cursiv (italic) <u>text subliniat (underlined) </u> text subliniat (underlined) <del>text taiat (deleted) </del><sup>exponent (superscript) </sup> exponent (superscript)
<sub>indice (subscript) </sub> indice (subscript)
<tt>caractere monospatiate (teletype) </tt> caractere monospatiate (teletype) <cite>Citat (cite) </cite> Citat (cite) <em>evidentiat (emphasis) </em> evidentiat (emphasis) <code>text scris la tastatura (computer code) </code>
text continand cod de computer (computer code)
<kbd>text scris la tastatura (keyboard) </kbd>
text scris la tastatura (keyboard)
<samp>mostra de cod de computer (sample) </samp>
mostra de cod de computer (sample)
<strong>text ingrosat (strong) </strong> text ingrosat (strong) <big>mare (big) </big> mare (big) <small>mic (small) </small> mic (small)
<font color="red">font rosu (detalii) </font> font rosu<font face="Courier">font Courier (detalii) </font>
font Courier
<font size="6">font size=6 (detalii) </font> font size=6<div align="center">text aliniat pe centru</div>
text aliniat pe centru
<div align="left">text aliniat la stanga</div> text aliniat la stanga<div align="right">text aliniat la dreapta</div>
text aliniat la dreapta
<h1>Titlu 1 (detalii) </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
Listele sunt un mod simplu de organizare a informaţiei şi pot fi neordonate, ordonate şi de definiţii.
Liste neordonateAceste liste sunt delimitate de etichetele <ul> şi </ul> (unordered list) iar elementele de <li> şi </li> (list item) .
Exemplu:
HTML AfişareExemple 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 şi disc.
Exemplu:
HTML Afişare
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
morcovii
Liste ordonateAceste liste sunt delimitate de etichetele <ol> şi </ol> (ordered list)iar elementele de <li> şi </li>.
Exemplu:
HTML AfisareExemple de combustibili:<ol><li>benzina</li><li>motorina</li>
Exemple de combustibili: 1. benzina 2. motorina
<li>gaz lichefiat</li></ol>
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 AfişareMedii 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
Liste de definiţiiAceste liste sunt delimitate de etichetele <dl> şi </dl> (definition list) .Termenii listei sunt delimitaţi de etichetele <dt> şi </dt> (definition term) iar definiţiile termenilor de <dd> şi </dd> (definition description) .
Exemplu:
HTML AfişareLegenda:<dl><dt>HTML</dt><dd>Hyper Text Mark-ul Language</dd><dt>IP</dt><dd>Internet Protocol</dd></dl>
Legenda: HTML
Hyper Text Mark-ul Language IP
Internet Protocol
Despre legături (linkuri) şi ancore HTML
Legătura (link-ul) este o etichetă foarte importantă în HTML deoarece conferă utilizatorului posibilitatea navigării de la o pagină la alta. De obicei link-ul este subliniat iar atunci când suntem deasupra lui cursorul îşi schimbă forma.
Link-ul este definit cu etichetele <a> şi </a> şi are atributele:href - adresa fişierului destinaţietarget - în ce fereastră se va deschide fişierul destinaţietitle - o mică descriere asociată legăturii afişată în momentul în care mouse-ul se află deasupra legăturii
Adresa fişierului destinaţie (href) poate fi exprimată astfel:nume fisier - dacă se află în acelaşi folder cu pagina curentăadresa relativa - dacă se află pe acelaşi server sau disc, indicându-se caleaadresa URL - fiind adresa completă a paginii (de exemplu: http://www.proba.ro/pagina.html)
Atributul target poate lua valorile:_blank - pagina va fi încărcată într-o nouă fereastră_parent - pagina va fi încărcată în fereastra părinte
_top - pagina va fi încărcată în fereastra top a cadrului_self - pagina va fi încărcată în aceeaşi fereastră
Exemplu: link catre pagina www.drogoreanu.ro
cod HTML Rezultatul codului <a href="http://www.drogoreanu.ro" target="_blank">Cătălin Drogoreanu</a>
Cătălin Drogoreanu
Putem insera un link către o adresă de e-mail putând asocia şi un subiect prestabilit:cod HTML Rezultatul codului <a href="mailto:[email protected]">Trimite e-mail</a>
Trimite e-mail
<a href='mailto:[email protected]?subject="subiect prestabilit"'>Trimite e-mail</a>
Trimite e-mail
Culoarea link-urilor poate fi modificată introducând în eticheta body următoarele atribute:LINK - legătură nevisitată (default albatru)VLINK - legătură visitată (default rosu)ALINK - legătură activă (nu prea se foloseşte - default portocaliu)
Ancore
Se pot adăuga puncte de reper (ancore) pentru o deplasare mai usoară în cazul unor pagini HTML lungi sau către un loc anume aflat într-o altă pagină.Ancora se defineşte tot între etichetele <a> şi </a> dar cu atributul name. Pentru a face trimitere către ancoră se introduce un link cu atributul href având ca valoare denumirea ancorei astfel:
Ancora <a name="nume">Ancora</a>Link către ancora aflată în aceeaşi pagină <a href="#nume">Înapoi la ancora</a>Link către ancora aflată în altă pagină <a href="pagina.html#nume">Înapoi la
ancora din pagina.html</a>
Afişarea imaginilor în HTML
Folosind imagini pagina capătă un plus de atractivitate dar puteţi plăti preţul unei încărcări greoaie dacă dimensiunile imaginii sunt mari.
Câteva din formatele de imagini utilizate în paginile web sunt: JPEG (*.jpg sau *.jpeg), GIF (*.gif), BMP (*.bmp), PNG (*.png).
Imaginile în format gif conţin doar 256 culori, fiind recomadat pentru grafică (butoane, icon-uri, etc.) în timp ce imaginile în format jpg pot conţine milioane de culori şi sunt folosite pentru fotografii. Formatul bmp este puţin folosit datorită dimensiunilor mari.
Eticheta folosită pentru inserarea unei imagini în pagina este <img> şi are următoarele atribute:src = sursa, locul unde se află imagineawidth = lăţimea imaginiiheight = înălţimea imaginiialt = numele care înlocuieşte imaginea până aceasta se încarcă sau când nu a fost găsităborder = chenar (0 = lipsă bordură)
Dimensiunea imaginii afişate de browser este stabilită de argumentele width şi height care pot fi diferite de dimensiunile imaginii originale, caz în care imaginea va fi redimensionată automat de către browser.
Exemplu: o imagine cu lătime 100px, înălţime 75px, alt=poza şi border=0 şi încă o dată cu border=1
<img src="poza.jpg" width="100" height="75" alt="poza" border="0">
<img src="poza.jpg" width="100" height="75" alt="poza" border="1">
Pentru a micşora timpul încărcării complete a paginii există programe care optimizează imaginile. Optimizarea constă în:1. reducerea dimensiunii imaginii fără degradarea majoră a calităţii2. eliminarea informaţiilor tip metadata asociate imaginii. Aceste date (EXIF/IPTC) sunt asociate automat de programele de grafică (de ex. Adobe Photoshop) sau de aparatele de fotografiat digitale. Pentru eliminarea acestor informaţii puteţi folosi aplicaţia Exifer.
În Internet Explorer valoarea atributului alt este afişată în browser în momentul în care mouse-ul se află deasupra imaginii. Pentru a obţine aceeaşi afişare în Firefox în eticheta img se adaugă atributul title având acceaşi valoare ca şi alt.
Exemplu: acceaşi imagine care conţine atributele alt şi title (verificaţi cu Internet Explorer şi Firefox)
<img src="poza.jpg" width="100" height="75" alt="poza" title="poza" border="0">
Crearea tabelelor
Aceste etichete au o mare utilizare deoarece tabelele constituie structura care stă la baza organizării marii majorităţi a paginilor web (inclusiv cea de faţă).
Tabelul este format din linii şi coloane împărţind zona în celule. Fiecare celulă păstrează informaţia care va fi afişată. Pentru o afişare corectă a tabelului, fiecare rând va avea acelaşi număr de celule. Dacă dorim ca o celulă să fie goală vom introduce un spaţiu gol (space) sau codul html echivalent
Pentru inserarea unui tabel este folosită perechea de etichete <table> şi </table>, pentru un rând <tr> şi </tr> (table rows) iar pentru o celulă <td> şi </td> (table data cell) .
Tabele pot fi îmbricate, adică în interior pot conţine unul sau mai multe tabele.
Exemplu: tabel cu 2 coloane şi 2 rânduri, border 1, coloana 1 lăţime 80px, coloana 2 lăţime 160px, fiecare celulă are o altă culoare de fond (bgcolor)
Codul HTML Rezultatul codului <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>
rosu galben
alb verde
</table>
Atributele etichetei table sunt:border = bordura (0 = lipsă bordura)width = lăţimea tabeluluiheight = înălţimea tabeluluibgcolor = culoarea de fundalbackground = imaginea de fundal (W3C invalid, folosiţi în loc style)cellspacing = distanţa între celulecellpaddind = distanţa dintre marginea celului şi conţinut
Atributele etichetei td sunt:align = aliniere pe orizontală a conţinutului (left=stanga, right=dreapta, center=centru)valign = aliniere pe verticală a conţinutului (top=sus, bottom=jos, middle=mijloc, baseline=asemănator cu top)width = lăţimea celuleiheight = înălţimea celuleibgcolor = culoarea de fundalbackground = imaginea de fundal (W3C invalid, folosiţi în loc atributul style)colspan = uneşte celula cu cea din dreapta eirowspan = uneşte celula cu cea de sub ea
Exemplu: un tabel în care am folosit colspan pentru a uni celulele 1 şi 2 din rândul 2 şi rowspan pentru a uni celula 1 din rândul 3 cu celula 1 din rândul 4:
Codul HTML Rezultatul codului <table border="1"> <tr> <td bgcolor="white">R1 C1</td> <td bgcolor="yellow">R1 C2</td> <td bgcolor="white">R1 C3</td> <td bgcolor="yellow">R1 C4</td> </tr> <tr> <td colspan="2" bgcolor="red">R2 C1+C2</td> <td bgcolor="yellow">R2 C3</td> <td bgcolor="red">R2 C4</td> </tr> <tr> <td rowspan="2" bgcolor="white">R3 C1 + R4 C1</td> <td bgcolor="yellow">R3 C2</td> <td bgcolor="white">R3 C3</td> <td bgcolor="yellow">R3 C4</td> </tr> <tr> <td bgcolor="red">R4 C2</td> <td bgcolor="yellow">R4 C3</td> <td bgcolor="red">R4 C4</td> </tr> </table>
R1 C1 R1 C2 R1 C3 R1 C4
R2 C1+C2 R2 C3 R2 C4
R3 C1 + R4 C1R3 C2 R3 C3 R3 C4
R4 C2 R4 C3 R4 C4
Dacă dorim să evidenţiem conţinutul primului rând (capul de tabel) putem folosi perechea de etichete <th> şi </th> (table header cell) în locul etichetelor <td> şi </td>. Astfel conţinutul celulei va fi afişat îngroşat şi aliniat pe mijloc.
Exemplu: un tabel cu 3 rânduri şi 2 coloane folosind pe primul rând etichetele <th> şi </th>:
Codul HTML Rezultatul codului
<table border="1"> <tr> <th width="120">Titlul 1</th> <th width="120">Titlul 2</th> </tr> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table>
Titlul 1 Titlul 2
1 2
3 4
Eticheta caption va adăuga o linie text deasupra tabelului, centrată pe mijloc, de obicei folosită ca fiind un titlu al tabelului. Caption se plasează obligatoriu imediat după tag-ul table dar înainte de prima etichetă tr.
Exemplu: un tabel cu 4 rânduri şi 2 coloane folosind eticheta caption:
Codul HTML Rezultat<table border="1"> <caption>Necesar alimente</caption> <tr> <th width="120">Produse</th> <th width="120">Cantitate</th> </tr> <tr> <td>Fructe</td> <td>1 kg</td> </tr> <tr> <td>Legume</td> <td>5 kg</td> </tr> <tr> <td>Carne</td> <td>1,5 kg</td> </tr> </table>
Necesar alimente
Produse Cantitate
Fructe 1 kg
Legume 5 kg
Carne 1,5 kg
Exemplu: tabelului anterior îi adăugăm o imagine de fundal folosind style în zona head:
Cod:
<html> <head> <style type="text/css"> #fundal
{ background-image : url(poza.jpg); } </style> </head> <body> <table border="1" id="fundal"> <caption>Necesar alimente</caption> <tr> <th width="120">Produse</th> <th width="120">Cantitate</th> </tr> <tr> <td>Fructe</td> <td>1 kg</td> </tr> <tr> <td>Legume</td> <td>5 kg</td> </tr> <tr> <td>Carne</td> <td>1,5 kg</td> </tr> </table> </body> </html>
Adaugare sunet în paginile HTML
Câteva din formatele de sunete utilizate în paginile web sunt: MIDI (*.mid sau *.midi), WAVE (*.wav), AU (*.au).
În pagini putem introduce:1. link-uri către fişiere de sunet2. sunete care să fie audiate direct din pagina web3. sunet de fond (fundal sonor)
Exemplu: Varianta 1 este un simplu link către un fişier de sunet:
<a href="1.mid">fisier sunet</a>
A doua variantă menţionată se realizează folosind fişiere de tip flash, care pot conţine şi butoane de control de tip Play, Pause, Stop.
A treia variantă este acceptată doar de browserul Internet Explorer şi constă în inserarea în interiorul corpului paginii a etichetei: <bgsound> care poate avea atributele:src - fişierul sursă de sunet care va fi audiatloop - numărul de repetiţii ale fişierului ("infinite" sau "-1" pentru infinit şi un număr întreg care indică de câte ori va fi audiat fişierul)Pentru a funţiona şi în alte browsere se poate folosi eticheta embed astfel:
<embed src="sunet.wav" hidden="TRUE" autostart="TRUE" loop= "TRUE"></embed>
Afişarea videoclipurilor în html
Formatele de videoclipuri utilizate în paginile web sunt: MPEG (*.mpg sau *.mpeg), QuickTime (*.mov), AVI (*.avi). Se pot introduce şi alte formate, dar pentru ca vizitatorul să poata vizualiza acel videoclip trebuie să aibă deja instalat codec-ul pentru acel tip de fişier video.
În pagini putem introduce:1. link-uri către fişiere video2. videoclipuri care să fie vizionate direct din pagina web
Exemplu: Varianta 1 este un simplu link către un fişier video:
<a href="1.avi">fisier video</a>
A doua variantă este acceptată doar de browserul Internet Explorer care permite atribute speciale în eticheta <img>:dynsrc - fişierul sursă video care va fi vizionatloop - numărul de repetiţii ale fişierului ("infinite" sau "-1" pentru infinit şi un număr întreg care indică de câte ori va fi vizionat fişierul)start - indică momentul în care fişierul va fi vizionat (fileopen=când pagina a fost încărcată, mouseover=când mose-ul este deasupra imaginii)controls - afişeaza butoanele de control
De asemenea puteti rula un fişier video în browser folosind embed dar tipul fisierului trebuie să fie în format flash sau shockwave
Crearea paginilor cu cadre (frame)
Exemplele prezentate în articolele anterioare încărcau o singură pagină HTML în fereastra browserului.
Sunt şi situaţii în care imaginea afişată de browser este formată din mai multe pagini HTML numite cadre. Caracteristic acestor pagini este că perechea de etichete <body> </body> este înlocuită de <frameset> </frameset> iar în interiorul lor cadrele sunt delimitate de <frame> şi </frame>.
Atributele etichetei frameset sunt:cols - îimparte pagina în coloane şi are valori exprimate în procente din dimensiunea ferestrei, număr de pixeli sau * adică spaţiul rămasrows - împarte pagina în rânduri cu aceleaşi valori ca la colsbordercolor - culoarea tuturor chenarelor conform modelului #rrggbbframeborder - înhibarea afişării chenarelor cu valorile yes sau no
Cadrele sunt introduse prin pereche de etichete <frame> </frame> care suportă atributele:src - fişierul sau adresa fişierului introdusbordercolor - culoarea chenarului cadrului curent conform modelului #rrggbbnoresize - dezactivează posibilitatea vizitatorului de a redimensiona cadrulscrolling - adaugă cadrului bare de defilare cu valorile yes, no şi auto
Exemplu: pagină cu două cadre orizontale în proporţia 20% şi 80% din înălţimea totală. Pagina de sus are chenarul roşu iar cea de jos are scroll.
Cod:
<html> <head> <title>Exemplul 1</title> </head> <frameset rows="20%,80%"> <frame src="pag1.html" bordercolor="#ff0000"> <frame src="pag2.html" scrolling="yes"> </frameset> </html>
Exemplu: pagină cu două cadre verticale în proporţia 40% şi 60% din lăţimea totală, fără posibilitatea de redimensionare a cadrelor:
Cod:
<html> <head> <title>Exemplul 2</title> </head> <frameset cols="40%,60%"> <frame src="pag1.html"> <frame src="pag2.html" noresize> </frameset> </html>
Exemplu: pagină cu două cadre. În cadrul din stânga sunt link-uri către alte pagini care se vor deschide în cadrul din stânga (se poate verifica funcţionarea atributului target al legăturii). Cadrul din stânga va avea scroll.
În situaţia în care browserul folosit nu suportă pagini care conţin cadre imaginea afişată va fi goală. Pentru a evita acest lucru vom introduce un mesaj încadrat de <body> şi </body> între etichetele <noframes> şi </noframes> prin care informăm vizitatorul că foloseşte un browser care nu suportă cadre.
Cod:
<frameset cols = "30%, 40%,*"> <noframes> <body>Browserul folosit nu suporta cadre</body> </noframes> <frame src ="pag1.html"> <frame src ="pag2.html"> <frame src ="pag3.html"> </frameset>
Cadre in-lineSunt blocuri care se introduc în pagină prin perechea de etichete <iframe> şi </iframe> şi au atributele:src - fişierul sau adresa acestuiaheight - înălţime cadruwidth - lăţime cadru
frameborder - grosimea bordurii (chenarului)scrolling - adaugă bare de defilare cu valorile yes, no şi autoalign - aliniază cadrul (left, right, center, top, bottom, middle)vspace - distanţa peste şi sub cadruhspace - distanţa în stânga şi în dreapta de cadru
Exemplu: o pagină în care este găzduit un cadru in-line. Şi aici se poate introduce un mesaj pentru browserele care nu suportă cadre in-line. Modul de afişare al exemplului poate diferi de la un browser la altul.
Cod:
<html> <head> <title>Exemplul 4</title> </head> Mai jos este un cadru in-line cu următori parametrii:<br> width="300" si height="200" hspace="200" vspace="100" scrolling="yes"<br> <iframe src="pag1.html" width="300" height="100" hspace="200" vspace="100" scrolling="yes"> Browserul folosit nu suportă cadre in-line </iframe> </body>
Hărţi de imagini
Hărţile de imagini permit declararea unor zone din imagine ca legături către alte pagini web şi implică două aspecte.
Imaginea este declarată ca fiind harta. Pentru aceasta eticheta <img> a imaginii are următoarele atribute:- src - fişierul sau adresa fişierului imagine- usemap - are valoarea de genul #nume care este folosit în interiorul etichetei <map> prezentate mai jos
Definirea hărţii folosind perechea de etichete <map> şi </map> cu atributul obligatoriu name, având aceeaşi valoare ca la usemap din img.Zona sau zonele conţinute de harta sunt introduse prin eticheta <area> cu atributele obligatorii:- shape - fiind forma ariei declarate cu valorile: rect = dreptunghiulara, circle = circulara, poly = poligonala, default = alte forme (diferite de cele anterioare)- coords - coordonatele zonei- href - adresa paginii destinaţie a legăturii
Cod:
<html> <head> <title>Exemplu</title>
</head> <body> <b>Harti de imagini</b><p> <img src="harta.gif" usemap="#harta" width="280" height="160" border="0"> <map name="harta"> <area shape="rect" coords="20,20,70,70" href="pag1.html"> <area shape="rect" coords="20,90,120,140" href="pag2.html"> <area shape="circle" coords="200,80,30" href="pag3.html"> <area shape="circle" coords="200,80,60" href="pag1.html"> <area shape="poly" coords="90,70,120,70,120,20" href="pag3.html"> </map> </body> </html>
Hărţi de imagini
Hărţile de imagini permit declararea unor zone din imagine ca legături către alte pagini web şi implică două aspecte.
Imaginea este declarată ca fiind harta. Pentru aceasta eticheta <img> a imaginii are următoarele atribute:- src - fişierul sau adresa fişierului imagine- usemap - are valoarea de genul #nume care este folosit în interiorul etichetei <map> prezentate mai jos
Definirea hărţii folosind perechea de etichete <map> şi </map> cu atributul obligatoriu name, având aceeaşi valoare ca la usemap din img.Zona sau zonele conţinute de harta sunt introduse prin eticheta <area> cu atributele obligatorii:- shape - fiind forma ariei declarate cu valorile: rect = dreptunghiulara, circle = circulara, poly = poligonala, default = alte forme (diferite de cele anterioare)- coords - coordonatele zonei- href - adresa paginii destinaţie a legăturii
Cod:
<html> <head> <title>Exemplu</title> </head> <body> <b>Harti de imagini</b><p> <img src="harta.gif" usemap="#harta" width="280" height="160" border="0"> <map name="harta"> <area shape="rect" coords="20,20,70,70" href="pag1.html"> <area shape="rect" coords="20,90,120,140" href="pag2.html"> <area shape="circle" coords="200,80,30" href="pag3.html"> <area shape="circle" coords="200,80,60" href="pag1.html"> <area shape="poly" coords="90,70,120,70,120,20" href="pag3.html"> </map> </body> </html>
Culori în HTML
În HTML culorile pot fi introduse în două moduri: - prin denumirea lor în limba engleză (pentru un număr redus de culori)- în format hexazecimal folosind două caractere (începând de la 00 la FF) pentru fiecare din cele trei culori rosu (R), verde (G) şi albastru (B) astfel #rrggbb.Pentru culori, în format zecimal, valoarea minimă este 0 (corespunzătoare valorii 00 în hexa) iar cea maximă 255 (corespunzătoare valorii FF în hexa).
Exemplu:Să presupunem că am ales o culoare folosind aplicaţia Paint din Windows care ne indică R=111 G=52 B=200.Folosind calculatorul ştiinţific din Windows transformăm aceste valori din format zecimal în format hexazecimal şi obţinem R=6F, G=34 şi B=C8.Formatul final recunoscut de HTML este #6F34C8 (caracterul # conţinut la început este obligatoriu).
Unele aplicaţii de grafică furnizează valoarea corespunzătoare culorii dorite direct în formatul recunoscut de HTML.
Personal vă recomand să folositi programul gratuit Color Calculator care vă ajută să găsiti nuanţele complementare şi combinaţiile de culori potrivite pentru o pagină web.
Codul caracterelor româneşti şi alte caractere speciale
Mai jos găsiţi codul caracterelor româneşti şi unele din cele mai folosite caractere speciale:
Litera Cod HTML ă ăĂ Ăî îÎ Îş şŞ Şţ ţŢ Ţâ â Â
spatiu & &ß ß© ©® ®™ ™£ £¥ ¥€ €“ “” ”— —< <> >§ §
După cum observaţi, orice caracter special începe cu caracterul & şi se termină cu caracterul punct şi virgulă ;