Curs de autoinstruire in HTML

Limbajul HTML

Pensule nail art
Inregistrati-va si puteti plasa pagina Web pe Geocities.

Top100
Cele mai bune pagini.

HTML

HTML 4.0 Specification
Aici gasiti o descriere mai complexa despre limbajul HTML 4.0

HTML 4.01 Specification
Aici gasiti o descriere mai complexa despre limbajul HTML 4.01

validator.w3.org www.w3.org


DHTML

Click here for DHTML-Center Click here for dynamicdrive


Javascript

Javascript


Animatii

Click here for Animationcity Click here for Cooltext





UTT : UBM : HTML
                       Limbajul HTML
Autor: Barna Alexa
5. Imagini

Imaginile sunt stocate in fisiere cu diverse formate. Formatele acceptat de browsere pentru fisierele imagine sunt:

  • GIF (Graphics Interchange Format) cu extensia .gif;
  • JPEG (Joint Photographic Experts Group) cu extensia .jpeg sau .jpg;
  • XPM (X PixMap) cu extensia .xmp;
  • XBM (X BitMap) cu extensia .xbm;
  • BMP (BitMap) cu extensia .bmp (numai cu Internet Explorer);
  • TIFF (Tagged Image File Format) cu extensia .tif sau .tiff;
Cele mai raspandite formate sunt GIF(8biti pentru o culoare, 256 culori posibile) si JPEG (24biti pentru o culoare, 16777216 de culori posibile).
Adresa URL a unei imagini

URL ( "Uniform Resourse Locator" = identificator unic al resursei ) este un standard folosit in identificarea unica a unei resurse in Internet.
Toate imaginile cu care vom lucra vor avea adresa URL exprimata in functie de directorul ce contine documentul HTML care face referire la imagine.

Pentru a insera o imagine intr-o pagina, se utilizeaza eticheta <img> (de la "image"=imagine).
Pentru a putea fi identifica imaginea care va fi inserata, se utilizeaza un atribut al etichetei <img> si anume src (de la "source"=sursa).
Daca imaginea se afla in acelasi director cu fisierul HTML care face referire la imagine, atunci adresa URL a imaginii este formata numai din numele imaginii, inclusiv extensia.

<html>
<head>
<title>
O pagina cu imagine</title>
</head>
<body>
O pagina care contine o imagine
<img src="../../images/ubm1.jpg"> Text dupa imagine.
</body>
</html>
Chenarul si dimensionarea unei imagini

Daca doriti sa adaugati un chenar in jurul imaginii, folositi atributul border al etichetei <img>.
Valorile acestor atribute sunt numere intregi pozitive.

O imagine are anumite dimensiuni pe orizontala si verticala, stabilite in momentul crearii ei.
Daca nu se cere altfel , aceste dimensiuni sunt respectate in momentul afisarii ei in pagina Web.

Dimensiuniile prestabilite ale unei imagini pot fi modificate prin intermediul atributelor width si height.

<html>
<head>
<title>
Imagine cu chenar si marit</title>
</head>
<body>
O imagine cu chenar si de 200 pixeli X 15 %
<img src="../../images/ubm1.jpg" border="5" width="350" height="25%"> Text dupa imagine.
</body>
</html>
Alinierea unei imagini

Alinierea unei imagini se poate face prin intermediul atributului align care poate lua urmatorele valori:

  • " left " - aliniere la stanga; celelalte componente sunt dispuse pe in partea dreapta;
  • " right " - aliniere la dreapta; celelalte componente sunt dispuse pe in partea stanga;
  • " top " - aliniere deasupra; partea de sus a imaginii se aliniaza cu partea de sus a textului ce precede imaginea;
  • " middle " - aliniere la mijloc; mijlocul imaginii se aliniaza cu linia de baza a textului ce precede imaginea.
  • " bottom " - aliniere la baza; partea de jos a imaginii se aliniaza cu linia de baza a textului.
<html>
<head>
<title>
Alinierea unei imagini</title>
</head>
<body>
Alinieri:
<br> Pe verticala:
<img src="../../images/ubm1.jpg" align="top">
La mijloc: <img src="../../images/ubm1.jpg" align="middle">
Jos: <img src="../../images/ubm1.jpg" align="bottom"> Text dupa imagine.
</body>
</html>
Alinierea textului in jurul imaginii

Atributele hspace si vspace precizeaza distanta in pixeli pe orizontala , respectiv pe verticala, dintre imagine si restul elementelor din pagina.
Atributul alt admite ca valoare un text care va fi afisat in locul imaginii.

<html>
<head>
<title>
Alinierea textului</title>
</head>
<body>
<h4>
Imagine aliniat la stanga inconjurata de text la distanta de 30 de pixeli.
</h4><p> Text inainte de imagine.Text inainte de imagine.Text inainte de imagine.Text inainte de imagine. Text inainte de imagine.Text inainte de imagine.Text inainte de imagine.Text inainte de imagine.
<img src="../../images/ubm1.jpg" align="left" hspace="30" vspace="30" alt="Universitatea de Nord Baia Mare">
Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine. Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine.Text dupa imagine.
</body>
</html>
Imagini pentru fondul unei pagini

O imagine poate fi utilizata pentru a stabili fondul unei pagini Web. In acest scop se foloseste atributul background al etichetei <body>, avand ca valoare adresa URL a imaginii.
Imaginea se multiplica pe orizontala si pe verticala pana umple intregul ecran.

<html>
<head>
<title>
Pagina cu imagine de fond</title>
</head>
<body background="../../images/ubm1.jpg">

1<br>2<br>3<br>4<br> 5<br>6<br>7<br>8<br> 9<br> </body>
</html>
Imagini folosite ca legaturi

O legatura (link) introduce in pagina Web o zona activa.
Efectuand click cu butonul mouse-ului pe aceasta zona in browser se va incarca o alta pagina.
Pentru a utiliza imaginea "ubm1.jpg" drept legatura catre pagina index.html utilizam sintaxa:

<a href ="index.html"><img src= "../../images/ubm1.jpg "></a>

In mod prestabilit imaginea utilizata pe post de zona activa este inconjurata de un chenar avand culoarea unei legaturi.
Daca stabilim pentru atributul border al etichetei <img> 0 acest chenar dispare.

<html>
<head>
<title>
Imagini folosite ca legaturi</title>
</head>
<body"><h4>
Imagini folosite ca legaturi</h4>
Text inainte de imagine.<a href="index.html"><img src="../../images/ubm1.jpg "></a>
Text dupa imagine.
</body>
</html>
Utilizari speciale ale imaginilor

Imaginile pot fi utilizate pentru a obtine efecte deosebite intr-o pagina web.
Printre aceste utilizari speciale putem enumera:

  1. Linii orizontale formate cu ajutorul imaginilor .
  2. Simboluri speciale pentru elementele unei liste neordonate ( vezi ).


1111
 
  Continut

  1. Ce este HTML ?
  2. Primii pasi
  3. Fonturi
  4. Blocuri de text
  5. Imagini
  6. Legaturi
  7. Liste
  8. Tabele
  9. Ferestre in Html
10. Formulare
11. Stiluri
12. Javascript
13. Tag-uri

       [ HOME ]



|  Ce este HTML ? | Primii pasi | Fonturi | Blocuri de text | Imagini | Legaturi | Liste | Tabele |
| Ferestre in HTML | Formulare | Stiluri | Javascript | Tag-uri |
[ HOME ]


Copyright © 2000 UBM
a_bsz@yahoo.com