Html tutorial

AnON1m · May 27, 2006

Iti prezint un ghid care iti va permite sa inveti unele notiuni de baza HTML pentru a iti crea propriile pagini web. Fara a avea pretentia acoperirii tuturor aspectelor legate de acest domeniu, iti vom prezenta in urmatoarele capitole elemente de baza pentru proiecatarea paginilor internet, printre care: elemente de HTML, elemente de grafica si elemente de design.

Prima parte a ghidului cuprinde sapte capitole si contine notiuni HTML de baza.

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>

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

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:

ABCSRL

Trecerea la un nou rand nu se face apasand Enter in fisierul HTML, ci utilizand tag-ul

(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

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: ... - utilizat pentru scrierea textelor cu bold, ... - utilizat pentru scrierea textelor cu italics (litere inclinate) si ... - 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>Text verde ingrosat</FONT>

Tine cont ca tag-urile trebuie inchise in aceeasi ordine in care au fost deschise.

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

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>

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

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:

<TR>

Adresa: </FONT></TD>

Bulevardul Independentei nr. 0, Bloc 0, Ap 0, Sector 0, Bucuresti </FONT></TD>

</TR>

<TR>

Activitate: </FONT></TD>

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

- 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).Iti mai prezentam inca un tabel, ceva mai simplu:

NOU

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 000.0000 pentru informatii suplimentare. Va stam la dispozitie si prin e-mail cu o oferta completa de preturi. Puteti vizita si pagina societatii XYZ 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 (.

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 ... 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 E-mail:

<A E-mail;

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>

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

Salveaza programul

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.

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:

In fisierul index.html deschis in Notepad introducem urmatoarele instructiuni intre ultimul tag </TABLE> si tag-ul </CENTER> de la sfarsitul fisierului:

<HR>

Toate drepturile rezervate.

Pagina realizata in anul 2001</FONT>

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

CAP IX - Design web

Modul in care sunt prezentate informatiile (texte, imagini, link-uri, etc) si caracteristicile acestora (culori, pozitionare, aranjamente, etc) reprezinta design-ul paginii tale. Pentru ca pagina ta sa se bucure de succes si sa fie usor de utilizat trebuie sa ai grija cum prezinti informatiile in pagina. In aceasta directie, o lista cu lucururi care nu trebuie facute intr-o pagina web este probabil utila:

- nu folosi ca fundal pentru pagina culori tipatoare sau grafice (poze) foarte colorate care vor face dificil de citit pagina;

- nu folosi pentru text foarte multe culori diferite in cadrul aceleiasi pagini;

- nu folosi pentru text culori apropiate de culoarea fondului care vor face dificil cititul;

- nu folosi pentru text dimensiuni foarte mari;

- nu folosi fonturi romanesti, intrucat unii utilizatori s-ar putea sa nu le aiba instalate si atunci literele romanesti vor apare ca ?;

- nu incarca pagina excesiv cu elemente grafice, gif-uri animate, applet-uri java sau alte lucruri asemanatoare;

- nu folosi grafice (in special poze) de dimensiuni foarte mari, pentru a reduce timpul de incarcare;

- nu crea pagini web utilizand Microsoft Word, Page Maker sau aplicatii asemanatoare; inavata sa iti creezi propriile pagini asa cum vrei tu;

- nu face o pagina excesiv de lunga, ci imparte-o in mai multe pagini separate sau foloseste frame-uri;

- nu exagera cu sublinierile si ingrosarile (bold) in text;

- nu pune prea multe poze de dimnsiuni mari in aceeasi pagina; pune-le in pagini diferite.

Retine ca o pagina simpla are un efect mult mai mare decat o pagina incarcata precum cea de mai sus. Daca incepi sa iti creezi propria pagina, gandeste-te putin inainte despre cum va arata. Eventual, deseneaza pe o hartie o schita a viitoarei pagini. Nu incepe sa trantesti elemente pe pagina asa cum iti vin in minte.

Retine faptul ca intr-un site complex poti pierde sirul paginilor. Incearca sa faci un site functional, in care vizitatorul sa nu se rataceasca. In aceasta directie, un buton de tip "home" prin care vizitatorul sa ajunga la prima pagina este necesar. De asemenea, nu uita sa creezi un meniu usor de navigat pe care sa il pui pe toate paginile site-ului. Eventual, poti face si o "harta" cu toate paginile site-ului si modul cum se ajunge la ele.

Atunci cand navighezi pe web intotdeauna fii atent la modul cum arata diferitele pagini si retine ideile interesante pentru a le folosi in propria pagina (atentie! idei, nu fisiere grafice).

Continut pe web

Daca vrei ca pagina ta sa fie vizitata si sa aiba succes, gandeste-te bine ce pui pe ea. Continutul este mult mai important decat forma (prezentarea) paginii. Nu face o pagina care sa contina doar "link-uri catre paginile prietenilor mei", "motoare de cautare" si vesnicul UNDER CONSTRUCTION.

Incearca sa pui ceva interesant si util pe internet. Vrei sa faci o pagina personala? perfect. Dar nu pune doar o poza cu tine si un link catre www.yhaoo.com. Ai un anumit domeniu de interes? Esti pasionat de ozn-uri, integrame, excursii in Muntii Bucegi, automobilism, administrarea retelelor, filme SF sau muzica techno? strange date, aduna link-uri, scrie materiale si creaza continut despre acest domeniu pentru a fi pus pe internet. Vrei sa faci o pagina pentru firma ta? Nu pune doar numele firmei, numarul de telefon si o poza pe tot ecranul cu noul sediu din centru - nu asta este rolul internetului. In schimb, prezinta firma ta si activitatea acesteia. Eventual scrie niste materiale generale, informative sau educative despre domeniul de activitate al firmei - vizitatorii vor avea de ce sa vina pe pagina.

Incearca sa nu copiezi ce au altii, chiar daca o faci in cantitati industriale. O pagina poate avea un succes urias daca vii cu ceva nou - chiar daca volumul informatiei este foarte redus. De asemenea, renunta la "UNDER CONSTRUCTION". Daca nu ai nimic de pus inca pe pagina, nu o pune pe internet. Daca unele sectiuni nu sunt gata, nu le pune pe internet decat atunci cand ai ce sa prezinti in ele.

Gandeste-te ca timpul vizitatorilor paginii tale este limitat; daca acestia nu vor gasi ceva interesant pentru a ramane, atunci nu o vor face. Un alt element important pentru pagina ta este frecventa si volumul actualizarilor acesteia. Chiar daca o pagina este minunata si vizitatorii raman impresionati, acestia nu se vor intoarce daca nu vor sti ca gasesc ceva nou data vitoare cand vin. O pagina cu mentiunea "Ultima actualizare: 23 octombrie 1995" in nici un caz nu va crea o impresie buna. In schimb, stabileste un program de actualizari; daca ai informatii noi de pus in pagina, nu le pune pe toate odata, ci treptat; creaza o sectiune intitulata "Ce este nou pe site?" in care sa precizezi ultimele noutati.

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. 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, nu sa sa pui cap la cap elemente de la altii.

TESTARE SI VERIFICARE

Ce facem mai departe? Pagina este terminata si sta cuminte pe hard disk-ul tau. Totusi, pana a fi prezentata pe internet si a se bucura de succes, mai trebuie parcurse cateva etape.

O etapa importanta este testarea si verificarea paginii tale. Desi pare ceva banal, aceasta etapa nu trebuie neglijata pentru a obtine o pagina internet buna. Cateva directii in care se realizeaza aceasta testare sunt:

- testarea functionalitatii paginii - te vei asigura ca toate paginile se incarca asa cum trebuie si de unde trebuie, ca toate meniurile si butoanele vor incarca paginile corespunzatoare si nu altele. De asemenea, te vei asigura ca toate elementele sunt la locul lor si se incarca asa cum vrei tu (grafice, tabele, poze, etc);

- verificarea textului pentru greseli de gramatica, tastare, etc. Este o treaba plictisitoare sa recitesti textul, in special daca ai destul de mult, dar merita sa o faci. O pagina "curata" din acest punct de vedere castiga puncte. O pagina cu greseli de gramatica nu va spune multe lucruri bune despre tine, iar o pagina cu greseli de tastare va parea facuta in graba;

- testare din punct de vedere tehnic: incarca pagina ta atat in Internet Explorer cat si in Netscape. Chiar daca ceea ce ti-am prezentat pana acum legat de HTML este valabil pe ambele browsere, nu strica sa atrunci cate un ochi in fiecare si sa vezi ca lucrurile merg OK. De asemenea, incearca sa testezi site-ul pe rezolutii diferite (cel putin 800x600 si 1024x76b): poate site-ul este sublim pe 800x600 dar pe 1024x768 arata ca naiba;

- verificarea adreselor externe: primul lucru care trebuie revazut aici este daca ai scris corect adresa ta email in campurile "mailto:". Ar fi destul de trist sa fi scris adresa gresit si sa nu poti fi contactat de vizitatorii paginii. De asemenea, nu uita sa verifici daca ai scris corect si link-urile catre alte site-uri. Acest lucru il verifici cel mai bine fiind conectat la internet si facand click direct pe link-urile din pagina ta, incarcata de pe harddisk intr-un browser. Link-urile scrise gresit sau cele care nu mai sunt functionale (dead links) sunt o plaga a site-urilor web;

- in final, arunca un ochi pe codul HTML al paginii si incearca sa il pastrezi cat mai corect; fii sigur ca ai inchis toate tag-urile pe care le-ai deschis (valabil in special pentru tabele).

GAZDUIRE PAGINI

In regula, pagina pare minunata - a sosit timpul sa o pui pe internet. Cum procedezi? Paginile web, pentru a putea fi vazute de pe internet, trebuie sa fie gazduite de un server web - un calculator special configurat in acest sens, conectat non-stop la internet. Desigur, cu cunostinte avansate si costuri mari poti avea propriul server web, dar noi vom prezenta solutii mai simple. Pentru a pune pagina ta pe internet vei apela la un serviciu de gazduire web (web hosting). Acesta poate fi cu plata sau gratuit.

Pentru webhosting platit vei apela la un furnizor de servicii internet (Internet Service Provider - ISP). Contra unei taxe lunare, acesta va gazdui pagina ta pe web si iti va oferi posibilitatea actualizarii sale. Costurile variaza in functie de dimensiunea paginii, servicii aditionale cerute (suport pentru php, asp, etc) si asa mai departe. Pentru a iti face o idee, iti dam adresele catorva furnizori de servicii internet importanti din tara noastra - studiaza-le ofertele:

Exista insa si posibilitatea apelarii la servicii gratuite de gazduire a paginii tale. Ca si variantele cu plata, acestea iti dau posibilitatea de a iti pune pagina pe web, de a o actualiza, etc. Desigur, exista dezavantaje. Cel mai important dintre acestea este prezenta reclamelor pe site-ul tau: aceste servicii ofera spatiu gratuit pe web dar isi recupereaza banii din reclame pe care le afiseaza pe site-ul tau intr-un fel sau altul, reclame asupra carora tu nu ai control. In rest, mai pot aparea si alte dezavantaje fata de un serviciu cu plata, precum calitatea serviciilor, calitatea suportului tehnic,etc.In general, insa, ca punct de plecare un asemenea serviciu gratuit este OK.

Cel mai utilizat in aceasta directie este Yahoo Geocities. Serviciile sunt OK iar Geocities are o raspandire fantastica pe web. Exista multe alte asemenea servicii, trebuie doar sa le cauti. In ultimul timp, au aparut servicii de web hosting gratuit si in tara noastra. Cel mai utilizat este cel oferit de RDS pe domeniile home.ro si go.ro. Apasa aici pentru utilizarea acestuia.

Similar cu procedura pentru counter serviciul gratuit de gazduire a paginii va necesita deschiderea unui cont, completarea unor formulare (on-line) si transmiterea fisierelor paginii tale. Avantajul fata de serviciile cu plata este ca toata procedura se poate desfasura on-line. Si, desigur, fara bani.

Formalitatile de gazduire a paginii incheiate, te vei putea bucura de pagina ta pe internet, vei retine adresa acesteia si o vei putea transmite prietenilor tai. Nu uita sa verifici inca o data pagina, acum ca a ajuns pe internet. Exista posibilitati reduse ca din motive independente de vointa ta unele fisiere sa nu fi ajuns pe web in forma dorita, sau chiar deloc.

NUME DOMENII

Acum pagina ta este pe internet, si, in cazul fericit, ai o adresa de forma paginamea.go.ro, www.geocities.com/paginamea, paginamea.fx.ro sau ceva asemanator. In cazul mai putin fericit, adresa este mai lunga si mai complicata. Un site gratuit la Geocities putea avea (in urma cu cativa ani) o adresa de forma: www.geocities.com/SiliconValley/Heights ... amea.html. Nimeni nu ar putea retine o asemenea adresa.

In aceste conditii, cel mai interesant ar fi sa ai propriul tau nume de domeniu astfel incat adresa ta sa fie www.paginamea.ro sau, de ce nu?, www.paginamea.com (un domeniu este o adresa "primara" de tipul www.paginamea.ro sau www.paginamea.com). O asemenea adresa ar fi mult mai simplu de retinut si ar face impresie mult mai buna (in special pentru pagini de firma). Nu in ultimul rand, poti atrage vizitatori mai multi daca domeniul este ales in mod inspirat (si nu este deja ocupat): spre exemplu, cine vrea informatii despre moda, poate merge direct la www.moda.ro, sau cine vrea informatii despre masini poate merge la www.masini.ro.

Pentru utilizarea domeniilor intram direct in aria serviciilor platite. Pe de o parte, dreptul de a utiliza un anumit domeniu trebuie platit iar pe de alta parte serviciile de gazduire gratuita a paginii nu te vor lasa sa utilizezi un domeniu (in mod normal) ci adresa lor specifica de tipul paginamea.home.ro sau www.geocities.com/paginamea, acesta fiind un mod de promovare a lor. Astfel, daca vrei sa ai un domeniu va trebui sa iti gazduiesti pagina la un furnizor de servicii internet, cum am vazut in capitolul anterior.

Inregistrarea domeniilor .ro se face prin Institutul pentru Cercetari in Informatica (ICI), adresa exacta pentru domenii fiind rnc.ro. Pentru a inregistra un domeniu vei complea un formular continand numele domeniului si elementele tale de identificare, iar apoi vei merge la sediul institutului pentru a efectua plata (60 USD, taxa fixa pe domeniu). Inregistrarea domeniului o poti face singur sau de ea se poate ocupa furnizorul de servicii internet care iti gazduieste pagina. In acest din urma caz asigura-te ca inregistrarea paginii se face pe numele tau, nu al furnizorului, pentru ca domeniul sa ramana al tau daca vrei sa te muti la alt furnizor. Verificarea se face in pagina principala www.rnc.ro, in campul din partea de jos a paginii.

Pentru domenii din alte tari (.com, .net, etc) inregistrarea se face prin firme specializate. Puncte de plecare pot fi register.com sau domreg.ro. Taxele sunt de regula anuale.

Oricare ar fi modalitatea aleasa, procedura se deruleaza dupa ce mai inati ai ales un furnizor de servicii internet pentru gazduire, pentru ca acesta trebuie sa iti dea o serie de parametri pentru inregistrarea domeniului (sau sa se ocupe el insusi de acest lucru). Odata aceasta procedura incheiata, pagina ta va arata mult mai bine cu o adresa de tipul www.paginamea.ro. O alta solutie o reprezinta utilizarea (din nou) a unor servicii gratuite de redirectare. Daca ai apelat la un serviciu gratuit de gazduire, si nu iti plac adresele cu geocities.com sau home.ro, poti merge la un serviciu de tipul go.to pentru a beneficia in mod gratuit de o adresa de tipul go.to/paginamea, care va trimite vizitatorul la pagina ta de la geocities.com sau home.ro

Un singur lucru mai trebuie sa retii: nu este bine sa iti schimbi adresa paginii. Daca este interesanta, atunci multe persoane si-au notat-o, sau au pus link catre ea pe paginile lor. Daca este o adresa de firma, a fost inregistrata in divere directoare sau scrisa pe carti de vizita. Ar fi pacat ca la o schimbare de adresa, vizitatorii sa nu o mai poata gasi. Deci, gandeste-te bine unde vei gazdui pagina, ce adresa va avea si daca vei folosi un domeniu. Daca trebuie neaparat sa schimbi adresa, incearca sa pui la vechea adresa o pagina cu mentiunea "Aceasta pagina s-a mutat. Adresa este....", astfel incat vizitatorii sa nu iti piarda urma definitiv

PROMOVARE PAGINA

Pagina este pe internet si arata bine; ti-ai anuntat toti prietenii despre ea, insa ai vrea sa ai mai multi vizitatori. Cum procedezi? Este timpul sa iti promovezi putin pagina. Cum se face acest lucru? Exista mai multe directii:

1. inregistrarea paginii in index-uri. Un index este un site ce contine multe adrese de pagini, ordonate pe diferite categorii. De regula, un asemenea index este o parte a unui site mai mare, de tip portal. Daca pagina ta se va adresa vizitatorilor romani, atunci are sens sa o adaugi in baza de date a celor mai utilizate index-uri romanesti. Mai jos, iti oferim direct link-urile catre paginile de inregistrare pentru unele dintre acestea (se deschid in ferestre separate):

Mai sunt si alte index-uri in tara noastra. Cel mai bine ar fi sa inregistrezi pagina ta in cat mai multe. Pentru o lista mai mare a acestora, apasa aici. O singura asemenea baza de date straina iti vom recomanda pentru inregistrare, pentru ca este foarte cunoscuta si este folosita si de portaluri romanesti (precum acasa.ro): dmoz.org.

Pentru inregistrare vei specifica o serie de elemente despre site si vei completa on-line o serie de formulare. Incearca sa faci o descriere cat mai clara, concisa si atragatoare;

2. inregistrarea paginii in motoare de cautare. Acestea sunt site-uri specializate care cauta pagini pe internet dupa anumite cuvinte cheie specificate de utilizator. Din nou, iti dam paginile de inregistrare pentru cateva asemenea site-uri, cu mentiunea ca cele mai utilizate (si de romani) sunt site-uri care nu sunt din Romania:

google.com | altavista.com | yahoo.com | lycos.com

3. inregistrarea in topuri - acestea sunt site-uri ce clasifica paginile inregistrate in functie de numarul de vizitatori. Acces direct in paginile de inregistare:

trafic.ro | top100.ro | goldentop100.ro

Recomandam inscrierea in trafic.ro (cu atat mai mult cu cat acesta tine loc si de counter), insa celalalte topuri nu vor avea o influenta semnificativa asupra numarului de vizitatori ai paginii tale.

BANNERE SI PUBLICITATE PE SITE - DA SAU NU?

O alta modalitate de promovare este schimbul de bannere cu alte site-uri: tu pui un banner (o mica imagine de reclama) a unui site la tine, iar site-ul respectiv pune un banner de-al tau. Poti castiga si ceva bani din acest lucru, oferind "spatiu de reclama" altor site-uri pe pagina ta. Exista si site-uri specializate de "intermediere" a schimbului de bannere.

Din experienta noastra, trebuie sa te gandesti la urmatoarele aspecte, in ceea e priveste bannerele: daca ai o pagina interesanta si te gandesti la schimbul de bannere ca mod de promovare, renunta. Vei avea vizitatori si fara acest schimb - de site-ul tau vor afla din index-uri, motoare de cautare si de la alti vizitatori multumiti. In schimb bannerele nu vor face decat sa ii enerveze pe cei care iti viziteaza site-ul (cu cat sunt mai multe, cu atat sunt mai enervante). Un site fara bannere, in schimb, este mult mai "curat" si mai usor de parcurs - uita-te la verde.ro.

Daca vrei sa castigi ceva bani din bannere, gandeste-te de doua ori. Ia legatura cu un site specializat si estimeaza ce venituri vei avea. Pentru cativa dolari pe luna nu are rost sa strici estetica site-ului si sa il faci sa se incarce mai greu. Daca totusi trebuie neaparat sa ai si bannere, cateva adrese de "intermediari" sunt:

goldenclick.ro | goldenbanners.ro | adserver.ro

INTRETINERE PAGINA

Pare ca totul s-a incheiat. Insa o pagina pusa pe web si uitata acolo nu este prea interesanta. In continuare te vei ocupa de intretinerea sa. Incearca sa tii pagina "in viata", astfel incat ea sa nu para "parasita". Cateva idei:

- e-mail de contact. Nu uita sa pui o adresa de mail pe site, unde vizitatorii sa te poata contacta pentru intrebari, sugestii, felicitari, critici, etc. Majoritatea serviciilor de hosting (cu plata sau fara) iti ofera si o asemenea adresa de mail. Mai important, insa, nu uita sa verifici acel email din cand in cand si sa raspunzi la toate mesajele. Un site web "parasit", la care webmasterul nu raspunde la mesaje nu face o impresie buna. Cel mai indicat este sa iti creezi o adresa de mail speciala pentru site, astfel incat mesajele legate de acesta sa nu se incurce cu mesajele tale personale.

- actualizari - am mai vorbit despre acest aspect intr-unul din capitolele precedente, dar revenim pentru ca este important. Incearca sa mai adaugi cate ceva pe site, din cand in cand. Nu trebuie sa fie multa informatie, dar sa fie ceva nou. Daca nu intentionezi sa faci multe actualizari, macar da impresia ca pagina este terminata si noua: nu lasa texte si grafice cu "unde construction" si nu pune date (calendaristice) pe site. Daca totusi ai un program de actualizari, atunci incearca sa te tii de el: poti crea o rubrica de tipul "Ce este nou pe site?" in care sa mentionezi toate actualizarile, sau poti stabili un program prin care actualizezi regulat site-ul pe data de 25 a fiecarei luni, spre exemplu;

- promovare - pe masura ce identifici site-uri noi, motoare de cautare sau index-uri unde crezi ca site-ul tau isi are locul, inregistreaza-l. Configuratia internetului se modifica, astfel incat promovarea paginii este la fel de importanta precum actualizarea sa;

- colaborari - in timp, poti stabili colaborari cu alte site-uri, cu persoane, firme sau publicatii pentru promovarea, actualizarea sau completarea site-ului tau. Fii atent cand navighezi pe internet, si cand gasesti un site apropiat de al tau ca tematica, scrie-i autorului.

Cam atit...sper sa te descurci cu tot ce am scris pe aici...Have fun..

Wisa · May 27, 2006

e .. bine venit pentru incepatorii care vor sa lucreze HTML .

Fatal1ty · May 28, 2006

mda ......... desi nu cred ca e cineva pe aici care nu stie html

sym · June 1, 2006

la cate editoare WYSIWYG au aparut, nu cred ca mai e nevoie sa stii sa lucrezi direct in cod. oricine poate folosi un dreamweaver sau un frontpage

MRcrispy · February 23, 2009

hei asta a fost primul tut. html pe care l-am citit

Rebell · February 23, 2009

off:http://www.w3schools.com/html/html_intro.asp

asta e cel mai tare site , cred , de aici am invatat eu tot html-u

on:frumos tutorialu.. cam lung si dintr-o singura parte , o sa va plictisiti citindu-l ....

Sign In

Html tutorial

Recommended Posts

AnON1m

Wisa

Fatal1ty

sym

MRcrispy

Rebell

Join the conversation

Browse

Activity

Pages