Tutorial HTML
BackNext
Tag-urile HTML de baza
Cele mai importante tag-uri in HTML sunt tag-urile care definesc
· antelele (headings)
· paragrafe (paragraphs)
· trecerea fortata la rand nou (line breaks).
Tag Descriere
<html> Defineste un document HTML
<body> Defineste corpul documentului HTML
<h1> to <h6> Defineste antetul 1 la 6
<p> Defineste un paragraf
<br> Sare la rând nou
<hr> Defineste o linie orizontala
<!--> Defineste un comentariu
Headings
Headings sunt definite cu tag-urile <h1> pana la <h6> tags. <h1> defineste cel mai
important heading. <h6> defineste cel mai “mic” heading.
<h1>Acesta e un antet</h1>
<h2> Acesta e un antet </h2>
<h3> Acesta e un antet </h3>
<h4> Acesta e un antet </h4>
<h5> Acesta e un antet </h5>
<h6> Acesta e un antet </h6>
Observatie: Se adaduga automat de catre HTML un rând liber înainte si dupa declararea unui
heading.
Paragrafe
Paragrafele sunt definite cu ajutorul tagului <p>.
<p>Un paragraf</p>
<p>Alt paragraf</p>
<p>Bala, bla, bla</p>
Observatie: Se adaduga automat de catre HTML un rând liber înainte si dupa declararea unui
paragraf.
Rând nou
Pentru a forta trecerea la rand nou fara inceperea unui paragraf nou se utilizeaza tag-ul <br>
<p>Acesta <br> este un para<br>graf cu tre<br>cere fortata la rand nou</p><p>
aici incepe un nou paragraf</p>
Observatie:
Tag-ul <br> nu are un tag de închidere.
Acum se foloseste <br />
Comentarii in HTML
Pentru a insera un comentariu se foloseste tag-ul <!….>
<!—Un comentariu destept-->
Observatie:
Important este doar semnul exclamarii si este necesar doar dupa deschiderea parantezei
unghiulare! Comentariul nu este afisat de catre browser dar câteodata este bine sa-l folosim
pentru lizibilitatea codului.
Vizualizarea sursei unui document HTML
Acest lucru se poate face in doua moduri:
1. Din meniul broweser-ului utilizand meniul View -> Source
2. Cu click dreapta in fereastra browser-ului si apoi View Source
Exemple
1. Centrarea unui heading în pagina:
<html>
<body>
<h1 align="center">Acesta e un heading 1</h1>
<p>Heading-ul de sus este aliniat centrat.
Heading-ul de sus este aliniat centrat.
Heading-ul de sus este aliniat centrat.</p>
</body>
</html>
2. Linie orizontala
<html>
<body>
<p>Tag-ul hr defineste o linie orizontal:</p>
<hr>
<p>un paragraf</p>
<hr>
<p>alta minune</p>
<hr>
<p>un nou paragraf</p>
</body>
</html>
3. Culoarea de fundal pentru pagina:
<html>
<body bgcolor="red">
<h2>Folosesc un heading de 2 dar nu pentru a scrie ceva bold!!!!!</h2>
</body>
</html>
Tag-uri pentru formatarea textului
Tag Descriere
<b> Defineste text bold
<big> Defineste text text bold
<em> Defineste text italic
<i> Defineste text italic
<small> Defineste text mic
<strong> Defineste text ingrosat
<sub> Defineste text scris la index (subscript)
<sup> Defineste text scris la putere (superscript)
<ins> Defineste text inserat
<del> Defineste text sters
<s> Nu se mai utilizeaza. Se foloseste<del>
<strike> Nu se mai utilizeaza. Se foloseste <del>
Tag-uri pentru "Computer Output"
<code> Defineste cod text
<kbd> Defineste un text de tastatura
<samp> Defineste un exemplu de cod
<tt> Defineste text teletype
<var> Defineste o variabila
<pre> Defineste un text preforamatat în sursa
<listing> Nu se mai utilizeaza. Se foloseste <pre>
<plaintext> Nu se mai utilizeaza. Se foloseste<pre>
<xmp> Nu se mai utilizeaza. Se foloseste Use <pre>
Tag-uri pentru citari, indentari si definiri
<abbr> Defineste o abreviere
<acronym> Defineste un acronim
<address> Defineste un element HTML de tip adresa
<bdo> Defineste directia de afisare a textului
<blockquote> Defineste o indentare
<cite> Defineste o citare
<dfn> Defineste un element HTML de tip definitie
Caractere speciale
Unele caractere cum ar fi < au în HTML un rol special si de acceea nu pot fi folosite în cadrul
textului. Pentru a putea totusi utiliza semnul “ mai mic ca” vom folosi entitatile de caractere
(caractere speciale)
Caracterul special are trei parti:
1. începe cu &
2. nume sau un numar precedat de semnul #
3. la final au semnul (;).
Exemplu:
<p> Acesta este semnul mai mic: <</p>
<p> Acesta este semnul mai mic: <</p>
Observatie: Caracterele speciale sunt “case sensitive”.
Caracterele speciale cele mai des utilizate:
non-breaking space  
< mai mic ca < <
> mai mare ca > >
& ampersand & &
" ghilimele " "
' apostrof ' '
¢ cent ¢ ¢
£ lira £ £
¥ yen ¥ ¥
§ sectiune § §
© copyright © ©
® marca inregistrata ® ®
× înmultire × ×
÷ împartire ÷ ÷
Exemple diverse:
1. Formatarea textului
<html>
<body>
<b>text bold</b>
<br>
<strong>
text strong
</strong>
<br>
<big>
text big
</big>
<br>
<em>
text emphasized
</em>
<br>
<i>
text italic
</i>
<br>
<small>
text small
</small>
<br>text
<sub>
subscript
</sub>
<br>
text
<sup>
superscript
</sup>
</body>
</html>
2.Preformatarea textului
<html>
<body>
<pre>
Textulmeu
este preformatat.
In cadrul
preformatarii pot folosi mai multe spatii.
</pre>
<p>Cu acest tag s-ar pute scrie bine cod:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
3. Scrierea unui program
<html>
<body>
<code>Computer code</code>
<br>
<kbd>introducere de la tastatura</kbd>
<br>
<tt>text teletype </tt>
<br>
<samp> text sample</samp>
<br>
<var> variabla</var>
<br>
<p>
<b>Nota:</b> Aceste tag-uri se utilizeaza foarte de pentru a afisa
programe (cod).
</p>
</body>
</html>
3. Inserarea unei adrese
<html>
<body>
<address>
Radu Cretulescu<br>
Sala IE 107<br>
Catedra de Calculatoare si Automatizari<br>
ULBS
</address>
</body>
</html>
4. Acronime si abrevieri
<html>
<body>
<abbr title="Uniunea Europeana">EU</abbr>
<br>
<acronym title="World Wide Web">WWW</acronym>
<p>La tag-ul de acronim atributul title afiseaza un hint cand userul trece
cu mouse-ul peste acronim in text</p>
<p>functioneaza doar de la IE 5 </p>
</body>
</html>
5. Text inserat si text sters
<html>
<body>
<p>
corectam un text
<del>cuvant sters</del>
<ins>se inlocuieste cu</ins>
bla, bla
</p>
<p>
Browserele mai vechi afiseaza aceste tag-uri ca text simplu
</p>
</body>
</html>