Tutorial HTML
BackSTART
Imagini
Tag-uri pentru imagini<img> Defineste o imagine
<map> Defineste o harta a imaginii
<area> Defineste o zona în cadrul hartii unei imagini
Tag-ul pentru inserarea unei imagini si atributul sau src
Pentru a defini o imagine în HTML avem nevoie de tag-ul <img>.
Pentru a afisa o imagine trebuie sa specificam valoarea atributului src (sursa). Sursa este chiar
URL-ul imaginii pe care vrem sa o afisam. Sintaxa este:
<img src="url">
Browserul pune întotdeauna imaginea în locul în care întâlneste tag-ul <img>.
Exemplu:
<html>
<body>
<p> pam pam</p>
<img src="04.gif">
</body>
</html>
Atributul alt
Acest atribut se foloseste pentru a afisa un text alternativ pentru o imagine. Adica în cazul în
care browserul nu poate afisa imaginea atunci în spatiul rezervat imaginii apare textul
specificat de atributul alt.
Sintaxa:
<img src="04.gif" alt="Smiley">
Utilizarea acestui atribut este o practica buna mai ales pentru cei ce navigheaza fara sa-si
afiseze si pozele.
<html>
<body>
<p> pam pam</p>
<img src="05.gif" alt="Smiley">
</body>
</html>
Exemple
1. Alinierea imaginii fata de text
<html>
<body>
<p>
imagine
<img src="04.gif"
align="bottom">
in text aliniata jos
</p>
<p>
imagine
<img src="04.gif"
align="middle">
in text aliniata la mijloc
</p>
<p>
imagine
<img src="04.gif"
align="top">
in text aliniata sus
</p>
<p>
<img src ="04.gif">
inaintea textului
</p>
<p>dupa text
<img src ="04.gif">
</p>
</body>
</html>
2. Alinierea imaginii în cadrul unui paragraf:
<html>
<body>
<p>
<img src ="04.gif"
align ="left">
In acest paragraf imaginea ramane in stanga si textul curge frumos in
jurul ei bla, bla, bla, bla, bla, bla, bla,bla,
bla,bla,bla,bla,bla,bla,bla,bla,
</p>
<p>
<img src ="04.gif"
align ="right">
In acest paragraf imaginea ramane in dreapta si textul curge frumos in
jurul ei bla,bla,bla,bla,bla,bla,bla,bla, bla,bla,bla,bla,bla,bla,bla,bla,
</p>
</body>
</html>
3. Marimea pozelor:
<html>
<body>
<p>
<img src="04.gif"
width="15" height="15">
</p>
<p>
<img src="04.gif"
width="30" height="30">
</p>
<p>
<img src="04.gif"
width="45" height="45">
</p>
<p>
Atentie putem micsora sau mari imaginile cu cele doua atribute width si
height dar atentie calitatea poyei are de suferit. Asa ca marimea pozei
trebuie sa fie stabilita din programul de editare al pozelor!
</p>
</body>
</html>
Culori HTML
Culorile se obtin utilizând modelul RGB (RED, GREEN, BLUE)
Valorile culorilor
Culorile sunt definite cu ajutorul notatiei hexazecimale pentru fiecare dintre cele trei culori de
baza: rosu, verde, albastru. Cea mai mica valoare care se poate da unei culori este #00 iar cea
mai mare este #FF
Tabelul de mai jos arata unele combinatii de culori
Culoare Color HEX Color 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)
Numele culorilor
Doar 16 nume de culori sunt recunoscute de catre standardul HTML 4.0. Acestea sunt: aqua,
black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white si
yellow. Pentru toate celelalte nuante se impune folosirea codului hexa.
Culoare Color HEX Nume
#F0F8FF AliceBlue
#FAEBD7 AntiqueWhite
#7FFFD4 Aquamarine
#000000 Black
#0000FF Blue
#8A2BE2 BlueViolet
#A52A2A Brown