2 Documentul HTML (I)

Tema 2:
INIIERE N LIMBAJUL HTML
lect. univ. Tru Valentina

REFERINE BIBLIOGRAFICE
Bibliografie obligatorie:
Dan Punescu, Proiectarea paginilor web, Editura Spirit Romanesc, Craiova 2001, 94p.
. , HTML, . , , 2001
, JavaScript, 8'2003
., ., ., , .ACT, 1998
Bibliografie facultativ:
Gilbert Held, Comunicaii de date, ed. Teora, 1999
Joe Habracken, FrontPage 2002 pentru nceptori, Bucureti, Teora 2000.
HTML 4.0 Specification, W3C Recomandation, December 18th, http://www.w3c.org/TR/REC-html40,
1997
Curs, Introducere in Java, http://thor.info.uaic.ro/~acf/java/curs/1/introducere.html
Programare pe platforma Java, http://thor.info.uaic.ro/~acf/java/index.html
Referine n Internet:
http://ciobanu.cich.md/lectii_view.php?id=2 CSS
http://ciobanu.cich.md/lectii_view.php?id=1 HTML
www.compdoc.ru
http://htmlbook.ru
http://www.w3schools.com\
http://html-ro.appspot.com/html401/html401_cuprins.html#minitoc Tutoria HTML
Redactore:
http://notepad-plus-plus.org/ - Notepad++
http://www.adobe.com/cfusion/tdrc/index.cfm?product=dreamweaver - Adobe Dreamweaver
http://www.sausage.com/hotdog-professional.html - Hotdog
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
Versiunea Anul apariiei

HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2012
4
HTML (Hyper Text Markup Language) - un limbaj utilizat pentru descrierea
paginilor web;
HTML nu este un limbaj de programare, ci unul de marcare:
limbaj de marcare 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.
1. Redactore HTML
Pentru a crea documente HTML este suficient cel mai
simplu editor de texte, de exemplu Notepad.
Documentele HTML poate fi editat folosind editoare
profesionale: Notepad++, Macromedia, NetBeans,
Amaya, DreamWeaver
Paii pentru generarea unei pagini WEB:
1. n editor se creaz documentul HTML.
2. Se salveaz documentul specificnd numele i extensia
.html sau .htm.
3. Pentru vizualizarea rezultatului descrierii paginilor web este
suficient de deschis fiierul .html.
2. Elemente HTML
<!DOCTYPE HTML>
<meta charset="utf-8">
<title> Antetul documentului </title>
<p> Corpul documentului </p>
7
2. Elemente HTML
a) HTML (Hyper Text Markup Language) - este un limbaj de marcare
pentru descrierea paginilor web.
b) Tagurile sunt cuvinte cheie nscrise ntre paranteze unghiulare, de
exemplu: <html>
c) Conteiner - o pereche de taguri ca <b> i </b>. <b> - tag de
deschidere, iar </b> - tag de inchidere.
d) Element tot ce este nscris ntre un tag de nceput i un tag de sfrit
(text, imagini, taguri. ...)
e) Atribute folosite pentru a modifica valoarea unui element n HTML:

Atributele furnizeaz informaii suplimentare despre un element.
Atributele sunt ntotdeauna specificate n eticheta de start.
8
2. Elemente HTML
Tipuri de taguri
<p> Salut!</p> - tag cu coninut (element text)
<br /> - tag fr coninut.
n versiunea 5 este obligatoriu prezena amblelor taguri din 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.
Pentru a definii un comentariu HTML se folosete urmtoarea
sintax:
<!- Textul comentariului -> sau <!- Textul comentariului

pe mai multe randuri ->
9
<!DOCTYPE>
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:
4. Elementele din antetul
documentului HTML
1.Tag-ul <HEAD> conine stiluri pentru formatarea textului,
scripturi i linkuri ctre fiiere externe (de exemplu scripturi
Javascript, fisiere de tip CSS).
Tag Descriere
<title> </title> definete titlul documentlui
<meta> definete meta informaii
<link> definete referina unei resurse
<style> </style> definete stilul de formatare CSS a textului
<script> </script> este un container pentru un script care ruleaza pe
calculatorul clientului, fr a utiliza serverul.
<nonscript> utilizat pentru a defini un text alternativ n cazul cnd

un script nu este executat pe browser
<base> definete un URL de baz pentru toate linkurile din
pagin 12
documentului HTML
Tagul <TITLE> - reprezint titlul documentului.

Textul definit n interiorul ei va aprea ca titlu pentru fereastra
de browser care afieaz pagina.
Textul este folosit atunci cnd pagina este adugat la meniul
Favorites sau Bookmarks.
Text va fi folosit de ctre motoarele de cutare atunci cnd i
adaug pagina n baza de date. Pentru toate aceste motive este
important ca acest text s fie ct mai sugestiv.
13
documentului HTML
<meta> - conine cuvinte cheie, descrierea paginii, date despre autor,
informaii utile motoarelor de cutare i are urmatorul format:
<meta charset=utf-8>
<meta name="nume" content="continut">

<meta name="author" content=Cutrescu Nelu-Gheorghe">
Atributele:
charset - specific codarea documentului
Name - poate lua orice valoare (destinatia atributului)
content - poate lua orice valoare (valoarea atributului)
14
documentului HTML
<link> - necesar pentru conectarea fiierelor externe. Urmtorul

exemplu ilustreaz accesarea unei foi externe de stiluri.
<link rel=stylesheet type=text/css href=../style.css>
Atribute:
rel="stylesheet" tipul legturii dintre document i sursa
extern.
href="../style.css" indic url sursei.
type="text/css" tipul fiierului surs.
15
documentului HTML
<style> </style> - conine informaii despre stilurile folosite de

ctre tabelul de stiluri (CSS).
<style>
body {background: #8B0050;
color: #fcc;}
</style>
Atributele:
background culoarea fundalului
color culoarea textului
16
documentului HTML
<script> </script> - conectarea fiierelor script externe
<script type=text/javascript src=function.js > </script>
Atributele:
type limbajul
src drumul ctre fiierul extern
17
documentului HTML
<nonscript> - se adaug dup tagul <script> i se definete

un text alternativ pentru cazul n care scriptul nu este executat.
<script type=text/javascript>
<!se execut un document//>
</script>
<noscript> Browserul nu suport JavaScript!</noscript>
18
documentului HTML
<base> - specific URL-ul/calea fiierului curent. Destinat

documentelor care utilizeaz adrese relative, aceste documente
pot fi deplasate dintr-un dosar n altul fr a pierde conexiunea.
<base href="http://www.megasite.ru/hzchd/" >
Atributele:
href adresa documentului
19
5. Coninutul paginii tag-ul body
Tag-ul <body> este utilizat pentru a defini coninutul corpului paginii.
Tag-ul body este un element de tip container care conine restul elementelor
care definesc coninutul paginii: text, imagini, tabele, hyperlink-uri 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
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_culoare denumirea culorii (aqua, black, fuchsia, gray, green, lime,
maroon, navy, olive, purple, red, silver, white, yellow etc.)
culoare_baza_16 Specific culoarea link-ului utiliznd codul hexazecimal
(#00FF00, "#ff0000). Se pot defini astfel 65536 de culori
numr_rgb Specific culoarea link-ului utiliznd codul rgb ("rgb(255,0,0)")
CULORI N HTML
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.asp
http://www.stm.dp.ua/web-design/color-html.php
<!DOCTYPE HTML>
<meta charset="utf-8">
<html>
<head>
<title> Culori </title>
<style>
body{ background: #91224B;
color:#f0f;}
</style>
</head>
<body alink=rgb(255,0,0) vlink=#00FF00 link="gray">
<!-1-> <h1> HTML 5 </h1>
<!-2-> <p> HTML5 este o tehnologie nucleu pentru Internet
propus &#259 ini&#355ial pentru software-ul Opera."
</p>
<!-3-> <hr/>
<!-4-> <a href="http://www.wikipedia.org"> Trimitere pe pagina wikipedia </a>
<!-5-> <br>
<!-6-> <a href="http://htmlbook.ru/html/a/href"> HTML </a>
</body>
</html> 23
24
EXEMPLU UTILIZARE ATRIBUT
BACKGROUND, BGCLOR I TEXT
<body background="f5.jpg" bgcolor="pink" text="khaki">
<body background=images/f5.jpg" bgcolor="pink text="khaki">
25
6. Titluri HTML
Titlurile HTML se definesc cu tag-urile <h1>...<h6>
Motoarele de cutare folosesc titlurile pentru a indexa structura i coninutul
paginilor web;
Se va evita omiterea unui nivel ierarhic la un moment dat (adic H3 nu ar trebui s
apar imediat dup H1, ci se va folosi H2 n loc).
Exemplu:
7. Paragrafe n HTML
Paragrafele n HTML se definesc cu tag-urile <p> </p>
27
7. Paragrafe n HTML
Rezultatul:
28
8. Creare aliniate
Tag-ul <br /> indic trecerea forat la o linie nou fr a termina
ns paragraful curent.
Nu are tag de sfrit.
Marcheaz poziia de trecere la linie nou.
29
8. Creare aliniate
Rezultatul:
30
9. FORMATAREA TEXTULUI
Sunt mai multe tag-uri care pot fi utilizate pentru formatarea
textului, cele mai utilizate:
<b> - pentru scriere ngroat
<i> - pentru scriere inclinata
<u> - subliniaza textul continut
<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
<tt> - afiseaza textul in fontul teletype (neproportional).
9. FORMATAREA TEXTULUI
Sunt mai multe tag-uri care pot fi utilizate pentru formatarea
textului, cele mai utilizate:
Tag-ul <hr /> permite trecerea automat la linie nou i deseneaz o
linie orizontal. Caracteristicile linie orizontale pot fi controlate de ctre
atributele:
Atribute Descriere
align specific modul de aliniere a liniei (left, center sau right)
color culoarea linieie
noshade o linie fara efecte 3D
size grosimea liniei ( numrul de pixeli)
width lungimea liniei fie ca dimensiune absolut
n pixeli, fie ca procent din lungimea ferestrei browserului.
Rezultatul:
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 denumit ancorare
Pentru a defini link-uri n HTML se utilizeaz tag-ul <a>, a provenind de la anchor
Atrubite Descriere
HREF folosit pentru a specifica calea/destinaia link-lui
NAME folosit pentru a defini o ancora ntr-o pagin
TITLE adaug un text explicativ care apare cnd indicatorul mouse-ului
se oprete pe link.
TARGET Indic modul de deschidere a documentului (implicit documentul
este deschis n fereastra curent sau cadru).
Pentru a nsera un link elementar n codurile HTML se va scrie
<a href="url"> Textul link-ului </a>
Valori posibile pentru url:
Legturi externe sunt legturi ctre pagini gzduite pe alt server de
WEB. Pentru legturile externe se folosete ntotdeauna URL-ul
specificat complet: href=http://ro.wikipedia.org/wiki/HTML5 ;
Legturi locale sunt legturi ctre alte documente aflate pe acelai
server. Legturile locale se pot specifica folosind un URL relativ care
conine doar calea ctre resursa respectiv la directorul curent.
href="f3.jpg";
Legturi interne - legtura cu un element din aceeai pagin,
specificat prin id (name):
href="#top">sus
ATRIBUTUL NAME, a tag-ului <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, care
stabilete un cuvnt cheie ce identifica unic paragraful int.
Este suportat de majoritatea browsere-lor
Acest atribut nu mai este utilizat n HTML5, fiind nlocuit cu
atributul id
Forma general: <a name="cuvant_cheie"> Paragraf_inta </a>
Ancora se va scrie astfel:
<a href=#cuvant_cheie"> Text explicativ </a>
Rezultatul:
ATRIBUTUL TARGET
Implicit atunci cnd se face click pe un link resursa se deschide n acelai
fereastr;
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)
ALTE ATRIBUTE ALE TAG-ului <A>
Download descarc fiierul cnd se face click pe link, fr a naviga

spre el
Nu este suportat de toate browserele (IE)
Exemplu: <a href="/imagini/stefan.jpg" download>
Hreflang se utilizeaz pentru a specifica n link limba documentului

Este suportat de toate browserele
Acest atribut este 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.

CODURI I CARACTERE
SPECIALE N 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
- â

2 Documentul HTML (I)

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

2 Documentul HTML (I)

Încărcat de

Drepturi de autor:

Formate disponibile

Tema 2:

INIIERE N LIMBAJUL HTML

lect. univ. Tru Valentina

Versiunea Anul apariiei

<title> Antetul documentului </title>

<p> Corpul documentului </p>

e) Atribute folosite pentru a modifica valoarea unui element n HTML:

<!- Textul comentariului -> sau <!- Textul comentariului

<nonscript> utilizat pentru a defini un text alternativ n cazul cnd

Tagul <TITLE> - reprezint titlul documentului.

<meta name="nume" content="continut">

<link> - necesar pentru conectarea fiierelor externe. Urmtorul

<link rel=stylesheet type=text/css href=../style.css>

<style> </style> - conine informaii despre stilurile folosite de

<script> </script> - conectarea fiierelor script externe

<script type=text/javascript src=function.js > </script>

<nonscript> - se adaug dup tagul <script> i se definete

<noscript> Browserul nu suport JavaScript!</noscript>

<base> - specific URL-ul/calea fiierului curent. Destinat

<base href="http://www.megasite.ru/hzchd/" >

<body background="f5.jpg" bgcolor="pink" text="khaki">

<body background=images/f5.jpg" bgcolor="pink text="khaki">

Paragrafele n HTML se definesc cu tag-urile <p> </p>

_parent ncarc pagina n fereastra printe

Download descarc fiierul cnd se face click pe link, fr a naviga

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

Hreflang se utilizeaz pentru a specifica n link limba documentului

Acest atribut este doar informativ

Forma general: <a hreflang="cod_limb">

Cod_limba va corespunde codurilor limbilor conform standardelor

ISO. Cteva exemple:

ru limba rus, etc.

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