1
NOTIUNI DE HTML
CAP I - Structura paginii
Paginile pe internet sunt, de regula, realizate intr-un limbaj numit
HTML - HyperText Mark-up Language. Editarea acestora se poate face in
orice program de editare texte, pornind chiar cu banalul Notepad din
Windows. Toate notiunile prezentate in acest ghid pot fi puse in
practica utilizand Notepad, astfel incat poti deschide Notepad acum.
Fisierul pe care il vom edita se va numi index.html. In general
fisierul principal al unui site internet (cel care se incarca atunci
cand tastam o adresa de genul www.abc.abc) este numit index.html.
Instructiunile pe care le folosim intr-o pagina HTML se numesc tag-uri
si acestea indica browser-ului (Netscape, Internet Explorer, etc) modul
de prezentare a informatiei din pagina. Tag-urile se scriu intre
semnele < si >. Tag-urile nu trebuie scrise respectand reguli
foarte stricte (nu e nevoie sa scrii numai cate un tag pe rand sau sa
foloseti numai litere mari, etc).Un exemplu de utilizare a tag-ului
FONT este:
<FONT FACE=ARIAL COLOR=#FF0000>ABC SRL - lider pe piata
serviciilor</FONT>
Instructiunea de mai sus va determina afisarea textului "ABC SRL -
Lider pe piata serviciilor" cu font arial si culoarea rosie. Dupa cum
se poate observa, exista un tag inaintea textului si unul care incheie
textul respectiv. Majoritatea tag-urilor functioneaza in acest mod: se
pun inaintea informatiei pe care dorim sa o prezentam intr-un anume mod
iar apoi la sfarsitul acesteia, ca in exemplul de mai sus.
Continutul oricarui fisier HTML trebuie inclus intre tag-urile
<HTML> si </HTML>. Aceasta inseamna ca tag-ul <HTML>
trebuie sa fie primul lucru care apare intr-un fisier HTML, iar tag-ul
</HTML> trebuie sa fie ultimul:
<HTML>
...aici se completeaza informatia de prezentat in
pagina...
</HTML>
Ca structura, o pagina HTML are doua parti: o parte delimitata de
tag-urile <HEAD> si </HEAD> ce contine informatii de
identificare a paginii si o parte delimitata de tag-urile <BODY>
si </BODY> ce contine informatiile de prezentat efectiv in
pagina. Asupra primei sectiuni nu vom insista prea mult. Cel mai
important tag utilizat in sectiunea HEAD este cel care da titlul
paginii. Acest titlu va fi incadrat de <TITLE> si </TITLE>.
Un exemplu de pagina HTML foarte simpla, avand titlul "ABC SRL" este:
<HTML>
<HEAD>
<TITLE>ABC
SRL</TITLE>
</HEAD>
<BODY>
...aici se completeaza
continutul paginii...
</BODY>
</HTML>
Tag-urile <HTML>...</HTML>, <HEAD>...</HEAD>,
<TITLE>...</TITLE> si <BODY>...</BODY> vor
aparea o singura data in cadrul unui fisier HTML, dupa cum arata
exemplul de mai sus. Apasa pe imaginea de mai jos pentru a vedea cum
arata fisierul ce contine instructiunile de mai sus (se deschide intr-o
fereastra separata pe care o poti inchide dupa consultare):
CAP II - Despre texte
Cel mai important element al unei pagini internet este, desigur,
textul. Intr-o forma simpla, acesta poate fi scris efectiv intr-o
pagina HTML, dupa cum am vazut in exemplul anterior: am scris in
fisierul HTML textul "...aici se completeaza informatia de prezentat in
pagina..." si acesta s-a incarcat in mod identic in browser.
Vom studia in continuare elemente de formatare a textului. Doua lucruri
trebuie mentionate in primul rand, legate de formatarea textelor:
utilizarea spatiilor si trecerea la un nou rand. Intr-un fisier HTML
afisarea mai multor spatii consecutive nu este posibila prin scrierea
directa in fisierul html ci folosind de mai multe ori sintagma
. Astfel, pentru a pune trei spatii intre cuvintele ABC si
SRL in textul "ABC SRL" va trebui sa scriem in
fisierul HTML astfel:
ABC SRL
Trecerea la un nou rand nu se face apasand Enter in fisierul HTML, ci
utilizand tag-ul <BR> (acest tag se utilizeaza singur; nu se
foloseste cu </BR>).Astfel, pentru a scrie "ABC" pe un rand, a
lasa un rand liber, si "SRL" pe un rand separat, vom folosi:
ABC<BR><BR>SRL
Am utilizat mai sus de doua ori tag-ul BR: o data pentru a trece la un
nou rand si o data pentru a lasa un rand liber. Tag-ul utilizat pentru
formatarea modului de afisare a textului este
<FONT>...</FONT>. Tag-ul FONT suporta mai multi parametri,
printre care:
- SIZE=x, unde x este dimensiunea fontului (1 fiind dimensiunea cea mai
mica);
- COLOR=#RRGGBB - culoarea cu care se va afisa fontul (vom reveni
asupra acesteia in capitolul urmator).Culoarea implicita este negru;
- FACE=font - fontul cu care va fi scris textul respectiv. Atentie!
Vizitatorii paginii tale trebuie sa aiba fontul respectiv instalat pe
calculator, deci utilizeaza numai fonturi "clasice". Fontul implicit
este Times New Roman
Acesti parametri poti fi utilizati separat sau simultan in cadrul
tag-ului FONT. Astfel, instructiunea de mai jos afiseaza text folosind
culoarea albastru:
<FONT COLOR=#0000AA>ABC SRL - Lider pe piata
serviciilor</FONT>
Instructiunea de mai jos afiseaza acelasi text cu font arial, culoare
albastra si dimensiune mai mare:
<FONT COLOR=#0000AA SIZE=4 FONT=ARIAL >ABC SRL - Lider pe piata
serviciilor</FONT>
Dupa cum se poate vedea, se pot utiliza mai multi parametri in cadrul
aceluiasi tag FONT. Acestia nu se despart prin virgula, ci printr-un
spatiu.De retinut ca parametrul FACE poate primi mai multe fonturi.
Astfel, un tag de tipul <FONT FACE=VERDANA,ARIAL>...</FONT>
va instrui browserul sa utilizeze fontul Verdana, iar daca acesta nu
este gasit, sa utilizeze Arial.
Mai exista trei tag-uri utile pentru formatarea textelor:
<B>...</B> - utilizat pentru scrierea textelor cu bold,
<I>...</I> - utilizat pentru scrierea textelor cu italics
(litere inclinate) si <U>...</U> - pentru a scrie text
subliniat.
Desigur, pot exista combinatii intre tag-ul FONT si tag-urile de
subliniare, ingrosare sau inclinare, ca de exemplu:
<FONT COLOR=#00AA00><B>Text verde
ingrosat</B></FONT>
Tine cont ca tag-urile trebuie inchise in aceeasi ordine in care au
fost deschise. Pentru exemple concrete de utilizare a tuturor
informatiilor de mai sus, apasa pe imaginea de mai jos (se deschide
intr-o fereastra separata pe care o poti inchide dupa consultare):
In fisierul index.html deschis in Notepad, sterge randul cu
"...aici se completeaza informatia de prezentat in pagina..." si
inlocuieste-l cu:
<BR>
<FONT SIZE=4 COLOR=#0000AA><B>ABC SRL - Lider pe piata
serviciilor</B></FONT>
<BR>
Acum, daca salvezi fisierul index.html si il reincarci in
Browser, ar trebui sa arate cam asa (apasa pe imaginea de mai jos - se
va deschide intr-o fereastra noua):
CAP III - Despre culori
Am vazut in capitolul anterior ca textele din paginile HTML pot avea
diverse culori cu un tag de tipul <FONT
COLOR=#00FF00>...</FONT>. Vom prezenta in continuare sistemul
de codificare a culorilor pentru paginile web.
Fiecare culoare este interpretata ca fiind compusa din diverse procente
ale culorilor rosu, verde si albastru. Acestea sunt exprimate prin
numere in baza 16. Astfel, numarul 00 reprezinta nivelul minim dintr-o
anumita culoare iar numarul FF reprezinta nivelul maxim. Acordand
ponderi exprimate prin aceste numere in baza 16 culorilor rosu, verde
si albastru (Red, Green, Blue - RGB) se poate obtine orice culoare:
<FONT COLOR=#FF0000> rosu
<FONT COLOR=#00FF00> verde
<FONT COLOR=#0000FF> albastru
<FONT COLOR=#FFFF00> galben
<FONT COLOR=#FF00FF> mov
<FONT COLOR=#00FFFF> bleu
<FONT COLOR=#000000> negru
<FONT COLOR=#FFFFFF> (alb)
Culorile de mai sus vor fi mai putin "aprinse" daca in loc de FF se
foloseste AA, spre exemplu: #00AA00.
Folosind acelasi sistem vom putea specifica culoarea de fundal
(background) a unei pagini web, in cadrul tag-ului BODY despre care am
vorbit la inceputul acestui ghid:
<BODY BGCOLOR=#DDFFFF>
Tag-ul BODY mai poate contine si alte informatii interesante, ca de
exemplu culoarea cu care vor fi afisate link-urile catre alte pagini
(utilizand atributul LINK) si link-urile catre alte pagini care au fost
vizitate deja (folosind atributul VLINK):
<BODY BGCOLOR=#DDFFFF LINK=#0000AA VLINK=#0000AA>
In fisierul index.html din Notepad, inlocuieste randul continand
tag-ul <BODY> cu cel de mai sus si salveaza fisierul (se
inlocuieste tag-ul BODY de la inceputul fisierului, nu cel de la
sfarsit care este </BODY>). Fundalul paginii tale ar trebui sa
devina bleu:
CAP IV - Despre tabele
Tabelele se utilizeaza folosind tag-ul <TABLE>...</TABLE>.
Imaginati-va un tabel simplu deschis in Word care cuprinde mai multe
casute. In fisierul HTML, casutele sunt organizate pe randuri (rows -
linii orizontale de casute). La randul lor, randurile sunt organizate
in elemente (casute):
1
Tabelul de mai sus contine 3 randuri, fiecare rand continand 5
elemente.In interiorul unui tag de tip TABLE, randurile sunt declarate
folosind tag-ul <TR>...</TR>, iar in cadrul fiecarui tag TR
elementele sunt declarate cu tag-ul <TD>...</TD>. Fiecare
element (casuta) poate contine text, imagini, link-uri, etc. Un tabel
de tipul celui de mai sus ar fi codificat astfel:
<TABLE>
<TR><TD>1</TD><TD></TD><TD></TD><TD></TD><TD></TD></TR>
<TR><TD></TD><TD></TD><TD></TD><TD></TD><TD></TD></TR>
<TR><TD></TD><TD></TD><TD></TD><TD></TD><TD></TD></TR>
</TABLE>
In exemplul de mai sus avem un tag <TABLE>...</TABLE> care
delimiteaza tabelul si trei tag-uri <TR>...</TR>
corespunzand celor trei randuri ale tabelului. Fiecare tag TR contine
cate 5 tag-uri <TD>...</TD>. Intre <TD> si
</TD> se introduce continutul efectiv al fiecarei casute. In
exemplul de mai sus numai casuta din stanga-sus are continut - cifra 1
(nu incercati exemplul de mai sus, intrucat casutele fara continut nu
sunt afisate).
Tag-urile de definire a tabelelor pot avea diverse atribute, pentru
formatarea tabelului. Astfel, tag-ul TABLE poate avea:
- WIDTH=x sau WIDTH=x% - acesta specifica lungimea intregului tabel in
pixeli (de exemplu WIDTH=500) sau in procente fata de lungimea intregii
ferestre (de exemplu WIDTH=50%);
- HEIGHT=x sau HEIGHT=x% - similar cu WIDTH, dar pentru inaltimea
intregului tabel (exemple: HEIGHT=300 sau HEIGHT=100%);
- BORDER=x - daca x este 1 atunci tabelul va avea si "cadru" (linii de
delimitare a elementelor. Daca x este 0, atunci acestea vor lipsi (deci
BORDER=0 sau BORDER=1);
- CELLSPACING=x - specifica spatiul dintre casute, in pixeli;
- CELLPADDING=x - specifica spatiul dintre marginea unei casute si
continutul acesteia, in pixeli.
Si in acest caz pot fi folosite toate aceste atribute impreuna, numai o
parte a lor, sau nici unul. Un tag TABLE ce le foloseste pe toate ar
arata astfel:
<TABLE WIDTH=80% HEIGHT=200 BORDER=1 CELLPADDING=0 CELLSPACING=5>
..........
</TABLE>
Si tag-ul TD poate avea tot felul de atribute interesante:
- WIDTH=x sau WIDTH=x% - lungimea casutei in pixeli sau ca procent din
lungimea intregului tabel;
- HEIGHT=x sau HEIGHT=x% - inaltimea casutei in pixeli sau ca procent
din inaltimea intregului tabel;
- BGCOLOR=#RRGGBB - culoarea fundalului casutei, ca de exemplu
BGCOLOR=#EEEEDD.
- ALIGN=RIGHT, ALIGN=LEFT sau ALIGN=CENTER - modul cum va fi pozitionat
continutul casutei in casuta: la dreapta, la stanga sau central;
- VALIGN=TOP, VALIGN=BOTTOM sau VALIGN=CENTER - similar, dar pentru
pozitionarea pe verticala: sus, jos sau central.
Tine cont de faptul ca textul din interiorul unei casute trebuie
formatat si el la randul sau. O casuta ce ar contine un text rosu pe
fond verde deschis s-ar codifica astfel:
<TD BGCOLOR=#DDFFDD><FONT
COLOR=#AA0000>text</FONT></TD>
Va prezentam si doua tabele atipice:
CELULA 1 CELULA 2 CELULA 3
CELULA 4
Un asemenea tabel s-ar codifica astfel:
<TABLE>
<TR><TD>CELULA
1</TD><TD>CELULA 2</TD><TD>CELULA
3</TD></TR>
<TR><TD COLSPAN=3>CELULA
4</TD></TR>
</TABLE>
Noteaza utilizarea atributului COLSPAN=3 in prima celula a celui de-al
doilea rand. Acesta spune ca celula respectiva se "intinde" pe lungimea
a trei celule din structura normala a tabelului.Desigur, acest al
doilea rand va contine numai o singura celula, nu trei. Similar se
poate proiecta un tabel cu o celula care se intinde pe verticala pe
spatiul a doua celule:
CELULA 1 CELULA 2 CELULA 3
CELULA 4 CELULA 5
Si codul este:
<TABLE>
<TR><TD>CELULA
1</TD><TD>CELULA 2</TD>
<TD ROWSPAN=2>CELULA 3</TD></TR>
<TR><TD>CELULA
4</TD><TD>CELULA 5</TD></TR>
</TABLE>
Se observa utilizarea atributului ROWSPAN=2 in a treia celula a
primului rand al tabelului. Acesta spune ca aceasta celula se intinde
pe verticala pe "inaltimea" a doua randuri. Desigur, cel de-al doilea
rand contine numai doua celule (nu trei), intrucat a treia vine din
randul de sus.
Tabelele pot reprezenta un instrument foarte puternic in cadrul unui
fisier HTML. O tehnica interesanta de pozitionare cat mai exacta a unor
informatii consta in utilizarea unor tabele in tabele (tag-uri TD care
au drept continut un tabel, de exemplu). In acest caz este foarte
importanta succesiunea corecta a tag-urilor TD, TR si TABLE pentru o
afisare corecta. O alta tehnica interesanta este utilizarea tabelelor
cu BORDER=0 (fara cadru) pentru gruparea unor date fara a da impresia
existentei unui tabel propriu-zis.
CAP V - Exemple de tabele
In continuare vom da doua exemple de tabele care pot fi incarcate si in
fisierul index.html desxhis in Notepad:
<TABLE WIDTH=700 BORDER=0 CELLPADDING=5 CELLSPACING=5>
<TR>
<TD WIDTH=30% BGCOLOR=#006666 ALIGN=LEFT>
<FONT FACE=VERDANA,ARIAL SIZE=2 COLOR=#FFFFFF>
<B> Adresa: </B></FONT></TD>
<TD BGCOLOR="#CCEEEE" ALIGN=LEFT>
<FONT FACE=VERDANA,ARIAL SIZE=2>
<I> Bulevardul Independentei nr. 0, Bloc 0, Ap 0, Sector 0,
Bucuresti </I></FONT></TD>
</TR>
<TR>
<TD WIDTH=30% BGCOLOR=#006666 ALIGN=LEFT>
<FONT FACE=VERDANA,ARIAL SIZE=2 COLOR=#FFFFFF>
<B> Activitate: </B></FONT></TD>
<TD BGCOLOR="#CCEEEE" ALIGN=LEFT>
<FONT FACE=VERDANA,ARIAL SIZE=2>
<I> ABC SRL va ofera o gama larga de produse si servicii necesare
dezvoltarii activitatii societatii Dumneavoastra. Ne recomandam prin
structura deosebita a ofertei noastre precum si prin politica de
preturi practicata. </I></FONT></TD>
</TR>
</TABLE>
1
Exemplul de mai sus nu contine decat notiuni explicate deja in
capitolele anterioare: este vorba de un tabel "clasic" cu lungime de
700 pixeli (WIDTH=700), fara cadru (BORDER=0) si cu spatiu de 5 pixeli
atat intre casute (CELLSPACING=5) cat si intre cadru si informatia din
casuta (CELLPADDING=5); tabelul are doua randuri (continute intre cele
doua perechi de tag-uri <TR>...</TR>); fiecare rand contine
cate doua casute:
- prima de lungime 30% din total (WIDTH=30%) cu culoarea fondului
bleumarin (BGCOLOR=#006666) si textul aliniat la stanga. Textul din
aceasta casuta este scris cu font Verdana de dimensiune 2 si culoare
alba (FONT FACE=VERDANA,ARIAL SIZE=2 COLOR=#FFFFFF) si este ingrosat
(B).
- a doua casuta cu fond bleu (BGCOLOR=#CCEEEE) si text aliniat de
asemenea la stanga (ALIGN=LEFT). Contine text cu acelasi font Verdana
de dimensiune 2, dar scris cu negru (implicit) si cu litere inclinate
(I).
Poti copia exemplul de mai sus in fisierul tau index.html deschis
in
Notepad (pozitioneaza-l intre ultimul tag <BR> si tag-ul
</BODY> de la sfarsitul fisierului). Incarcat intr-un browser,
index.html ar trebui sa arate astfel:
Iti mai prezentam inca un tabel, ceva mai simplu:
<TABLE WIDTH=700 BORDER=1 CELLPADDING=5>
<TR><TD BGCOLOR=#CCEEEE>
<FONT FACE=VERDANA,ARIAL SIZE=2>
<B> NOU </B>
Incepand cu luna februarie societatea noastra aplica reduceri la
produsele oferite de la 30% la 50%, in functie de cantitate. Va invitam
sa ne apelati la telefon <B>000.0000</B> pentru informatii
suplimentare. Va stam la dispozitie si prin <B>e-mail</B>
cu o oferta completa de preturi. Puteti vizita si pagina societatii
<B>XYZ</B> cu care colaboram indeaproape: apasati aici.
</TD></TR></TABLE>
Acest tabel are aceeasi lungime de 700 de pixeli (WIDTH=700), are si
cadru (BORDER=1) si un spatiu de la cadru la textul din casute de 5
pixeli (CELLPADDING=5). Tabelul contine un singur rand si o singra
casuta in acest rand. Casuta are fondul bleu (BGCOLOR=#CCEEEE).In
interiorul casutei este un text scris cu font Verdana de dimensiune 2.
Unele cuvinte din tabel sunt scrise cu bold (B).
Copiaza si acest exemplu in fisierul tau index.html deschis in
Notepad
(pozitioneaza-l intre tag-ul </TABLE> de jos si tag-ul
</BODY> de la sfarsitul fisierului). Incarcat intr-un browser,
index.html ar trebui sa arate cam asa acum:
CAP VI - Link-uri si pozitionare
Un element important al oricarei pagini web il constituie link-urile
catre alte pagini. Acestea pot fi link-uri externe, care fac referire
catre un alt site, sau link-uri interne care fac referire catre alte
pagini ale aceluiasi site. Ambele tipuri se codifica asemanator prin
folosirea unui tag de tipul <A HREF=link.html>...</A>
(pentru un link intern) sau
<A HREF=http://www.abc.abc>...</A> pentru un link extern.
Astfel codul de mai jos va afisa textul "Apasati aici pentru pagina 2"
care prin apasare va incarca fisierul pag2.html:
<A HREF=pag2.html>Apasati aici pentru pagina 2</A>
Codul de mai jos va afisa "Apasati aici pentru pagina XYZ SRL", text
care prin apasare va incarca pagina www.xyz.xyz:
<A HREF=http://www.xyz/xyz>Apasati aici pentru pagina XYZ
SRL</A>
In exemplul de mai sus poti specifica in ce mod se va incarca pagina
respectiva folosind atributul TARGET:
- TARGET="nume", unde nume este numele pe care vrei sa il dai unei noi
ferestre unde se va incarca pagina. Poti folosi si TARGET="_blank"
pentru o fereastra noua sau TARGET="_self" pentru incarcarea in aceeasi
fereastra.
O alta varianta este posiblitatea transmiterii unui e-mail. Astfel,
codul de mai jos afiseaza "Scrie-ne!", text care prin apasare va
deschide o fereastra pentru transmiterea unui mesaj la adresa
office@abc.abc:
<A HREF="mailto:office@abc.abc">Scrie-ne!</A>
In acelasi mod o pagina HTML poate fi impartita in mai multe "capitole"
(sectiuni), in caz ca este foarte lunga. Astfel, fiecarei sectiuni i se
va asigna un nume, nume ce va putea fi utilizat in incarcarea paginii
respecitve, astfel incat sa se afiseze exact sectiunea respectiva. Fie
fisierul lucrare.html pe care il impartim in doua sectiuni.Codul care
face acest lucru ar fi:
<A NAME=unu>Sectiunea 1</A>
...text pentru sectiunea 1...
<A NAME=doi>Sectiunea 2</A>
...text pentru sectiunea 2...
Apoi, daca dorim sa incarcam fisierul lucrare.html din alta pagina, dar
astfel incat sa se incarce direct sectiunea 2, vom utiliza:
<A HREF=lucrare.html#doi>Apasa aici</A>
Cel mai bine vom demonstra aceste lucruri printr-un exemplu (se
deschide intr-o pagina separata):
In mod similar poti afisa fisiere text (cu extensia txt) sau poti da
posibilitatea vizitatorului sa salveze pe disc un alt tip de fisier
(zip de exemplu):
<A HREF=raport.txt>Raport</A> sau <A
HREF=program.zip>Salveaza programul</A>
Un alt element util in formatarea paginii web este tag-ul <CENTER
>...</CENTER>. Acesta este utilizat pentru alinierea pe centru
a unor elemente (texte, tabele imagini). Tot ce este scris intre tag-ul
<CENTER> si </CENTER> va apare centrat.
In fisierul nostru deschis in Notepad vom folosi tag-ul CENTER
pentru
a pozitiona central elementele paginii. Astfel, vom introduce tag-ul
<CENTER> imediat dupa tag-ul BODY de la inceputul fisierului
(<BODY BGCOLOR="#DDFFFF" LINK="#0000AA" VLINK="#0000AA">) si vom
mai introduce si </CENTER> imediat inainte de tag-ul
</BODY> de la sfarsitul fisierului.
Mai facem o imbunatatire fisierului index.html deschis in Notepad, prin
introducerea unor link-uri. Identifica in cel de-al doilea tabel din
acest fisier textul "Va stam la dispozitie si prin
<B>e-mail</B>" si inlocuieste <B>e-mail</B> cu:
<B><A
HREF="mailto:info@abc.abc.ro">e-mail</A></B>
De asemenea identifica si textul "apasati aici" de la sfarsitul
tabelului si inlocuieste cuvantul "aici" cu:
<A HREF=http://www.xyz.xyz TARGET="_blank">aici</A>
Fisierul nostru deschis in Notepad ar trebui sa arate acum cam
asa:
Acum toate elementele tabelului (titlul si cele doua tabele) sunt
pozitionate pe centru si exista link-uri pentru e-mail si pagina XYZ.
CAP VII - Ultimele retusuri
Suntem foarte aproape de a da o forma finala fisierului nostru
index.html deschis in Notepad si care a servit ca exemplu pana acum.
Mai intai vom introduce si tag-ul <HR>. Acesta are un rol foarte
simplu si anume - de a trasa o linie orizontala pe toata latimea
ferestrei. Acest tag functioneaza la fel ca si BR (adica, nu se
foloseste </HR>). Tag-ul HR primeste si atributul WIDTH sub forma
WIDTH=x sau WIDTH=x% care specifica lungimea liniei in pixeli sau ca
procent din latimea totala a ferestrei. Exemplu:
<HR WIDTH=600>
In fisierul index.html deschis in Notepad introducem urmatoarele
instructiuni intre ultimul tag </TABLE> si tag-ul </CENTER>
de la sfarsitul fisierului:
<BR><BR><BR><BR><BR><BR><HR>
<FONT FACE=ARIAL SIZE=1>
Toate drepturile rezervate.
Pagina realizata in anul 2001</FONT>
Mai introducem si un tag <BR> intre cele doua tabele pentru
a le
distanta (deci intre tag-ul </TABLE> al primului tabel si tag-ul
<TABLE> al celui de-al doilea tabel). In acest moment fisierul
index.html este gata in aceasta varianta si ar trebui sa arate cam asa:
Vom folsi aceasta ocazie pentru a prezenta si modalitatea de includere
a unor comentarii intr-o pagina HTML. Acestea trebuie incluse intre
<!-- si --> ca in exemplul urmator:
<!-- acest text nu va fi afisat in pagina -->
Aici se incheie prima parte a ghidului. In continuare vom prezenta
cateva notiuni despre imagini, cadre (frames) precum si despre
graficCAP VIII - Despre imagini
Prezentarea imaginilor in pagini HTML se face folosind tag-ul <IMG
SRC=nume>, unde nume este numele unui fisier gif sau jpg. Exemplu:
<IMG SRC=sigla.gif>, va afisa (presupunand ca avem deja fisierul
sigla.gif):
Tag-ul IMG poate primi si atributul BORDER cu formele BORDER=0
(implicit) sau BORDER=n - pentru un chenar in jurul pozei de dimensiune
n pixeli. O poza intr-un chenar arata mai bine:
<IMG SRC=sigla.gif BORDER=1>, va afisa:
Se poate folosi o imagine si drept link catre o alta pagina:
<A HREF="mailto:info@abc.abc"><IMG SRC=sigla.gif
BORDER=0></A>, va afisa:
Cu un click pe imaginea de mai sus se va deschide o fereastra pentru
compunerea unui mesaj.Se mai pot folosi imagini si drept fundal pentru
pagini internet. Pentru aceasta, vom introduce atributul BACKGROUND in
cadrul tag-ului <BODY> de la inceputul unui fisier:
<BODY BACKGROUND=bkg.gif>
Efectul unei asemenea comenzi va fi (presupunand ca avem deja fisierul
bkg.gif):
a, design-ul si continutul unei pagini web.
CONTINUT EXTREN
Prezentarea modului de realizare a paginilor web s-a incheiat.Intentia
noastra nu a fost sa realizam o prezentare completa a acestui domeniu,
ci numai o trecere in revista a celor mai importante notiuni. Credem ca
informatile prezentate pana acum sunt suficiente ca punct de plecare.
Un lucru foarte interesant in cazul paginilor web este ca sursa
acestora poate fi vazuta in mod liber oricand. Astfel, daca navighezi
pe internet si descoperi o pagina interesanta, poti face click pe
fereastra respectiva cu butonul din dreapta al mouse-ului si selecta
View Source. Astfel, vei putea studia modul de realizare a paginii
respective si invata cate ceva.
Desigur, proiectarea si programarea paginilor web nu se rezuma la
limbajul HTML - acesta este doar punctul de plecare. In rest? Exista
multe tehnologii precum php, asp, flash, java, cgi, etc pentru
internet, tehnologii cu ajutorul carora se pot realiza tot felul de
programe si imbunatatiri pentru pagini web.
Probabil ai vazut pe alte site-uri asemenea programe - pentru evidenta
numarului de vizitatori pe site (countere), modalitati de comunicare cu
vizitatorii (guestbook, forum), etc - si ti-au facut cu ochiul. Din
pacate ghidul de proiectare web al verde.ro se rezuma la HTML, cel
putin la acest moment.
Dar exista alte modalitati de includere a unor asemenea programe pe
site-ul tau: folosirea unor servicii gratuite disponibile pe internet.
Spre exemplu, exista site-uri care iti ofera in mod gratuit si simplu
posibilitatea de a include un counter pe site-ul tau, pentru a afla
cati vizitatori intra pe site, de unde vin, pe ce pagini merg, etc. Noi
folosim counter-ul furnizat de sitemeter.com. Apasa aici pentru a iti
crea si tu un counter sau pentru informatii suplimentare (se deschide
intr-o fereastra separata). Care este procedura? te vei inregistra cu
site-ul tau pe sitemeter, vei completa o serie de formulare, iar apoi
vei copia un portiune de cod in pagina ta, conform indicatiilor date.
Acel cod va afisa un mic element grafic (deci, atentie unde il
pozitionezi pentru a se incadra in pagina) pe care, daca faci click,
intri in pagina cu informatii despre vizitatorii tai.
Precum acest serviciu, exista multe: servicii gratuite pentru un
guestbook ("agenda" unde vizitatorii iti pot scrie impresii), forum de
discutii, etc. Un serviciu interesant este cel oferit de humanclick.com
care te lasa sa iei legatura in mod direct cu vizitatorii tai, atunci
cand esti on-line. Ce trebuie sa faci pentru a identifica alte asemenea
servicii? Fii atent la paginile pe care le vizitezi: aceste servicii au
cate un link (care poate fi text sau o sigla) catre pagina proprie,
pagina de unde te poti inscrie si tu pentru un serviciu similar.
Exista si site-uri care iti ofera in mod gratuit posibilitatea de a
adauga continut pe site-ul tau: informatii despre timpul probabil,
stiri, date financiare, astrologie, etc. Asemenea servicii au aparut si
in Romana, trebuie doar cautate cu atentie. Incearca, insa, sa nu
abuzezi de aceste elemente furnizate de alte site-uri: in definitiv,
incerci sa faci singur un site. CAP IX - Despre cadre (frames)
Poti imparti fereastra in mai multe zone sau cadre (numite frames).
Acest lucru este foarte util in mai multe situatii. Spre exemplu, poti
imparti pagina pe verticala in doua zone: una mai mica unde poti avea
un meniu cu mai multe optiuni, si una mai mare unde se incarca
informatiile:
Exemplul de mai sus cuprinde mai multe fisiere html: ex11.html si
ex11b.html - fisierele care indica modul de impartire a ferestrei in
doua ecrane, fisierul ex11_idx.html - care reprezinta frame-ul din
stanga cu meniul si fisierele ex11_dat.html si ex11b_dat.html cu
frame-ul din dreapta continand informatia efectiva. Fisierul ex11.html
arata cam asa:
<HTML>
<FRAMESET COLS="120,*" FRAMEBORDER="NO"
BORDER="0" FRAMESPACING="0">
<FRAME NAME="index" SRC=ex11_idx.html>
<FRAME NAME="main page" SRC=ex11_dat.html>
</FRAMESET>
</HTML>
Acesta declara un set de doua frame-uri (FRAMESET) organizate pe
verticala, primul frame de 120 de pixeli latime si al doilea de restul
(COLS="120,*"), fara cadru (FRAMEBORDER="NO") si fara spatiu intre ele
(FRAMESPACING="0"). Frame-ul din stanga se va numi index si va afisa
fisierul x11_dat.html (cel cu meniul) iar cel din dreapta se va numi
main page si va afisa fisierul ex11_dat.html (cel cu informatiile
despre ABC SRL). Fisierul ex11b.html este identic cu cel de sus cu
exceptia faptului ca in frame-ul din dreapta afiseaza fisierul
ex11b_dat.html cu informatii despre XYZ SRL.
Fisierul ex11_idx.html ce contine meniul va arata cam asa:
<HTML><BODY BGCOLOR=#333333 LINK=#FFFFFF VLINK=#FFFFFF
TEXT=#FFFFFF>
<BR><FONT FACE=VERDANA,ARIAL
SIZE=2><B>
<A HREF=ex11.html TARGET="_top">ABC
SRL></A><BR><BR>
<A HREF=ex11b.html TARGET="_top">XYZ
SRL></A></B></FONT>
</BODY></HTML>
Acest fisier contine meniul din partea stanga cu doua link-uri ce
afiseaza paginile de prezentare ale ABC SRL (ex11.html) sau XYZ SRL
(ex11b.html).
Un exemplu de impartire a ferestrei in doua cadre pe orizontala arata
astfel:
Fisierul care organizeaza cele doua cadre se codifica astfel:
<HTML>
<FRAMESET ROWS="50%,*" FRAMEBORDER="NO"
BORDER="1" FRAMESPACING="0">
<FRAME NAME="index" SRC=ex11_dat.html>
<FRAME NAME="main page" SRC=ex11b_dat.html>
</FRAMESET>
</HTML>
Noteaza utilizarea atributului ROWS="50%,*CAP X - Grafica web
Dupa ce in capitolele precendente am invatat notiunile HTML de baza,
vom scrie cateva cuvinte si despre grafica web. Exista mai multe
posibilitati in aceasta directie, cea mai simpla fiind utilizarea unor
elemente grafice (poze, desene) din colectii de grafica specializate,
colectii ce se pot gasi fie pe internet, fie impreuna cu programe
precum Corel Draw, Photo Draw, etc. Desigur, exista si o posibilitate
mai simpla de atat - copierea unor elemente grafice din alte pagini
web. Acest lucru nu este recomandat insa, in primul rand datorita
faptului ca elementele grafice respective vor fi rupte din context. In
plus, pentru majoritatea exista drepturi de autor, astfel incat nu pot
fi utilizate fara permisiune, in mod normal.
Cel mai bun lucru de facut in aceasta directie este utilizarea unor
elemente grafice ca sursa de pornire si prelucrarea acestora intr-un
program specializat de tipul Adobe Photoshop. Acesta este un program
excelent pentru grafica web ce permite diverse prelucrari ale pozelor
si desenelor precum si crearea de la zero a unor elemente de grafica
pentru pagina ta. Vom prezenta o serie de operatiuni de baza ce se pot
aplica unei poze incarcate in Photoshop. Mai intai, mergi in Image/Mode
si selecteaza RGB Color, daca acest mod nu este deja selectat. Sa
incepem: modifcarea dimensiunilor unei poze prin marire/micsorare -
Image/Image Size, modificarea dimensiunilor prin taiere/completare -
Image/Canvas Size, rotire imagine - Image/Rotate Canvas. Photoshop
prezinta si o serie de unelte pentru completari/retusari ale imaginii
(pencil, eraser, blur, paint bucket, etc). De asemenea, vei dori sa
utilizezi si diversele filtre disponibile in meniul Filter - unele
dintre ele sunt foarte reusite (nu uita sa setezi modul RGB pentru
imagine inainte de folosirea filtrelor).
O operatiune destul de simpla in Photoshop este crearea de texte pentru
butoane, titluri, etc. Deschide un fisier nou (File/New) si selecteaza
unealta Text din toolbar (cea cu un "T"). Fa click oriunde in imaginea
ta - se va deschide o fereastra noua unde vei putea scrie textul dorit
si stabili parametrii acestuia (font, dimensiune, culoare, etc). Pentru
efecte aplicate textelor deschide fereastra Layers (Window/Show Layers,
daca aceasta nu exista deja pe ecran), fa click cu butonul din dreapta
pe Layer-ul (nivelul) care contine textul scris de tine, selecteaza
Effects si testeaza diversele efecte disponibile. La sfarsit,
selecteaza din Toolbar unealta din stanga sus (in forma de patrat cu
linii punctate), incadreaza textul scris de tine cu ajutorul acesteia
si mergi la Image/Crop pentru a dimensiunea in mod exact fisierul:
Dupa ce ai terminat cu prelucrarile, salveaza fisierul tau in formatul
gif (File/Export/Gif 89A Export) sau jpg (File/Save a Copy). Fisierele
gif au o calitate mai buna, dar dimensiuni mai mari; fisierele jpg sunt
mai mici ca dimensiune, dar de o calitate mai slaba (nu mereu, insa).
De regula, pe internet se folosesc fisiere jpg, dar noi recomandam
fisiere gif pentru elementele de dimensiuni reduse, pentru o calitate
mai buna.
Desigur, Photoshop prezinta mult mai multe facilitati si optiuni. Ca sa
nu mai vorbim de alte programe de prelucrare grafica - sunt destule.
Un alt aspect ce trebuie precizat in legatura cu grafica web este
transparenta. Un element grafic (precum textul "verde.ro" de mai sus)
are un fond de anumita culoare (in cazul de mai sus alb). In situatia
in care avem pe pagina internet un fundal de o alta culoare sau un
fundal reprezentand o poza, atunci textul nostru nu mai arata asa bine.
In acest caz vom folosi un fond transparent:
In Photoshop, poti crea o imagine cu fond transparent selectand
Transparent in campul Contents din fereastra New File (File/New).
Poate ai vazut pe alte pagini internet mici animatii si te-ai intrebat
cum sunt realizate. Acestea sunt de fapt fisiere gif animate create cu
aplicatii specializate. De regula, vei avea pregatite toate imaginile
din care vrei sa creezi animatia si le vei introduce intr-o asemenea
aplicatie. In fisierul HTML nu vei scrie nimic special pentru gif-uri
animate; acestea vor fi decodificate de catre browser din tag-ul
<IMG SRC=nume.gif>." pentru impartirea pe orizontala, in doua
frame-uri egale.
| Cele mai ok referate! www.referateok.ro |