Tutorial HTML

0
422
Ti-a placut acest articol? Acorda-i o nota

Introducere in HTML

Obiectiv
• Familiarizarea cu elementele de baza ale limbajului HTML: taguri, tabele, link-uri, imagini
• Construirea unei pagini web personale
Se prezintă în continuare elementele de bază ce intervin în compoziţia codului html.

 

CAPITOLUL 1: TAG-URI

Paginile de web sunt, de regulă, realizate într-un limbaj numit HTML HyperText Mark-up Language.Editarea codului care stă la baza acestora se poate face în orice program de editare texte, spre exemplu utilitarul Notepad din Windows. Există însa şi editoare de text specializate, în care informaţia este introdusă în tabele folosind o interfaţă grafică, codul html fiind generat automat (de ex. MS Front Page din pachetul MS Office). Fişierul pe care îl vom edita pe parcursul lucrării se va numi index.html. Acest nume nu este ales întâmplător: în general, pagina web „principală” (cea care se deschide atunci când accesăm o adresa web, ex. www.etutoriale.net) se numeşte index.html.

Instrucţiunile pe care le folosim într-o pagină HTML se numesc tag-uri şi acestea indică browser-ului (Internet Explorer,Mozilla Firefox etc) modul de prezentare al informaţiei din pagină. Tag-urile se scriu între semnele „<” si „>”. Un prim exemplu de utilizare a tag-ului FONT este ilustrat în cele ce urmează:

<FONT FACE=ARIAL COLOR=#0000AA>Introducere in HTML</FONT>

Instrucţiunea de mai sus va determina afişarea textului „Introducere in HTML ” cu font arial şi culoarea albastră. După cum se poate observa, există un tag înaintea textului şi unul care încheie textul respectiv.Majoritatea tag-urilor funcţionează în acest mod: se pun înaintea informaţiei pe care dorim să o prezentăm într-un anume mod iar apoi la sfârşitul acesteia, ca în exemplul de mai sus. În general, aceste tag-uri au o structură „concentrică”: ultimul tag deschis va fi primul închis. Acest lucru rezultă din figura 1.

Untitled

 

Fig. 1: Deschiderea şi închiderea tag-urilor html

inclusiv faptul că în editorul de texte folosit se compune o pagina web trebuie semnalat cu un tag special. Astfel, conţinutul oricărui fişier HTML trebuie inclus între tag-urile <HTML> şi </HTML>. Aceasta înseamnă că tag-ul <HTML> trebuie să fie primul lucru care apare într-un fişier HTML, iar tag-ul </HTML> trebuie să fie ultimul:

<HTML>
...aici se completează informaţia de prezentat în pagină...
</HTML>

Ca structură, o pagină HTML are două părţi: o parte delimitată de tag-urileşice conţine informaţii de identificare a paginii şi o parte (cea mai cuprinzătoare) delimitată de tag-urileşice conţine informaţiile de prezentat efectiv în pagină. Cel mai important tag utilizat în secţiunea HEAD este cel care dă titlul paginii (titlu afişat în bara de sus a paginii web accesate). Acest titlu va fi încadrat deşi. Un exemplu de pagină HTML foarte simplă, având titlul „eTutoriale.net” este:

<HTML>
<HEAD>
<TITLE> eTutoriale.net </TITLE>
</HEAD>
<BODY>
...aici se completează conţinutul paginii...
</BODY>
</HTML>

Tag-urile <HTML>…</HTML>, <HEAD>…</HEAD>, <TITLE>…</TITLE> şi <BODY>…</BODY> sunt tag-uri foarte importante şi ele vor apărea o singură dată în cadrul unui fişier HTML.

 

CAPITOLUL 2: FORMATAREA TEXTELOR

Deoarece world wide web-ul încearcă să prezinte informaţia într-o manieră cât mai atractivă, textul este una dintre cele mai importante componente ale unei pagini web. Într-o formă simplă, acesta poate fi scris efectiv într-o pagină HTML, după cum am văzut în exemplul anterior: am scris în fişierul HTML textul „…aici se completează informaţia de prezentat în pagina…” şi acesta s-a încărcat în mod identic în browser. Sunt, prin urmare, foarte importante elementele de formatare a textului, care vor fi trecute în revistă în continuare. Două lucruri trebuie menţionate în primul rând, legate de formatarea textelor: utilizarea spaţiilor şi trecerea la un nou rând. Într-un fişier HTML afişarea mai multor spaţii consecutive nu este posibilă prin introducerea directă de spaţii în fişierul html (acest lucru nu va avea nici un efect la afişarea paginii) , ci folosind de mai multe ori sintagma &nbsp;  (câte o dată pentru fiecare spaţiu). Astfel, pentru a pune trei spaţii între cuvintele Tutoriale şi Web în textul „Tutoriale Web” va trebui să scriem în fişierul HTML astfel:

Tutoriale&nbsp;&nbsp;&nbsp;Web

Trecerea la un nou rând nu se face apăsând Enter în fişierul HTML, ci utilizând tag-ul (spre deosebire de majoritatea celorlalte tag-uri, acest tag se utilizează singur: nu trebuie închis cu ). Astfel, pentru a scrie „Tutoriale” pe un rând, a lăsa un rând liber, şi „Web” pe un rând separat, vom folosi:

Tutoriale<BR><BR>Web

Am utilizat mai sus de două ori tag-ul BR: o dată pentru saltul la un nou rând şi o dată pentru a lăsa un rând liber. Tag-ul utilizat pentru formatarea modului de afişare a textului este <FONT>…</FONT>. Tag-ul FONT suportă mai mulţi parametri, printre care:

 SIZE=x – unde x este dimensiunea font-ului (1 fiind dimensiunea cea mai mică);
COLOR=#RRGGBB – culoarea cu care se va afişa font-ul. Orice culoare se poate compune din trei culori de bază: roşu, verde şi albastru (Red-Green-Blue, RGB). Acestei compoziţii îi corespunde un cod hexazecimal, unde intensitatea fiecărei culori este reprezentată pe un octet. De ex., 00FF00 este codul pentru culoarea verde. Culoarea implicită este negru;
FACE=font  – font-ul cu care va fi scris textul respectiv.

Aceşti parametri pot fi utilizaţi separat sau simultan în cadrul tag-ului FONT. Astfel, instrucţiunea de mai jos afişează text folosind culoarea albastru:

<FONT COLOR=#0000AA>Tutoriale Web</FONT>

Instrucţiunea de mai jos afişează acelaşi text cu font arial, culoare roşie şi dimensiune mai mare:

<FONT COLOR=#FF0000 SIZE=4 FACE=ARIAL > Tutoriale web</FONT>

Aşa cum am mai precizat se pot utiliza mai mulţi parametri în cadrul aceluiaşi tag FONT, separaţi prin spaţiu. Alte tag-uri utile pentru formatarea textelor sunt: <B>…</B> – utilizat pentru scrierea textelor cu bold, <I>…</I> – utilizat pentru scrierea textelor cu italics (litere înclinate) şi <U>…</U> – pentru a scrie text subliniat. Desigur, pot exista combinaţii între tag-ul FONT şi tag-urile de subliniere, îngroşare sau înclinare, ca de exemplu:

<FONT COLOR=#00AA00><B>Text verde îngroşat </B></FONT>

Un alt element util în 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 între tag-ul <CENTER> şi </CENTER> va apare centrat.
Este important de menţionat încă o dată că tag-urile trebuie închise în ordine „concentrică”: tag-ul deschis ultimul se închide primul, tag-ul penultim se închide al doilea şamd.

2.1 LISTE

Un capitol aparte ţinând de formatarea textului în html îl reprezintă listele. Eticheta care poate fi folosită pentru definirea unei liste diferă în funcţie de tipul de listă pe care dorim să îl creăm. Există mai multe tipuri de liste, cele mai utilizate fiind cele: nenumerotate (neordonate) şi numerotate (ordonate). În primul caz, definirea listei se face cu eticheta <UL>, în cel de-al doilea se foloseşte <OL>. În ambele cazuri declararea unui nou element în interiorul listei foloseşte eticheta <LI>. Exemplu:

<UL>
<LI>Obtiune 1
<LI>Obtiune 2
<LI>Obtiune 3
</UL>

Aceeaşi listă, deschisă şi închisă cu <OL> va enumera elementele din lista numerotându-le în ordine crescatoare.
Este posibilă şi construirea de subliste în interiorul listelor.

2.2 HEADING-URI

Heading-urile sunt folosite în general într-un document html pentru a scrie titlul unui document sau al unei secţiuni a unui document. Există 6 niveluri de heading, etichetate de la <H1> până la <H6>. În principiu, ceea ce diferă între aceste heading-uri este mărimea cu care browser-ul web va afişa fontul, începând cu <H1> (mărimea cea mai mare) şi până la <H6> (mărimea cea mai mică). Interesant, în legatură cu aceste heading-uri, este că ele vor începe întotdeauna la o nouă linie (fără a fi nevoie de folosirea tagului <br>), iar închiderea heading-ului va conduce la un salt la linia următoare.
Spre exemplu instrucţiunea:

<H1>
<FONT FACE=VERDANA COLOR=#0000AA> eTutoriale.net </FONT>
</H1>

va afişa textul eTutoriale.net  sub forma unui heading (a unui titlu de pagină), în formatul dorit al font-urilor.

 

CAPITOLUL 3: TABELE

Tabelele se utilizează folosind tag-ul <TABLE>…</TABLE>. Din punct de vedere al organizării şi al aspectului vizual al paginii, acest tag este unul dintre cele mai importante. În general, toată informaţia afişată la accesarea unei pagini web este conţinută de tabele şi tabele în interiorul tabelelor, având diverse setări pentru margini, background, lăţime, număr de celule, spaţierea celulelor etc. Pentru a înţelege modul în care tabelele sunt implementate sub forma de cod html, imaginaţi-vă un tabel simplu deschis în Word care cuprinde mai multe căsuţe. În fişierul HTML, tabelele sunt organizate pe rânduri (rows – linii orizontale de căsuţe). La rândul lor, rândurile sunt organizate în elemente (căsuţe):

1
x

Fig. 2: Exemplu de tabel HTML

Tabelul din figura 2 conţine 3 rânduri, fiecare rând conţinând 5 elemente. În interiorul unui tag de tip TABLE, rândurile sunt declarate folosind tag-ul <TR>…</TR>, iar in cadrul fiecărui tag TR elementele (căsuţele) sunt declarate cu tag-ul <TD>…</TD>. Fiecare element (căsuţă) poate conţine 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>x</TD><TD></TD><TD></TD></TR>
<TR><TD></TD><TD></TD><TD></TD><TD></TD><TD></TD></TR>
</TABLE>

În exemplul de mai sus avem un tag <TABLE>…</TABLE> care delimitează tabelul şi trei tag-uri <TR>…</TR> corespunzând celor trei rânduri ale tabelului. Fiecare tag TR conţine câte 5 tag-uri <TD>…</TD>. Între <TD> şi </TD> se introduce conţinutul efectiv al fiecărei căsuţe. În exemplul de mai sus numai căsuţa din mijloc are conţinut – litera x. Tag-urile de definire a tabelelor pot avea diverse atribute, utile pentru formatarea tabelului. Astfel, tag-ul „principal”
TABLE poate fi asociat cu:

WIDTH=x sau WIDTH=x% – acesta specifică lungimea întregului tabel în pixeli (de exemplu WIDTH=500) sau în procente faţă de dimensiunea întregii ferestre (de exemplu WIDTH=50%). Ca o menţiune utilă, setarea în pixeli a dimensiunilor în html este oarecum „riscantă”, deoarece modul de afişare al paginii va depinde foarte mult de rezoluţia în pixeli a monitorului pe care se afişează pagina respectivă.
HEIGHT=x sau HEIGHT=x% – similar cu WIDTH, dar pentru înălţimea întregului tabel (exemple: HEIGHT=300 sau HEIGHT=100%);
BORDER=x  – dacă x este 1 atunci tabelul va avea şi „cadru” (linii de delimitare a elementelor). Daca x este 0, atunci acestea vor lipsi (deci BORDER=0 sau BORDER=1 sunt cele două opţiuni posibile în acest caz);
CELLSPACING=x  – specifică spaţiul dintre căsuţe, în pixeli;
CELLPADDING=x  – specifică spaţiul dintre marginea unei căsuţe şi conţinutul acesteia, în pixeli.

Şi în acest caz pot fi folosite toate aceste atribute împreună, numai o parte a lor, sau nici unul (caz în care se încarcă formatul „by default” al tabelului). Un tag TABLE ce le foloseşte pe toate ar arăta astfel:

<TABLE WIDTH=80% HEIGHT=200 BORDER=1 CELLPADDING=0 CELLSPACING=5>

Conţinutul tabelului </TABLE> si tag-ul TD poate avea o serie de atribute de formatare:

WIDTH=x sau WIDTH=x% – lungimea căsuţei, în pixeli sau ca procent din lungimea întregului tabel;
HEIGHT=x sau HEIGHT=x% – înălţimea căsuţei, în pixeli sau exprimată ca procent din înălţimea întregului tabel;
BGCOLOR=#RRGGBB – culoarea fundalului căsuţei, ca de exemplu BGCOLOR=#EEEEDD;
ALIGN=RIGHT, ALIGN=LEFT sau ALIGN=CENTER  – modul cum va fi poziţionat conţinutul căsuţei în interiorul acesteia: la dreapta, la stânga sau central;
VALIGN=TOP, VALIGN=BOTTOM sau VALIGN=CENTER – modul cum va fi poziţionat conţinutul căsuţei în interiorul acesteia: la dreapta, la stânga sau central.
Şi textul din interiorul unei căsuţe trebuie formatat la rândul sau. O căsuţă ce ar conţine un text roşu pe fond albastru deschis s-ar codifica astfel:

<TD BGCOLOR=#DDDDFF><FONT COLOR=#AA0000>text</FONT></TD>

Un tabel mai puţin tipic este prezentat in figura 3:

CELULA 1 CELULA 2 CELULA 3
CELULA 4

Fig.3: Tabel HTML în care formatul liniilor se schimbă de la o linie la cealaltă

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 ALIGN=CENTER>CELULA 4</TD></TR>
</TABLE>

Remarcaţi utilizarea atributului COLSPAN=3 în prima celulă a celui de-al doilea rând. Acesta indică faptul că celula respectivă se „întinde” pe lungimea a trei celule din structura normală a tabelului. În consecinţă, acest al doilea rând va conţine numai o singură celulă, nu trei. De asemenea, textul este aliniat la dreapta pe prima linie, şi central pe cea de-a doua linie.

 

CAPITOLUL 4: LINK-URI

Un element important al oricărei pagini web îl constituie link-urile. Acestea pot fi link-uri externe, care conduc către un alt site, sau link-uri interne care conduc spre alte pagini ale aceluiaşi site. Ambele tipuri se codifică asemănător prin folosirea unui tag de tipul

<A HREF=link.html>...</A> (pentru un link intern)

sau

<A HREF=http://etutoriale.net>...</A> pentru un link extern.

În primul caz, link-ul trebuie să indice calea pe calculator (pe maşina pe care este plasată pagina web) spre fişierul spre care dorim link-ul. Daca acesta se găseşte în acelaşi director cu fişierul ce conţine link-ul, este suficient să se indice doar numele fişierului pe care dorim sa îl deschidem, calea fiind implicită. Astfel codul de mai jos va afişa textul „Apăsaţi aici pentru pagina 2” care prin apăsare va încărca fişierul pag2.html (bineînţeles, daca acest fişier există):

<A HREF=pag2.html>Apăsaţi aici pentru pagina 2</A>

Codul de mai jos va afişa „Apăsaţi aici pentru mai multe tutoriale”, text care prin apăsare va încărca pagina www.etutoriale.net:

<A HREF=http://etutoriale.net>Apăsaţi aici pentru mai multe tutoriale</A>

În exemplul de mai sus se poate specifica în ce mod se va încărca pagina respectivă folosind atributul TARGET:
– TARGET=”nume”, unde nume este numele pe care doriţi să îl daţi unei noi ferestre unde se va încărca pagina. Se poate folosi şi TARGET=”_blank” pentru o fereastră nouă sau TARGET=”_self” pentru încărcarea în aceeaşi fereastră.

O altă variantă de link este posiblitatea transmiterii unui e-mail. Astfel, codul de mai jos afişează „Scrie-ne!”, text care
prin apăsare va deschide o fereastra pentru transmiterea unui mesaj la adresa mail@etutoriale.net (pentru aceasta este nevoie de
un program client de mail setat corespunzător, pe calculatorul pe care se vizualizează pagina):

<A HREF="mailto:mail@etutoriale.net">Scrie-ne!</A>

Aceste link-uri nu se restrâng doar la link-uri spre alte pagini html, ci pot fi link-uri directe spre fisiere în diverse formate: .doc, .txt, .pdf etc.

 

CAPITOLUL 5: IMAGINI

Prezentarea imaginilor în pagini HTML se face folosind tag-ul <IMG SRC=nume>, unde „nume” este numele unui fişier gif sau jpg. Tag-ul IMG poate primi şi atributul BORDER cu formele BORDER=0 (implicit) sau BORDER=n – pentru un chenar în jurul pozei de dimensiune n pixeli. Acest tag se foloseşte de unul singur, la fel ca si tag-ul break (nu se ”închide”). Mai mult decât atât, se poate folosi o imagine ca şi link înspre o altă pagină:

<A HREF=www.etutoriale.net><IMG SRC=poza.gif BORDER=0></A>

Se mai pot folosi imagini şi drept fundal pentru pagini internet. Pentru aceasta, vom introduce atributul BACKGROUND în cadrul tagului

<BODY> de la începutul unui fişier:
<BODY BACKGROUND=bkg.gif>

NICIUN COMENTARIU

LĂSAȚI UN MESAJ