| CATEGORII DOCUMENTE |
HTML
IMAGINI
Imaginile sunt stocate in fisiere in diverse formate grafice. Formate 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 HTML se utilizeaza eticheta <img> (de la 'image'=imagine).
<img src=" " border=n height=n1 width=n2 align=left/right/center alt=" ">
Atributul BORDER permite stabilirea grosimii liniei ce va inconjura poza (Ex: <img src="c:studentpoza.gif" border = 3> - linia ce va inconjura poza va avea o grosime de aproximativ 1 mm)
- Atributul WIDTH permite stabilirea unei dimensiuni a imaginii pe orizontala (lungimea pozei pe orizontala) (Ex: <img src="c:studentpoza.gif" width = 150> - poza va avea o lungime pe orizontala de aproximativ 5 cm)
- Atributul HEIGHT permite stabilirea unei dimensiuni a imaginii pe verticala (lungimea pozei pe verticala) (Ex: <img src="c:studentpoza.gif" height = 300> - poza va avea o lungime pe orizontala de aproximativ 10 cm)
- Atributul ALIGN permite alinierea imaginii respective in cadrul paginii Web (Ex: <img src="c:studentpoza.gif" align = left> - poza va fi aliniata la stanga)
- Atributul ALT permite scrierea unui text care va apare numai atunci cand utilizatorul este pozitionat cu mouse-ul pe imaginea respectiva (Ex: <img src="c:studentpoza.gif" align = left alt = "Poza aceasta este din secolul trecut">)
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. Daca fisierul HTML si fisierul imagine nu se gaesec in acelasi folder atunci trebuie precizata calea (adresa) unde se gaseste fisierul imagine.
Exemplu (situatia in care fisierul HTML si fisierul "Fishleft.gif" se gasesc in acelasi folder):
<html>
<head>
<title> O pagina cu imagine</title>
</head>
<body>
O pagina ce contine o imagine
<p>
<img src='Fishleft.gif'> Text aferent imaginii.
</body>
</html>
Exemplu (situatia in care fisierul HTML si fisierul "Fishleft.gif" nu se gasesc in acelasi folder):
<html>
<head>
<title> O pagina cu imagine</title>
</head>
<body>
O pagina ce contine o imagine
<p>
<img src='C:StudentGrupa 1XXPozeFishleft.gif'> Text aferent imaginii.
</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, de 200 pixeli X 15 %
<img src='../../images/teacher.gif' 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 urmatoarele valori:
'left' - aliniere la stanga; celelalte componente sunt dispuse pe partea dreapta;
'right' - aliniere la dreapta; celelalte componente sunt dispuse pe 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/teacher.gif' align=top>
La mijloc: <img src='../../images/teacher.gif" align=middle>
Jos: <img src='../../images/teacher.gif' 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.
<img src='../../images/teacher.gif' align=left id=30 vspace=30 alt="Universitatea de Vest Timisoara">
Text dupa imagine.
</body></html>
Imagini pentru fondul unei pagini
O imagine poate fi utilizata pentru a stabili fundalul 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/teacher.gif'>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br> 9<br> </body>
</html>
LINK-uri (LEGATURI)
Legaturile (link-urile) reprezinta partea cea mai importanta a unei pagini Web.
Ele transforma un text obisnuit in hipertext sau text cu hiperlegaturi, care premite trecerea rapida de la o informatie aflata pe un anumit server la alta informatie memorata pe un alt server aflat oriunde in lume.
Legaturile sunt zone active intr-o pagina Web, adica zone de pe ecran sensibile la apasarea butonului stang al mouse-ului.
O legatura catre o pagina aflata in acelasi director se formeaza cu ajutorul etichetei <a> (de la 'anchor'=ancora).
<A href = "a">textul sau imaginea de legatura </A>
Pentru a preciza pagina indicata de legatura se utilizeaza un atribut al etichetei <a> numit href (de la hypertext reference), care ia ca valoare numele fisierului HTML aflat in acelasi director. Zona activa care devine sensibila la apasarea butonului stang al mouse-ului este formata din textul cuprins intre etichetele <a></a>.
Prezenta etichtetei de sfarsit </a> este obligatorie.
Fisierul "Leg_ex1.html":
<html>
<head>
<title> Comutarea intre doua pagini</title>
</head>
<body>
<h3>Pagina 1 </h3>
<a href='leg_ex2.html'>
Link catre pagina 2 </a>
</body>
</html>
Fisierul "Leg_ex2.html":
<html>
<head>
<title> Comutarea intre doua pagini</title>
</head>
<body>
<h3>Pagina 2 </h3>
<a href='leg_ex1.html'>
Link catre pagina 1 </a>
</body>
</html>
O legatura catre o pagina aflata pe discul local intr-un alt director
Daca pagina referita se afla pe acelasi disc local, dar intr-un alt director atunci pentru a preciza pozitia ei in structura de directoare se poate folosi adresarea relativa.
<html>
<head>
<title> Comutarea intre doua pagini aflate pe acelasi disc local</title>
</head>
<body>
<h3>Pagina 3 </h3>
<a href='C:Studentgrupa1XXexemple/lista_5.html'>
Link catre o pagina cu liste </a>
</body>
</html>
a) O legatura catre un site din Web:
In exemplul urmator se utilizeaza adresa URL www.yahoo.com care incarca pagina de start din site-ul firmei Yahoo.
<html>
<head>
<title> Link catre site-ul firmei Yahoo</title>
</head>
<body>
<h3>Link catre site-ul firmei Yahoo </h3>
<a href='https://www.yahoo.com'>
www.yahoo.com </a>
</body>
</html>
b) O legatura catre o adresa de e-mail: permite transmiterea unei mesaj catre casuta posta a unei anumite persoane (numele poate fi chiar text de legatura).
Intr-o pagina Web se pot afla legaturi care permit lansarea in executie a aplicatiei de expediere a mesajelor electronice.
Pentru aceasta se utilizeaza in constructia adresei URL serviciul Internet mailto: urmat de o adresa e-mail valida.
Pentru ca exemplul urmator sa functioneze trebuie ca: pe calculator sa fie instalat o aplicatie de expediere a mesajelor electronice (Outlook Express pe Windows, etc). Adresa sa fie valida si calculatorul sa fie conectat la Internet.
<html>
<head>
<title> Expediere de mesaje electronice</title>
</head>
<body>
<h3>Expediere de mesaje electronice</h3><br>
<a href='mailto:mihai@yahoo.com'>
Mesaje catre autorul paginii - Mihai </a>
</body>
</html>
Legatura interna permite realizarea unei legaturi in cadrul aceluiasi fisier (de exemplu de la cuprinsul unei carti ce cuprinde capitolele existente in cartea respectiva sa se relizeze o conexsiune catre continutul unui capitol)
Intr-o pagina foarte lunga pot exista puncte de reper catre care se stabilesc legaturi.
O ancora se defineste de asemenea prin eticheta <a>. Pentru a defini ancora se utilizeaza atributul name care primeste ca valoare un nume atribuit ancorei (de exemplu 'ancora1').
Pentru a insera o legatura catre 'ancora1' definita in aceeasi pagina se utilizeaza eticheta <a> avand atributul href de valoare '#ancora1'.
Pentru a introduce o legatura catre o ancora definita in alt document (alta pagina) aflat in acelasi director, atributul href primeste o valoare de forma 'nume_fisier.html#nume_ancora'.
Exemplul 1:
<html>
<head>
<title> Ancore definite in acelasi document si in alt doocument</title>
</head>
<body>
<h3>Ancore definite in acelasi document si in alt document </h3>
<a href='#ancora1'>
Link catre ancora 1 </h3>
<a href='../../legaturi.html#ancora2'>
Link catre o ancora din alt document </a>
<br> 1<br>2<br>3<br>4<br> 5<br>6<br>7<br>8<br> 9<br>10<br>11<br>12<br> 13<br>14<br>15<br>16<br> 17<br>18<br>19<br>20<br> 21<br>22<br>23<br>24<br>
<a name='ancora1'>ancora 1
</body>
</html>
Exemplul 2: Suntem pe pagina 1 si realizam cuprinsul.
<A href="#Continutul capitolului 1">Capitolul 1</a>
<A href="#Continutul capitolului 2">Capitolul 2</a>
<A href="#Continutul capitolului 3">Capitolul 3</a>
<A href="#Continutul capitolului 4">Capitolul 4</a>
<A href="#Continutul capitolului 5">Capitolul 5</a>
Dupa cum se observa Capitolul 3 a fost trecut ca text de legatura (vezi sintaxa tag-ului <A href = .. >...</A>) pentru a putea executa click stanga de mouse si a ne trimite apoi la pagina 185(conform enunt exemplu).
"#Continutul capitolului 3" este numele semnului de carte de la pagina 185. Asa am vrut sa numesc semnul de carte (puteam sa-i dau orice alt nume cu spatii sau fara spatii, dar daca are spatii atunci acest nume de semn de carte trebuie pus intre ghilimele)
Deplasare la pagina 185 in cadrul cartii respective. Aceasta deplasare o realizam cu bara de defilare sau cu tasta PageDown, deoarece acesta este locul in care vreau sa ma pozitioneze cu mouse-ul dupa ce dau click pe textul de legatura.
La aceasta pagina vom crea un semn de carte cu numele "#Continutul capitolului 3" astfel: <A name = "#Continutul capitolului 3">
Dupa ce am definit semnul de carte la pagina 185 putem sa ne deplasam de la pagina 1 la pagina 185 cu doar un click de mouse pe textul de legatura si numai este nevoie de tasta PageDown sau de bara de defilare.
Obs: Fisierul HTML trebuie sa aiba cel putin 185 de pagini.
Alegerea culorilor pentru legaturi
In mod prestabilit se utilizeaza trei culori pentru legaturi:
- o culoare pentru legaturile nevizitate (nu s-a efectuat nici un click pe ele)
- o culoare pentru legaturile vizitate (s-a efectuat cel putin un click pe ele)
- o culoare pentru legaturile active (deasupra carora se afla mouse-ul la un moment dat).
Aceste atribute pot fi stabilite cu ajutorul a trei atribute ale etichetei <body>:
- link pentru legaturile nevizitate;
- vlink pentru legaturile vizitate;
- alink pentru legaturile active.
Valorile pe care le pot lua aceste atribute sunt culori definite prin nume sau conform standardului RGB.
<html>
<head>
<title> Culori pentru lagaturi</title>
</head>
<body link='blue' vlink='#ADD8E6' alink='red'>
<h3>Setarea culorilor pentru link-uri:<br>rosu pentru legaturi active, . pentru legaturi vizitate si albastru pentru legaturi nevizitate </h3>
<a href=leg_ex1.html>
Link catre pagina 1 <br>
<a href=leg_ex2.html>
Link catre pagina 2 <br>
<a href=leg_ex11.html>
Link catre pagina 11 </a>
</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 'Fishleft.gif' drept legatura catre pagina index.html utilizam sintaxa:
<a href ='index.html'><img src= '../../images/Fishleft.gif '></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> valoarea 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/Fishleft.gif '></a>
Text dupa imagine.
</body>
</html>
|
Politica de confidentialitate | Termeni si conditii de utilizare |
Vizualizari: 2960
Importanta: 
Termeni si conditii de utilizare | Contact
© SCRIGROUP 2024 . All rights reserved
