Sunteți pe pagina 1din 14

Curs Programare WEB Curs 1 Elemente de baza Pentru inceput sa descoperim originea abrevierii HTML - Hypertext Markup Language

ge . 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> 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 <FONT> , in cadrul sectiunii <BODY> : <Body bgcolor="blue" text="black" link="yellow" vlink="red" alink="green"> <Font face="arial"> </Font> </Body> Observati ca si tag-ul <FONT> necesita un tag de inchidere . Acest tag ne permite sa stabilim tipul de font , dimensiunea sa si culoarea , ca in exemplul urmator : <Font face="Comic Sans MS" size="4" color="green"> 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 : <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 .

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 <FONT> . 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 <FONT> . Toate aceste tag-uri necesita si complementarul de inchidere ( ex. </h1> ) . In cazul in care nu se apeleaza la tag-ul <FONT> 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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tare&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ciudat. </body> Rezultatul acestei comenzi va fi : Ceva tare ciudat.

Alte caractere speciale des utilizate ar include : &nbsp; ( spatiu )

&lt; ( < ) &gt; ( > ) &amp; ( & ) &quot; ( " )

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 : <b> si </b> ~ tag-urile transforma textul din cadrul sau in text bold ( ingrosat ) . In locul acestei perechi de tag-uri se poate folosi si perechea <strong> si </strong> <i> si </i> ~ tag-urile transforma textul din cadrul sau in text italic ( cursiv ) . In locul acestei perechi de tag-uri se poate folosi si perechea <em> si </em> <u> si </u> ~ tag-urile transforma textul din cadrul sau in text subliniat ( underlined ) <sup> si </sup> ~ tag-urile transforma textul in superscript <sub> si </sub> ~ 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> <p> ~ 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 : <p> <p> <p> 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 </p> In cadrul tag-ului <p> se pot folosi atribute pentru alinierea textului la stanga ( pozitionarea default ) , la dreapta sau central . De exemplu : <p align="right">Acest text va fi aliniat la dreapta.</p>

va produce : Acest text va fi aliniat la dreapta <br> ~ 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 <br> : <BODY BGCOLOR="#FFFFFF"> Ceva tare<BR> &nbsp;<BR> &nbsp;<BR> &nbsp;<BR> &nbsp;<BR> &nbsp;<BR> 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 : <BODY BGCOLOR="#FFFFFF"> <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> 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 . </center> s-ar obtine 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 . <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><b><i><u>I know how to use HTML tags!</u></i></b></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 . <BODY BGCOLOR="#FFFFFF"> <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 : <BODY BGCOLOR="#FFFFFF"> \|/ (@ @) +----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 : <BODY BGCOLOR="#FFFFFF"> <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 <P> . <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 <p id=definitie_zona> 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 <p> . 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 bulletului 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 . <BODY BGCOLOR="#FFFFFF"> <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 .