Suport Curs HTML

SUPORT DE CURS
HTML
Modulul 2 Introducere n tehnologii Web
Specializare: WebDesigner WebProgramator WebMaster
Modulul 2 Introducere in Tehnologii Web
Curs: HTML
OBIECTIVUL CURSULUI:
Dupa studierea acestui curs, studentii vor fi capabili sa realizeze pagini web de complexitate medie prin : -
definirea corecta a structurii unui document HTML introducerea unor elemente de identificare a paginii, utile mai ales pentru inscrierea la motoarele de cautare stabilirea unor proprietati ale documentului, in general legate de aspectul acestuia impartirea documentului in sectiuni logice, formatarea acestora, precum si a unor elemente componente includerea de elemente complexe de tip lista, tabel sau imagine in documentul HTML creare de legaturi si ancore intre documente, acestea fiind de fapt elementul esential in realizarea unui site imbinarea unor elemente pentru a face pagina mai atractiva, din punct de vedere estetic sau functional crearea unor documnte HTML bazate pe cadre in scopul de a structura si gestiona mai bine cantitati mari de informatie includerea de formulare in vederea realizarii unor interactiuni cu utilizatorul sub forma de feed-back
Tema finala va consta in proiectarea unui site de baza, cuprinzand o descriere a site-ului (realizarea hartii site-ului ) si realizarea lui efectiva prin implementarea unei pagini principale si a unei serii de alte pagini aflate pe nivele ierarhice inferioare acesteia.
______________________________________________________________________________________________
Acest document este proprietatea Institutului Multimedia Romano-Elvetian.
Modulul 2 Introducere in Tehnologii Web CUPRINS
Curs: HTML
Capitolul 1. INTRODUCERE................................................................................................................................................ 6 1.1. Ce este WWW? ...................................................................................................................................................... 6 1.2. Navigatoare web .................................................................................................................................................... 6 1.3. Ce este de fapt HTML? ........................................................................................................................................... 6 1.4. Notiunea de eticheta (tag) ..................................................................................................................................... 7 Capitolul 2. CREAREA UNUI DOCUMENT HTML ................................................................................................................. 8 2.1. Structura unui document HTML ............................................................................................................................. 8 2.1.1. DOCTYPE ................................................................................................................................................................. 9 2.1.1.1. Declaratii DOCTYPE .......................................................................................................................................... 9 2.1.2. HTML .................................................................................................................................................................... 10 2.2. Sectiuni ................................................................................................................................................................ 10 2.2.1. Antetul documentului HTML ................................................................................................................................ 10 2.2.1.1. TITLE ............................................................................................................................................................... 11 2.2.1.2. META .............................................................................................................................................................. 13 2.2.1.3. BASE ............................................................................................................................................................... 16 2.2.1.5. LINK ................................................................................................................................................................ 17 2.2.1.6. STYLE .............................................................................................................................................................. 19 2.2.1.7. SCRIPT ............................................................................................................................................................ 21 2.2.2. Partea principala (corpul) documentului HTML .................................................................................................... 22 2.2.2.1. Atribute aditionale ......................................................................................................................................... 22 2.2.2.2. Antete (headere)............................................................................................................................................ 22 2.2.2.3. Paragrafe ........................................................................................................................................................ 24 2.2.2.4. Linie noua ....................................................................................................................................................... 25 2.2.2.5. Desenarea unei linii ....................................................................................................................................... 25 2.2.2.6. Citate .............................................................................................................................................................. 26 2.2.2.7. Texte preformatate ........................................................................................................................................ 27 2.2.2.8. Adresa ............................................................................................................................................................ 28 2.2.2.9. Entitati caracter si caractere speciale ............................................................................................................ 28 2.2.2.10. Comentarii ................................................................................................................................................... 30 2.2.3. Divizarea corpului documentului in bucati ........................................................................................................... 30 2.3. Folosirea culorilor in tabele .................................................................................................................................. 31 2.3.1. HTML sistemul de culori RGB ............................................................................................................................. 31 2.3.2. HTML sistemul de culori hexazecimal ................................................................................................................ 31 2.4. Etichete si atribute prezentate in acest capitol .................................................................................................... 33 Capitolul 3. FORMATAREA TEXTULUI .............................................................................................................................. 36 3.1. Formatarea logica ................................................................................................................................................ 36 3.2. Formatarea fizica ................................................................................................................................................. 37 3.4. Etichete si atribute prezentate in acest capitol .................................................................................................... 39 Capitolul 4. LISTE ............................................................................................................................................................ 40 4.1. Liste neordonate .................................................................................................................................................. 40 4.1.1. Definire si utilizare ................................................................................................................................................ 40 4.2. Liste ordonate ...................................................................................................................................................... 42 4.2.1. Definire si utilizare ................................................................................................................................................ 42
______________________________________________________________________________________________
Curs: HTML
4.3. Liste de definitii ................................................................................................................................................... 43 4.3.1. Definire si utilizare ................................................................................................................................................ 43 4.4. Etichete si atribute prezentate in acest capitol .................................................................................................... 45 Capitolul 5. TABELE ......................................................................................................................................................... 46 5.1. Definire si utilizare ............................................................................................................................................... 46 5.2. Titlul tabelului ...................................................................................................................................................... 49 5.3. Latimea unui tabel ............................................................................................................................................... 49 5.4. Liniile / randurile unui tabel ................................................................................................................................. 50 5.5. Datele / celulele unui tabel .................................................................................................................................. 52 5.6. Alinierea datelor in celule .................................................................................................................................... 55 5.7. Spatierea celulelor ............................................................................................................................................... 55 5.8. Spatierea datelor in celule ................................................................................................................................... 56 5.10. Extinderea celulelor ........................................................................................................................................... 57 5.10. Gruparea coloanelor si liniilor ........................................................................................................................... 60 5.10.1. Gruparea coloanelor ........................................................................................................................................... 60 5.10.2. Gruparea liniilor (randurilor) .............................................................................................................................. 62 5.11. Etichete si atribute prezentate in acest capitol .................................................................................................. 64 Capitolul 6. LEGATURI SI ANCORE ................................................................................................................................... 66 6.1. Utilizarea legaturilor ............................................................................................................................................ 66 6.2. ANCHOR ............................................................................................................................................................... 66 6.2.1. HREF ...................................................................................................................................................................... 68 6.2.1.1. Legarea paginilor locale folosind cai relative ................................................................................................. 69 6.2.1.2. Legarea paginilor locale folosind cai absolute ............................................................................................... 69 6.2.1.3. Cai relative sau cai absolute ? ........................................................................................................................ 70 6.2.2. Legaturi la o sectiune din document (ancore denumite)...................................................................................... 70 6.3. Etichete si atribute prezentate in acest capitol .................................................................................................... 72 Capitolul 7. IMAGINI ....................................................................................................................................................... 73 7.1. Adaugarea imaginilor in documente HTML .......................................................................................................... 73 7.1.1. Text alternativ (ALT) .............................................................................................................................................. 75 7.1.2. Sursa imaginii (SRC) .............................................................................................................................................. 75 7.1.3. Dimensiuni (WIDTH si HEIGHT) ............................................................................................................................. 75 7.2. Harti imagine (Maparea imaginilor) ..................................................................................................................... 76 7.2.1. Harti pe server (server-side) ................................................................................................................................. 76 7.2.2. Harti pentru client (client-side) ............................................................................................................................. 76 7.3. Combinarea cu alte elemente .............................................................................................................................. 78 7.3.1. Imagini si legaturi .................................................................................................................................................. 78 7.3.2. Imagini si tabele .................................................................................................................................................... 79 7. 4. Etichete si atribute prezentate in acest capitol .................................................................................................... 80 Capitolul 8. CADRE .......................................................................................................................................................... 81 8.1. Concept ................................................................................................................................................................ 81 8.2. Cadre IFRAME ...................................................................................................................................................... 81
______________________________________________________________________________________________
Curs: HTML
8.3. Etichete si atribute prezentate in acest capitol .................................................................................................... 83 Capitolul 9. FORMULARE ................................................................................................................................................ 84 9.1. Elementul FORM .................................................................................................................................................. 84 9.2. Elementul TEXTAREA ........................................................................................................................................... 86 9.3. Elementul SELECT ................................................................................................................................................. 88 9.4. Elementul INPUT .................................................................................................................................................. 91 9.4.1. Atributele elementului INPUT............................................................................................................................... 92 9.4.2. Atributul TYPE - valoarea TEXT ............................................................................................................................. 94 9.4.3. Atributul TYPE - valoarea PASSWORD................................................................................................................... 94 9.4.4. Atributul TYPE - valoarea CHECKBOX .................................................................................................................... 95 9.4.5. Atributul TYPE - valoarea RADIO ........................................................................................................................... 96 9.4.6. Atributul TYPE - valoarea RESET ........................................................................................................................... 96 9.4.7. Atributul TYPE - valoarea SUBMIT ........................................................................................................................ 97 9.4.8. Atributul TYPE - valoarea IMAGE .......................................................................................................................... 97 9.4.9. Atributul TYPE - valoarea BUTTON ....................................................................................................................... 97 9.4.10. Atributul TYPE - valoarea HIDDEN ...................................................................................................................... 98 9.5. Elementul BUTTON .............................................................................................................................................. 99 9.6. Elementul LABEL ................................................................................................................................................ 100 9.7. Elementul FIELDSET ............................................................................................................................................ 101 9.8. Atribute comune ................................................................................................................................................ 102 9.8.1. Dezactivarea .......................................................................................................................................................102 9.8.2. Navigarea ............................................................................................................................................................102 9.8.3. Taste de acces .....................................................................................................................................................103 9.9. Etichete si atribute prezentate in acest capitol .................................................................................................. 105
Capitolul 10. XHTML ................................................................................................................................ 108

10.1 Diferente intre HTML si XHTML ......................................................................................................................... 108
Capitolul 11. HTML 5 ............................................................................................................................... 111
______________________________________________________________________________________________
Curs: HTML
Capitolul 1. INTRODUCERE
World Wide Web (W3) este o retea a resurselor informatizate. Web-ul se bazeaza pe trei mecanisme in functionarea lui: o organizare uniforma in numirea si localizarea resurselor in retea: URI - Uniform Resources Identifier; un protocol pentru accesul la resursele cu nume din retea; un limbaj pentru a parcurge usor aceste resurse: HyperText.
1.1. Ce este WWW?

World Wide Web, abreviat WWW si cunoscut ca si Web, este un sistem de documente hypertext interconectate, accesate prin intermediul Internetului. Informatia este stocata in pagini web. Paginile web sunt fisiere stocate in calculatoare numite servere web. Calculatoarele care citesc pagini web sunt numite clienti web. Clientii web citesc paginile web cu ajutorul unor programe numite browsere / navigatoare. Cele mai cunoscute standarde web sunt HTML, CSS si XML.
1.2. Navigatoare web

Pentru a accesa informatiile disponibile pe anumite servere web este necesara utilizarea unui produs software special denumit in continuare navigator sau browser.
1.3. Ce este de fapt HTML?

HTML - limbajul de marcare a hipertextului (HyperText Markup Language) Ca sa publicam informatia pentru distribuire globala, este nevoie de un limbaj pe care toate calculatoarele legate la Web, sa-l poata intelege. Limbajul de publicare a resurselor folosit in reteaua Web este HTML. HTML ofera un set de elemente si atribute care ajuta programatorul sa transforme conceptul grafic al websiteului intr-o pagina de Internet adevarata. Acest set a evoluat cu fiecare iteratie a versiunilor HTML (2.0, 3.2, 4.0, 4.01, XHTML) ajungand astazi la versiunea HTML5, propusa recent de W3C (World Wide Web Consortium). Este important de notat ca orice versiune noua de HTML presupune un nivel ridicat de compatibilitate cu versiunile anterioare. Daca o pagina web este construita folosind elemente/atribute specifice HTML5, un navigator care nu suporta acele elemente nu va fi capabil de a reda corect continutul paginii respective. Din acest motiv, utilizatorii sunt incurajati sa actualizeze navigatorul pe care il folosesc (fie el Internet Explorer, Firefox, Opera, Safari, Chrome sau oricare alt navigator) la cea mai noua versiune in speranta ca acestea adopta cele mai noi standarde HTML. Navigatoarele moderne ofera o serie inreaga de avantaje fata de versiunile mai vechi, cum ar fi viteza si securitate sporite. HTML ofera autorilor mijloace: de a publica online documente cu titluri, text, tabele , liste, fotografii, etc.; de a primi online informatii via legaturilor hypertext, la click-ul unui buton de mouse; de a compune formulare care sa ajute la cautarea si transmiterea de informatii; de a include video-clipuri, sunete sau alte aplicatii in documentele publicate. Versiunea HTML la care ne vom referi in continuare este HTML 4.01. Versiunile mai noi decat aceasta (XHTML si HTML 5) sunt tratate in capitole separate.
______________________________________________________________________________________________
Curs: HTML
1.4. Notiunea de eticheta (tag)

Documentele contin numeroase elemente. Etichetele HTML sunt utilizate tocmai pentru a marca aceste elemente. Ele sunt marginite de < si > si pot fi scrise atat cu litere mici, cat si cu litere mari. Se prezinta sub forma unor perechi: <eticheta> ... </eticheta> in care eticheta de sfarsit arata aprope la fel ca cea de inceput, cu exceptia caracterului /. Acestor etichete le pot fi atasate atribute care vor fi specificate in cadrul etihetei de inceput. De asemenea, in interiorul unei etichete (intre eticheta de inceput si cea de sfarsit) pot fi definite alte etichete conducand astfel la realizarea unei imbricari. Exista desigur si exceptii cand anumite etichete nu au corespondent de sfarsit, caz in care le vom numi etichete vide. Aceste etichete vide prezinta un mod particular de inchidere in XHTML (ex. <eticheta_vida />).
______________________________________________________________________________________________
Curs: HTML
Capitolul 2. CREAREA UNUI DOCUMENT HTML

Un fisier HTML este un fisier ce contine etichete de marcare. Aceste etichete indica browserului cum sa afiseze o pagina web. Un document HTML trebuie sa aiba extensia .htm sau .html. Documentele HTML sunt fisiere text construite din elemente HTML / XHTML. Aceste elementele sunt definite cu ajutorul etichetelor (tag-urilor).
2.1. Structura unui document HTML

Un document HTML trebuie sa contina minim <html></html> pentru ca el sa fie recunoscut si incarcat de navigator. Acesta reprezinta un document vid. Structura unui document HTML este: <html> <head> ... ... <title> ... titlu ... </title> </head> <body> ... ... </body> </html> Exemplul Hello World Cand se invata un nou limbaj de programare, este traditional ca primul program creat sa fie proiectat sa afiseze Hello World. Cu toate ca HTML nu este un limbaj de programare, se poate folosi acest exemplu pentru a afisa in fereastra navigatorului acest mesaj. Exemplul 2.1. <html> <head> <title>Pagina Hello World</title> </head> <body> Hello World ! </body> </html> Iar pe ecran apare: Hello World !
______________________________________________________________________________________________
Curs: HTML
2.1.1. DOCTYPE
<!DOCTYPE> este o declaratie ce indica browser-ului web versiunea limbajului de marcare in care este scrisa pagina web. Declaratia DOCTYPE se refera la un Document Type Definition (DTD). DTD specifica regulile/normele pentru limbajul de marcare, astfel incat browser-ul web sa poata afisa corect continutul. Teoretic, declaratia <!DOCTYPE> ar trebui sa apara prima intr-un document HTML, inainte de eticheta <html>, insa, avand un caracter optional, poate fi omisa. La adresa de mai jos gasiti un tabel cu toate elementele HTML/XHTML, in care, pentru fiecare element in parte este specificat in ce DTD apare: http://w3schools.com/tags/ref_html_dtd.asp Sintaxa este: <!DOCTYPE HTML sir> In declartia de mai sus sir specifica versiunea HTML/XHTML utilizata la crearea documentului. De exemplu, in cazul in care s-a folosit HTML 4.0 poate fi folosita urmatoarea declaratie: Exemplul 2.2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
2.1.1.1. Declaratii DOCTYPE:

HTML 4.01 Strict Acest DTD contine toate elementele si atributele HTML, dar nu include elemente de prezentare sau invechite (precum font). Cadrele (framesets) nu sunt permise. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Transitional Acest DTD contine toate elementele si atributele HTML, inclusiv elmente de prezentare sau invechite (precum font). Cadrele nu sunt permise. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML 4.01 Frameset Acest DTD este egal cu HTML 4.01 Transitional, dar permite utilizarea cadrelor. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
______________________________________________________________________________________________
Curs: HTML
2.1.2. HTML
Prima eticheta dintr-un document HTML care apare imediat dupa <!DOCTYPE> este eticheta <html> care face pereche cu </html> si care marcheaza inceputul si sfarsitul absolut al unui document HTML. <html> </html> Recipientul HTML inglobeaza tot documentul HTML. Daca un document HTML nu contine nimic altceva decat declaratia <html></html>, atunci rezultatul afisat in fereastra navigatorului este o pagina vida. Atributele pe care le poate avea eticheta <html> sunt: Atribut xmlns Functie Atributul xmlns este obligatoriu in XHTML, dar este invalid in HTML! Specifica un nume de spatiu xml pentru un document. Valoare: http://www.w3.org/1999/xhtml Ex.: <html xmlns="http://www.w3.org/1999/xhtml"> ... </html> dir Atribut standard. Specifica directia textului continut. Valori posibile: rtl (right to left) de la dreapta la stanga ltr (left to right) de la stanga la dreapta lang Atribut standard. Specifica limba in care este scris continutul. Valoare: cod limba. Ex.: lang="en", lang="fr", lang="es", etc. xml:lang Atribut standard. Specifica limba in care este scris continutul intr-un document XML (pentru XHTML). Ex: xml:lang="en", xml:lang="fr", xml:lang="es", etc.
2.2. Sectiuni
Elementele HEAD si BODY impart documentul in doua sectiuni: antet si partea principala (corpul) a documentului HTML (ceea ce este vizibil in fereastra navigatorului).
2.2.1. Antetul documentului HTML

Antetul documentului HTML reprezinta sectiunea unde sunt se regasesc setarile globale, fiind continut intre etichete
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web <head> ... </head>
Curs: HTML
In cadrul portiunii de antet se pot folosi exclusiv etichetele: TITLE, META, BASE si LINK, precum si definirea foilor de stil in cascada - <style> si a functiilor limbajului de script folosit - <script>. Antetul are un rol important in cadrul unui document, deoarece el contine informatii legate de titlul si continutul documentului, autorul acestuia, cuvinte cheie, etc. Protocolul HTTP ofera posibilitatea de a descarca doar antetul unui document, aceasta facilitate fiind folosita in special de motoarele de cautare. Atributele pe care le poate avea eticheta <head> sunt: Atribut profile Functie Atribut optional. Specifica o adresa URL la un document ce contine un set de reguli. Regulile pot fi citite de browsere pentru a intelege in mod clar informatiile specificate la atributele etichetei META. Valoare: URL absolut sau relativ. dir Atribut standard. Specifica directia textului continut. Valori posibile: rtl (right to left) de la dreapta la stanga ltr (left to right) de la stanga la dreapta lang Atribut standard. Specifica limba in care este scris continutul. Valoare: cod limba. Ex.: lang="en", lang="fr", lang="es", etc. xml:lang Atribut standard. Specifica limba in care este scris continutul intr-un document XML (pentru XHTML). Ex.: xml:lang="en", xml:lang="fr", xml:lang="es", etc.
2.2.1.1. TITLE
TITLE este utilizat pentru afisarea titlului paginii web, fiind cuprins in sectiunea HEAD. Elementul TITLE este singurul element obligatoriu din sectiunea HEAD si singurul element din sectiunea HEAD al carui continut este vizibil in browser. Sintaxa este: <title> titlul documentului HTML ... </title> Titlul va aparea in bara de titlu a ferestrei navigatorului, nu in fereastra de afisare. El precizeaza de obicei la ce se refera continutul documentului, lungimea sa fiind practic nelimitata. Exemplul 2.3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Titlul documentului HTML</title>
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web </head> <body> Continutul documentului </body> </html>
Curs: HTML
Se observa ca in urma incarcarii fisierului de catre navigator in fereastra de afisare va aparea textul Continutul documentului, iar in bara de titlu va aparea textul "Titlul documentului HTML". In cazul in care intre cele doua tag-uri TITLE se gaseste un sir vid, navigatorul va utiliza ca si titlu implicit numele fisierului HTML. Exemplul 2.4. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> </head> <body> Aceasta este pagina exemplu pentru eticheta TITLE, care contine un sir vid. </body> </html> Atributele pe care le poate avea eticheta <title> sunt: Atribut profile Functie Atribut optional. Specifica o adresa URL la un document ce contine un set de reguli. Regulile pot fi citite de browsere pentru a intelege in mod clar informatiile specificate la atributele etichetei META. Valoare: URL absolut sau relativ. dir Atribut standard. Specifica directia textului continut. Valori posibile: rtl (right to left) de la dreapta la stanga ltr (left to right) de la stanga la dreapta lang Atribut standard. Specifica limba in care este scris continutul. Valoare: cod limba. Ex.: lang="en", lang="fr", lang="es", etc. xml:lang Atribut standard. Specifica limba in care este scris continutul intr-un document XML (pentru XHTML). Ex.: xml:lang="en", xml:lang="fr", xml:lang="es", etc.
______________________________________________________________________________________________
Curs: HTML
2.2.1.2. META
Elementul META se regaseste tot in cadrul sectiunii HEAD, fiind util pentru introducerea unor informatii diverse referitoare la operatiuni de indexare, cuvinte cheie, autor, ultima modificare, etc. Este utila mai ales motoarelor de cautare, care pot clasifica si indexa documentul fara a-l incarca in intregime, ci doar antetul lui. Majoritatea motoarelor de cautare au incorporati spideri sau roboti care citesc aceste etichete. Metadatele nu sunt afisate in pagina, doar sunt analizate de motoare de cautare, navigatoare, sau alte servicii web. Sintaxa este: <meta name="valoarenume" content="valoarecontinut"> sau <meta http-equiv="valoarenume" content="valoarecontinut"> sau <meta name="valoarenume " content="valoarecontinut " scheme="valoareschema"> Exemplul 2.5. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta name="author" content="Nume Autor"> <meta name="description" content ="Exemplu HTML"> <meta name="keywords" content="HTML, HEAD, META"> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <meta http-equiv="refresh" content="60"> <meta name="date" content="2009-01-02" scheme="YYYY-MM-DD"> <meta name="identifier" content="0-2345-6634-6" scheme="ISBN"> <title>Exemplu eticheta META</title> </head> <body> Document care foloseste etichete META </body> </html> Dupa cum se observa, eticheta META nu are corespondent de inchidere, fiind o eticheta vida si suporta urmatoarele atribute: Atribut content Functie Atribut obligatoriu. Valoarea acestui atribut este un text ce reprezinta continutul meta-informatiei. Valoare: text. Ex.: Pentru site-uri in engleza: <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"> Pentru site-uri japoneze: <meta http-equiv="content-type" content="text/html; charset=ISO-2022-JP"> http-equiv Atribut optional. Atributul HTTP-EQUIV adauga HTTP la inceputul informatiilor din atributul CONTENT, fiind folosit ca raspuns furnizat de server navigatorului. Atributul HTTP-EQUIV nu poate fi folosit daca in cadrul etichetei META este definit
______________________________________________________________________________________________
Curs: HTML
atributul NAME. Atributul HTTP-EQUIV se foloseste impreuna cu atributul CONTENT si valoarea sa depinde de valoarea atributului CONTENT. Valori posibile: allow -defineste metode suportate de server; content -encoding -defineste o codificare suplimentara pentru document; content - length -defineste dimensiunea documentului in octeti - bytes; content - type -defineste tipul MIME (Multipurpose Internet Mail Extensions) al documentului; date -defineste cand a fost creat documentul; expires -defineste cand documentul va fi considerat invechit; last-modified -defineste cand a fost modificat ultima data documentul; location -defineste URL-ul absolut al documentului; refresh -defineste un interval de timp dupa care documentul sa se reincarce; valoarea refresh nu trebuie folosita pentru a redirectiona catre alta adresa; set-cookie -defineste o valoare cookie; www-authenticate -defineste normele de autentificare returnate de server; metoda nu este recomandata din motive de securitate; altele name Atribut optional. Atributul NAME este folosit pentru a da un nume informatiilor de la atributul CONTENT Valori posibile: author -defineste autorul documentului; copyright -defineste informati legate de drepturile de autor; description -defineste o descriere a documentului; distribution -defineste nivelul de distributie a documentului (ca de exemplu global); generator -defineste programul folosit pentru a genera documentul; keywords -defineste cuvintle cheie care descriu documentul; progid -defineste id-ul programului folosit pentru a crea documentul rating -defineste rating-ul paginii web resource-type -defineste tipul resurselor web
______________________________________________________________________________________________
Curs: HTML
revisit-after -defineste rata de actualizare estimata pentru resursele web robots -defineste reguli pentru roboti (web crowlers pentru motoarele de cautare) altele (se pot defini propriile nume intr-o schema) scheme Atribut optional. Atributul SCHEME specifica schema de folosit pentru a interpreta valoarea atributului CONTENT Valoarea consta in formatul informatiilor atributului CONTENT sau directioneaza catre un URI care contine informatia necesara. Atribut standard. Specifica directia textului continut. Valori posibile: rtl (right to left) de la dreapta la stanga ltr (left to right) de la stanga la dreapta lang Atribut standard. Specifica limba in care este scris continutul. Valoare: cod limba. Ex.: lang="en", lang="fr", lang="es", etc. xml:lang Atribut standard. Specifica limba in care este scris continutul intr-un document XML (pentru XHTML). Ex.: xml:lang="en", xml:lang="fr", xml:lang="es", etc.
dir
Cateva exemple de utilizare a atributului HTTP-EQUIV in cadrul etichetei META: content-type Specifica setul de caractere pentru continutul paginii. Se recomanda sa se precizeze intotdeauna setul de caractere. Ex.: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
pentru site-urile in engleza:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

pentru site-urile japoneze:
<meta http-equiv="content-type" content="text/html; charset=ISO-2022-JP"> date Specifica data si ora la care a fost creata pagina. Ex.: <meta http-equiv="date" content="Thu, 18 Nov 2008 19:11:42 GMT"> expires Specifica data si ora la care expira pagina.
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web Ex: <meta http-equiv="expires" content="Wed, 9 Nov 2011 12:00:00 GMT"> last-modified Specifica data ultimei modificari. Ex.: <meta http-equiv="last-modified" content="Thu, 18 Nov 2008 19:11:42 GMT"> location Redirectioneaza catre o alta locatie de desinatie. Ex.: <meta http-equiv="location" content="URL=http://www.iim.ro"> refresh Reincarca pagina curenta la intervale de timp specificate (in secunde). Ex.:
Curs: HTML
<meta http-equiv="refresh" content="12"> In acest exemplu eticheta META determina reincarcarea paginii curente la fiecare 12 secunde. <meta http-equiv="refresh" content="3;url=http://www.iim.ro"> In acest exemplu eticheta META determina redirectionarea catre pagina www.iim.ro la fiecare 3 secunde. NU folositi acest mecanism pentru a redirectiona catre alte URL-uri. Nu este de preferat pentru utilizator.
2.2.1.3. BASE
Deseori URL-urile dintr-un document fac legatura la documente aflate pe acelasi server in acelasi director. Alta data, se face legatura la documente aflate pe acelasi server insa in alte directoare de nivel superior sau inferior celui curent. In acest caz este bine sa se specifice URL-ul spre directoarele sau fisierele respective pentru a se evita definirea legaturilor folosind intreaga cale, incepand cu protocolul (http://), continuand cu numele serverului (www.numeserver.domeniu) si terminand cu calea inspre fisierul dorit (/director/altdirector/fisier.html). Pentru stabilirea URL-ului de baza intr-un document se foloseste eticheta BASE, care este de-sine-statatoare si care are urmatoarea sintaxa: <base href="protocol://nume_server/cale_de_cautare/"> BASE necesita un singur atribut HREF unde se specifica URL-ul absolut folosit la definirea legaturilor in cele mai multe cazuri. Multe navigatoare considera URL-ul documentului ca URL de baza, asa ca toate referirile din document sunt facute relativ la URL-ul documentului. Pentru aceste navigatoare nu este necesara specificarea URL-ului de baza, dar este bine totusi ca aceasta sa fie inclusa. Eticheta <base> nu accepta atribute standard. Atributele pe care le poate avea sunt urmatoarele:
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web Atribut href
Curs: HTML
Functie Defineste URL-ul de baza pentru toate URL-urile relative din pagina. Nota: Acest URL de baza trebuie sa fie un URL absolut Valoare: URL absolut.
target
Defineste unde sa se deschida fiecare link din document Valori posibile: _blank - deschide pagina intr-o fereastra noua _self - deschide pagina in aceeasi fereastra ca si documentul curent (valoare implicita) _parent - deschide pagina in fereastra parinte (cea anterioara) _top - deschide pagina in fereastra initiala
Exemplul 2.6. <html> <head> <base href="http://www.iim.ro/cursuri/html/"> <base target="_blank"> </head> <body> <img src="mar.png" width="48" height="48"> - Am specificat numai o cale relativa pentru imagine, dar, pentru ca am declarat URL-ul de baza in sectiunea HEAD, navigatorul va cauta imaginea la adresa "http://www.iim.ro/cursuri/html/mar.png". <br><br> <a href="http://www.iim.ro">Institutul Multimedia</a> - Acest link se deschide intr-o fereastra noua chiar daca nu are specificat atributul target="_blank", aceasta deoarece am setat atributul target ca fiind "_blank" in cadrul elementului BASE. </body> </html>
2.2.1.5. LINK
Eticheta LINK este folosita pentru a crea relatii intre documente. Este o eticheta de sine statatoare si este folosita pentru a gestiona site-uri web mari, cu multe fisiere. Eticheta LINK are urmatoarea sintaxa: <link rel="relatie" type="mimetype" href="protocol://nume_server/cale_de_cautare/"> LINK poate avea mai multe atribute, insa cele mai folosite sunt: REL, TYPE si HREF. Lista atributelor elementului LINK si functionalitatile lor: Atribut href Functie Atribut optional. Specifica URL-ul documentului la care se face legatura. Valori posibile: o cale relativa (de ex. href="http://www.iim.ro/fisier.css") o cale absoluta (de ex. href="stil/stil1.css") media Atribut optional. Specifica pe ce dispozitive va fi afisat documentul catre care se realizeaza legatura. Valori posibile: screen afisare pe ecranul computerului (valoare implicita)
______________________________________________________________________________________________
Curs: HTML
tty pentru teleimprimator tv pentru dispozitive de tip televiziune (rezolutie mica si capacitate de parcurgere / derulare scazuta) projection pentru proiectoare handheld pentru dispozitive portabile (ecran mic, latime de banda limitata) print pentru materialele si documentele vizualizate pe ecran in modul previzualizare printare (print preview) braille pentru dispozitive braille feedback aural pentru sintetizatoare de voce all pentru toate dispozitivele rel Atribut optional. Defineste o relatie intre documentul curent si documentul specificat in HREF. Valori posibile: alternate o versiune alternativa a documentului stylesheet o foaie de stil externa pentru document start primul document dintr-o selectie next urmatorul document intr-o selectie prev documentul precedent intr-o selectie contents un cuprins pentru document un index pentru document glossary un glosar al cuvintelor folosite in document copyright un documetn ce contine informatii cu drepturi de autor chapter un capitol al documentului section o sectiune a documentului subsection o subsectiune a documentului appendix o anexa a documentului help un document de ajutor bookmark un document asemanator type Atribut optional. Specifica tipul MIME al documentului de legatura. Lista completa a tipurilor MIME atribuite de catre IANA (Internet Assigned Number Authority): http://www.iana.org/assignments/media-types/ Atribut standard. Specifica un nume de clasa. Valoare: numele clasei dir Atribut standard. Specifica directia textului continut. Valori posibile: rtl (right to left) de la dreapta la stanga ltr (left to right) de la stanga la dreapta id Atribut standard. Specifica un identificator unic Valoare: numele identificatorului. lang Atribut standard. Specifica limba in care este scris continutul.
class
______________________________________________________________________________________________
Curs: HTML
Valoare: cod limba. Ex.: lang="en", lang="fr", lang="es", etc. style Atribut standard. Specifica stilul inline pentru element. Valoare: definitie stil. title Atribut standard. Specifica extra-informatii. Valoare: text. Atribut standard. Specifica limba in care este scris continutul intr-un document XML (pentru XHTML). Ex.: xml:lang="en", xml:lang="fr", xml:lang="es" etc.
xml:lang
In exemplul urmator eticheta LINK este intrebuintata pentru a specifica foile de stil exterioare documentului: Exemplul 2.7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="stil1.css" rel="stylesheet"> <title>Exemplu de folosire a etichetei LINK</title> </head> <body> In acest document LINK face referinta la un fisier care contine foile de stil in cascada. </body> </html>
2.2.1.6. STYLE
Elementul STYLE se introduce in document in sectiunea HEAD si este folosit pentru specificarea diverselor proprietati de stil pentru documentul HTML. Pentru a face legatura cu o foaie de stil externa, se foloseste eticheta <link>. Sintaxa este: <style> ... definire foi de stil in cascada ... </style> Atributele acestei etichete sunt: Atribut type Functie Atribut obligatoriu. Specifica tipul MIME al foii de stil. Valoare: tip MIME. Ex.: text/css indica un continut standard CSS media Atribut optional. Specifica stiluri pentru diferite tipuri de media. Valori posibile:
______________________________________________________________________________________________
Curs: HTML
screen afisare pe ecranul computerului (valoare implicita) tty pentru teleimprimator tv pentru dispozitive de tip televiziune (rezolutie mica si capacitate de parcurgere / derulare scazuta) projection pentru proiectoare handheld pentru dispozitive portabile (ecran mic, latime de banda limitata) print pentru materialele si documentele vizualizate pe ecran in modul previzualizare printare (print preview) braille pentru dispozitive braille feedback aural pentru sintetizatoare de voce all pentru toate dispozitivele dir Atribut standard. Specifica directia textului continut. Valori posibile: rtl (right to left) de la dreapta la stanga ltr (left to right) de la stanga la dreapta lang Atribut standard. Specifica limba in care este scris continutul. Valoare: cod limba. Ex.: lang="en", lang="fr", lang="es", etc. title Atribut standard. Specifica extra-informatii. Valoare: text. Atribut standard. Specifica limba in care este scris continutul intr-un document XML (pentru XHTML). Ex.: xml:lang="en", xml:lang="fr", xml:lang="es" etc. Exemplul 2.8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> h1 {color:#FF0000;} p {color:#0000FF;} body {background-color:#FFEFD6;} </style> <style type="text/css" media="print"> h1 {color:#000000;} p {color:#000000;} body {background-color:#FFFFFF;} </style> </head> <body>
______________________________________________________________________________________________
xml:lang
Modulul 2 Introducere in Tehnologii Web <h1>Header 1</h1> <p>A paragraph.</p> </body> </html>
Curs: HTML
2.2.1.7. SCRIPT
SCRIPT este plasat in sectiunea HEAD si este folosit pentru a defini un script client-side precum JavaScript. Elementul SCRIPT contine fie declaratii de script, fie trimite catre un fiesier de script extern prin intermediul atributului src. Sintaxa este: <script type="mimetype" language="limbaj_de_script" src="url"> ... cod program ... </script> Eticheta <script> nu accepta atribute standard. Atributele pe care le poate avea sunt: Atribut type Functie Atribut obligatoriu. Specifica tipul MIME al scriptului. Valori pe care le poate lua: text/javascript text/ecmascript application/ecmascript application/javascript text/vbscript Lista completa a tipurilor MIME atribuite de catre IANA (Internet Assigned Number Authority): http://www.iana.org/assignments/media-types/ NOTA: Conform IANA, tipul MIME "type/Javascript" este invechit. Noul standard este "application/javascript", dar, care nu este suportat de Internet Explorer. src Atribut optional. Specifica legatura catre un fisier de script extern. Cand este necesar sa apelam acelasi cod JavaScript pe mai multe pagini, in loc sa scriem scriptul pe fiecare pagina in parte, putem crea un fisier de sine statator care sa contina codul JavaScript, il salvam cu extensia .js si facem legatura cu acesta folosind atributul src. NOTA: Fisierul de script extern nu poate contine eticheta <script>. Valori posibile: - o cale absoluta catre fisierul de script (ex. src="http://www.exemplu.com/fisier.js") - o cale relativa (ex. src="fisier.js) Este bine ca tot continutul din interiorul etichetelor STYLE si SCRIPT sa fie incadrat de etichetele de comentariu () pentru ca navigatoarele incompatibile sa ignore acest continut si sa continue interpretarea paginii fara a genera erori.
______________________________________________________________________________________________
Curs: HTML
2.2.2. Partea principala (corpul) documentului HTML

Structura BODY se utilizeaza dupa structura HEAD; tot ce se gaseste intre etichetele BODY va aparea in fereastra navigatorului. Sintaxa este: <body > ... continut document ... </body>
2.2.2.1. Atribute aditionale

O serie de atribute standard pot fi adaugate la BODY: class, id, dir, lang, style, title, xml:lang. Lista atributelor standard si functiile pe care le indeplinesc: Atribut class Functie Specifica un nume de clasa. Valoare: numele clasei dir Specifica directia textului continut. Valori posibile: rtl (right to left) de la dreapta la stanga ltr (left to right) de la stanga la dreapta id Specifica un identificator unic. Valoare: numele identificatorului lang Specifica limba in care este scris continutul. Valoare: cod limba. Ex.: lang="en", lang="fr", lang="es", etc. style Specifica stilul inline pentru element. Valoare: definitie stil. title xml:lang Specifica extra-informatii. Valoare: text. Specifica limba in care este scris continutul intr-un document XML (pentru XHTML). Ex.: xml:lang="en", xml:lang="fr", xml:lang="es" etc.
2.2.2.2. Antete (headere)

Eticheta antet este un recipient si trebuie sa aiba o eticheta de inceput <h1> si o eticheta de sfarsit </h1>. Exista sase nivele de antet: H1 (cel mai important), H2, H3, H4, H5, H6 (cel mai putin important), pentru fiecare dintre ele fiind utilizate caractere ale aceluiasi font, dar de dimensiuni si grosimi diferite. Fiecare dintre aceste nivele are aspectul sau pe ecranul unui utilizator, neexistand un control direct asupra a cum apare antetul. Pentru a marca un antet se foloseste eticheta:
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web <hx>Antet</hx> unde x reprezinta un numar ce ia valori intre 1 si 6.
Curs: HTML
Atributele standard pe care le poate avea eticheta antet (<h1> - <h6>) sunt: class, dir, id, lang, style, title, xml:lang (functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1). Exemplul 2.9. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu de document HTML cu cele 6 nivele de antet</title> </head> <body> <h1>Antet de nivel 1</h1> <h2>Antet de nivel 2</h2> <h3>Antet de nivel 3</h3> <h4>Antet de nivel 4</h4> <h5>Antet de nivel 5</h5> <h6>Antet de nivel 6</h6> </body> </html> Exemplul 2.9 are ca rezultat in browser:
Antet de nivel 1
Antet de nivel 2
Antet de nivel 3
Antet de nivel 4
Antet de nivel 5
Antet de nivel 6
Nu exista posibilitatea de a include o eticheta de antet pe aceeasi linie cu text normal, chiar daca se inchide eticheta de antet si se continua cu text netransformat. O eticheta de antet se comporta ca si o eticheta <p> paragraf, in sensul ca va crea o linie noua dupa terminarea lui. Linia urmatoare: Exemplul 2.10. <h1>Acesta este un antet</h1> si acesta este un text normal. va avea acelasi rezultat cu: Exemplul 2.11. <h1>Acesta este un antet</h1> <p>si acesta este un text normal.</p> In ambele cazuri navigatorul va afisa antetul si textul normal pe doua linii distincte, antetul aparand mai mare si textul aparand la dimensiune normala. Exemplul 2.12. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web <html> <head> <title>Exemplu de document HTML cu antete si text normal</title> </head> <body> <h1>Acesta este un antet</h1> si acesta este un text normal <br> <h1>Acesta este un antet</h1> <p>si acesta este un text normal.</p> </body> </html> Exemplul 2.12 are ca rezultat in browser:
Curs: HTML
Acesta este un antet

si acesta este un text normal
Acesta este un antet

si acesta este un text normal
Este important de amintit diferenta intre titlu si antet. Cele doua cuvinte sunt adesea interschimbabile in viata de zi cu zi, dar in cazul in care vorbim despre HTML, eticheta <TITLE> are ca efect afisarea unui text in titlul ferestrei navigatorului, iar etichetele <hx>...</hx> au ca efect afisarea in pagina a unui text accentuat. Poate fi doar o eticheta <TITLE> intr-un document si mai multe antete de diferite tipuri (<h1>, <h2>, ... <h6>).
2.2.2.3. Paragrafe
Cea mai buna cale de a imparti textul in paragrafe este folosirea etichetei de paragraf P. Prin plasarea etichetei P la inceputul unui paragraf, navigatorul stie sa separe paragrafele adaugand un spatiu dublu intre ele. Eticheta de sfarsit este optionala, insa este bine de folosit pentru compatibilitatea cu versiuni mai vechi si cu diverse navigatoare. Atributele standard pe care le poate avea eticheta antet (<h1> - <h6>) sunt: class, dir, id, lang, style, title, xml:lang (functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1). Sintaxa este: <p> ... paragraf ... </p> Elementul P creaza in mod automat spatiu inainte si dupa el insusi. Spatiul este aplicat automat de browser, sau poate fi specificat intr-o foaie de stil. Exemplul 2.13. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu de document cu paragrafe</title> </head> <body> <p>Paragraf 1: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
______________________________________________________________________________________________
Curs: HTML
<p>Paragraf 2: Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> <p>Paragraf 3: Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p> </body> </html>
2.2.2.4. Linie noua

Exista cazuri in care se doreste intreruperea unui rand chiar daca paragraful nu este terminat. In acest caz se foloseste eticheta <br>, care are ca efect trecerea textului la o linie noua (rand nou), fara insa a determina inceputul unui nou paragraf. Este o eticheta vida care nu necesita inchidere si are sintaxa: <br> Atributele standard pe care le poate avea eticheta <br> sunt: class, id, style, title (functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1). Exemplul 2.13. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu - trecere la rand nou</title> </head> <body> <p>Hai la petrecerea de Halloween!</p> <p>Te asteptam de la<br>8:00pm, in seara de Halloween. </p> <br> <p>Sa poti un costum cat mai inspaimantator!</p> </body> </html>
2.2.2.5. Desenarea unei linii

O alta metoda de a diviza un document in sectiuni logice este linia orizontala. Linia orizontala se creaza folosind eticheta HR si implica automat ruperea paragrafului inainte si dupa ea. Elementul HR nu necesita eticheta de inchidere si are sintaxa: <hr> Atributelele standard pe care le poate avea eticheta <hr> sunt: class, dir, id, lang, style, title, xml:lang (functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1). Exemplul 2.14. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu - trecere la rand nou</title> </head>
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web <body> <p>Hai la petrecerea de Halloween!</p> <p>Te asteptam de la<br>8:00pm, in seara de Halloween. </p> <br> <p>Sa poti un costum cat mai inspaimantator!</p> </body> </html> Urmatorul exemplu contine doua paragrafe despartite printr-o linie orizontala:
Curs: HTML
Exemplul 2.15. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu de document ce contine o linie orizontala</title> </head> <body> <p>Primul paragraf din pagina.</p> <hr> <p>Al doilea paragraf situat dupa linia orizontala.</p> </body> </html>
2.2.2.6. Citate
Citatele sunt folosite pentru a introduce un text intr-un bloc separat in ecran. Citatele sunt despartite de textul inconjurator, chiar daca sunt in interiorul unui pargraf (se genereaza o linie atat inainte cat si dupa citat). In cazul in care citatele sunt mai scurte se foloseste eticheta <q>...</q>, iar daca textul depaseste cateva propozitii atunci se foloseste eticheta <blockquote>...</blockquote>. Sintaxa este: <blockquote> ... text ... </ blockquote> Atributele standard pe care le poate avea eticheta <blockquote> sunt: class, dir, id, lang, style, title, xml:lang (functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1). Exemplul 2.16. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <body> Exemplu de citat mai mare: <blockquote> Exemplu de citat care se intinde pe mai multe randuri. Exemplu de citat care se intinde pe mai multe randuri. Exemplu de citat care se intinde pe mai multe randuri. Exemplu de citat care se intinde pe mai multe randuri. Exemplu de citat care se intinde pe mai multe randuri. Exemplu de citat care se intinde pe mai multe randuri. </blockquote> Un browser insereaza spatiu inainte si dupa un element BLOCKQUOTE si de asemenea insereaza margini (stanga, dreapta) pentru elemetul BLOCKQUOTE. </body> </html>
______________________________________________________________________________________________
Curs: HTML
Un citat permite si alte formatari in interiorul etichetelor sale, insa, pentru a fi validat ca HTML strict / XHTML, trebuie sa contina numai alte elemente bloc (block-level) (ex. <p>...</p>, <hx>..</hx>, <table>...</table>, etc). De exemplu: Exemplul 2.17. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <body> Exemplu BLOCKQUOTE: <blockquote> <p>Exemplu de citat . Exemplu de citat . Exemplu de citat . Exemplu de citat . Exemplu de citat . </p> </blockquote> </body> </html> Daca se doreste folosirea unui citat mai scurt, in linie, atunci se foloseste eticheta <q> care nu separa citatul de restul textului inconjurator. In acest caz, sintaxa este: <q> ... text ... </q> Atributele standard pe care le poate avea eticheta <q> sunt: class, dir, id, lang, style, title, xml:lang (functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1). Exemplul 2.18. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <body> Exemplu de folosite a unui citat <q>in linie</q> care nu separa citatul de resul textului. </body> </html>
2.2.2.7. Texte preformatate

Metoda prin care textele apar in fereastra navigatorului exact asa cum au fost scrise este folosirea textelor preformatate. Pentru a introduce in documentul HTML astfel de texte preformatate se utilizeaza eticheta recipient PRE. Sintaxa este: <pre> ... text preformatat ... </pre> Iata si cateva dintre avantajele folosirii textelor preformatate in locul paragrafelor combinate cu trecere la rand nou: Permit crearea de liste indentate pe nivele; Permit crearea tabelelor prin alinierea precisa a coloanelor; Permit afisarea de blocuri de cod care altfel ar fi greu de citit de catre utilizator. Textul preformatat poate contine orice elemente de formatare fizica sau logica, legaturi sau imagini, linii orizontale sau intreruperi de linie. Este interzisa folosirea etichetelor de antet si de paragraf in astfel de blocuri de text preformatat. Insa cel mai important lucru este faptul ca permite afisarea textului cu caractere monospatiate, fiind tratate toate caracterele inclusiv cele de genul spatiilor albe sau trecerile la linie noua. Trebuie insa facuta observatia ca in cazul folosirii caracterului TAB cursorul va fi mutat la urmatoarea pozitie care reprezinta un intreg multiplu de 8. Se recomanda insa folosirea spatiilor pentru diverse alinieri, deoarece caracterul TAB este interpretat diferit de navigatoare.
______________________________________________________________________________________________
Curs: HTML
Atributele standard pe care le poate avea eticheta <pre> sunt: class, dir, id, lang, style, title, xml:lang (functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1). Exemplul 2.19. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu de document ce contine text preformatat</title> </head> <body> <pre> Textul din eticheta PRE este afisat printr-un font monospatiat si pastreaza atat spatiile cat si trecerea la linie noua. </pre> </body> </html>
2.2.2.8. Adresa
Unul dintre elementele importante intr-un document HTML este ADDRESS. Este folosit pentru marcarea informatiilor de contact (autorul documentului, adresa si e-mail, telefon) in scopul de a da posibilitatea utilizatorilor sa ia contact cu cel care a creat documentul. Sintaxa este: <address> ... specificare informatii contact ... </address> Eticheta se plaseaza de obicei la inceputul sau la sfarsitul documentului. Este bine de introdus in corpul acestei etichete si data ultimei actualizari a paginii, precum si informatiile de copyright. Atributele standard pe care le poate avea eticheta <address> sunt: class, dir, id, lang, style, title, xml:lang (functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1). Exemplul 2.20. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <body> <address> Designed by: A A<br> <a href="mailto:utilizator@exemplu.ro">Contactati-ne</a><br> Adresa: Str. A, Nr. 1, Disneyland<br> Telefon: 12 34 56 78 90 </address> </body> </html>
2.2.2.9. Entitati caracter si caractere speciale

In cea mai mare parte a documentelor HTML se utilizeaza caracterele standard care fac parte din setul standard ACSII. Exista insa un numar de caractere speciale care nu se regasesc in setul ASCII de baza. Acestea sunt cele folosite in alte limbi europene decat engleza, cateva simboluri matematice, precum si o grupa de alte
______________________________________________________________________________________________
Curs: HTML
caractere. O mare parte din aceste caractere apar in Alfabetul ISO Latin-1. Pentru afisarea lor se utilizeaza entitati caracter speciale (denumite si secvente escape). Formatul unei entitati include caracterul & urmat de numele (simbolic al) caracterului sau de un simbol reprezentat de un numar cuprins intre 0 si 255 (acesta fiind de fapt codul caracterului) si precedat de semnul #. Asadar, entitatile por avea doua forme: entitati text, simbolizate: &cod entitati numerice, simbolizate: &#numar
In tabelul urmator sunt prezentate o serie de caractere speciale si reprezentarea lor: Caracter " & < >

Cod numeric " & < > ¢ £ ¦ § © ® ° ± ² ³ · ¹ ¼ ½ ¾ Æ æ É é × ÷ ¸
Denumire cod " & < > ¢ £ ¦ or brkbar; § © ® ° ± ² ³ · ¹ ¼ ½ ¾ Æ æ É é
× ÷
¸
Descriere apostrof si mai mic decat mai mare decat cent pound bara verticala semn de sectiune copyright marca inregistrata grad plus sau minus puterea 2 puterea 3 punct puterea 1 sfert jumatate trei patrimi AE mare ae mic E acut mare e acut mic Inmultire Impartire virgula spatiu Exemplul 2.21.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <body> A B C D E<br> A     B     C     D     E<br> © Copyright 2008 </body> </html>
______________________________________________________________________________________________
Curs: HTML
2.2.2.10. Comentarii
Exista posibilitatea de a adauga comentarii in codul sursa al paginii HTML. Acestea vor fi plasate intre etichetele . Comentariul nu va aparea in fereastra navigatorului, insa el este accesibil utilizatorului daca acesta vizualizeaza sursa documentului. Sintaxa este:  Eticheta de comentariu nu accepta atribute standard. Exemplul 2.22. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <body> Text care este afisat pe pagina. <!text in comentariu, care nu va fi afisat pe pagina.--> </body> </html> Comentariile pot fi incluse oriunde in documentul HTML. In interiorul unui comentariu pot aparea chiar si etichete HTML, insa acest lucru nu este recomandat deoarece navigatoarele pot interpreta gresit astfel de continut (de obicei caracterul >) si produc ca rezultat interpretarea gresita a restului documentului HTML. In interiorul comentariilor pot fi stocate informatii specifice unui program. In acest caz ele nu vor fi vizibile pentru utilizator, dar vor fi disponibile pentru respectivul program. Se foloseste adaugarea textelor de script si a elementelor de stil in comentarii, pentru a preveni browserele mai vechi, care nu accepta scripturi sau stiluri, sa le afiseze ca text simplu.
2.2.3. Divizarea corpului documentului in bucati

Eticheta <div> este folosita pentru a diviza un document HTML in bucati. Se comporta ca un recipient si are urmatoarea sintaxa: <div> ...definire bloc ... </div> DIV este asemanator cu P, cu diferenta ca DIV nu genereaza pauze in document inainte si dupa locul unde este plasat. Este folosit mai mult pentru facilitatile oferite la lucrul cu foi de stil in cascada. Atributele standard pe care le poate avea eticheta <div> sunt: class, dir, id, lang, style, title, xml:lang (functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1). Exemplul 2.23. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <body> <h3>Acesta este un antet de nivel 3.</h3> <p>Acesta este un paragraf.</p> <div style="color:#00FF00"> <h3>Acesta este un antet de nivel 3 in cadrul etichetei DIV.</h3> <p>acesta este un paragraf in cadrul etichetei DIV.</p> </div> </body> </html>
______________________________________________________________________________________________
Curs: HTML
Eticheta <span> se foloseste asemenator cu <div>, diferenta fiind ca aceasta este un element in linie. Aceasta nu prevede nicio schimbare vizuala de la sine. SPAN ofera o modalitate de a incadra un text sau o parte dintrun document, fie pentru a i se adauga un stil, fie pentru a manipula continutul cu JavaScript de exemplu. Sintaxa este urmatoarea: <span> ... definire continut ... </span> Atributele standard pe care le poate avea eticheta <span> sunt: class, dir, id, lang, style, title, xml:lang (functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1). Exemplul 2.24. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> span.galben { color:yellow; } </style> </head> <body> Lista de cumparaturi: mere <span style="color:red">rosii</span>, mere <span style="color:green">verzi</span> si <span class="galben">lamai</span>. </body> </html>
2.3. Folosirea culorilor in tabele

In HTML exist trei feluri distincte de a defini o culoare. Cea mai simpl metod este aceea de a denumi culorile(n englez). De exemplu black, white, red, green i blue.
2.3.1. HTML sistemul de culori RGB

Acest cod nu este recomandat, deoarece Internet Explorer este singurul browser care accept valorile RGB in HTML. RGB este prescurtarea pentru: Red, Green, Blue. Fiecare dintre aceste culori poate lua orice valoare ntre 0 (fr culoare) i 255 ( 100% acea culoare). Dac folosii un alt browser dect Internet Explorer nu veti obtine nici un rezultat. bgcolor="rgb(255,255,255)" White bgcolor="rgb(255,0,0)" Red bgcolor="rgb(0,255,0)" Green bgcolor="rgb(0,0,255)" Blue
2.3.2. HTML sistemul de culori hexazecimal #ff0000

Sistemul hexazecimal este sistemul standard pentru toate browser-ele web. Este o reprezentare format din 6 caractere de culoare. Primele dou caractere (RR) reprezinta valoarea rosu (red), urmatoarele doua (GG) sunt verde (green), iar ultimele doua (BB) sunt albastru (blue).
______________________________________________________________________________________________
Curs: HTML
Culoare BLACK SILVER GRAY WHITE MAROON RED PURPLE FUCHSIA GREEN LIME OLIVE YELLOW NAVY BLUE TEAL AQUA
Valoarea hexazecimala RGB #000000 #C0C0C0 #808080 #FFFFFF #800000 #FF0000 #800080 #FF00FF #008000 #00FF00 #808000 #FFFF00 #000080 #0000FF #008080 #00FFFF
HTML - Coduri de culoare - Ruperea codului

Integrarea literelor in sistemul hexazecimal este prezentata in continuare, marind astfel posibilitatile de combinare:
Zecimal
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Hexazecimal
0123456789ABCDEF In acest fel posibilitatile cresc iar sistemul poate avea 16 valori. Un exemplu de cod hexazecimal ar fi: bgcolor="#FFFFFF" Litera "F" este valoarea maxima pe care o poate avea sistemul. La intalnirea acestui cod un browser, va afisa alb. Pentru aflarea valorii numerice a acestei culori, avem formula urmatoare: (15 * 16) + (15) = 255 Formula este foarte simpla. Se ia prima valoare a lui "F" sau 15 si se inmulteste cu 16 si se adauga celei de-a doua valori 15. Rezultatul este 255, valoarea maxima pe care o poate avea o culoare primara. bgcolor="#CC7005" CC(RR - Red) (12 * 16) + (12) = 204 70(GG - Green) (7 * 16) + (0) = 112 05(BB - Blue) (0 * 16) + (5) = 5
______________________________________________________________________________________________
Curs: HTML
2.4. Etichete si atribute prezentate in acest capitol

Eticheta <html>...</html> Atribute xmlns dir lang xml:lang profile dir lang xml:lang profile dir lang xml:lang content http-equiv name scheme dir lang xml:lang href target href media rel type class dir id lang style title xml:lang type media dir lang title xml:lang type src class dir id lang style title xml:lang class Functie Inglobeaza intregul document HTML.
<head>...</head>
Antetul documentului HTML.
<title>...</title>
Indica titlul documentului. Se foloseste in interiorul etichetei <head>.
<meta>
Permite introducerea unor informatii diverse.
<base> <link>
Specifica URL-ul de baza.
Folosita pentru a crea relatii intre documente si pentru a specifica diverse proprietati ale foilor de stil in cascada.
<style>
Folosita pentru specificarea proprietatilor de stil.
<script> <body>...</body>
Folosita pentru a defini un script client-side. Corpul documentului HTML.
<h1>...</h1>
Antet de nivel 1.
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web <h2>...</h2> <h3>...</h3> <h4>...</h4> <h5>...</h5> <h6>...</h6> <p>...</p> dir id lang style title xml:lang class dir id lang style title xml:lang class id style title class dir id lang style title xml:lang class dir id lang style title xml:lang class dir id lang style title xml:lang class dir id lang style title xml:lang class dir id lang style title Antet de nivel 2. Antet de nivel 3. Antet de nivel 4. Antet de nivel 5. Antet de nivel 6.
Curs: HTML
Defineste un paragraf. Eticheta de inchidere </p> este optionala.
<br>
Linie noua.
<hr>
Deseneaza o linie orizontala.
<blockquote> ... </blockquote>
Citate, secvente lungi de text intr-un bloc separat, despartite de textul inconjurator.
<q> ... </q>
Citate scurte in linie.
<pre> ... </pre>
Texte preformatate.
<address> ... </address>
Specifica informatiile de contact (e-mail, adresa completa, telefon) pentru un document.
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web xml:lang class dir id lang style title xml:lang class dir id lang style title xml:lang -
Curs: HTML
<div> ... </div>
Defineste o diviziune in document.
<span> ... </span>
Folosit pentru a marca un continut in linie.

Comentariu.
______________________________________________________________________________________________
Curs: HTML
Capitolul 3. FORMATAREA TEXTULUI

Odata ce s-a creat un document, cea mai mare parte a muncii este facuta. Textul scris este despartit precis in paragrafe, antetele sunt la locul lor, si diferite elemente ca de exemplu titlul si informatiile despre autor au fost adaugate. Etichetele pentru paragrafe sau antete afecteaza intregul text din interiorul lor, schimband fontul, sau schimband spatierea deasupra sau dedesubtul liniei. HTML ofera posibilitatea alegerii fontului si a aplicarii mai multor stiluri de formatare a textului in mod particular, doar pentru o anumita sectiune a unui paragraf. In acest sens exista etichete care schimba aspectul unui set de caractere dintr-un text, acestea fiind grupate in doua categorii: etichete utilizate pentru formatare logica si cele utilizate pentru formatare fizica.
3.1. Formatarea logica

Una dintre ideile care au stat la baza HTML este ca documentele sa fie aranjate intr-o maniera logica si structurata. Aceasta da utilizatorilor mai multa flexibilitate decat este posibil. Astfel, s-au creat in HTML o serie de formatari in acord cu scopul pe care ele il deservesc. Avantajul este ca documentele nu sunt limitate la o anumita platforma. Cu toate ca ele vor arata altfel pe diferite platforme, continutul si contextul vor ramane la fel. Eticheta <cite> ... </cite> <code> ... </code> <em> ... </em> <kbd> ... </kbd> <samp> ... </samp> <strong> ... </strong> <var> ... </var> <dfn> ... </dfn> Descriere Este folosita pentru a specifica citate. Poate fi de asemenea folosit pentru a indica titluri de carti sau articole. Textul este afisat inclinat. Este folosita pentru a marca fragmente scrise intr-un limbaj de programare, de marcaj, etc. Textul este afisat cu font de dimensiune fixa. Este folosita pentru evidentierea unei sectiuni de text care este considerata semnificativa. Textul este in general afisat inclinat. Este folosita pentru a marca un text care trebuie introdus de utilizator (de la tastatura). Textul este afisat cu font de dimensiune fixa. Este folosita pentru a indica valorile afisate de un program, script, etc. Textul este in general afisat cu font monospatiat. Este folosita pentru a evidentia o sectiune importanta dintr-un text. Textul este in general afisat ingrosat. Este folosita pentru a marca variabile sau parametri ai unor programe. Textul este in general afisat inclinat. Este folosita pentru a marca un termen ce urmeaza sa fie definit. Textul este in general afisat inclinat.
Atributele standard pe care le poate avea oricare eticheta de formatare logica de mai sus sunt: class, dir, id, lang, style, title, xml:lang (functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1). Exemplul 3.1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu - formatare logica</title> </head> <body>
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web <p>Acest paragraf contine:<br> Text simplu fara niciun fel de formatare.<br> <cite>Un citat, scris inclinat</cite>.<br> <strong>Un text important, scris ingrosat.</strong><br> <samp>Un text scris monospatiat.</samp><br> </p> </body> </html> Pe ecran, va aparea afisat in modul urmator: Acest paragraf contine: Text simplu fara nici un fel de formatare. Un citat, scris inclinat. Un text important, scris ingrosat.
Un text scris monospatiat.
Curs: HTML
In cazul in care un text dintr-o astfel de eticheta va fi afisat normal, inseamna ca navigatorul nu suporta acel stil logic de formatare. Aceste elemente nu sunt depreciate, dar este posibil sa se obtina efecte mai bune cu CSS.
3.2. Formatarea fizica

Este important ca aspectul unui document HTML sa ramana acelasi pentru utilizator (n.a. cel care vizualizeaza pagina web), indiferent de navigatorul pe care il foloseste. In acest sens, pe langa formatarea logica a elementelor este posibila si formatarea fizica care da un control sporit asupra aspectului textului formatat, ea permitand creatorului paginii web (a documentului HTML) sa preia controlul asupra mai multor detalii: stilul de caractere, dimensiunea si culoarea lor. Elementele de formatare fizica sunt urmatoarele: Eticheta <b> ... </b> <i> ... </i> <tt> ... </tt> <big> ... </big> <small> ... </small> <sub> ... </sub> Descriere Elementul este folosit pentru a afisa un text ingrosat (aldin). Elementul este folosit pentru a afisa un text inclinat. Elementul este folosit pentru a afisa un text cu font monospatiat. Elementul este folosit pentru a afisa un text cu un font de o dimensiune mai mare. Elementul este folosit pentru a afisa un text cu un font de o dimensiune mai mica. Elementul este folosit pentru a muta un text mai jos decat textul inconjurator si daca este posibil afisarea lui cu un font de o dimensiune mai mica. Elementul este folosit pentru a muta un text mai sus decat textul inconjurator si daca este posibil afisarea lui cu un font de o dimensiune mai mica.
<sup> ... </sup>
<strike> ... </strike> In cazul in care se alege un stil de formatare fizica si navigatorul nu suporta acest stil, el va fi substituit cu un altul sau va fi ignorat. Toate etichetele prezentate mai sus se comporta ca un recipient si necesita eticheta de sfarsit. De asemenea ele pot fi si imbricate, un element fiind continut in intregime in alt element.
______________________________________________________________________________________________
Curs: HTML
Atributele standard pe care le poate avea oricare eticheta de formatare fizica sunt: class, dir, id, lang, style, title, xml:lang (functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1). Exemplul 3.2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu - formatare fizica</title> </head> <body> <b>Text scris ingrosat.</b><br> <i>Text scris inclinat.</i><br> <tt>Text scris monospatiat.</tt><br> Text de o dimensiune mai <big>mare</big> si text de o dimensiune mai <small>mica</small>.<br> Text normal si <sup>exponent</sup>, apoi text normal si <sub>indice</sub>. </body> </html> Pe ecran, va aparea afisat in modul urmator: Text scris ingrosat. Text scris inclinat.
Text scris monospatiat.
Text de o dimensiune mai mare si text de o dimensiune mai mica. Text normal si exponent, apoi text normal si indice.
______________________________________________________________________________________________
Curs: HTML

Eticheta <cite> ... </cite> <code> ... </code> <em> ... </em> <kbd> ... </kbd> <samp> ... </samp> <strong> ... </strong> <var> ... </var> <dfn> ... </dfn> class dir id lang style title xml:lang Atribute Functie Este folosita pentru a specifica citate. Este folosita pentru a marca fragmente scrise intr-un limbaj de programare, de marcaj, etc. Este folosita pentru a evidentia un text. Este folosita pentru a marca un text de la tastatura. Este folosita pentru a indica valorile afisate de un program, script, etc. Este folosita pentru a evidentia mai mult un text. Este folosita pentru a marca variabile sau parametri ai unor programe. Este folosita pentru a marca un termen ce urmeaza sa fie definit. Este folosita pentru a afisa un text ingrosat. Este folosita pentru a afisa un text inclinat. Este folosita pentru a afisa un text cu font monospatiat. Este folosita pentru a afisa un text cu un font de o dimensiune mai mare. Este folosia pentru a afisa un text cu un font de o dimensiune mai mica. Este folosita pentru a muta un text mai jos decat textul inconjurator si daca este posibil afisarea lui cu un font de o dimensiune mai mica. Este folosita pentru a muta un text mai sus decat textul inconjurator si daca este posibil afisarea lui cu un font de o dimensiune mai mica.
<b> ... </b> <i> ... </i> <tt> ... </tt> <big> ... </big> <small> ... </small> <sub> ... </sub>
<sup> ... </sup>
______________________________________________________________________________________________
Curs: HTML
Capitolul 4. LISTE
Adeseori, pentru crearea paginilor web este necesara folosirea unor liste pentru organizarea informatiilor sub forma de termeni, obiecte, elemente sau definitii. HTML dispune de etichete care indenteaza textul automat, care adauga numere, caractere sau simboluri in fata fiecarui element din lista, suportand mai multe tipuri de liste, si anume: - liste neordonate: sunt liste indentate care au un simbol in fata fiecarui element - liste ordonate (numerotate): sunt liste indentate care au numere sau caractere in fata fiecarui element - liste de definitii (de termeni): sunt liste indentate fara numere sau simboluri in fata fiecarui element
4.1. Liste neordonate

4.1.1. Definire si utilizare
Listele neordonate reprezinta o lista de obiecte care nu defineste o structura specifica si se definesc utilizand eticheta <ul>... definire lista neordonata... </ul>. Fiecare element al listei va fi definit folosind <li>... element ...</li> si el va fi precedat de un simbol numit bullet. Eticheta de inchidere </li> poate fi omisa. O lista neordonata se defineste astfel: <ul> <li>Element 1</li> <li>Element 2</li> .... <li>Element n</li> </ul> Exemplul 4.1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu de document html care contine o lista neordonata</title> </head> <body> <b>Culorile curcubeului sunt:</b> <br> <ul> <li>Rosu</li> <li>Orange</li> <li>Galben</li> <li>Verde</li> <li>Albastru</li> <li>Indigo</li> <li>Violet</li> </ul> </body> </html> Rezultat in browser: Culorile curcubeului sunt:
______________________________________________________________________________________________
Curs: HTML
Rosu Orange Galben Verde Albastru Indigo Violet
Un element al listei poate sa contina absolut orice: text simplu, paragraf, imagini, chiar si alte liste. Navigatorul suporta si indenteaza automat sublistele. De asemenea, pentru fiecare sublista indentata va fi atribuit alt simbol elementelor sublistei, acesta fiind diferit de celelalte. Exemplul 4.2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu de document HTML care contine liste neordonate imbricate</title> </head> <body> <b>CUPRINS</b> <ul> <li>Introducere</li> <li>Capitolul 1 <ul> <li> Sectiunea 1.1</li> <li> Sectiunea 1.2</li> </ul> </li> <li>Capitolul 2 <ul> <li> Sectiunea 2.1 <ul> <li> Subsectiunea 2.1.1</li> <li> Subsectiunea 2.1.2</li> </ul> </li> <li> Sectiunea 2.2</li> </ul> </li> <li>Capitolul 3</li> <li>Capitolul 4 <ul> <li> Sectiunea 4.1</li> </ul> </li> </ul> </body> </html> Rezultat in browser:
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web CUPRINS

Curs: HTML
Introducere Capitolul 1 o Sectiunea 1.1 o Sectiunea 1.2 Capitolul 2 o Sectiunea 2.1 Subsectiunea 2.1.1 Subsectiunea 2.1.2 o Sectiunea 2.2 Capitolul 3 Capitolul 4 o Sectiunea 4.1
Atributele standard pe care le pot avea etichetele <ul> si <li> sunt: class, dir, id, lang, style, title, xml:lang (functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1).
4.2. Liste ordonate

O lista ordonata, denumita si lista numerotata, este folosita pentru a crea liste de elemente numerotate. Navigatorul observa eticheta pentru lista ordonata si numeroteaza secvential fiecare element din lista folosind numere (1, 2, 3, s.a.m.d.). <ol> <li> Element numerotat 1</li> <li> Element numerotat 2</li> .... <li> Element numerotat n</li> </ol> Aceasta eticheta prevede la inceput si la sfarsit o linie goala pentru a izola lista de textul inconjurator, nefiind necesar ca lista sa fie precedata sau urmata de o eticheta de tip paragraf <p>. In exemplul urmator avem definita o lista ordonata compusa din 7 elemente. Exemplul 4.3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu de document html care contine o lista neordonata</title> </head> <body> <b>Culorile curcubeului sunt:</b> <br> <ol> <li>Rosu</li> <li>Orange</li> <li>Galben</li>
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web <li>Verde</li> <li>Albastru</li> <li>Indigo</li> <li>Violet</li> </ol> </body> </html> In fereastra de afisare a navigatorului vom observa: Culorile curcubeului sunt:
1. 2. 3. 4. 5. 6. 7.
Curs: HTML
Rosu Orange Galben Verde Albastru Indigo Violet
Atributele standard pe care le poate avea eticheta <ol> sunt: class, dir, id, lang, style, title, xml:lang (functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1).
4.3. Liste de definitii

Listele de definitii, denumite de asemenea si liste de termeni, reprezinta un tip special de liste in HTML. Ele au un format ca si al dictionarului, cu termen de identificare si paragraful de definitie indentat. Acest format este folositor in special acolo unde avem elemente cu o descriere complexa, ca de exemplu cataloage de produse sau departamente ale unei companii. Acest tip de lista se defineste prin eticheta <DL> care are in interiorul sau eticheta <DT> pentru definirea termenului si eticheta <DD> pentru definitia propriu-zisa. Ambele etichete de definire sunt etichete deschise, ceea ce inseamna ca nu necesita o eticheta de inchidere corespunzatoare la sfarsit. Eticheta <DL> prevede la inceput si la sfarsit o linie goala pentru a izola lista de definitii de textul inconjurator. Elementele listei sunt aranjate astfel incat fiecarui termen i se asociaza definitia corespunzatoare. Eticheta <DT> ar trebui sa incapa intr-o singura linie, dar poate trece pe urmatoarea linie fara indentare. Eticheta <DD> arata ca si un paragraf indentat continuu, poate avea orice lungime, iar in interiorul lui poate fi plasata orice structura. <dl> <dt>Termen 1</dt> <dd> Definitie 1</dd> <dt>Termen 2</dt> <dd> Definitie 2</dd> .... <dt>Termen n</dt> <dd> Definitie n</dd> </dl>
______________________________________________________________________________________________
Curs: HTML
Consideram urmatorul exemplu in care avem definiti cativa termeni informatici esentiali prin intermediul unei liste de definitii: Exemplul 4.4. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu de document html care contine lista de definitii</title> </head> <body> <b>Dictionar explicativ de calculatoare</b> <dl> <dt><b>bit</b></dt> <dd>provine din prescurtarea denumirii englezesti <i>"binary digit"</i>. reprezinta elementul generic al unei multimi formata din doua elemente.</dd> <dt><b>caption</b></dt> <dd>text descriptiv care este asociat unei figuri. de obicei, pentru a se distinge se utilizeaza un alt tip de caractere.</dd> <dt><b>file</b></dt> <dd>fisier: o colectie organizata de inregistrari, dispusa pe unul sau mai multe suporturi externe, memorata sub un singur nume, fiind compusa din una sau mai multe inregistrari, continand informatii legate intre ele. inregistrarile pot fi sau nu secventiale.</dd> <dt><b>increment</b></dt> <dd>incrementare: adunarea unei constante, de obicei 1, la valoarea unei variabile (registru, locatie de memorie).</dd> </dl> </body> </html> In fereastra navigatorului se va afisa: Dictionar explicativ de calculatoare bit provine din prescurtarea denumirii englezesti binary digit. Reprezinta elementul generic al unei multimi formata din doua elemente. caption text descriptiv care este asociat unei figuri. De obicei, pentru a se distinge se utilizeaza un alt tip de caractere. file fisier: o colectie organizata de inregistrari, dispusa pe unul sau mai multe suporturi externe, memorata sub un singur nume, fiind compusa din una sau mai multe inregistrari, continand informatii legate intre ele. Inregistrarile pot fi sau nu secventiale. increment incrementare: adunarea unei constante, de obicei 1, la valoarea unei variabile (registru, locatie de memorie). Atributele standard pe care le pot avea etichetele <dl>, <dt>, <dd> sunt: class, dir, id, lang, style, title, xml:lang (functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1).
______________________________________________________________________________________________
Curs: HTML

Tag <ul> ... </ul> <ol> ... </ol> <li> ...</li> <dl> ... </dl> <dt>...</dt> <dd>...</dd> Atribute class dir id lang style title xml:lang Functie Defineste o lista neordonata. Defineste o lista ordonata (numerotata). Element din lista (ordonata / numerotata). Folosit cu etichetele: <ol> sau <ul>. Defineste o lista de definitii. Defineste un termen, ca parte integranta a unei liste de definitii Corespunde definitiei la definirea unui termen, ca parte integranta a unei liste de definitii.
______________________________________________________________________________________________
Curs: HTML
Capitolul 5. TABELE
Tabelele reprezinta unul din cele mai importante instrumente utilizate pentru formatarea paginilor web. Ele reprezinta o alternativa serioasa la alte moduri de vizualizare tabelara sau structurata a datelor, cum ar fi eticheta <pre> sau etichetele folosite pentru definirea listelor, insa dezavantajul este aceala ca etichetele unui tabel sunt mai complicate (si in acelasi timp mai complexe) si mai greu de folosit.
5.1. Definire si utilizare

Definirea unui tabel se realizeaza cu ajutorul etichetei: <table> ... definire tabel ... </table> Acesta se comporta ca un recipient pentru etichetele: <caption> <tr> <td> <th> - specifica titlul tabelului (este o eticheta optionala) - defineste liniile tabelului (table row) - introduce celule in liniile tabelului (table data) - descrie celulele cap de tabel, fiind o eticheta optionala (table header)
care descriu in amanunt un tabel. Eticheta TABLE este obligatoriu sa aiba eticheta de inchidere, pe cand la elementele TR si TD aceasta nu este obligatorie, definirea unui nou element presupunand automat inchiderea precedentului. Formatul general al unui tabel este urmatorul: <table> <caption>Titlul tabelului</caption> <tr> <td>linia 1 celula 1</td> <td>linia 1 celula 2</td> ... <td>linia 1 celula n</td> </tr> <tr> <td>linia 2 celula 1</td> <td>linia 2 celula 2</td> ... <td>linia 2 celula n</td> </tr> ... alte linii ... <tr> <td>linia n celula 1</td> <td>linia n celula 2</td> ... <td>linia n celula n</td> </tr> </table> Fiecare dintre etichetele ce definesc un tabel poate fi utilizata impreuna cu anumite atribute care modifica formatarea implicita a textului din celule. De retinut faptul ca atributele utilizate in cadrul etichetelor <th> si <td> au precedenta mai mare decat cele din eticheta <tr>.
______________________________________________________________________________________________
Curs: HTML
In cadrul unei celule pot fi incluse orice alte elemente HTML (imagini, liste, legaturi, componente de formulare, chiar si alte tabele). Iata un exemplu simplu de tabel care are un titlu si este definit pe 3 randuri si 4 coloane: Exemplul 5.1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu de document HTML care contine un tabel</title> </head> <body> <table border="1"> <caption>Primul meu tabel</caption> <tr> <td>linia 1 celula 1</td> <td>linia 1 celula 2</td> <td>linia 1 celula 3</td> <td>linia 1 celula 4</td> </tr> <tr> <td>linia 2 celula 1</td> <td>linia 2 celula 2</td> <td>linia 2 celula 3</td> <td>linia 2 celula 4</td> </tr> <tr> <td>linia 3 celula 1</td> <td>linia 3 celula 2</td> <td>linia 3 celula 3</td> <td>linia 3 celula 4</td> </tr> </table> </body> </html> In urma incarcarii documentului HTML in browser se va obtine: Primul meu tabel linia 1 celula 1 linia 1 celula 2 linia 1 celula 3 linia 1 celula 4 linia 2 celula 1 linia 2 celula 2 linia 2 celula 3 linia 2 celula 4 linia 3 celula 1 linia 3 celula 2 linia 3 celula 3 linia 3 celula 4 Eticheta <table> are urmatoarele atribute: Atribut border Functie Atribut optional. Defineste grosimea chenarului din jurul tabelului. Atributul BORDER aplica o bordura fiecarei celule si in jurul tabelului. Daca valoarea atributului BORDER este schimbata (cu o valoare diferita de 0), atunci numai grosimea bordurii exterioare va fi schimbata, iar bordura din interiorul
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web tabelului ramane 1 pixel. Valoare: pixeli. Ex.: <table border="1"> cellpadding Atribut optional. Defineste spatiul dintre peretele celulei si continutul celulei. Valoare: pixeli. Ex.: <table cellpadding="5"> cellspacing Atribut optional. Defineste spatiul dintre celulele tabelului. Valoare: pixeli. Ex.: <table cellspacing="3">
Curs: HTML
summary
Atribut optional. Specifica un sumar al continutului tabelului. Nu are rezultat vizibil in browser. Valoare: text. Ex.: <table summary="Orar">
width
Atribut optional. Specifica latimea unui tabel. Valori posibile: pixeli valoare procentuala in raport cu elementul care il contine (x%) Ex.: <table width="100"> sau <table width="20%">, etc.
class dir id lang style title xml:lang
Atribute standard. Functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1
______________________________________________________________________________________________
Curs: HTML
5.2. Titlul tabelului

Printre elementele care definesc un tabel se afla si titlul, care contine informatii descriptive despre continutul tabelului, usurand identificarea lui. Are caracter optional si va aparea deasupra sau dedesubtul tabelului: ... <table> <caption> ... titlul tabelului ... </caption> ... definire continut tabel ... </table> ... Eticheta CAPTION trebuie sa apara imediat dupa eticheta de definire a tabelului, <table> si inainte de orice definire a unui rand sau celula a tabelului. Se poate specifica numai un titlu pentru un tabel. Acesta va fi afisat centrat deasupra tabelului. Eticheta <caption> are urmatoarele atribute standard: class, dir, id, lang, style, title, xml:lang (functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1).
5.3. Latimea unui tabel

Atributul WIDTH poate fi folosit si pentru a specifica latimea unui tabel (in carul etichetei <table>). Valorile pe care le poate lua acest atribut sunt specificate fie in pixeli, fie procentual. De multe ori valoarea procentuala este folosita pentru a asigura compatibilitatea cu diverse rezolutii ale ecranului, insa daca este nevoie de o latime fixa pentru afisarea diverselor continuturi atunci se foloseste valoarea exprimata in pixeli. Diferite atribute ale etichetelor HTML permit specificarea latimii acestora. De multe ori apare valoarea ca numar fara sufix, ceea ce inseamna ca ea este exprimata in pixeli. Lista sufixelor acceptate pentru definirea latimii in etichete HTML este urmatoarea: Sufix px, [nimic] Pt Pi In Cm Mm Em % Valoare Pixeli Puncte Picas Inci Centimetri Millimetri Unitati em procent din latimea ecranului Exemplul 5.2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu de tabel cu latime fixa / variabila</title> </head> <body>
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web <table summary="tabel cu latime fixa" border="1" width="300"> <tr> <th>Luna</th> <th>Zile</th> </tr> <tr> <td>Ianuarie</td> <td>31</td> </tr> <tr> <td>Februarie</td> <td>28</td> </tr> </table> <br> <table summary="tabel cu latime variabila" border="1" width="50%"> <tr> <th>Luna</th> <th>Zile</th> </tr> <tr> <td>Ianuarie</td> <td>31</td> </tr> <tr> <td>Februarie</td> <td>28</td> </tr> </table> </body> </html>
Curs: HTML
5.4. Liniile / randurile unui tabel

Eticheta <tr> defineste o linie intr-un tabel HTML. Aceasta contine unul sau mai multe elemente <th> sau <td>. Atributele pe care le poate avea eticheta <tr> sunt: Atribut align Functie Atribut optional. Specifica tipul de aliniere orizontala a a continutului. Valori posibile: left aliniaza continutul la stanga (valoare implicita a pentru elementul TD) right aliniaza continutul la dreapta center aliniaza continutul centrat (valoare implicita pentru elementul TH) justify aliniaza textul stanga-dreapta (marginile stanga dreapta sunt uniforme) valign Atribut optional. Specifica tipul de aliniere verticala a continutului. Valori posibile:
______________________________________________________________________________________________
Curs: HTML
top aliniere in partea de sus middle aliniere la mijloc bottom aliniere in partea de jos baseline seteaza randul astfel incat toate datele au aceeasi linie de baza (linia imaginara pe care stau catacterele). De obicei are acelasi efect ca BOTTOM, dar cand dimensiunile fonturilor difera, se recomanda folosirea BASELINE.
valign="bottom"
valign="baseline"
Exemplul 5.3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu de diferite tipuri de aliniere in tabel</title> </head> <body> <table border="1" width="300"> <tr align="left" valign="middle"> <td>randul 1</td> <td>aliniere la stanga pe orizontala si la mijloc pe verticala</td> <td>randul 1 celula 3</td> </tr> <tr align="center" valign="baseline"> <td>al doilea rand</td> <td>randul 2 celula 2</td> <td>aliniere la centru pe orizontala si aliniere la baza pe verticala</td> </tr> </table> </body> </html>
______________________________________________________________________________________________
Curs: HTML
5.5. Datele / celulele unui tabel

Un tabel HTML are doua tipuri de celule: celule antet cele care contin informatiile antet (create cu elementul TH) celule standard cele care contin date (create cu elementul TD) O celula antet a unui tabel este definita folosind perechea de etichete <th> ... </th>. Continutul unei astfel de celule este automat centrat si scris pronuntat, insa aceasta formatare poate fi modificata. Eticheta de inchidere este optionala. Intr-un tabel obisnuit antetul este cuprins de obicei in prima linie/coloana, astfel ca intr-un tabel de n linii si m coloane avem: <table> <tr> <th>Antet 1</th> <th> Antet 2</th> ... <th> Antet m</th> </tr> <tr> ... linia 1 </tr> <tr> ... linia 2 </tr> ... <tr> ... linia n </tr> </table> Celulele unui tabel se definesc utilizand perechi de etichete <td> ... </td> in cadrul recipientului TABLE. Continutul din celule este aliniat automat la stanga si este afisat cu caractere obisnuite. Orice formatare speciala se realizeaza incluzand atributele / etichetele in in cadrul etichetei TD. <table> <tr> <th>Antet 1</th> <th> Antet 2</th> ... <th> Antet m</th> </tr> <tr> <td>Celula 1</td> <td>Celula 2</td> ... <td>Celula m</td> </tr> ... <tr> <td>Celula 1</td> <td>Celula 2</td> ... <td>Celula m</td> </tr> </table>
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web Etichetele <td> si <th> au urmatoarele atribute: Atribut abbr Functie Atribut optional. Specifica o versiune prescurtata a continutului unei celule. Nu are efect vizibil in browserele obisnuite. Valoare: text. align Atribut optional. Specifica tipul de aliniere orizontala a a continutului. Valori posibile: left aliniaza continutul la stanga (valoare implicita a pentru elementul TD) right aliniaza continutul la dreapta center aliniaza continutul centrat (valoare implicita pentru elementul TH) justify aliniaza textul stanga-dreapta (marginile stanga dreapta sunt uniforme) colspan Atribut optional. Specifica numarul de coloane peste care sa se extinda celula (numar mai mare ca 0). Valoarea 0, care specifica faptul ca celula se intinde pana la ultima coloana din grup (COLGROUP), nu este suportata de browserele importante. Valoare: numar. headers Atribut optional. Specifica antetul din tabel care este asociat celulei. Nu are efect vizibil in browserele obisnuite. Valoare: id-ul uneia sau mai multor celule antet cu care este asociat (pentru a specifica mai multe id-uri acestea se separa prin spatiu). Ex.: <tr> <th id="nume">Nume</th> </tr> <tr> <td headers="nume">Dan</td> </tr> Atribut optional. Specifica numarul de randuri / linii peste care sa se extinda celula (numar mai mare ca 0). Valoarea 0, care specifica faptul ca celula se intinde pana la ultima linie dintr-o sectiune (THEAD, TBODY, TFOOT), este suportata numai de browserul Opera. Valoare: numar. Atribut optional. Defineste un mod de a asocia celulele antet si celulele de date dintrun tabel. Atributul SCOPE specifica faptul ca o celula este antet pentru o coloana, sau pentru o linie, sau pentru un grup de coloane sau de linii. Nu are efect vizibil in browserele importante.
Curs: HTML
Se aplica pe <td> <th> da da
da
da
da
da
da
nu
rowspan
da
da
scope
da
da
______________________________________________________________________________________________
Curs: HTML
Valori posibile: col specifica faptul ca celula este antet pentru o coloana row specifica faptul ca celula este antet pentru o linie colgroup specifica faptul ca celula este antet pentru un grup de coloane rowgroup specifica faptul ca celula este antet pentru un grup de linii valign Atribut optional. Specifica tipul de aliniere verticala a continutului. Valori posibile: top aliniere in partea de sus middle aliniere la mijloc bottom aliniere in partea de jos baseline seteaza randul astfel incat toate datele au aceeasi linie de baza (linia imaginara pe care stau catacterele). De obicei are acelasi efect ca BOTTOM, dar cand dimensiunile fonturilor difera, se recomanda folosirea BASELINE. class dir id lang style title xml:lang Atribute standard. Functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1 da da da da
Exemplul 5.4. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> Exemplu - TH, TD</title> </head> <body> <table border="1" summary="tabel cu: 4 elemente TH antet de colana, un element TD antet de linie si asocieri intre celule si antetele TH"> <tr> <th id="nume" scope="col" abbr="antet_coloana">Nume</td> <th id="email" scope="col" >Email</td> <th id="tel" scope="col" >Telefon</td> <th id="adr" scope="col" >Adresa</td> </tr> <tr> <td headers="nume" scope="row" abbr="antet_rand">Anca</td> <td headers="email">cineva@exemplu.ro</td> <td headers="tel">+456789123</td> <td headers="adr">Str. A, Nr. 1, Deva</td> </tr> </table> </body> </html>
______________________________________________________________________________________________
Curs: HTML
5.6. Alinierea datelor in celule

Alinierea in tabel se poate realiza atat pe orizontala cat si pe verticala prin intermediul atributelor ALIGN si respectiv VALIGN din cadrul etichetelor TR, TD, TH. Valorile pe care le pot lua aceste atribute sunt: align valign left right center justify top middle bottom baseline Exemplul 5.5. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Alinierea in tabel</title> </head> <body> <table border="1" width="100"> <tr align="right"> <td>Produs</td> <td>Pret</td> </tr> <tr> <td>Caiet tip I sau II</td> <td align="right">5</td> </tr> <tr> <td>Stilou</td> <td align="right">20</td> </tr> <tr> <td>Volum de poezii</td> <td align="right" valign="top">50</td> </tr> </table> </body> </html>
5.7. Spatierea celulelor

Prin folosirea atributului CELLSPACING se poate stabili spatiul dintre celulele tabelului. Valoarea se exprima in pixeli, implicit fiind considerata egala cu 1.
______________________________________________________________________________________________
Curs: HTML
5.8. Spatierea datelor in celule

Asemanator spatierii intre celule se poate stabili si distanta dintre marginea celulei si informatia continuta in celula respectiva. Acest lucru se realizeaza cu atributul CELLPADDING care poate lua valori exprimate in pixeli si care implicit este stabilit la valoarea 1. Exemplul 5.6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu care contine trei tabele cu spatieri diferite</title> </head> <body> <p>Tabel cu spatiu intre celule stabilit la valoarea 10</p> <table border="1" cellspacing="10"> <tr> <td>celula 1.1</td> <td>celula 1.2</td> <td>celula 1.3</td> </tr> <tr> <td>celula 2.1</td> <td>celula 2.2</td> <td>celula 2.3</td> </tr> </table> <p>Tabel cu spatiu in interiorul celulelor stabilit la valoarea 10</p> <table border="1" cellpadding="10"> <tr> <td>celula 1.1</td> <td>celula 1.2</td> <td>celula 1.3</td> </tr> <tr> <td>celula 2.1</td> <td>celula 2.2</td> <td>celula 2.3</td> </tr> </table> <p>Tabel cu spatiu intre celule stabilit la valoarea 10 si spatiul intre celule la valoarea 10</p> <table border="1" cellspacing="10" cellpadding="10"> <tr> <td>celula 1.1</td> <td>celula 1.2</td> <td>celula 1.3</td> </tr> <tr> <td>celula 2.1</td>
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web <td>celula 2.2</td> <td>celula 2.3</td> </tr> </table> </body> </html> In fereastra navigatorului avem urmatorul rezultat: Tabel cu spatiu intre celule stabilit la valoarea 10 celula 1.1 Celula 1.2 celula 1.3 celula 2.1 Celula 2.2 celula 2.3 Tabel cu spatiu in interiorul celulelor stabilit la valoarea 10 celula 1.1 celula 2.1 celula 1.2 celula 2.2 celula 1.3 celula 2.3
Curs: HTML
Tabel cu spatiu intre celule stabilit la valoarea 10 si spatiul intre celule la valoarea 10 celula 1.1 celula 2.1 celula 1.2 celula 2.2 celula 1.3 celula 2.3
5.10. Extinderea celulelor

O celula poate fi combinata cu cele alaturate, astfel rezultand celule mai mari. Extinderea se realizeaza cu ajutorul atributelor ROWSPAN (pentru extindere peste mai multe linii) si COLSPAN (pentru extindere peste mai multe coloane). Pentru ca o celula sa se extinda peste n linii se foloseste atributul ROWSPAN in eticheta TD sau TH astfel: <td rowspan="n"> Pentru ca o celula sa se extinda peste n coloane se foloseste atributul COLSPAN in eticheta TD sau TH astfel: <td colspan="n"> Exemplul 5.7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu - ROWSPAN COLSPAN</title> </head> <body> <p><b>Exemple de tabele in care se foloseste ROWSPAN</b></p> <table border="1" summary="tabel in care se foloseste COLSPAN">
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web <tbody> <tr> <td colspan="2">Variabile</td> </tr> <tr> <td>x1</td> <td>x2</td> </tr> <tr> <td>y1</td> <td>y2</td> </tr> </tbody> </table> <br> <table border="1" summary="tabel in care se foloseste COLSPAN"> <tbody> <tr> <td colspan="3">Variabile</td> </tr> <tr> <td>x1</td> <td>x2</td> <td>x3</td> </tr> <tr> <td>y1</td> <td>y2</td> <td>y3</td> </tr> </tbody> </table> <br> <table border="1" summary="tabel in care se foloseste COLSPAN"> <tbody> <tr> <td colspan="2">Variabile</td> <td>in plus</td> </tr> <tr> <td>x1</td> <td>x2</td> <td>x3</td> </tr> <tr> <td>y1</td> <td>y2</td> <td>y3</td> </tr> </tbody> </table>
Curs: HTML
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web <p> </p> <p><b>Exemplu de tabel in care se foloseste ROWSPAN</b></p> <table border="1" summary="tabel in care se foloseste ROWSPAN"> <tbody> <tr> <td>An</td> <td>Luna</td> <td>Zile libere</td> </tr> <tr> <td rowspan="3">2010</td> <td>ianuarie</td> <td>12</td> </tr> <tr> <td>februarie</td> <td>8</td> </tr> <tr> <td>martie</td> <td>10</td> </tr> </tbody> </table> <p> </p> <p><b>Exemplu de tabel in care se folosesc COLSPAN si ROWSPAN</b></p> <table border="1"> <tbody> <tr> <td colspan="3">Plan de vacanta / concediu</td> </tr> <tr>  <td>An</td> <td>Luna</td> <td>Zile libere</td> </tr> <tr> <td rowspan="3">2010</td> <td>martie</td> <td>5</td> </tr> <tr> <td>august</td> <td>15</td> </tr> <tr> <td>decembrie</td> <td>10</td> </tr> </tbody> </table>
Curs: HTML
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web </body> </html>
Curs: HTML
5.10. Gruparea coloanelor si liniilor

HTML 4.0 include a serie de etichete pentru gruparea liniilor si a coloanelor in scopul unei definiri mai clare a tabelului.
5.10.1. Gruparea coloanelor

Elementul COLGROUP da posibilitatea definirii unui grup de coloane pentru a le formata. Sintaxa pentru eticheta de grup de coloane este urmatoarea: <colgroup></colgroup> Prin intermediul elementului COLGROUP putem aplica stiluri unei intregi coloane, sau unui grup de coloane, fara a fi nevoie sa repetam stilurile pentru fiecare celula de pe fiecare rand. Eticheta <colgroup> poate fi folosita numai in interiorul unui tabel. In afara de atributele standard class, dir, id, lang, style, title, xml:lang (functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1), doar atributele optionale width si span sunt suportate de browserele importante pentru eticheta <colgroup>. Atributul SPAN specifica numarul de coloane alaturate care formeaza un grup. Daca nu este inclus, valoarea sa implicita este egala cu 1. Exemplul 5.8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu - gruparea coloanelor: COLGROUP</title> </head> <body> <table width="400" border="1" summary="tabel cu trei randuri si trei coloane"> <colgroup width="50%"></colgroup>  <colgroup width="25%" span="2"></colgroup>  <tr> <th>ID</th> <th>Titlu</th> <th>PretPretPret</th> </tr> <tr> <td>12345</td> <td>My HTML</td> <td>$53</td> </tr> <tr> <td>54321</td>
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web <td>My CSS</td> <td>$47</td> </tr> </table> </body> </html>
Curs: HTML
Un efect asemanator elemntului COLGROUP il putem obtine prin intermediul elementului COL. Elementul COL defineste valorile atributelor pentru una sau mai multe coloane. Ca si in cazul elementului COLGROUP, elementul COL este util in situatia in care dorim sa aplicam anumite stiluri unei intregi coloane / grup de coloane, fara a fi nevoie sa repetam stilurile pentru fiecare celula in parte. Eticheta COL este una vida. Sintaxa este urmatoarea: <col> Eticheta <col> poate fi folosita numai in interiorul unui tabel sau in interiorul unui element COLGROUP. In afara de atributele standard class, dir, id, lang, style, title, xml:lang (functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1), doar atributul optional width este suportat de browserele importante pentru eticheta <col>. Spre deosebire de COLGROUP, atributul span nu este suportat de toate browserele importante si in cadrul elementului COL. Exemplul 5.9. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu - eticheta COL</title> </head> <body> <table width="400" border="1"> <col width="50%">  <col width="20%">  <col width="20%">  <tr> <th>ID</th> <th>Titlu</th> <th>PretPretPret</th> </tr> <tr> <td>12345</td> <td>My HTML</td> <td>$53</td> </tr> <tr> <td>54321</td> <td>My CSS</td> <td>$47</td> </tr> </table>
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web </body> </html>
Curs: HTML
5.10.2. Gruparea liniilor (randurilor)

Etichetele TBODY, THEAD si TFOOT au functii similare cu COLGROUP, insa ele grupeaza linii, nu coloane. TBODY defineste un grup de linii ce formeaza corpul tabelului si este folosit impreuna cu THEAD si TFOOT care definesc un grup de linii pentru antetul si respectiv subsolul tabelului. Fiecare din etichetele TBODY, THEAD, TFOOT se comporta ca un recipient, insa etichetele de sfarsit sunt optionale. Sintaxa pentru folosirea a celor trei etichete este: ... <table> <thead> ... definire linii antet ... </thead> <tfoot> ... definire linii si subsol ... </tfoot> <tbody> ... definire linii continut ... </tbody> </table> ... Nota: TFOOT trebuie sa preceada TBODY in cadrul unui tabel HTML, pentru ca browserul sa interpreteze subsolul inainte de a primi toate randurile de date. Aceasta ordine a elementelor nu va afecta structura implicita a tabelului, adica: antet tabel, corp tabel, subsol tabel. Cu toate acestea, se poate folosi CSS pentru a permite acestor elemente sa modifice structura implicita a tabelului. Etichetele <thead>, <tfoot> si <tbody> pot avea urmatoarele atribute: Atribut align Functie Atribut optional. Specifica tipul de aliniere orizontala a a continutului. Valori posibile: left aliniaza continutul la stanga (valoare implicita a pentru elementul TD) right aliniaza continutul la dreapta center aliniaza continutul centrat (valoare implicita pentru elementul TH) justify aliniaza textul stanga-dreapta (marginile stanga dreapta sunt uniforme) valign Atribut optional. Specifica tipul de aliniere verticala a continutului. Valori posibile: da da da <thead> da <tfoot> da <tbody> da
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web top aliniere in partea de sus middle aliniere la mijloc bottom aliniere in partea de jos baseline seteaza randul astfel incat toate datele au aceeasi linie de baza (linia imaginara pe care stau catacterele). De obicei are acelasi efect ca BOTTOM, dar cand dimensiunile fonturilor difera, se recomanda folosirea BASELINE. da da
Curs: HTML
da
Exemplul 5.10. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu THEAD, TFOOT, TBODY</title> </head> <body> <table border="1"> <thead> <tr> <td>antet 1</td> <td>antet 2</td> </tr> </thead> <tfoot> <tr> <td>subsol 1</td> <td>subsol 2</td> </tr> </tfoot> <tbody> <tr> <td>continut celula rand 1</td> <td>continut celula rand 1</td> </tr> <tr> <td>continut celula rand 2</td> <td>continut celula rand 2</td> </tr> </tbody> </table> </body> </html>
______________________________________________________________________________________________
Curs: HTML

Eticheta <table>...</table> Atribute border cellpadding cellspacing summary width class dir id lang style title xml:lang class dir id lang style title xml:lang align valign class dir id lang style title xml:lang abbr align colspan headers rowspan scope valign class dir id lang style title xml:lang abbr align colspan rowspan scope valign Functie Defineste un tabel.
<caption>...</caption>
Defineste titlul tabelului.
<tr>...</tr>
Defineste o linie de tabel.
<td>...</td>
Defineste o cleula standard a unui tabel.
<th>...</th>
Defineste o celula antet a unui tabel.
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web class dir id lang style title xml:lang width span class dir id lang style title xml:lang width class dir id lang style title xml:lang align valign class dir id lang style title xml:lang
Curs: HTML
<colgroup>...</colgroup>
Defineste un grup de coloane.
<col>
Defineste valorile atributelor pentru una sau mai multe coloane.
<tbody>...</tbody> <thead>...</thead> <tfoot>...</tfoot>
Defineste corpul tabelului. Defineste antetul tabelului. Defineste subsolul tabelului.
______________________________________________________________________________________________
Curs: HTML
Capitolul 6. LEGATURI SI ANCORE

Cea mai importanta caracteristica a HTML-ului o reprezinta fara indoiala hyperlegaturile. Fara acestea webul nu ar fi nimic altceva decat niste fisiere seperate, fara legatura unul cu celalalt.
6.1. Utilizarea legaturilor

Aceste hyperlegaturi (denumite si legaturi hypertext) permit imbinarea documentelor in diverse moduri, fiind folosite in feluri diferite pentru: Conectarea cu alte pagini web (documente HTML) care fac parte din acelasi site sau dintr-unul diferit. Acest tip de legatura de realizeaza prin folosirea elementului ANCHOR Inserarea obiectelor, cum ar fi imagini, sunete, animatii, intr-o pagina HTML Conectarea la alte resurse non-HTML Pentru a crea o legatura este nevoie de doua lucruri, si anume: numele fisierului (sau URL-ul fisierului) unde se doresrte realizarea legaturii si un text sau o imagine care va servi ca element vizual in navigator, unde utilizatorul poate selecta sa urmeze legatura.
Doar a doua parte este vizibila in pagina web. Cand utilizatorul selecteaza elementul vizual care puncteaza spre legatura, navigatorul va folosi prima parte ca locatie unde sa sara. Ca aspect, in mod implicit: un link nevizitat apare subliniat si albastru un link vizitat apare subliniat si violet un link activ apare subliniat si rosu
6.2. ANCHOR
Legaturile se realizeaza prin intermediul etichetei A (ANCHOR). Elementul A necesita atat eticheta de deschidere cat si cea de inchidere si are urmatoarea sintaxa: <a> ... text ... </a> Chiar daca in cadrul etichetei nu se afla nicun atribut, ancora va fi valabila, insa efectul ei va fi nul. Pentru a exista cu adevarat o hyperlegatura este absolut necesara prezenta atributului HREF in elementul ANCHOR. Atributele etichetei <a> sunt: Atribut href Functie Atribut obligatoriu. Defineste URL-ul destinatie al legaturii. Valori posibile: - un URL absolut catre o alta pagina web (ex. href="http://www.exemplu.com/index.html") - un URL relativ catre un fisier din cadrul site-ului (ex. href="fisier.htm") - un URL ancora trimite la o ancora din cadrul paginii curente (ex.: href="#top") name Atribut optional. Defineste numele ancorei. Atributul name este folosit pentru a crea un semn de carte intr-un document.
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web Destinatia legaturii se regaseste in cadrul etichetei <a>. Valoare posibila: text. target Defineste unde sa se deschida documentul legatura.
Curs: HTML
Valori posibile: _blank - deschide documentul intr-o fereastra noua _self - deschide documentul in aceeasi fereastra ca si documentul curent (valoare implicita) _parent - deschide documentul in fereastra parinte (cea anterioara) _top - deschide documentul in fereastra initiala accesskey Atribut standard. Specifica o tasta de acces pentru element. Valoare: caracter (de ex. daca accesskey="n" atunci accesarea elementului legatura se poate face de la tastatura prin combinatia de taste: ALT+N). class Atribut standard. Specifica un nume de clasa. Valoare: numele clasei. dir Atribut standard. Specifica directia textului continut. Valori posibile: rtl (right to left) de la dreapta la stanga ltr (left to right) de la stanga la dreapta Id Atribut standard. Specifica un identificator unic Valoare: numele identificatorului lang Atribut standard. Specifica limba in care este scris continutul. Valoare: cod limba. Ex.: lang="en", lang="fr", lang="es", etc. style Atribut standard. Specifica stilul inline pentru element. Valoare: definitie stil. tabindex Atribut standard. Specifica ordinea elementului. Valoare: numar. title Atribut standard. Specifica extra-informatii. Valoare: text. xml:lang Atribut standard. Specifica limba in care este scris continutul intr-un document XML (pentru XHTML).
______________________________________________________________________________________________
Curs: HTML
Ex.: xml:lang="en", xml:lang="fr", xml:lang="es" etc.
6.2.1. HREF
HREF este cel mai important atribut al unui element A. Atributul HREF indica URL-ul destinatie. Adresa URL poate fi o adresa completa sau una relativa si trebuie introdusa intre ghilimele. Un element A fara acest atribut nu este functional. Odata adaugat atributul HREF, ancora devine functionala. In functie de locatia fisierelor intre care se realizeaza legatura, avem: - legatura interna cand legatura se realizeaza catre o sectiune a aceluiasi fisier - legatura catre un alt document documentul destinatie poate fi pe acelasi calculator /server (legatura locala), sau pe un alt calculator / server. Se foloseste in urmatorul mod: Exemplul 6.1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu de document HTML care contine o legatura la un alt document</title> </head> <body> <a href="http://www.iim.ro/index.html">Legatura spre pagina principala a site-ului www.iim.ro</a> </body> </html> Daca legatura este locala se poate inlocui linia 7 din exemplul precedent cu: <a href="index.html"> Legatura spre pagina principala a site-ului www.iim.ro</a> Textul sau imaginea din interiorul etichetei A sunt evidentiate intr-un anume fel intr-un navigator fata de restul documentului, textul fiind colorat albastru si subliniat, iar imaginea scoasa in evidenta printr-un chenar albastru. Bineinteles, aceste formatari pot fi schimbate prin folosirea foilor de stil. Adresa fisierului destinatie este cunoscuta sub numele de URL (Uniform Resource Locator). Pentru a specifica locatia unui fisier aflat intr-un alt director sau pe un alt server, formatul standard este: protocol://adresa unde adresa reprezinta server-ul si calea inspre fisierul cu care se face legatura, iar protocol precizeaza tipul de legatura care va fi stabilit si poate lua una din valorile: ftp (File Transfer Protocol) acceseaza fisiere pe un server FTP; http (Hypertext Transfer Protocol) realizeaza o legatura la o pagina web.
Exista si posibilitatea trimiterii unui mesaj prin posta electronica la o anumita adresa. Pentru aceasta se foloseste acelasi atribut HREF impreuna cu mailto astfel: <a href="mailto:adresa_email">... text de legatura ...</a> Astfel, urmatoarea secventa:
______________________________________________________________________________________________
Curs: HTML Exemplul 6.2.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu de document HTML care contine o legatura ce permite trimiterea unui e-mail</title> </head> <body> <a href="mailto:webadmin@iim.ro">Sugestii, comentarii si observatii la WebAdmin IIM</a> </body> </html> va genera crearea unei ferestre de e-mail, care este deja configurata (la sectiunea To este scrisa adresa de email) pentru transmiterea unui mesaj.
6.2.1.1. Legarea paginilor locale folosind cai relative

Cand se precizeaza calea unui fisier intre ghilimele (cum s-a vazut in exemplul precedent), navigatorul cauta implicit fisierul in acelasi director cu fisierul HTML curent. Acest caz este cel mai simplu, cand ambele fisiere se gasesc pe acelasi sever si sunt continute in acelasi director. Pentru a preciza cai relative in legaturi se tine seama se o serie de reguli: numele directoarelor sunt separate de caracterul / (slash) pentru a face referinta la directorul superior se folosesc .. (doua puncte consecutive) In tabelul urmator exista cateva exemple de cai relative cu explicatiile aferente. Cale href="fisier.html" href ="undirector/fisier.html" Ce inseamna Folosim o astfel de cale relativa cand fisier.html este localizat in directorul curent. Folosim o astfel de cale relativa cand fisier.html este localizat in directorul cu numele undirector, iar acest director se afla in directorul curent. Folosim o astfel de cale relativa cand fisier.html este localizat in directorul cu numele altdirector, care este localizat in directorul undirector, iar acest director se afla in directorul curent. Folosim o astfel de cale relativa cand fisier.html este localizat in directorul parinte al directorul curent. Folosim o astfel de cale relativa cand fisier.html este localizat cu doua nivele de directoare mai sus, in directorul cu numele undirector.
href ="undirector/altdirector/fisier.html"
href ="../fisier.html" href ="../../undirector/fisier.html"
6.2.1.2. Legarea paginilor locale folosind cai absolute

Se pot de asemenea specifica legaturi la o alta pagina pe un sistem local folosind cai absolute. Caile relative puncteaza catre o pagina unde se realizeaza legatura considerand locatia relativ la pagina curenta. Caile absolute, pe de alta parte, puncteaza inspre o pagina incepand cu nivelul cel mai de sus din ierarhia directoarelor, parcurgand in jos toate directoarele pana sa ajunga la fisier. Caile absolute incep intotdeauna cu /, acest lucru diferentiindu-le de caile relative. In tabelul urmator exista cateva exemple de cai relative cu explicatiile aferente.
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web Cale href ="/undirector/altdirector/fisier.html"
Curs: HTML Ce inseamna Folosim o astfel de cale absoluta cand fisier.html este localizat in directorul specificat in calea: /undirector/altdirector. Folosim o astfel de cale absoluta cand fisier.html este localizat pe discul C:, in directorul cu numele undirector.
href ="C:/undirector/fisier.html"
6.2.1.3. Cai relative sau cai absolute ?

Pentru a crea o legatura intre doua pagini, de cele mai multe ori se folosesc caile relative in locul cailor absolute. Folosirea cailor absolute poate parea mai usoara in cazul legaturilor complicate, insa dezavantajul este ca acestea nu sunt portabile. In cazul in care este specificata legatura printr-o cale absoluta, iar apoi fisierul este mutat altundeva pe disc sau redenumit vreun director din calea absoluta, toate legaturile vor fi distruse si va trebui depus un efort suplimentar pentru editarea tuturor documentelor HTML si remedierea legaturilor. Prin specificarea legaturilor relative se pot muta paginile web oriunde pe acelasi sistem sau pe altul si, cu mici modificari, refacerea legaturilor se remediaza mult mai usor. De aceea, este mult mai usor de intretinut pagini web care contin cai relative, deoarece o munca mai multa la inceput scuteste adesea un intreg efort depus dupa aceea.
6.2.2. Legaturi la o sectiune din document (ancore denumite)

Exista si situatii in care un document HTML este de dimensiuni mai mari si atunci se impune realizarea unor legaturi la o anumita sectiune a documentului din acelasi document sau din altul. Ancorele denumite sunt acele elemente care fie contin o eticheta <a> cu un atribut name, fie orice alt element cu un id atribuit. Primul pas in realizarea unor astfel de legaturi este crearea ancorei in documentul HTML care sa indice locatia unde se face legatura. Dupa crearea ancorei cu nume, se va crea legatura la ea. Este folosita o notatie speciala pentru legatura la o astfel de ancora. Locul URL-ului din atributul HREF este luat de numele ancorei precedat de semnul #. Exemplul 6.3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu de document HTML care contine o ancora</title> </head> <body> <b>CUPRINS</b> <p><a href="#CAP1">Capitolul 1</a></p> <p><a href="#CAP2">Capitolul 2</a></p> ... <p><a href="#CAP6">Capitolul 6</a></p> ... ...
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web <h1 id="CAP1">Capitolul 1. INTRODUCERE</h1> ... <p>...........................</p> ... <h1 id="CAP2">Capitolul 2. CREAREA PAGINILOR WEB</h1> ... <p>...........................</p> ... <h1 id="CAP6">Capitolul 6. LEGATURI IN PAGINI WEB</h1> ... <p>...........................</p> ... </body> </html>
Curs: HTML
Dupa cum se observa in exemplul anterior, ancorele denumite nu au fost realizate cu elementul ANCHOR si atributul name, ci cu atributul id si elementul H1. Ancorele denumite pot fi folosite si pentru stabilirea de legaturi intre documente. Exemplu: <a href="http://www.iim.ro/evenimente.html#ev5">Evenimentul 5</a> Prin selectarea acestei legaturi se poate accesa pagina la care se face referinta. Afisajul incepe cu pagina deja derulata in locul unde este definita ancora ev5, in loc sa fie afisata de la inceput, cum ar fi normal. Totodata un element ANCHOR poate indeplini simultan functia de sursa de legatura si destinatie a ancorei denumite respective, prin folosirea ambelor atribute HREF si NAME.
______________________________________________________________________________________________
Curs: HTML

Eticheta <a>...</a> Atribute href name target accesskey class dir Id lang style tabindex title xml:lang Functie Defineste o legatura catre un alt document, sau catre o sectiune in cadrul documentului curent.
______________________________________________________________________________________________
Curs: HTML
Capitolul 7. IMAGINI
Imaginile in linie sunt cele care apar in cadrul paginii web cand aceasta este incarcata in fereastra navigatorului. Ele contribuie la crearea aspectului paginii si sunt stocate ca fisiere distincte de documentul HTML, in diverse tipuri. Cele mai utilizate tipuri de fisier grafic sunt GIF si JPG. Fisierele gif prezinta avantaje ca: intretesere (interlaced) prin care se mareste viteza aparenta de afisare a imaginii. transparenta (transparency) care da posibilitatea ca una sau mai multe culori sa fie transparente (nu se vad in pagina web) si ca atare se va vedea ceea ce este sub imagine. insa au dezavantajul ca sunt limitate la 256 de culori (sau 256 de nuante de gri in cazul imaginilor alb-negru). In cazul in care se doreste afisarea imaginilor in mai mult de 256 de culori sau nuante de gri, se foloseste formatul jpeg. Acesta suporta 16 biti (65.000 de culori) sau 24 biti (16 milioane de culori), insa ocupa un spatiu mai mare decat cele pe 8 biti. Imaginile pot fi create prin desenare, scanare, fotografiere, pot fi obtinute prin convertire, sau din clip art-uri. Un aspect important il reprezinta tipul si dimensiunea fisierului, dar pot interveni si alti factori.
7.1. Adaugarea imaginilor in documente HTML

Adaugarea unei imagini intr-un document HTML este un lucru relativ simplu, realizabil cu ajutorul etichetei IMG. Aceasta este o eticheta vida care are doua atribute obligatorii: SRC, fara de care nu are nici un efect, si ALT. Sintaxa este: <img src="URL" alt="text_alternativ"> De observat ca imaginile nu sunt tehnic introduse intr-o pagina HTML, imaginile sunt legate de pagini HTML. Eticheta <img> creaza un spatiu de exploatat pentru imaginea destinatie. Atributele etichetei <img> sunt: Atribut alt Functie Atribut obligatoriu. Specifica un text alternativ pentru imagine, care este afisat pe pagina in locul imaginii, daca imaginea nu poate fi afisata din diferite cauze. Valoare: text. - daca imaginea contine informatii, texul alternativ poate fi o descriere a imaginii; - daca imaginea apare in cadrul etichetei <a>, atunci textul alternativ poate explica unde trimite legatura - daca imaginea este doar decorativa, atunci se poate folosi alt="" src Atribut obligatoriu. Specifica URL-ul catre imagine. Valori posibile: - un URL absolut catre o alta pagina web (ex.
______________________________________________________________________________________________
Curs: HTML
height
src="http://www.exemplu.com/imagine.gif") un URL relativ catre un fisier din cadrul site-ului (ex. src="imagine.gif")
Atribut optional. Specifica inaltimea cadrului pentru imagine. Valori posibile: pixeli valoare procentuala (x%)
width
Atribut optional. Specifica latimea cadrului pentru imagine. Valori posibile: pixeli valoare procentuala (x%)
ismap
Atribut optional. Defineste imaginea ca o harta pe server (server-side image-map) rar folosita (a se vedea usemap in schimb). Valoare: "ismap".
usemap
Atribut optional. Defineste imaginea ca o harta pentru client (client-side image-map). Valoare: #nume_harta.
Exemplul 7.1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu imagini</title> </head> <body> <p>Exemplul 1</p> <img src="flower1.jpg" alt="flower1" width="470" height="369"> <p> </p> <p>Exemplul 2</p> <p>In acest exemplu imaginea: <img src="flower1.jpg" alt="flower1" width="300" height="200"> este afisata inline.</p> <p> </p> <p>Exemplul 3</p> <p>In acest exemplu imaginea este apelata dintr-un subfolder al folderului curent</p>
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web <img src="imagini/flower2.jpg" alt="flower2" width="584" height="425"> </body> </html>
Curs: HTML
7.1.1. Text alternativ (ALT)

Exista cazuri in care navigatorul este setat sa nu afiseze imaginile, sau nu suporta modul grafic (nu poate afisa imagini). Atunci, in loc sa fie afisata sursa imaginii (calea inspre fisierul imagine si numele acestuia), se poate afisa un text explicativ numit text alternativ prin intermediul atributului ALT. Nota: Browserul Internet Explorer afiseaza textul alternativ ca un indiciu, intr-o caseta, atunci cand se trece cu mouse-ul peste imagine. Conform specificatiei HTML acesta nu este un comportament corect. Specificatia HTML precizeaza ca textul alternativ trebuie sa fie afisat numai daca imaginea nu poate fi afisata din diverse cauze (conexiune slaba, o eroare la atributul SRC, etc.). Pentru crearea unui indiciu pentru imagine, se poate folosi atributul standard TITLE.
7.1.2. Sursa imaginii (SRC)

Pentru a fi afisata imaginea in document, eticheta IMG trebuie sa contina obligatoriu atributul SRC. Acesta specifica URL-ul imaginii (calea de acces catre imagine si numele fisierului imagine) si poate fi relativ sau absolut. In cazul in care fisierul ce contine imaginea nu este gasit la locatia respectiva, atunci navigatorul afiseaza textul alternativ sau, daca acest text alternativ lipseste, va afisa un mesaj de eroare.
7.1.3. Dimensiuni (WIDTH si HEIGHT)

Pentru stabilirea dimensiunii de afisare in fereastra navigatorului a unei imagini se pot utiliza atributele WIDTH si HEIGHT. Valorile lor sunt exprimate in pixeli sau procentual si au ca efect rezervarea in fereastra a unei portiuni pentru afisarea imaginii. Dimensiunile pot fi stabilite exact ca si cele reale si atunci imaginea va fi afisata la scara de 1:1, sau pot fi diferite si atunci intervine factorul de scalabilitate. In cel de-al doilea caz imaginea va fi marita sau micsorata proportional cu dimensiunea ei reala sau poate fi denaturata (deformata) prin specificarea explicita a inaltimii si latimii imaginii. Este bine sa fie specificata atat latimea, cat si inaltimea imaginii. Daca acestea sunt setate, atunci spatiul necesar afisarii imaginii este rezervat in momentul incarcarii paginii. Fara aceste atribute browserul nu cunoaste dimensiunile imaginii si nu rezerva spatiu pentru aceasta, iar intr-o astfel de situatie fectul va fi acela ca pagina se va modifica pe masura ce se incarca. Nota: A nu se folosi WIDTH si HEIGHT pentru a redimensiona imaginile. Daca dimensiunile specificate cu WIDTH si HEIGHT sunt mai mici decat cele ale imaginii (si proportionale cu acestea, altfel imaginea se deformeaza), atunci se va descarca imaginea tot la dimensiunea ei reala, doar ca va fi afisata intr-o zona restransa si va parea mai mica. Analog, daca dimensiunile specificate cu WIDTH si HEIGHT sunt mai mari decat cele reale ale imaginii, atunci se poate ajunge la o alterare a calitatii imaginii. Se recomanda redimensionarea imaginii cu ajutorul unui program inainte de a o folosi intr-o pagina web.
______________________________________________________________________________________________
Curs: HTML
7.2. Harti imagine (Maparea imaginilor)

O imagine poate reprezenta sursa unei legaturi. Exista insa posibilitatea ca o imagine sa contina mai multe legaturi prin folosirea asa numitelor imagini-harta. O imagine-harta poate fi conceputa pentru a sta pe un server si a fi prelucrata de un script CGI rulat pe server sau poate fi codificata in fisierul HTML si este rulata de navigator (client). Indiferent de tipul folosit, pentru a defini o harta-imagine se procedeaza astfel: se alege imaginea; se imparte imaginea in zone si se stabileste un URL pentru fiecare zona in parte; se determina coordonatele fiecarei zone.
7.2.1. Harti pe server (server-side)

Atributul ismap identifica imaginea ca fiind o imagine harta folosita pentru a asocia mai multe legaturi din imaginea respectiva catre alte documente. O imagine harta pe server este definita astfel: <a href="URL_fisier_definire_harta"><img src="fisier_imagine" ismap="ismap"></a> In momentul in care utilizatorul executa click pe imagine atributul ismap transmite serverului coordonatele x si y unde a avut loc evenimentul prin adaugarea unui semn de intrebare urmat de valorile coordonatelor x si y separate prin virgula, la adresa URL specificata in ancora A. Fisierul cu definitia hartii este stocat pe server, are extensia .map, si contine cate o linie pentru fiecare zona definita. In fiecare linie sunt incluse: denumirea formei pe care o are zona (rectangle, polygon, circle) coordonatele zonei (perechi x,y ale colturilor zonei) URL-ul referit de acea zona Este benefica introducerea unor indicii grafice pentru a informa utilizatorul asupra faptului ca imaginea este o harta si nu o imagine cu o simpla legatura.
7.2.2. Harti pentru client (client-side)

Navigatoarele au capacitatea de a interpreta o harta si fara ajutorul serverului. Aceste harti imagine pentru client includ informatiile necesare pentru procesare fara a comunica cu serverul. Ele au avantajul ca fisierul harta nu este stocat pe server, nu trebuie sa ruleze scripturi de prelucrare, insa au dezavantajul ca ruleaza doar daca navigatorul cunoaste extensiile pentru ele. Acest tip de harta-imagine se realizeaza prin intermediul atributului USEMAP, care marcheaza o imagine ca fiind imagine harta pentru client folosita si care se foloseste in combinatie cu MAP: <img src="fisier_imagine" usemap="fisier.html#nume_harta"> Elementul MAP defineste harta cu toate informatiile referitoare la tip, coordonate si legaturi, si poate fi stocat intr-un fisier separat sau poate fi chiar inclus in documentul HTML. Eticheta MAP are un singur atribut obligatoriu, si anume NAME, prin care se identifica, iar in interiorul sau permite folosirea doar a etichetei AREA pentru definirea zonelor active din imagine: <map name="nume_harta"> <area> </map>
______________________________________________________________________________________________
Curs: HTML
Atributele standard pe care le poate avea eticheta <map> sunt: class, dir, id, lang, style, title, xml:lang (functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1) Eticheta <area> defineste o zona activa a unei imagini, este o eticheta vida, se foloseste intotdeauna in interiorul etichetei <map>...</map> si are urmatoarele atribute: Atribut alt Descriere Atribut obligatoriu. Specifica un text alternativ pentru zona activa. Valoare: text. OBS: Atributul alt al etichetei <area>, desi unul obligatoriu, nu este suportat in mod corespunzator in niciunul din browserele importante! Atribut optional. Defineste tipul/forma zonei active. Se foloseste impreuna cu atributul coords pentru a specifica dimensiunea, forma si pozitionarea zonei active. Valori posibile: default se refera la intreaga zona rect defineste o zona dreptunghiulara circle defineste o zona circulara poly defineste o zona poligonala coords Atribut optional. Precizeaza coordonatele zonei sub forma de perechi, exprimate in pixeli, relative la coltul din stanga-sus. Se foloseste impreuna cu atributul shape pentru a specifica dimensiunea, forma si pozitionarea zonei active. Valori posibile: daca shape="rect", coordonatele dreptunghiului se precizeaza astfel: X1,y1,x2,y2, unde: (X1,y1) reprezinta coordonatele varfului stanga-sus, iar (X2,y2) reprezinta coordonatele varfului dreapta-jos. daca shape="circle", coordonatele cercului se precizeaza astfel: x, y, r, unde: (x,y) reprezinta coordonatele centrului cercului, iar r reprezinta raza cercului. daca shape="poly", coordonatele poligonului se precizeaza astfel: x1,y1,x2,y2,...,xnyn, unde fiecare pereche (xi,yi) reprezinta un varf al poligonului. Daca prima pereche si ultima din cele specificate nu coincid, atunci browserul va adauga perechea corespunzatoare pentru a inchide poligonul. href Atribut optional. Indica URL-ul fisierului la care se face legatura in momentul selectarii zonei. Valori posibile: - un URL absolut catre o alta pagina web (ex. src="http://www.exemplu.com/fisier.html") - un URL relativ catre un fisier din cadrul site-ului (ex. src="fisier.html") - un URL ancora trimite la o ancora din cadrul paginii curente (ex.: href="#soare") target Atribut optional. Defineste unde sa se deschida pagina legatura specificata in cadrul atributului href. Valori posibile: _blank - deschide pagina intr-o fereastra noua _self - deschide pagina in aceeasi fereastra in care este actionata legatura
______________________________________________________________________________________________
shape
Modulul 2 Introducere in Tehnologii Web _parent - deschide pagina in fereastra parinte _top - deschide pagina in intreg corpul ferestrei accesskey class dir Id lang style tabindex title xml:lang Atribute standard. Functionalitatile acestor atribute sunt descrise in cap. 6.2 ANCHOR
Curs: HTML
Pot fi definite mai multe zone active pentru o imagine prin adaugarea reperata a etichetei <area> in cadrul etichetei <map>...</map>. Cum se defineste o imagine harta pentru client: se include imaginea in documentul HTML prin specificarea in atributul SRC a fisierului imagine si in atributul USEMAP a numelui hartii ce contine informatiile necesare definirii zonelor active din imagine, astfel: Exemplul 7.2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu de document HTML cu imagine harta pentru client</title> </head> <body> <map name="harta1"> <area shape="rect" coords="25,25,170,170" href="dreptunghi.html"> <area shape="circle" coords="370,300,60" href="cerc.html"> </map> <img src="imagine-mapata.jpg" width="500" height="400" border="0" alt="Imagine mapata" usemap="#harta1"> <p> Harta imagine de mai sus are definite doua zone active, una in forma dreptunghiulara si alta in forma de cerc. </p> </body> </html>
7.3. Combinarea cu alte elemente

Imaginile pot fi combinate si cu alte elemente, dand astfel o nota aparte documentului HTML. Ele se folosesc in cazul in care se definesc legaturi inspre alte documente, sau se doreste particularizarea unor liste, alinierea unor imagini folosind tehnica tabelara sau pur si simplu prin alaturarea de text si imagine.
7.3.1. Imagini si legaturi

De multe ori pentru definirea unei legaturi se foloseste in locul textului ca baza vizuala, o imagine. Efectul vizual care se obtine este mult mai spectaculos decat cel obtinut prin plasarea unui text, fie el si formatat.
______________________________________________________________________________________________
Curs: HTML
Pentru aceasta se combina eticheta ancora A cu eticheta de imagine IMG in sensul ca IMG va fi continut in A, dupa cum se poate observa: <a><img src"fisier_imagine"></a> Definirea unei legaturi printr-o imagine genereaza un chenar acesteia (imaginii) in mod automat. Acest efect poate fi anulat sau modificat prin folosirea foilor de stil in cascada. Exemplul 7.3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu imagini</title> </head> <body> <p> In acest exemplu imaginea <a href="#"><img src="legatura.png" alt="imagine_legatura" width="100" height="100"></a> se comporta ca un link.</p> </body> </html>
7.3.2. Imagini si tabele

Se pot introduce imagini si in tabele prin folosirea etichetei IMG in cadrul etichetei TABEL, mai exact in definirea unei celule TD. Se foloseste mai ales in cazul in care se doreste o mai buna aliniere a mai multor imagini pe orizontala sau verticala sau pentru definirea unor liste de tipul: text si imagine corespondenta. Exemplul 7.4. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu imagini si tabele</title> </head> <body> <p>Utila in multe situatii este combinarea imaginilor cu tabele, pentru structurarea informatiei.<br>Exemplu:</p> <table border="1" cellpadding="2" cellspacing="0" width="50%"> <tr> <th width="75%">Denumire</td> <th width="25%">Imagine</td> </tr> <tr> <td width="75%">Primul produs</td> <td width="25%"><img src="imagini/produs1.jpg" alt="produs1" width="120" height="80"></td> </tr> <tr> <td width="75%">Al doilea produs</td> <td width="25%"><img src="imagini/produs2.jpg" alt="produs2" width="87" height="130"></td> </tr> </table> </body> </html>
______________________________________________________________________________________________
Curs: HTML
7. 4. Etichete si atribute prezentate in acest capitol

Eticheta <img> Atribute alt src height width ismap usemap class dir id lang style title xml:lang name class dir id lang style title xml:lang shape coords href target accesskey class dir Id lang style tabindex title xml:lang Functie Permite adaugarea unei imagini intr-un document HTML.
<map>...</map>
Defineste harta pentru o imagine.
<area>
Defineste o zona activa a unei imagini.
______________________________________________________________________________________________
Curs: HTML
Capitolul 8. CADRE
O limitare majora a versiunilor mai vechi de HTML a fost aceea ca se putea vedea in fereastra navigatorului doar o singura pagina la un moment dat. Cadrele reprezinta implementarea unui concept introdus mai intai in 1995, pe care, dupa multe dezbateri, W3C a decis sa-l reintroduca incepand cu standardul HTML 4.0.
8.1. Concept
Cadrele au venit peste aceasta limitare divizand fereastra navigatorului in mai multe documente HTML. La fel ca si tabelele, cadrele permit aranjarea textului si a imaginilor in linii si coloane. Ele sunt similare cu tabelele din multe puncte de vedere, insa nu au scopul de a organiza date, ci despart fereastra in cadre. Fiecare cadru are propriul sau fisier HTML atasat, iar continutul sau poate fi derulat sau schimbat independent de celelalte.
8.2. Cadre IFRAME

Eticheta IFRAME defineste un cadru inline care contine un alt document. Cadrele inline sunt tratate ca si o imagine, sau ca un obiect. Sintaxa pentru un cadru inline este aceasta: <iframe> ... </iframe> Cadrele inline ocupa un spatiu in document si insereaza un continut specializat (posibil o alta pagina web). Atribut frameborder src Functie Atribut optional. Atribut optional. Specifica URL-ul fisierului care va fi afisat in cadrul inline. Valori posibile: un URL absolut catre o alta pagina web (ex. src="http://www.exemplu.com/fisier.html") un URL relativ catre un fisier din cadrul site-ului (ex. src=" fisier.html ") height Atribut optional. Specifica inaltimea cadrului inline. Valori posibile: pixeli valoare procentuala (x%) width Atribut optional. Specifica latimea cadrului inline. Valori posibile: pixeli valoare procentuala (x%)
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web marginheight Atribut optional. Specifica marginile de sus si de jos ale cadrului inline. Valoarea este exprimata in pixeli. (ex. marginheight="50px"). Atribut optional. Specifica marginiledin stanga si din dreapta ale cadrului inline. Valoarea este exprimata in pixeli. (ex. marginwidth ="50px"). Atribut optional. Specifica numele cadrului inline. Valoarea: nume_iframe. scrooling
Curs: HTML
marginwidth
name
Atribut optional. Specifica daca sa se afiseze sau nu barele de derulare in cadrul inline. Valori posibile: auto barele de derulare sunt afisate doar daca / unde este necesar (valoare implicita) yes barele de derulare sunt afisate in mod obligatoriu, chiar daca nu sunt necesare no barele de derulare nu sunt afisate deloc, nici in cazul in care sunt necesare.
class id style title
Exemplul 8.1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Document html ce contine un iframe</title> </head> <body> <iframe src ="continut.html" width="50%" height="150" marginwidth="50" marginheight="30" scrolling="auto"> <p>Browser-ul nu suporta iframes.</p> <a href="detaliitehnice.html">Click pentru Continut</a> </iframe> </body> </html>
______________________________________________________________________________________________
Curs: HTML

Eticheta <iframe>...</iframe> Atribute frameborder src height width marginheight marginwidth name scrooling class id style title Functie Defineste un cadru inline care contine un alt document.
______________________________________________________________________________________________
Curs: HTML
Capitolul 9. FORMULARE
Modalitatea prin care se poate interactiona cu utilizatorul o reprezinta formularele. Acestea permit vizitatorilor sa introduca date care vor fi procesate pe serverul web prin intermediul scripturilor. Prin folosirea formularelor se poate cere vizitatorilor sa raspunda la anumite intrebari, sa completeze formulare de feedback, sa faca sugestii, observatii, reclamatii referitoare la pagina web, sa faca inscrieri intr-o carte de oaspeti sau diverse alte actiuni. In acest sens exista cateva etichete prin care este posibila definirea de campuri pentru introducerea informatiilor si care vor fi plasate in cadrul elementului FORM.
9.1. Elementul FORM

Intr-un document HTML formularele sunt definite prin eticheta FORM. Aceasta se comporta ca un recipient pentru controale si totodata in eticheta de inceput trebuie specificate sciptul si modalitatea de transmitere a datelor din formular, asa cum se arata si mai jos: <form action="URL_script"> ... definire elemente formular ... </form> Elementul FORM specifica: Layout-ul / aspectul formularului (determinat de continutul elementului FORM). Programul ce va prelua formularul completat si transmis (atributul ACTION). Acest program trebuie sa fie capabil sa preia corect si sa decodifice perechile nume/valoare transmise pentru a le putea folosi. Metoda prin care datele introduse de utilizator vor fi trimise serverului (atributulMETHOD). codificare a caracterelor acceptabila pentru server, astfel ca acesta sa poata prelua formularul (atributul ACCEPT-CHARSET). Browserele utilizatorilor trebuie sa-i avertizeze asupra valorilor setului de caractere acceptat si/sau sa restrictioneze posibilitatea acestora de a introduce caractere necunoscute.
Un document HTML poate contine unul sau mai multe formulare. In cazul in care intr-un document HTML sunt mai multe formulare, ele nu pot fi imbricate. Daca exista cazuri in care eticheta de inceput <form> a celui de-al doilea formular apare inaintea etichetei de sfarsit </form> a primului formular, atunci eticheta va fi ignorata si elementele celui de-al doilea formular vor fi atribuite primului formular. Un element FORM poate contine elemente precum: campuri de introducere text, casete de selectare, butoane radio, butoane reset (reseteaza), butoane submit (executa) si altele. Un formular poate contine in afara controalelor si text si elemente HTML (paragrafe, liste, etc.) Elementul FORM are doua atribute principale: ACTION atribut obligatoriu care specifica URL-ul pentru un script care va procesa datele din formular si care se gaseste de obicei pe serverul web. In cazul in care nu se specifica nici un URL, datele vor fi intoarse in pagina de unde au venit. METHOD specifica modalitatea de transmitere a datelor catre scriptul care le prelucreaza. Accepta valorile POST si GET. POST este metoda recomandata, ea trimitand informatiile din formular separat de URL, intr-o sectiune diferita numita corp entitate. GET ataseaza informatiile din formular la sfarsitul URL-ului, ca un adaos al adresei propriu-zise.
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web Note privind metoda "get": -
Curs: HTML
Aceasta metoda adauga datele din formular la adresa URL ca si perechi nume/valoare Exista o limita a datelor care pot fi plasate intr-un URL. Acesta variaza de la un browser la altul. Astfel, nu exista certitudinea ca toate datele vor fi transmise in mod corect. Nu se foloseste metoda GET pentru a transmite informatii sensibile! (parola sau alte informatii sensibile vor fi vizibile in bara de adresa a browser-ului).
Note privind metoda "post": Aceasta metoda transmite datele catre server intr-o maniera invizibila pentru utilizator si este o metoda mai sigura decat metoda GET - Metoda POST nu limiteaza volumul de informatii trimise catre server. Exemplul 9.1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Document html ce contine un formular</title> </head> <body> <form action="script.php" method="post"> Nume: <input type="text" name="nume"><br> <input type="submit" name="submit" value="Trimite"> </form> </body> </html> Efectul in browser va fi urmatorul: -
Pentru exemplul de mai sus, la actionarea butonului Trimite (submit), in cazul folosirii metodei GET, URL-ul transmis serverului va fi de forma: http://www.exemplu.ro/fisier.php?nume=Popescu iar in cazul folosirii metodei POST, URL-ul va fi de forma: http://www.exemplu.ro/fisier.php Atributele elementului FORM sunt: Atribut action Functie Atribut obligatoriu. Specifica URL-ul fisierului la care sunt transmise spre prelucrare datele din formular. Valoare: o cale absoluta catre fisierul ce contine scriptul (ex. src="http://www.exemplu.com/fisier.php") o cale relativa (ex. src="fisier.php)
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web method
Curs: HTML
Atribut optional. Defineste cum sa fie transmise datele formularului (datele formularului sunt transmise fisierului specificat in atributul ACTION). Atribut optional. Specifica in ce fel sa fie codificate datele din formular inainte de a le trimite pe server. In mod implicit datele din formulat sunt codate ca " application/x-www-formurlencoded". Asta inseamna ca toate date sunt codate inainte de a fi trimise la server (spatiile sunt convertite in simbolul "+" si caracterele speciale sunt convertite la valori ASCII HEX). Valori posibile: application/x-www-form-urlencoded toate caracterele sunt codificate inainte de a fi trimise (valoare implicita) multipart/form-data caracterele nu sunt codificate. Aceasta valoare este utilizata pentru formulare care au un control al upload-ului. text/plain spatiile sunt convertite in "+", dar caracterele speciale nu sunt codificate
enctype
name
Atribut optional. Specifica numele formularului. Atributul NAME ofera o modalitate de a face referire la formular intr-un script. Valoate: text. Ex. <form name="formular_contract">...
9.2. Elementul TEXTAREA

In multe cazuri se impune ca utilizatorii sa introduca mai mult decat o singura linie de text. Acest caz apare atunci cand este vorba de raportarea unor erori sau de feedback si el poate fi rezolvat folosind etichete TEXTAREA in cadrul formularului. Sintaxa este: <textarea rows="valoare" cols="valoare"> ... text ... </textarea> Implicit elementul TEXTAREA afiseaza un camp gol. Dimensiunea campului poate fi setata cu ajutorul atributelor ROWS si COLS. De asemenea, poate fi specificat si un text implicit care sa arate utilizatorului ce trebuie introdus. Etichetele <textarea> si </textarea> se comporta ca un recipient pentru a defini textul implicit. El apare exact asa cum a fost introdus, la fel ca textele preformatate cu eticheta PRE, orice spatii sau treceri la linie noua fiind afisate.
______________________________________________________________________________________________
Curs: HTML
Daca este specificat atributul readonly atunci continutul initial nu poate fi modificat de catre utilizator. Atributul NAME este solicitat deoarece ia ca valoare numele variabilei atasata sirului de caractere si ajuta la procesarea datelor de catre script pe serverul web. Atribut cols Functie Atribut obligatoriu. Specifica latimea zonei de text (numar de coloane / apoximativ numarul de caractere). Valoare: numar. rows Atribut obligatoriu. Specifica inaltimea zonei de text (in randuri). Valoare: numar. disabled Atribut optional. Specifica faptul ca zona de text este inactiva. In cazul in care este setat atributul disabled, continutul zonei de text (definit intre <textarea> si </textarea>) nu va putea fi editat, nici macar selectat sau copiat. Atributul DISABLED poate fi setat daca se doreste ca zona de text sa fie inutilizabila de catre un utilizator pana cand nu este indeplinita o alta conditie (ca de exemplu bifarea unei casete de selectare, etc.). Apoi, cu JavaScript valoarea DISABLED poate fi anulata si zona de text devine utilizabila. Valoare: disabled. Ex.: <textarea disabled="disabled">... readonly Atribut optional. Specifica faptul ca zona de text este accesibila doar in modul citire. In cazul in care este setat atributul READONLY, continutul zonei de text (definit intre <textarea> si </textarea>) nu va putea fi editat, dar va putea fi selectat si copiat. Atributul READONLY poate fi setat daca se doreste ca zona de text sa fie inutilizabila de catre un utilizator pana cand nu este indeplinita o alta conditie (ca de exemplu bifarea unei casete de selectare, etc.). Apoi, cu JavaScript valoarea READONLY poate fi anulata si zona de text devine utilizabila. Valoare: readonly. Ex.: <textarea readonly="readonly">... name Atribut optional. Specifica un nume pentru zona de text. Atributul NAME este folosit pentru a face referire la element intr-un script JavaScript / PHP, etc. Valoare: numele_zonei_de_text. Ex.: <textarea name="descriere_produs">... class dir id lang style title xml:lang Atribute standard. Functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1
______________________________________________________________________________________________
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu FORM - TEXTAREA</title> </head> <body> <form action="fisier.php" method="post"> <textarea name="text" rows="5" cols="30">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </textarea> <br> <textarea name="text_de_introdus" rows="3" cols="20"></textarea> </form> </body> </html>
9.3. Elementul SELECT

Elementul SELECT creaza o lista de optiuni sub forma de meniu sau lista derulanta (drop-down list). Optiunile din lista se definesc intre etichetele <select> si </select> prin intermediul unui alt element si anume OPTION, astfel: <select> <option> optiune </option> ... </select> Atributele elementului SELECT sunt urmatoarele: Atribut disabled Descriere Atribut optional. Specifica faptul ca lista derulanta este inactiva. Continutul unei liste derulante ce are atributul DISABLE setat nu va putea fi utilizat. Atributul DISABLED poate fi setat daca se doreste ca lista derulanta sa fie inutilizabila de catre un utilizator pana cand nu este indeplinita o alta conditie (ca de exemplu bifarea unei casete de selectare, etc.). Apoi, cu JavaScript valoarea DISABLED poate fi anulata si lista derulanta devine utilizabila. Valoare: disabled. Ex.: <select disabled="disabled">... name Atribut optional. Specifica numele listei derulante. Atributul NAME este folosit pentru a face referire la element intr-un script JavaScript / PHP, etc. Valoare: numele_listei_derulante. Ex.: <select name="descriere_produs">...
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web multiple
Curs: HTML
Atribut optional. Specifica faptul ca pot fi selectate mai multe optiuni in acelasi timp. In cazul in care este specificat, forteaza afisarea intregului meniu, sau mai multor optiuni. Pentru ca selectarea mai multor optiuni se realizeaza in mod diferit de la un sistem la altul si pentru ca utilizatorii trebuie informati despre posibilitatea selectarii multiple, se recomanda folosirea in schimb a casetelor de selectare (checkboxes). Valoare: multiple. Ex. <select multiple="multiple">...
Atributele elementului OPTION sunt urmatoarele: Atribut value Descriere Atribut optional. Reprezinta valoarea atribuita optiunii, care este trimisa inapoi la serverul web si nu trebuie neaparat sa aiba aceeasi valoare cu ce este afisat in fereastra pentru utilizator. Daca atributul VALUE lipseste, valoarea care va fi trimisa la server este continutul etichetei <option>...continut...</option>. Valoare: text. selected Atribut optional. Specifica faptul ca optiunea este selectata in mod implicit. Optiunea pentru care este setat atributul SELECTED va fi afisata prima in lista derulanta. Atributul SELECTED poate fi setat si dupa ce pagina este incarcata, cu JavaScript. Valoare: selected. Ex. <option selected="selected">... class dir id lang style title xml:lang Atribute standard. Functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1
Eticheta de inchidere a elementului OPTION este optionala. In cazul in care nu este folosita, elementul definit se termina automat la gasirea etichetei de inceput a urmatorului element OPTION sau la sfarsitul elementului SELECT care il contine. Exemplul 9.3a. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu FORM - SELECT / OPTION</title>
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web </head> <body> <form action="fisier.php" method="post"> <select name="culori1"> <option value="culoare1">rosu</option> <option value="culoare2" selected="selected">orange</option> <option value="culoare3">galben</option> <option value="culoare4">verde</option> <option value="culoare5">albastru</option> <option value="culoare6">indigo</option> <option value="culoare7">violet</option> </select> </form> <br> <form action="fisier.php" method="post"> <select name="culori2" multiple="multiple"> <option value="culoare1">rosu</option> <option value="culoare2">orange</option> <option value="culoare3" selected="selected">galben</option> <option value="culoare4" selected="selected">verde</option> <option value="culoare5">albastru</option> <option value="culoare6">indigo</option> <option value="culoare6">violet</option> </select> </form> </body> </html>
Curs: HTML
Daca lista contine multe elemente ce pot fi grupate pe categorii, atunci poate fi folosit elementul OPTGROUP pentru a structura lista. Elementul OPTGROUP se foloseste in cadrul elementului SELECT si cuprinde una sau mai multe definitii ale elementului OPTION. Atributele elementului OPTGROUP: Atribut label Descriere Atribut obligatoriu. Specifica o descriere pentru grupul de optiuni. Valoare: text. class dir id lang style title xml:lang Atribute standard. Functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1
Exemplul 9.3b. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web <head> <title>Exemplu FORM - SELECT / OPTION / OPTGROUP</title> </head> <body> <form action="fisier.php" method="post"> <select> <optgroup label="Rasinoase"> <option value="brad">Brad</option> <option value="molid">Molid argintiu</option> <option value="pin">Pin negru</option> </optgroup> <optgroup label="Foioase"> <option value="cas" selected="selected">Castan</option> <option value="mes">Mesteacan</option> </optgroup> </select> </form> </body> </html>
Curs: HTML
9.4. Elementul INPUT

Elementul INPUT este cel mai important in construirea formularelor. Multitudinea de tipuri pe care o poate lua permite crearea formularelor fara a utiliza alte elemente, ci doar specificand tipul elementului INPUT. Eticheta INPUT este una vida. Are urmatoarea sintaxa: <input [type="tip"] [name="nume_control"]> Printre atributele elementului INPUT se afla si atributul TYPE, care este folosit pentru a defini o gama larga de controale si poate lua una din valorile: Valoare button checkbox file hidden image password radio reset submit text Control asociat Defineste un buton personalizat (de obicei utilizat cu JavaScript pentru a activa un script). Defineste o caseta de validare. Defineste un camp INPUT si un buton Browse pentru incarcarea unu fisier. Defineste un camp INPUT ascuns. Defineste o imagine ca si buton submit. Defineste o caseta de introducere a parolei. Caracterele din acest camp sunt mascate. Defineste un buton de selectie. Defineste un buton Reset / de resetare. Actionarea butonului Reset reseteaza toate campurile formularului la valorile lor initiale. Defineste un buton Submit / de executare. Actionarea butonului Submit trimite datele din formular la server. Defineste o linie INPUT in care utilizatorul poate introduce text. Latimea implicita este de 20 caractere.
______________________________________________________________________________________________
Curs: HTML
9.4.1. Atributele elementului INPUT

Atributele elementului INPUT sunt urmatoarele: Atribut name Functie Atribut optional. Defineste numele controlului. Este solicitat la toate tipurile, exceptie fac submit si reset. Atributul name este folosit pentru a identifica datele din formular dupa ce acestea au fost trimise la server, sau pentru a se face referire la datele din formular in cazul in care se foloseste JavaScript. NOTA: Dintre elementele unui formular, numai valoarile celor care au atributul NAME setat vor fi transmise catre server cand formularul este executat. Valoare: nume pentru elementul INPUT. size Atribut optional. Specifica latimea campului INPUT. Pentru <input type="text"> si <input type="password"> atributul SIZE defineste numarul caracterelor vizibile, iar pentru celelalte tipuri de elemente, defineste latimea campului INPUT in pixeli. Valori posibile: caractere / pixeli maxlength Atribut optional. Specifica lungimea maxima (in caractere) a campului INPUT. Atributul MAXLENGHT este folosit cu <input type="text"> sau <input type="password">. Valoare: numar (maxim de caractere). value Atribut optional. Defineste o valoare pentru un element INPUT. - pentru type="button", "reset", "submit" defineste textul care va aparea pe buton
- pentru type="text", "password", "hidden" defineste valoarea initiala (implicita) a campului INPUT - pentru type="checkbox", "radio", "image" defineste valoarea asociata informatiilor introduse. Aceasta este valoarea transmisa scriptului de la URL-ului specificat prin atributul ACTION. Valoare: text (valoarea asociata campului INPUT).
checked
Atribut optional. Specifica faptul ca elementul INPUT este preselectat in momentul incarcarii paginii. Atributul CHECKED este folosit cu <input type="checkbox"> sau <input type="radio">. Atributul CHECKED poate fi setat si dupa ce pagina este incrcata, cu JavaScript. Valoare: checked. Ex. <input type="checkbox" checked="checked">
type
Atribut optional. Stabileste tipul unui element INPUT. Valori posibile: - button - checkbox - file - hidden - image - password
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web - radio - reset - submit - text disabled
Curs: HTML
Atribut optional. Specifica faptul ca elementul INPUT este incativ. In cazul in care este setat atributul disabled, elementul INPUT nu poate fi utilizat. Atributul DISABLED poate fi setat astfel incat elementul INPUT sa fie inutilizabil de catre un utilizator pana cand nu este indeplinita o alta conditie (ca de exemplu bifarea unei casete de selectare, etc.). Apoi, cu JavaScript valoarea DISABLED poate fi anulata si elementul INPUT devine utilizabil. NOTA: Atributul DISABLED nu functioneaza impreuna cu <input type="hidden">. Valoare: "disabled". Ex.: <input disabled="disabled">
readonly
Atribut optional. Specifica faptul ca elementul INPUT este accesibil doar in modul citire. In cazul in care este setat atributul READONLY, elementul INPUT nu va putea fi modificat/editat, dar va putea fi selectat si copiat. Atributul READONLY poate fi setat daca se doreste ca elementul INPUT sa fie inutilizabil de catre un utilizator pana cand nu este indeplinita o alta conditie (ca de exemplu bifarea unei casete de selectare, etc.). Apoi, cu JavaScript valoarea READONLY poate fi anulata si elementul INPUT devine utilizabil. Valoare: "readonly". Ex.: <input readonly="readonly">
src
Atribut optional. Atributul SRC este folosit numai impreuna cu <input type="image"> si specifica URL-ul imaginii ce va fi afisata ca si buton Submit. Atributul SRC este obligatoriu in cadrul sintaxei <input type="image">. Valori posibile: o cale absoluta catre fisierul imagine (ex. src="http://www.exemplu.com/imagine.jpg") o cale relativa (ex. src=" imagine.jpg)
accesskey class dir Id lang style tabindex title xml:lang
Atribute standard. Functionalitatile acestor atribute sunt descrise in cap. 6.2 ANCHOR
Exemplul 9.4. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>
______________________________________________________________________________________________
Curs: HTML
<title>Exemplu FORM - INPUT </title> </head> <body> <form action="fisier.php" method="post"> Nume: <input type="text" name="nume_prenume"><br> Adresa: <input type="text" name="adr" value="Adresa de corespondenta" size="60"><br> Telefon: <input type="text" name="tel" maxlength="10"><br> Doresc un abonament:<br> <input type="checkbox" name="ab_lunar" value="lunar" checked="checked"> Lunar<br> <input type="checkbox" name="ab_trim" value="trimestrial">Trimestrial<br> <input type="checkbox" name="ab_anual" value="anual">Anual<br> <input type="checkbox" name="alt_tip" value="alt_tip" disabled="disabled">Alt tip de abonament<br> <input type="submit" value="Trimite comanda"> </form> </body> </html>
9.4.2. Atributul TYPE - valoarea TEXT

TEXT este valoarea implicita pentru elementul INPUT si creaza o caseta de introducere a textului de lungime specificata (lungimea implicita este de 20 caractere). <input type="text" name="nume" size="valoare" maxlength="valoare"> Printre atributele ce pot fi folosite impreuna cu tipul TEXT sunt: NAME pentru specificarea numelui controlului, SIZE pentru specificarea lungimii controlului, MAXLENGTH pentru specificarea numarului maxim de caractere ce pat fi introduse, DISABLED pentru a dezactiva controlul si VALUE pentru a afisa un text implicit.
9.4.3. Atributul TYPE - valoarea PASSWORD

Optiunea PASSWORD este aproape identica cu TEXT cu exceptia faptului ca in loc sa fie afisat in caseta caracterul tiparit este afisat un marcator pentru a preveni citirea lor de care persoane neautorizate. O caseta de introducere parola se creaza astfel: <input type="password" name="nume" size="valoare" maxlength="valoare"> Printre atributele utilizabile impreuna cu tipul PASSWORD sunt: NAME specifica numele controlului, SIZE dimensiunea campului, MAXLENGTH lungimea maxima a sirului de caractere introdus, DISABLED camp inactiv si VALUE valoarea implicita.
______________________________________________________________________________________________
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu FORM - INPUT TYPE=TEXT/PASSWORD</title> </head> <body> <form action="fisier.php" method="post"> Nume: <input type="text" name="nume" size="23"><br> Prenume: <input type="text" name="prenume"><br> Parola: <input type="password" name="parola" maxlength="8" size="9"><br> <input type="submit" value="Submit"> </form> </body> </html>
9.4.4. Atributul TYPE - valoarea CHECKBOX

Determina crearea unei casete de validare si este folosita atunci cand valorile posibile sunt de tip boolean DA/NU (caseta poate fi bifata sau poate ramane libera). <input type="checkbox" name="nume" value="valoare" checked> Printre atributele utilizabile impreuna cu tipul CHECKBOX sunt: NAME specifica numele controlului, CHECKED defineste caseta ca fiind selectata in mod implicit DISABLED defineste caseta ca fiind inutilizabila VALUE valoarea returnata serverului Exemplul 9.6. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu FORM - INPUT TYPE=CHECKBOX</title> </head> <body> <form action="fisier.php" method="post"> Vreau sa invat:<br> <input type="checkbox" name="webdesign" value="html"> html<br> <input type="checkbox" name="webdesign" value="css"> css<br> <input type="checkbox" name="webdesign" value="psd"> photoshop<br> <input type="checkbox" name="nimic" value="nimic" disabled="disabled"> Nimic<br> </form> </body> </html>
______________________________________________________________________________________________
Curs: HTML
9.4.5. Atributul TYPE - valoarea RADIO

Valoarea RADIO este asemanatoare cu CHECKBOX, insa cu ceva mai complexa. Butoanele radio pot fi grupate prin folosirea aceluiasi nume la atributul NAME, astfel va fi acceptat un singur raspuns dintre toate optiunile posibile. <input type="radio" name="nume" value="valoare" checked="checked"> RADIO necesita folosirea atributului VALUE pentru a face diferenta intre optiuni, precum si atributul NAME pentru crearea unui grup de optiuni. Pentru butoanele radio este important sa fie atribuita o valoare initiala implicita prin folosirea atributului CHECKED, deoarece exista posibilitatea ca utilizatorul sa nu selecteze nici o optiune din cele puse la dispozitie. Exemplul 9.7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu FORM - INPUT TYPE=RADIO</title> </head> <body> <form action=""> Imi place sa ascult muzica in timp ce invat:<br> <input type="radio" name="muzica" value="y"> Da<br> <input type="radio" name="muzica" value="n" checked="checked"> Nu<br> <input type="radio" name="muzica" value="poate"> Nu stiu<br> </form> </body> </html>
9.4.6. Atributul TYPE - valoarea RESET

Folosirea valorii RESET pentru atributul TYPE determina afisarea unui buton care are functia de a sterge datele din elementele formularului si aducerea lor la valorile initiale. <input type="reset" value="valoare"> Se poate folosi atributul VALUE pentru a redenumi butonul (stipuleaza textul ce apare pe buton altul decat cel implicit Reset). Se recomanda folosirea butonului RESET cu mare precautie, prin indicarea cat mai explicita a efectului pe care il are la actionare, pentru ca actionarea accidentala a acestuia poate fi neplacuta pentru utilizator. Exemplul 9.8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu FORM - INPUT TYPE=TEXT/PASSWORD</title> </head> <body> <form action="fisier.php" method="post"> Nume: <input type="text" name="nume" size="23"><br>
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web Prenume: <input type="text" name="prenume"><br> Parola: <input type="password" name="parola" maxlength="8" size="9"><br> <input type="reset" value="Sterge"><input type="submit" value="Trimite"> </form> </body> </html>
Curs: HTML
9.4.7. Atributul TYPE - valoarea SUBMIT

SUBMIT afiseaza un buton cu functia predefinita de a trimite datele din formular la serverul web pentru a fi procesate. <input type="submit" value="valoare"> Se poate folosi atributul VALUE pentru a redenumi butonul (stipuleaza textul ce apare pe buton altul decat cel implicit Submit Query).
9.4.8. Atributul TYPE - valoarea IMAGE

Valoarea IMAGE a atributului type prezinta o singura diferenta fata de SUBMIT: inlocuieste butonul cu o imagine specificata. Altfel, indeplineste aceeasi functie. Necesita utilizarea atributului SRC pentru definirea URL-ului fisierului imagine. Declararea se face astfel: <input type="image" src="URL_fisier_imagine"> Exemplul 9.9. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu FORM - INPUT TYPE=IMAGE</title> </head> <body> <form action="fisier.php" method="post"> Nume: <input type="text" name="nume"><br> Prenume: <input type="text" name="prenume"><br> <input type="image" src="imagini/trimite.png" alt="Trimite" width="70" height="20"> </form> </body> </html>
9.4.9. Atributul TYPE - valoarea BUTTON

Daca butoanele definite prin SUBMIT si RESET au actiuni predefinite, butoanele definite prin BUTTON indeplinesc functii specificate de utilizator printr-un script. Tipul BUTTON este folosit de obicei pentru a activa un script JavaScript cand butonul este actionat. Declararea unui buton se face in felul urmator: <input type="button" name="nume" value="valoare" onclik="script">
______________________________________________________________________________________________
Curs: HTML
unde name specifica numele controlului, value este textul care afisat pe buton, iar la evenimentul onClick precizeaza scriptul care se ruleaza la apasarea butonului. Exemplul 9.10. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu FORM - INPUT TYPE=BUTTON</title> <script type="text/javascript"> function mesaj() { alert("Hello!"); } </script> </head> <body> <form> <input type="button" value="Clic aici!" onclick="mesaj()"> </form> <p>Butonul de mai sus activeaza scriptul JavaScript definit in partea de HEAD.</p> </body> </html>
9.4.10. Atributul TYPE - valoarea HIDDEN

Acest tip de element defineste un camp INPUT care nu este vizibil pentru utilizator. Campurile HIDDEN stocheaza de obicei valori implicite, sau valori pentru a fi schimbate cu JavaScript, fiind in general folosit pentru a transmite la serverul web siruri de caractere invizibile utilizatorului. <input type="hidden" name="nume" value="valoare"> Are ca efect trimiterea unor perechi nume/valoare impreuna cu restul informatiei din formular. Exemplul 9.11. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu FORM - INPUT TYPE=HIDDEN</title> </head> <body> <form action="fisier.php" method="post"> Nume: <input type="text" name="nume"><br> Prenume: <input type="text" name="prenume"><br> <input type="hidden" name="etapa" value="semI"><br> <input type="submit" value="Trimite"> </form> </body> </html>
______________________________________________________________________________________________
Curs: HTML
9.5. Elementul BUTTON

Crearea butoanelor in formulare se realizeaza in doua moduri: prin precizarea valorilor submit, reset sau button in atributul type din elementul INPUT prin folosirea elementului BUTTON. In cadrul unui element BUTTON se poate pune continut precum text sau imagini. Aceasta este diferenta intre acest element si butoanele create cu ajutorul elementului INPUT. Trebuie sa fie specificat intotdeauna atributul TYPE pentru elementul BUTTON (tipul butonului), altfel browserele pot interpreta diferit butonul. Valoarea implicita in Internet Explorer este button, iar pentru alte browsere este submit (precum si in specificatia W3C). NOTA: Atributul VALUE din cadrul elementului BUTTON nu este recunoscut de catre toate browserele importante (de ex. Internet Explorer ignora acest atribut), astfel ca, la trimiterea datelor catre server, valoarea specificata in cadrul acestui atribut este ignorata (fiind trimis in schimb textul continut intre <button> si </button>). De aceea, intervin diferente la executarea elementului BUTTON. Datorita acestor diferente care pot interveni intre browsere, se recomanda folosirea elementului INPUT pentru a crea butoane in formulare. Elementul BUTOON are forma: <button name="nume" value="valoare" type="button|submit|reset">text</button> Cele trei valori ale atributului type au ca efect: submit: trimite datele din formular la serverul web reset: reseteaza datele din controalele formularului button: creaza un buton a carui actiune este definita printr-un script
Atributele elementului BUTTON sunt: Atribut name Functie Atribut optional. Defineste numele butonului. Atributul name este folosit pentru a identifica datele din formular dupa ce acestea au fost trimise la server, sau pentru a se face referire la datele din formular in cazul in care se foloseste JavaScript. Valoare: nume buton. value Atribut optional. Defineste o valoare pentru un element BUTTON. Acest atribut este recunoscut de majoritatea browserelor importante, mai putin Internet Explorer.
Valoare: text
type
Atribut optional. Stabileste tipul unui element BUTTON. Valori posibile: - button - reset - submit
disabled
Atribut optional. Specifica faptul ca elementul BUTTON este incativ. In cazul in care este setat atributul disabled, elementul BUTTON nu poate fi utilizat. Atributul DISABLED poate fi setat astfel incat elementul BUTTON sa fie inutilizabil de Acest document este proprietatea Institutului Multimedia Romano-Elvetian.
______________________________________________________________________________________________
Curs: HTML
catre un utilizator pana cand nu este indeplinita o alta conditie (ca de exemplu bifarea unei casete de selectare, etc.). Apoi, cu JavaScript valoarea DISABLED poate fi anulata si elementul BUTTON devine utilizabil. Valoare: disabled. accesskey class dir id lang style tabindex title xml:lang Atribute standard. Functionalitatile acestor atribute sunt descrise in cap. 6.2 ANCHOR
Exemplul 9.12. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu FORM - BUTTON</title> <script type="text/javascript"> function mesaj() { alert("Fereastra generata cu JavaScript"); } </script> </head> <body> <form> <button type="button" onclick="mesaj()">Clic aici!</button><br> <button type="button" onclick="mesaj()"><img src="imagini/buton.png" alt="Clic aici!" width="100" height="100"></button> <p>Cele doua butoane de mai sus au acelasi efect generat cu JavaScript, insa aspectul difera in functie de continutul elementului BUTTON.</p> <p> </p> Nume: <input type="text" name="nume"><br> <button type="reset" value="Sterge">Sterge</button> <p>Butonul de mai sus este creat cu ajutorul elementului BUTTON si se comporta ca si butonul creat cu elementul INPUT pentru care type="reset" si value="Sterge".</p> </form> </body> </html>
9.6. Elementul LABEL

LABEL defineste o eticheta pentru elementul INPUT si specifica textul care eticheteaza acest control. Spre deosebire de textul normal, eticheta si controlul asociat impart aceeasi focalizare. Eticheta LABEL nu genereaza un efect vizual special pentru utilizator, dar ofera o metoda imbunatatita de activare a controlului, intrucat acesta poate fi activat inclusiv dand clic pe textul din cadrul elementului LABEL.
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web <label for="nume_control"> ... </label>
Curs: HTML
Etichetele se asociaza controalelor prin doua metode: implicita: elementul asociat este continut in LABEL explicit: eticheta este legata de control prin specificarea id-ului acestuia in atributul FOR Atributele elementului LABEL sunt: Atribut for Functie Atribut optional. Specifica de care element al formularului este legat LABEL. Valoare: id-ul elementului INPUT. accesskey class dir id lang style tabindex title xml:lang Atribute standard. Functionalitatile acestor atribute sunt descrise in cap. 6.2 ANCHOR
Exemplul 9.13. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu FORM - LABEL</title> </head> <body> <p>Urmatoarele doua controale pot fi activate inclusiv dand clic pe textele din cadrul elemntelor LABEL.</p> <form action="fisier.php" method="post"> <label for="da">Da</label> <input type="radio" name="raspuns" id="da"> <br> <label for="nu">Nu</label> <input type="radio" name="raspuns" id="nu"> </form> </body> </html>
9.7. Elementul FIELDSET

FIELDSET este o eticheta HTML care creaza o caseta in jurul unui grup de controale. Impreuna cu FIELDSET se foloseste elementul LEGEND prin care se poate preciza o eticheta (un titlu) pentru setul de campuri. Definirea se face astfel: <fieldset> <legend align="top|bottom|right|left">
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web ... definire campuri ... </legend> </fieldset>
Curs: HTML
Ambele elemente necesita si eticheta de sfarsit, ia alinierea se face in raport cu setul de campuri, nu cu pagina. Atributele standard pe care le poate avea eticheta FIELDSET sunt: class, dir, id, lang, style, title, xml:lang (functionalitatile acestor atribute sunt descrise la subcapitolul 2.2.2.1), iar eticheta LEGEND prezinta in plus fata de acestea si atributul standard accesskey. Exemplul 9.14. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu FORM - FIELDSET</title> </head> <body> <form action="fisier.php" method="post"> <fieldset> <legend>Date de contact:</legend> <p>Nume: <input type="text" name="nume"></p> <p>Email: <input type="text" name="email"></p> <input type="reset" value="Sterge"><input type="submit" value="Trimite"> </fieldset> </form> </body> </html>
9.8. Atribute comune

Exista o serie de atribute care sunt comune elementelor ce intra in componenta formularelor. Printre acestea se numara: disabled, tabindex si accesskey.
9.8.1. Dezactivarea
Atributul DISABLED permite dezactivarea unui element. Daca elementul este dezactivat, atunci continutul sau este imposibil de folosit, fiind scos si din ordinea de tabulare (perechile nume/valoare nu sunt incluse in datele transmise serverului web). In cazul in care elementul dezactivat este un buton, starea de dezactivare poate fi schimbata doar prin intermediul unui script.
9.8.2. Navigarea
Atributul TABINDEX este folosit pentru navigarea intre elementele unui formular cu ajutorul tastei TAB. Daca atributul nu este specificat, atunci ordinea de parcurgere este ordinea in care apar elementele in cadrul formularului. Pentru a stabili ordinea de navigare, atributului i se atribuie valori intregi, astfel parcurgerea se va face in ordinea crescatoare a valorilor. Nu este necesar ca aceste valori sa fie consecutive, din contra este bine sa se lase valori libere pentru cazul in care vor fi introduse controale noi ulterior.
______________________________________________________________________________________________
Curs: HTML
Pentru a inlatura un element din ordinea de navigare, fara a-l dezactiva, trebuie ca valoarea atributului tabindex sa fie negativa.
9.8.3. Taste de acces

Pentru accesul direct la un element din formular, acestuia se atribuie un hot-key format prin combinatia ALT+tasta_asociata, sau ALT+SHIFT+tasta_asociata, sau CTRL+tasta_asociata, etc., in funtie de browser si de sitemul utilizat. Folosind atributul ACCESSKEY se stabileste o tasta de acces la un element. Este frecvent folosita pentru selectarea optiunilor din meniuri, dar si in multe alte scopuri. Exemplul 9.15. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Exemplu de document html care contine un formular de guestbook</title> </head> <body> <p>Introduceti datele personale si expediati-le</p> <form method="post" action="mailto:webmaster@iim.ro"> <table border="0" cellpadding="2" cellspacing="0" width="100%"> <tr> <td width="15%">Nume </td> <td width="85%"><input type="text" accesskey="n" name="nume" size="20">(Accesskey N)</td> </tr> <tr> <td width="15%">Prenume</td> <td width="85%"><input type="text" accesskey="p" name="prenume" size="20">(Accesskey P)</td> </tr> <tr> <td width="15%">Varsta</td> <td width="85%"><select size="1" name="varsta"> <option selected>15-19</option> <option accesskey="2">20-29</option> <option accesskey="3">30-39</option> <option accesskey="4">40-49</option> </select></td> </tr> <tr> <td width="15%">Sex</td> <td width="85%"><input type="radio" value="m" checked name="sex">M    <input type="radio" name="sex" value="f">F</td> </tr> <tr> <td width="15%">E-mail</td> <td width="85%"><input type="text" name="mail" size="40"></td> </tr> <tr> <td width="15%">Comentarii</td> <td width="85%"><textarea rows="4" name="coment" cols="40"></textarea></td> </tr> </table>
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web <p><input type="submit" value="trimite" name="trimite">     <input type="reset" value="renunta" name="renunta"></p> </form> </body> </html>
Curs: HTML
______________________________________________________________________________________________
Curs: HTML

Eticheta <form>...</form> Atribute action method enctype name class dir id lang style title xml:lang cols rows disabled readonly name class dir id lang style title xml:lang disabled name multiple class dir id lang style title xml:lang value selected class dir id lang style title xml:lang label class dir id lang Functie Defineste un formular.
<textarea>...</textarea>
Definest eun camp pentru adaugare text.
<select>...</select>
Defineste o lista derulanta de optiuni.
<option>...</option>
Defineste un element (o optiune) al unei liste derulante.
<optgroup>...</optgroup>
Grupeaza elemente ale unei liste derulante.
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web style title xml:lang name size maxlength value checked type disabled readonly src accesskey class dir Id lang style tabindex title xml:lang name value type disabled accesskey class dir id lang style tabindex title xml:lang for accesskey class dir id lang style tabindex title xml:lang class dir id lang style title xml:lang
Curs: HTML
<input>
Defineste o gama variata de controale: buton de executie/trimitere a datelor dintr-un formular, buton de stergere a datelor dintr-un formular, buton personalizat pentru executarea unui script, caseta de validare, camp pentru incarcarea unui fisier, camp de introducere a parolei, buton de selectie, camp pentru introducere text.
<button>...</button>
Defineste un buton de comanda.
<label>...</label>
<fieldset>...</fieldset>
Defineste o caseta in jurul unui grup de controale.
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web <legend>...</legend> accesskey class dir id lang style title xml:lang
Curs: HTML
Defineste o eticheta / un titlu pentru grupul de controale cuprins intr-un cadru <fieldset>.
______________________________________________________________________________________________
Curs: HTML
Capitolul 10. XHTML

XHTML (Extensible Hypertext Markup Language) este o familie de limbaje de markup XML care egaleaza si extinde versiuni ale limbajului in care sunt scrise paginile web (Hypertext Markup Language) HTML - folosit pe scara atat de larga. XML este un limbaj de marcare in care totul trebuie sa fie marcat corect, ceea ce duce la documente bine construite. XML este conceput sa descrie date, iar HTML este conceput sa afiseze date. XHTML este o versiune mai stricta si mai curata a HTML.
10.1 Diferente intre HTML si XHTML

Desi HTML si XHTML par sa aiba aceeasi sintaxa, acestea sunt semnificativ diferite in multe feluri. Una dintre diferente este: XHTML foloseste o sintaxa XML (Extensible Markup) in timp ce HTML foloseste o sintaxa pseudo-SGML (Standard Generalized Markup). Diferente de sintaxa: In general regulile XML impun ca toate elementele sa fie inchise, fie printr-o eticheta de inchidere separata (ex. </p>, </table>, etc.), fie folosind sintaxa de inchidere automata (ex. <br />), in timp ce HTML permite ca unele elemente sa fie nefinalizate fie pentru ca ele sunt intotdeauna goale (ex. <input>), fie pentru ca sfarsitul lor poate fi determinat implicit (ex. <p>); XML este case-sensitive (face deosebirea intre litere mici si litere mari) pentru nume de elemente si atribute, in timp ce HTML nu este; Unele caracteristici de prescurtare din HTML nu se regasesc si in XML. De exemplu: - minimizarea atributelor unele valori ale atributelor sau ghilimelele care incadreaza aceste atribute pot lipsi in HTML (exemplu <option selected> sau <option selected=selected>, in timp ce in XML acesta trebuie exprimata astfel: <option selected="selected">); - minimizarea elementelor poate fi folosita pentru a elimina elemente cu totul de exemplu eticheta <tbody> poate sa lipseasca din codul HTML si in acest caz este dedusa; - mai exista sintaxa SGML - rar utilizata - pentru minimizarea unui element "shorttag" pe care multe browsere nu o implementeaza. Exista numeroase alte cerinte tehnice privind numele de spatii, privind analiza spatiilor albe, privind anumite caractere, elemente, etc. Diferente de comportament: Pe langa diferentele sintactice, care sunt minore, exista si unele diferente de comportament. De exemplu: Cel mai vizibil este comportamentul diferit la anliza erorilor. O eroare fatala de analiza in XML (determinata de exemplu de o structura incorecta a unei etichete) cauzeaza abandonarea prelucrarii documentului. Cel mai mult continut ce necesita nume de spatii nu va functiona in HTML, cu cateva exceptii Procesarea JavaScript este usor diferita, cu diferente minore de scriere a unor functii tinand cont de caracteristica case-sensitive a XML. CSS se aplica de asemenea putin diferit datorita caracteristicii case-sensitive si a unor diferente in manipularea background-ului pentru <html> si <body> in HTML si XHTML. Exemple de structuri XHTML: - elementele XHTML trebuie sa fie complet si corect definite, fara a fi omise atributele obligatorii Gresit <input type="radio" checked> SAU Corect <input type="radio" checked="checked" />
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web <input type="checkbox" checked=checked> <img src="poza.jpg">
Curs: HTML
<img src="poza.jpg" alt="poza" />
- elementele XHTML trebuie sa fie inchise intotdeauna Gresit <li>element lista <option>optiune <br> - elemetele XHTML se scriu cu litere mici Gresit <P>Paragraf <B>1</B></P> Corect <p>Paragraf <b>1</b></p> Corect <li>element lista</li> <option>optiune</option> <br />
- elementele trebuie incadrate in ordinea corecta Gresit <b><i>Text</b></i> Corect <b><i>Text</i></b>
- eticheta <html> in XHTML are atributul xmlns (XML NameSpace), cu valoarea adresa URL unde sunt prezentate specificatiile W3C. Gresit <html> ... </html> Corect <html xmlns="http://www.w3.org/1999/xhtml"> ... </html>
- declaratia DOCTYPE in cadrul unui document XHTML are una din formele: Declaratia XHTML DOCTYPE transitional: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Acest DTD contine toate elementele si atributele HTML, inclusiv elmente de prezentare sau invechite (precum font). Cadrele nu sunt permise. De asemenea, limbajul de marcare trebuie sa fie format corect din punct de vedere XML. Declaratia XHTML DOCTYPE strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Acest DTD contine toate elementele si atributele HTML, dar nu include elemente de prezentare sau invechite (precum font). Cadrele nu sunt permise. De asemenea, limbajul de marcare trebuie sa fie format corect din punct de vedere XML. Declaratia XHTML DOCTYPE frameset: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Acest DTD este egal cu XHTML 1.0 Transitional, dar permite utilizarea cadrelor.
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Curs: HTML
Acest DTD este egal cu XHTML 1.0 Strict, dar va permite sa adaugati module (de exemplu, pentru a oferi sprijin Ruby pentru limbile est-asiatice). Declaratia DOCTYPE nu are tag de inchidere. - structura generala a unui document XHTML: Exemplul 10.1. <!DOCTYPE html PUBLIC ... > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Titlul paginii XHTML</title> </head> <body> Continutul pagini XHTML </body> </html>
______________________________________________________________________________________________
Curs: HTML
Capitolul 11. HTML 5

HTML 5 este urmatoarea revizuire majora a HTML si in momentul actual este inca in curs de dezvoltare. Acest nou standard include tag-uri si API-uri pentru o interactivitate sporita, multimedia si geolocalizare. Pe masura ce browserele au inceput sa ofere suport pentru HTML 5, dezvoltatorii au inceput sa-si exprime speranta ca noul standard ii va elibera de dependenta de plug-in-uri precum: Adobe Flash, QuickTime, Microsoft Silverlight, etc. Elementele pe care le aduce in plus HTML5 fata de versiunile precedente: stocare offline a datelor: faciliteaza memorarea datelor in volum mai generos. grafica interactiva: un spatiu special destinat pentru galerii de poze, grafice, jocuri interactive si alte elemente prin care se realizeaza interactiunea cu utilizatorul, fara implicarea unui plugin precum Flash Player. suport nativ pentru audio si video: inca in stadiu de dezvoltare; ideea de baza este ca o pagina de net va putea integra filme / muzica, eliminand nevoia plugin-urilor. geolocalizare: sistem de localizare aproximativa a utilizatorului pe baza IP-ului formulare inteligente: suport mai robust pentru validarea datelor, interactiunea dintre campurile formularelor, trimiterea email-urilor etc. aplicatii web: elemente si atribute care faciliteaza crearea aplicatiilor care traiesc in pagini web, cum ar fi drag-and-drop si transmiterea de date in timp real
In ceea ce priveste declaratia DOCTYPE, in HTML5 aceasta este semnificativ simplificat fata de formele anterioare: <!DOCTYPE html> Tag-ul meta charset este mult mai simplu in HTML 5: <meta charset="UTF-8"> Div-urile sunt folosite in HTML 5 mai mult pentru stilizarea continutului decat pentru a structura pagina - asa cu se obisnuia sa se procedeze in versiunile anterioare. HTML 5 include o serie de noi elemente structurale care ajuta la definirea partilor documentului. Elementele structurale principale introduse odata cu HTML 5 sunt: <header> <nav> <section> <article> <aside> <footer> Desi elementele enumerate par mai mult pozitii in document si foarte des vor fi utilizate in acest sens, acestea se refera la gruparea elementelor si nu la pozitionare. Pot exista de exemplu 3 sectiuni - <sections> - in pagina si fiecare sectiune sa aiba propriul antet - <header> - si subsol - <footer>. Aceste elemente pot fi folosite mai mult de o data pe o pagina (ca si clasele CSS). Un exemplu simplu de document HMTL 5 care contine un antet, un meniu de navigare, o sectiune de continut, care cuprinde cateva articole, un meniu de navigare lateral si un subsol, este urmatorul: Exemplul 11.1. <!doctype html> <html> <head> <meta charset="utf-8">
______________________________________________________________________________________________
Curs: HTML
<title>Document de baza</title>  <style>header, footer, section, aside, nav, article {display: block;}</style> </head> <body> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Despre noi</a></li> <li><a href="#">Produse</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <header> <h1><a href="#">Document de baza - HTML 5</a></h1> <h2>Aici poate fi adaugat un slogan</h2> </header> <section> <article> <h3><a href="#">Titlul primului articol</a></h3> <img src="imagini/flower.jpg" alt="flower" width="150" height="113"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. </p> </article> <article> <h3><a href="#">Titlul celui de-al doilea articol</a></h3> <img src="imagini/tree.jpg" alt="tree" width="150" height="117"> <p>Praesent libero. Sed cursus ante dapibus diam.</p> </article> </section> <aside> <h4>Urmariti-ne pe:</h4> <ul> <li><a href="#">Twitter</a></li> <li><a href="#">Facebook</a></li> </ul> </aside> <footer> <p>All rights reserved.</p> </footer> </body> </html> Nota: Elementul <script> inclus in partea de HEAD permite stilizarea elementelor in Internet Explorer. Este inclusa de asemenea definirea unui stil CSS de baza, pentru a ajuta browserele in redarea unor elemente ca si elemente la nivel de bloc. Atribut name Functie Atribut optional. Defineste numele controlului. Este solicitat la toate tipurile, exceptie fac submit si reset. Atributul name este folosit pentru a identifica datele din formular dupa ce acestea au fost trimise la server, sau pentru a se face referire la datele din formular in cazul in care
______________________________________________________________________________________________
Curs: HTML
se foloseste JavaScript. NOTA: Dintre elementele unui formular, numai valoarile celor care au atributul NAME setat vor fi transmise catre server cand formularul este executat. Valoare: nume pentru elementul INPUT.
Lista atributelor standard in HTML 5:
Atribut accesskey class contenteditable [NOU] contextmenu [NOU] data-valoareproprie [NOU] dir draggable [NOU] hidden [NOU] id item [NOU] itemprop [NOU] lang spellcheck [NOU] style subject [NOU] tabindex title
Valoare caracter nume_clasa true false menu_id value
Descriere Specifica o tasta de acces pentru element. Specifica un nume de clasa. Specifica daca utilizatorul poate edita continutul sau nu. Specifica meniul din cadrul caruia face parte elementul. Atribut definit de autor. Autorii documentelor HTML pot defini propriile atribute. Acestea trebuie sa inceapa in mod obligatoriu cu data-. Specifica directia textului continut. Specifica daca elementul poate fi tarat (drag) sau nu.
ltr rtl true false auto hidden id nimic URL URL valoare_pentru_grup cod_limba true false Definitie_stil id number text
Specifica faptul ca elementul nu este irelevant (ascuns). Elementele cu acest atribut nu sunt afisate. Specifica un identificator unic pentru element. Folosit pentru a grupa elemente. Folosit pentru a grupa elemente item. Specifica limba in care este scris continutul. Specifica daca elementul trebuie verificat sau nu din punct de vedere ortografic sau gramatical. Specifica stilul inline. Specifica item-ul corepondent pentru element. Specifica ordinea elementului. Specifica extra-inormatii despre element.
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web Tag-urile introduse odata cu HTML 5 sunt: Tag <article> ... </article> Atribut
Curs: HTML
Functie Marcheaza un articol, care poate fi o stire de la un furnizor extern, sau text de pe un blog sau forum, sau orice alt continut din surse externe; continutul etichetei <article> este independent de restul documentului
Atributele standard prezentate mai sus. <aside> ... </aside> Atributele standard prezentate mai sus. <audio> ... </audio> autoplay [NOU] Marcheaza introducerea de continut audio. Daca acest atribut este prezent, materialul audio se va derula in momentul in care este pregatit. Valoare: autoplay. Ex.: <audio autoplay="autoplay" /> controls [NOU] Acest atribut specifica faptul ca navigatorul trebuie sa ofere controale de redare audio. Cand acest atribut este setat, controalele sunt afisate, ca si butonul PLAY. Controalele navigatorului ar trebui sa includa: - Redare - Pauza - Cautare - Volum - Comutare pe tot ecranul - Legende / Subtitrari (atunci cand disponibile) - Audio track Valoare: "controls" sau sir vid. Ex.: <audio controls="controls"> loop [NOU] Marcheaza un continut aparte fata de continutul paginii, dar care are legatura cu acesta.
sunt
Atributul loop precizeaza ca materialul audio va reincepe automat de fiecare data cand este terminat. Valoare: "loop" sau sir vid. Ex.: <audio loop="loop"> Acest atribuit specifica daca materialul audio sa fie incarcat sau nu odata cu pagina. Acest atribut este ignorat daca atributul "autoplay" este setat. Valori posibile: - auto incarca intregul fisier audio cand pagina este incarcata - meta incarca numai informatiile meta cand
preload [NOU]
______________________________________________________________________________________________
Curs: HTML pagina este incarcata none nu incarca fisierul audio cand pagina este incarcata Daca este declarat un sir vid, acesta este echivalent cu valoarea "auto". Ex.: <audio preload="load">
src [NOU]
Acest atribut specifica URL-ul fisierului audio. Valori posibile: - o cale absoluta catre fisierul audio (ex. src="http://www.exemplu.com/audio.ogg") - o cale relativa (ex. src="audio.ogg) Ex.: <audio src="URL">
Atributele standard prezentate mai sus. <canvas> ... </canvas> Marcheaza introducerea de continut grafic. Eticheta <canvas> este doar un container pentru elementele grafice, trebuie folosit un script pentru a le crea efectiv. height [NOU] Seteaza inaltimea cadrului. Se precizeaza in pixeli. Valoarea implicita este 150 pixeli.
<command>...</command>
width Seteaza latimea cadrului. Se precizeaza in pixeli. [NOU] Atributele standard prezentate mai sus. Marcheaza un buton de comanda, ca un buton radio sau checkbox. Elementul <command> trebuie sa fie in interiorul unui element <menu>, altfel nu va fi vizibil. checked [NOU] Defineste daca o comanda este selectata sau nu. Se foloseste numai daca tipul este butonului (type) este "radio" sau "checkbox". Valoare posibila: "checked" Defineste daca o comanda este valabila sau nu. Valoare posibila: disabled Defineste URL-ul unei imagini care va fi afisata ca si comanda. Valori posibile: o cale absoluta sau o cale relativa catre fisierul imagine. Defineste un nume pentru comanda. Eticheta este vizibila. Valoare: numele pentru comanda radiogroup [NOU] Defineste numele grupului radio caruia ii apartine aceasta comanda. Se foloseste numai daca tipul este "radi". Valoare: numele grupului radio.
disabled [NOU] icon [NOU]
label [NOU]
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web type [NOU] Defineste tipul comenzii.
Curs: HTML
Valori posibile: "checkbox", "command", "radio" Valoarea implicita este "command".
Atributele standard prezentate mai sus. <datalist>...<datalist> Defineste o lista de optiuni; acest element se foloseste impreuna cu eticheta <input> care contine atributul "list" (NOU) pentru a defini ce valori poate lua acesta. Optiunile nu vor fi afisate, <datalist> genereaza doar o lista cu valori de identificare pentru "input". Atributele standard prezentate mai sus. <details>...</details> Descrie detalii ale unui document sau ale unei parti oarecare a documentului. Se foloseste impreuna cu eticheta <summary> pentru a crea un antet special pentru detalii. Continutul elementului <details> nu ar tebui sa fie vizibil decat daca este setat atributul open. open [NOU] Atributele standard prezentate mai sus. <embed> height [NOU] Marcheaza continut interactiv extern sau introducerea unui plugin. Seteaza inaltimea continutului inclus. Valoare: inaltimea in pixeli (ex.: height="100px" sau doar height="100") Specifica URL-ul continutului care va fi inclus. Valori posibile: o cale relativa catre fisier sau o cale absoluta. Specifica tipul MIME al continutului inclus. Valoare: tip MIME. Seteaza latimea continutului inclus. Valoare: latimea in pixeli (ex.: width="100px" sau doar width="100") Defineste daca detaliile sunt vizibile sau nu. Valori posibile: sir vid sau "open".
src [NOU]
type [NOU] width [NOU]
Atributele standard prezentate mai sus. <figcaption>...</figcaption> Contine o legenda pentru elementul <figure>. Trebuie folosit ca primul sau ultimul subelement al etichetei <figure>. Atributele standard prezentate mai sus. <figure>...</figure> Marcheaza un grup de elemente care au legatura unul cu celalalt si care este continut de sine statator considerat
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web in pagina. Atributele standard prezentate mai sus. <footer>...</footer>
Curs: HTML
Marcheaza sectiunea de subsol - footer - a paginii. De obicei contine numele autorului, data crearii documentului, informatii ce contact, etc. Daca este definit elementul <footer>, o eventuala utilizare a etichetei <address> poate avea loc in cadrul acestui element. Atributele standard prezentate mai sus.
<header>...</header> Atributele standard prezentate mai sus. <hgroup>...</hgroup>
Marcheaza sectiunea de antet, de introducere a paginii sau a unei sectiuni.
Marcheaza un antet al unei sectiuni sau a unui document. Elementul HGROUP este utilizat pentru a grupa headinguri - <h1> pan la </h6>. Atributele standard prezentate mai sus.
<keygen> autofocus [NOU]
Marcheaza o cheie generata automat. Activeaza campul INPUT cand se incarca pagina. Nu poate fi utilizat impreuna cu type="hidden". Valori posibile: "autofocus" sau un sir vid. challenge [NOU] Daca acest atribut este prezent, valoarea cheii este ceruta la trimtierea datelor (submit). Valoare posibila: text / sir de caractere. disabled [NOU] Dezactiveaza elementul INPUT la incarcarea paginii, astfel incat utilizatorul sa nu poata scrie text in cadrul acestui element, sau sa nu-l poata selecta. Nu poate fi utilizat impreuna cu type="hidden". Valori posibile: "disabled", sau un sir vid form [NOU] Specifica unul sau mai multe formulare carora le apartine campul INPUT. Valoare: valaorea atributului ID al formularului asociat. keytype [NOU] Defineste un tip de cheie. Valoare: rsa Valoarea rsa genereaza o cheie RSA (algoritm de criptografiere pentru chei publice). Defineste un nume unic pentru elementul INPUT. Atributul NAME este folosit pentru a colecta valorile din campurile formularului cand acesta este executat (submitted). Valoare: partea de nume din perechea nume/valoare
name [NOU]
______________________________________________________________________________________________
Curs: HTML asociata elementului curent cu scopul de a fi trimise catre server la executarea formularului.
Atributele standard prezentate mai sus. <mark>...</mark> Atributele standard prezentate mai sus. <menu>...</menu> Elementul <menu> a fost prezent in versiunile HTML pana la cel mult versiunea 2. A depreciat in versiunea 4 si apoi reluat in HTML5. <menu> contine elemente <command> care cauzeaza actiuni imediate. <command> este cuprins in elementul <menu> si determina comenzi /actiuni precum: afisare alerte, transformare in caseta de selectare (check box) cu atributul checked="checked", transformare caseta de selectare in buton radio prin specificarea atributului radiogrup a carui valoare este numele grupului ce contine doar butoanele reciproce. In plus fata de lista simpla de comenzi, prin utilizarea elementului <command> se poate crea o bara de instrumente sau un meniu pop-up prin setarea atributului type ca "toolbar" sau "popup". label [NOU] type [NOU] Deifneste o eticheta vizibila pentru meniu. Valoare: eticheta_meniu. Defineste ce tip de meniu sa fie afisat. Valori posibile: context, toolbar sau list. Valoarea implicita este "list". Marcheaza text evidentiat.
Atributele standard prezentate mai sus. <meter>...</meter> Defineste o masuratoare, marcand valoarea minima si valoarea maxima. Este folosita pentru masuratorile cu valorile minima si maxima cunoscute. high [NOU] Defineste punctul in care valoarea masuratorii este considerata a fi una ridicata. Valoare: numar. low [NOU] Defineste punctul in care valoarea masuratorii este considerata a fi una scazuta. Valoare: numar. max [NOU] min [NOU] Defineste valoarea maxima. Valoare: numar. Defineste valoarea minima. Valoare: numar.
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web optimum [NOU]
Curs: HTML Definestece valoarea a masuratorii este cea mai buna/potrivita. Daca aceasta este mai mare decat valoarea stabilita prin atributul "high", atunci cu cat mai mare, cu atat mai bine. Daca acesta este mai mica decat cea stabilita prin atributul "low", atunci cu cat ami mica, cu atat mai bine. Valoare: numar.
value [NOU] Atributele standard prezentate mai sus. <nav>...</nav>
Defineste valoarea masuratorii. Valoare: numar.
Marcheaza o zona de navigare cu linkuri. Daca este definit elementul <nav>, o eventuala utilizare a butoanelor "previous" si "next" trebuie sa aiba loc in cadrul acestui element. Atributele standard prezentate mai sus.
<output>...</output> for [NOU]
Marcheaza diferite tipuri de rezultate ale unui script oarecare. Identifica unul sau mai multe elemente asociate in caclulul al carui rezultat il reprezinta acest element. Valori posibile: un set de simboluri unice utilizate separate prin spatiu, fiecare din acestea reprezentand o referinta ID.
form [NOU]
Marcheaza valoarea atributului ID al formularului cu care este asociat elementul. Valoare: valoarea atributului ID al formularului asociat.
name [NOU]
Defineste un nume unic pentru element (folosit atunci cand formularul este executat - submitted). Valoare: partea de nume din perechea nume/valoare asociata elementului curent cu scopul de a fi trimise catre server la executarea formularului.
Atributele standard prezentate mai sus. <progress>...</progress> max [NOU] value [NOU] Marcheaza o bara de progres fie ea grafica sau numerica. Defineste valoarea de finalizare. Valoare: numar (zecimal mai mare sau egal cu zero). Defineste valoarea curent a progresului. Valoare: numar (zeicmal pozitiv). Valoarea acestui atribut trebuie sa fie mai mica sau egala cu valoarea atributului MAX. In cazul in care atributul MAX lipseste, valoarea atributului VALUE trebuie sa fie mai mica sau egala cu unu.
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web Atributele standard prezentate mai sus. <rp>
Curs: HTML
Defineste continut care va fi afisat in cazul in care browser-ul nu supotra tag-ul <ruby>. Un browser care suporta tag-ul <ruby> nu va afisa continutul elementului <rp>. Atributele standard prezentate mai sus.
<rt> Atributele standard prezentate mai sus. <ruby> Atributele standard prezentate mai sus. <section>
Defineste o explicatie sau o pronuntie pentru continutul tag-ului <ruby>.
Folosit pentru caracterele asiatice.
Atributul <section> marcheaza o sectiune oarecare intrun document, ca si header, footer, bara de navigare, capitole sau orice alta sectiune. O pagina web sau un articol pot avea mai multe sectiuni. Atributele standard prezentate mai sus.
<source>
Marcheaza sursa pentru elementele media precum <video> sau <audio>. Eticheta vida. media [NOU] Specifica pentru ce dispozitiv media este optimizat fisierul catre care trimite atributul src. Operatori posibili: - and specifica operatorul AND (si) - not specifica operatorul NOT (negatie) - , - specifica operatorul OR (sau) Dispozitive: - screen - tty - tv - projection - handheld - print - braille - aural - all (detalii in subcapitolul 2.2.1.5 LINK) Valori posibile: - width
- height specifica latimea zonei de afisare pot fi folosite prefixele "min" si "max" specifica inaltimea zonei de afisare pot fi folosite prefixele "min" si "max"
______________________________________________________________________________________________
Curs: HTML
- device-width - specifica latimea ecranului / hartiei - pot fi folosite prefixele "min" si "max" - device-height - specifica inaltimea ecranului / hartiei - pot fi folosite prefixele "min" si "max" - orientation - specifica orientarea ecranului / hartiei - valori: "portrait" sau "landscape" - aspect-ratio - specifica raportul latime-inaltime al zonei de afisare - pot fi folosite prefixele "min" si "max" - device-aspect-ratio - specifica raportul latime-inaltime pentru ecran / hartie - pot fi folosite prefixele "min" si "max" - color - specifica nr. de biti pentru fiecare culoare a zonei de afisare - pot fi folosite prefixele "min" si "max" - color-index - specifica nr. de culori pe care ecranul le poate suporta - pot fi folosite prefixele "min" si "max" - monochrome - specifica nr. de biti per pixel intr-un buffer de cadre monocrome - pot fi folosite prefixele "min" si "max" - resolution - specifica densitatea pixelilor (dpi sau dpcm) ecranului - pot fi folosite prefixele "min" si "max" - scan - specifica metoda de scanare a unui ecran tv - valori posibile: "progressive" si "interlace
- grid - specifica daca dispozitivul de iesire este grid sau bitmap - valori posibile: 1 pt. dispozitiv grid, 0 altfel (bitmap) Ex.: media="screen and (min-width:500px)" media="screen and (max-height:700px)" media="screen and (device-width:500px)" media="screen and (device-height:500px)" media="all and (orientation: landscape)" media="screen and (aspect-ratio:16/9)" media="screen and (device-aspect-ratio:16/9)" media="screen and (color:3)" media="screen and (min-color-index:256)" media="screen and (monochrome:2)" media="print and (resolution:300dpi)" media="tv and (scan:interlace)" media="handheld and (grid:1)"
src [NOU]
Specifica URL-ul fisierului media. Valori posibile: URL absolut, URL relativ.
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web type [NOU] Atributele standard prezentate mai sus. <summary>...</summary> Specifica tipul MIME al fisieurlui media. Valoare: tip MIME.
Curs: HTML
Defineste un antet al elementului <details>. Elementul <summary> trebuie sa fie primul element copil (subelement) al elementului <details>. Atributele standard prezentate mai sus.
<time>...</time> datetime [NOU] pubdate [NOU]
Marcheaza ora si/sau data. Specifica data si ora pe care le reprezinta elementul. Valori posibile: data, ora, sau data si ora. Indica faptul ca data si ora precizate element sunt cele ale publicarii articolului care cuprinde elementul (daca elementul este cuprins intr-un articol), sau a intregului document. Valori posibile: "pubdate" sau sir vid. Atributele standard prezentate mai sus.
<video>...</video> autoplay [NOU]
Marcheaza introducerea unui fisier video. Daca acest atribut este prezent, materialul video se va derula in momentul in care este pregatit. Valori posibile: "autoplay" sau sir vid.
preload [NOU]
Acest atribuit specifica daca materialul video sa fie incarcat sau nu odata cu pagina. Acest atribut este ignorat daca atributul "autoplay" este setat. Valori posibile: - auto incarca intregul fisier video cand pagina este incarcata - meta incarca numai informatiile meta cand pagina este incarcata - none nu incarca fisierul video cand pagina este incarcata Daca este declarat un sir vid, acesta este echivalent cu valoarea "auto". Acest atribut specifica faptul ca navigatorul trebuie sa ofere controale de redare video. Valori posibile: "controls" sau sir vid. Atributul loop precizeaza ca materialul video va reincepe automat de fiecare data cand este terminat. Valori posibile: "loop" sau sir vid.
controls [NOU] loop [NOU]
poster [NOU]
Defineste adresa imagine care sa fie afisata cand materialul video nu este redat.
______________________________________________________________________________________________
Curs: HTML
Valori posibile: URL absolut, sau URL relativ. height [NOU] width [NOU] Specifica inaltimea materialului video. Valoare: numar pixeli. Specifica latimea materialului video. Valoare: numar pixeli.
<wbr>
src Defineste URL-ul materialului video. [NOU] Valori posibile: URL absolut, sau URL relativ. Atributele standard prezentate mai sus. Defineste unde "s-ar putea adauga" o intrerupere de linie Atributele standard prezentate mai sus.
Pe de alta parte, tag-urile scoase din HTML5 sunt dupa cum urmeaza: - <acronim>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>,< tt>, <u>, <xmp>. Trebuie mentionat ca HTML5 nu este inca adoptat in totalitate de toate browserele, desi aproape toate promit suport HTML5 in urmatoarele versiuni. Exemple HTML5: Exemplu: adaugarea unui element audio in pagina Exemplul 11.2. <!DOCTYPE html> <head> <title>Ex. - element audio.</title> </head> <html> <body> <audio src="aplauze.wav" controls="controls"> Browser-ul dumneavoastra nu suporta elemente audio. </audio> </body> </html> Exemplu: adaugarea unui element video in pagina Exemplul 11.3. <!DOCTYPE html> <head> <title>Ex. - element video.</title> </head> <html> <body> <video src="natura.ogg" controls="controls" type="video/ogg; codecs=dirac, speex" poster="posternatura.jpg"> Browser-ul dumneavoastra nu suporta elemente video.
______________________________________________________________________________________________
Modulul 2 Introducere in Tehnologii Web </video> </body> </html>
Curs: HTML
Exemplu: adaugarea unui element grafic in pagina. Exemplul urmator foloseste elementul <canvas> impreuna cu JavaScript pentru realizarea unor elemente grafice precum: dreptunghiuri, arce de cerc. Exemplul 11.4. <!DOCTYPE HTML> <html> <body> <canvas id="elGrafic">Browser-ul dumneavoastra nu suporta elementul canvas.</canvas> <script type="text/javascript"> var graf=document.getElementById("elGrafic"); var fig=graf.getContext("2d"); fig.fillStyle="rgb(0,200,50)"; fig.fillRect(10,10,100,50); </script> </body> </html>
______________________________________________________________________________________________

Suport Curs HTML

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Suport Curs HTML

Загружено:

Авторское право:

Доступные форматы

SUPORT DE CURS

Modulul 2 Introducere n tehnologii Web

Specializare: WebDesigner WebProgramator WebMaster

Modulul 2 Introducere in Tehnologii Web

Acest document este proprietatea Institutului Multimedia Romano-Elvetian.

Modulul 2 Introducere in Tehnologii Web CUPRINS

Acest document este proprietatea Institutului Multimedia Romano-Elvetian.

Modulul 2 Introducere in Tehnologii Web

Acest document este proprietatea Institutului Multimedia Romano-Elvetian.

Modulul 2 Introducere in Tehnologii Web

Capitolul 10. XHTML ................................................................................................................................ 108

Capitolul 11. HTML 5 ............................................................................................................................... 111

Acest document este proprietatea Institutului Multimedia Romano-Elvetian.

Modulul 2 Introducere in Tehnologii Web

1.1. Ce este WWW?

1.2. Navigatoare web

1.3. Ce este de fapt HTML?

Acest document este proprietatea Institutului Multimedia Romano-Elvetian.

Modulul 2 Introducere in Tehnologii Web

1.4. Notiunea de eticheta (tag)

Acest document este proprietatea Institutului Multimedia Romano-Elvetian.

Modulul 2 Introducere in Tehnologii Web

Capitolul 2. CREAREA UNUI DOCUMENT HTML

2.1. Structura unui document HTML

Acest document este proprietatea Institutului Multimedia Romano-Elvetian.

Modulul 2 Introducere in Tehnologii Web

2.1.1.1. Declaratii DOCTYPE:

Acest document este proprietatea Institutului Multimedia Romano-Elvetian.

Modulul 2 Introducere in Tehnologii Web

2.2.1. Antetul documentului HTML

Acest document este proprietatea Institutului Multimedia Romano-Elvetian.

Modulul 2 Introducere in Tehnologii Web <head> ... </head>

Acest document este proprietatea Institutului Multimedia Romano-Elvetian.

Acest document este proprietatea Institutului Multimedia Romano-Elvetian.

Modulul 2 Introducere in Tehnologii Web

Acest document este proprietatea Institutului Multimedia Romano-Elvetian.

Modulul 2 Introducere in Tehnologii Web

Acest document este proprietatea Institutului Multimedia Romano-Elvetian.

Modulul 2 Introducere in Tehnologii Web

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

Acest document este proprietatea Institutului Multimedia Romano-Elvetian.

Acest document este proprietatea Institutului Multimedia Romano-Elvetian.

Modulul 2 Introducere in Tehnologii Web Atribut href

Acest document este proprietatea Institutului Multimedia Romano-Elvetian.

Modulul 2 Introducere in Tehnologii Web

Acest document este proprietatea Institutului Multimedia Romano-Elvetian.

Modulul 2 Introducere in Tehnologii Web

Acest document este proprietatea Institutului Multimedia Romano-Elvetian.

Modulul 2 Introducere in Tehnologii Web

Acest document este proprietatea Institutului Multimedia Romano-Elvetian.

Acest document este proprietatea Institutului Multimedia Romano-Elvetian.

Modulul 2 Introducere in Tehnologii Web

2.2.2. Partea principala (corpul) documentului HTML

2.2.2.1. Atribute aditionale

2.2.2.2. Antete (headere)

Acest document este proprietatea Institutului Multimedia Romano-Elvetian.

Acest document este proprietatea Institutului Multimedia Romano-Elvetian.

Acesta este un antet

Acesta este un antet

Acest document este proprietatea Institutului Multimedia Romano-Elvetian.

Modulul 2 Introducere in Tehnologii Web

2.2.2.4. Linie noua

2.2.2.5. Desenarea unei linii