Curs HTML - A5

I.
HTML
1. Introducere
Exemplu
<html>
<body>
<h1>Primul meu titlu</h1>
<p>Primul meu paragraf.</p>
</body>
</html>
Ce este HTML?
HTML este un limbaj pentru descrierea paginilor web.
HTML este abrevierea pentru Hyper Text Markup Language
HTML nu este un limbaj de programare, este un limbaj de marcare
(markup language)
Un limbaj de marcare este un set de taguri de marcare (markup tags)
HTML utilizează tagurile de marcare pentru a descrie paginile web
Tagurile HTML
Tagurile de marcare HTML sunt numite uzual taguri HTML
Tagurile HTML sunt cuvinte cheie scrise între paranteze ascuţite, de
exemplu <html>
În mod normal tagurile HTML sunt pereche ca <b> şi </b>
Primul tag din pereche este tagul de început, al doilea de sfârşit
Documentele HTML = Pagini Web

Documentele HTML descriu paginile web
Documentele HTML conţin taguri HTML şi text
simplu Documentele HTML sunt numite şi pagini web
Scopul unui browser web (ca Internet Explorer sau Firefox) este să citească
documentele HTML şi să le afişeze ca pagini web. Browser-ul nu afişează
tagurile HTML, dar le utilizează ca să interpreteze conţinutul paginii.
Exemplu:
<html>
<body>
<h1>Primul meu titlu</h1>
<p>Primul meu paragraf</p>
</body>
</html>
Explicaţii:
Textul dintre <html> şi </html> descrie pagina web
Textul dintre <body> şi </body> este conţinutul vizibil al paginii
Textul dintre <h1> şi </h1> este afişat ca un titlu
Textul dintre <p> şi </p> este afişat ca un paragraf
Titluri
Titlurile HTML sunt definite cu tagurile pereche <h1>...... <h6>.
Exemplu:
<html>
<body>
<h1>Acesta este titlul 1</h1>
</body>
</html>
Paragrafe
Paragrafele HTML sunt definite cu tagul pereche <p>.
<html>
<body>
<p>Acesta este un paragraf.</p>
</body>
</html>
Link-uri
Link-urile HTML sunt definite cu tagul pereche <a>.
<html>
<body>
<a href="http://yahoo.com">Acesta este un link</a>
</body>
</html>
Obs: Adresa de link este precizată ca atribut.
Imagini
Imaginile HTML sunt definite cu tagul <img> (nepereche).
<html>
<body>
<img src="hills.jpg" width="104" height="142"/>
</body>
</html>
Obs: Numele şi dimensiunile imaginii sunt precizate ca atribute.
Elemente HTML
Documentele HTML sunt definite de elementele HTML.
Elementele HTML
Un element HTML este tot ce este scris între un tag de început şi un tag de
sfârşit.:
Tag de început Conţinutul elementului Tag de sfârşit
Acesta este un
<p> paragraf </p>
<a
href="default.htm" Acesta este un link </a>
>
<br />
Sintaxa unui element HTML

Un element HTML începe cu un tag de deschidere/început
Un element HTML se încheie cu tag de închidere/sfârşit
Conţinutul unui element este tot ce este scris între cele două taguri
Unele elemente HTML au conţinutul vid
Elementele vide sunt închise în tagul de început
Majoritatea elementelor HTML pot avea atribute
Elemente HTML imbricate (nested)

Majoritatea elementelor HTML pot fi imbricate (pot conţine alte elemente
HTML).
Documentele HTML sunt de fapt elemente HTML imbricate.
Exemplu de document HTML
<html>
<body>
<p>Acesta este primul meu paragraf</p>
</body>
</html>
Acest exemplu conţine 3 elemente HTML:
Elementul <p>:
Elementul <p> defineşte un paragraf într-un document HTML.
Elementul are tagul de început <p> şi tagul de sfârşit </p>.
Conţinutul elementului este: Acesta este primul meu paragraf
Elementul <body>:
<body>
<p> Acesta este primul meu paragraf
</p> </body>
Elementul <body> defineşte corpul unui document HTML.
Elementul are tagul de început <body> şi tagul de sfârşit </body>.
Acest element conţine un alt element HTML (un paragraf – elementul p)
Elementul <html>:
<html>
<body>
</body>
</html>
Elementul <html> defineşte întregul document HTML. Elementul are tagul de
început <html> şi tagul de sfârşit </html>. Elementul conţine un alt
element HTML (corpul documentului – elementul body)
Elemente HTML vide

Elementele HTML care nu au conţinut se numesc elemente vide. Elementele
vide pot fi închise în tagul de început. Spre exemplu <br> este un element vid
fără tag de sfârşit (defineşte o întrerupere de linie). În XHTML, XML şi
viitoarele versiuni de HTML, toate elementele trebuie închise.
Adăugarea unui slash în tagul de început, ca <br />, este un mod potrivit de
închidere a elementelor vide, acceptat de HTML, XHTML şi XML.
Obs: HTML nu este case-sesitive, dar vă recomandăm să scrieţi cu litere mici
pentru compatibilitate cu noile versiuni HTML.
Atribute HTML
Atributele furnizează informaţii suplimentare despre elementele HTM.
Atributele HTML
Elementele HTML pot avea atribute
Atributele furnizează Atributele sunt
informaţii suplimentare specificate numai
despre un element în tagul de început
Atributele vin în perechi nume/valoare <a
ca: name="value" href="http://www
Exemple de atribute .yahoo.com">Aces

Linkurile HTML sunt definite cu tagul ta este un
<a>. Adresa de link precizată este un link</a>
atribut.
Exemplu: </body>
<html> </html>
<body>
Titluri HTML
Titlurile sunt definite cu tagurile <h1> ..... <h6>.
<h1> defineşte cel mai mare titlu. <h6> defineşte cel mai mic titlu.
Exemplu:
<html>
<body>
<h1>Acesta este un titlu 1</h1>
</body>
</html>
Obs: Browserele adaugă automat o linie vidă înainte şi după un titlu.
Titlurile sunt importante

Utilizaţi titlurile HTML numai pentru scrierea titlurilor. Nu le utilizaţi pentru a
face textul BIG sau bold. Motoarele de căutare folosesc titlurile pentru a
indexa structura şi conţinutul paginilor web.
Este important să utilizaţi titlurile pentru a pune în evidenţă structura
documentului HTML.
Titlurile h1 ar trebui folosite ca titluri principale, urmate de titlurile h2 şamd.
Liniile HTML
Tagul <hr/> este utilizat pentru a crea o linie orizontală.
Exemplu:
<html>
<body>
<p>Tagul hr defineste o linie
orizontala:</p> <hr/>
<p>Acesta este un
paragraf</p> <hr/>
<p>Acesta este un
paragraf</p> <hr/>
<p>Acesta este un paragraf</p>
</body>
</html>
Comentarii HTML
Comentariile pot fi inserate în codul HTML pentru a-l face mai uşor de citit şi
înţeles. Comentariile sunt ignorate de către browsere şi nu sunt afişate.
Comentariile se scriu astfel:


Cum vedeţi codul HTML sursă al unei pagini web
Faceţi clic dreapta pe pagină şi selectaţi "View Source" (IE) sau "View Page
Source" (Firefox) sau similar pentru alte browsere. Se va deschide o fereastră
cu codul HTML al paginii.
Paragrafe
Documentele HTML sunt împărţite în paragrafe. Paragrafele sunt definite cu
tagul <p>.
Obs: Browserele adaugă automat o linie vidă înainte şi după un paragraf. Nu
uitaţi tagul de închidere.
Exemplu:
<html>
<body>
<p>Acesta este primul paragraf.</p>
<p>Acesta al doilea paragraf.</p> <p>Acesta
este al treilea paragraf.</p> <p>Nu uitati
sa inchideti tagurile HTML!</p>
</body>
</html>
Obs: Noile versiuni HTML nu vor permite omiterea tagurilor de încheiere.
Obs. Utilizaţi tagul <br/> dacă doriţi o linie nouă fără să începeţi un nou
paragraf.
Exemplu:
<p>Acesta este<br />un para<br />graf cu
intrerupere de linie.</p>
Obs: Nu contează câte linii şi câte spaţii inseraţi în documentele HTML.
Browserele vor vedea un singur spaţiu şi o singură linie (dacă nu utilizaţi tagul
<br/>).
Linkuri
Un link este „adresa” unui document sau resurse de pe web.
Hiperlinkuri, ancore şi linkuri

În termeni web, un hiperlink este o referinţă (o adresă) a unei resurse de pe
web. Un hiperlink poate referi orice resursă de pe web: o pagină HML, o
imagine, un fişier de sunet, un film, etc.
O ancoră este o destinaţia unui hiperlink în interiorul unui document.
Elementul <a> este utilizat pentru a defini hiperlegăturile şi ancorele.
Folosim termenul link când elementul <a> indică o resursă web şi termenul
ancoră când elementul <a> defineşte o adresă din interiorul documentului.
Sintaxa unui link HTML este:
<a href="url">Textul afisat</a>
Tagul de început conţine atribute despre link.
Elementul de conţinut defineşte textul ce va fi afişat.
Imagini
Tagul imagine şi atributul src
În HTML imaginile sunt definite cu tagul <img>.
Tagul <img> este vid, aceasta înseamnă că el conţine numai atribute şi nu are
tag de închidere
Pentru a afişa o imagine pe o pagină trebuie să folosiţi atributul src care
reprezintă sursa imaginii. Valoarea atributului src este URL-ul imaginii pe
care doriţi să o afişaţi în pagină.
Sintaxa de definire a unei imagini este:
<img src="url" />
URL indică locul în care este stocată imaginea.
O imagine cu numele "boat.gif" localizată în directorul "images" pe situl
"www.msn.com" are URL-ul:
http://www.msn.com/images/boat.gif.
Browserul afişează imaginea în locul în care tagul de imagine apare în
document. Dacă puneţi tagul imagine între două paragrafe, browserul afişează
primul paragraf, apoi imaginea, apoi al doilea paragraf.
Liste
HTML acceptă liste neordonate, liste ordonate şi liste de definiţii..
Liste neordonate
O listă neordonată este o listă de itemi marcaţi cu simboluri (cercuri, pătrate,
puncte).
O listă neordonată începe cu tagul <ul>. Fiecare item din listă începe cu tagul
<li>.
Exemplu:
<ul>
<li>Cafea</li>
<li>Lapte</li>
</ul>
Browserul afişează lista de mai sus astfel:
Cafea
Lapte
Liste ordonate
O listă ordonată este o listă de itemi marcaţi cu numere sau litere.
O listă ordonată începe cu tagul <ol>. Fiecare item din listă începe cu tagul
<li>.
Exemplu:
<ol>
<li>Cafea</li>
<li>Lapte</li>
</ol>
Browserul afişează lista de mai sus astfel:
1. Cafea
2. Lapte
Într-o listă ordonată sau neordonată pot să apară paragrafe, întreruperi de linie
(line break), imagini, linkuri, alte liste, etc.
acest document identifica autorul si editorul
utilizat pentru crearea paginii. </p>
</body>
</html>

Curs HTML - A5

Încărcat de

Informații document

Titlu original

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

Curs HTML - A5

Încărcat de

Drepturi de autor:

Formate disponibile

I.

Documentele HTML = Pagini Web

Sintaxa unui element HTML

Elemente HTML imbricate (nested)

Elemente HTML vide

Exemple de atribute .yahoo.com">Aces

Titlurile sunt importante

Hiperlinkuri, ancore şi linkuri

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