Documente Academic
Documente Profesional
Documente Cultură
Despre tag-uri
Tag-urile nu sunt altceva decat niste marcaje sau etichete pe care limbajul HTML le
foloseste alaturi de texte pentru a ajuta browser-ul de internet sa afiseze corect continutul
paginii web.
Aceste tag-uri (etichete) pot fi de doua feluri:
tag-uri pereche (un tag de inceput si unul de incheiere). Exemple: <HTML> si
</HTML>; <TITLE> si </TITLE>; <HEAD> si </HEAD>;
tag-uri singulare (nu au un tag de incheiere) Exemple: <HR>, <BR>.
Sa vedem deci, cum va trebui sa arate aceasta prima pagina. Mai intai trebuie sa
deschidem editorul de texte (Notepad este suficient).
Vom incepe cu tag-ul <HTML>. Pentru a nu uita de tag-ul de inchidere este bine sa-l
punem si pe acesta tot la inceput. In continuare vin tag-urile <HEAD> si </HEAD>. Apoi intre
cele doua tag-uri vom pune perechea de tag-uri <TITLE> si </TITLE>. Intre aceste tag-uri
punem titlul paginii: Prima mea pagina web. Urmeaza tag-urile <BODY> si </BODY>. Ce
vom scrie intre ele va fi afisat in browserul de internet.
Iata cum ar trebui sa arate codul HTML:
<HTML>
<HEAD>
<TITLE>Prima mea pagina web</TITLE>
</HEAD>
<BODY bgcolor=red background=”C:\Users\Public\Pictures\Sample Pictures\Desert.jpg”>
Bine ai venit!<BR>
Vom invata impreuna limbajul HTML. Aceasta este prima mea pagina web!<BR>
</BODY>
</HTML>
Am folosit tag-ul <BR> pentru a trece pe urmatorul rand. Astfel ii spunem browser-ului
ca ce va fi scris dupa tag-ul <BR> va trebui afisat pe urmatorul rand. Tag-ul <BR> nu are un
tag de inchidere.
Dupa ce am scris codul, va trebui sa salvam documentul cu extensia .html sau .htm.
Din meniul File alege optiunea Save As, iar apoi denumim documentul asa cum vrem, dar
cu una din extensiile de mai sus. Apasam butonul Save. Avem acum un document html, care
reprezinta prima noatra pagina web. Intram in fisierul unde am salvat documentul si -
ldeschidem.
Despre atribute HTML
Ce sunt atributele?
Atributele pot fi definite ca niste proprietati ale tag-urilor. Atributele se pun numai in
tag-ul de inceput. Daca un tag nu are nici un atribut, atunci browser-ul va lua in considerare
valorile implicite ale tag-ului respectiv. Pentru a intelege mai bine notiunea de atribut sa
vedem cateva exemple.
Atributul BGCOLOR care se foloseste cu tag-ul <BODY> indica ce culoare va avea
fondul viitoarei pagini web. Fondul unei pagini web are in mod implicit culoarea alba, dar sa
spunem ca vrem ca fondul paginii noastre sa fie portocaliu.
In acest caz vom folosi pentru atributul BGCOLOR codul culorii orange: #FF9900
<BODY BGCOLOR="#FF9900">
Atunci cand vrem sa trasam o linie, folosim tag-ul <HR> care vine de la Horizontal
Rule care inseamna linie orizontala. Daca nu ii asociem acestui tag nici un atribut atunci vom
obtine o line orizontala cat latimea paginii web.
Daca vrem sa folosim propriile noastre proprietati pentru trasarea unei linii orizontale
vom apela la atributele tag-ului <HR>. Aceste atribute sunt urmatoarele: ALIGN - pentru
alinierea liniei, COLOR - pentru culoarea liniei, SIZE - pentru grosimea liniei si WIDTH -
pentru lungimea liniei.
Pentru a trasa o linie rosie (COLOR="#FF0000"), cu o lungime de jumatate din
valoarea implicita (WIDTH="50%") si putin mai groasa decat cea implicita (SIZE="5%") ce va
fi aliniata in centrul paginii (ALIGN="center"), vom folosi urmatoarea linie de cod:
Acum sa folosim cele doua linii de mai sus in cadrul paginii noastre. Prima linie o vom
folosi la sfarsit, in timp ce a doua linie o vom folosi dupa mesajul "Bine ai venit!". Noul cod
HTML al paginii noastre va fi urmatorul:
<HTML>
<HEAD>
<TITLE>Prima mea pagina web</TITLE>
</HEAD>
<BODY BGCOLOR="#FF9900">
<FONT COLOR="#0000FF" SIZE="6">
Bine ai venit!
</FONT><BR>
<HR COLOR="#FF0000" WIDTH="25%" SIZE="5%" ALIGN="left">
<BR>
<FONT COLOR="#FF0000">
Vom invata impreuna limbajul HTML. Aceasta este prima mea pagina web!
</FONT>
<HR>
</BODY>
</HTML>
Lista celor mai utilizate tag-uri impreuna cu atributele lor
In tabelul urmator vor fi prezentate cele mai utilizate tag-uri impreuna cu cele mai importante
atribute ale lor:
Nume tag Nume Valoare atribut Detalii
atribut
<P> Paragraf
<A> Ancora
LISTE IN HTML
<TABLE> Tabel
<META> Metainformatii
description Descriere
In aceasta lectie vom vorbi despre culori, mai precis despre codurile si numele
culorilor.
Acest curs, asa cum s-a mai spus, este pentru cei care vor sa invete limbajul HTML
intr-un mod cat mai usor si placut in acelasi timp. De aceea, nu vom intra in foarte multe
detalii si ne vom referi, in cadrul acestei lectii, strict la modul cum se poate schimba culoarea
fondului sau textului unei pagini web.
Culoarea fondului unei pagini web
Asa cum am vazut si in lectia precedenta nu trebuie ca fondul paginii tale sa fie alb.
Putem opta pentru ce culoare vrem cu ajutorul atributului BGCOLOR al tag-ului <BODY>.
Tot ce trebuie sa facem este sa cautam in tabelul cu nume si coduri de culori din
cadrul acestei lectii, sa alegem una care se potriveste si sa-i scriem numele sau codul in
cadrul atributului BGCOLOR. Sa vedem un exemplu:
Vreau ca pagina mea sa aiba fondul de culoare deschisa. Pentru a ma decide ma uit
la culorile din tabelul cu nume si coduri de culori. Mi-a atras atentia culoarea aqua care are
codul #00FFFF. Acest cod il scriem in locul celui de la lectia 3:
in loc de linia:
<BODY BGCOLOR="#FF9900">
<BODY BGCOLOR="#00FFFF">
Culoarea textului
Culoarea textului in cadrul unei pagini html se poate schimba folosind atributul
COLOR (culoare) al tag-ului <FONT>. De altfel un prim exemplu despre cum putem schimba
culoarea textului unei pagini web am vazut in lectia precedenta.
In lectia anterioara, am ales culorile albastru si rosu pentru text. Sa spunem ca vrem
ca tot textul sa fie scris cu albastru inchis si verde. Atunci in loc de codul culorii albastru
(#0000FF) si respectiv rosu (#FF0000) vom folosi codul #00008B (albastru inchis) si codul
#008000 (verde) in atributul COLOR al tag-ului <FONT>. Astfel codul HTML al paginii
noastre va fi urmatorul:
<HTML>
<HEAD>
<TITLE>Prima mea pagina web</TITLE>
</HEAD>
<BODY BGCOLOR="#00FFFF">
<FONT COLOR="#00008B" SIZE="6">
Bine ai venit!
</FONT><BR>
<HR COLOR="#FF0000" WIDTH="25%" SIZE="5%" ALIGN="left">
<BR>
<FONT COLOR="#008000">
Vom invata impreuna limbajul HTML. Aceasta este prima mea pagina web!
</FONT>
<HR>
</BODY>
</HTML>
În această lectie ne vom „juca” cu textele din cadrul paginilor web, vom vedea cum pot fi ele
formatate.
Titluri
Atunci când avem nevoie să folosim un titlu în cadrul paginii noastre web putem apela
la tag-urile <H1>, <H2>, <H3>, <H4>, <H5>, <H6>. Cu ajutorul acestor tag-uri, care au și
tag-uri de încheiere, vom scrie titlurile din cadrul paginilor noastre web. Astfel, în cadrul
codului HTML vom folosi tag-ul <H1>, de exemplu, urmat de textul titlului, iar la sfârșit vom
folosi tag-ul de încheiere </H1>. Tag-urile <H1> si </H1> permit scrierea unui titlu cu
caracterele cele mai mari în timp ce textul încadrat de tag-urile <H6> si </H6> va fi afișat cu
caracterele cele mai mici, după cum urmează:
Tag-urile acestea acceptă atributul ALIGN cu ajutorul căruia titlul va putea fi aliniat la
stânga, la centru sau la dreapta.
Sau
La tipul fontului, la fel ca si la culori, este bine sa folosesti un font care se afla pe
majoritatea calculatoarelor, pentru ca daca folosesti un font mai putin utlizat, multi utilizatori
nu vor putea vedea textele din cadrul paginilor tale cu acelasi font. Cele mai folosite fonturi
pentru paginile web sunt urmatoarele:
Pentru a schimba dimensiunea implicita a fontului, vom folosi una din valorile
atributului size. Acesta poate lua una din valorile 1,2,3,4,5,6,7 (1 pentru cea mai mica
dimensiune si 7 pentru cea mai mare):
Daca vrem ca textul nostru sa fie scris cu caractere ingrosate, folosim perechea de
etichete <B> si </B>.
Pentru ca textul sa fie scris cu caractere italice, folosim perechea de etichete <I> si
</I>.
Pentru ca textul sa fie subliniat, folosim perechea de etichete <U> si </U>.
Daca vrem ca textul sa fie afisat in centrul paginii putem folosi perechea de etichete
<CENTER> si </CENTER>.
Atunci cand vrem ca textul din cadrul paginii noastre web sa fie afisat pe mai multe
randuri vom folosi unul din tag-urile <BR> sau <P>. Tag-ul <BR> nu are tag de incheiere, in
timp ce tag-ul <P> are tag de incheiere, insa nu este obligatoriu.
Tag-ul <BR> vine de la line break (intrerupere de linie) si l-am mai folosit in cadrul
acestui curs. Asa cum am vazut si pana acum este folosit pentru a face trecerea de la o linie
la alta.
Astfel sa presupunem ca avem urmatorul cod HTML:
<HTML>
<HEAD>
<TITLE>Eticheta <BR></TITLE>
</HEAD>
<BODY>
Invat limbajul HTML. Exersez limbajul HTML. Stiu limbajul HTML.
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Eticheta <BR></TITLE>
</HEAD>
<BODY>
Invat limbajul HTML.<BR>Exersez limbajul HTML.<BR>Stiu limbajul HTML.
</BODY>
</HTML>
Tag-ul <P> vine de la cuvantul paragraf si se deosebeste de tag-ul <BR> prin faptul
ca prin utilizarea lui nu numai ca se trece pe urmatorul rand, dar se si lasa un rand liber intre
texte. Sa revenim la exemplul de mai sus. Se vor folosi ambele tag-uri, <BR> si <P>, pentru
a se vedea diferenta dinre ele.
<HTML>
<HEAD>
<TITLE>Eticheta <BR></TITLE>
</HEAD>
<BODY>
Invat limbajul HTML.<BR>Exersez limbajul HTML.<P>Stiu limbajul HTML.
</BODY>
</HTML>
Daca scriem un text intre tag-urile <P> si </P>, atunci textul va fi incadrat de cate un
rand liber, la fel ca in exemplul de mai jos:
<HTML>
<HEAD>
<TITLE>Eticheta <BR></TITLE>
</HEAD>
<BODY>
Invat limbajul HTML.<P>Exersez limbajul HTML.</P>Stiu limbajul HTML.
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Prima mea pagina web</TITLE>
</HEAD>
<BODY>
Bine ai venit!<BR>
Vom învăţa împreună limbajul HTML.
Aceasta este prima mea pagină web!
</BODY>
</HTML>
Exercitiu:
Scrieti codul unei pagini web care sa contina un text (scris cu diacritice):
HTML – IMAGINI
Pana acum am invatat cum sa folosim decat texte si culori in cadrul paginilor web. In
aceasta lectie vom invata despre imagini, care alese cu grija, vor da un plus design-ului
paginilor noatre.
Formatele imaginilor
Browserele recunosc, in cadrul paginilor web, mai multe formate ale imaginilor. Cele
mai raspandite sunt cele cu extensia .gif si cele care au una din terminatiile .jpg sau .jpeg.
Iata in continuare cateva caracteristici ale acestor formate de imagini:
GIF (Graphics Interchange Format)
Formatul GIF poate reda un numar de 256 de culori, de aceea este folosit pentru imaginile
de dimensiuni mici: butoane, icon-uri, animatii.
JPEG (Joint Photographic Expert Group)
Formatul JPEG nu mai este limitat la 256 de culori si de aceea este folosit pentru fotografii.
Imaginile care apartin acestui format au extensia .jpg sau .jpeg.
Adaugarea imaginilor in paginile web
Asa cum am vazut, la majoritatea site-urilor, imaginile dau o nota aparte paginilor web.
Pentru a folosi imagini si in cadrul paginilor noastre web trebuie sa folosesim tag-ul <IMG>
insotit de atributul SRC (source) care indica adresa sau calea catre imaginea pe care vrem
sa o folosim.
Forma generala a acestui tag va fi:
<IMG SRC="numeleimaginii.extensie">
Pentru o functionare corecta vom utiliza una din urmatoarele linii de cod prin care ii
vom spune browser-ului ca imaginea se afla in folder-ul Poze:
<IMG SRC=”../Poze/bebe.jpg”>
daca pagina va fi salvata in subfolderul Pagini si imaginea va fi in subfolderul Poze.
<IMG SRC=”Poze/bebe.jpg”>
daca pagina va fi salvata in folderul Site si imaginea va fi in subfolderul Poze.
Incearca si tu:
1. Fa un folder pe care denumeste-l Site.
2. In cadrul acestuia mai fa doua subfoldere: Pagini, respectiv Poze.
3. Copiaza imaginea bebe.jpg in folderul Poze.
4. Modifica in codul HTML de mai sus linia:
<IMG SRC=”bebe.jpg”>
cu linia:
<IMG SRC=”../Poze/bebe.jpg”>
5. Salveaza pagina in folderul Pagini cu numele imagini.html.
6. Dublu click pe imagini.html din folder-ul Pagini.
cu linia:
Acum sa scriem codul HTML al unei pagini web care va contine si text in jurul imaginii:
<HTML>
<HEAD>
<TITLE>EURO 2004</TITLE>
</HEAD>
<BODY>
<FONT COLOR=”#0000FF” FACE=”Times New Roman”>
<CENTER><B>Istoria campionatului european de fotbal</B></CENTER>
</FONT><BR>
<IMG SRC="../Poze/euro.jpg" BORDER=5 ALIGN=left>
<FONT COLOR="#FF0000" FACE=”Arial”>
Prima ediţie a campionatului european de fotbal a avut loc în Franţa
în anul 1960, iar câştigătoare a fost Rusia. Următorul turneu
european a avut loc în anul 1964 în Spania, acolo unde s-a impus ţara
gazdă. Patru ani mai târziu, în 1968, în Italia, a fost rândul
acesteia să câştige trofeul. În 1972 organizatoare a fost Belgia,
Republica Federală Germană impunându-se. În 1976 a venit
rândul Cehoslovaciei să câştige campionatul european de fotbal,
disputat în Iugoslavia. În 1980, Germania a fost câştigătoare,
în Italia, iar în 1984, ediţie găzduită de Franţa, din nou s-
a impus ţara organizatoare. Ediţia din anul 1988 a avut loc în Germania
şi a fost câştigată de Olanda. După patru ani, Danemarca se
impunea în Suedia, pentru ca după alţi patru ani, în 1996, să fie
rândul Germaniei să îşi adjudece trofeul, în Anglia. În anul
2000 Belgia şi Olanda au organizat turneul final, iar câştigătoare a fost
Franţa. Ultimul turneu final, care s-a disputat în Portugalia, în 2004, a
făcut ca Grecia să câştige trofeul.</FONT> <BR>
</BODY>
</HTML>
cu urmatoarea:
background1.jpg background2.jpg
Acum in codul paginii imagini.html din folder-ul Pagini adaugam tag-ului <BODY> atributul
BACKGROUND dupa cum urmeaza:
<BODY BACKGROUND=”../Poze/background1.jpg”>
Navigarea in cadrul site-urilor este posibila cu ajutorul link-urilor (legaturilor). In aceasta lectie
vom invata cum sa folosim diferite tipuri de legaturi in cadrul site-ului.
Daca pagina respectiva se afla in acelasi folder cu pagina pe care se afla legatura
atunci nu sunt necesare ghilimelele. Sa vedem impreuna, cum putem adauga o legatura intr-
o pagina web din folderul Pagini catre pagina imagini.html din acelasi folder. Deschidem
editorul de texte (de exemplu: Notepad) si scriem urmatorul cod HTML:
<HTML>
<HEAD>
<TITLE>Legaturi</TITLE>
</HEAD>
<BODY>
<CENTER><B>Legătură către o altă pagină </B>
<BR><BR>
<A HREF=imagini.html>Imagine bebe</A>
</CENTER>
</BODY>
</HTML>
Daca pagina catre care vrem sa facem o legatura, nu se afla in acelasi folder cu
pagina noastra atunci nu mai putem folosi decat numele paginii HTML ca valoare a
atributului HREF. Sa vedem cateva exemple de legaturi catre pagini din alte directoare sau
subdirectoare. Fie urmatoarea structura:
Pentru a intelege cat mai bine cum functioneaza legaturile catre diverse pagini web,
este bine sa facem o structura asemanatoare cu cea de mai sus, iar apoi sa facem cateva
pagini HTML in diverse directoare sau subdirectoare si sa incerci sa creezi legaturi din
fiecare pagina HTML catre celelate. Iata cateva exemple:
pentru a adauga o legatura in cadrul unei pagini HTML din directorul Contabilitate
catre o pagina HTML din directorul Firma 1, vom folosi urmatoarea valoare a
atributului HREF:
<A HREF="Firma 1/numelepaginii.html">Text link</A>
pentru a adauga o legatura in cadrul unei pagini HTML din directorul Site catre o
pagina HTML din directorul Carti, vom folosi urmatoarea valoare a atributului HREF:
<A HREF="Documente/Carti/numelepaginii.html">Text link</A>
pentru a adauga o legatura in cadrul unei pagini HTML din directorul Matematica
catre o pagina HTML din directorul Scoala, vom folosi urmatoarea valoare a
atributului HREF:
<A HREF="../numelepaginii.html">Text link</A>
pentru a adauga o legatura in cadrul unei pagini HTML din directorul Bilanturi catre o
pagina HTML din directorul Site, vom folosi urmatoarea valoare a atributului HREF:
<A HREF="../../numelepaginii.html">Text link</A>
pentru a adauga o legatura in cadrul unei pagini HTML din directorul Servici catre o
pagina HTML din directorul Matematica, vom folosi urmatoarea valoare a atributului
HREF:
<A HREF="../../Scoala/Matematica/numelepaginii.html">Text link</A>
pentru a adauga o legatura in cadrul unei pagini HTML din directorul Firma 2 catre o
pagina HTML din directorul Firma 3, vom folosi urmatoarea valoare a atributului
HREF:
<A HREF="../Firma 3/numelepaginii.html">Text link</A>
<HTML>
<HEAD>
<TITLE>Legaturi catre site-uri particulare</TITLE>
</HEAD>
<BODY>
<CENTER>
<B>Legături către site-urile unor ziare din România </B>
</CENTER>
<BR><A HREF="http://www.evz.ro">Evenimentul Zilei</A>
<BR><A HREF="http://www.jurnalul.ro">Jurnalul Naţional</A>
<BR><A HREF="http://www.capital.ro">Capital</A>
<BR><A HREF="http://www.prosport.ro">Prosport</A>
<BR><A HREF="http://www.gsp.ro">Gazeta sporturilor</A>
<BR><A HREF="http://www.libertatea.ro">Libertatea</A>
<BR>
</BODY>
</HTML>
Legaturile catre ancorele din cadrul aceleiasi pagini HTML vor avea urmatoarea forma:
<A NAME="#ancora1">Legatura catre prima sectiune</A>
<A NAME="#ancora2">Legatura catre a doua sectiune</A>
<A NAME="#ancora3">Legatura catre a treia sectiune</A>
Legaturile catre ancore din cadrul altei pagini HTML vor avea urmatoarea forma:
<A NAME="numelepaginii.html#ancora1">Legatura catre prima sectiune</A>
<A NAME="numelepaginii.html#ancora2">Legatura catre a doua sectiune</A>
<A NAME="numelepaginii.html#ancora3">Legatura catre a treia sectiune</A>
Pentru a intelege mai bine cum functioneaza legaturile catre sectiunile paginilor, sa scriem
impreuna codul unei pagini cu mai multe sectiuni:
<HTML>
<HEAD>
<TITLE>Legatura catre o sectiune de pagina</TITLE>
</HEAD>
<BODY>
<BR><BR><BR><BR><BR><BR>
<CENTER><B>Întrebări frecvente</B></CENTER>
<BR><BR><BR><BR><BR><BR>
<A HREF="#intrebarea1">1. Ce pot găsi pe site-ul ecursuri.ro?</A><BR><BR><BR>
<A HREF="#intrebarea2">2. Ce este un curs online?</A><BR><BR><BR>
<A HREF="#intrebarea3">3. De ce să învăţ
online?</A><BR><BR><BR><BR>
<HR><BR><BR><BR><BR><BR>
<FONT COLOR="#FF9900" SIZE="3" FONT="Arial, Times New Roman">
<A NAME="#intrebarea1">1. Ce pot găsi pe site-ul ecursuri.ro?</A></FONT><BR>
<BR>
Site-ul ecursuri.ro îşi propune să ofere vizitatorilor
săi cât mai multe resurse pentru a învăţa online. În aces
moment, pe site, sunt disponibile peste 20 de cursuri online, din diverse domenii, dar cu
ajutorul vostru sperăm ca numărul acestora să crească.<BR>
Pe lângă cursurile online vei găsi, în cadrul
site-ului nostru, mai mult de 1000 de referate şi peste 100 de jocuri online.
<BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR> <BR><BR> <BR><BR>
<FONT COLOR="#FF9900" SIZE="3" FONT="Arial, Times New Roman">
<A NAME="#intrebarea2">2. Ce este un curs online?</A></FONT><BR><BR>
Un curs online presupune ca toate materialele necesare,
să fie disponibile pe internet. Aşadar, viitorii cursanţi vor avea la
dispoziţie toate resursele necesare pentru învăţat, la fel ca şi
în cazul unui curs tradiţional, singura deosebire fiind că totul se petrece
online.
<BR><BR><BR><BR><BR> <BR><BR><BR> <BR><BR><BR><BR><BR> <BR>
<FONT COLOR="#FF9900" SIZE="3" FONT="Arial, Times New Roman">
<A NAME="#intrebarea3">3. De ce să învăţ online?</A>
</FONT><BR> <BR>
Cursurile online prezintă, indiscutabil, foarte multe avantaje
faţă de alte tipuri de cursuri. În primul rând cursurile online pot fi
consultate oricând, ele fiind disponibile non stop pe internet. Un lucru extrem de
important în alegerea unui curs online este şi preţul scăzut al
unui astfel de curs comparativ cu preţurile cursurilor tradiţionale. În cazul
cursurilor prezente pe site-ul ecursuri.ro, acestea sunt 100% GRATUITE.
<BR><BR><BR><BR><BR><BR> <BR><BR><BR> <BR>
<BR><BR><BR><BR><BR><BR> <BR><BR><BR> <BR>
</BODY>
</HTML>
Salveaza pagina cu numele intrebari.html in directorul Pagini.
In codul HTML al paginii intrebari.html adauga inainte de linia de cod ce contine eticheta de
incheiere </BODY>, urmatoarea secventa de cod:
Sa vedem un exemplu. Copiaza imaginea de mai jos (click dreapta, Save Picture As) in
directorul Poze cu numele de intreb.jpg.
Acum sa scriem codul unei pagini web care sa foloseasca aceasta imagine ca legatura catre
pagina intrebari.html. Deschide editorul de texte si scrie codul urmator:
<HTML>
<HEAD>
<TITLE>Folosirea unei imagini ca legatura</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Imagini ca legături</H1>
<BR><BR>
<A HREF=intrebari.html><IMG SRC="../Poze/intreb.jpg"></A>
</CENTER>
</BODY>
</HTML>
In aceasta lectie vom invata cum putem folosi listele in pagina web. Listele pe care le putem
crea cu ajutorul limbajului HTML sunt de urmatoarele tipuri: liste neordonate, liste ordonate si
liste de definitii. Sa le luam pe rand.
Liste neordonate (UL)
Inainte de vorbi despre listele neordonate sa vedem, mai intai, cum arata una:
Firma noastra va ofera urmatoarele servicii:
printare
printare
indosariere
xerox
tehnoredactare
Pentru a putea face o lista neordonata trebuie sa folosim tag-urile <UL> si </UL>.
(denumirea acestor tag-uri vine de la "unordered list" care inseamna in limba engleza lista
neordonata). Fiecare element al listei trebuie introdus de tag-ul <LI>. Ca sa intelegem mai
bine sa vedem impreuna cum arata codul HTML pentru lista de mai sus.
<HTML>
<HEAD>
<TITLE>Liste neordonate</TITLE>
</HEAD>
<BODY>
<UL>Firma noastră vă oferă următoarele servicii:
<LI>printare
<LI>laminare
<LI>îndosariere
<LI>xerox
<LI>tehnoredactare
</UL>
</BODY>
</HTML>
Cu ajutorul atributului TYPE, putem schimba cercul plin din fata fiecarui element.
Acesta este folosit in mod implicit atunci cand folosim o lista neordonata. Astfel, prin
atribuirea unei valori atributului TYPE, vom putea face ca elementele listei sa fie precedate
de un patrat sau de un cerc gol.
Pentru a vedea rezultatele, inlocuieste linia a 6-a din codul HTML de mai sus cu una
din urmatoarele linii de cod:
pentru cercuri goale:
<UL TYPE=circle> Firma noastră vă oferă următoarele servicii:
Salveaza pagina cu numele de liste2.html in directorul Pagini.
Am vazut cum putem folosi listele neordonate in cadrul paginilor web. Lista urmatoare
pastreaza continutul celei de mai sus insa este o lista ordonata (ordered list). Sa vedem
diferenta:
Firma noastra va ofera urmatoarele servicii:
1. printare
2. printare
3. indosariere
4. xerox
5. tehnoredactare
<HTML>
<HEAD>
<TITLE>Liste ordonate</TITLE>
</HEAD>
<BODY>
<OL>Firma noastră vă oferă următoarele servicii:
<LI>printare
<LI>laminare
<LI>îndosariere
<LI>xerox
<LI>tehnoredactare
</OL>
</BODY>
</HTML>
Salveaza pagina cu numele de liste4.html in directorul Pagini.
Pe langa atributul TYPE, pentru tag-ul <OL> mai putem folosi si atributul START.
Acest atribut este folosit atunci cand vrem sa schimbam valoarea initiala, de exemplu daca
vrem sa incepem de la 4, in cazul numerelor, sau de la D, in cazul literelor mari, etc. Forma
generala a acestui atribut este START=n, unde n este un numar natural.
<HTML>
<HEAD>
<TITLE>Liste ordonate</TITLE>
</HEAD>
<BODY>
<OL TYPE=A START=4>În vacanţa de vară am vizitat următoarele
oraşe:
<LI>Roma
<LI>Viena
<LI>Londra
<LI>Paris
<LI>Praga
</OL>
</BODY>
</HTML>
Fiecare element al unei liste de definitii va trebui introdus de tag-ul <DT> (Definition
Term), iar apoi fiecare definitie va fi precedata de tag-ul <DD> (Definition Definition).
<HTML>
<HEAD>
<TITLE>Liste definitii</TITLE>
</HEAD>
<BODY>
<DL>
<DT><B>Teorema lui Pitagora</B>
<DD>În orice triunghi dreptunghic suma pătratelor catetelor este egală cu
pătratul ipotenuzei.
<DT><B>Teorema catetei</B>
<DD>În orice triunghi dreptunghic pătratul catetei este egal cu produsul dintre
ipotenuză şi proiecţia catetei pe ipotenuză.
<DT><B>Teorema înălţimii</B>
<DD>În orice triunghi dreptunghic pătratul înălţimii este egal cu
produsul proiecţiilor celor două catete pe ipotenuză.
</DL>
</BODY>
</HTML>
TABELE IN HTML
Tabelele sunt foarte importante pentru realizarea unei pagini web. Cu ajutorul lor, pe langa
crearea propriu-zisa a tabelelor, putem controla mult mai bine elementele din cadrul paginilor
web.
Sa vedem cu ajutorul unui exemplu cum putem adauga un tabel in cadrul unei pagini web.
Scrie urmatorul cod HTML:
<HTML>
<HEAD>
<TITLE>Primul tabel</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD><B>Nume</B></TD>
<TD><B>Prenume</B></TD>
<TD><B>Nota</B></TD>
</TR>
<TR>
<TD>Ionescu</TD>
<TD>Bogdan</TD>
<TD>7</TD>
</TR>
<TR>
<TD>Stancu</TD>
<TD>George</TD>
<TD>9</TD>
</TR>
<TR>
<TD>Dumitrescu</TD>
<TD>Alexandra</TD>
<TD>10</TD>
</TR>
<TR>
<TD>Marin</TD>
<TD>Paul</TD>
<TD>8</TD>
</TR>
<TR>
<TD>Ivanov</TD>
<TD>Mihaela</TD>
<TD>9</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Proprietatile tabelelor
Asa cum am observat, in exemplul de mai sus am realizat un tabel, dar fara nici o linie.
Pentru ca liniile unui tabel sa fie vizibile tag-ul <TABLE> trebuie sa fie insosit de atributul
BORDER avand valoarea egala cu cel putin 1. In plus, putem schimba culoarea liniilor unui
tabel folosind atributul BORDERCOLOR insotit de codul culorii dorite. Astfel, daca vrem ca
liniile tabelului nostru sa aiba culoarea rosie vom folosi urmatoarea linie de cod:
Dupa cum s-a putut observa, liniile tabelului sunt practic niste linii duble. Pentru a
avea decat o singura linie vom folosi atributul CELLSPACING cu valoarea "0". Acest atribut
specifica distanta dintre celulele unui tabel. Alaturi de acest atribut putem folosi si atributul
CELLPADING care indica distanta dintre marginile celulelor si textul din cadrul acestora.
Pentru a stabili dimensiunea unui tabel, unui rand sau a unei celule, folosim atributele
WIDTH pentru latime si/sau HEIGHT pentru inaltime. Pentru alinierea datelor din cadrul
tabelului folosim atributul ALIGN cu una dintre valorile "left", "center" sau "right". Pentru a
alinia datele tabelului pe verticala folosim atributul VALIGN insotit de una dintre valorile "top",
"middle" sau "bottom".
Pentru a schimba culoarea unei celule, unui rand sau chiar a intregului tabel folosim
atributul BGCOLOR impreuna cu codul culorii alese. Sa facem impreuna o pagina web cu un
tabel care sa cuprinda toate notiunile pe care le-am invatat pana acum in aceasta lectie.
Scrie codul urmator in cadrul unui editor text si salveaza apoi pagina cu numele de
tabel3.html.
<HTML>
<HEAD>
<TITLE>Proprietatile tabelelor</TITLE>
</HEAD>
<BODY>
<CENTER><H2>Rezultatele obţinute la matematică</H2></CENTER>
<HR WIDTH="50%" ALIGN="center" COLOR="#FF0000">
<TABLE WIDTH="500" ALIGN="CENTER" BORDER="1" BORDERCOLOR="#000000"
CELLSPACING=”0” CELLPADDING="0">
<TR BGCOLOR="#000000" ALIGN="center" VALIGN="middle">
<TD WIDTH="200" HEIGTH="50"><B><FONT
COLOR="#FFFFFF">Nume</FONT></B></TD>
<TD WIDTH="200"HEIGTH="50"><B><FONT
COLOR="#FFFFFF">Prenume</FONT></B></TD>
<TD WIDTH="100" HEIGTH="50"><B><FONT
COLOR="#FFFFFF">Nota</FONT></B></TD>
</TR>
<TR VALIGN="middle">
<TD WIDTH="200" HEIGTH="20">Ionescu</TD>
<TD WIDTH="200" HEIGTH="20">George</TD>
<TD WIDTH="100" HEIGTH="20" ALIGN="center">7</TD>
</TR>
<TR BGCOLOR="#FFFFCC" VALIGN="middle">
<TD WIDTH="200" HEIGTH="20">Stancu</TD>
<TD WIDTH="200" HEIGTH="20">Alina</TD>
<TD WIDTH="100" HEIGTH="20" ALIGN="center">9</TD>
</TR>
<TR VALIGN="middle">
<TD WIDTH="200" HEIGTH="20">Popescu</TD>
<TD WIDTH="200" HEIGTH="20">Alexandra</TD>
<TD WIDTH="100" HEIGTH="20" ALIGN="center">10</TD>
</TR>
<TR BGCOLOR="#FFFFCC" VALIGN="middle">
<TD WIDTH="200" HEIGTH="20">Marin</TD>
<TD WIDTH="200" HEIGTH="20">Liviu</TD>
<TD WIDTH="100" HEIGTH="20" ALIGN="center">8</TD>
</TR>
<TR VALIGN="middle">
<TD WIDTH="200" HEIGTH="20">Alecse</TD>
<TD WIDTH="200" HEIGTH="20">Mihaela</TD>
<TD WIDTH="100" HEIGTH="20" ALIGN="center">9</TD>
</TR>
</TABLE>
</BODY>
</HTML>
In aceasta lectie vom invata cum putem folosi cadrele in paginile noastre web. Cu ajutorul
cadrelor putem imparti o pagina web in mai multe zone, iar apoi putem stabili ce pagina va fi
afisata in fiecare zona.
Folosirea cadrelor intr-o pagina web
Pentru a imparti o pagina web in mai multe cadre, trebuie sa folosim, inainte de tag-ul
<BODY>, tag-ul <FRAMESET> insotit de unul dintre atributele <COLS> sau <ROWS>,
pentru a defini exact cum va fi impartita pagina respectiva. Astfel pentru a imparti pagina in
doua cadre orizontale vom folosi urmatoarea linie de cod:
<FRAMESET ROWS="70%,*">
Se folosesc procente pentru a defini marimea randurilor sau a coloanelor care vor
forma cadrele. In exemplul de mai sus, primul cadrul va avea 70% din inaltimea paginii, iar al
doilea cadru restul, adica "*" sau 30%.
Alaturi de tag-ul <FRAMESET> se mai folosesc si atributele <FRAMESPACING>,
pentru marimea spatiilor dintre cadre si <FRAMEBORDER>, care se refera la cadrele
definite, daca au sau nu chenar, valorile sale fiind "yes" sau "no". Astfel, linia completa
pentru definirea a doua cadre orizontale va fi urmatoarea:
Pentru a imparti pagina web in mai multe cadre orizontale, se vor asocia mai multe
procente atributului ROWS, dar avand grija ca suma lor sa nu depaseasca 100%. La fel se
procedeaza si pentru impartirea unei pagini web in cadre verticale singura deoasebire fiind
aceea ca in locul atributului ROWS se foloseste atributul COLS. Nu uita de tag-ul de
incheiere </FRAMESET>.
Dupa ce am stabilit impartirea paginii in cadre, se trece la definirea cadrelor. Astfel
intre tag-urile <FRAMESET> si </FRAMESET> vom folosi tag-ul <FRAME>. Principalul
atribut al tag-ului <FRAME> este SRC cu ajutorul caruia indicam sursa cadrului. Astfel o linie
de cod care defineste un cadru ar putea fi urmatoarea:
<FRAME SRC="numelepaginii.html">
In continuare vom vedea cum se poate realiza fiecare element al unui formular HTML
Campurile de editare
Pentru a introduce in cadrul unui formular un camp de editare, trebuie sa folosim
pentru atributul TYPE, al tagului <INPUT>, valoarea text.
Atributele cele mai folosite pentru tagul <INPUT> de tipul camp de editare sunt:
SIZE, care reprezinta latimea campului de editare
MAXLENGTH, specifica numarul maxim de caractere care pot fi introduse in campul de
editare
VALUE, valoarea initiala a campului de editare
De exemplu, pentru campul de editare de mai sus s-a folosit urmatoarea linie de cod:
Daca vrem sa introducem un camp de editare de tip "parola", atributul TYPE va avea
valoarea "password". In acest caz, caracterele introduse in campul de editare, nu vor fi
vizibile .
Atunci cand vrem sa adaugam in cadrul formularului nostru un camp de editare in care
sa poata fi introduse mai multe randuri, folosim campurile de editare de tip multilinie. Pentru
a folosi un astfel de camp de editare, avem nevoie de tag-urile <TEXTAREA> si
</TEXTAREA>. Sa vedem cum arata linia de cod HTML care introduce un camp de editare
multilinie:
sub 15 ani
15-20 ani
20-25 ani
25-35 ani
35-45 ani
peste 45 ani
Codul HTML care va afisa in cadrul browser-ului, intrebarea de mai sus si variantele de
raspuns, este urmatorul:
În ce categorie de vârstă vă încadraţi? <BR>
<INPUT TYPE="radio" NAME="raspuns" VALUE="a" CHECKED >sub 15 ani<BR>
<INPUT TYPE="radio" NAME="raspuns" VALUE="b">15-20 ani<BR>
<INPUT TYPE="radio" NAME="raspuns" VALUE="c">20-25 ani<BR>
<INPUT TYPE="radio" NAME="raspuns" VALUE="d">25-35 ani<BR>
<INPUT TYPE="radio" NAME="raspuns" VALUE="e">35-45 ani<BR>
<INPUT TYPE="radio" NAME="raspuns" VALUE="f">peste 45 ani
Casetele de validare
Pentru a introduce o caseta de validare (checkbox) se utilizeaza eticheta <INPUT> cu
atributul TYPE avand valoarea "checkbox". Casetele de validare permit selectarea sau
deselectarea uneia sau mai multor optiuni. Exemplu:
La mare
La munte
În străinătate
La ţară
Acasă
Asa cum se poate observa, in cazul casetelor de validare, spre deosebire de
butoanele radio, pot fi selectate mai multe optiuni. Codul casetelor de validare de mai sus
este urmatorul:
Casetele de fisiere
Pentru a trimite un fisier prin intermediul unui formular, folosim pentru atributul TYPE
al tag-ului <INPUT>, valoarea "file".
Listele de selectie
O lista de selectie, asa cum ii spune si numele, permite utilizatorului sa aleaga una
sau mai multe optiuni dintr-o lista. Listele de selectie pot fi introduse in cadrul unui formular
cu ajutorul tag-urilor <SELECT> si </SELECT>.
<SELECT>
<OPTION value=Alba>Alba</OPTION>
<OPTION value=Arad>Arad</OPTION>
<OPTION value=Arges>Arges</OPTION>
<OPTION value=Bacau>Bacau</OPTION>
<OPTION value=Bihor>Bihor</OPTION>
<OPTION value=Bistrita-Nasaud>Bistrita-Nasaud</OPTION>
<OPTION value=Botosani>Botosani</OPTION>
<OPTION value=Brasov>Brasov</OPTION>
<OPTION value=Braila>Braila</OPTION>
<OPTION value=Bucuresti selected>Bucuresti</OPTION>
<OPTION value=Buzau>Buzau</OPTION>
<OPTION value=Caras-Severin>Caras-Severin</OPTION>
<OPTION value=Calarasi>Calarasi</OPTION>
<OPTION value=Cluj>Cluj</OPTION> <OPTION value=Constanta>Constanta</OPTION>
<OPTION value=Covasna>Covasna</OPTION>
<OPTION value=Dambovita>Dambovita</OPTION>
<OPTION value=Dolj>Dolj</OPTION>
<OPTION value=Galati>Galati</OPTION>
<OPTION value=Giurgiu>Giurgiu</OPTION>
<OPTION value=Gorj>Gorj</OPTION>
<OPTION value=Harghita>Harghita</OPTION>
<OPTION value=Hunedoara>Hunedoara</OPTION>
<OPTION value=Ialomita>Ialomita</OPTION>
<OPTION value=Iasi>Iasi</OPTION>
<OPTION value=Ilfov>Ilfov</OPTION>
<OPTION value=Maramures>Maramures</OPTION>
<OPTION value=Mehedinti>Mehedinti</OPTION>
<OPTION value=Mures>Mures</OPTION>
<OPTION value=Neamt>Neamt</OPTION>
<OPTION value=Olt>Olt</OPTION>
<OPTION value=Prahova>Prahova</OPTION>
<OPTION value=Satu-Mare>Satu-Mare</OPTION>
<OPTION value=Salaj>Salaj</OPTION>
<OPTION value=Sibiu>Sibiu</OPTION>
<OPTION value=Suceava>Suceava</OPTION>
<OPTION value=Teleorman>Teleorman</OPTION>
<OPTION value=Timis>Timis</OPTION>
<OPTION value=Tulcea>Tulcea</OPTION>
<OPTION value=Vaslui>Vaslui</OPTION>
<OPTION value=Valcea>Valcea<</OPTION>
<OPTION value=Vrancea>Vrancea</OPTION>
</SELECT>
Pentru a putea selecta mai multe valori din cadrul unei liste de selectie trebuie sa
folosim pentru tag-ul <SELECT> atributul MULTIPLE, fara alte valori.