HTML pe intelesul tuturor.doc

8/16/2019 HTML pe intelesul tuturor.doc

1/57

http://www.ecursuri.ro/

HTML pe intelesul tuturor

Exista multe programe cu ajutorul carora scrierea codului HTML nu mai este necesara, aceste

programe scriindu-l in locul tau. Insa aceste programe nu fac subiectul acestui curs, iar pentru a putea construi o pagina web este nevoie cel putin de niste cunostinte elementare de HTML pe caream incercat sa le explicam in cadrul cursului. ursul de fata se adresea!a, in primul rand, celor care vor sa invete limbajul HTML, si astfel, prin scrierea codului, sa detina controlul absolutasupra viitoarei pagini web.

"copul cursului #HTML pe intelesul tuturor# este de a explica, intr-un mod cat mai util si in acelasitimp placut, notiunile de ba!a ale limbajului HTML si odata cu acestea sa initie!e viitoriicursanti in te$nica reali!arii unei pagini web. %e parcursul acestui curs, vei gasi foarte multeexemple, iar in ultima lectie, folosind notiunile invatate, vom reali!a impreuna site-ul uneigradinite particulare.

Lectiile cursului sunt&

Lectia '& IntroducereLectia (& "tructura unui document HTMLLectia )& *espre atributeLectia +& *espre culoriLectia & ormatarea textuluiLectia & ImaginiLectia /& LegaturiLectia 0& Liste

Lectia 1& TabeleLectia '2& adreLectia ''& ormulareLectia '(& 3eali!area unui site

'

http://www.ecursuri.ro/http://www.ecursuri.ro/cursuri/html-introducere.phphttp://www.ecursuri.ro/cursuri/structura-unui-document-html.phphttp://www.ecursuri.ro/cursuri/html-despre-atribute.phphttp://www.ecursuri.ro/cursuri/html-despre-culori.phphttp://www.ecursuri.ro/cursuri/html-formatarea-textului.phphttp://www.ecursuri.ro/cursuri/html-imagini.phphttp://www.ecursuri.ro/cursuri/html-legaturi.phphttp://www.ecursuri.ro/cursuri/html-liste.phphttp://www.ecursuri.ro/cursuri/html-tabele.phphttp://www.ecursuri.ro/cursuri/html-cadre.phphttp://www.ecursuri.ro/cursuri/html-formulare.phphttp://www.ecursuri.ro/cursuri/realizarea-unui-site.phphttp://www.ecursuri.ro/cursuri/html-introducere.phphttp://www.ecursuri.ro/cursuri/structura-unui-document-html.phphttp://www.ecursuri.ro/cursuri/html-despre-atribute.phphttp://www.ecursuri.ro/cursuri/html-despre-culori.phphttp://www.ecursuri.ro/cursuri/html-formatarea-textului.phphttp://www.ecursuri.ro/cursuri/html-imagini.phphttp://www.ecursuri.ro/cursuri/html-legaturi.phphttp://www.ecursuri.ro/cursuri/html-liste.phphttp://www.ecursuri.ro/cursuri/html-tabele.phphttp://www.ecursuri.ro/cursuri/html-cadre.phphttp://www.ecursuri.ro/cursuri/html-formulare.phphttp://www.ecursuri.ro/cursuri/realizarea-unui-site.phphttp://www.ecursuri.ro/


2/57


3/57

Lectia nr. 2:

Structura unui document HTML

In cadrul acestei lectii vei reali!a primul document HTML, adica prima pagina web.

espre ta!"uri

Tag-urile nu sunt altceva decat niste marcaje sau etic$ete pe care limbajul HTML le foloseste alaturi detexte pentru a ajuta browser-ul de internet sa afise!e corect continutul paginii web. :ceste tag-uri 6etic$ete7 pot fi de doua feluri&

- tag-uri perec$e 6un tag de inceput si unul de inc$eiere7. Exemple& #HTML$ si #/HTML$B#T%TL&$ si #/T%TL&$B #H&'$ si #/H&'$B

- tag-uri singulare 6nu au un tag de inc$eiere7 Exemple& #H($, #)($."a vedem tag-urile de ba!a pe care trebuie sa le contina un document HTML&

#HTML$ - cu acest tag incepe orice document HTML. %rin folosirea acestui tag ii spunem browser-ului ca este vorba de un fisier HTML pentru a il putea afisa.#H&'$ - intre aceste tag-uri sunt trecute, pe langa titlul paginii, diverse informatii folositoare pentru

browser-ul de internet, informatii pe care le vom descoperi pe parcursul acestui curs.#/H&'$ - acesta este tag-ul de inc$eiere al tag-ului #H&'$ #T%TL&$ - cu ajutorul acestei perec$i de tag-uri vei putea da un titlu documentului tau. :stfel, textul

pe care il vei scrie intre aceste tag-uri va fi afisat in bara de titlu a documentului.#/T%TL&$ - este tag-ul de Cnc$eiere al tag-ului #T%TL&$. :rata sfarsitul titlului documentului.#)*+$ - odata cu acest tag incepe continutul paginii web. Tot ce vei scrie intre tag-urile #)*+$ si

#/)*+$ va fi afisat, de catre browser, pe ecranul monitorului.#/)*+$ - ii spui browser-ului ca ai terminat de scris continutul paginii. Tot ceea ce vei scrie dupa

acest tag nu va mai fi afisat.#/HTML$ - este tag-ul de Cnc$eiere al tag-ului #HTML$. odul oricarui document se termina cuacest tag.

Tag-urile 6etic$etele7 pot fi scrise atat cu litere mari cat si cu litere mici.

'tentie, Au uita atunci cand scrii codul unei pagini web sa inc$i!i toate tag-urile pe care le-ai desc$is.%entru a fi sigur ca nu uiti incearca sa te obisnuiesti sa scrii dupa fiecare tag si tag-ul deinc$eiere 6la tag-urile perec$e7, scriind apoi continutul intre ele. > alta solutie pentru a nu uitasa inc$i!i vreun tag, este sa folosesti la scrierea codului, un editor HTML 6atunci cand vrei safolosesti un tag, editorul va scrie automat si tag-ul de inc$eiere7.

Crearea primului document HTML

:cum va trebui sa pui in practica notiunile invatate si sa reali!e!i prima ta pagina web. "a vedem deci,cum va trebui sa arate aceasta prima pagina. Mai intai trebuie sa desc$i!i editorul de texte6Aotepad este suficient7.

@om incepe cu tag-ul #HTML$. %entru a nu uita de tag-ul de inc$idere este bine sa-l pui si pe acestatot la inceput. In continuare vin tag-urile #H&'$ si #/H&'$. :poi intre cele doua tag-uri

)


4/57

vom pune perec$ea de tag-uri #T%TL&$ si #/T%TL&$. Intre aceste tag-uri punem titlul paginii&%rima mea pagina web. Drmea!a tag-urile #)*+$ si #/)*+$. e vom scrie intre ele va fiafisat in browserul de internet.

Iata cum ar trebui sa arate codul HTML&

#HTML$#H&'$

#T%TL&$%rima mea pagina web#/T%TL&$#/H&'$

#)*+$

ine ai venitF#)($@om invata impreuna limbajul HTML. :ceasta este prima mea pagina webF#)($#/)*+$

#/HTML$ :m folosit tag-ul #)($ pentru a trece pe urmatorul rand. :stfel ii spunem browser-ului ca ce va fi

scris dupa tag-ul #)($ va trebui afisat pe urmatorul rand. Tag-ul #)($ nu are un tag de

inc$idere.*upa ce am scris codul, va trebui sa salvam documentul cu extensia .$tml sau .$tm. *in meniul ilealege optiunea "ave :s, iar apoi denumeste documentul asa cum vrei, dar cu una din extensiilede mai sus. :pasa butonul "ave. :i acum un document $tml, care repre!inta prima ta paginaweb. Intra in fisierul unde ai salvat documentul si desc$ide-l

Inainte de a trece la lectia ), sa recapitulam cu ajutorul exercitiului de mai jos, notiunile invatate inaceasta lectie.

+


5/57

Lectia nr. -:

espre atribute HTML

Ce sunt atributele?

:tributele pot fi definite ca niste proprietati ale tag-urilor. :tributele se pun numai in tag-ul de inceput.*aca un tag nu are nici un atribut, atunci browser-ul va lua in considerare valorile implicite aletag-ului respectiv. %entru a intelege mai bine notiunea de atribut sa vedem cateva exemple.

:tributul )C*L*( care se foloseste cu tag-ul #)*+$ indica ce culoare va avea fondul viitoarei pagini web. ondul unei pagini web are in mod implicit culoarea alba, dar sa spunem ca vremca fondul paginii noastre sa fie portocaliu.

In acest ca! vom folosi pentru atributul )C*L*( codul culorii orange& G1122 6vei invata in lectiaurmatoare mai multe despre culori7&

>*< =>L>3#G1122#J"a luam codul paginii web din lectia trecuta si sa-i aplicam tag-ului )*+ atributul )C*L*( .

:cum sa ne ocupam de textul paginii noastre. Mesajul #ine ai venitF# sa spunem, de exemplu,ca am vrea sa fie scris cu albastru in loc de negru, care este valoarea implicita si sa fie scris culitere mai mari decat restul textului. %entru a scrie astfel textul, vom folosi tag-ul #*0T$insotit de unele atribute astfel&

#*0T C*L*(34444 S%5&6$

ine ai venitF#/*0T$#)($

Textul urmator #@om invata impreuna limbajul HTML. :ceasta este prima mea pagina webF#, dacadorim doar sa aiba culoarea rosie, vom folosi numai atributul C*L*( pentru tag-ul #*0T$,restul proprietatilor fiind cele implicite&

#*0T C*L*(34444$

@om invata impreuna limbajul HTML. :ceasta este prima mea pagina webF#/*0T$

:tunci cand vrem sa trasam o linie, folosim tag-ul #H($ care vine de la Hori!ontal 3ule careinseamna linie ori!ontala. *aca nu ii asociem acestui tag nici un atribut atunci vom obtine o lineori!ontala cat latimea paginii web.

*aca vrem sa folosim propriile noastre proprietati pentru trasarea unei linii ori!ontale vom apela laatributele tag-ului #H($. :ceste atribute sunt urmatoarele& 'L%0 - pentru alinierea liniei,C*L*( - pentru culoarea liniei, S%5& - pentru grosimea liniei si 7%TH - pentru lungimealiniei.

%entru a trasa o linie rosie 6C*L*( #G2222#7, cu o lungime de jumatate din valoarea implicita67%TH#2K#7 si putin mai groasa decat cea implicita 6S%5&#K#7 ce va fi aliniata incentrul paginii 6'L%0#center#7, vom folosi urmatoarea linie de cod&

#H( C*L*(34444 7%TH849 S%5&89 'L%0center$


6/57

cum sa folosim cele doua linii de mai sus in cadrul paginii noastre. %rima linie o vom folosi la sfarsit,in timp ce a doua linie o vom folosi dupa mesajul #ine ai venitF#. Aoul cod HTML al paginiinoastre va fi urmatorul&


7/57

#HTML$

#H&'$

#T%TL&$%rima mea pagina web#/T%TL&$#/H&'$

#)*+ )C*L*(344$

#*0T C*L*(34444 S%5&6$

ine ai venitF#/*0T$#)($#H( C*L*(34444 7%TH289 S%5&89 'L%0le;t$

#)($

#*0T C*L*(34444$


#H($

#/)*+$

#/HTML$

"alvea!a pagina cu ce nume vrei tu. Au uita de extensia .$tml sau .$tm.

/


8/57

Lista celor mai utilizate tag-uri impreuna cu atributele lor

In tabelul urmator vor fi pre!entate cele mai utili!ate tag-uri impreuna cu cele mai importante atributeale lor&

0


9/57

1


10/57

'2


11/57


12/57

'(


13/57

')


14/57

Lectia nr.


15/57

#HTML$

#H&'$

#T%TL&$%rima mea pagina web#/T%TL&$

#/H&'$#)*+ )C*L*(344$

#*0T C*L*(34444=) S%5&6$

ine ai venitF#/*0T$#)($

#H( C*L*(34444 7%TH289 S%5&89 'L%0le;t$

#)($

#*0T C*L*(344=444$


#H($

#/)*+$

#/HTML$

"alvea!a pagina cu numele de culori.html. Au uita sa scrii si tu si sa verifici codul HTML al fiecaruiexemplu al acestui curs.

Nume si coduri de culori sigure

In continuare vom vedea ce inseamna culori sigure. "unt acele culori care vor fi afisate de majoritatea browserele. *aca, de exemplu, pentru fondul paginii tale web ai folosit o anumita culoare, dar nu ai verificat sa ve!i daca aceasta face parte din culorile sigure, atunci exista posibilitatea caunii dintre utili!atorii paginii tale sa vada o cu totul alta culoare.

"a vedem cele mai importante culori care sunt recunoscute de majoritatea browserelor&

'


16/57

'


17/57

'/


18/57

'0


19/57

'1


20/57

Lectia nr. 8:

ormatarea te>tului in HTML

Titluri

:tunci cand avem nevoie sa folosim un titlu in cadrul paginii noastre web putem apela la tag-urile#H1$, #H2$, #H-$, #H


21/57

sau

#*0T C*L*(36


22/57

#)$Text bold#/)$Text bold%entru ca textul sa fie scris cu caractere italice, folosim perec$ea de etic$ete #%$ si #/%$.Text italic%entru ca textul sa fie subliniat, folosim perec$ea de etic$ete #A$ si #/A$.Text subliniat

*aca vrem ca textul sa fie afisat in centrul paginii putem folosi perec$ea de etic$ete #C&0T&($ si#/C&0T&($.#C&0T&($Text centrat#/C&0T&($

Text centrat:tunci cand vrem ca textul din cadrul paginii noastre web sa fie afisat pe mai multe randuri vom folosi

unul din tag-urile #)($ sau #B$. Tag-ul #)($ nu are tag de inc$eiere, in timp ce tag-ul #B$ are tag de inc$eiere, insa nu este obligatoriu.

Tag-ul #)($ vine de la line brea5 6intrerupere de linie7 si l-am mai folosit in cadrul acestuicurs. :sa cum am va!ut si pana acum este folosit pentru a face trecerea de la o linie la alta.

:stfel sa presupunem ca avem urmatorul cod HTML&

#HTML$

#H&'$

#T%TL&$Etic$eta 3J#/T%TL&$#/H&'$

#)*+$

Invat limbajul HTML. Exerse! limbajul HTML. "tiu limbajul HTML.#/)*+$

#/HTML$

:cest cod va avea ca re!ultat&

Invat limbajul HTML. Exerse! limbajul HTML. "tiu limbajul HTML.

:cum sa folosim etic$eta #)($ in cadrul codului&

#HTML$

#H&'$


#)*+$

Invat limbajul HTML.#)($Exerse! limbajul HTML.#)($"tiu limbajul HTML.#/)*+$

#/HTML$

Iata diferenta&

Invat limbajul HTML.Exerse! limbajul HTML.

((


23/57

"tiu limbajul HTML.

()


24/57

Tag-ul #B$ vine de la cuvantul paragraf si se deosebeste de tag-ul #)($ prin faptul ca prin utili!arealui nu numai ca se trece pe urmatorul rand, dar se si lasa un rand liber intre texte. "a revenim laexemplul de mai sus. "e vor folosi ambele tag-uri, #)($ si #B$, pentru a se vedea diferentadinre ele.

#HTML$#H&'$


#)*+$

Invat limbajul HTML.#)($Exerse! limbajul HTML.#B$"tiu limbajul HTML.#/)*+$

#/HTML$

3e!ultatul va fi&

Invat limbajul HTML.Exerse! limbajul HTML.

"tiu limbajul HTML.

*aca scriem un text intre tag-urile #B$ si #/B$, atunci textul va fi incadrat de cate un rand liber,la fel ca in exemplul de mai jos&

#HTML$

#H&'$


#)*+$

Invat limbajul HTML.#B$Exerse! limbajul HTML.#/B$"tiu limbajul HTML.#/)*+$

#/HTML$

@om obtine urmatorul re!ultat&

Invat limbajul HTML.

Exerse! limbajul HTML.

"tiu limbajul HTML.

Utilizarea caracterelor speciale

Iti mai aduci aminte de prima ta pagina web pe care ai facut-o in cadrul acestui cursN*upa cum ve!i, textul nu este scris cu diacriticele specifice limbii romane. 6O, C, P, Q etc.7. %entrua folosi si aceste litere trebuie sa scriem o anumita combinatie de diverse caractere pentru ca browserul sa citeasca diacriticele.

(+


25/57

Iata in continuare codurile HTML pentru cele mai folosite caractere si simboluri, care nu segasesc pe tastatura calculatorului&

(


26/57

:cum dupa ce am va!ut codurile pentru diverse caractere pe care le vom folosi in cadrul paginilornoastre web, sa vedem cum arata codul paginii noastre de la inceput, daca textul va fi scris cudiacritice&

#HTML$

#H&'$#T%TL&$%rima mea pagina web#/T%TL&$#/H&'$

#)*+$

ine ai venitF#)($@om RG()0nvRG(1RG)Ba RG()0mpreunRG(1 limbajul HTML.:ceasta este prima mea paginRG(1 webF#/)*+$

#/HTML$

Exercitiu&

"crie codul unei pagini web care sa contina urmatorul text 6scris cu diacritice7& ine ai venit pe site-ul www.ecursuri.ro, un site care CQi oferO aproape tot ce ai nevoie pentrua CnvOQa online. Toate cursurile, referatele Pi jocurile sunt gratuite. Sn speranQa cO, prinintermediul cOrQii de oaspeQi, ne vei aprecia, ne vei lOuda sau ne vei critica, vom Cncerca sO ne perfecQionOm pe !i ce trece.

%entru a alinia un text folosim codul RnbspB 6spatiu7 de cateva ori.%entru a te verifica, alege din fereastra browser-ului din meniul @iew optiunea "ource

(


27/57

Lectia nr. &

HTML " ima!ini

%ana acum ai invatat cum sa folosesti decat texte si culori in cadrul paginilor web. In aceasta lectie veiinvata despre imagini, care alese cu grija, vor da un plus design-ului paginilor tale.

Formatele imaginilor

rowserele recunosc, in cadrul paginilor web, mai multe formate ale imaginilor. ele mai raspanditesunt cele cu extensia .gif si cele care au una din terminatiile .jpg sau .jpeg. Iata in continuarecateva caracteristici ale acestor formate de imagini&

=I 6=rap$ics Interc$ange ormat7ormatul =I poate reda un numar de ( de culori, de aceea este folosit pentru imaginile de

dimensiuni mici& butoane, icon-uri, animatii.

utoane&

buton'.gif marime& 0//

b4tes

buton(.gif marime& 1(

b4tes

buton).gif marime& 1('

b4tes

Icon-uri&

icon'.gif marime& ))

b4tes

icon(.gif marime& (+

b4tes

icon).gif marime& +2'

b4tes

:nimatii&

animatie.gif marime& 1,(/

b

(/


28/57

U%E= 6Uoint %$otograp$ic Expert =roup7

ormatul U%E= nu mai este limitat la ( de culori si de aceea este folosit pentru fotografii. Imaginilecare apartin acestui format au extensia .jpg sau .jpeg.

po!a.jpgmarime& ,+ b

po!a.gif marime& '(,1 b

"e observa ca in ca!ul fotografiilor, formatul jpg ofera o calitate mai buna a imaginii si ocupa un spatiu

mult mai mic decat daca am fi salvat aceeasi imagine in formatul gif.

Adaugarea imaginilor in paginile web

:sa cum ai va!ut, la majoritatea site-urilor, imaginile dau o nota aparte paginilor web. %entru a folosiimagini si in cadrul paginilor tale web trebuie sa folosesti tag-ul #%M$ insotit de atributulS(C 6source7 care indica adresa sau calea catre imaginea pe care vrei sa o folosesti.orma generala a acestui tag va fi&

#%M S(Cnumeleimaginii.extensie$

F :tentie la extensie. Au uita sa scrii si extensia imaginii pentru ca altfel imaginea nu va fiafisata de browser.

Este bine ca atunci cand vrei sa faci un site, sa tii toate fisierele 6pagini HTML, imagini etc.7 incadrul aceluiasi folder. *aca vei folosi in codul HTML al paginilor site-ului tau linia de cod demai sus, imaginea va fi afisata doar daca pagina respectiva va fi in acelasi folder cu imaginea pecare vrei sa o folosesti. In ca! contrar imaginea nu va fi afisata.

"a scriem codul unei pagini web care sa contina o imagine. "alvea!a imaginea de mai jos 6clic5dreapta, "ave %icture :s7 sub numele de bebe.jpg in acelasi folder cu pagina web pe care o vom

face in continuare.

(0


29/57

:cum sa vedem codul HTML&

#HTML$

#H&'$

#T%TL&$Imagini#/T%TL&$#/H&'$

#)*+$#C&0T&($#)$:dRG(1ugarea imaginilor RG()0n paginile web#/)$#)($

#%M S(C bebe.jpg$#/C&0T&($

#/)*+$

#/HTML$

"alvea!a pagina cu numele imagini.$tml.

*aca site-ul tau va avea multe fisiere, nu mai este o solutie sa le tii pe toate in acelasi folder. Inacest ca!, este bine sa grupam fisierele de acelasi tip in subfoldere. :stfel in folderul "ite, deexemplu, vom avea un subfolder %o!e, in care vor fi salvate toate imaginile site-ului, unsubfolder %agini in care vor fi salvate toate paginile HTML si asa mai departe.

Iata cum ar arata structura site-ului&

%entru o functionare corecta vom utili!a una din urmatoarele linii de cod prin care ii vom spune browser-ului ca imaginea se afla in folder-ul %o!e&

#%M S(C..V%o!eVbebe.jpg$- daca pagina va fi salvata in subfolderul %agini si imaginea va fi in subfolderul %o!e.

(1


30/57

#%M S(C%o!eVbebe.jpg$- daca pagina va fi salvata in folderul "ite si imaginea va fi in subfolderul %o!e.

Incearca si tu&'. a un folder pe care denumeste-l "ite.

(. In cadrul acestuia mai fa doua subfoldere& %agini, respectiv %o!e.). opia!a imaginea bebe.jpg in folderul %o!e.+. Modifica in codul HTML de mai sus linia&#%M S(C bebe.jpg$cu linia&#%M S(C..V%o!eVbebe.jpg$. "alvea!a pagina in folderul %agini cu numele imagini.html.. *ublu clic5 pe imagini.html din folder-ul %agini.

*aca totul a functionat bine ar trebui sa obtii aceeasi pagina web.

*aca vrei ca imaginea sa fie incadrata de un c$enar, foloseste atributul )*(&( al tag-ului#%M$. :cest atribut are ca valoare numere intregi po!itive.#%M S(C..V%o!eVbebe.jpg )*(&(8$

*aca imaginea va fi de dimensiuni mai mari, atunci pana cand se va incarca si va fi afisata de browser, utili!atorul poate vedea un text inlocuitor al imaginii. :cest lucru se poate reali!afolosind atributul 'LT impreuna cu tag-ul #%M$.

*aca trecem cursorul mouse-ului deasupra imaginii, o sa apara textul pe care l-am scris laatributul 'LT.*e exemplu, la pagina de mai sus, imagini.$tml, vom inlocui linia&

#%M S(C..V%o!eVbebe.jpg )*(&(8$

cu linia&

#%M S(C..V%o!eVbebe.jpg )*(&(8 'LTImagine bebe$

Folosirea imaginilor alaturi de texte

%entru a alinia o imagine vom folosi atributul 'L%0 al tag-ului #%M$. :tributul 'L%0 poateavea una dintre valorile& left sau right , aliniere la stanga sau la dreapta paginii.

"alvea!a imaginea de mai jos 6clic5 dreapta, "ave %icture :s7 cu numele de euro.jpg in folder-ul %o!e.

)2


31/57

:cum sa scriem codul HTML al unei pagini web care va contine si text in jurul imaginii&

#HTML$

#H&'$

#T%TL&$ED3> (22+#/T%TL&$#/H&'$

#)*+$

#*0T C*L*(34444 'C&Times 0ew (oman$

#C&0T&($#)$Istoria campionatului european de fotbal#/)$#/C&0T&($#/*0T$#)($

#%M S(C../Boe/euro.jp! )*(&(8 'L%0le;t$#*0T C*L*(34444 'C&'rial$

%rima ediRG)Bie a campionatului european de fotbal a avut loc RG()0n ranRG)BaRG()0n anul '12, iar cRG((RG)'BtigRG(1toare a fost 3usia. DrmRG(1torul turneueuropean a avut loc RG()0n anul '1+ RG()0n "pania, acolo unde s-a impus RG)Baraga!dRG(1. %atru ani mai tRG((r!iu, RG()0n '10, RG()0n Italia, a fost rRG((ndulacesteia sRG(1 cRG((RG)'Btige trofeul. RG(2n '1/( organi!atoare a fost elgia,3epublica ederalRG(1 =ermanRG(1 impunRG((ndu-se. RG(2n '1/ a venitrRG((ndul e$oslovaciei sRG(1 cRG((RG)'Btige campionatul european de fotbal,disputat RG()0n Iugoslavia. RG(2n '102, =ermania a fost cRG((RG)'BtigRG(1toare,RG()0n Italia, iar RG()0n '10+, ediRG)Bie gRG(1!duitRG(1 de ranRG)Ba, din nou s-aimpus RG)Bara organi!atoare. EdiRG)Bia din anul '100 a avut loc RG()0n =ermaniaRG)'Bi a fost cRG((RG)'BtigatRG(1 de >landa. *upRG(1 patru ani, *anemarca seimpunea RG()0n "uedia, pentru ca dupRG(1 alRG)Bi patru ani, RG()0n '11, sRG(1 fierRG((ndul =ermaniei sRG(1 RG()0RG)'Bi adjudece trofeul, RG()0n :nglia. RG(2n anul(222 elgia RG)'Bi >landa au organi!at turneul final, iar cRG((RG)'BtigRG(1toare a fostranRG)Ba. Dltimul turneu final, care s-a disputat RG()0n %ortugalia, RG()0n (22+, afRG(1cut ca =recia sRG(1 cRG((RG)'Btige trofeul.#/*0T$ #)($#/)*+$

#/HTML$

"alvea!a pagina cu numele de euro.$tml in folderul %agini.

:sa cum ai observat, textul este afisat in jurul imaginii. *aca vrei ca textul sa fie afisat la oanumita distanta de imagine, foloseste atributele HSB'C& 6spatiu pe ori!ontala7 si DSB'C& 6spatiu pe verticala7. @alorile acestor atribute trebuie sa fie numere intregi, care repre!inta defapt distanta in pixeli dintre imagine si text. *e exemplu inlocuieste, in codul de mai sus, linia&

#%M S(C..V%o!eVeuro.jpg )*(&(8 'L%0le;t$

cu urmatoarea&

)'


32/57

#%M S(C..V%o!eVeuro.jpg )*(&(8 'L%0le;t HSB'C&84 DSB'C&24$

"alvea!a pagina cu numele euro(.$tml in folder-ul %agini.

oloseste diferite valori pentru atributele HSB'C& si DSB'C& pana cand vei obtine re!ultatele dorite.magini ca fond al unei pagini web

u ajutorul atributului )'CE(*A0 al tag-ului #)*+$ poti folosi o imagine ca fond al unei pagini web. %entru a intelege mai bine, copia!a imaginile urmatoare 6clic5 dreapta, iar apoi"ave %icture :s7 in folder-ul %o!e cu numele scrise sub fiecare.

bac5ground'.jpg bac5ground(.jpg bac5ground).jpg bac5ground+.jpg bac5ground.jpg

:cum in codul paginii imagini.$tml din folder-ul %agini adauga tag-ului #)*+$ atributul)'CE(*A0 dupa cum urmea!a&

#)*+ )'CE(*A0..V%o!eVbac5ground'.jpg$

"alvea!a pagina cu numele bac5ground'.$tml.

3epeta operatiunea de mai sus, numai ca in loc de bac5ground'.jpg foloseste pe rand unul dinnumele celorlalte imagini.

)(


33/57

Lectia nr. @:

Crearea le!aturilor in HTML

Aavigarea in cadrul site-urilor este posibila cu ajutorul lin5-urilor 6legaturilor7. In aceasta lectie vei

invata cum sa folosesti diferite tipuri de legaturi in cadrul site-ului tau.

Legatura catre o alta pagina

%entru a folosi legaturi, trebuie sa folosesti perec$ea de tag-uri #'$ si #/'$. Aumele acestor tag-urivine de la cuvantul anc$or care se traduce ancora. Tag-ul #'$ va trebui folosit impreuna cuatributul H(&. Linia de cod pentru inserarea unei legaturi in cadrul unei pagini web va aveaurmatoarea forma&

#' H(&numelepa!inii.html$Textul legaturii#/'$

*aca pagina respectiva se afla in acelasi folder cu pagina pe care se afla legatura atunci nu suntnecesare g$ilimelele. "a vedem impreuna, cum poti adauga o legatura intr-o pagina web dinfolderul %agini catre pagina imagini.$tml din acelasi folder. *esc$ide editorul de texte 6deexemplu& Aotepad7 si scrie urmatorul cod HTML&

#HTML$

#H&'$

#T%TL&$Legaturi#/T%TL&$#/H&'$

#)*+$

#C&0T&($#)$LegRG(1turRG(1 cRG(1tre o altRG(1 paginRG(1 #/)$

#)($#)($#' H(&ima!ini.html$Imagine bebe#/'$#/C&0T&($

#/)*+$

#/HTML$

"alvea!a pagina 6ileV"ave :s7 cu numele de lin5.$tml in folderul %agini.

*aca pagina catre care vrem sa facem o legatura, nu se afla in acelasi folder cu pagina noastra atunci numai putem folosi decat numele paginii HTML ca valoare a atributului H(&. "a vedem cateva

exemple de legaturi catre pagini din alte directoare sau subdirectoare. ie urmatoarea structura&

))


34/57

%entru a intelege cat mai bine cum functionea!a legaturile catre diverse pagini web, este bine sa faci situ, pe calculatorul tau, o structura asemanatoare cu cea de mai sus, iar apoi sa faci cateva paginiHTML in diverse directoare sau subdirectoare si sa incerci sa cree!i legaturi din fiecare pagina

HTML catre celelate. Iata cateva exemple&

- pentru a adauga o legatura in cadrul unei pagini HTML din directorul ontabilitate catre o pagina HTML din directorul irma ', vom folosi urmatoarea valoare a atributului H(&&#' H(&irma 1/numelepa!inii.html$Text lin5 #/'$

- pentru a adauga o legatura in cadrul unei pagini HTML din directorul "ite catre o paginaHTML din directorul arti, vom folosi urmatoarea valoare a atributului H(&&#' H(&ocumente/Carti/numelepa!inii.html$Text lin5 #/'$

- pentru a adauga o legatura in cadrul unei pagini HTML din directorul Matematica catre o

pagina HTML din directorul "coala, vom folosi urmatoarea valoare a atributului H(&&#' H(&../numelepa!inii.html$Text lin5 #/'$

- pentru a adauga o legatura in cadrul unei pagini HTML din directorul ilanturi catre o paginaHTML din directorul "ite, vom folosi urmatoarea valoare a atributului H(&&#' H(&../../numelepa!inii.html$Text lin5 #/'$

- pentru a adauga o legatura in cadrul unei pagini HTML din directorul "ervici catre o paginaHTML din directorul Matematica, vom folosi urmatoarea valoare a atributului H(&&#' H(&../../Scoala/Matematica/numelepa!inii.html$Text lin5 #/'$

- pentru a adauga o legatura in cadrul unei pagini HTML din directorul irma ( catre o paginaHTML din directorul irma ), vom folosi urmatoarea valoare a atributului H(&&#' H(&../irma -/numelepa!inii.html$Text lin5 #/'$

Legatura catre un site

*upa ce ai va!ut cum se folosesc legaturile catre alte pagini $tml locale acum vom vedea impreunacum putem adauga o legatura catre un site particular. Trebuie sa folosesti urmatoarea linie decod&

)+


35/57

#' H(&adresa site"ului$Textul legaturii#/'$

"a facem o pagina web care sa contina legaturi catre site-uri ale unor !iare din 3omania. "crieurmatorul cod HTML&

#HTML$#H&'$

#T%TL&$Legaturi catre site-uri particulare#/T%TL&$#/H&'$

#)*+$

#C&0T&($

#)$LegRG(1turi cRG(1tre site-urile unor !iare din 3omRG((nia #/)$#/C&0T&($

#)($#' H(&http://www.eF.ro$Evenimentul Wilei#/'$#)($#' H(&http://www.jurnalul.ro$Uurnalul AaRG)Bional#/'$#)($#' H(&http://www.capital.ro$apital#/'$#)($#' H(&http://www.prosport.ro$%rosport#/'$#)($#' H(&http://www.!sp.ro$=a!eta sporturilor #/'$#)($#' H(&http://www.libertatea.ro$Libertatea#/'$#)($

#/)*+$

#/HTML$

"alvea!a pagina cu numele de !iare.$tml in directorul %agini.

:sa cum ai observat pana acum, atunci cand dai clic5 pe una dintre legaturile din paginile

pre!entate ca exemple, se desc$ide o pagina HTML in aceeasi fereastra a browser-ului, peste pagina ce contine legatura. %entru a desc$ide o noua fereastra a browser-ului atunci cand se daclic5 pe o legatura trebuie folosit atributul T'(&T caruia i se atribuie valoarea Gblan.

"a vedem un exemplu& sa sc$imbam codul paginii !iare.$tml astfel incat site-ul fiecarui !iar sase desc$ida intr-o noua fereastra, atunci cand se va efectua un clic5 pe legatura catre acesta.*aca in plus vrei ca, atunci cand utili!atorii paginii tale web vor trece cursorul mouse-uluideasupra legaturilor, sa apara o mica nota explicativa, trebuie sa folosesti atributul T%TL&. avaloare a acestui atribut trebuie sa scrii textul care vrei sa apara atunci cand se va trece cursorulmouse-ului deasupra legaturii respective. %entru a intelege mai bine iata cum va arata codul paginii !iare.$tml dupa adaugarea atributelor T'(&T si T%TL& pentru fiecare legatura&

#HTML$

#H&'$

#T%TL&$Legaturi catre site-uri particulare#/T%TL&$#/H&'$

#)*+$

#C&0T&($

#b$LegRG(1turi cRG(1tre site-urile unor !iare din 3omRG((nia #/b$#/C&0T&($

)


36/57

#)($#' H(&http://www.eF.ro T'(&TGblan T%TL&5iarul &Fenimentul

5ilei$Evenimentul Wilei#/'$#)($#' H(&http://www.jurnalul.ro T'(&TGblan T%TL&5iarul Iurnalul

0aJ3-88Kional$Uurnalul AaRG)Bional#/'$#)($#' H(&http://www.capital.ro T'(&TGblan T%TL&5iarul

Capital$apital#/'$

#)($#' H(&http://www.prosport.ro T'(&TGblan T%TL&5iarulBrosport$%rosport#/'$#)($#' H(&http://www.!sp.ro T'(&TGblan T%TL&5iarul aeta

Sporturilor$=a!eta sporturilor #/'$#)($#' H(&http://www.libertatea.ro T'(&TGblan T%TL&5iarul

Libertatea$Libertatea#/'$#)($

#/)*+$

#/HTML$

"alvea!a pagina cu numele !iare.$tml peste pagina existenta.

Legatura catre o sectiune de pagina

:tunci cand avem de-a face cu pagini mai lungi, putem imparti aceste pagini in mai multe sectiunicatre care sa adaugam cate o legatura la inceputul paginii pentru ca utili!atorii sa ajunga mairepede la sectiunea care ii interesea!a. Dn bun exemplu pentru o astfel de pagina il repre!inta paginile care contin intrebarile frecvente 6recventl4 :s5ed Xuestions7. iecare titlu al sectiuniitrebuie definit ca ancora&

#' 0'M&3ancora1$Titlul primei sectiuni#/'$#' 0'M&3ancora2$Titlul sectiunii a doua#/'$#' 0'M&3ancora-$Titlul sectiunii a treia#/'$

Legaturile catre ancorele din cadrul aceleiasi pagini HTML vor avea urmatoarea forma&

#' 0'M&3ancora1$Legatura catre prima sectiune#/'$#' 0'M&3ancora2$Legatura catre a doua sectiune#/'$#' 0'M&3ancora-$Legatura catre a treia sectiune#/'$

Legaturile catre ancore din cadrul altei pagini HTML vor avea urmatoarea forma&

#' 0'M&numelepa!inii.html3ancora1$Legatura catre prima sectiune#/'$#' 0'M&numelepa!inii.html3ancora2$Legatura catre a doua sectiune#/'$#' 0'M&numelepa!inii.html3ancora-$Legatura catre a treia sectiune#/'$

:tentieF %entru crearea corecta a legaturilor catre alte pagini HTML, ve!i sectiunea Legatura

)


37/57

catre o alta pagina, din cadrul acestei lectii.%entru a intelege mai bine cum functionea!a legaturile catre sectiunile paginilor, sa scriemimpreuna codul unei pagini cu mai multe sectiuni&

#HTML$

#H&'$

#T%TL&$Legatura catre o sectiune de pagina#/T%TL&$#/H&'$#)*+$

#)($#)($#)($#)($#)($#)($

#C&0T&($#)$RG(2ntrebRG(1ri frecvente#/)$#/C&0T&($#)($#)($#)($#)($#)($#)($

#' H(&3intrebarea1$'. e pot gRG(1si pe site-ul ecursuri.roN#/'$#)($#)($#)($#' H(&3intrebarea2$(. e este un curs onlineN#/'$#)($#)($#)($#' H(&3intrebarea-$). *e ce sRG(1 RG()0nvRG(1RG)B onlineN#/'$#)($#)($#)($#)($

#H($#)($#)($#)($#)($#)($

#*0T C*L*(344 S%5&- *0T'rial Times 0ew (oman$

#' 0'M&3intrebarea1$'. e pot gRG(1si pe site-ul ecursuri.roN#/'$#/*0T$#)($#)($

RnbspB RnbspB RnbspB"ite-ul ecursuri.ro RG()0RG)'Bi propune sRG(1 ofere vi!itatorilorsRG(1i cRG((t mai multe resurse pentru a RG()0nvRG(1RG)Ba online. RG(2n acesmoment, pe site, sunt disponibile peste (2 de cursuri online, din diverse domenii, dar cu ajutorulvostru sperRG(1m ca numRG(1rul acestora sRG(1 creascRG(1.#)($RnbspB RnbspB RnbspB %e lRG((ngRG(1 cursurile online vei gRG(1si, RG()0n cadrulsite-ului nostru, mai mult de '222 de referate RG)'Bi peste '22 de jocuri online.#)($#)($#)($#)($#)($#)($#)($#)($ #)($#)($ #)($#)($ #)($#)($


#' 0'M&3intrebarea2$(. e este un curs onlineN#/'$#/*0T$#)($#)($RnbspB RnbspB RnbspBDn curs online presupune ca toate materialele necesare,sRG(1 fie disponibile pe internet. :RG)'Badar, viitorii cursanRG)Bi vor avea ladispo!iRG)Bie toate resursele necesare pentru RG()0nvRG(1RG)Bat, la fel ca RG)'BiRG()0n ca!ul unui curs tradiRG)Bional, singura deosebire fiind cRG(1 totul se petreceonline.#)($#)($#)($#)($#)($ #)($#)($#)($ #)($#)($#)($#)($#)($ #)($


#' 0'M&3intrebarea-$). *e ce sRG(1 RG()0nvRG(1RG)B onlineN#/'$#/*0T$#)($ #)($

RnbspB RnbspB RnbspBursurile online pre!intRG(1, indiscutabil, foarte multe avantajefaRG)BRG(1 de alte tipuri de cursuri. RG(2n primul rRG((nd cursurile online pot ficonsultate oricRG((nd, ele fiind disponibile non stop pe internet. Dn lucru extrem deimportant RG()0n alegerea unui curs online este RG)'Bi preRG)Bul scRG(1!ut alunui astfel de curs comparativ cu preRG)Burile cursurilor tradiRG)Bionale. RG(2n ca!ulcursurilor pre!ente pe site-ul ecursuri.ro, acestea sunt '22K =3:TDITE.#)($#)($#)($#)($#)($#)($ #)($#)($#)($ #)($

#)($#)($#)($#)($#)($#)($ #)($#)($#)($ #)($

#/)*+$

#/HTML$

)/


38/57

"alvea!a pagina cu numele intrebari.$tml in directorul %agini.

Legatura catre o adresa de e-mail

*aca vrei ca utili!atorii paginii tale web sa iti poata scrie parerile lor despre site, de exemplu, atuncitrebuie ca in cadrul paginii sa existe o legatura catre o adresa de e-mail. um faci astaN oartesimplu. orma generala a unei legaturi catre o adresa de e-mail este urmatoarea&

#' H(&mailto:adresa de e"mail$Trimite-mi un e-mail#/'$

In codul HTML al paginii intrebari.$tml adauga inainte de linia de cod ce contine etic$eta deinc$eiere #/)*+$, urmatoarea secventa de cod&

#)($#)($#)($#*0T 'C&'rial C*L*(344$

%entru a afla rRG(1spunsul la alte RG()0ntrebRG(1ri, trimite un mail la/*0T$#' H(&mailto:contactecursuri.ro T%TL&acJ328 Frei sJ328 pui o

J32-=ntrebare nu eita sJ328 o ;aci$%RG(1rerea ta#/'$#)($

"alvea!a pagina intrebari.$tml peste cea existenta.

Utilizarea unei imagini ca legatura

%entru a folosi o imagine ca legatura intre tag-urile #'$ si #/'$, va trebui scrisa adresa imaginii&

: H3Enumepagina.$tmlJIM= "3#adresaimaginii#V:J

"a vedem un exemplu. opia!a imaginea de mai jos 6clic5 dreapta, "ave %icture :s7 in directorul %o!ecu numele de intreb.jpg.

:cum sa scriem codul unei pagini web care sa foloseasca aceasta imagine ca legatura catre paginaintrebari.$tml. *esc$ide editorul de texte si scrie codul urmator&

)0


39/57

#HTML$

#H&'$

#T%TL&$olosirea unei imagini ca legatura#/T%TL&$#/H&'$

#)*+$

#C&0T&($#H1$Imagini ca legRG(1turi#/H1$

#)($#)($#' H(&intrebari.html$#%M S(C../Boe/intreb.jp!$#/'$

#/C&0T&($

#/)*+$

#/HTML$

"alvea!a pagina cu numele lin5img.$tml in directorul %agini.

Cum pot schimba culorile legaturilor?

iecare legatura din cadrul unei pagini web are trei culori&? o culoare pentru legaturile nevi!itate 6nu a fost efectuat nici un clic5 pe ele7? o culoare pentru legaturile vi!itate 6s-a efectuat cel putin un clic5 pe ele7? o culoare pentru legaturile active 6atunci cand cursorul mouse-ului se afla deasupra lor7

%entru fiecare culoare, din cele trei de mai sus, exista cate un atribut al tag-ului #/)*+$ cuajutorul caruia putem sc$imba culoarea implicita&? L%0E pentru legaturile nevi!itate? DL%0E pentru legaturile vi!itate? 'L%0E pentru legaturile active

iecarui atribut i se va atribui un nume de culoare sau codul unei culori. "pre exemplu daca vreica in cadrul paginii tale web, legaturile sa fie de culoare rosie atunci cand nu au fost vi!itate, deculoare neagra cele vi!itate si de culoare portocalie atunci cand se trece cu mouse-ul pedeasupra lor, trebuie sa folosesti urmatoarea linie de cod&

>*< LIA9G22229 @LIA9G2222229 :LIA91229J

%entru a folosi culorile preferate pentru legaturile paginilor tale nu trebuie decat sa inlocuiesti inlinia de mai sus, codurile, cu cele ale culorilor dorite.

)1


40/57

Lectia nr. =:

Crearea listelor in HTML

In aceasta lectie vei invata cum poti folosi listele in pagina ta web. Listele pe care le poti crea cu

ajutorul limbajului HTML sunt de urmatoarele tipuri& liste neordonate, liste ordonate si liste dedefinitii. "a le luam pe rand.

Liste neordonate (UL)

Inainte de vorbi despre listele neordonate sa vedem, mai intai, cum arata una&

irma noastra va ofera urmatoarele servicii&

• printare• printare

• indosariere

• xerox

• te$noredactare

%entru a putea face o lista neordonata trebuie sa folosim tag-urile #AL$ si #/AL$. 6denumirea acestortag-uri vine de la #unordered list# care inseamna in limba engle!a lista neordonata7. iecareelement al listei trebuie introdus de tag-ul #L%$. a sa intelegi mai bine sa vedem impreunacum arata codul HTML pentru lista de mai sus.

#HTML$

#H&'$

#T%TL&$Liste neordonate#/T%TL&$#/H&'$

#)*+$

#AL$irma noastrRG(1 vRG(1 oferRG(1 urmRG(1toarele servicii&#L%$ printare#L%$laminare#L%$RG()0ndosariere#L%$xerox

#L%$te$noredactare#/AL$#/)*+$

#/HTML$

"alvea!a pagina cu numele de liste'.$tml in directorul %aginiu ajutorul atributului T+B&, putem sc$imba cercul plin din fata fiecarui element. :cesta estefolosit in mod implicit atunci cand folosim o lista neordonata. :stfel, prin atribuirea unei valori

+2


41/57

atributului T+B&, vom putea face ca elementele listei sa fie precedate de un patrat sau de uncerc gol.

%entru a vedea re!ultatele, inlocuieste linia a -a din codul HTML de mai sus cu una dinurmatoarele linii de cod&

pentru cercuri goale&#AL T+B&circle$ irma noastrRG(1 vRG(1 oferRG(1 urmRG(1toarele servicii&

"alvea!a pagina cu numele de liste(.$tml in directorul %agini.

pentru patrate pline&

#AL T+B&sNuare$irma noastrRG(1 vRG(1 oferRG(1 urmRG(1toarele servicii&

"alvea!a pagina cu numele de liste).$tml in directorul %agini. Au uita& %entru a invata limbajul HTML trebuie sa scrii codul de la fiecare exemplu si sa ve!i daca

obtii aceleasi re!ultate ca cele din cadrul cursului.

Liste ordonate (OL)

:m va!ut cum putem folosi listele neordonate in cadrul paginilor web. Lista urmatoare pastrea!acontinutul celei de mai sus insa este o lista ordonata 6ordered list7. "a vedem diferenta&

irma noastra va ofera urmatoarele servicii&

'. printare(. printare

). indosariere

+. xerox

. te$noredactare

Listele ordonate se formea!a cu ajutorul tag-urilor #*L$ si #/*L$, denumirea acestora venind din

limba engle!a 8ordered list9 care inseamna lista ordonata. La fel ca si la listele neordonate,fiecare element trebuie introdus de tag-ul #L%$. Iata codul pentru lista ordonata de mai sus&#HTML$

#H&'$

#T%TL&$Liste ordonate#/T%TL&$#/H&'$

#)*+$

#*L$irma noastrRG(1 vRG(1 oferRG(1 urmRG(1toarele servicii&#L%$ printare

+'


42/57

#L%$laminare#L%$RG()0ndosariere#L%$xerox#L%$te$noredactare#/*L$

#/)*+$

#/HTML$

"alvea!a pagina cu numele de liste+.$tml in directorul %agini.

a si in ca!ul listelor neordonate, si la listele ordonate, atributul T+B& are o valoare implicita, asa cumam va!ut in exemplul de mai sus& numerele. in loc de numere putem folosi si alte caractere.%entru a folosi aceste caractere este de ajuns sa utili!am atributul T+B& cu valoarea potrivita.

%entru a vedea re!ultatele, inlocuieste linia a -a din codul HTML de mai sus cu una dinurmatoarele linii de cod&

pentru litere mari&

#*L T+B&'$irma noastrRG(1 vRG(1 oferRG(1 urmRG(1toarele servicii&

"alvea!a pagina cu numele de liste.$tml in directorul %agini.

pentru litere mici&

#*L T+B&a$irma noastrRG(1 vRG(1 oferRG(1 urmRG(1toarele servicii&

"alvea!a pagina cu numele de liste.$tml in directorul %agini.

pentru cifre romane mici&

#*L T+B&i$irma noastrRG(1 vRG(1 oferRG(1 urmRG(1toarele servicii&

"alvea!a pagina cu numele de liste/.$tml in directorul %agini.

pentru cifre romane mari&

#*L T+B&%$irma noastrRG(1 vRG(1 oferRG(1 urmRG(1toarele servicii&

"alvea!a pagina cu numele de liste0.$tml in directorul %agini.

%e langa atributul T+B&, pentru tag-ul #*L$ mai putem folosi si atributul ST'(T. :cest atribut estefolosit atunci cand vrem sa sc$imbam valoarea initiala, de exemplu daca vrem sa incepem de la+, in ca!ul numerelor, sau de la *, in ca!ul literelor mari, etc. orma generala a acestui atributeste ST'(Tn, unde n este un numar natural. "a vedem un exemplu&

+(


43/57

#HTML$

#H&'$

#T%TL&$Liste ordonate#/T%TL&$#/H&'$

#)*+$

#*L T+B&' ST'(T


44/57

#/L$

#/)*+$

#/HTML$

!ersonalizarea listelor aca Frei ca in loc de simbolurile ;olosite in mod prestabilit pentru elementele listelor

sa fie afisate propriile imagini, in loc de tag-ul #L%$ cu care introducem fiecare element al listeivom adauga imaginea dorita cu ajutorul tag-ului #%M$.

%entru a intelege mai bine sa luam un exemplu. "alvea!a mai intai imaginea de mai jos indirectorul %o!e cu numele de sageata.gif.

:cum sa scriem codul unei pagini web ce va contine o lista cu persoanele din cadrul departamentuluiontabilitate al unei firme&

#HTML$

#H&'$

#T%TL&$Lista personal#/T%TL&$#/H&'$

#)*+$

#AL$Lista persoanelor care sunt angajate RG()0n cadrul departamentului >AT:ILIT:TE&#)($#)($#%M S(C../Boe/sa!eata.!i;$=$eorg$e Maria#)($#)($#%M S(C../Boe/sa!eata.!i;$%rodan Eugenia#)($#)($#%M S(C../Boe/sa!eata.!i;$Matac Marian#)($#)($#%M S(C../Boe/sa!eata.!i;$ AeacRG)'Bu Elena

#)($#)($#%M S(C../Boe/sa!eata.!i;$Ionescu @ioleta#)($#)($#%M S(C../Boe/sa!eata.!i;$Manea ristina#)($#)($#%M S(C../Boe/sa!eata.!i;$IoniRG)BRG(1 Laura#)($#)($#%M S(C../Boe/sa!eata.!i;$RG)2BerbRG(1nescu Mi$aela#)($#)($#%M S(C../Boe/sa!eata.!i;$rRG(1ciun *orina#)($#)($#%M S(C../Boe/sa!eata.!i;$ Aeagu Emil#/AL$

#/)*+$

#/HTML$

"alvea!a pagina in directorul %agini cu numele de listapersonal.$tml.

Exercitiu& "crie codul HTML al unei pagini web care sa contina urmatoarea lista&

• Mic$ael "c$umac$er • 3ubens aric$ello

• Uenson utton

• Uacues @illeneuve

++


45/57

• *avid oult$ard

• 3alf "c$umac$er

In loc de semnul din fata fiecarui pilot foloseste urmatoarea imagine&

"alvea!a imaginea cu numele f'.jpg, in directorul %o!e 6clic5 dreapta, "ave :s7."alvea!a pagina HTML in directorul %agini, cu numele formula'.$tml.

+


46/57

Lectia nr. :

Tabele in HTML

Tabelele sunt foarte importante pentru reali!area unei pagini web. u ajutorul lor, pe langa crearea

propriu-!isa a tabelelor, putem controla mult mai bine elementele din cadrul paginilor web.

Crearea unui table

%entru a crea un tabel, trebuie sa folosim tag-urile T:LEJ si VT:LEJ. Tot ce va fi scris intreaceste tag-uri va forma un tabel. *upa tag-ul T:LEJ urmea!a tag-ul T3J care vine de la #Table3ow# 6randul tabelului7 si repre!inta introducerea unui rand in cadrul tabelului. Tot ce va fi scris intretag-urile T3J si VT3J va forma un rand al tabelului. *upa crearea unui rand, trebuie sa adaugam incadrul acestuia, cateva celule, cu ajutorul tag-urilor T*J si VT*J.

"a vedem cu ajutorul unui exemplu cum putem adauga un tabel in cadrul unei pagini web. "crieurmatorul cod HTML&

#HTML$

#H&'$

#T%TL&$%rimul tabel#/T%TL&$#/H&'$

#)*+$

#T')L&$

#T($

#T$#)$ Aume#/)$#/T$#T$#)$%renume#/)$#/T$#T$#)$ Aota#/)$#/T$

#/T($#T($

#T$Ionescu#/T$#T$ogdan#/T$#T$/#/T$#/T($

#T($

#T$"tancu#/T$#T$=eorge#/T$#T$1#/T$#/T($

#T($#T$*umitrescu#/T$#T$:lexandra#/T$#T$'2#/T$#/T($

#T($

#T$Marin#/T$#T$%aul#/T$#T$0#/T$

+


47/57

#/T($

#T($

#T$Ivanov#/T$#T$Mi$aela#/T$#T$1#/T$#/T($

#/T')L&$#/)*+$

#/HTML$

"alvea!a pagina cu numele de tabel.$tml.

!roprietatile tabelelor

:sa cum ai observat, in exemplul de mai sus am reali!at un tabel, dar fara nici o linie. %entru ca liniileunui tabel sa fie vi!ibile tag-ul #T')L&$ trebuie sa fie insosit de atributul )*(&( avandvaloarea egala cu cel putin '. In plus, poti sc$imba culoarea liniilor unui tabel folosind atributul

)*(&(C*L*( insotit de codul culorii dorite. :stfel, daca vrem ca liniile tabelului nostrusa aiba culoarea rosie vom folosi urmatoarea linie de cod&

T:LE >3*E3#'# >3*E3>L>3#G2222#J

Inlocuieste in exemplul de mai sus si salvea!a pagina cu numele tabel(.$tml.

*upa cum ai putut observa, liniile tabelului sunt practic niste linii duble. %entru a avea decat o singuralinie vom folosi atributul C&LLSB'C%0 cu valoarea #2#. :cest atribut specifica distantadintre celulele unui tabel. :laturi de acest atribut putem folosi si atributul C&LLB'%0 careindica distanta dintre marginile celulelor si textul din cadrul acestora.

%entru a stabili dimensiunea unui tabel, unui rand sau a unei celule, folosim atributele 7%TH pentru latime siVsau H&%HT pentru inaltime. %entru alinierea datelor din cadrul tabeluluifolosim atributul 'L%0 cu una dintre valorile #left#, #center# sau #rig$t#. %entru a aliniadatele tabelului pe verticala folosim atributul D'L%0 insotit de una dintre valorile #top#,#middle# sau #bottom#.

%entru a sc$imba culoarea unei celule, unui rand sau c$iar a intregului tabel folosim atributul)C*L*( impreuna cu codul culorii alese. "a facem impreuna o pagina web cu un tabel caresa cuprinda toate notiunile pe care le-am invatat pana acum in aceasta lectie. "crie codulurmator in cadrul unui editor text si salvea!a apoi pagina cu numele de tabel).$tml.

#HTML$

#H&'$

#T%TL&$%roprietatile tabelelor #/T%TL&$#/H&'$

#)*+$

#C&0T&($#H2$3e!ultatele obRG)Binute la matematicRG(1#/H2$#/C&0T&($#H( 7%TH849 'L%0center C*L*(34444$

#T')L& 7%TH844 'L%0C&0T&( )*(&(1

+/


48/57

)*(&(C*L*(3444444 C&LLSB'C%04 C&LLB'%04$

#T( )C*L*(3444444 'L%0center D'L%0middle$

#T 7%TH244 H&%TH84$#)$#*0T

C*L*(3$ Aume#/*0T$#/)$#/T$#T 7%TH244H&%TH84$#)$#*0T

C*L*(3$%renume#/*0T$#/)$#/T$

#T 7%TH144 H&%TH84$#)$#*0TC*L*(3$ Aota#/*0T$#/)$#/T$#/T($

#T( D'L%0middle$

#T 7%TH244 H&%TH24$Ionescu#/T$#T 7%TH244 H&%TH24$ogdan#/T$#T 7%TH144 H&%TH24 'L%0center$/#/T$#/T($

#T( )C*L*(3CC D'L%0middle$

#T 7%TH244 H&%TH24$"tancu#/T$#T 7%TH244 H&%TH24$=eorge#/T$#T 7%TH144 H&%TH24 'L%0center$1#/T$#/T($

#T( D'L%0middle$

#T 7%TH244 H&%TH24$*umitrescu#/T$#T 7%TH244 H&%TH24$:lexandra#/T$#T 7%TH144 H&%TH24 'L%0center$'2#/T$#/T($

#T( )C*L*(3CC D'L%0middle$

#T 7%TH244 H&%TH24$Marin#/T$#T 7%TH244 H&%TH24$%aul#/T$#T 7%TH144 H&%TH24 'L%0center$0#/T$#/T($

#T( D'L%0middle$

#T 7%TH244 H&%TH24$Ivanov#/T$#T 7%TH244 H&%TH24$Mi$aela#/T$#T 7%TH144 H&%TH24 'L%0center$1#/T$#/T($

#/T')L&$

#/)*+$

#/HTML$

+0


49/57

Folosirea tabelelor ca plan al unei pagini web

:sa cum spuneam, cu ajutorul tabelelor putem controla mult mai bine elementele din cadrul unei pagini

web. %ractic, folosind tabelele, putem adauga o imagine sau un text oriunde in pagina web.

In plus fata de notiunile invatate pana acum in aceasta lectie, mai trebuie sa retinem inca doua atributefoarte importante ale tag-ului #T$& C*LSB'0 6numarul de coloane pe care se intinde celula7si (*7SB'0 6numarul de linii pe care se intinde celula7. *e exemplu pentru crearea tabeluluiurmator&

am folosit pentru celula rosie atributul C*LSB'02, deoarece se intinde pe doua coloane, iar pentru celula albastra am folosit atributul (*7SB'0- deoarece se intinde pe trei randuri.

%entru a intelege mai bine utili!area tag-urilor si a atributelor lor, nu uita sa exerse!i cat maimult. Incearca sa reali!e!i diferite pagini web pe ba!a notiunilor invatate in acest curs.

+1


50/57

Lectia nr. '2&

olosirea cadrelor intr"o pa!ina web

u ajutorul cadrelor putem imparti o pagina web in mai multe !one, iar apoi putem stabili ce pagina vafi afisata in fiecare !ona.

Folosirea cadrelor intr-o pagina web

%entru a imparti o pagina web in mai multe cadre, trebuie sa folosim, inainte de tag-ul >*;"J, pentru a defini exact cum va fiimpartita pagina respectiva. :stfel pentru a imparti pagina in doua cadre ori!ontale vom folosiurmatoarea linie de cod&

3:ME"ET 3>;"#/2K,Y#J

"e folosesc procente pentru a defini marimea randurilor sau a coloanelor care vor forma cadrele. Inexemplul de mai sus, primul cadrul va avea /2K din inaltimea paginii, iar al doilea cadru restul,adica #Y# sau )2K.

:laturi de tag-ul #('M&S&T$ se mai folosesc si atributele #('M&SB'C%0$, pentrumarimea spatiilor dintre cadre si #('M&)*(&($, care se refera la cadrele definite, dacaau sau nu c$enar, valorile sale fiind #4es# sau #no#. :stfel, linia completa pentru definirea adoua cadre ori!ontale va fi urmatoarea&

3:ME"ET 3>;"#/2K,Y# 3:ME>3*E3#no# 3:ME"%:IA=#2#J

%entru a imparti pagina web in mai multe cadre ori!ontale, se vor asocia mai multe procente atributului(*7S, dar avand grija ca suma lor sa nu depaseasca '22K. La fel se procedea!a si pentruimpartirea unei pagini web in cadre verticale singura deoasebire fiind aceea ca in loculatributului (*7S se foloseste atributul C*LS. Au uita de tag-ul de inc$eiere #/('M&S&T$

*upa ce am stabilit impartirea paginii in cadre, se trece la definirea cadrelor. :stfel intre tag-urile #('M&S&T$ si #/('M&S&T$ vom folosi tag-ul #('M&$. %rincipalul atribut altag-ului #('M&$ este S(C cu ajutorul caruia indicam sursa cadrului. :stfel o linie de codcare defineste un cadru ar putea fi urmatoarea&

3:ME "3#numelepaginii.$tml#J

%entru a intelege mai bine utili!area cadrelor in paginile web, vom face impreuna o pagina webcu mai multe cadre, care va arata ca in imaginea urmatoare&

2


51/57

Trebuie sa facem patru pagini web fiecare avand culoarea de bac5ground la fel cu una dintre cele patruculori din imaginea de mai sus. :poi vom face a cincea pagina web in care vom defini cadrelesi care le va contine practic pe celelalte patru pagini. Aumele celor patru pagini web vor firosu.$tml, albastru.$tml, galben.$tml si verde.$tml.%entru a vedea codul sursa al fiecarei pagini alege din meniul @iew optiunea "ource.

:cum sa vedem codul sursa al paginii care va contine cele patru pagini web create&

HTMLJHE:*JTITLEJadreVTITLEJVHE:*J3:ME"ET >L"#(K,Y# 3:ME>3*E3#no# 3:ME"%:IA=#2#J3:ME "3#rosu.$tml#J3:ME"ET 3>;"#+K,)K,Y# 3:ME>3*E3#no# 3:ME"%:IA=#2#J3:ME "3#albastru.$tml#J3:ME "3#galben.$tml#J

3:ME "3#verde.$tml#JV3:ME"ETJV3:ME"ETJ>**


52/57

Lectia nr. ''&

Crearea ;ormularelor ;olosind HTML

"otiuni generale despre formulareormularele repre!inta o metoda de interactivitate cu utili!atorii paginii tale web. %rin intermediul unuiformular poti obtine date importante de la vi!itatorii paginii tale. *upa ce formularul a fost completat,utili!atorul apasa un buton de trimitere, iar tu primesti datele introduse in formular sub forma unui e-mail sau datele vor fi procesate cu ajutorul unui limbaj de programare si adaugate intr-o ba!a de date.In aceasta lectie vom invata cum se pot adauga in cadrul unei pagini web diferite tipuri de formulare,dar si cum putem trimite datele introduse intr-un formular, prin email

%entru a folosi un formular in pagina ta web, va trebui sa folosesti tag-urile #*(M$ si #/*(M$.Intre aceste tag-uri vor fi introduse toate elementele formularului.

Tag-ul #*(M$ are doua atribute foarte importante& 'CT%*0 si M&TH*.u ajutorul atributului 'CT%*0 ii spunem browser-ului ce se va intampla cu datele introdusein formular. :stfel, valoarea atributului 'CT%*0 poate fi o adresa D3L a unui script, scris intr-un limbaj de programare, care va interpreta datele si le va introduce intr-o ba!a de date, dacaeste ca!ul, sau poate fi o adresa de email, ca! in care datele introduse in formular vor fi trimise prin email la adresa respectiva.

:tributul M&TH*, asa cum ii spune si numele, preci!ea!a metoda de trimitere a datelor si poate avea doua valori. @aloarea implicita a acestui atribut este &T, cu ajutorul acestei metode putand fi trimise cantitati mici de date, cea mai folosita metoda fiind B*ST.

Au trebuie sa intelegi acum totul, vei vedea cat de simplu este sa reali!e!i formulare pentru paginile tale web. La sfarsitul acestei lectii vom face impreuna un formular mai complex, darmai intai sa ne familiari!am cu elementele formularelor.

Elementele unui formular

Elementele unui formular trebuie introduse, in majoritatea ca!urilor, cu ajutorul tag-ului #%0BAT$.:tributele cele mai importante ale acestui tag sunt urmatoarele&- T+B& - tipul elementului- 0'M& - numele elementului

- D'LA& - valoarea elementului

Elementele ale unui formular pot fi&- campurile de editare- butoanele radio- casetele de validare- casetele de fisiere- listele de selectie

(


53/57

- butoanele submit si reset

Campurile de editare

%entru a introduce in cadrul unui formular un camp de editare, trebuie sa folosim pentru atributul

T+B&, al tagului #%0BAT$, valoarea text.

Exemplu&

Camp de editare

:tributele cele mai folosite pentru tagul #%0BAT$ de tipul camp de editare sunt&? S%5&, care repre!inta latimea campului de editare? M'OL&0TH, specifica numarul maxim de caractere care pot fi introduse in campul deeditare? D'LA&, valoarea initiala a campului de editare

*e exemplu, pentru campul de editare de mai sus s-a folosit urmatoarea linie de cod&

IA%DT A:ME#exemplu# TL"#2# 3>;" ## A:ME#exemplu#JVTEZT:3E:J

:m folosit atributul C*LS pentru a stabili numarul de caractere al fiecarui rand, atributul(*7S pentru numarul de randuri al campului de editare, iar atributul 0'M& pentru numelecampului de editare. Iata re!ultatul&

)


54/57

#utoanele radio

*aca avem o intrebare cu mai multe variante de raspuns, vom folosi butoanele radio. %entru a introduceun buton radio, folosim tag-ul #%0BAT$, iar la atributul T+B&, valoarea #radio#. "a luam unexemplu&

Sn ce categorie de v[rstO vO CncadraQiN

sub ' ani

'-(2 ani

(2-( ani

(-) ani

)-+ ani

peste + ani

odul HTML care va afisa in cadrul browser-ului, intrebarea de mai sus si variantele de raspuns, esteurmatorul&

RG(2n ce categorie de vRG((rstRG(1 vRG(1 RG()0ncadraRG)BiN #)($

#%0BAT T+B&radio 0'M&raspuns D'LA&a CH&CE& $sub ' ani#)($#%0BAT T+B&radio 0'M&raspuns D'LA&b$'-(2 ani#)($#%0BAT T+B&radio 0'M&raspuns D'LA&c$(2-( ani#)($#%0BAT T+B&radio 0'M&raspuns D'LA&d$(-) ani#)($#%0BAT T+B&radio 0'M&raspuns D'LA&e$)-+ ani#)($#%0BAT T+B&radio 0'M&raspuns D'LA&;$ peste + ani

u ajutorul atributului CH&CE&, fara alte valori, putem selecta un buton radio in mod prestabilit. Au pot fi selectate mai multe butoane radio dintr-un grup, in acelasi timp.

+


55/57

Casetele de $alidare

%entru a introduce o caseta de validare 6c$ec5box7 se utili!ea!a etic$eta #%0BAT$ cu atributul T+B& avand valoarea #c$ec5box#. asetele de validare permit selectarea sau deselectarea uneia saumai multor optiuni. Exemplu&

Dnde vO petreceQi concediul de obiceiN

La mare

La munte

Sn strOinOtate

La QarO

:casO

:sa cum se poate observa, in ca!ul casetelor de validare, spre deosebire de butoanele radio, pot fi

selectate mai multe optiuni. odul casetelor de validare de mai sus este urmatorul&

Dnde vRG(1 petreceQi concediul de obiceiN#)($#%0BAT T+B&checbo> 0'M&optiunea1$La mare#)($#%0BAT T+B&checbo> 0'M&optiunea2$La munte#)($#%0BAT T+B&checbo> 0'M&optiunea-$RG(2n strRG(1inRG(1tate#)($#%0BAT T+B&checbo> 0'M&optiunea 0'M&optiunea8$:casRG(1

Casetele de fisiere

%entru a trimite un fisier prin intermediul unui formular, folosim pentru atributul T+B& al tag-ului#%0BAT$, valoarea #file#. "a vedem un exemplu&

odul HTML este urmatorul&

#%0BAT T+B&;ile 0'M&;ile$

Listele de selectie

> lista de selectie, asa cum ii spune si numele, permite utili!atorului sa aleaga una sau mai multeoptiuni dintr-o lista. Listele de selectie pot fi introduse in cadrul unui formular cu ajutorul tag-urilor #S&L&CT$ si #/S&L&CT$.

:tributele cele mai folosite pentru tag-ul #S&L&CT$ sunt&? 0'M&, atribuie listei de selectie un nume? S%5&, specifica numarul de elemente din cadrul listei de selectie? D'LA&, atribuie o valoare de tip text care va fi expediata serverului, sub forma de perec$i#name value#


56/57

? S&L&CT& 6fara alte valori7, selectea!a in mod prestabilit un element al listei

"a vedem cum arata o lista de selectie&

:lege un judet din 3omania&

%entru a selecta in mod implicit valoarea ucuresti, am folosit in dreptul acesteia atributulselected. odul listei de selectie de mai sus este urmatorul&

#S&L&CT$

#*BT%*0 Falue'lba$:lba#/*BT%*0$#*BT%*0 Falue'rad$:rad#/*BT%*0$#*BT%*0 Falue'r!es$:rges#/*BT%*0$#*BT%*0 Falue)acau$acau#/*BT%*0$#*BT%*0 Falue)ihor$i$or #/*BT%*0$#*BT%*0 Falue)istrita"0asaud$istrita-Aasaud#/*BT%*0$#*BT%*0 Falue)otosani$otosani#/*BT%*0$

#*BT%*0 Falue)rasoF$rasov#/*BT%*0$#*BT%*0 Falue)raila$raila#/*BT%*0$#*BT%*0 Falue)ucuresti selected$ucuresti#/*BT%*0$#*BT%*0 Falue)uau$u!au#/*BT%*0$#*BT%*0 FalueCaras"SeFerin$aras-"everin#/*BT%*0$#*BT%*0 FalueCalarasi$alarasi#/*BT%*0$#*BT%*0 FalueCluj$luj#/*BT%*0$ #*BT%*0FalueConstanta$onstanta#/*BT%*0$#*BT%*0 FalueCoFasna$ovasna#/*BT%*0$#*BT%*0 FalueamboFita$*ambovita#/*BT%*0$#*BT%*0 Falueolj$*olj#/*BT%*0$

#*BT%*0 Faluealati$=alati#/*BT%*0$#*BT%*0 Falueiur!iu$=iurgiu#/*BT%*0$#*BT%*0 Falueorj$=orj#/*BT%*0$#*BT%*0 FalueHar!hita$Harg$ita#/*BT%*0$#*BT%*0 FalueHunedoara$Hunedoara#/*BT%*0$#*BT%*0 Falue%alomita$Ialomita#/*BT%*0$#*BT%*0 Falue%asi$Iasi#/*BT%*0$#*BT%*0 Falue%l;oF$Ilfov#/*BT%*0$#*BT%*0 FalueMaramures$Maramures#/*BT%*0$#*BT%*0 FalueMehedinti$Me$edinti#/*BT%*0$#*BT%*0 FalueMures$Mures#/*BT%*0$

#*BT%*0 Falue0eamt$ Aeamt#/*BT%*0$#*BT%*0 Falue*lt$>lt#/*BT%*0$#*BT%*0 FalueBrahoFa$%ra$ova#/*BT%*0$#*BT%*0 FalueSatu"Mare$"atu-Mare#/*BT%*0$#*BT%*0 FalueSalaj$"alaj#/*BT%*0$#*BT%*0 FalueSibiu$"ibiu#/*BT%*0$#*BT%*0 FalueSuceaFa$"uceava#/*BT%*0$#*BT%*0 FalueTeleorman$Teleorman#/*BT%*0$#*BT%*0 FalueTimis$Timis#/*BT%*0$


57/57

#*BT%*0 FalueTulcea$Tulcea#/*BT%*0$#*BT%*0 FalueDaslui$@aslui#/*BT%*0$#*BT%*0 FalueDalcea$@alcea#/*BT%*0$#*BT%*0 FalueDrancea$@rancea#/*BT%*0$#/S&L&CT$

%entru a putea selecta mai multe valori din cadrul unei liste de selectie trebuie sa folosim pentru tag-ul#S&L&CT$ atributul MALT%BL&, fara alte valori.

#utoanele de tip %ubmit si &eset

%entru a putea expedia datele introduse in cadrul unui formular, fie prin e-mail, fie catre un script scrisintr-un limbaj de programare care va interpreta aceste date, trebuie sa folosim un buton detrimitere. %entru a introduce un asemenea buton folosim tag-ul #%0BAT$, cu atributul T+B& avand valoarea #submit#. %utem modifica si valoarea butonului, care in mod implicit este"ubmit, cu ajutorul atributului D'LA&. :stfel, linia de cod pentru un buton de tip submit va fiurmatoarea&

IA%DT T3M :TI>A#mailto&cursuri\ecursuri.ro# METH>*#%>"T#J

Documents

HTML pe intelesul tuturor.doc