Tutorialul.ro - TAG-urile de Baza in HTML

*Deschideti un document intr-un editor de text (ex Notepad) si salvati-l cu extensia .html pentru a putea lucra cursul urmator (ex pagina.html - pe care apoi o deschideti in browser).

TAG – reprezinta o comanda in cod HTML care indica modul in care va fi interpretata informatia la care ea se refera .

Orice pagina web standard trebuie sa contina 8 tag-uri de baza . Aceste tag¬uri trebuie sa apara in cadrul fiecarei pagini a unui web site . Aceste tag-uri sunt prezentate mai jos si ele trebuie sa apara exact in aceasta cronologie in cadrul paginii web :
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Inainte de a explica fiecare tag in parte mentionez ca tag-urile trebuie scrise in codul sursa exact in forma in care ele apar mai sus , intre semnele <> . Aceste simboluri au menirea de a transmite browser-ului ca textul dintre ele trebuie recunoscut ca un tag – deci ca un cuvant cheie al limbajului , o comanda care trebuie executata . Limbajul HTML nu tine cont de litere mari sau mici in cadrul tag-ului , astfel incat <BODY> sau <body> sau chiar <BoDy> vor fi interpretate identic.

<HTML> ~ acest tag transmite browser-ului ca documentul respectiv este de fapt un document HTML , dand astfel indicatii asupra modului in care vor fi interpretate diferite partitii ale fisierului ASCII .

<HEAD> ~ acest tag este in fapt tot un mesaj catre browser , continand informatii despre document – ca de ex. link-uri sau pagini care trebuie incarcate in prealabil .

<TITLE> ~ acest tag este folosit pentru a da o denumire paginii web create ; acest nume va apare in partea superioara a fereastrei browser-ului identificand astfel pagina respectiva .

</TITLE> ~ acest tag este de fapt inchiderea celui precedent ; transmite browser-ului ca textul ce trebuie considerat ca titlu al paginii s-a incheiat . Majoritatea tag-urilor HTML folosesc tag-uri corespondente de inchidere .

</HEAD> ~ tag-ul de inchidere al tag-ului corespondent <HEAD>

<BODY> ~ acest tag semnaleaza deschiderea sectiunii corespunzatoare corpului paginii web . Aici se vor introduce informatiile continute in pagina , textul , grafica si elementele multimedia dorite .

</BODY> ~ tag-ul de inchidere care transmite browser-ului ca nu se mai doreste adaugarea de informatie in aceasta pagina .

</HTML> ~ acest tag incheie documentul HTML , semnaland browser-ului ca nu mai exista elemente care trebuie citite sau incarcate .

Cu elementele prezentate mai sus putem deja crea o pagina web – foarte simpla dar perfect functionala ! Codul urmator implementeaza o pagina web folosind doar tag-urile de baza :

<html>
<head>
<title>Pagina mea proprie</title>
</head>
<body> Aceasta este o pagina de test . Acesta este un exemplu perfect pentru simplitatea crearii unei pagini web !
</body>
</html>

OBS : Dupa cum ati vazut tag-urile sunt folosite in general in perechi complementare . Daca vreti sa folositi taguri grupate fara a avea probleme atunci ele trebuie corect grupate si nu incrucisate. Adica:

<Tag1><Tag2></Tag1></Tag2> -tag-uri incrucisate care pot genera erori.

<TAG1><TAG2></TAG2></TAG1> -tag-uri grupate corect.

Odata creata o prima pagina web functionala trebuie sa revenim la tag-uri pentru a aprofunda capacitatile acestora .
In cadrul sectiunii <BODY> apar elementele de text si grafica ale paginii noastre . Acum sa vedem ce altceva mai putem realiza in aceasta sectiune .

Culorile
Unul dintre elementele cele mai puternice si des utilizate care se intalnesc in cadrul acestei sectiuni este controlul asupra culorilor , atat la nivel de text cat si de fundal . Putem configura culori diferite pentru text normal , link-uri , link-uri vizitate , link-uri active sau pentru fundalul paginii noastre .
Pentru a specifica culoarea de fundal, tag-ul nostru se prezinta astfel :

<Body bgcolor="blue">

Comanda anterioara face ca fundalul paginii noastre sa devina albastru . Pentru a specifica o anumita culoare ( ex. negru ) si pentru textul din cadrul paginii folosim urmatoarea comanda :

<Body bgcolor="blue" text="black">

La pasul urmator vom schimba culoarea link-urilor prezente in pagina in galben pentru a le diferentia mai rapid in cadrul informatiilor prezentate in pagina web :
<Body bgcolor="blue" text="black" link="yellow">

In cazul in care in cadrul paginii avem mai multe link-uri ar fi util sa putem observa rapid care dintre ele au fost deja vizitate si care nu . Pentru a putea sublinia acest fapt vom introduce si atributul vlink ( = visited link ) in cadrul tag-ului :

<Body bgcolor="blue" text="black" link="yellow" vlink="red">

In urma comenzii de mai sus browser-ul va afisa link-urile vizitate cu rosu . Ca un alt pas putem configura o alta culoare ( ex. verde ) pentru link-urile pe care se apasa la momentul respectiv ; aceasta culoare va apare doar in momentul in care se va da click pe link-ul respectiv iar atributul folosit va fi alink ( = active link ) :

<Body bgcolor="blue" text="black" link="yellow" vlink="red" alink="green">

Revenind la controlul culorilor trebuie sa mai amintesc unele detalii . Culoarea poate fi specificata fie in limba engleza ( denumirile dintr-o lista standard - red/blue/green/black) fie in cod hexazecimal ( ex .#0000FF ) . Formatul in care se transmite comanda este de tip RGB ( red green blue / rosu verde albastru) : RRGGBB ; comanda de mai jos :

<Body bgcolor="#0000FF">

este echivalenta cu :

<Body bgcolor="blue">

In cazul in care vrem ca pagina sa aiba un aspect mai personalizat putem folosi ca fundal nu doar o culoare ci o imagine ( in format GIF, JPG, PNG) :

<Body background="imagine.gif" text="black" link="yellow" vlink="red" alink="green">

Tag-ul anterior specifica utilizarea imaginii “imagine.gif” ca fundal al paginii noastre . Trebuie mentionat ca indiferent de dimensiunile imaginii dorite aceasta va acoperi intreaga suprafata a paginii .

Fonturile
In continuare vom aborda utilizarea diferitelor fonturi . In computer vom intalni o varietate foarte mare de fonturi in ceea ce priveste forma si marimea . Trebuie sa acordam atentie alegerii fontului utilizat in pagina noastra web pentru ca este posibil ca nu toti utilizatorii care vor incerca sa acceseze pagina vor dispune de fontul respectiv . In acest caz computerul va inlocui automat fontul nostru cu fontul default al acelui sistem ( de obicei ARIAL sau TIMES NEW ROMAN ) . Ca element practic , indiferent de fontul pe care il utilizam este necesara vizualizarea paginii si folosind fonturile default cele mai raspandite .

Pentru a controla fonturile trebuie utilizat tag-ul <FONT> , in cadrul sectiunii <BODY> :

<Body bgcolor="blue" text="black" link="yellow" vlink="red" alink="green">
<Font face="arial">
Tutorialul.ro
</Font>
</Body>

Observati ca si tag-ul <FONT> necesita un tag de inchidere . Acest tag ne permite sa stabilim tipul de font , dimensiunea sa si culoarea , ca in exemplul urmator :

<Font face="Comic Sans MS" size="4" color="green">

Pentru a da flexibilitate utilizarii fonturilor, limbajul HTML permite enumerarea in cadrul unei liste a fonturilor ce urmeaza a fi folosite , astfel incat in cazul in care fontul pe care il utilizati nu este disponibil atunci se va incerca automat utilizarea urmatorului font din lista :

<Font face="Comic Sans MS, Arial">

Marimea fontului poate fi stabilita in cadrul a trei tipuri de plaje : de la 1 la 7 , de la -1 la -3si de la +1 la +4.
In afara acestui control al fonturilor mai exista inca sase tag-uri care pot modifica fontul prezent in pagina . Aceste comenzi sunt tag-uri independente si nu apar in cadrul tag-ului <FONT> . Aceste tag-uri sunt <h1 > , <h2> , <h3> , <h4> , <h5> si <h6> , cu tag-ul <h1> folosind dimensiunea cea mai mare de font iar <h6> cea mai mica dimensiune . Aceste tag-uri sunt in general folosite la inceputul paginii pentru a anunta un titlu sau in cadrul paginii pentru a diferentia dimensiunea unei portiuni de text de dimensiunea standard definita prin tag-ul <FONT> . Toate aceste tag-uri necesita si complementarul de inchidere ( ex. </h1> ) . In cazul in care nu se apeleaza la tag-ul <FONT> se va folosi dimensiunea default de 3 .
In cazul in care dorim ca in locul fontului default al browserului sa folosim alt font pentru intregul document se va apela la tag-ul BASEFONT , integrat in sectiunea HEAD a documentului :

<head>
<basefont face=”Comic Sans MS” color="red" size=”+3”>
</head>

Codul sursa de mai sus implica utilizarea ca default a noului font , cu culoarea rosie si cu o dimensiune mai mare cu 3 decat a fontului default al browserului .
O alta observatie trebuie facuta legat de anumite caractere speciale care nu pot fi utilizate in mod normal ca text datorita faptului ca ele reprezinta cuvinte cheie ale limbajului HTML . Pentru a introduce aceste caractere exista posibilitatea de a folosi codul lor sau alte definitii standardizate ale acestora – ca de exemplu pentru a obtine semnul de copyright :
© -> browser-ul va afisa pe ecran semnul de copyright .
In general simbolul “&” marcheaza pentru browser faptul ca incepem descrierea unui caracter special .
Unul dintre cele mai folosite caractere speciale pentru HTML este spatiul ! In cazul in care in textul pe care dorim sa-l publicam in pagina noastra lasam un numar de 5 spatii intre doua cuvinte browser-ul va afisa doar un singur spatiu intre ele . Pentru a putea afisa mai multe spatii trebuie introdus caracterul special :

<body bgcolor="#FFFFFF"> Ceva ____ tare ____ ciudat. </body>

Rezultatul acestei comenzi va fi (nu se va tine cont de faptul ca exista mai multe spatii intre cuvinte):

Ceva tare ciudat.

Alte caractere speciale des utilizate ar include :
• ( spatiu )
• < ( < )
• > (>)
• & ( & )
• " (" )
Recapituland , pana in acest moment am vazut cum se poate crea o pagina utilizand tag-urile de baza : <HTML>, <Head>, <Title>, </Title>, </Head>, <Body>, </Body>, </HTML> ; am aflat cum sa controlam culoarea folosita pentru fundalul paginii , text , linkuri , linkuri active , linkuri vizitate , cum sa folosim o imagine ca fundal al paginii si cum sa configuram fontul folosit in ceea ce priveste tipul , culoarea si dimensiunea .
In continuare vom aborda alte tag-uri care aduc o imbunatatire controlului pe care il avem asupra continutului si prezentarii paginii noastre :
<b> si </b> ~ tag-urile transforma textul din cadrul sau in text bold ( ingrosat ) . In locul acestei perechi de tag-uri se poate folosi si perechea <strong> si </strong>
<i> si </i> ~ tag-urile transforma textul din cadrul sau in text italic ( cursiv ) . In locul acestei perechi de tag-uri se poate folosi si perechea <em> si </em>
<u> si </u> ~ tag-urile transforma textul din cadrul sau in text subliniat ( underlined )
<sup> si </sup> ~ tag-urile transforma textul in superscript
<sub> si </sub> ~ tag-urile transforma textul in subscript
<s> si </s> ~ tag-urile transforma textul in strike . In locul acestei perechi de tag-uri se poate folosi perechea <strike> si </strike>
<br> ~ tag-ul comanda trecerea la linie noua fara a incepe un nou paragraf ( = line break ) ; nu necesita tag de inchidere .

<p> ~ tag-ul comanda trecerea la un alt paragraf in cadrul paginii ; mai exact tag-ul comanda trecerea la linie noua si lasarea unei linii libere . Mai trebuie mentionat ca folosirea in serie a tag-ului : <p> <p> <p> nu va duce la lasarea libera a trei linii , browser-ul va interpreta tag-urile ca pe unul singur . Folosit sub aceasta forma tag-ul nu necesita si complementarul de inchidere . Vom vedea imediat ca in cazul folosirii unor atribute ale tag-ului va apare si necesitatea utilizarii tag-ului complementar de inchidere </p>
In cadrul tag-ului <p> se pot folosi atribute pentru alinierea textului la stanga ( pozitionarea default ) , la dreapta sau central .
De exemplu :
<p align="right">Acest text va fi aliniat la dreapta.</p>
..va produce :
Acest text va fi aliniat la dreapta

In cazul in dorim trecerea la o linie noua este obligatorie folosirea tag-ului , simpla utilizare a tastei ENTER in cadrul codului sursa al paginii noastre nu are nici un efect in cadrul browser-ului .
Pentru obtinerea mai multor linii libere se foloseste combinatia de mai multe tag-uri <br> :

<BODY BGCOLOR="#FFFFFF"> Tutorialul.ro
<BR>
<BR>
<BR>
<BR>
<BR> Invata HTML
</BODY>

Secventa de mai sus va duce la urmatorul rezultat in browser :

Tutorialul.ro

Invata HTML.

<BLOCKQUOTE> si </BLOCKQUOTE> ~ va pagina textul dintre tag-uri ca pe un citat ; mai explicit browser-ul va crea o margine libera in stanga si in dreapta textului :

<BODY BGCOLOR="#FFFFFF">
<BLOCKQUOTE> Text folosit pentru a ilustra capacitatile diferitelor taguri HTML . Textul va fi folosit pentru a ilustra paginarea cu ajutorul tagului BLOCKQUOTE si apoi cu ajutorul tagului de centrare a textului in cadrul liniilor
</BLOCKQUOTE>
</BODY>

Secventa de mai sus va avea ca rezultat urmatoarea paginare :

Text folosit pentru a ilustra capacitatile diferitelor taguri HTML . Textul va fi folosit pentru a ilustra paginarea cu ajutorul tagului BLOCKQUOTE si apoi cu ajutorul tagului de centrare a textului in cadrul liniilor

<center> si </center> ~ tag-urile centreza textul dintre ele la nivel de linie .
In cazul in care s-ar folosi tag-ul <center> :

<center> Text folosit pentru a ilustra capacitatile diferitelor taguri HTML . Textul va fi folosit pentru a ilustra paginarea cu ajutorul tagului BLOCKQUOTE si apoi su ajutorul tagului de centrare a textului in cadrul liniilor . </center>

s-ar obtine urmatoarea paginare :

Text folosit pentru a ilustra capacitatile diferitelor taguri HTML . Textul va fi folosit pentru a ilustra paginarea cu ajutorul tagului BLOCKQUOTE si apoi su ajutorul tagului de centrare a textului in cadrul liniilor .

<nb> ~ ( = non breaking space ) comanda introducerea unui spatiu in cadrul textului fara a duce la trecerea la alta linie . Nu se foloseste pentru introducerea unui spatiu in cadrul textului ci pentru a distanta imagini aflate pe aceeasi linie . Nu necesita tag de inchidere .

Observatie : Tag-urile de formatare a textului pot fi folosite si combinat pentru a obtine efectul dorit :

<center><b><i><u>Acum stiu cum se folosesc taguri HTML</u></i></b></center>

<hr> ~ (= horizontal rule ) este un tag foarte folosit in cadrul paginilor web . Comanda duce la trasarea unei linii orizontale de-a lungul paginii . Acest tag poate primi mai multe atribute ce pot configura pozitia , culoare , dimensiunea liniei .

<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=50%>
<HR WIDTH=100>
</BODY>

Prima comanda va trasa o linie orizontala cu lungimea de 50% din latimea paginii , de culoare albastra si centrata ; cea de-a doua instructiune va trasa o linie orizontala de 100 de pixeli . Tag-ul poate fi folosit si independent :
<hr>
ceea ce va duce la trasarea unei linii orizontale de lungul intregii pagini .

In cadrul tag-ului <HR> se pot folosi si atributele ALIGN , SIZE si NOSHADE :

<HR WIDTH=60% ALIGN=RIGHT>
<HR WIDTH=60% SIZE=8>
<HR WIDTH=60% SIZE=15 NOSHADE>

Rezultatul secventei de mai sus:

Atributul SIZE determina grosimea liniei iar NOSHADE face linia sa devina solida .

<PRE> si </PRE> ~ dupa cum am aratat mai sus browser-ul nu prezinta pagina exact sub forma sub care vedem textul in momentul realizarii codului sursa al paginii ; pentru acest neajuns exista o solutie sub forma utilizarii acestor tag-uri . Sa luam exemplu urmator :

<body> \|/ (@ @) +----oOO----(_)-----------+ | Tutorialul.ro | | Invata | | HTML | +-----------------oOO-----+ |__|__| || || ooO Ooo
</body>
Acest cod sursa va rezulta dupa afisare in urmatoarea forma:

\|/ (@ @) +----oOO----(_)-----------+ | Tutorialul.ro | | Invata | | HTML | +-----------------oOO-----+ |__|__| || || ooO Ooo

Simpla introducere a tagului <PRE> in sursa va afeca vizibil forma finala:

<body>
<pre> \|/ (@ @) +----oOO----(_)-----------+ | Tutorialul.ro | | Invata | | HTML | +-----------------oOO-----+ |__|__| || || ooO Ooo
</pre>
</body>

Va duce la afisarea urmatorului rezultat :
\|/ (@ @) +----oOO----(_)-----------+ | Tutorialul.ro | | Invata | | HTML | +-----------------oOO-----+ |__|__| || || ooO Ooo

Succes

Seteaza ca Favorit

Bookmark
Trimite Email
Hits: 4674

Comentarii (7)

Subscribe to this comment's feed

Serginho said:

Mai baga si la categoria HTML tutoriale...

Reporteaza Abuz

Displace

Apreciaza

aprilie 28, 2009 | url
Voturi: +0

FanX said:

nice

Reporteaza Abuz

Displace

Apreciaza

august 19, 2009 | url
Voturi: +0

bogdan b said:

Cu html-ul sunt novice... am prins si eu cateva notiuni. Ma interesa sa stiu intre ce taguri introduc un cod html astfel incat browserul sa nu-l recunoasca ca si cod si ca simplu text

Mersi

Reporteaza Abuz

Displace

Apreciaza

noiembrie 07, 2009 | url
Voturi: +0

bogdan b said:

Ti-am pus blogu la mine aici http://boitanflorin.blogspot.com/la sectiunea linkuri.
Vad ca stii ceva html ca ai implementari frumoase. Sunt si eu in faza de experimente, am stat ore intregi sa descoper cate o chichita.

Reporteaza Abuz

Displace

Apreciaza

noiembrie 07, 2009 | url
Voturi: +0

canisu said:

bun tutorialul .

Reporteaza Abuz

Displace

Apreciaza

ianuarie 24, 2010 | url
Voturi: +0

Dann said:

Daca creez o pagina html in notepad cum pot sa o urc pe internet sa apara cu o adresa http://www.nume.ro/ ca altfel apare asa file:///D:/Danyel/dan.html si de geaba am creeat-o
Va rog sa ma ajutati daca stiti cum.
Va multumesc!

Reporteaza Abuz

Displace

Apreciaza

martie 09, 2010
Voturi: +0

admin said:

Pai trebuie intai sa cumperi un domeniu : nume.ro apoi trebuie sa cumperi hosting pentru a pune site-ul online.

Reporteaza Abuz

Displace

Apreciaza

martie 09, 2010
Voturi: +1

Adauga un comentariu

Nume

Email

Website

Comentariu
Micsoreaza | Mareste

Aboneazate pe email (doar utilizatorii inregistrati)