Sunteți pe pagina 1din 17

Curs HTML

Introducere
HTML (HyperText Markup Language) este
un limbaj utilizat pentru crearea paginilor
web ce pot fi afisate intr-un browser (sau
navigator).
HTML este folosit pentru prezentarea unui
continut (text, imagine) intr-o pagina web,
furnizeaza mijloacele prin care continutul
unui document poate fi structurat si
adnotat cu diverse tipuri de metadate si
indicatii de redare si afisare. Aceste
indicatiile pot varia de la decoratiuni
minore ale textului, cum ar fi culoarea sau
sublinierea unui cuvant ori introducerea
unei imagini, pana la adaugarea de

Principalele elemente HTML


Ce este HTML? (Hypertext Markup Language)
- Este un set de coduri logice.
Codurile sunt scrise intre "<"(paranteza
deschisa)si ">"(paranteza inchisa), cu toate ca
nu sunt chiar paranteze, aa se numesc si arata
aa:< >.
Exemplu: <BODY>sau<FONT>
Cele mai multe elemente (numite si tag-uri) au un
element (tag) de deschidere si un element de
nchidere distins prin "/" in interiorul parantezei
deschise "<".
Exemplu:<FONT> ... </FONT>

Structura documentului HTML


<html>
<head>
<title>Titlu Documentului</title>
</head>
<body>
Continutul paginii
</body>
</html>
In HEAD se poate adauga titlul paginii web si alte
elemente numite metatag-uri, precum si scripturi
JavaScript si stil-uri CSS. In BODY se adauga continutul
documentului care va fi afisat in pagina web.

Structura generala a unui document HTML

<HTML>
<HEAD>Acesta are si el mai multe sub-elemente:
<TITLE>Aici se scrie titlul documentului, cat mai sugestiv, si se ncheie
cu</TITLE>
<BASE>Poate fi folosit pentru a nregistra locaia documentului in forma
URL. (Necesar daca documentul nu este accesat in locaia lui originala). Se
ncheie cu</BASE>
<LINK>Indica o relaie dintre document si alte obiecte de pe WEB. Se
ncheie cu</LINK>
<META> Aici sunt scrise informaii cum ar fi tastatura (limbaj) folosita,
descrierea si cuvinte cheie care pot fi gsite de motoarele de cutare. Se
ncheie cu</META>
<SCRIPT>Conine oricare din JavaScript sau VB Script. Se ncheie
cu</SCRIPT>
<STYLE>Conine informaii privind stilul, grafica informaiilor care vor
aprea pe pagina. Se ncheie cu</STYLE>
Aici se ncheie elementele adaugate in HEAD
</HEAD>
<BODY>Etichetele HTML si continutul documentului care va fi afisat in
pagina web sunt incluse in acest element. Aici pot fi puse si elemente cum ar
fi:<SCRIPT> </SCRIPT>
Se ncheie cu
</BODY>
</HTML>

Elementul BODY
Culoarea fondului paginii
se adauga in eticheta <BODY> cu
atributulBGCOLOR.

<body bgcolor=blue"></body>
Culoarea textului
AtributulTEXTcontroleaza culoarea textului
normal din document.
Exemplu:<body

bgcolor=blue"text=red"></body>

Folosirea unei imagini ca fond


pentru pagina (background)
fondului paginii poate fi inlocuit cu o
imagine (Background image).
Ex: <body background="imagine.gif"
bgcolor="#ffffff"></body>
fondul pagini va fi dat de imaginea
fisierului "imagine.gif" si de asemenea
am setat BGCOLOR astfel incat in timpul
procesului de ncarcare a imaginii
culoarea fondului va fi alba.

Titluri <Hx> ... </Hx>


Etichete - <Hx>, (headings) unde 'x' este un numar intre 1 si 6.
Cod HTMLCum apare in pagina<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>

Paragraf <p> ... </p>

- Defineste o diviziune a documentului


Cod HTML

<html>
<head>
<title>Titlu
documentului</titl
e>
</head>
<body>
<p>Paragraf
1</p>
<p>Paragraf
2</p>
<p>Paragraf
3</p>

Alinierea paragrafelor
Definire:
<p align =left|right|center
|justify>
Text
.

</p>

Linie orizontala
<HR size =n color=culoare
width= n>
</HR>

Stiluri fizice de marcare


pentru text

<b> Scris ingrosat</b>


<i> scris italic</i>
<u> scris subliniat</u>
<sub> scris subscript sau indice
inferior</sub>
<sup> superscript sau scris la
exponent</sup>
Combinatii
<i><b> text </i></b>

Liste neordonate
<ul>
<li> Primul element
<li> Al doilea element
<li> Al treilea element
</ul>
Atribute pentru elementele listei
circle
afiseaza un cerc in fata elementului
disc
afiseaza un disc
square afiseaza un patrat

<li type =valoare > primul element</li>

Liste ordonate
<ol>

<li> Primul element

<li> Al doilea element

<li> Al treilea element


</ol>
Atribute pentru elementele listei

i,I
numerotare cu I, ii.

a, A
numerotare cu a, b.

1
numerotare cu 1, 2

<li type =valoare > primul element</li>

Mai jos puteti vedea exemplu.<html>


<head>
<title>titlu documentului</title>
</head>
<body>
<ul>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ul>
</body>
</html>

Link-uri

Pot fi:
Interne - catre acelasi document
Locale la alte documente din calculator, folder
Indepartate- la pagini din internet

<a href =cale catre fisier> nume


text
</a>
<a href="url" title="Titlu link">Nume
</a>

linkuri
<a >