Curs 1 Web

Curs – Programare WEB
Curs – 1
Elemente de baza
Pentru inceput sa descoperim originea abrevierii HTML - Hypertext Markup Language . Acest limbaj
este folosit pentru a formata si prezenta documente pe web . HTML adauga tag-uri fisierelor ASCII
astfel incat sa permita afisarea unei varietati de fonturi , imagini sau sunete prin definirea unor
elemente ca header , lista , paragraph si prin implementarea si utilizarea unor legaturi ( linkuri ) catre
alte documente publicate in internet .
Mai clar , limbajul HTML este limbajul pe care il inteleg aplicatiile de tip browser ( ex: Internet
Explorer , Netscape Communicator , Opera , etc. ) folosite pentru a naviga pe internet . Datorita
acestui limbaj browser-ul poate afisa ceea ce autorul paginii web a dorit sa prezinte .
Elementele de baza ale limbajului HTML sunt foarte simple si usor de retinut si apoi de utilizat ;
cunoscand doar tag-urile de baza putem construi un intreg site fara probleme .
TAG –=ETICHETA reprezinta o comanda in cod HTML care indica modul in care va fi interpretata
informatia la care ea se refera .
TAG-uri DE BAZA
Orice pagina web standard trebuie sa contina 8 tag-uri de baza . Aceste tag-uri trebuie sa apara in
cadrul fiecarei pagini a unui web site .
Aceste tag-uri sunt prezentate mai jos si ele trebuie sa apara exact in aceasta cronologie in cadrul
paginii web :
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Inainte de a explica fiecare tag in parte mentionez ca tag-urile trebuie scrise in codul sursa exact in
forma in care ele apar mai sus , intre semnele <> . Aceste simboluri au menirea de a transmite
browser-ului ca textul dintre ele trebuie recunoscut ca un tag – deci ca un cuvant cheie al limbajului , o
comanda care trebuie executata . Limbajul HTML nu tine cont de litere mari sau mici in cadrul tag-
ului , astfel incat <BODY> sau <body> vor fi interpretate identic .
<HTML> ~ acest tag transmite browser-ului ca documentul respectiv este de fapt un document
HTML , dand astfel indicatii asupra modului in care vor fi interpretate diferite partitii ale fisierului
ASCII .
<HEAD> ~ acest tag este in fapt tot un mesaj catre browser , continand informatii despre document –
ca de ex. link-uri sau pagini care trebuie incarcate in prealabil .
<TITLE> ~ acest tag este folosit pentru a da o denumire paginii web create ; acest nume va apare in
partea superioara a fereastrei browser-ului identificand astfel pagina respectiva .
</TITLE> ~ acest tag este de fapt inchiderea celui precedent ; transmite browser-ului ca textul ce
trebuie considerat ca titlu al paginii s-a incheiat . Majoritatea tag-urilor HTML folosesc tag-uri
corespondente de inchidere .
</HEAD> ~ tag-ul de inchidere al tag-ului corespondent <HEAD>
<BODY> ~ acest tag semnaleaza deschiderea sectiunii corespunzatoare corpului paginii web . Aici se
vor introduce informatiile continute in pagina , textul , grafica si elementele multimedia dorite .
</BODY> ~ tag-ul de inchidere care transmite browser-ului ca nu se mai doreste adaugarea de
informatie in aceasta pagina .
</HTML> ~ acest tag incheie documentul HTML , semnaland browser-ului ca nu mai exista elemente
care trebuie citite sau incarcate .
Cu elementele prezentate mai sus putem deja crea o pagina web – foarte simpla dar perfect functionala
Codul urmator implementeaza o pagina web folosind doar tag-urile de baza :
<html>
<head>
<title>Pagina mea proprie</title>
</head>
<body>
Aceasta este o pagina de test . Acesta este un exemplu perfect pentru simplitatea crearii unei pagini
web !
</body>
</html>
OBS : Dupa cum ati vazut tag-urile sunt folosite in general in perechi complementare . Daca vreti sa
folositi taguri grupate fara a avea probleme atunci ele trebuie corect grupate si nu incrucisate. Adica:
<Tag1><Tag2></Tag1></Tag2> - tag-uri incrucisate care pot genera erori.

<TAG1><TAG2></TAG2></TAG1> - tag-uri grupate corect.
Odata creata o prima pagina web functionala trebuie sa revenim la tag-uri pentru a aprofunda
capacitatile acestora .
In cadrul sectiunii <BODY> apar elementele de text si grafica ale paginii noastre . Acum sa vedem ce
altceva mai putem realiza in aceasta sectiune .
Unul dintre elementele cele mai puternice si des utilizate care se intalnesc in cadrul acestei sectiuni
este controlul asupra culorilor , atat la nivel de text cat si de fond . Putem configura culori diferite
pentru text normal , link-uri , link-uri vizitate , link-uri active sau pentru fondul paginii noastre .
Pentru a specifica culoarea de fond tag-ul nostru se prezinta astfel :
<Body bgcolor="blue">
Comanda anterioara face ca fondul paginii noastre sa devina albastru .
Pentru a specifica o anumita culoare ( ex. negru ) si pentru textul din cadrul paginii folosim urmatoarea
comanda :
<Body bgcolor="blue" text="black">
La pasul urmator vom schimba culoarea link-urilor prezente in pagina in galben pentru a le diferentia
mai rapid in cadrul informatiilor prezentate in pagina web :
<Body bgcolor="blue" text="black" link="yellow">
In cazul in care in cadrul paginii avem mai multe link-uri ar fi util sa putem observa rapid care dintre
ele au fost deja vizitate si care nu . Pentru a putea sublinia acest fapt vom introduce si atributul vlink
( = visited link ) in cadrul tag-ului :
<Body bgcolor="blue" text="black" link="yellow" vlink="red">
In urma comenzii de mai sus browser-ul va afisa link-urile vizitate cu rosu . Ca un alt pas putem
configura o alta culoare ( ex. verde ) pentru link-urile pe care se apasa la momentul respectiv ; aceasta
culoare va apare doar in momentul in care se va da click pe link-ul respectiv iar atributul folosit va fi
alink ( = active link ) :
<Body bgcolor="blue" text="black" link="yellow" vlink="red" alink="green">
Revenind la controlul culorilor trebuie sa mai amintesc unele detalii . Culoarea poate fi specificata fie
in limba engleza ( denumirile dintr-o lista standard ) fie in cod hexazecimal ( ex .#0000FF ) . Formatul
in care se transmite comanda este de tip RGB ( red green blue ) : RRGGBB ; comanda de mai jos :
<Body bgcolor="#0000FF">
este echivalenta cu :
<Body bgcolor="blue">
In cazul in care vrem ca pagina sa aiba un aspect mai personalizat putem folosi ca fond nu doar o
culoare ci o imagine ( in format GIF sau JPG ) :
<Body background="imagine.gif" text="black" link="yellow" vlink="red" alink="green">
Tag-ul anterior specifica utilizarea imaginii “imagine.gif” ca fond al paginii noastre . Trebuie
mentionat ca indiferent de dimensiunile imaginii dorite aceasta va acoperi intreaga suprafata a paginii .
In continuare vom aborda utilizarea diferitelor fonturi . In computer vom intalni o varietate foarte mare
de fonturi in ceea ce priveste forma si marimea . Trebuie sa acordam atentie alegerii fontului utilizat in
pagina noastra web pentru ca este posibil ca nu toti utilizatorii care vor incerca sa acceseze pagina vor
dispune de fontul respectiv . In acest caz computerul va inlocui automat fontul nostru cu fontul default
al acelui sistem ( de obicei ARIAL sau TIMES NEW ROMAN ) .
Ca element practic , indiferent de fontul pe care il utilizam este necesara vizualizarea paginii si
folosind fonturile default cele mai raspandite .
Pentru a controla fonturile trebuie utilizat tag-ul , in cadrul sectiunii <BODY> :
<Body bgcolor="blue" text="black" link="yellow" vlink="red" alink="green">


</Body>
Observati ca si tag-ul necesita un tag de inchidere . Acest tag ne permite sa stabilim tipul de
font , dimensiunea sa si culoarea , ca in exemplul urmator :

Pentru a da flexibilitate utilizarii fonturilor limbajul HTML permite enumerarea in cadrul unei liste a
fonturilor ce urmeaza a fi folosite , astfel incat in cazul in care fontul pe care il utilizati nu este
disponibil atunci se va incerca automat utilizarea urmatorului font din lista :

Marimea fontului poate fi stabilita in cadrul a trei tipuri de plaje : de la 1 la 7 , de la -1 la -3 si de la +1
la +4 .
In afara acestui control al fonturilor mai exista inca sase tag-uri care pot modifica fontul prezent in
pagina . Aceste comenzi sunt tag-uri independente si nu apar in cadrul tag-ului . Aceste tag-
uri sunt <h1 > , <h2> , <h3> , <h4> , <h5> si <h6> , cu tag-ul <h1> folosind dimensiunea cea mai
mare de font iar <h6> cea mai mica dimensiune . Aceste tag-uri sunt in general folosite la inceputul
paginii pentru a anunta un titlu sau in cadrul paginii pentru a diferentia dimensiunea unei portiuni de
text de dimensiunea standard definita prin tag-ul . Toate aceste tag-uri necesita si
complementarul de inchidere ( ex. </h1> ) .
In cazul in care nu se apeleaza la tag-ul se va folosi dimensiunea default de 3 .
In cazul in care dorim ca in locul fontului default al browserului sa folosim alt font pentru intregul
document se va apela la tag-ul BASEFONT , integrat in sectiunea HEAD a documentului :
<head>
<basefont face=”Comic Sans MS” color="red" size=”+3”>
</head>
Codul sursa de mai sus implica utilizarea ca default a noului font , cu culoarea rosie si cu o dimensiune
mai mare cu 3 decat a fontului default al browserului .
O alta observatie trebuie facuta legat de anumite caractere speciale care nu pot fi utilizate in mod
normal ca text datorita faptului ca ele reprezinta cuvinte cheie ale limbajului HTML . Pentru a
introduce aceste caractere exista posibilitatea de a folosi codul lor sau alte definitii standardizate ale
acestora – ca de exemplu pentru a obtine semnul de copyright :
&copy -> browser-ul va afisa pe ecran semnul de copyright .
In general simbolul “&” marcheaza pentru browser faptul ca incepem descrierea unui caracter special .
Unul dintre cele mai folosite caractere speciale pentru HTML este spatiul ! In cazul in care in textul pe
care dorim sa-l publicam in pagina noastra lasam un numar de 5 spatii intre doua cuvinte browser-ul va
afisa doar un singur spatiu intre ele . Pentru a putea afisa mai multe spatii trebuie introdus caracterul
special &nbsp :
<body bgcolor="#FFFFFF">
Ceva
tare
ciudat.
</body>
Rezultatul acestei comenzi va fi :
Ceva tare ciudat.

Alte caractere speciale des utilizate ar include :
 ( spatiu )
 < ( < )
 > ( > )
 & ( & )
 " ( " )
Recapituland , pana in acest moment am vazut cum se poate crea o pagina utilizand tag-urile de baza :
<HTML>, <Head>, <Title>, </Title>, </Head>, <Body>, </Body>,
</HTML> ; am aflat cum sa controlam culoarea folosita pentru fodul paginii , text , linkuri , linkuri
active , linkuri vizitate , cum sa folosim o imagine ca fond al paginii si cum sa configuram fontul
folosit in ceea ce priveste tipul , culoarea si dimensiunea .
In continuare vom aborda alte tag-uri care aduc o imbunatatire controlului pe care il avem asupra
continutului si prezentarii paginii noastre :
 si ~ tag-urile transforma textul din cadrul sau in text bold ( ingrosat ) . In locul acestei
perechi de tag-uri se poate folosi si perechea si 
 si ~ tag-urile transforma textul din cadrul sau in text italic ( cursiv ) . In locul acestei perechi
de tag-uri se poate folosi si perechea si 
 si ~ tag-urile transforma textul din cadrul sau in text subliniat ( underlined )
 si ~ tag-urile transforma textul in superscript
 si ~ tag-urile transforma textul in subscript
<s> si </s> ~ tag-urile transforma textul in strike . In locul acestei perechi de tag-uri se poate folosi
perechea <strike> si </strike>
 ~ tag-ul comanda trecerea la un alt paragraf in cadrul paginii ; mai exact tag-ul comanda trecerea
la linie noua si lasarea unei linii libere . Mai trebuie mentionat ca folosirea in serie a tag-ului :
 
nu va duce la lasarea libera a trei linii , browser-ul va interpreta tag-urile ca pe unul singur .
Folosit sub aceasta forma tag-ul nu necesita si complementarul de inchidere . Vom vedea imediat ca in
cazul folosirii unor atribute ale tag-ului va apare si necesitatea utilizarii tag-ului complementar de
inchidere 
In cadrul tag-ului se pot folosi atribute pentru alinierea textului la stanga ( pozitionarea default ) ,
la dreapta sau central .
De exemplu :
Acest text va fi aliniat la dreapta.
va produce :
Acest text va fi aliniat la dreapta
 ~ tag-ul comanda trecerea la linie noua fara a incepe un nou paragraf ( = line break ) ; nu
necesita tag de inchidere .
In cazul in dorim trecerea la o linie noua este obligatorie folosirea tag-ului , simpla utilizare a tastei
ENTER in cadrul codului sursa al paginii noastre nu are nici un efect in cadrul browser-ului .
Pentru obtinerea mai multor linii libere se foloseste combinatia intre caracterul special pentru spatiu si
tag-ul :
<BODY BGCOLOR="#FFFFFF">
Ceva tare 
 
 
 
Ciudat.
</BODY>
<BLOCKQUOTE> si </BLOCKQUOTE> ~ va pagina textul dintre tag-uri ca pe un citat ; mai
explicit browser-ul va crea o margine libera in stanga si in dreapta textului :
<BLOCKQUOTE>
Text folosit pentru a ilustra capacitatile diferitelor taguri HTML . Textul va fi folosit pentru a ilustra
paginarea cu ajutorul tagului BLOCKQUOTE si apoi cu ajutorul tagului de centrare a textului in
cadrul liniilor .
</BLOCKQUOTE>
</BODY>
Secventa de mai sus va avea ca rezultat urmatoarea paginare :
Text folosit pentru a ilustra capacitatile diferitelor taguri HTML . Textul va fi folosit pentru a
ilustra paginarea cu ajutorul tagului BLOCKQUOTE si apoi su ajutorul tagului de centrare a
textului in cadrul liniilor .
In cazul in care s-ar folosi tag-ul <center> :
<center>
paginarea cu ajutorul tagului BLOCKQUOTE si apoi su ajutorul tagului de centrare a textului in
cadrul liniilor .
</center>
s-ar obtine urmatoarea paginare :
paginarea cu ajutorul tagului BLOCKQUOTE si apoi su ajutorul tagului de centrare a textului in
cadrul liniilor .
<nb> ~ ( = non breaking space ) comanda introducerea unui spatiu in cadrul textului fara a duce la
trecerea la alta linie . Nu se foloseste pentru introducerea unui spatiu in cadrul textului ci pentru a
distanta imagini aflate pe aceeasi linie . Nu necesita tag de inchidere .
<center> si </center> ~ tag-urile centreza textul dintre ele la nivel de linie .
OBS : Tag-urile de formatare a textului pot fi folosite si combinat pentru a obtine efectul dorit :
<center>I know how to use HTML tags!</center>

<hr> ~ (= horizontal rule ) este un tag foarte folosit in cadrul paginilor web . Comanda duce la trasarea
unei linii orizontale de-a lungul paginii . Acest tag poate primi mai multe atribute ce pot configura
pozitia , culoare , dimensiunea liniei .
<HR WIDTH=50%>
<HR WIDTH=100>
</BODY>
Prima comanda va trasa o linie orizontala cu lungimea de 50% din latimea paginii , de culoare albastra
si centrata ; cea de-a doua instructiune va trasa o linie orizontala de 100 de pixeli . Tag-ul poate fi
folosit si independent :
<hr>
ceea ce va duce la trasarea unei linii orizontale de lungul intregii pagini .

In cadrul tag-ului <HR> se pot folosi si atributele ALIGN , SIZE si NOSHADE :
<HR WIDTH=60% ALIGN=RIGHT>

<HR WIDTH=60% SIZE=8>
<HR WIDTH=60% SIZE=15 NOSHADE>
Atributul SIZE determina grosimea liniei iar NOSHADE face linia sa

devina solida .
<PRE> si </PRE> ~ dupa cum am aratat mai sus browser-ul nu prezinta pagina exact sub forma sub
care vedem textul in momentul realizarii codului sursa al paginii ; pentru acest neajuns exista o solutie
sub forma utilizarii acestor tag-uri . Sa luam exemplu urmator :
\|/
(@ @)
+----oOO----(_)-----------+
| LeeView |
| for |
| President |
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
</BODY>
Acest cod sursa va rezulta dupa afisare in urmatoarea imagine :
\|/ (@ @) +----oOO----(_)-----------+ | LeeView | | for | | President | +-----------------oOO-----+ |__|__| ||

|| ooO Ooo
Simpla introducere a urmatorului cod sursa :

<PRE>
\|/
(@ @)
+----oOO----(_)-----------+
| LeeView |
| for |
| President |
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
</PRE>
</BODY>
Va duce la afisarea urmatorului rezultat :
\|/
(@ @)
+----oOO----(_)-----------+
| LeeView |
| for |
| President |
+-----------------oOO-----+
|__|__|
|| ||
ooO Ooo
IMAGINI
Imaginea a devenit un element omniprezent in toate paginile web actuale . Bazat pe faptul recunoscut
ca o imagine are un impact mult mai mare asupra privitorului decat un text precum si pe necesitatea
oferirii unor informatii cat mai rapid si direct catre utilizator imaginea s-a impus ca elementul
indispensabil oricarei prezentari a oricarui subiect .
In cadrul paginilor web introducerea elementelor grafice – la acest moment ne referim la imaginile de
tip GIF sau JPG – se face cu ajutorul tag-ului <IMG> .
<IMG SRC="imagine.gif" WIDTH=82 HEIGHT=68>
are ca efect introducere imaginii imagine.gif in pagina noastra , cu dimensiunile specificate in

atributele WIDTH ( latime ) si HEIGHT ( inaltime ) ale tag-ului .
Atributul SRC specifica sursa de unde browser-ul va incarca imaginea respectiva ; aceasta locatie
poate fi in sistemul respectiv ( in directorul paginii sau in orice alt director ce va fi specificat in cale )
sau in orice alta locatie pe web ( ex. http://ura.data.ro/lectii/poza1.gif ) .
In cazul in care nu se introduce o cale catre aceasta imagine ci doar numele ei atunci browser-ul va
cauta in directorul curent al paginii web .
Atributele WIDTH si HEIGHT pot lipsi iar browser-ul va recunoaste imaginea la dimensiunile ei
originale ; chiar in cazul in care imaginea a fost special creat pe dimensiunile necesare paginii noastre
este de preferat folosirea celor doua atribute care ajuta la incarcarea mai rapida a imaginii ( in caz
contrar browser-ul va mai pierde timp calculand dimensiune si asezarea in pagina a imaginii respective
).
Un alt atribut care este preferabil sa fie prezent este ALT . Cu ajutorul acestui atribut putem oferi o
alternativa browser-ului in cazul in care imaginea respectiva nu a putut fi incarcata :
<img src="1.gif" width=20 height=20 alt="Text in cazul lipsei pozei din calea generata">
Tag-ul anterior va face ca in cazul in care poza dorita nu este gasita browser-ul sa afiseze textul
atributului ALT intr-o fereastra de dimensiunile specificate pentru imagine .
Un alt atribut al tag-ului IMG este si BORDER ; cu ajutorul sau putem specifica grosimea unui chenar
care inconjoara imaginea dorita .
Tag-ul IMG accepta si el atributul ALIGN , intalnit de exemplu si in cadrul tag-ului .
<Body>
<img align=”right” src="1.gif" width=20 height=20 alt="Text in cazul lipsei pozei din calea
generata">
Text care va apare alaturi de imagine neacoperind imaginea .
</BODY>
Comanda anterioara va pozitiona imaginea la dreapta liniei si va face ca textul sa apara in stanga
imaginii ( analog pentru folosirea atributului ALIGN=”left” ) .
In cazul folosirii valorii CENTER pentru atributul ALIGN se va obtine pozitionare in stanga a
imaginii ( lucru default ) iar textul va incepe pe linia pozitionata in dreptul mijlocului imaginii , dupa
umplerea acestei linii textul continuand pe linia urmatoare de sub imagine – aceasta optiune este in
general evitata .
Pentru a obtine centrarea imaginii se va apela la incadrarea tag-ului IMG intre doua taguri
complemetare <CENTER> si </CENTER> .
Tot in cadrul atributului ALIGN mai putem intalni alte trei valori :
 “bottom” – aliniaza partea inferioara a imaginii pe linia curenta

 “top” – aliniaza partea superioara a imaginii cu cel mai inalt element de pe linia curenta
 “middle” – aliniaza mijlocul imaginii cu linia curenta
LINKURI
Mai intai sa vedem ce este un link ( sau o legatura ) . Pentru a fi cat mai simplu : un link reprezinta
cuvintele subliniate in cadrul unei pagini si pe care poti da click pentru a naviga catre alte locatii .
Practic orice element al unei pagini web poate fi asociat unui link : un text , o imagine sau doar o
portiune de imagine .
<a href="http://www.yahoo.com">Yahoo</a>
Secventa anterioara reprezinta introducerea unui link catre pagina Yahoo .
<a> si </a> ~ ( = anchor ) tag-urile transmit browser-ului faptul ca urmeaza definirea unui link .
Adresa link-ului se incadreaza in href=” “ ; href vine de la Hypertext Reference si este un atribut al
tag-ului <A> . Dupa incheierea tag-ului <A> urmeaza textul sau imaginea care urmeaza sa faca
legatura catre linkul dorit .
In cazul in care dorim realizarea unei legaturi catre o alta pagina din acelasi director se va introduce in
cadrul atributului href doar numele paginii :
<a href="continut.htm">Continut</a>
Un alt tip comun de legatura este linkul in cadrul aceleiasi pagini . Pentru a crea un astfel de link
trebuie realizati doi pasi .
In primul rand trebuie sa identificam sectiunea paginii unde vrem sa putem sari si apoi sa realizam
linkul .
Pentru primul pas – definirea zonei la care dorim sa se faca legatura avem doua posibilitati :
<a name=”definitie_zona”> Text </a>
sau
 Text
Prima posibilitate este si cea mai corecta realizand o ancora legata de textul respectiv ; a doua
posibilitate este de reprezinta de fapt definirea unui paragraf , cu ajutorul unui atribut al tag-ului .
Saltul propriu-zis la aceasta zona definita se face prin intermediul urmatoarei linii de cod :
<a href="#definitie_zona">Acest link va duce inapoi la zona definita</a>
Saltul se poate face si combinat – la o anumita zona definita in alta pagina , ca in exemplul urmator :
<a href="pagina2.html#definitie_zona">Acest link va duce inapoi la zona definita in pagina 2</a>
O alta intrebuintare foarte des intalnita a tag-ului <a> tine de inserarea in pagina web a unei adrese de
contact , mai exact o adresa de mail . Urmatoarea linie de cod realizeaza exact acest lucru , cuvantul
cheie mailto specificand browser-ului ca urmeaza o adresa de mail iar acesta va lansa clientul de mail
al vizitatorului paginii cu adresa adresa@yahoo.com gata introdusa in cadrul mesajului :
<a href="mailto:adresa@yahoo.com">Send E-Mail</a>

Un atribut folositor al tag-ului este si SUBJECT , mail-ul trimis de vizitator primind astfel un subiect
gata definit de dumneavoastra :
<a href="mailto:adresa@yahoo.com?subject=testare">Send E-Mail</a>
Tot in problema linkurilor mai trebuie sa amintim si posibilitatea de a defini o adresa de baza pentru
linkurile din pagina noastra . In mod normal pentru un link catre o pagina din acelasi director se
foloseste doar numele paginii . Sa presupunem ca toate linkurile din pagina noastra sunt catre pagini
aflate intr-un acelasi director DIRECTOR_SURSE ; in acest caz putem reduce textul presupus de
introducerea acestei cai in fiecare atribut HREF in modul urmator :
<HEAD>
<BASE HREF=http://www.site.com/director_surse>
</HEAD>
Dupa utilizarea acestui cod sursa putem utiliza in cadrul atributului HREF doar numele fisierului
respectiv .
LISTE
Listele sunt un element foarte des intalnit in cadrul paginilor web datorita in principal impactului
vizual mai ridicat decat al textului simplu .
In general putem discuta despre doua tipuri de liste : neordonate si ordonate . Listele neordonate
prezinta elementele listei unul sub altul , cu un asa numitele bullet-uri la stanga elementului . Listele
ordonate inlocuiesc aceste bullet-uri cu numerale sau litere in ordine crescatoare .
LISTE NEORDONATE :
<ul><li>Element 1 <li>Element 2 <li>Element 3 </ul>
Aceasta comanda va duce la crearea unei liste neordonate :
 Element 1
 Element 2
 Element 3
Tag-ul <UL> poate folosi atributul TYPE – cu valorile SQUARE , DISC si CIRCLE – pentru a
specifica formatul bullet-ului elementelor listei . Acelasi atribut TYPE poate fi utilizat si in cadrul tag-
ului <LI> pentru a specifica individual formatul bullet-ului pentru fiecare element al listei in parte .
LISTE ORDONATE
<ol><li>Element 1<li>Element 2<li>Element 3 </ol>
Aceasta comanda va produce urmatoarea lista ordonata :
1. Element 1
2. Element 2
3. Element 3
Tag-ul <OL> poseda doua atribute foarte folositoare : START si TYPE .

Atributul START determina valoarea numarului de ordine al primului element din lista . Atributul
TYPE poate avea patru valori :
- a ~ pentru ordonare cu ajutorul literelor mici

- A ~ pentru ordonare cu ajutorul majusculelor
- I ~ pentru ordonare cu ajutorul numeralelor romane majuscule
- I ~ pentru ordonare cu ajutorul numeralelor romane minuscule
- 1 ~ pentru ordonarea numerica ( default )
Tag-ul <LI> - care introduce un element al listei poseda si el un atribut extrem de folositor : VALUE ;
cu ajutorul sau putem specifica o anumita valoare pentru numarul de ordine al acelui element
( elementele urmatoare vor fi numarate incepand cu aceasta noua valoare ) :
<OL>
<LI> linia 1
<LI value=”7”> linia 2
<LI> linia 3
</OL>
Va produce urmatorul efect :
1. linia 1
7. linia 2
8. linia 3
Tag-ul <LI> poate utiliza si el atributul TYPE pentru a formata individual numerotarea elementului
respectiv al listei .
Un alt tip de lista intalnit destul de des este si tipul lista de definitie .
<DL>
<DT>Termen de definit
<DD>Definitia termenului
</DL>
</BODY>
Tag-ul folosit este <DL> ( = definition list ) , <DT> este urmat de

termenul ce urmeaza a fi definit iar <DD> specifica definitia
propriu-zisa a termenului .
OBS : In limbajul HTML este permisa folosirea comentariilor ; acestea incep cu

 . Orice tag inserat intre marcajele de comentariu este ignorat de browser .

Curs 1 Web

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curs 1 Web

Încărcat de

Drepturi de autor:

Formate disponibile

Curs – Programare WEB

<Tag1><Tag2></Tag1></Tag2> - tag-uri incrucisate care pot genera erori.

&copy -> browser-ul va afisa pe ecran semnul de copyright .

Ceva tare ciudat.

<sup> si </sup> ~ tag-urile transforma textul in superscript

<sub> si </sub> ~ tag-urile transforma textul in subscript

<p> <p> <p>

<p align="right">Acest text va fi aliniat la dreapta.</p>

Acest text va fi aliniat la dreapta

Secventa de mai sus va avea ca rezultat urmatoarea paginare :

In cazul in care s-ar folosi tag-ul <center> :

s-ar obtine urmatoarea paginare :

<center> si </center> ~ tag-urile centreza textul dintre ele la nivel de linie .

<center><b><i><u>I know how to use HTML tags!</u></i></b></center>

ceea ce va duce la trasarea unei linii orizontale de lungul intregii pagini .

<HR WIDTH=60% ALIGN=RIGHT>

Atributul SIZE determina grosimea liniei iar NOSHADE face linia sa

Acest cod sursa va rezulta dupa afisare in urmatoarea imagine :

\|/ (@ @) +----oOO----(_)-----------+ | LeeView | | for | | President | +-----------------oOO-----+ |__|__| ||

Simpla introducere a urmatorului cod sursa :

Va duce la afisarea urmatorului rezultat :

<IMG SRC="imagine.gif" WIDTH=82 HEIGHT=68>

are ca efect introducere imaginii imagine.gif in pagina noastra , cu dimensiunile specificate in

 “bottom” – aliniaza partea inferioara a imaginii pe linia curenta

Secventa anterioara reprezinta introducerea unui link catre pagina Yahoo .

<a name=”definitie_zona”> Text </a>

<p id=”definitie_zona”> Text

<a href="#definitie_zona">Acest link va duce inapoi la zona definita</a>

<a href="pagina2.html#definitie_zona">Acest link va duce inapoi la zona definita in pagina 2</a>

<a href="mailto:adresa@yahoo.com">Send E-Mail</a>

<a href="mailto:adresa@yahoo.com?subject=testare">Send E-Mail</a>

<ul><li>Element 1 <li>Element 2 <li>Element 3 </ul>

Aceasta comanda va duce la crearea unei liste neordonate :

<ol><li>Element 1<li>Element 2<li>Element 3 </ol>

Aceasta comanda va produce urmatoarea lista ordonata :

Tag-ul <OL> poseda doua atribute foarte folositoare : START si TYPE .

- a ~ pentru ordonare cu ajutorul literelor mici

Va produce urmatorul efect :

Tag-ul folosit este <DL> ( = definition list ) , <DT> este urmat de

OBS : In limbajul HTML este permisa folosirea comentariilor ; acestea incep cu

S-ar putea să vă placă și

\|/ (@ @) +----oOO----(_)-----------+ | LeeView | | for | | President | +-----------------oOO-----+ ||| ||