Documente Academic
Documente Profesional
Documente Cultură
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
CREAREADOCUMENTELORHTML
Pentru
PAIIPENTRUGENERAREAUNEIPAGINI
WEB
Se deschide editorul (de exemplu NotePad)
Se creaz documentul HTML
Se salveaz documentul specificnd numele i
extensia
1.
2.
3.
Se nchide fiierul
Se lanseaz browserul i n bara de adrese se
scrie numele fiierului html, specificnd i calea
ctre fiier
4.
5.
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
ELEMENTEHTML
STRUCTURADEBAZADOCUMENTULUI
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.
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
Exemple:
<meta name="keywords" content=flori, cactus, orhidee">
<meta name="description" content="Flori de camera">
<meta name="author" content=Cutrescu NeluGheorghe">
TAGulBODY
Descrierea
alink
link
vlink
background
bgcolor
text
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
CULORINHTML
Culoarea
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)
EXEMPLUUTILIZAREATRIBUTE
ALINK,LINK,VLINK
EXEMPLUUTILIZAREATRIBUT
BGCOLORiTEXT
<body bgcolor="pink" text="green">
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
FORMATAREATEXTULUI
Sunt mai multe tag-uri care pot fi utilizate pentru formatarea
textului, cele mai utilizate:
<b>
<i>
<small>
<strong>
<sup>
<sub>
<ins>
<del>
<mark>
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
<!DOCTYPE html>
<html>
<body>
<p>Imi plac <del>cactusii</del>
<ins>orhideele</ins>!</p>
</body>
</html>
Rezultat:
SEPARAREACONINUTULUI
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
<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>
Forma general:
<a name="cuvant_cheie">
Paragraf_inta </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>
Valoarea
Descrierea
_blank
_self
_parent
_top
ALTEATRIBUTEALETAGului<A>.II
CODURIICARACTERESPECIALEN
HTML
- Ă
- ă
- Î
- î
- Ş
- ş
- Ţ
- ţ
- Â
- â
EXEMPLUUTILIZARECARACTERE
SPECIALE
<p>Despre pisici...</p>
<pre>Cei care au pisici se văd pe ei
înşişi ca pe un fel de
părinţi ai pisicilor, </pre>
Rezultat:
!!!
3