documente html

7/29/2019 documente html

1/27

Lecia 1: Structura unui document HTML. Notiuni de baza.

1.1 Ce este HTML?

HTML (HyperText Markup Language) a fost dezvoltat initial de Tim Berners-Lee in anul 1989, ca urmare a necesitatii de

publicare a informatiilor la nivel global. Pe parcursul anilor, limbajul a evoluat (HTML 3.0, HTML 3.2, HTML 4 si cel mai recenHTML 4.01), fiecare versiune oferind noi facilitati.

Se remarca cateva trasaturi cum ar fi:

independenta de platforma (modul de afisare al unui document este acelasi, indiferent de computerul pe care serealizeaza afisarea);

structurarea formatarii;

posibilitatile hypertext (orice cuvant, imagine sau alt element al documentului vizualizat de utilizator poate facereferinta la un alt document, ceea ce usureaza navigarea in cadrul aceluiasi document sau intre documente diferite)

HTML este un limbaj simplu, compus din coduri speciale (marcaje) care se insereaza intr-un text pentru a adauga informatdespre formatare. Este derivat din SGML (Standard Generalized Markup Language), un sistem pentru definirea tipurilor dedocumente structurate, destinat sa reprezinte instante ale acestor tipuri de documente. La baza SGML si a HTML se aflaacelasi principiu: descrierea continutului unui document se face intr-un fisier text obisnuit (ASCII). S-a urmarit ca aceste

fisiere sa fie editabile cu aplicatii software nepretentioase (ex. NotePad, WordPad).

In cadrul unui document HTML, un marcaj (tag, in limba engleza) va avea forma . Parantezele unghiularesunt elementele care indica prezenta unui marcaj; numele marcajelor poate fi scris oricum, limbajul nefiind senzitiv la literelmari/mici (case sensitive). Unele marcaje permit utilizarea unor atribute care se vor scrie in marcajul de inceput:

................

DR: Exista doua tipuri de marcaje:

- individuale (ex.
)- perechi (ex.

...
) - de mentionat ca sfarsitul unui marcaj este indicat prin utilizarea caracterului '/' in fata numeluide marcaj
In functie de modul de formatare a paginii, avem marcaje de tip:

- block: este afisat sub elementul anterior (ex.

)- inline: este afisat dupa elementul anterior (ex. )- table: este afisat sub forma unui tabel

Marcajele perechi pot fi imbricate:

................

Browserele vor ignora marcajele si optiunile pe care nu le recunosc.

1.2 Structura unui document HTML

Un document HTML 4 are urmatoare structura:

1. o linie continand versiunea HTML2. sectiunea HEAD, delimitata de marcajele 3. sectiunea BODY, delimitata de marcajele sau

DR:


2/27

Prima mea pagina web

...........

Un document HTML valid contine declaratia versiunii HTML utilizate. Declaratia se face prin intermediul DTD (document typedefinition). Pe scurt, fisierul DTD contine definitiile marcajelor din versiunea respectiva de HTML.HTML 4.01 specifica 3 variante DTD :

HTML 4.01 Strict DTD include toate elementele si atributele care nu sunt "invechite" (elemente si atribute a carorutilizare nu este recomandata deoarece se doreste renuntarea la acestea pe viitor) sau care nu apar in documentelece contin cadre.

HTML 4.01 Transitional DTD include Strict DTD plus elementele si atributele "invechite".

HTML 4.01 Frameset DTD include Transitional DTD plus cadrele (frames).

HTML 4.01 Strict DTD

HTML 4.01 Transitional DTD

HTML 4.01 Frameset DTD

1.2.1 Sectiunea HEADCuprinde informatii care nu vor fi afisate in browser, cu exceptia marcajului .Marcajul este obligatoriu si poate apare doar in sectiunea HEAD. El va contine un titlu relevant pentru pagina, fiinddeosebit de important pentru motoarele de cautare.

Alte marcaje care apar in sectiune HEAD:

- poate contine cuvinte cheie, o descriere a paginii, numele autorului paginii, frecventa (teoretica) cu caremotoarele de cautare ar trebui sa reindexeze pagina, etc. Declaratiile META implica in general declararea uneiproprietati si a valorii asociate acelei proprietati.

Declararea setului de caractere se face astfel:

DR: Precizarea setului de caractere face posibila afisarea in browserul utilizatorului a caracterelor specifice unor limbi precumromana, rusa, araba, etc

- cascading style sheets - stiluri pentru formatarea textului din documentul HTML.

...

- scripturi JavaScript sau VBScript

- stabileste URL-ul de "baza" al documentului. Toate referintele (, respectiv ) din documentul respectiv vor fi deschise relativ la marcajul .


3/27

- stabileste o legatura cu un document extern, spre exemplu un fisier de definitii CSS.

EX: Sectiunea HEAD a unui document HTML poate arata in felul urmator:

Titlul paginii mele

1.2.2 Sectiunea BODY

Este inclusa intre marcajele ......

................continut document.................

Marcajul de sfarsit () nu este obligatoriu

In sectiunea BODY se gaseste informatia care va fi afisata in browser (text, imagini, etc.) (.... ).

DR: LEFTMARGIN si TOPMARGIN sunt extensii Microsoft (nu functioneaza decat in Internet Explorer 3+).

LEFTMARGIN precizeaza, n pixeli, marginea stanga a documentului (distanta dintre fereastra si continutuldocumentului);

TOPMARGIN precizeaza, in pixeli, marginea de sus a documentului (distanta dintre fereastra si continutul documentului)

Ca in orice limbaj de programare in HTML exista posibilitatea de a introduce comentarii, folosind marcajul

EX:

Titlul paginii mele

text text text text text text text text text text

alt text alt text alt text alt text alt text


4/27

In exemplul de mai sus a aparut un nou marcaj

(paragraf). Alaturi de el trebuie mentionate marcajele , ,, , , (headings - toate necesita marcaj de inchidere) care sunt folosite in general pentru evidentieretitlurilor. (exemplu)

Pentru formatarea textului pot fi folosite si marcajele:

... - caractere ingrosate

... - caractere inclinate

... - caractere subliniate

... - caractere "taiate"

... - marcajul de informatie preformatata

conserva toata caracterele si spatierile de linii

utilizeaza un font diferit (Courier)

... - exponent

... - indice

- "rupe" textul, trecand pe o linie noua - poate apare oriunde in text

- traseaza o linie subtire orizontala

Acestexemplu evidentieaza efectele marcajelor mentionate mai sus.

Marcajul ... ofera posibilitatea modificarii dimensiunii, culorii si a tipului de font utilizat (exemplu)

Ultimele 2 marcaje asupra carora ne vom opri in aceasta lectie sunt marcajele si (ambele necesita marcaj deinchidere):.

este un marcaj de tip "inline". Se foloseste in general in interiorul marcajelor de tip "block" (ex.

) incombinatie cu stilurile CSS, pentru a impune o formatare diferita de restul continutului din marcajul "block" respect(exemplu).

spre deosebire de , marcajul este de tip "block". Se foloseste in general pentru pozitionare in cadrudocumentului si pentru specificarea unor proprietati CSS care sa fie aplicate textului din interiorul lui (exemplu).

.................................

EX:

1. Conform specificatiilor HTML 4.01, este recomandata folosirea marcajului pentru centrarea textului, in locul

marcajului exemplu.

2. poate fi folosit ca un container pentru alte elemente de tip "block".Exemplu: se pot include 2 sau mai multe paragrafe intr-un marcaj , insa pentru a se evita formatareaexplicita pe fiecare paragraf in parte (ex. fontul), se va defini stilul de formatare pentru marcajul , stil care vfi preluat de paragrafele mentionate.

3. Vizualizeaza sursele exemplelor si comenteaza-le in seminarul online

EXERCITII: Realizeaza o pagina HTML (folosind NotePad) care sa includa toate marcajele prezentate in aceasta lectie.Valideaza pagina la adresa http://validator.w3.org/
http://www.academiaonline.ro/cursuri/13/headings.htmlhttp://www.academiaonline.ro/cursuri/13/formatare.htmlhttp://www.academiaonline.ro/cursuri/13/formatare.htmlhttp://www.academiaonline.ro/cursuri/13/font.htmlhttp://www.academiaonline.ro/cursuri/13/span.htmlhttp://www.academiaonline.ro/cursuri/13/div-attribCss.htmlhttp://www.academiaonline.ro/cursuri/13/div-align.htmlhttp://www.academiaonline.ro/cursuri/13/div-align.htmlhttp://validator.w3.org/http://www.academiaonline.ro/cursuri/13/headings.htmlhttp://www.academiaonline.ro/cursuri/13/formatare.htmlhttp://www.academiaonline.ro/cursuri/13/font.htmlhttp://www.academiaonline.ro/cursuri/13/span.htmlhttp://www.academiaonline.ro/cursuri/13/div-attribCss.htmlhttp://www.academiaonline.ro/cursuri/13/div-align.htmlhttp://validator.w3.org/


5/27

Lecia 2: Liste si referinte

2.1 Liste

HTML ofera mai multe mecanisme pentru specificarea listelor de informatii. Exista 3 tipuri de liste, fiecare tip trebuie saincluda cel putin un element:

1. liste de tip definitie2. liste ordonate (numerotate)3. liste neordonate (marcate)

2.1.1 Liste de tip definitieUnul dintre cele mai obisnuite elemente in paginile HTML este un set de definitii, referinte sau indexuri. Un exemplu concret reprezinta glosarele; cuvintele sunt listate alfabetic, insotite de definitiile termenilor respectivi.

Lista de tip definitie este introdusa de marcajele:

... - lista definitii (definition list)

- termenul definit (definition term)

- definitie (definition)

EX:

Lista de tip definitie

Applet JavaAplicatie Java inclusa intr-un document HTMLCookieMecanism de comunicare intre client si serverDomeniuNume unic prin care se identifica un site pe Internet

Poti vizualiza exemplul de mai sus in browserul tau aici.

2.1.2 Liste neordonateSunt introduse de marcajele:

... - lista neordonata (unordered list)

- element lista

Lista neordonata

In HTML sunt disponibile 3 tipuri de liste:

liste de tip definitie
http://www.academiaonline.ro/cursuri/13/lista_definitie.htmlhttp://www.academiaonline.ro/cursuri/13/lista_definitie.htmlhttp://www.academiaonline.ro/cursuri/13/lista_definitie.html


6/27

liste neordonateliste ordonate

Poti vizualiza exemplul de mai sus in browserul tauaici.

Atributul square precizeaza tipul maracatorului

2.1.3 Liste ordonateSunt introduse de marcajele:

... - lista ordonata (ordered list)

- element lista

EX:

Lista ordonata

In HTML sunt disponibile 3 tipuri de liste:

liste de tip definitieliste neordonateliste ordonate


Atributul start seteaza numarul de inceput pentru primul element al listei ordonate.

Diferenta dintre listele ordonate si cele neordonate consta in inlocuirea punctelor din enumerare cu numere. Vizualizand inbrowser exemplele mentionate anterior, vei intelege diferentele in modul de afisare a fiecarui tip de lista.

EXERCITII:


2. Realizeaza o pagina HTML (folosind NotePad) care sa includa toate tipurile de liste. Valideaza pagina la adresahttp://validator.w3.org/

2.2 Referinte (link-uri)

Marcajul HTML principal pentru introducerea referintelor catre alte pagini HTML sau catre elemente din cadrul aceleiasi paginweb este . El trebuie sa contina atribute, in caz contrar neafectand formatarea documentului.

EX: Exemplul urmator nu va afecta formatarea documentului:

Aici ar trebui sa fie un link !

Pentru a activa linkul de mai sus vom adauga atributul href.

EX: Exemplul urmator arata formatarea documentului:

Aici este un link !

Referintele pot fi absolute (ex. http://www.domeniu.ro/pagina.html)sau relative (ex. pagina.html).

Referintele relative sunt folosite in interiorul siturilor. Ele functioneaza pe baza faptului ca browserul adauga automat numeledomeniului la fiecare referinta (presupunand ca exista o pagina la adresa http://www.hostx.ro/director/pagina.htmlsi oreferinta relativa catrepagina2.html, browserul va construi referinta http://www.hostx.ro/director/pagina2.htmlin momentuin care pagina2.html este solicitata)
http://www.academiaonline.ro/cursuri/13/lista_neordonata.htmlhttp://www.academiaonline.ro/cursuri/13/lista_neordonata.htmlhttp://www.academiaonline.ro/cursuri/13/lista_ordonata.htmlhttp://www.academiaonline.ro/cursuri/13/lista_ordonata.htmlhttp://validator.w3.org/http://www.academiaonline.ro/cursuri/13/lista_neordonata.htmlhttp://www.academiaonline.ro/cursuri/13/lista_ordonata.htmlhttp://validator.w3.org/


7/27

Referintele absolute le vei folosi atunci cand vrei sa trimiti utilizatorul pe un alt site (domeniu); pot fi folosite si in interiorulunui site, insa va implica un efort mai mare in scrierea paginilor (pe scurt, ai mai mult de tastat), iar in cazul in care mutisitul pe un alt domeniu vei fi nevoit sa re-editezi toate referintele.

Referintele pot fi catre pagini html, dar si catre alte tipuri de fisiere (imagini, fisiere audio, video, documente in alte formate,etc.)


Presupunem ca ai un site cu urmatoare structura de directoare:/director1

/director2

Pentru a apela o pagina HTML aflata in director2 dintr-o pagina aflata in director1 voi folosi urmatoarea secventa:Un link oarecarePentru a apela o pagina HTML aflata in director1 dintr-o pagina aflata in radacina (nivelul superior al sitului) voi folosiurmatoarea secventa: Un link oarecare

2.2.1 AncorePana acum am prezentat modul de realizare a referintelor externe, catre alte pagini sau catre alte situri. Ce se intampla insain cazul in care avem un document de dimensiuni mari si vrem sa introducem referinte catre anumite sectiuni ale sale?Solutia consta in utilizarea ancorelor.

DR: Ancorele asigura usurinta in navigare in paginile de dimensiuni mari.

O ancora are urmatorul format...

Numele ancorelor nu poate contine spatii si trebuie sa fie unic in pagina respectiva ! In exemplul urmator vei vedea ogreseala posibila in atribuirea numelui ancorelor:

...

...

In HTML xxx si XXX inseamna acelasi lucru!

Odata definita ancora trebuie definita si legatura activa catre ancora respectiva. Ea va fi o referinta hypertext in formatulurmator: Link catre ancora


Trebuie retinut ca exista posibilitatea de a crea referinte catre ancore aflate in documente externe: Link catre ancora externa

1. Vizualizeaza sursele exemplelor si comenteaza-le in seminarul online2. Realizeaza o pagina HTML (folosind NotePad) pe baza unui text existent, care sa includa ancore. Folosind pagina

realizata la exercitiul precedent (liste) si insereaza linkuri catre ancorele create.

Lecia 3: Imagini si sunete

3.1 De ce imagini ?

In principal, utilizarea imaginilor (pozelor) in cadrul paginilor HTML are ca scop imbunatatirea modului de transmitere amesajului catre utilizatori. Imagineaza-ti cum ar arata Academia Online fara imagini !

O pagina in care imaginile sunt combinate cu textul poate transmite un mesaj mult mai bine decat o pagina care contine doa

text. Selectarea imaginilor care vor fi utilizate este foarte importanta; cateva imagini care "clipesc" nu sunt suficiente pentrua face o pagina atractiva.

3.2 Ce trebuie sa stiu despre imagini ?

Inainte de a introduce o imagine intr-un document HTML este necesar sa iti pui cateva intrebari:

imaginea aceasta da "valoare" paginii mele?

o dupa cum spuneam mai sus, simpla inserare in pagina a unor imagini care nu au nici o legatura cu mesajutransmis in pagina nu este suficienta. Faptul ca o imagine sau mai multe "arata bine" nu este suficientpentru a face o pagina atractiva.

pot sa "imprumut" imaginea?

o voi incepe prin a spune ca NU exista imagini fara copyright (drepturi de autor). Exista imagini care suntoferite gratuit sau cu consimtamantul autorului (proprietarului), insa majoritatea sunt oferite contra cost
http://www.academiaonline.ro/cursuri/13/link.htmlhttp://www.academiaonline.ro/cursuri/13/link.htmlhttp://www.academiaonline.ro/cursuri/13/ancora.htmlhttp://www.academiaonline.ro/cursuri/13/ancora.htmlhttp://www.academiaonline.ro/cursuri/13/link.htmlhttp://www.academiaonline.ro/cursuri/13/ancora.html


8/27

(din motive lesne de inteles). Desi in cazul siturilor personale(non-profit) este improbabil sa verifice cinevaprovenienta imaginilor, in cazul siturilor comerciale riscul de a fi dat in judecata (chiar si in Romania) estereal.

o nu te baza pe faptul ca nu stii provenienta imaginii. In fata legii "nu stiu" nu este valabil. Responsabilitateain a determina cui ii apartine imaginea respectiva iti apartine in intregime.

ce dimensiunea are imaginea?

o pentru utilizatorii care folosesc conexiuni dial-up, paginile care contin imagini de dimensiuni mari (> 25-30k) se vor incarca in browser foarte greu. Multi se vor plictisi asteptand incarcarea paginii si vor abandonavizualizarea paginii.

culorile sunt "portabile"?

o o problema importanta este modul de afisare a culorilor pe diferite computere, sisteme de operare saubrowsere. Sunt convins ca nu ai vrea ca fundalul rosu al unei imagini afisate in browserul tau sa arate rozpe un Mac, spre exemplu. Pentru a elimina aceasta problema au fost stabilite anumite culori care arata lafel indiferent de computer, sistem de operare, etc. Poti vedea aceasta lista impreuna cu codurile lor informat hexa aici.

ce format de imagine sa folosesc?o Exista foarte multe formate de fisiere grafice (psd, png, jpg, pcx, bmp, gif, wmf, etc.). Doar cateva sunt

universal recunoscute de browsere:

GIF - GRAPHICS INTERCHANGE FORMAT- este un format de compresie fara pierdere de calitate.

JPG - format introdus deJOINT PHOTOGRAPHIC EXPERT GROUP- este un format de compresie cpierdere de calitate. Atentie insa: prin salvarea repetata a unei imagini, ea va pierde din calitate,devenind in final inutilizabila.

PNG - PORTABLE NETWORK GRAPHIC- este un format de compresie fara pierdere de calitate. Ar

in general dimensiuni mai mari decat primele doua formate mentionate.

3.3 Cum se introduce o imagine intr-o pagina HTML?

Introducerea unei imagini intr-o pagina HTML se face prin marcajul

EX:

Pagina mea

Atributul src specifica locatia imaginii. Alaturi de src, marcajul are urmatoarele atribute:

alt - specifica un text alternativ pentru cazul in care imaginea nu poate fi afisata. Este important si pentru motoarede cautare.

border - traseaza un chenar in jurul imaginii.

width, height - specifica latimea, respectiv inaltimea imaginii. Nu sunt obligatorii, insa utilizarea lor esterecomandata deoarece va reduce timpul de procesare a paginii web de catre browser.

hspace, vspace - specifica spatiul care va fi pastrat in jurul unei imagini.

Poti vizualiza in browserul tau ce se intampla in cazul in care imaginea lipseste sau calea catre imagine este gresita,aici.

EX:

Pagina cu imagine


In general, atunci cand este inserata o imagine intr-un text, acesta este aliniat in partea inferioara a imaginii. Va ramane unspatiu neutilizat, dupa cum ai vazut probabil in exemplul de mai sus. Pentru evitarea "pierderii" acestui spatiu poti folosiatributul align, cu valorile left, right.

EX:
http://www.academiaonline.ro/cursuri/13/culori-sigure.htmlhttp://www.academiaonline.ro/cursuri/13/culori-sigure.htmlhttp://www.academiaonline.ro/cursuri/13/imagine-gresita.htmlhttp://www.academiaonline.ro/cursuri/13/imagine-gresita.htmlhttp://www.academiaonline.ro/cursuri/13/imagine.htmlhttp://www.academiaonline.ro/cursuri/13/imagine.htmlhttp://www.academiaonline.ro/cursuri/13/culori-sigure.htmlhttp://www.academiaonline.ro/cursuri/13/imagine-gresita.htmlhttp://www.academiaonline.ro/cursuri/13/imagine.html


9/27

Pagina cu imagine


EXERCITII:


2. Realizeaza o pagina HTML (folosind NotePad) care sa contina una sau mai multe imagini, alaturi de un text pe caresa il formatezi folosind marcajele studiate in primele doua lectii. Modifica valorile atributelor marcajului sivizualizeaza pagina in browser.

3.4 Inserarea de fisiere audio in paginile HTML

In general, inserarea de fisiere audio in paginile HTML nu este recomandata (bineinteles exista si exceptii). Dimensiunilemari, timpul mare de download precum si "agresarea" utilizatorului cu o melodie care se repeta la infinit sunt cateva din

argumentele contra. In acelasi timp noile tehnologii (ex. FLASH) largesc posibilitatile, existand multe pagini web care combinin mod fericit parte audio cu cea vizuala.

Referindu-ma strict la posibilitatile HTML, introducerea de secvente audio se poate face in doua modalitati:

sub forma unei referinte(link)

prin intermediul marcajelor embed sau bgsound

EX:

Inserare referinta audio

Apasa pe linkul de mai jos.Fisierul audio va fi rulat intr-o aplicatie instalatain calculatorul tau (ex. Media Player)

EX:

Inserare secventa audio cu embed

Exista trei formate de fisiere care sunt recomandate pentru utilizarea cu acest marcaj: wav, au si midi. Daca esti interesat defisierele midi iti recomand http://www.ifni.com/ sau http://www.midifarm.com. Atentie insa la drepturile de autor!


Marcajul embed are urmatoarele atribute:

autostart - daca este setat true, fisierul audio va fi rulat imediat dupa incarcarea paginii HTML

hidden - daca este setat true, interfata pentru rularea fisierului audio nu va fi afisata

loop - daca este setat true, secventa audio va fi reluata la "nesfarsit"

volume - seteaza volumul cu care va fi redata secventa audio
http://www.academiaonline.ro/cursuri/13/imagine-top.htmlhttp://www.academiaonline.ro/cursuri/13/imagine-top.htmlhttp://www.ifni.com/http://www.midifarm.com/http://www.academiaonline.ro/cursuri/13/exemplu-embed.htmlhttp://www.academiaonline.ro/cursuri/13/exemplu-embed.htmlhttp://www.academiaonline.ro/cursuri/13/imagine-top.htmlhttp://www.ifni.com/http://www.midifarm.com/http://www.academiaonline.ro/cursuri/13/exemplu-embed.html


10/27

EX:



Marcajul bgsound va rula o secventa audio in fundal. Este o extensie Microsoft, deci va functiona numai in Internet Explore

EX:

Inserare secventa audio cu bgsound

In HTML 4 embed este inlocuit de marcajul object care va fi insa prezentat in ultima lectie.

EXERCITII:


2. Cauta pe Internet o secventa audio in format midi. Realizeaza apoi o pagina HTML (folosind NotePad) care sa includ

aceasta secventa audio. Modifica valorile atributelor marcajului si vizualizeaza pagina in browser.

Lecia 3: Imagini si sunete3.1 De ce imagini ?

In principal, utilizarea imaginilor (pozelor) in cadrul paginilor HTML are ca scop imbunatatirea modului de transmitere a

mesajului catre utilizatori. Imagineaza-ti cum ar arata Academia Online fara imagini !

O pagina in care imaginile sunt combinate cu textul poate transmite un mesaj mult mai bine decat o pagina care continedoar text. Selectarea imaginilor care vor fi utilizate este foarte importanta; cateva imagini care "clipesc" nu sunt suficientepentru a face o pagina atractiva.

3.2 Ce trebuie sa stiu despre imagini ?

Inainte de a introduce o imagine intr-un document HTML este necesar sa iti pui cateva intrebari:

imaginea aceasta da "valoare" paginii mele?

o dupa cum spuneam mai sus, simpla inserare in pagina a unor imagini care nu au nici o legatura cumesajul transmis in pagina nu este suficienta. Faptul ca o imagine sau mai multe "arata bine" nu estesuficient pentru a face o pagina atractiva.

pot sa "imprumut" imaginea?

o voi incepe prin a spune ca NU exista imagini fara copyright (drepturi de autor). Exista imagini care suntoferite gratuit sau cu consimtamantul autorului (proprietarului), insa majoritatea sunt oferite contra cost(din motive lesne de inteles). Desi in cazul siturilor personale(non-profit) este improbabil sa verificecineva provenienta imaginilor, in cazul siturilor comerciale riscul de a fi dat in judecata (chiar si inRomania) este real.

o nu te baza pe faptul ca nu stii provenienta imaginii. In fata legii "nu stiu" nu este valabil.Responsabilitatea in a determina cui ii apartine imaginea respectiva iti apartine in intregime.
http://www.academiaonline.ro/cursuri/13/exemplu-embed1.htmlhttp://www.academiaonline.ro/cursuri/13/exemplu-embed1.htmlhttp://www.academiaonline.ro/cursuri/13/exemplu-embed1.html


11/27

ce dimensiunea are imaginea?

o pentru utilizatorii care folosesc conexiuni dial-up, paginile care contin imagini de dimensiuni mari (> 25-30 k) se vor incarca in browser foarte greu. Multi se vor plictisi asteptand incarcarea paginii si vorabandona vizualizarea paginii.

culorile sunt "portabile"?

o o problema importanta este modul de afisare a culorilor pe diferite computere, sisteme de operare saubrowsere. Sunt convins ca nu ai vrea ca fundalul rosu al unei imagini afisate in browserul tau sa arateroz pe un Mac, spre exemplu. Pentru a elimina aceasta problema au fost stabilite anumite culori carearata la fel indiferent de computer, sistem de operare, etc. Poti vedea aceasta lista impreuna cu codurilelor in format hexaaici.

ce format de imagine sa folosesc?

o Exista foarte multe formate de fisiere grafice (psd, png, jpg, pcx, bmp, gif, wmf, etc.). Doar cateva suntuniversal recunoscute de browsere:

GIF - GRAPHICS INTERCHANGE FORMAT- este un format de compresie fara pierdere decalitate.

JPG - format introdus deJOINT PHOTOGRAPHIC EXPERT GROUP- este un format de compresiecu pierdere de calitate. Atentie insa: prin salvarea repetata a unei imagini, ea va pierde dincalitate, devenind in final inutilizabila.

PNG - PORTABLE NETWORK GRAPHIC- este un format de compresie fara pierdere de calitate.Are in general dimensiuni mai mari decat primele doua formate mentionate.

3.3 Cum se introduce o imagine intr-o pagina HTML?

Introducerea unei imagini intr-o pagina HTML se face prin marcajul

Atributul src specifica locatia imaginii. Alaturi de src, marcajul are urmatoarele atribute:

alt - specifica un text alternativ pentru cazul in care imaginea nu poate fi afisata. Este important si pentrumotoarele de cautare.

border - traseaza un chenar in jurul imaginii.

width, height - specifica latimea, respectiv inaltimea imaginii. Nu sunt obligatorii, insa utilizarea lor esterecomandata deoarece va reduce timpul de procesare a paginii web de catre browser.

hspace, vspace - specifica spatiul care va fi pastrat in jurul unei imagini.

Poti vizualiza in browserul tau ce se intampla in cazul in care imaginea lipseste sau calea catre imagine este gresita, aici.

Pagina mea
http://www.academiaonline.ro/cursuri/13/culori-sigure.htmlhttp://www.academiaonline.ro/cursuri/13/culori-sigure.htmlhttp://www.academiaonline.ro/cursuri/13/imagine-gresita.htmlhttp://www.academiaonline.ro/cursuri/13/imagine-gresita.htmlhttp://www.academiaonline.ro/cursuri/13/culori-sigure.htmlhttp://www.academiaonline.ro/cursuri/13/imagine-gresita.html


12/27


In general, atunci cand este inserata o imagine intr-un text, acesta este aliniat in partea inferioara a imaginii. Va ramaneun spatiu neutilizat, dupa cum ai vazut probabil in exemplul de mai sus. Pentru evitarea "pierderii" acestui spatiu potifolosi atributul align, cu valorile left, right.


3.4 Inserarea de fisiere audio in paginile HTML

In general, inserarea de fisiere audio in paginile HTML nu este recomandata (bineinteles exista si exceptii). Dimensiunilemari, timpul mare de download precum si "agresarea" utilizatorului cu o melodie care se repeta la infinit sunt cateva dinargumentele contra. In acelasi timp noile tehnologii (ex. FLASH) largesc posibilitatile, existand multe pagini web carecombina in mod fericit parte audio cu cea vizuala.

Referindu-ma strict la posibilitatile HTML, introducerea de secvente audio se poate face in doua modalitati:

Pagina cu imagine

Pagina cu imagine


2. Realizeaza o pagina HTML (folosind NotePad) care sa contina una sau mai multe imagini, alaturi de un

text pe care sa il formatezi folosind marcajele studiate in primele doua lectii. Modifica valorileatributelor marcajului si vizualizeaza pagina in browser.
http://www.academiaonline.ro/cursuri/13/imagine.htmlhttp://www.academiaonline.ro/cursuri/13/imagine-top.htmlhttp://www.academiaonline.ro/cursuri/13/imagine.htmlhttp://www.academiaonline.ro/cursuri/13/imagine-top.html


13/27

sub forma unei referinte(link)

prin intermediul marcajelor embed sau bgsound

Exista trei formate de fisiere care sunt recomandate pentru utilizarea cu acest marcaj: wav, au si midi. Daca esti interesatde fisierele midi iti recomand http://www.ifni.com/ sau http://www.midifarm.com. Atentie insa la drepturile de autor!


Marcajul embed are urmatoarele atribute:

autostart - daca este setat true, fisierul audio va fi rulat imediat dupa incarcarea paginii HTML

hidden - daca este setat true, interfata pentru rularea fisierului audio nu va fi afisata

loop - daca este setat true, secventa audio va fi reluata la "nesfarsit"

volume - seteaza volumul cu care va fi redata secventa audio

Inserare referinta audio

Apasa pe linkul de mai jos.Fisierul audio va fi rulat intr-o aplicatie instalatain calculatorul tau (ex. Media Player)

http://www.ifni.com/http://www.midifarm.com/http://www.academiaonline.ro/cursuri/13/exemplu-embed.htmlhttp://www.ifni.com/http://www.midifarm.com/http://www.academiaonline.ro/cursuri/13/exemplu-embed.html


14/27


Marcajul bgsound va rula o secventa audio in fundal. Este o extensie Microsoft, deci va functiona numai in InternetExplorer.

In HTML 4 embed este inlocuit de marcajul object care va fi insa prezentat in ultima lectie.

Lecia 4: TabelePrezentarea datelor sub forma de tabele prezinta avantaje din punct de vedere al claritatii si sistematizarii. Marcajele HTMLdedicate formatarii tabelelor permit operatiuni asemanatoare celor din procesoarele de texte (ex. MS Word).

Definirea unui tabel in HTML se face folosind perechea de marcaje ... . Prin intermediul acestei perechi demarcaje se definesc atribute valabile pentru intregul tabel. Majoritatea acestor atribute pot fi insa redefinite pentru anumitecelule ale tabelului.


Inserare secventa audio cu bgsound


2. Cauta pe Internet o secventa audio in format midi. Realizeaza apoi o pagina HTML (folosind NotePad)

care sa includa aceasta secventa audio. Modifica valorile atributelor marcajului sivizualizeaza pagina in browser.
http://www.academiaonline.ro/cursuri/13/exemplu-embed1.htmlhttp://www.academiaonline.ro/cursuri/13/exemplu-embed1.html


15/27

Semnificatiile atributelor marcajului sunt:

border - specifica grosimea chenarului tabelului. Daca are valoarea 0 sau atributul lipseste, tabelul nu va aveachenar.

frame - defineste modul de afisare a chenarului exterior. Functioneaza in prezenta atributului "border". Atributulframe poate avea urmatoarele valori:

o above - afiseaza latura superioara a chenarului;o below- afiseaza latura inferioara a chenarului;o border- afiseaza chenarul complet;o box- afiseaza chenarul complet (la fel ca si border);o hsides - afiseaza partile inferioara, respectiv superioara ale chenarului;o vsides - afiseaza partile laterale (stanga, dreapta) ale chenarului;o lhs - afiseaza latura stanga a chenarului;o rhs - afiseaza latura dreapta a chenarului;o void- fara bordura exterioara.

rules - defineste modul de afisare a chenarului interior dintre celulele tabelului. Functioneaza in prezenta atributulu

"border". Atributul rules poate avea urmatoarele valori:o none - nu se afiseaza chenar interior;o groups - afiseaza chenar intre grupurile de celule definite de thead, tbody, colgroup, col, tfoot;o rows - afiseaza chenar ntre linii;o cols - afiseaza chenar ntre coloane;o all- afiseaza chenar intre toate celule interioare.

width, height - specifica latimea, respectiv inaltimea tabelului. In cazul in care valorile specificate nu sunt suficientpentru afisarea continutului celulelor, valorile vor fi modificate automat de catre browser astfel incat tot continutul sfie afisat. Valorile se pot exprima absolut, in pixeli, sau relativ la latimea ecranului (width), respectiv la inaltimeaecranului (height). Trebuie mentionat ca atributul "height" nu face parte din specificatiile HTML.Este recomandat sa lasi browserul sa calculeze valoarea pentru "height" in functie de continutul tabelului.

bgcolor - specifica culoarea pentru fundalul tabelului.

bordercolor - specifica culoarea chenarului.

bordercolorlight, bordercolordark - sunt atribute utilizate pentru a crea un efect 3D asupra chenarului. Este

recomandata folosirea de culori complementare pentru a obtine efectul scontat. Sunt extensii Microsoft. background - URL-ul imaginii care va fi utilizata ca fundal al tabelului. In cazul in care dimensiunile imaginii sunt

mai mici decat cele ale tabelului, ea va fi repetata astfel incat sa acopere intregul fundal al tabelului. Este extensieMicrosoft.

cellspacing - specifica distanta dintre celule.

cellpadding - specifica marginea interioara a celulelor.

align - specifica alinierea pe orizontala a tabelului (stanga|centru|dreapta).

valign - specifica alinierea pe verticala a tabelului (sus|mijloc|jos).

summary - o descriere a tabelului, de obicei pentru browsere non-vizuale.

...


16/27

Poti vizualiza exemple de tabele in browserul tau, aici.

Cea mai simpla forma a unui tabel se prezinta astfel:

........

........

O forma mai complexa a unui tabel este:

Nr. Crt

Nume AutorDenumire Lucrare

.........

......

...

... este un marcaj care contine unul sau mai multe randuri de celule care reprezintaantetul tabelului. Poate aparea o singura data in cadrul unui tabel.

... este un marcaj care contine unul sau mai multe randuri de celule. Pot fi definitemai multe astfel de sectiuni in cadrul aceluiasi tabel (ex. in cazul in care exista stiluri de formatare diferitepentru sectiuni diferite ale tabelului).

... este un marcaj care contine unul sau mai multe randuri de celule care reprezintasubsolul tabelului. Poate aparea o singura data in cadrul unui tabel. Este obligatoriu sa apara inainteamarcajului .
http://www.academiaonline.ro/cursuri/13/tabele1.htmlhttp://www.academiaonline.ro/cursuri/13/tabele1.htmlhttp://www.academiaonline.ro/cursuri/13/tabele1.html


17/27

Poti vizualiza exemplele de mai sus in browserul tau, aici.

Un alt marcaj care poate aparea in cadrul unui tabel este . Are urmatoarea sintaxa:

Marcajul caption adauga o scurta descriere (titlu) a tabelului. Poate fi utilizat numai in cadrul unui marcaj , imediat

dupa acesta.Are urmatoarele atribute:

align - in mod normal browser-ul va afisa titlul aliniat central si deasupra/dedesubtul tabelului. In HTML 4.0atributul align a fost abandonat in favoarea formatarii prin CSS (text-align si vertical-align).

valign - precizeaza pozitia titlului in raport cu tabelul (sus/jos).

Continutul fiecarei celule poate fi formatat individual:

Col 1Col 2

Celula 1.1Celula 1.2


In cazul in care vrei ca tabelul din exemplul anterior sa fie afisat cu chenar:

Col 1Col 2



...
http://www.academiaonline.ro/cursuri/13/tabele2.htmlhttp://www.academiaonline.ro/cursuri/13/tabele2.html


18/27

Poti vizualiza exemplul de mai sus in browserul tau,aici.

Marcajul defineste o linie intr-un tabel. Are urmatoarea sintaxa:

Poate avea urmatoarele atribute:

align - specifica modul in care va fi aliniat pe orizontala continutul liniei de tabel.

valign - specifica modul in care va fi aliniat pe verticala continutul liniei de tabel.

bgcolor - specifica culoarea pentru fundalul liniei de tabel.

bordercolor - specifica culoarea chenarului celulelor din linie de tabel.

bordercolorlight, bordercolordark - sunt atribute utilizate pentru a create un efect 3D asupra chenarului de tabe

Marcajul defineste o celula din antetul tabelului. Sintaxa este:

Exemplu utilizare caption

Col 1

Coloana 2

Celula 1.1

Celula 1.2

Celula 2.1

Celula 2.2

....


19/27

Poate avea urmatoarele atribute:

align, valign - indica alinierea orizontala si verticala a continutului celule, in celula.

colspan - specifica numarul de coloane peste care se intinde celula curenta spre dreapta.

rowspan - specifica numarul de linii peste care se intinde celula curenta in jos.

nowrap - impiedica "ruperea" textului din celula pe mai multe linii.

bgcolor, background, bordercolor, bordercolorlight, bordercolorlight - au efecte similare celor mentionatemai sus.

Poti vizualiza exemplele de mai sus in browserul tau, aici.

Marcajul defineste o celula din tabel.

....

Exemplu tabel

Col 1

Coloana 2

Celula 1.1;Celula 1.2

http://www.academiaonline.ro/cursuri/13/tabele4.htmlhttp://www.academiaonline.ro/cursuri/13/tabele4.html


20/27

Atributele marcajului au efecte similare cu cele prezentate mai sus, in cazul marcajului .

Ultimele atribute pe care le voi prezenta sunt colspan si rowspan. Ele extind o celula pe mai multe coloane, respectiv liniiale tabelului.

Poti vizualiza exemplul de mai sus in browserul tau,aici.

Probabil ca multi se vor intreba de ce am prezentat atat de multe marcaje si atribute. In cele mai multe cazuri, marcajele, , sunt suficiente pentru a construi un tabel. Pe masura ce paginile HTML pe care le vei realiza vordeveni mai complexe, vei vedea singur de ce marcaje sau atribute ai nevoie. Succes !

Are urmatoarea sintaxa:...

Exemplu utilizare colspan:Exemplu tabel


Celula 2.1

Exemplu utilzare rowspan:Exemplu tabel


Celula 2.2


21/27


2. Realizeaza (folosind NotePad) un tabel cu latimea 80%, chenar 1, aliniat la dreapta in browser si avand celputin 4 randuri a cate 3 celule, fiecare celula cu un fundal diferit. Incearca apoi sa modifici acest tabelcombinand doua coloane.


22/27

Lecia 5: Cadre


23/27

Incepand cu Netscape Navigator 2, autorii paginilor HTML au posibilitatea de a imparti fereastra browserului in cadre,fiecare cadru afisand un document HTML diferit. Foarte rapid, cadrele au castigat popularitate, fiind adoptate de InternetExplorer, iar mai tarziu incluse in specificatiile HTML 4.

Cadrele ofera autorilor de pagini HTML posibilitatea de a pastra vizibila o parte a informatiei, in timp ce o alta parte ainformatiei este derulata (scroll) sau inlocuita.

Avantaje:

dimensiunea (KB) mai mica a fiecarui cadru in parte, comparativ cu cazul in care ar fi existat o singura pagina,

determina un timp de incarcare mai redus.

Dezavantaje:

unele motoare de cautare nu indexeaza siturile realizate cu cadre

autorul trebuie sa tina evidenta unui numar mare de pagini HTML

exista unele browsere care nu pot afisa pagini realizate cu cadre

este dificil de printat intreaga pagina

Cadrele sunt introduse prin perechea de marcaje ... , respectiv marcajul .

Frameset defineste modul de impartire al ferestrei (spatiul alocat fiecarui cadru in parte).

Asa cum se vede mai sus, pentru a imparti un cadru in doua sau mai multe cadre, se folosesc marcaje frameset imbricate

Poti vizualiza exemplul de mai sus in browserul tau, aici.

Un document cu cadre

Acest document contine:

continutcontinut


24/27


25/27

Lecia 6: Formulare
http://www.academiaonline.ro/cursuri/13/cadre2.htmlhttp://www.academiaonline.ro/cursuri/13/cadre3.htmlhttp://www.academiaonline.ro/cursuri/13/cadre4.html


26/27

Formularele HTML reprezinta o modalitate de comunicare intre utilizatori si server; prezinta o utilitate deosebita inmomentul in care sunt folosite in combinatie cu scripturi server-side (ex. PHP, Perl).

Intr-un limbaj mai "normal", formularele permit administratorului unui site sa adune informatii, respectiv sa intre in contaccu utilizatorii site-ului sau.

Formularele sunt introduse prin marcajul .... Perechea ... este o sectiune a paginiiHTML (container) care include mai multe controale (elemente). In general, utilizatorii modifica aceste elemente(introducand text, selectand diferite optiuni, etc.); in final, aceste informatii sunt trimise serverului pentru a fi prelucrate.

Intr-o pagina HTML pot exista mai multe formulare, insa numai informatiile dintr-un singur formular pot fi trimise la un

anumit moment catre server.

Poti vizualiza exemplul de mai sus in browserul tau, aici.

Exista doua metode (method) prin care un browser poate transmite informatiile catre server:

metoda "get" - informatiile din formular sunt adaugate la URL

metoda "post" - informatiile din formular nu sunt adaugate la URL

Atributul action specifica fisierul sau aplicatia de pe server careia ii vor fi trimise informatiile din formular, pentruprelucrare.

In general, campurile unui formular destinate introducerii datelor, se specifica prin intermediul marcajului .

Marcajul are urmatoarele atribute:

type

o button - un buton pe care poti face "click", declansand astfel o actiune prin intermediul unui script (ex.JavaScript)

o checkbox- caseta de validare. Optiunea checkediti permite sa specifici daca aceasta caseta este"marcata" sau nu

o file - permite utilizatorului sa selecteze un fisier din computerul propriu, pentru a-l incarca pe server

Exemplu formular

Nume: Prenume: Masculin Feminin


27/27
http://www.academiaonline.ro/cursuri/13/formulare2.html

documente html

Documents

Transcript of documente html