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 – 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> sau chiar <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 de mai multe tag-uri :
<BODY BGCOLOR="#FFFFFF">
Ceva tare 
 
 
 
 
 
Ciudat.
</BODY>
Secventa de mai sus va duce la urmatorul rezultat in browser :
Ceva tare
Ciudat.
<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>
tagului BLOCKQUOTE si apoi su ajutorul tagului de centrare a textului in cadrul liniilor .
</center>
s-ar obtine urmatoarea paginare :
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.html">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 <!-- si se termina 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

</HEAD> ~ tag-ul de inchidere al tag-ului corespondent <HEAD>

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

Pentru a specifica culoarea de fond tag-ul nostru se prezinta astfel :

Comanda anterioara face ca fondul paginii noastre sa devina albastru .

<Body bgcolor="blue" text="black">

<Body bgcolor="blue" text="black" link="yellow">

<Body bgcolor="blue" text="black" link="yellow" vlink="red">

<Body bgcolor="blue" text="black" link="yellow" vlink="red" alink="green">

<Body background="imagine.gif" text="black" link="yellow" vlink="red" alink="green">

<Body bgcolor="blue" text="black" link="yellow" vlink="red" alink="green">

<Font face="Comic Sans MS" size="4" color="green">

<Font face="Comic Sans MS, Arial">

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 .

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

Rezultatul acestei comenzi va fi :

Ceva tare ciudat.

Alte caractere speciale des utilizate ar include :

<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 duce la urmatorul rezultat in browser :

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>

Acest cod sursa va rezulta dupa afisare in urmatoarea imagine :

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

Simpla introducere a urmatorului cod sursa :

Va duce la afisarea urmatorului rezultat :

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

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 :

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

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