HTML - Part 1

AZIMUT VISION
Cluj-Napoca Mail: office@azimutvision.ro Tel: +40 720 342 122

Romania Web: www.azimutvision.ro
HTML – Part 1
A. HTML – Generalitati
HTML = Hyper Text Markup Language
Limbajul HTML este compus din tag-uri (etichete) care descriu părți diferite ale unei pagini. Cele mai multe etichete
sunt perechi.
Fiecare pereche este formata dintr-o etichetă de deschidere și una de închidere:
• <eticheta> – eticheta de deschidere;

• </tag> – acesta este tag-ul de închidere.
Exemplu:
 <p> - eticheta de deschidere pentru paragrafe de text
 </p> - eticheta de inchidere pentru paragrafe de text
Fiecare fisier HTML e format din doua mari secțiuni:
• Capul paginii
<head> </head> – contine informații despre conținutul paginii. Ceea ce e scris in capul paginii nu va fi vizibil pe
pagina afișată în browser.
• Corpul paginii
tot e trecut intre <body> si </body> – ceea ce e scris aici e vizibil pe pagină.
Pentru a crea pagini HTML vom folosi editorul web Notepad++. Trebuie descarcat si instalat de la adresa:
https://notepad-plus-plus.org/download/
Poti folosi si alte editoare web cum sunt: Eclipse, Emacs, NetBeans, Sublime Text etc.
Atentie!!
1. Dupa ce creezi un document in Notepad++ sa il salvezi in format .html (implicit el se salveaza in format .txt)
2. Ca sa vizualizezi o pagina HTML creata in Notepad++, in meniu mergi pe RUN si apoi “Launch in Chrome”. (sau ce
browser folosesti de obicei)
1
AZIMUT VISION

B. HTML – Paragrafe
Creare paragrafe in HTML:

<p> Textul propriu-zis </p>
Exemplu:
Rezultat:
C. HTML – Titluri si subtitluri
Folosim titlurile și subtitlurile exact ca și în Microsoft Word, ca să ordonăm secțiunile de text pe care le avem. În
engleză titlurile și subtitlurile se numesc HEADING iar codul HTML pentru ele este de forma:
2
AZIMUT VISION

<h1> Capitolul 1 </h1> -pentru un titlu

<h2> Subcapitolul 1.5 </h2> -pentru un subtitlu
<h3> Subcapitolul 1.5.1 </h3> -pentru un subtitlu de nivel 3
<h4> Subcapitolul 1.5.1.1 </h4> -pentru un subtitlu de nivel 4
<h5> Subcapitolul 1.5.1.1.2 </h5> -pentru un subtitlu de nivel 5
<h6> Subcapitolul 1.5.1.1.2.3 </h6> -pentru un subtitlu de nivel 6
Exemplu :
Rezultat in browser:
3
AZIMUT VISION

D. HTML - Liste
In HTML avem 2 tipuri de liste:

liste ordonate
liste neordonate
Liste ordonate
Avem 2 feluri de etichete:
<ol> și </ol> – OL vine de la Ordered List (adică listă ordonată în engleză)

<li> și </li> – LI vine de la List Item (element din listă în limba engleză)
Deschidem lista cu <ol> și o închidem la final cu </ol>.

În interiorul listei vom pune elementele; fiecare element între <li> și </li>.
Exemplu:
<ol>
<li> Venus </li>
<li> Marte </li>
<li> Jupiter </li>
</ol>
Rezultat in browser :
Liste neordonate
Se deschid și se închid cu <ul>… </ul> în loc de <ol> … </ol>.

ul vine de la Unordered List
Exemplu:
<ul>
<li> Venus </li>
<li> Marte </li>
<li> Jupiter </li>
</ul>
4
AZIMUT VISION

Subliste
Listă în interiorul unei liste.

Se pot aplica atat listelor ordonate cat si listelor neordonate.
Exemplu :
<ul>
<li> Africa de Sud </li>
<li> Finlanda </li>
<li> Canada</li>
<li> Columbia </li>
<ul>
<li> Bogota</li>
<ul>
<li> El Dorado</li>
<li> CATAM</li>
</ul>
<li> Medellin</li>
<li> Cali</li>
</ul>
<li> Uruguay </li>
</ul>
5
AZIMUT VISION

E. HTML - Liste de definitii
Diferite de celelalte 2 tipuri.

Se folosesc rar.
<dl> …. </dl> – unde dl vine de la Definition List, pentru a deschide și închide lista
<dt>…</dt> – dt vine de la define term, definește termenul
<dd>…</dd> – pentru descrierea termenului
Exemplu:
<dl>
<dt> Câine </dt>
<dd> animal </dd>
<dt> Trandafir </dt>
<dd> floare </dd>
<dl>
</dl>
Rezultat in browser :
F. HTML - Linkuri
Pentru a insera link-uri in pagină vom folosi etichetele <a> și </a>.
<a> </a> - etichetele pentru a crea un link

href - atribut pentru a specifica la ce pagina sa fie redirectionat utilizatorul cand da click pe link
target=”_blank” – atribut ca linkul sa se deschida in fereatra noua / tab nou
Exemplu:
<a href=”https://en.wikipedia.org/wiki/Paris” target=”_blank”> Paris </a>
6
AZIMUT VISION

G. HTML - Imagini
Pentru a adăuga o imagine într-o pagină vom utiliza eticheta <img> .
Această etichetă nu are închidere, adică nu are </img>

Src = atribut pentru a specifica locatia imaginii
Alt = atribut pentru a specifica un titlu alternativ
Width = atribut pentru a specifica latimea imaginii
Height = atribut pentru va specifica latimea imaginii
Exemplu:
<img src=”https://siteulmeu.ro/saturn.jpg” alt=”Imagine cu planeta Saturn” width=”50px” height=”50px”>
H. HTML - Ingrosarea, sublinierea si inclinarea textului
Ingrosarea textului:
Varianta 1
<b> text </b>
Varianta 2
<strong> text </strong>
Inclinarea textului:
Varianta 1
<i> text </i>
Varianta 2
<em> text </em>
Sublinierea textului:
<u> text </u>

HTML - Part 1

Î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

HTML - Part 1

Încărcat de

Drepturi de autor:

Formate disponibile

AZIMUT VISION

Cluj-Napoca Mail: office@azimutvision.ro Tel: +40 720 342 122

HTML = Hyper Text Markup Language

Fiecare pereche este formata dintr-o etichetă de deschidere și una de închidere:

• <eticheta> – eticheta de deschidere;

Fiecare fisier HTML e format din doua mari secțiuni:

Cluj-Napoca Mail: office@azimutvision.ro Tel: +40 720 342 122

Creare paragrafe in HTML:

C. HTML – Titluri si subtitluri

Cluj-Napoca Mail: office@azimutvision.ro Tel: +40 720 342 122

<h1> Capitolul 1 </h1> -pentru un titlu

Cluj-Napoca Mail: office@azimutvision.ro Tel: +40 720 342 122

In HTML avem 2 tipuri de liste:

Avem 2 feluri de etichete:

<ol> și </ol> – OL vine de la Ordered List (adică listă ordonată în engleză)

Deschidem lista cu <ol> și o închidem la final cu </ol>.

Se deschid și se închid cu <ul>… </ul> în loc de <ol> … </ol>.

Cluj-Napoca Mail: office@azimutvision.ro Tel: +40 720 342 122

Listă în interiorul unei liste.

Cluj-Napoca Mail: office@azimutvision.ro Tel: +40 720 342 122

E. HTML - Liste de definitii

Diferite de celelalte 2 tipuri.

Pentru a insera link-uri in pagină vom folosi etichetele <a> și </a>.

<a> </a> - etichetele pentru a crea un link

Cluj-Napoca Mail: office@azimutvision.ro Tel: +40 720 342 122

Pentru a adăuga o imagine într-o pagină vom utiliza eticheta <img> .

Această etichetă nu are închidere, adică nu are </img>

H. HTML - Ingrosarea, sublinierea si inclinarea textului

<u> text </u>

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