CAP. 2.
CREAREA ŞI EDITAREA UNEI PAGINI WEB
2.1. Alegerea programului de editare
Există o multitudine de programe pe
care le puteţi folosi la crearea paginilor web.
Editoarele
de text sunt cele mai simple editoare care permit crearea şi salvarea
fişierelor fără coduri de formatare ascunse, care pot afecta
modul de afişare a unei pagini web în browsere.
Editoarele specializate HTML le permit
utilizatorilor să creeze documente web într-un mod rapid şi uşor
şi, prin urmare, foarte eficient, doar prin apăsarea câtorva butoane
sau prin apelarea câtora funcţii predefinite. În loc de a scrie de
mână codul sursă HTML, aceste programegenerează ele însele acest
cod în locul vostru. Acest tip de editoare reprezintă unelte excelente
pentru dezvoltatorii web cu experienţă. Chiar şi în acest caz
este necesar să înţelegeţi limbajul HTML pentru a putea edita
codul şi a înlătura eventualele neajunsuri din documentele web.
În prezent, chiar şi versiunile
Microsoft Word vă permit salvarea documentelor in format pagină web,
dar, dacă veţi analiza conţinutul codului sursă, veţi
avea surpriza să constataţi cât de mult a fost “înzorzonat”
faţă de varianta scrisă de mână.
Pentru exemplificarea practică a
noţiunilor teoretice prezentate în acest ghid, vă recomand să
instalaţi editorului Notepad++. Acesta este un editor gratuit de
cod-sursă care suporta mai multe limbaje de programare şi ruleaza sub
Windows. Oferă facilităţi precum Syntax Highlighting, stiluri
personalizate, editare simultană a mai multor fişiere, multiview si
bookmarks. Acest produs, bazat pe componentele de editare Scintilla (un
component de editare foarte puternic) este sub licenţă GPL (General
Public License). Programul poate fi gasit la adresa http://notepad-plus.sourceforge.net.
Pentru aceia care nu au conexiune Internet, am adăugat în secţiunea
UTIL pe CD şi acest program.
Datorită folosirii unor culori
diferite, acest program vă permite să efectuaţi o distingere
clară a elementelor, atributelor şi valorilor, contribuind în acest
fel la înţelegerea noţiunilor generale de programare.
Dar mai întâi va trebui să
selectaţi tipul de limbaj folosit, în cazul nostru HTML, din meniul Language.
Există o schemă de culori
implicită pentru afişarea codurilor dar poate fi definită
şi de utilizator din meniul Settings
ŕ Styler configurator....
Pentru
exemplificare, am ales culoarea albastră pentru tag-uri, culoarea
roşie pentru atribute, culoarea portocalie pentru valori şi culoarea
neagră pentru textul general.
În Notepad++ codurile unui
document HTML se vor vedea astfel:
2.2. Crearea unui document web
Aşa cum am menţionat şi
în capitolul precedent, există anumite elemente care sunt strict necesare
în structura unui document web. Prin urmare, întotdeauna când creaţi un
document web va trebui să începeţi prin scrierea acestor elemente
esenţiale, după care veţi adăuga celelalte tag-uri.
Prin
urmare, în Notepad++ veţi scrie următoarele:
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
În acest moment aveţi
secţiunile HEAD şi BODY cuprinse între tag-urile HTML. Mai
aveţi, de asemenea, şi elementul TITLE, în interiorul elementului
HEAD. Textul pe care il veţi scrie în interiorul tag-urilor TITLE va fi
afişat în browsere, pe rândul cel mai de sus, precum şi în motoarele
de căutare. În cazul în care nu scrieţi nimic, în browsere va fi
afişat numele documentului web (de exemplu: index.html).
Dacă un utilizator doreşte
să pună un semn de carte “Bookmark” la documentul respectiv, similar
cu adăugarea acestuia la “Favorites”, textul conţinut în TITLE va fi
cel adăugat în listă.
Iată un exemplu de titlu:
<TITLE> Ghid de programare HTML
</TITLE>
2.3. Stabilirea
proprietăţilor documentului
Întregul conţinut al documentului format
din text, imagini, culori, elemente grafice, va fi cuprins între tag-urile BODY.
Proprietăţile
documentului sunt controlate de atributele elementului BODY. Aceste atribute
sunt:
|
Atribut |
Valoare |
Descriere |
|
alink |
rgb(x,x,x) #xxxxxx colorname |
Precizează culoarea link-urilor active din
document. |
|
background |
nume fişier |
O imagine folosită ca fundal pentru
document |
|
bgcolor |
rgb(x,x,x) #xxxxxx colorname |
Precizează culoarea fundalului
documentului. |
|
link |
rgb(x,x,x) #xxxxxx colorname |
Precizează culoarea link-urilor din
document. |
|
text |
rgb(x,x,x) #xxxxxx colorname |
Precizează culoarea textului utilizat în
document. |
|
vlink |
rgb(x,x,x) #xxxxxx colorname |
Precizează culoarea link-urilor vizitate
din document. |
Culorile
sunt precizate folosind codurile RGB (red-green-blue) şi reprezentate prin
valorile hexazecimale. Fiecare secţiune formată din două cifre
reprezintă valoarea componenţei nuanţelor de roşu, verde
şi albastru ce intră în componenţa culorii respective.
Vă
prezentăm în continuare un tabel cu cele mai uzuale culori,
compoziţia RGB, precum şi codul hexazecimal aferent fiecărei
culori:
|
Denumire culoare |
Valoare RGB |
Cod hexazecimal |
|
Black (negru) |
0;0;0 |
000000 |
|
Blue (albastru) |
0;0;255 |
0000FF |
|
SaddleBrown (maron) |
139;69;19 |
8B4513 |
|
Grey (gri) |
84;84;84 |
545454 |
|
Green (verde) |
0;255;0 |
00FF00 |
|
Orange (portocaliu) |
255;165;0 |
FFA500 |
|
Red (roşu) |
255;0;0 |
FF0000 |
|
Purple (violet) |
128;0;128 |
800080 |
|
White (alb) |
255;255;255 |
FFFFFF |
|
Yellow (galben) |
255;255;0 |
FFFF00 |
Cei
mai mulţi designeri web îşi ale schemele de culori astfel încât
să se asorteze cu schema generală de culori a site-ului.
Modul
de formatare a acestor atribute este următorul:
<BODY BGCOLOR=“#000000” TEXT=“#FFFF00”
LINK=“#0000FF” VLINK=“#800080” ALINK=“#FF0000”>
Rezultatul
codurilor precedente va fi un document web cu fundal negru, textul de culoare
galbenă, link-urile de culoare albastră, link-urile active de culoare
roşie şi link-urile vizitate de culoare violetă.
Notă: Codurile hexazexcimale vor fi precedate întotdeauna de semnul
“#”
2.4. Utilizarea imaginilor ca fundal
Elementul
BODY permite, de asemenea, utilizarea unei imagini ca fundal. Această
imagine va fi afişată în mod repetat (tiled) pe fundal în browsere,
adică va fi multiplicată pe toată suprafaţa documentului
web. În vederea realizării unui aspect profesional, este recomandat ca
imaginile folosite ca fundal să poată fi alăturate
fără însă a li se observa îmbinările. Imaginile folosite ca
fundal trebuie să fie în format .gif sau .jpg.
Vă
recomandăm să aveţi în vedere faptul că întreg conţinutul
documentului va fi afişat deasupra imagii folosite ca fundal. Prin urmare,
imaginea va trebui să fie în culori pale, sau în contrast cu culoarea
textului afişat, astfel încât textul să poată fi citit cu
uşurinţă.
Sintaxa
folosirii acestui atribut într-un document web este următoarea:
<BODY BACKGROUND=“fundal.gif”>
Rezultatul
va fi afişarea ca fundal a imaginii din fişierul fundal.gif.
2.5. Aplicaţie practică
În
baza celor prezentate anterior, vom realiza un document web folosind editorul
Notepad++.
În
documentul nou creat (new1) vom scrie următoarele linii de limbaj HTML:
<HTML>
<HEAD>
<TITLE>Pagina cu fundal color</TITLE>
</HEAD>
<BODY BGCOLOR="#0000FF" TEXT="#FFFFFF">
<B>Pagina
cu fundal color</B>
</BODY>
</HTML>
Din
meniul File se alege opţiunea Save, se stabilieşte
calea unde va fi salvat fişierul (de exemplu C:\Ghid programare HTML\Teste) şi vom denumi fişierul test.html
Pentru
a vedea rezultatul exerciţiului în browserul cu care suntem
familiarizaţi (Internet Explorer, Netscape, Firefox, Opera etc.) vom
deschide fişierul respectiv (din meniul File se alege opţiunea
Open sau Open File, în
funcţie de browser).
Rezultatul
afişat va fi următorul:
Şi
acum vom crea un nou document (sau îl putem modifica pe cel creat anterior),
pentru a utiliza o imagine ca fundal.
<HTML>
<HEAD>
<TITLE>Pagina cu fundal imagine</TITLE>
</HEAD>
<BODY BACKGROUND="fundal.gif">
<B>Acesta este o pagina cu imagine pe fundal</B>
</BODY>
</HTML>
Dacă
nu aveţi un fişier de tip imagine (.gif sau .jpg) care se
pretează ca fundal de pagină, puteţi descărca fişierul
nostru fundal.gif dând click
aici.
Notă: Fiţi atenţi la calea
utilizată la descărcarea fişierului! Fişierul fundal.gif
trebuie salvat în acelaşi director ca şi fişierul test.html
Rezultatul
afişat va fi următorul:
Rezultatul
va fi identic şi dacă folosiţi imaginea existentă pe
site-ul nostru, în condiţiile în care îi specificaţi calea
exactă şi aveţi o conexiune internet permanentă, astfel:
BACKGROUND="fundal.gif"
va deveni
BACKGROUND="http://ghid-html.dap.ro/teste/fundal.gif"