| CATEGORII DOCUMENTE |
Creearea unui site
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:
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:
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:
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:
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:
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:
Instructiunea de mai jos afiseaza acelasi text cu font arial, culoare albastra
si dimensiune mai mare:
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:
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:
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:
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):
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):
|
| ||||
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>
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>
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=https://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=https://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=https://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.
|
Politica de confidentialitate | Termeni si conditii de utilizare |
Vizualizari: 1611
Importanta: 
Termeni si conditii de utilizare | Contact
© SCRIGROUP 2024 . All rights reserved
