	Biologie	Chimie	Didactica	Fizica	Geografie	Informatica
	Istorie	Literatura	Matematica	Psihologie

Html

Index » educatie » » informatica » Html
» NOTIUNI DE HTML

NOTIUNI DE HTML

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):

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):

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:

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 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	CELULA 3

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 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.

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:

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 XY

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  ca in exemplul urmator:



Aici se incheie prima parte a ghidului. In continuare vom prezenta cateva notiuni despre imagini, cadre (frames) precum si despre grafic

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.

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.

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%,*

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