Sunteți pe pagina 1din 40

Tema2:

INIIERENLIMBAJUL
HTML

CONINUT
1. Istoria dezvoltrii HTML
2. Elemente HTML
3. Structura documentului HTML
4. Elementele din antetul documentului HTML
5. Coninutul paginii tag-ul body
6. Titluri HTML
7. Paragrafe n HTML
8. Creare aliniate
9. Formatarea textului
10. Separarea coninutului
11. Hiper-texte i referine

3SINONIME,ASOCIERI

Limbaj de marcare

ISTORIADEZVOLTRIIHTML

HTML (Hyper Text Markup Language) - un limbaj utilizat


pentru descrierea paginilor web
HTML nu este un limbaj de programare, ci unul de
marcare

Un limbaj de marcare (sau etichetare) reprezint o mulime


de etichete / tag-uri de marcare
Limbajul HTML utilizeaz set-ul de tag-uri de marcare pentru
a descrie paginile web
Un tag este un cuvnt sau o scurt descriere care
eticheteaz o informaie, uurnd regsirea acesteia
Tag-urile de marcare HTML se numesc simplu tag-uri HTML

Un document HTML descrie o pagina web i conine


tag-uri HTML i text simplu
Un browser nu afieaz tag-urile HTML, dar utilizeaz
tag-urile dintr-un document HTML pentru a le
interpreta n coninutul unei pagini web, pe care o
afieaz ntr-o form neleas de om

CREAREADOCUMENTELORHTML
Pentru

a crea documente HTML este


suficient cel mai simplu editor de texte
de exemplu Note-pad (sau Note-pad++) care este comod i simplu de utilizat n
descrierea paginilor web
Profesionitii utilizeaz adesea (nu
totdeauna!) editoare speciale HTML,
precum Macromedia DreamWeaver
Acesta trebuie instalat preventiv pe PC,
pentru a fi posibila descrierea paginilor
web.

PAIIPENTRUGENERAREAUNEIPAGINI
WEB
Se deschide editorul (de exemplu NotePad)
Se creaz documentul HTML
Se salveaz documentul specificnd numele i
extensia

1.
2.
3.

Orice fisier care descrie coninutul unei pagini web are


un nume i o extensie
Extensia caracterizeaz tipul fiierului. Fiierele HTML
au extensia .html sau .htm

Se nchide fiierul
Se lanseaz browserul i n bara de adrese se
scrie numele fiierului html, specificnd i calea
ctre fiier

4.
5.

Pentru vizualizarea rezultatului descrierii paginilor web


este suficient un navigator internet

VERSIUNI HTML
Versiunea

Anul apariiei

HTML

1991

HTML+

1993

HTML 2.0

1995

HTML 3.2

1997

HTML 4.01

1999

XHTML

2000

HTML5

2012

ELEMENTEHTML

Un document HTML se definete folosind elemente HTML


Elementele HTML sunt formate dintr-un tag de deschidere
(tag de nceput) i un tag de nchidere (tag de sfrit)
ntre tag-ul de nceput i cel de sfrit se amplaseaz
coninutul elementului HTML
Exemplu: <tag_nceput atribute> Coninut </tag_sfrit
>
</
Unele elemente HTML pot s nu posede coninut

Exemplu de element vid: eticheta pentru trecerea din rnd nou


Elementele vide se nchid chiar n tag-ul de nceput (obligatoriu
ncepnd cu versiunea XHTML)

Sunt multe elemente HTML care posed atribute sau pot fi


formate din alte elemente HTML

Atributele furnizeaz informaii suplimentare despre un


element
Atributele sunt ntotdeauna specificate n eticheta de start

ELEMENTEHTML

Denumirile tuturor tag-urilor sunt incluse ntre <>,


<>
tag-ul de sfrit avnd dup semnul < simbolul /
<p> Salut!</p> - exemplu de tag cu coninut
<br /> - exemplu tag fr coninut
Unele browsere afieaz coninutul chiar dac
lipsete tag-ul de nchidere, dar nu toate!!!
n versiunea 5 este obligatoriu ca toate elementele
s fie n pereche tag de deschidere i tag de
nchidere
Tag-urile HTML nu sunt case-senzitive!
n versiunea HTML5 au aprut noi elemente din
domeniul multimedia:
pentru inserarea sunetelor, secvenelor audio, video
elemente noi specifice controalelor din formularele
HTML i elemente utilizate n definirea structurii
paginii web
De asemenea din versiunea 5 au disprut unele
elemente prezente n versiunea 4.01

STRUCTURADEBAZADOCUMENTULUI
HTML

ADUGRI N STRUCTURA DE BAZ

n ultimele versiuni HTML (dup 4.01) n structura de


baz a unui document HTML s-a adugat i elementul
<!DOCTYPE>, naintea tag-ului html
Acest element este necesar browsere-lor pentru a afia
corect pagina web
El specific versiunea HTML-ului n care a fost definit
pagina
Nu este un tag!
n versiunea 5 structura de baz va fi:
<!DOCTYPEhtml>
<html>
<head><title>Titlul documentului</title></head>
<body>
Coninutul documentului HTML

</body>
</html>

CAPULDOCUMENTULUIHTML
Elementul <Head> este un container pentru
alte elemente amplasate n antetul
documentului
Elementele din interiorul tag-ului <head> pot
include script-uri, instruciuni pentru browser
n cazul n care trebuie gsite foile de stil, s
furnizeze informaii de tip metadate etc.

Tag-urile care pot fi inserate n seciunea


<head> sunt: <title>, <style>, <meta>,
<link>, <script>, <noscript> i <base>

ELEMENTELEDINTAGulHEAD
<title> - se utilizeaz pentru specificarea titlului
documentului
<head>
<title>Titlul documentului</title>
</head>
Exemplu:
<head>
<title>Informatii referitoare la domnitorul Stefan cel
Mare</title>
</head>

Rezultat:

ELEMENTELEDINTAGulHEAD.II

Tag-ul <base> - specific URL-ul/calea de baz


pentru alte URL-uri relative din pagina curent
Tag-ul <meta> - furnizeaz metadate despre un
careva document HTML. Metadatele nu vor fi afiate
pe pagina, dar vor fi utilizate i prelucrate de maini

Metadatele reprezint date (informaii) despre date

Elementul <meta> este utilizat, de obicei, pentru a


specifica cuvintele cheie, care descriu pagina, autorul
documentului, data ultimei modificri etc.
Metadatele pot fi utilizate de browsere, motoare de
cutare (keywords) sau alte servicii web

Exemple:
<meta name="keywords" content=flori, cactus, orhidee">
<meta name="description" content="Flori de camera">
<meta name="author" content=Cutrescu NeluGheorghe">

PS: name, content sunt atributele tag-ului <meta>


Atributul poate lua mai multe valori

TAGulBODY

Tag-ul <body> este utilizat pentru a defini coninutul corpului


paginii
Tag-ul body este un element care conine restul elementelor
ce definesc coninutul paginii: text, imagini, tabele, hyperlinkuri etc.
Poate dispune de mai multe atribute, care deja nu mai sunt
suportate de HTML5:
Atributul

Descrierea

alink

Specific culoarea a link-ului activ din document

link

Specific culoarea a link-ului nevizitat din document

vlink

Specific culoarea a link-ului vizitat deja din document

background

Specific imaginea de fond a documentului

bgcolor

Specific culoarea de fond a documentului

text

Specific culoarea textului din document

AtributulALINK,LINK,VLINK

Forma general:

<body alink=denumire_culoare|culoare_baza_16|numr_rgb">
<body link="denumire_culoare|culoare_baza_16|numr_rgb ">
<body vlink="denumire_culoare|culoare_baza_16|numr_rgb">

Valoare

Descriere

denumire_culoa Specific culoarea link-ului utiliznd denumirea culorii (aqua,


black, fuchsia, gray, green, lime, maroon, navy, olive,
re
purple, red, silver, white, yellow etc.)

culoare_baza_1 Specific culoarea link-ului utiliznd codul hexazecimal


(#00FF00, "#ff0000). Se pot defini astfel 65536 de culori
6
numr_rgb

Specific culoarea link-ului utiliznd codul rgb


("rgb(255,0,0)")

CULORINHTML
Culoarea

Culoare n baza 16 Culoare RGB


#000000

rgb(0,0,0)

#FF0000

rgb(255,0,0)

#00FF00

rgb(0,255,0)

#0000FF

rgb(0,0,255)

#FFFF00

rgb(255,255,0)

#00FFFF

rgb(0,255,255)

#FF00FF

rgb(255,0,255)

#C0C0C0

rgb(192,192,192)

#FFFFFF

rgb(255,255,255)

Alte exemple de culori vezi: http://www.w3schools.com/html/html_colors.a


http://www.stm.dp.ua/web-design/color-html.php

EXEMPLUUTILIZAREATRIBUTE
ALINK,LINK,VLINK

OBS: Implicit, n toate browserele linkurile vor avea culoarea:


Albastr dac nc nu au fost accesate
Violet dac a fost vizitat
Roie pentru link-urile active
Exemplu:
<body alink="green" link="yellow" vlink="red">
<p>"Fost-au acest </p>
<a href="stefan.jpg">Vezi poza domnitorului</a>
<br />
<a
href="http://ro.wikipedia.org/wiki/&#350tefan_cel_Mare">
Detalii
despre domnitor gasesti aici</a>
</body>

EXEMPLUUTILIZAREATRIBUT
BGCOLORiTEXT
<body bgcolor="pink" text="green">

<h1>&#350tefan cel Mare si Sfant</h1>


<p>"Fost-au acest Stefan, om nu mare la statu,
manios,si
degraba a varsa sange nevinovat..."</p>
<hr />
</body>
Rezultat:

EXEMPLUUTILIZAREATRIBUT
BACKGROUNDITEXT

<body background="fon.jpg"
text="blue">

TITLURIHTML
Titlurile HTML se definesc
cu tag-urile <h1>...<h6>
Exemplu:

<!DOCTYPE html>
<html>
<body>
<h1>Titlu
<h2>Titlu
<h3>Titlu
<h4>Titlu
<h5>Titlu
<h6>Titlu

</body>
</html>
Rezultat:

de
de
de
de
de
de

nivel
nivel
nivel
nivel
nivel
nivel

1</h1>
2</h2>
3</h3>
4</h4>
5</h5>
6</h6>

PARAGRAFENHTML
Paragrafele n HTML se definesc cu tag-ul <p>.
Exemplu:
<!DOCTYPE html>
<html>
<body>
<p>"Fost-au acest Stefan, om nu mare la statu, manios, si degraba a varsa sange
nevinovat: de multe ori, la ospete omoraia fara giudet. Amintrelea era om intreg
la fire, nelenesu si lucrul sau stia a-l acoperi si unde nu gandeai, acolo il aflai. La
lucruri de razboaie mester, unde era nevoie, insusi se varaia ca vazandu-l ai sai sa
nu indarapteze si pentru aceia raru razboiu de nu-l biruia si unde-l biruiau altii nu
pierdea nadejdea ca stiindu-se cadzut gios se ridica deasupra biruitorilor.</p>
<p>Mai apoi, dupa moartea lui si fiul sau, Bogdan-voda, urma lui luase de lucruri
vitejasti cum se tampla: den pom bun roade bune or sa iasa."</p>
</body>
</html>
Rezultat:

CREAREALINIATENHTML

Pentru a trece forat din aliniat, rand nou, se folosete tagul <br>. Acest tag nu are coninut i de aceea, n ultimele
versiuni, tag-ul de deschidere conine i elementul de
nchidere <br />

Exemplu:
<!DOCTYPE html>
<html>
<body>
<p>"Fost-au acest Stefan, om nu mare la statu, manios, si degraba a
varsa sange nevinovat: de multe ori, la ospete omoraia fara giudet.
Amintrelea era om intreg la fire, nelenesu si lucrul sau stia a-l acoperi
si unde nu gandeai, acolo il aflai. La lucruri de razboaie mester, unde
era nevoie, insusi se varaia ca vazandu-l ai sai sa nu indarapteze si
pentru aceia raru razboiu de nu-l biruia si unde-l biruiau altii nu
pierdea nadejdea ca stiindu-se cadzut gios se ridica deasupra
biruitorilor.
<br />Mai apoi, dupa moartea lui si fiul sau, Bogdan-voda, urma lui
luase de lucruri vitejasti cum se tampla: den pom bun roade bune or
sa iasa."</p>

</body>
</html>

AFIAREATEXTULUIPREFORMATAT
Pentru a afia un text pre-formatat se utilizeaz tag-ul
pre
Este un tag-pereche, cu urmtoarea sintax:
<pre>Continut</pre>
Textul ncadrat n elementul <pre> va fi afiat ntr-o
form predefinit: font cu lime fix - de obicei
Courier, pstrndu-se spaiile i trecerile din rnd nou
Este suportat de toate browserele cunoscute
Recomandare: Nu exagerai n utilizarea tag-ului pre
Posed atributul width pentru a specifica numrul
maxim de caractere dintr-o linie, care nu mai este
suportat n HTML5 (recomandndu-se utilizarea
stilurilor)

EXEMPLUUTILIZARETAGPRE

<p>Despre pisici...</p>
<pre>Cei care au pisici se vad pe ei insisi ca pe un fel de parinti ai pisicilor,
de vreme ce le poarta de grija, le alinta si le vorbesc. Pisicile, insa, sunt departe de a-si
vedea stapanii ca pe niste parinti: viziunea lor despre oamenii cu care impart locuinta
este
cu totul diferita.
Dupa opinia dr. John Bradshaw, autorul unei carti numite Cat Sense, pisica nu-si vede
stapanul
ca pe un parinte, ci ca pe o alta pisica, mult mai mare si neamenintatoare.
</pre>

TAGULFONT

Acest tag nu mai este suportat n versiunea HTML5,


recomandndu-se utilizarea stilurilor
Este utilizat pentru a specifica tipul font-ului, culoarea i
mrimea textului ncadrat n tag-ul font
Este un element pereche, avnd tag de nceput i sfrit
Sintaxa: <font atribut=valoare>Continut</font>
Este suportat de toate browserele cunoscute
Exemplu:

<h1 align="center"><font color="red">Luceafarul</font></h1>


<font face="verdana" color="green" size="12px">A fost odata ca-n
povesti<br />
A fost ca niciodata...</font>

FORMATAREATEXTULUI
Sunt mai multe tag-uri care pot fi utilizate pentru formatarea
textului, cele mai utilizate:
<b>

- pentru scriere ngroat

<i>

- pentru scriere inclinata

<small>

-pentru scrierea textului mrunt

<strong>

- pentru evidenierea textului important

<sup>

- pentru a scrie text de tip superscript

<sub>

- pentru a scrie text de tip subscript

<ins>

- pentru a scrie textul care va fi inserat n text

<del>

- pentru a tia textul

<mark>

- pentru a evidenia cu culoare o poriune de text

EXEMPLUFORMATARE
<!DOCTYPE html>
<html>
<body>
<p>"Fost-au acest <b>Stefan</b>, <ins>om nu mare la statu, manios,</ins> si
degraba a <del>varsa</del> sange nevinovat: de multe ori, <mark>la ospete
omoraia fara giudet</mark>. Amintrelea era om <i>intreg la fire, nelenesu si
lucrul sau stia a-l acoperi si unde nu gandeai, acolo il aflai</i>. La lucruri de
razboaie mester, unde era nevoie, insusi se varaia ca vazandu-l ai sai sa nu
indarapteze si pentru aceia raru razboiu de nu-l biruia si unde-l biruiau altii nu
pierdea nadejdea ca <strong>stiindu-se cadzut gios se ridica deasupra
biruitorilor</strong>. <br /><small>Mai apoi, dupa moartea lui si fiul sau,
Bogdan-voda, urma lui luase de lucruri vitejasti cum se tampla: den pom bun
roade bune or sa iasa.</small>"</p>

</body>
</html>

EXEMPLUFORMATARE.II

Exemplu pentru <del> i <ins>:

<!DOCTYPE html>
<html>
<body>
<p>Imi plac <del>cactusii</del>
<ins>orhideele</ins>!</p>
</body>
</html>
Rezultat:

SEPARAREACONINUTULUI

Pentru a trasa o linie pe pagin sau n versiunea 5


pentru a separa contextul se utilizeaz tag-ul <hr>.
Acest tag nu are coninut, de aceea, ncepnd cu
versiunea 5, se recomand s se nchid chiar din
start <hr />
Exemplu:

HIPERTEXTEIREFERINE
Referinele sunt prezente aproape n orice
pagin web i permit efectuarea salturilor
ntr-o pagin sau salturi la alte pagini web
Referina reprezint marcajul locului de unde
se poate efectua trecerea la un alt document
sau la o alt locaie din documentul curent
n calitate de link/hyperlink poate servi un
cuvnt, un grup de cuvinte, o imagine
Un loc marcat mai este denumitancorare
Pentru a defini link-uri n HTML se utilizeaz
tag-ul <a>, a provenind de la anchor

FORMAGENERAL.ATRIBUTULHREF

Tag-ul <a> are atributul href, folosit pentru a specifica


calea/destinaia link-lui
Atributul href este suportat de toate browserele
Pentru a insera un link elementar n codurile HTML se
va scrie
<a href="url">Textul link-ului</a>
Valori posibile pentru url:

O adres URL absolut, care specific o resurs extern, un alt


site web: href=http://ro.wikipedia.org/wiki/Stefan_cel_Mare
O adres URL relativ, care specific un fiier de pe site-ul
curent: href="stefan.jpg")
Legtura cu un element din aceeai pagin, specificat prin id
(sau name): href=#top
Alte protocoale: ftp://, mailto:, file:, etc..)

<a href="mailto:cineva@mail.com>e-mail</a>

Un script: href="javascript:alert('Hello');")

ATRIBUTULHREF

Dac nu este prezent atributul href, n interiorul tagului <a>, nu va fi accesibil link-ul!!!
Exemplu:

<!DOCTYPE html>
<html>
<head><title>Informatii referitoare la domnitorul Stefan cel
Mare</title></head>
<body>
<p>"Fost-au acest Stefan om nu mare la statu</p>
<a href="stefan.jpg">Vezi poza domnitorului</a>
<br />
<a href="http://ro.wikipedia.org/wiki/
%C8%98tefan_cel_Mare">Detalii despre domnitor gasesti aici</a>
</body>
</html>

ATRIBUTULNAME,atagului<a>

In multe cazuri este nevoie s se creeze legturi ntre


seciunile aceluiai document (de exemplu, atunci cnd
documentul este o carte, un tutorial sau un curs se poate
crea un cuprins pentru fiecare capitol al documentului)
Pentru crearea legturilor interne se utilizeaz atributul
name (sau id), care stabilete un cuvnt cheiece
identifica unic paragraful int
Este suportat de majoritatea browsere-lor

Forma general:

<a name="cuvant_cheie">

Paragraf_inta </a>

Acest atribut nu mai este utilizat n HTML5, fiind


nlocuit cu atributul global id

<a id="cuvant_cheie"> Paragraf_inta </a>

Ancora se va scrie astfel: <a href=#cuvant_cheie"> Text


explicativ </a>

EXEMPLU,atributulname,taga
<html>
<head><title>Pagina principala</title></head>
<body>
<a href="#p1">Adrese IP</a><br />
<a href="#p2">Adrese IP locale</a>
<h4><a name="p1">Adrese IP</a></h4>
<p>Adresa IP reprezinta un identificator al unui calculator sau dispozitiv dintr-o retea TCP/IP.
Retelele care utilizeaza suita de protocoale TCP/IP routeaza mesajele (pachetele) pe baza
adresei IP de destinatie.</p>
<p><b>Fiecare dintre cele 4 campuri este de 8 biti (1 octet), deci poate lua valori cuprinse
intre 0 si 255.</b></p>
<p>Alocarea domeniilor de adrese (ID-uri de Retea) se face de catre o autoritate globala - The
Internet Assigned Numbers Authority (IANA) <a href="http://www.iana.org/assignments/ipv4address-space" target="_blank">Pentru detalii apasa aici...</a> <br>Alocarea adreselor de
Gazda (ID-uri de Gazda) se face de catre administratorul retelei respectivei organizatii</p>
<br /> <br /> <br />
<h4><a name="p2">Adrese IP locale</a></h4>
<p>In interiorul unei retele izolate, alocarea adreselor IP se poate face aleator, cu conditia ca
fiecare sa fie unica in cadrul respectivei retele. Dar conectarea acestei retele locale la Internet
va necesita utilizarea de adrese IP inregistrate (denumite adrese de Internet) pentru a evita
adrese duplicate. <br />Adresele IP locale (Internal IP Address), pot fi garantate ca fiind unice,
deoarece garantat nu sunt utilizate in alta parte in Internet. </p>
<br /><br /><br /><br /><a href="poza.html">Inserare link</a>
</body>
</html>

ALTEATRIBUTEALETAGului<A>

Implicit atunci cnd se face click pe un link resursa se


deschide n acelai tab
Pentru a specifica unde s se deschid resursa,
accesat prin intermediul link-ului, se va utiliza
atributul target
Acest atribut este suportat de majoritatea browsere-lor
web
Forma general: <a target="_blank|_self|_parent|_top|
framename">

Valoarea

Descrierea

_blank

Deschide documentul ancorat ntr-o nou fereastr sau


tab

_self

ncarc pagina in cadrul curent; este valoarea implicit

_parent

ncarc pagina n fereastra printe

_top

ncarc pagina ntr-o fereastr nou, deasupra altor


ferestre de pe ecran (pe tot ecranul)

ALTEATRIBUTEALETAGului<A>.II

Download descarc fiierul cnd se face click pe


link, fr a naviga spre el

Nu este suportat de toate browserele (IE)


Exemplu: <ahref="/imagini/stefan.jpg"download>

Hreflang se utilizeaz pentru a specifica n link


limba documentului

Este suportat de toate browserele


Acest atribut absolut de loc nu este obligatoriu, fiind
doar informativ
Forma general: <a hreflang="cod_limb">
Cod_limba va corespunde codurilor limbilor conform
standardelor ISO. Cteva exemple:

En englez, mo limba moldoveneasc, ro limba


romn, ru limba rus, etc.

CODURIICARACTERESPECIALEN
HTML

Detalii vezi dnd cutare cu expresia specials


codes and characters in HTML
Codurile diacriticelor romneti:

- &#258
- &#259
- &Icirc
- &icirc
- &#350
- &#351
- &#354
- &#355
- &Acirc

- &acirc;

EXEMPLUUTILIZARECARACTERE
SPECIALE

<p>Despre pisici...</p>
<pre>Cei care au pisici se v&#259d pe ei
&icircn&#351i&#351i ca pe un fel de
p&#259rin&#355i ai pisicilor, </pre>
Rezultat:

!!!
3

noiuni importante nvate


azi
2 ntrebri/neclariti care au
aprut
1 sugestie pentru tema
urmtoare

S-ar putea să vă placă și