Paginile pe internet sunt, de regula, realizate intr-un limbaj numit HTML - HyperText Mark-up Language. Editarea acestora se poate face in orice program de editare texte, pornind chiar cu banalul Notepad din Windows. Toate notiunile prezentate in acest ghid pot fi puse in practica utilizand Notepad, astfel incat poti deschide Notepad acum.
Fisierul pe care il vom edita se va numi index.html. In general fisierul principal al unui site internet (cel care se incarca atunci cand tastam o adresa de genul www.abc.abc) este numit index.html.
Instructiunile pe care le folosim intr-o pagina HTML se numesc tag-uri si acestea indica browser-ului (Netscape, Internet Explorer, etc) modul de prezentare a informatiei din pagina. Tag-urile se scriu intre semnele < si >. Tag-urile nu trebuie scrise respectand reguli foarte stricte (nu e nevoie sa scrii numai cate un tag pe rand sau sa foloseti numai litere mari, etc).Un exemplu de utilizare a tag-ului FONT este:
<FONT FACE=ARIAL COLOR=#FF0000>ABC SRL - lider pe piata serviciilor</FONT>
Instructiunea de mai sus va determina afisarea textului "ABC SRL - Lider pe piata serviciilor" cu font arial si culoarea rosie. Dupa cum se poate observa, exista un tag inaintea textului si unul care incheie textul respectiv. Majoritatea tag-urilor functioneaza in acest mod: se pun inaintea informatiei pe care dorim sa o prezentam intr-un anume mod iar apoi la sfarsitul acesteia, ca in exemplul de mai sus.
Continutul oricarui fisier HTML trebuie inclus intre tag-urile <HTML> si </HTML>. Aceasta inseamna ca tag-ul <HTML> trebuie sa fie primul lucru care apare intr-un fisier HTML, iar tag-ul </HTML> trebuie sa fie ultimul:
<HTML>
aici se completeaza informatia de prezentat in pagina
</HTML>
Ca structura, o pagina HTML are doua parti: o parte delimitata de tag-urile <HEAD> si </HEAD> ce contine informatii de identificare a paginii si o parte delimitata de tag-urile <BODY> si </BODY> ce contine informatiile de prezentat efectiv in pagina. Asupra primei sectiuni nu vom insista prea mult. Cel mai important tag utilizat in sectiunea HEAD este cel care da titlul paginii. Acest titlu va fi incadrat de <TITLE> si </TITLE>. Un exemplu de pagina HTML foarte simpla, avand titlul "ABC SRL" este:
<HTML>
<HEAD>
<TITLE>ABC SRL</TITLE>
</HEAD>
<BODY>
aici se completeaza continutul paginii
</BODY>
</HTML>
Tag-urile <HTML> </HTML>, <HEAD> </HEAD>, <TITLE> </TITLE> si <BODY> </BODY> vor aparea o singura data in cadrul unui fisier HTML, dupa cum arata exemplul de mai sus. Apasa pe imaginea de mai jos pentru a vedea cum arata fisierul ce contine instructiunile de mai sus (se deschide intr-o fereastra separata pe care o poti inchide dupa consultare):
CAP II - Despre texte
Cel mai important element al unei pagini internet este, desigur, textul. Intr-o forma simpla, acesta poate fi scris efectiv intr-o pagina HTML, dupa cum am vazut in exemplul anterior: am scris in fisierul HTML textul " aici se completeaza informatia de prezentat in pagina " si acesta s-a incarcat in mod identic in browser.
Vom studia in continuare elemente de formatare a textului. Doua lucruri trebuie mentionate in primul rand, legate de formatarea textelor: utilizarea spatiilor si trecerea la un nou rand. Intr-un fisier HTML afisarea mai multor spatii consecutive nu este posibila prin scrierea directa in fisierul html ci folosind de mai multe ori sintagma . Astfel, pentru a pune trei spatii intre cuvintele ABC si SRL in textul "ABC SRL" va trebui sa scriem in fisierul HTML astfel:
ABC SRL
Trecerea la un nou rand nu se face apasand Enter in fisierul HTML, ci utilizand tag-ul <BR> (acest tag se utilizeaza singur; nu se foloseste cu </BR>).Astfel, pentru a scrie "ABC" pe un rand, a lasa un rand liber, si "SRL" pe un rand separat, vom folosi:
ABC<BR><BR>SRL
Am utilizat mai sus de doua ori tag-ul BR: o data pentru a trece la un nou rand si o data pentru a lasa un rand liber. Tag-ul utilizat pentru formatarea modului de afisare a textului este <FONT> </FONT>. Tag-ul FONT suporta mai multi parametri, printre care:
- SIZE=x, unde x este dimensiunea fontului (1 fiind dimensiunea cea mai mica);
- COLOR=#RRGGBB - culoarea cu care se va afisa fontul (vom reveni asupra acesteia in capitolul urmator).Culoarea implicita este negru;
- FACE=font - fontul cu care va fi scris textul respectiv. Atentie! Vizitatorii paginii tale trebuie sa aiba fontul respectiv instalat pe calculator, deci utilizeaza numai fonturi "clasice". Fontul implicit este Times New Roman
Acesti parametri poti fi utilizati separat sau simultan in cadrul tag-ului FONT. Astfel, instructiunea de mai jos afiseaza text folosind culoarea albastru:
<FONT COLOR=#0000AA>ABC SRL - Lider pe piata serviciilor</FONT>
Instructiunea de mai jos afiseaza acelasi text cu font arial, culoare albastra si dimensiune mai mare:
<FONT COLOR=#0000AA SIZE=4 FONT=ARIAL >ABC SRL - Lider pe piata serviciilor</FONT>
Dupa cum se poate vedea, se pot utiliza mai multi parametri in cadrul aceluiasi tag FONT. Acestia nu se despart prin virgula, ci printr-un spatiu.De retinut ca parametrul FACE poate primi mai multe fonturi.
Astfel, un tag de tipul <FONT FACE=VERDANA,ARIAL> </FONT> va instrui browserul sa utilizeze fontul Verdana, iar daca acesta nu este gasit, sa utilizeze Arial.
Mai exista trei tag-uri utile pentru formatarea textelor: <B> </B> - utilizat pentru scrierea textelor cu bold, <I> </I> - utilizat pentru scrierea textelor cu italics (litere inclinate) si <U> </U> - pentru a scrie text subliniat.
Desigur, pot exista combinatii intre tag-ul FONT si tag-urile de subliniare, ingrosare sau inclinare, ca de exemplu:
<FONT COLOR=#00AA00><B>Text verde ingrosat</B></FONT>
Tine cont ca tag-urile trebuie inchise in aceeasi ordine in care au fost deschise. Pentru exemple concrete de utilizare a tuturor informatiilor de mai sus, apasa pe imaginea de mai jos (se deschide intr-o fereastra separata pe care o poti inchide dupa consultare):
In fisierul index.html deschis in Notepad, sterge randul cu " aici se completeaza informatia de prezentat in pagina " si inlocuieste-l cu:
<BR>
<FONT SIZE=4 COLOR=#0000AA><B>ABC SRL - Lider pe piata serviciilor</B></FONT>
<BR>
Acum, daca salvezi fisierul index.html si il reincarci in Browser, ar trebui sa arate cam asa (apasa pe imaginea
Documentul este oferit gratuit,
trebuie doar să te autentifici in contul tău.
