Joaca Cu HTML

Matei Claudiu – 1111B
Joaca cu HTML
În acest capitol
Înţelegerea bazelor HTML
Folosirea tag-urilor pentru definirea textului
Folosirea atributelor tag-urilor
Crearea listelor
Crearea hyperlink-urilor
Folosirea graficii
Crearea unei interfeţe utilizator
WWW-ul (World Wide Web) adaugă o interfaţa grafică utilizator Internet-ului.

Poţi folosi Internet-ul fără a folosi WWW-ul (World Wide Web) dar nu poţi folosi
WWW-ul (World Wide Web) fără a folosi Internet-ul.
Iniţial, World Wide Web-ul consta numai în text, dar World Wide Web-ul de
asemenea permitea ceva numit hyperlink-uri (referinţe text ce indicau alte
documente depozitate pe World Wide Web). Deoarece textul vechi simplu arată
plictisitor, eventual lumea a adăugat imagini pentru a face World Wide Web-ul mai
uşor şi mai simpatic de utilizat.
Deoarece Internet-ul constă într-o varietate de calculatoare, programatorii
aveau nevoie să facă interfaţa grafică a World Wide Web-ului un standard ce putea
rula pe orice calculator. Fiecare calculator înţelege codul ASCII, aşa că programatorii
au creat un limbaj bazat pe ASCII pe care l-au proclamat HyperText Markup
Language sau HTML.
Pentru a crea un website, scrii coduri HTML şi le stochezi într-un fişier ASCII,
care de obicei se termină cu extensia .htm sau .html. Dacă un alt calculator vrea să
vizualizeze pagina Web, foloseşte un program special cunoscut şi sub numele de
browser ce traduce condul HTML într-o simpatică interfaţă grafică.
ÎNŢELEGEREA BAZELOR HTML-ului
Codul HTML defineşte modul în care textul şi grafica apar în browser. O

pagină Web de fapt constă în cod HTML pe care îl stochezi într-un fişier ASCII, de
obicei cu extensia HTM sau HTML. Codul HTML constă în ceva cunoscut ca tag-uri,
ce apar în paranteze. Cele mai multe (dar nu toate) tag-uri apar în perechi, unde
primul tag defineşte începutul la ceva şi al doilea defineşte sfârşitul la ceva, aşa ca
şi definirea textului italic sau a unui antet ca în următorul exemplu :
<I> This text appears in italics. </I>
Un fişier ASCII conţine nimic altceva decât caractere fără niciun fel de
formatare cum ar fi fonturi sau subliniare. Deoarece toate calculatoarele înţeleg
caractere (cum ar fi litere, cifre şi simboluri pe care le poţi scrie de la tastatură),
poţi transfera text de la un calculator la altul folosind fişiere ASCII.
Tag-urile de sfârşit întotdeauna folosesc un caracter slash : </I> sau
</BODY>.
Poţi include tag-uri în interiorul altor tag-uri, ca în următoarea linie :
<B> This <I> text </I> appears in bold. </B>
Cele două tag-uri precedente afişează întreaga linie îngroşată şi afişează

cuvântul „text” îngroşat şi italic, care arată după cum urmează :
This text appears in bold.
Tag-urile se comportă ca recipiente pentru text. Gândeşte-te la tag-uri ca
marcaje pentru începutul şi sfârşitul recipientului. Asigură-te că nu-ţi încurci tag-
urile sau vei avea parte de o formatare neaşteptată a textului ca în următoarul
exemplu :
<B> This <I> text appears </B> in bold. </I>
Dacă ai folosit amestecul de tag-uri de deasupra, textul tău va arăta cum
urmează :
This text appears in bold.
Ideal, vrei să amplasezi tag-urile complet în interiorul începutului şi sfârşitului

altor tag-uri, după cum este arătat în Figura 23-1.
Codurile HTML pot arată criptic dacă le înghesui împreună aşa că simte-te
liber să foloseşti destule linii goale şi spaţii pentru a face codul tău HTML cât de cât
lizibil. Adu-ţi aminte că atunci când un browser interpretează codul HTML într-o
pagină Web, ignoră linii goale şi spaţiile.
Poţi scrie cod HTML în orice editor de text ca Windows Notepad sau chiar
editorul Liberty BASIC. Doar adu-ţi aminte să-ţi salvezi fişierul cu extensia HTM sau
HTML. După ce ai creat un fişier folosind coduri HTML, poţi încărca acel fişier în
browser-ul tău prin selectarea File -> Open din meniul browser-ului.
ÎNŢELEGEREA CELOR MAI IMPORTANTE TAG-uri HTML
Următoarele sunt primele tag-uri HTML de care orice pagină Web are nevoie:
<HTML>
</HTML>
Aceste două tag-uri definesc pur şi simplu o pagină Web goală. Orice apare în
interiorul acestor două tag-uri apare şi pe pagina Web. Nimic nu trebuie să apară
înaintea tag-ului <HTML> sau după </HTML>. Dacă ceva apare în aceste locaţii în
editorul tău text, nu apare pe ecran dacă vizualizezi pagina într-un browser Web.
CREAREA UNUI ANTET ŞI A UNUI TITLU
După aceea, trebuie să defineşti tot ce vrei să apară la antetul (susul) paginii
tale Web prin folosirea tag-ului <HEAD> care arată după cum urmează :
<HTML>
<HEAD>
</HEAD>
</HTML>
Cel mai obişnuit obiect de plasat între tag-urile <HEAD> şi </HEAD> este un
titlu. Dacă cineva se decide să adauge ca preferinţă pagina ta Web, titlul este textul
pe care browser-ul îl stochează în lista ta de preferinţe a acelei persoane. Fără titlu,
lista de preferinţe a utilizatorului conţine numele real al fişierului, care de obieci
este criptic şi derutant. În cele din urmă, ce este mai uşor de citit într-o listă de
2
preferinţe – un nume propriu – zis de pagină Web ca Web Site Containing American
Nuclear Secrets sau un nume de fişier, ca NK1999.htm ?
Pentru a defini un titlu pentru pagina ta Web, bagi tag-urile titlu între tag-urile
pentru antet, după cum urmează:
<HTML>
<HEAD>
<TITLE> Document title </TITLE>
</HEAD>
</HTML>
O pagină Web necesită doar un titlu.
DEFINIREA MAJORITĂŢII PAGINII TALE WEB
După ce defineşti un antet şi un titlu pentru pagina ta Web ai nevoie să

defineşti restul paginii tale prin folosirea tag-urilor <BODY> şi </BODY>, după cum
urmează :
<HTML>
<HEAD>
<TITLE> Document title </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
ADĂUGAREA COMENTARIILOR
În Libertz BASIC şi în alte limbaje de programare, poţi insera comentarii ce

explică ce face programul tău, când ai modificat ultima dată programul şi cine a
modificat ultima dată programul. Pe măsură ce scrii codul HTML, poţi de asemenea
să adaugi comentarii la pagina ta Web.
Comentariile nu apar în browser; apar doar dacă te uiţi la codul HTML. Un
comentariu trebuie să apară între paranteze după cum urmează :


<!—marchează începutul tag-ului pentru comentarii şi --> marchează
sfârşitul tag-ului pentru comentarii.
DEFINIREA TEXTULUI CU TAG-uri
Tag-urile HTML de bază definesc pagina ta Web ca un întreg, dar trebuie să

adaugi text pentru a furniza ceva folositor pentru a fi citit de spectatori. HTML
furnizează tag-uri speciale pentru crearea următoarelor elemente :
Antetele separă secţiuni ale textului şi clasifică bucăţi de text sub o singură
temă (similar cu modul în care antetele ce constau în una sau mai multe propoziţii.
Paragrafele sunt bucăţi de text ce constau în una sau mai multe propoziţii.
Citatele sunt similare paragrafelor, dar tag-urile HTML pentru citate le
indentează şi le încercuieşte cu mai mult spaţiu decât paragrafele obişnuite.
3
Accentuarea textului afişează textul într-un anumit format sau stil pentru a
scoate în evidenţă textul.
Următoarele secţiuni descrie fiecare din aceste tag-uri diferite pentru text.
Crearea unui antet
HTML îţi permit să alegi între şase tipuri de antet. Heading 1 semnifică cel
mai important antet şi Heading 6 cel mai puţin importante antet. Figura 23-2 arată
un exemplu de fiecare tip de antet.
Pentru a crea unul din aceste şase antente, folosiţi unul din următoarele
seturi de tag-uri HTML :
<H1> Heading 1 </H1>

De obicei, vrei cel puţin două subantete sub fiecare antet. Vrei, de exemplu,
două sau trei Heading 2 sub un singur Headin 1. Sau vrei două sau trei Heading 6
sub un singur Heading 5.
Definirea unui paragraf
Un paragraf este o bucată de text pe care o separi de textul din jur cu o linie
goală (ca şi cu paragrafele pe care le vezi pe această pagină). Pentru a defini
începutul unui paragraf, foloseşte tag-ul <P> şi pentru a defini sfârşitul
paragrafului, foloseşte tag-ul </P> , după cum urmează :
<P>
This text you can consider a paragraph.
</P>
Dacă scrii text în interiorul unei perechi de tag-uri pentru paragraf, întregul
paragraf poate fi pe o singură linie, întinzându-se de la marginea din stânga a
ecranului dincolo de marginea din dreapta a ecranului. Tag-urile pentru paragraf au
grijă automat ca afişarea textului să fie între marginile ecranului.
Pentru a face paragraful tău mai uşor de citit, ai putea să apeşi ENTER pentru
a face ca liniile paragrafului să apară pe linii separate în loc să apară pe o singură
linie.
Dacă vrei sa inserezi +++ în mijlocul paragrafului, poţi folosi un tag special
pentru ++++ tag-ul <BR>. Spre deosebire de alte tag-uri, tag-ul ‚’’’’’’’’ apare
singur. Figura 23-3 arată cum tag-ul pentru paragraf <P> şi tag-ul ‚***** <BR> pot
crea o linie goală între paragrafe.
Accentuarea unui citat
4
Dacă vrei ca un paragraf să iasă în evidenţă, îl poţi defini ca citat în următorul

mod :
<BLOCKQUOTE>
This text appears indentet.
</BLOCKQUOTE>
Adăugarea accentuării la text
Tag-urile pentru paragrafe separă textul tău în paragrafe (inserând automatic

linii goale înainte şi după paragraf) şi tag-urile blockquote indentează textul. Dar s-
ar putea să vrei să accentuiezi anumite cuvinte sau fraze. Pentru a face aceasta,
poţi folosi unul din următoarele perechi de tag-uri HTML:
<B> şi </B> afişează textul îngroşat.
<I> şi </I> afişează textul înclinat.
<U> şi </U> afişează textul subliniat.
<TT> şi </TT> afişează textul ca şi când l-ai scris de la o maşină de scris.
<HR> afişează o linie orizontală. (Observa că tag-ul <HR> este un alt tag ce
nu apare în pereche).
Figura 23-4 arată o pagină Web ce foloseşte toate aceste moduri speciale de
a accentua textul într-un browser.
FOLOSIREA ATRIBUTELEOR TAG-urilor
Pentru a spori cu adevărat înfăţişarea textului tău, poţi folosi atribute. Un

atribut este o comandă specială ce o ascunzi în interiorul unui tag HTML. Un atribut
modifică înfăţişarea oricărui text definit de tag-uri. Următoarele sunt nişte atribute
comune :
 ALIGN aliniază paragraful sau antetul la dreapta, centru sau stânga.

 BGCOLOR schimbă culoarea fundalului paginii tale Web.
 TEXT schimbă culoarea textului.
 LINK schimbă culoarea hyperlink-urilor.
 VLINK schimbă culoarea hyperlink-urilor pe care utilizatorul le-a vizitat deja.
Alinierea textului
În mod normal aliniezi la stânga antetele şi paragrafele, dar de asemenea le

poţi alinia la dreapta sau la centru prin folosirea atributului ALING în interiorul
primului tag pentru antet sau paragraph, ca în exemplul următor :
<P ALING=”center”>
This text appears centered.
</P>
Pentru a alinia la centru textul, trebuie doar să foloseşti cuvântul „centre” cu

atributul ALIGN.
Pentru a alinia textul la dreapta sau stânga, foloseşte cuvântul „left” sau
„right” cu atributul ALIGN, după cum urmează :
<H1 ALIGN=”right”>
This text appears right-aligned.
5
</H1>
Joaca cu culorile
Pentru a defini culorile pentru fundal sau text, trebuie să setezi atributele
BGCOLOR şi TEXT la culoarea pe care vrei să o foloseşti. Ultimele versiuni ale
majorităţii browserelor îţi permit să defineşti culori prin folosirea numelor ca red,
blue sau yellow, ca mai jos :
<BODY BGCOLOR=”white”> (fundal alb)
<BODYT TEXT=”000000”> (text negru)
Pentru o mai mare flexibilitate, poţi folosi un număr de 6 cifre (hexadecimal)

ce reprezintă valoarea RGB (Red-Green-Blue). O valoare RGB defineşte cât de mult
roşu, verde sau albastru apare. Prin modificarea cantităţii de roşu, verde sau
albastru poţi crea o varietate de diferite culori ce mov, alb , portocaliu, galben
ş.a.m.d. Următorul cod este doar un exemplu :
<BODY BGCOLOR=”FFFFFF”> (fundal alb)

<BODY TEXT=”000000”> (text negru)
Defineşti culori RGB prin folosirea numerelor hexazecimal, care variază de la

0 la F (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F). Un zero (0) reprezintă absenţa unei culori, în
timp ce un F reprezintă cantitatea maximă de culoare. Poţi varia valori pentru roşu,
verde şi albastru pentru a creea alte culori.
Primele două cifrele ale atributelor BGCOLOR şi TEXT reprezintă cantitatea de
roşu (R), următoarele două cifre reprezintă cantitatea de verge (G) şi ultimele două
cifre reprezintă cantitatea de albastru (B) din culoare. Dacă vrei un fundal complet
roşu, foloseşte următoarea comandă :
<BODY BGCOLOR=”FF0000”>
Pentru un fundal complet verde, foloseşte următoarea comandă :
<BODY BGCOLOR=”00FF00”>
Şi pentru un fundal complet albastru, foloseşte următoarea comandă :
<BODY BGCOLOR=”0000FF”>
Colorarea hyperlink-urilor tale
De asemenea poate vrei să ajustezi culoarea pentru hyperlink-urile tale.

Majoritatea paginilor Web afişează hyperlink-urile în culori deschide pentru a le face
evidente. După ce , un utilizator, vizitează un hyperlink acel hyperlink poate să-şi
schimbe culorile pentru a-I arată utilizatorului că a vizitat deja acea pagină Web.
Pentru a schimba culorile hyperlink-urilor tale, foloseşte unul din următoarele tag-
uri:
<BODY LINK=”#hexadecimal_here”>
<BODY VLINK=”#hexadecimal_here”>
6
Dacă vrei să foloseşti ambele atribute, LINK şi VLINK, poţi face după cum
urmează :
<BODY LINK=”#hexadecimal_here” VLINK=”#hexadecimal_here”>
Atributul LINK foloseşte aceleaşi numere hexazecimale ca la text sau fundal

pentru a defini culoarea pentru hyperlink. Atributul VLINK defineşte în mod similar
culoarea pentru a afişa un hyperlink pe care utilizatorul l-a vizitat deja.
CREAREA UNEI LISTE
Să creezi o pagină Web pentru a informa lumea despre ceva e ca şi cum ai

creea o reclamă care atrage atenţia. În ambele cazuri, vrei să arăţi cât mai multă
informaţiei spectatorului, într-un mod atractiv şi digerabil. Multă lume găseşte
bucăţele mari de text intimidante şi greu de citit, aşa că considera să-ţi separi textul
in liste.
HTML asigură următoarele 3 tipuri de liste (folosesc o listă să vă arăt acele
liste) :
Liste neordonate afişează textul cu semen în faţa fiecărei linii, ca şi lista din
care face parte acest text.
Liste ordonate numerotează fiecare linie a textului.
Liste cu definiţii indentează fiecare linie a textului.
Liste neordonate
Pentru a crea o listă neordonată trebuie să foloseşti două tipuri de tag-uri

HTML. Primele tag-uri HTML sunt <UL> şi </UL> care definesc lista neordonată. Al
doilea tag, <LI> (care înseamnă obiect din listă), marchează fiecare obiect
însemnat. Urmează un exemplu :
<UL>
<LI> Take out the trash.
<LI> Develop a nuclear weapon.
<LI> Borrow an expenside appliance from the neighbor.
</UL>
Tag-ul <LI> nu necesită un tag de sfârşit. Poţi folosi <LI> de unul singur, dacă
doreşti sau poţi folosi </LI> ca un tag de sfârşit.
Poţi de asemenea crea o listă neordonată “cuibărită” după cum urmează: :
<UL>
<LI> Take out trash.
<LI> Develop a nuclear weapon.
<UL>
<LI> Steal secrets from United States.
<LI> Bomb our own embassy.
<LI> Export more MSG to our enemies.
7
</UL>
<LI> Borrow an expensive appliance from the neighbor.
</UL>
Figura 23-5 arată cum precedentul cod HTML creează o listă neordonată
“cuibărită”. A se observa că lista neordonată “cuibărită” foloseşte semen unice
pentru a o diferenţia de lista neordonată exterioară.
Liste ordonate
În timp ce listele neordonate afişează obiecte cu semen, o listă ordonată

afişează obiecte numerotate. Primul obiect din listă este numărul 1; al doilea este
numărul 2; ş.a.m.d.
Pentru a creea o listă ordonată, foloseşti tag-urile HTML <OL> şi </OL>
pentru a defini lista ordonată. Apo foloseşti tag-ul <LI> pentru a marca fiecare
obiect numerotat. În cele ce urmează este un exemplu :
<OL>
<LI> Turn left at the traffic light.
<LI> Drive five blocks.
<LI> Throw a rotten egg at the front door.
</OL>
Poţi de asemenea creea o listă „cuibărită” ordonată după cum urmează :
<OL>
<LI> Turn left at the traffic light.
<LI> Drive five blocks.
<OL>
<LI> Go past a burned down house.
<LI> Drive through the next three traffic lights.
<LI> Look for the house with toilet paper in the trees.
</OL>
<LI> Throw a rotten egg at the front door.
</OL>
Figura 23-6 arată o listă ordonată „cuibărită”. A se observa că lista ordonată

„cuibărită” foloseşte alta numerotare faţă de lista ordonată exterioară.
Poţi „cuibări” lista ordonată şi neordonată una în alta, în loc să „cuibăreşti”
două liste neordonate sau două liste ordonate. Aşa, poţi avea o listă cu semne în
interiorul unei liste numerotate sau viceversa.
Lista cu definiţii
Listele cu definiţii îşi i-au numele de la faptul că lumea, deseori le foloseşte în

glosare, unde o linie listează un termen şi următoarea linie listează definiţia acelui
termen. Pentru a creea o listă de definiţii trebuie să foloseşti următoarele tipuri de
tag-uri HTML :
Tag-urile <DL> şi </DL> definesc începutul şi sfârşitul unei liste de definiţii.
Tag-ul <DT> afişează o linie de text, ca un cuvânt sau termen.
8
Tag-ul <DD> afişează definiţia cuvântului sau termenului pe care tag-ul

<DT> l-a definit precedent.
Pentru a vedea cum se creează o listă de definiţii uită-te la codul următor şi

apoi aruncă o privire la Figura 23-7 care arată cum, următorul cod HTML, arată într-
un browser :
<DL>
<DT> Cat
<DD> An animal that enslaves its owners.
<DT> Flashlight
<DD> A case for holding dead batteries.
<DT> A moron
<DD> A Boss or someone who doesnt’ know how to do anything but pretends
to be important.
</DL>
CREAREA DE HYPERLINK-uri
Orice pagina Web bună are nevoie de două lucruri : informaţie (de obicei
text) care furnizează nişte conţinut folositor şi hyperlink-uri care leagă pagina ta
Web de o pagină Web relaţionată. O pagina Web de obiecei oferă următoarele două
tipuri de hyperlink-uri :
Hyperlink-uri externe sunt legături spre alte pagini care de obicei se află pe
un alt calculator (şi de obicei este alta locaţie geografică).
Hyperlink-uri interne sunt legături spre alte pagini ale Website-ului tău sau
spre o altă parte a aceleiaşi pagini Web.
Pentru a crea un hyperlink trebuie să o pereche de tag-uri anchor , ca <A> şi
</A>. În interiorul primului tag anchor trebuie să specifici un hyperlink extern sau
intern. Între cele două tag-uri anchor trebuie să scrii textul sau grafica care se
comportă ca hyperlink-ul.
Crearea de hyperlink-uri externe
În definirea unui hyperlink extern, atribul HREF (care vine de la Hypertest

REFerence) defineşte următoarele două obiecte :
Adresa hyperlink-ului extern care apare într-o formă similară următorului

exemplu:
http://www.someadress.com.
Textul sau grafica care se comportă ca hyperlink-ul care este ceea pe care
utilizatorul dă click pentru a sări la hyperlink-ul extern.
Pentru a folosi atributul HREF, trebuie să pui in interiorul primului tag anchor,
după se arată în următorul exemplu:
<A HREF=”http://www.dummies.com”>Dummies Web page</A>
9
În acest exemplu cuvintele Dummies Web page este textul pe care

vizualizatorul îl vede ca hyperlink. Dând click pe hyperlink, îl duce pe utilizator la
Website-ul www.dummies.com.
Hyperlink-urile externe sunt complet scăpate de controlul tău aşa că dacă un
Website spre care duce link-ul tău este offline, hyperlink-ul paginii tale Web duce
vizualizatorul spre un punct mort.
Crearea de hyperlink-uri interne
Pentru a face un hyperlink spre o altă pagină Web de pe propriul tău site,
foloseşte atributul HREF - dar în loc de listarea unei alte adrese de Website, doar
scrie numele fişierului al paginii Web spre care vrei să faci legătura, ca în exemplul
următor:
<A HREF=”index.html”>Index</A>
Aceasta creează un hyperlink al cuvântului Index. După ce utilizatorii dau

click pe acest hyperlink, browser-erele lor afişează pagina Web pe care o stochezi în
fişierul index.html.
Legarea de un anumit loc de pe o pagină Web
O problemă cu legarea de altă pagină Web este că utilizatorul s-ar putea să

aibă nevoie să parcurgă pagina pentru a găsi informaţie specifică. Pentru a evita
această problemă poţi creea un hyperlink pentru un loc anume de pe pagina Web
ca mijlocul sau capătul paginii Web. Aşa hyperlink-ul direcţionează vizualizatorul
exact spre informaţia pe care vrei să o afişezi.
Crearea unui hyperlink care se leagă de un punct anume de pe pagina Web
este un proces de din doi paşi, după următorii paşi descrie :
1. Creează un anchor în locul de pe pagina Web pe care ca hyperlink-ul să-l
afişeze.
Dacă vrei ca un hyperlink să direcţioneze un vizualizator spre capătul unei
pagini Web, spre exemplu, poziţionezi un anchor la capătul acelei pagini.
2. Creează un hyperlink care direcţionează un vizualizator spre un anchor pe
care îl defineşti.
Pentru a crea un anchor trebuie să foloseşti atributul NAME, după cum

urmează :
<A NAME=”TOC”>Table of Contents</A>
Acest exemplu afişează textul Table of Contents pe pagina Web şi îi atribuie

numele „TOC”. După ce creezi un anchor, următorul pas este să creezi un hyperlink
care indică spre acel anchor specific.
Anchorele sunt case-sensitive ceea ce înseamnă ca un anchor pe care l-ai
denumit TOC este complet diferit de un anchor pe care îl denumeşti toc. Dacă uiţi
această diferenţă anchor-ul tău nu va funcţiona deloc.
Pentru a face un hyperlink să indice spre un anchor predefinit foloseşte
atributul HREF şi include numele paginii Web şi numele anchor-ului separat de
numele fişierului paginii Web cu caracterul # după cum urmează :
10
<A HREF=”index.html#TOC”>Go to Page One</A>
Codul precedent afişează hyperlink-ul Go to Page One pe ecran. După ce

utilizatorul dă click pe acest hyperlink, browser-ul sare la pagina index.html şi
afişează anchor-ul definit definit de numele „TOC”. În acest caz browserul afişează
conţinutul în susul paginii indiferent dacă cuvintele Table of Contents apar în
mijlocul sau în josul paginii Web.
Afişarea de grafică
Doar afişarea de text pe o pagină Web poate fi destul de plictisitor aşa că

HTML îţi permite să afişezi imagini pe pagina ta Web pentru a face totul să arate
mai drăguţ. Grafica poate apărea ca o parte a paginii sau în fundal.
Singurele fişiere imagine pe care le poţi folosi pentru pagini Web sunt
fişierele GIF (Graphical Interchange Format) şi JPG (pronunţate şi JPEG, care vine de
la Joint Photographic Experts Group) deoarece acestea sunt cele două formate de
fişiere imagine ce pot fi afişate de orice calculator.
Adăugarea unei imagini de fundal
În plus pe lângă adăugarea de culori la o pagină Web s-ar putea de

asemenea să vrei să afişezi o poză pe fundal. Pentru a adăuga o poză la o pagină
Web, foloseşte atributul BACKGROUND în interiorul tag-ului BODY, ca în următorul
exemplu :
<BODY BACKGROUND=”filename.GIF”>
CREAREA UNEI INTERFEŢE UTILIZATOR PE O FORMĂ
Deşi poţi folosi HTML pentru a afişa text pe ecran, s-ar putea să vrei să creezi
ceva mai flexibil – ce este cunoscut ca formă. O formă îţi permite să afişezi căsuţe
de text, butoane de comandă şi căsuţe de bifat pe ecran. Pentru a defini o formă
foloseşti tag-urie <FORM> şi </FORM> pe care le presezi între tag-urile <BODY> şi
</BODY> după cum urmează :
<HTML>
<BODY>
<FORM>
</FORM>
</BODY>
</HTML>
Asigurăte că presezi tag-urile <FORM> şi </FORM> interiorul tag-urilor

<BODY> şi </BODY>; altfel forma ta nu apare pe ecran.
Desigur, tag-urile <FORM> şi </FORM> pur şi simplu definesc o formă, aşa
că tot trebuie să adaugi obiectele interfeţei utilizator la formă, după cum se arată în
Figura 23-9. Următoarele sunt câteva obiecte de interfaţa utliziator comun pe care
poate ai vrea să le adaugi într-o formă :
11
 Căsuţe de text sunt căsuţe în care utilizatorii pot scrie informaţie.

 Butoane sunt butoane de comandă pe care utilizatorii pot da click.
 Căsuţe de bifat sunt căsuţe pe care utilizatorii le pot bifa sau debifa
pentru a selecta sau deselecta o opţiune
 Butoane radio sunt butoane pe care utilizatorii le pot bifa sau debifa
pentru a selecta o opţiune. Poţi selecta doar un buton radio deodată.
MANIPULAREA EVENIMENTELOR
Fiecare element al interfeţei utilizator poate răspunde utilizatorului. De

fiecare dată când utilizatorul face ceva unui element al interfeţei utilizator, ca click-
ul pe un buton de comandă, această acţiune este cunoscută ca un eveniment.
După ce un event are loc asupra unui element specific al interfeţei utilizator,
ca un buton de comandă forma ta poate răspundă prin afişarea unui text,
dechiderea unei ferestre, ş.a.m.d. Următoarle sunt codurile HTML pentru câteva
evenimente comune:
 onAbort se întâmplă după ce un utilizator opreşte încărcarea unei imagini, fie
dând click pe un link, fie dând click pe butonul Stop.
 onBlur se întâmplă după ce un obiect, ca o cutie de text sau un buton de
comandă, pierde focalizarea. Acest eveniment se petrece de obicei după ce
utilizatorul da click pe alt obiect.
 onChange se intâmplă după ce conţinutul unui obiect, ca cutia de text, se
schimbă
 onClick se întâmplă dupa ce utilizatorul dă click pe un obiect anume, ca un
buton radio sau buton de comandă
 onFocus se întâmplă după ce utilizatorul dă click pe un obiect sau pune în
evidenţă un obiect folosind tasta Tab.
 onMouseOut se întâmplă după ce pointerul mouse-ului nu mai apare
deasupra unui obiect anume.
 onMouseOver se întâmplă când pointerul mouse-ului se mişcă deasupra unui
obiect anume.
 onSelect se întâmplă după ce utilizatorul selectează text într-o căsuţe text.
Evenimentele sunt legate la un obiect al interfeţei utilizator specific, ca un buton

de comandă sau căsuţă de bifat. Un singur obiect la interfeţei utilizator poate
răspunde la mai multe tipuri de eveniment.
Crearea unei căsuţe text
O căsuţa text poate afişa text şi permite utilizatorului să scrie text. Pentru a
crea o căsuţa text, scrie următoarea comandă în interiorul tag-urilor <FORM> şi
</FORM>:
<FORM>
<INPUT
TYPE=text
NAME=”textboxName”
VALUE=”Text inside the text box”
SIZE=integer
12
[onBlur=”command”]
[onChange=”command”]
[onFocus=”command”]
[onSelect=”command”]
</FORM>
Comanda TYPE=text spune calculatorului să creeze o casuţă text pe ecran.

Comanda NAME desemnează un nume la alegere pentru a reprezenta căsuţa ta
text. Comanda VALUE afişează text în căsuţa ta text. Comanda SIZE defineşte câte
caracatere poate afişa căsuţa ta text fără a fi parcurs.
O căsuţa text poate răspunde la 4 tipuri de evenimente: onBlur, onChange,
onFocus şi onSelect. Următoarele arată cum să creezi o căsuţă text care afişează
mesajul „Ow! You click too hard!” după ce dai click în interiorul căsuţei text:
<HTML>
<BODY>
<FORM>
<INPUT
TYPE=text
NAME=”textboxName”
VALUE=”This appears inside the text box”
SIZE=30
onFocus=”textboxName.value=’Ow! You click too hard!’ “>
</FORM>
</BODY>
</HTML>
A se observa folosirea ghilimelelor simple şi duble după evenimentul

onFocus. Ghilimelele duble îngrădesc comanda pe care vrei să fie urmată de
calculator dupa evenimentul onFocus. Orice comandă în interiorul ghilimelelor duble
trebuie să folosească ghilimele simple sau comanda întreagă nu va funcţiona.
Crearea unui buton de comandă
Un buton comandă afişează un buton pe care utilizatorul poate da click

pentru a performa o anumită acţiune. Pentru a crea un buton de comandă foloseşte
următorul cod în interiorul tag-urilor <FORM> şi </FORM>:
<FORM>
<INPUT
TYPE=button
NAME=”buttonName”
VALUE=”Text that appears on the button”
[onBlur=”handlerText”]
[onClick=”handlerText”]
[onFocus=”handlerText”]>
</FORM>
13
Comanda TYPE=button creează un buton de comandă pe ecran. Comanda

NAME desemnează un nume butonului de comandă. Comanda VALUE afişează un
text ce apare în interiorul butonului de comandă, ca OK sau Click Me.
Butoanele de comandă pot răspunde la trei evenimente diferite: onBlur,
onClick şi onFocus. Următorul exemplu arată cum să creezi două butoane de
comandă, unul care deschide o fereastră în care este afişată pagina Web stocată în
index.html şi unul care închide fereastra:
<HTML>
<BODY>
<FORM>
<INPUT
TYPE=button
NAME=”open”
VALUE=”Open window”
onClick=”mywindow=window.open(‘index.html’) “>
<INPUT
TYPE=butoon
NAME=”close”
VALUE=”Close window”
onClick=”mywindow.close()”>
</FORM>
</BODY>
</HTML>
Remarcăm că şi comanda definită de evenimentul onClick foloseşte ghilimele

pentru a cuprinde întreaga comandă. Tot ce apare în interior trebuie să folosească
apostroafe sau întreaga comanda nu va funcţiona.
Crearea unei căsuţe de bifare
Căsuţele de bifare afişează opţiuni pe care utilizatorul le poate alege prin

click în căsuţă de marcare pentru a bifa sau debifa un semn de bifare. Ca să creezi
o căsuţă de bifare, pune următoare coimandă în interiorul tag-urilor <FORM> şi
</FORM> :
<FORM>
<INPUT
TYPE = checkbox
NAME = “checkboxName”
VALUE = “checkboxValue”
[CHECKED]
[onBlur = “handlerText”]
[onClick = “handlerText”]
[onFocus = “handlerText”]
text to display
</FORM>
Comanda TYPE=checkbox creează o căsuţă de bifare pe ecran. Comanda

NAME desemează un nume să reprezinte căsuţa de bifare. Comanda VALUE
14
specifică un număr sau un character care reprezintă căsuţa de bifare dacă

utilizatorul alege. Comanda CHECKED afişează un semn de bifare ăn căsuţa de
bifare. Variabila text to display reprezintă orice text care vrei tu să se afişeze lângă
căsuţa de bifare.
O căsuţă de bifare poate răspunde la trei evenimente diferite: onBlur, onClick
şi onFocus. Următorul exemplu creează trei căsuţe de bifare :
<HTML>
<BODY>
<H2> Where do you want your computer to go today ?</H2>
<FORM>
<INPUT>
TYPE = checkbox
NAME = “check1”
VALUE = 99
onClick = “litterbox.value=”Throw the computer in the trash!”>
In the trash can
<BR>
<INPUT
TYPE = checkbox
NAME = “check2”
VALUE = 99
onClick=”litterbox.value=’Toss the computer outside.’”>
Out the Window
<BR>
<INPUT
TYPE = checkbox
NAME = “check3”
VALUE=99
onClick=”litterbox.value=’Wreck it, and the throw it away.’ “>
Smash it to pieces
<BR>
<INPUT
TYPE = text
NAME =”litterbox”
VALUE=” “
SIZE = 40>
</FORM>
</BODY>
</HTML>
După ce dai click pe un check box un mesaj apare într-o cutie text dedesubt,
după cum se vede in Figura 23-10.
Dacă scrii un text care să apara langa un check box nu e nevoie să-l pui
între ghilimele. Dacă îl pui între ghilimele, ghilimelele apar de asemenea pe ecran.
Creerea unui buton radio
15
Un buton radio funcţionează aproximativ ca un check box exceptând ca poţi

alege un singur buton radio oricând. Butoanele radio permit utilizatorilor să
răspundă la întrebări la care doar un răspuns este posibil ca în următorul exemplu:
What is your current marital status?
Pentru a răspunde la aceasta întrebare ai nevoie de butoane radio pentru fiecare

din următoarele răspunsuri:
 Single
 Married
 Divorced
Utilizatorul poate alege doar unul din răspunsuri. Dacă utilizatorul apasă pe
butonul radio Single, se răzgândeşte şi apoi apasă pe butonul radio Divorced apare
un punct in butonul radio Divorced pentru a arată că utilizatorul îl selectează si
butonul radio Single devine gol pentru a arăta ca nu-l mai selectează.
Pentru a vedea cum se creează un buton radio uită-te la următorul exemplu:
<FORM>
<INPUT
TYPE=radio
NAME=”radioName”
VALUE=”buttonValue”
[CHECKED]
[onBlur=”handlerText”]
[onClick=”handlerText”]
[onFocus=”handlerText”]
textToDisplay
</FORM>
Comanda TYPE=radio creează un buton radio pe ecran. Comanda NAME

desemnează un nume pentru a reprezenta acel buton radio.
Dacă vrei ca doar un buton să apară selectat dintr-un grup de butoane radio
trebuie să dai tuturor butoanelor radio exact acelaşi nume. Când butoanele radio au
acelaşi nume, calculatorul se asigură că doar un buton radio poate fi ales o dată.
Comanda VALUE specifică un număr sau un caracter pe care butonul radio îl
reprezintă dacă utilizatorul l-a ales. Comanda CHECKED afişează butonul radio ca
selectat după cum apare pe ecran. Variabila textToDisplay reprezintă orice text pe
care vrei să apară lângă butonul radio.
Un buton radio poate răspunde la trei evenimente diferite: onBlur, onClick şi
onFocus. După ce ai dat click pe un buton radio, un mesaj apare sub buton.
Următorul exemplu arată cum să creezi trei butoane radio:
<HTML>
<BODY>
<H2>Where do you want your computer to go today?</H2>
<FORM>
<INPUT
TYPE = radio
16
NAME=”group1”
VALUE=99
onClick=”litterbox.value=’Throw the computer in the trash.’ “>
In the trash can
<BR>
<INPUT
TYPE = radio
NAME=”group1”
VALUE=99
onClick=”litterbox.value=’Toss the computer outside.’ “>
Out the window
<BR>
<INPUT
TYPE = radio
NAME=”group1”
VALUE=99
onClick=”litterbox.value=’Wreck it, and then throw it away.’ “>
Smash it to pieces
<BR>
<INPUT
TYPE = text
NAME=”litterbox”
VALUE=” “
SIZE = 40>
</FORM>
</BODY>
</HTML>
A se observa că toate butoanele radio din exemplu precednt au acelaşi nume,

care este „group1”. Astfel calculatorul se asigură că doar un buton radio poate fi
selectat o dată.
Deciderea de a folosi caracteristici HTML adiţionale
Codurile HTML de bază descrise în secţiunile precedente ale acestui capitol

furnizează elementele fundamentale pe care ai nevoie să le cunoşti pentru a creea
şi edtia pagini Web simple. Dar versiunile noi de HTML oferă trăsături adiţionale
pentru creeare de tabele, afişarea de fonturi sau divizarea paginii Web în cadre.
Cadrele îţi permit să divizezi un ecran de browser Web în două sau mai multe
părţi unde fiecare parte (cadru) poate afişa o pagină Web diferită sau o parte
diferită a aceleiaşi pagini Web.
Deşi aceste caracteristici par folositoare şi distractive, ţine cont că nu
funţionează cu toate versiunile de browsere. Dacă vrei să te asiguri că toţi
utilizatorii pot vedea pagina ta Web, rămâi fidel tag-urile HTML de bază descrise în
acest capitol.
17

Joaca Cu HTML

Î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

Joaca Cu HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Matei Claudiu – 1111B

WWW-ul (World Wide Web) adaugă o interfaţa grafică utilizator Internet-ului.

ÎNŢELEGEREA BAZELOR HTML-ului

Codul HTML defineşte modul în care textul şi grafica apar în browser. O

Cele două tag-uri precedente afişează întreaga linie îngroşată şi afişează

Ideal, vrei să amplasezi tag-urile complet în interiorul începutului şi sfârşitului

ÎNŢELEGEREA CELOR MAI IMPORTANTE TAG-uri HTML

CREAREA UNUI ANTET ŞI A UNUI TITLU

O pagină Web necesită doar un titlu.

DEFINIREA MAJORITĂŢII PAGINII TALE WEB

După ce defineşti un antet şi un titlu pentru pagina ta Web ai nevoie să

În Libertz BASIC şi în alte limbaje de programare, poţi insera comentarii ce

DEFINIREA TEXTULUI CU TAG-uri

Tag-urile HTML de bază definesc pagina ta Web ca un întreg, dar trebuie să

Crearea unui antet

<H1> Heading 1 </H1>

Definirea unui paragraf

Accentuarea unui citat

Dacă vrei ca un paragraf să iasă în evidenţă, îl poţi defini ca citat în următorul

Adăugarea accentuării la text

Tag-urile pentru paragrafe separă textul tău în paragrafe (inserând automatic

Pentru a spori cu adevărat înfăţişarea textului tău, poţi folosi atribute. Un

 ALIGN aliniază paragraful sau antetul la dreapta, centru sau stânga.

În mod normal aliniezi la stânga antetele şi paragrafele, dar de asemenea le

Pentru a alinia la centru textul, trebuie doar să foloseşti cuvântul „centre” cu

Pentru o mai mare flexibilitate, poţi folosi un număr de 6 cifre (hexadecimal)

<BODY BGCOLOR=”FFFFFF”> (fundal alb)

Defineşti culori RGB prin folosirea numerelor hexazecimal, care variază de la

Pentru un fundal complet verde, foloseşte următoarea comandă :

Şi pentru un fundal complet albastru, foloseşte următoarea comandă :

Colorarea hyperlink-urilor tale

De asemenea poate vrei să ajustezi culoarea pentru hyperlink-urile tale.

<BODY LINK=”#hexadecimal_here” VLINK=”#hexadecimal_here”>

Atributul LINK foloseşte aceleaşi numere hexazecimale ca la text sau fundal

CREAREA UNEI LISTE

Să creezi o pagină Web pentru a informa lumea despre ceva e ca şi cum ai

Pentru a crea o listă neordonată trebuie să foloseşti două tipuri de tag-uri

În timp ce listele neordonate afişează obiecte cu semen, o listă ordonată

Poţi de asemenea creea o listă „cuibărită” ordonată după cum urmează :

Figura 23-6 arată o listă ordonată „cuibărită”. A se observa că lista ordonată

Listele cu definiţii îşi i-au numele de la faptul că lumea, deseori le foloseşte în

Tag-ul <DD> afişează definiţia cuvântului sau termenului pe care tag-ul

Pentru a vedea cum se creează o listă de definiţii uită-te la codul următor şi

Crearea de hyperlink-uri externe

În definirea unui hyperlink extern, atribul HREF (care vine de la Hypertest

Adresa hyperlink-ului extern care apare într-o formă similară următorului

<A HREF=”http://www.dummies.com”>Dummies Web page</A>

În acest exemplu cuvintele Dummies Web page este textul pe care

Crearea de hyperlink-uri interne

Aceasta creează un hyperlink al cuvântului Index. După ce utilizatorii dau

Legarea de un anumit loc de pe o pagină Web

O problemă cu legarea de altă pagină Web este că utilizatorul s-ar putea să

Pentru a crea un anchor trebuie să foloseşti atributul NAME, după cum

<A NAME=”TOC”>Table of Contents</A>

Acest exemplu afişează textul Table of Contents pe pagina Web şi îi atribuie

<A HREF=”index.html#TOC”>Go to Page One</A>

Codul precedent afişează hyperlink-ul Go to Page One pe ecran. După ce

Doar afişarea de text pe o pagină Web poate fi destul de plictisitor aşa că

Adăugarea unei imagini de fundal

În plus pe lângă adăugarea de culori la o pagină Web s-ar putea de

CREAREA UNEI INTERFEŢE UTILIZATOR PE O FORMĂ

Asigurăte că presezi tag-urile <FORM> şi </FORM> interiorul tag-urilor