Sunteți pe pagina 1din 13

Curs HTML

HTML este prescurtarea de la Hyper Text Mark-


up Language  si este codul care sta la baza
paginilor web.
 HTML este un limbaj utilizat pentru crearea
paginilor web ce pot fi afișate într-
un browser (sau navigator). 
-> Orice document HTML începe cu tag-ul <html> si se termina cu
tag-ul </html>
-> Toate tag-urile HTML incep cu o paranteza unghiulara
deschisa “ < “ si se termina cu o paranteza unghiulara inchisa “
>“
-> Intre cele doua marcaje <html> si </html> vom introduce
doua secţiuni: 
 -> Sectiunea de antet <head>…</head> si corpul documentului
<body>…</body> ce cuprinde continutul paginii,ceea ce va fi afisat
in fereastra browser-ului.
Tag-urile </body> si </html> sunt tag-uri de incheiere. </body>,
da de stire browser-ului, ca s-a incheiat continutul paginii, iar
</html> ca s-a incheiat documentul HTML.
Asadar :
<HTML> </HTML> Defineste un fisier format in web
<HEAD> </HEAD> Antetul documentului
<TITLE> </TITLE> Titlul paginii
<BODY> </BODY> Corpul paginii
<P> Paragraf
<CENTER> </CENTER> Centreaza materialul in pagina
<U> </U> Afiseara text subliniat
<TABLE> </TABLE> Tabel HTML
<BR></BR> Line break- intrerupere de linie

Acestea sunt unele dintre cele mai imprtante tag-uri folosite in


Deschidem notepad (de preferat notepad++) unde vom crea prima noastra pagina
web :

<html>
<head>
<title>Titlul paginii</title>
</head>
<body>
<h1>Pagina HTML</h1>
<p align="right">Acesta este un paragraf aliniat la dreapta</p>
Lectie HTML
</body>
</html>

Dupa ce am scris cu mare atentie,il vom salva ca index.html (nu conteaza


numele pe care il folositi,conteaza ca extensia fisierului sa fie .html)
Acum pagina are HEAD si BODY in interiorul bazei <HTML>.
In interiorul elementului HEAD are elementul TITLE, pe care ar trebui sa-l
completati cu un text reprezentativ ca titlul documentului si in BODY un text.
Culoarea background-ului
Culoarea background-ului poate fi definita prin tag-ul <body
bgcolor=“culoarea"></body>
<html>
<head>
<title>Culoare background-ului </title>
</head>
<body bgcolor="green"></body>
Culoarea background-ului este verde
</body>
</html>
Culoarea textului
Culoarea textului poate fi schimbata prin simpla adaugare elementului
text=“culoarea”

<html>
<head>
<title>Culoare textului </title>
</head>
<body bgcolor="green"text="blue"></body>
Culoarea background-ului este verde <br>
Iar culoarea textului este albastra
</body>
</html>
Crearea de tabele
<table border="1">
<tr>
<th>titlu 1</th>
<th>titlu 2</th>
</tr>
<tr>
<td>linia 2- coloana 1</td>
<td>linia 2- coloana 2</td>
</tr>
<tr>
<td>linia 3- coloana 1</td>
<td>linia 3- coloana 2</td>
</tr>
<tr>
<td>linia 4- coloana 1</td>
<td>linia 4- coloana 2</td>
</tr>
</table>
Formatul textului
*Elemente des folosite pentru formatul textului sunt:
- Bold (ingrosat) <b> ... </b>
- Italic (inclinat) <i> ... </i>
- Underline (subliniat) <u> ... </u>
Exemple :
<b> Bold </b>
<i> Italic </i>
<u> Underline </u>

*Alte etichete HTML pentru formatul textului :


<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<p>
<strike> Text taiat </strike><br>
<big> Prezinta textul intr-un font mare </big><br>
<small> Prezinta textul intr-un font mic </small><br>
<sub> Aseaza textul in pozitia subscript </sub> normal
<sup> Aseaza textul in pozitia superscript </sup><br>
</p>
</body>
</html>
Linie orizontala <hr>
- Acest element afiseaza o linie orizontala in document
- Acest element nu foloseşte element de închidere [</hr>]
- Elementul <hr> foloseste urmatoarele atribute:
- SIZE = latimea liniei, in pixeli (standard este 2)
- WIDTH = lungii liniei, in pixeli sau procente din lungimea afisarii paginii
(standard 100%)
- NOSHADE = afiseaza linia fara a avea un aspect 3D
- ALIGN = aliniaza linia (Left, Center, Right), adica Stanga, Centru sau
Dreapta paginii ( Standard centru)
- COLOR = seteaza culoarea liniei
Elemente pentru marcatori

Un element des folosit in formarea listelor (neordonate) este <ul>.


- <ul> este elementul de început si dupa scrierea listei se incheie cu </ul>.
- Majoritatea elementelor pentru marcatori si numerotare sunt compuse din
unu sau mai multe elemente <li> ... </li> (list element).
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</body>
</html>
Crearea de link-uri
Forma generala pentru crearea unui link este urmatoarea:
<a href="url" title="Titlu link">Nume</a>
- a este elementul specific pentru crearea link-urilor
- href este atributul care marcheaza indicarea adresei link-ului
- url este adresa link-ului (a paginii care va fi deschisa). De exemplu
(http://www.google.com)
- title este atributul prin care se da un titlu link-ului (un text ascuns, care
apare numai cand este pozitionat mouse-ul deasupra link-ului)
- Titlu link este textul ascuns care apare cand este pozitionat mouse-ul
deasupra link-ului
- Nume este textul care va aparea in browser si pe care trebuie dat click cu
mouse-ul.
In loc de acest text se poate folosi si o imagine, astfel "Nume" va fi inlocuit
cu 
<img src="nume_imagine.extensie">
Poza de background
Poza pe background se pune prin tag-ul:
background-image: url(numele_imaginii.extensia);
-> Se poate modifica si latimea/lungimea acestuia prin urmatorul tag:
background-size: 100% 70%;

<html>
<body>
<style>
body {
background-image: url(bg.jpg);
background-size: 100% 70%;
background-repeat:no-repeat;
}
</style>
</html>
</body>
Proiect realizat
->Chelariu Adelin
->Asimionesei Daniel

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