Sunteți pe pagina 1din 6

HTML - Notiuni de baza

HTML este prescurtarea de la Hyper Text Mark-up Language si este codul care sta la baza
paginilor web. Paginile HTML contin elemente (etichete) si au extensia .html sau .htm

Puteti scrie astfel de fisiere cu Notepad sau cel mai indicat cu editoare cod sursaspecializate, de
exemplu Crimson Editor, care va indica si numarul liniilor, lucru util la depanarea codului
HTMLPentru a crea un fisier html mai intai creati un fisier text, apoi ii redenumiti extensia din txt
in html

Elemetele sunt incadrate de tag-uri. Tag-urile sunt simbolurile care marcheaza inceputul si
sfarsitul unui element. Tag-ul pentru inceput este < iar pentru sfarsit este >.

In marea lor majoritate elementele sunt pereche, una de deschidere <eticheta> si alta de
inchidere </eticheta>. Browserul interpreteaza aceste etichete afisand rezultatul pe ecran. HTML
nu este un limbaj case sensitiv (nu face deosebirea intre litere mici si mari).

Pagina principala a unui domeniu este fisierul index.html. Aceasta pagina este setata a fi afisata
automat la vizitarea unui domeniu.
De exemplu la vizitarea domeniului www.nume.ro este afisata paginawww.nume.ro/index.html.

Unele etichete permit utilizarea de atribute care pot avea anumite valori:
<eticheta atribut="valoare"> ... </eticheta>

Componenta unui document HTML este:


1. versiunea HTML a documentului
2. zona head cu etichetele <head> </head>
3. zona body cu etichetele <body> </body> sau <frameset> </frameset>

Structura unei pagini web

<html>
<head>
<title>Page Title</title>
</head>
<body>

</body>
</html>

Pentru a crea un site creati un folder ( de ex cu numele “ site “ ). In acest folder veti pune toate
obiectele site-ului ( paginile web componente, imaginile, melodiile, etc. )
Lista celor mai utilizate tag-uri impreuna cu atributele lor
In tabelul urmator vor fi prezentate cele mai utilizate tag-uri impreuna cu cele mai importante atribute ale lor:

Nume tag Nume atribut Valoare atribut Detalii Exemplu

<A>     Ancora (link) <a href="http://nume_site/pagina">Nume</a>


  href URL Adresa catre care vrem sa fie legatura sau
  target _blank Fereastra in care se va face afisarea <a href="nume_fisier.extensie" >Nume</a>
_self
unde Nume poate fi textul pe care se da clic sau o
_parent imagine pe care se da clic
_top
<B>     Text bold <b>text ingrosat ...</b>
<BODY>     Cuprinsul documentului
  background adresa imaginii Imaginea de fond <body bgcolor="#ffffff" text="#ff0000"
  link="#0000ff" vlink="#ff00ff" alink="#ffff00">
bgcolor cod culoare Culoarea fondului ……
  nume culoare </body>
 
leftmargin procent din Distanta dintre marginea din stanga a sau
 
  latimea paginii ferestrei browserului si marginea din
numar de pixeli stanga a paginii <body background="imagine.gif">
  ………
  topmargin procent din Distanta dintre marginea de sus a </body>
inaltimea paginii ferestrei browserului si marginea de sus
numar de pixeli a paginii
text cod culoare Culoarea textului
nume culoare
alink cod culoare Culoarea legaturilor active (atunci cand
nume culoare mouse-ul se afla deasupra lor)
link cod culoare Culoarea legaturilor nevizitate (nu s-a
nume culoare efectuat nici un click pe ele)
vlink cod culoare Culoarea legaturilor vizitate
nume culoare (s-a efectuat cel putin un click pe ele)
<BR>     Sfarsitul randului
<CENTER>     Afisarea in centrul paginii
<FONT>     Fontul textului <font color="#00dd00" face=Verdana>Acest text
  are culoarea verde tip Verdana</font>
color cod culoare Culoarea fontului
  nume culoare
  sau
face nume font Tipul fontului
size un numar Marimea fontului <font size="+2">Text cu doua marimi mai
de la 1 la 7 mare</font>
poate folosi, ca valoare relativa, Textul normal (daca nu este specificat prin atributul
semnele "+" sau "-" size) are valoarea 3.

H1, H2, H3,     Titluri in cadrul documentului <h1>Titlu de dimensiune mare</h1>


H4, H5, H6 <h6 align=right>Titlu mic aliniat la dreapta</h6>
  align left Alinierea titlului
center
right
justify

<HEAD>     Antetul documentului


<HR>     Linie orizontala <hr color="#1111fe" size="4" width="50%">
  align left Alinierea orizontala a liniei Linie orizontala de culoare rosie, latime(grosime) 4,
  center lungime 50% din latimea ferestrei:
  right
 
color cod culoare Culoarea liniei
nume culoare

size numar de pixeli Inaltimea liniei


width procent din Latimea liniei
latimea paginii
numar de pixeli
<HTML>     Document HTML
<I>     Text italic <i>text inclinat ...</i>
<IMG>     Adaugarea unei imagini <img src="imagine.jpg" align="top" width="100"
  height="120" border="4"></img>
align left Alinierea imaginii in pagina: left (stanga)
  right sau right (dreapta)
  top Alinierea elementelor din jurul imaginii:
  middle top (sus), middle (mijloc), bottom (jos)
  bottom
  alt text Text ce va fi afisat in locul imaginii, in
  cazul in care, aceasta nu este afisata
 
  border numar de pixeli Marimea chenarului din jurul imaginii
height procent Inaltimea imaginii
numar de pixeli
hspace numar de pixeli Spatiu pe orizontala in jurul imaginii
src URL Adresa imaginii
vspace numar de pixeli Spatiu pe verticala in jurul imaginii
width procent Latimea imaginii
numar de pixeli
value date de tip Valoare input
caracter
<LI>     Element al unei liste
<OL>     Lista ordonata <ol type="I" start="3">
  <li>text 1 ...</li>
start numar Cu ce valoare incepe numerotarea <li>text 2 ...</li>
  type A Tipul numerotarii: A, a, I, i, 1 (implicit) <li>text 3 ...</li>
a </ol>
I
i
1
<P>     Paragraf
  align left Alinierea paragrafului <p align="center" ">Text paragraf</p>
center
right
justify
<STRONG>     Text evidentiat
<SUB>     Text indice x<sub>2</sub> afiseaza x2
<SUP>     Text exponent y<sub>a+b</sub> afiseaza ya+b
<TABLE>     Tabel Tabel cu 4 randuri si 2 coloane, prima linie fiind
  antet de tabel:
align left/center/right Alinierea tabelului
  background URL Imaginea de fond pentru tabel <table border="1">
  <tr bgcolor=green>
  bgcolor cod culoare/nume culoare Culoarea fondului pentru tabel     <th>titlu coloana1</th>
  border procent/numar de pixeli Chenarul tabelului     <th>titlu coloana2</th>
  </tr>
bordercolor cod culoare/nume culoare Culoarea chenarului
<tr>
  cellpadding numar de pixeli Spatiu intre continutul celulelor tabelului si     <td>linia 2- coloana 1</td>
  marginile lor     <td>linia 2- coloana 2</td>
  </tr>
cellspacing numar de pixeli Spatiu intre celulele tabelului
  <tr>
  cols numar Numarul de coloane ale unui tabel     <td>linia 3- coloana 1</td>
    <td>linia 3- coloana 2</td>
hspace numar de pixeli Spatiu pe orizontala in jurul tabelului </tr>
vspace numar de pixeli Spatiu pe verticala in jurul tabelului <tr>
width procent/numar de pixeli Latimea tabelului     <td>linia 4- coloana 1</td>
    <td>linia 4- coloana 2</td>
<TD>     Celula de tabel </tr>
  align left/center/right Alinierea continutului celulei pe orizontala </table>
  background URL Imaginea de fond pentru celula
 
  bgcolor cod culoare/nume culoare Culoarea fondului pentru celula
  colspan numar Nr de coloane pe care se intinde celula
  height numar de pixeli Inaltimea celulei
  rowspan numar Numarul de linii pe care se intinde celula
 
valign top/middle/bottom Alinierea continutului celulei pe verticala
width numar de pixeli Latimea celulei
<TR>     Rand tabel
  align left/center/right Alinierea continutului celulelor pe orizontala
  bgcolor cod culoare/nume culoare Culoarea fondului pentru tot randul
  valign top/middle/bottom Alinierea continutului celulelor pe verticala
<TH> Celula de titlu(antet) de tabel
<TITLE>     Titlul document
<U>     Text subliniat <u>text subliniat ...</u>
<UL>     Lista neordonata <ul type="square" >
  <li>text 1 ...</li>
type circle Forma marcajului <li>text 2 ...</li>
disc <li>text 3 ...</li>
square </ul>

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