|
HTML - incepatori
|
In acest tutorial html vei invata cum sa adaugi imagini intr-o pagina web si cum sa faci legaturi(link-uri) intre paginile unui site.
IMAGINI
Imaginea a devenit un element omniprezent in toate paginile web actuale . Bazat pe faptul recunoscut ca o imagine are un impact mult mai mare asupra privitorului decat un text precum si pe necesitatea oferirii unor informatii cat mai rapid si direct catre utilizator imaginea s-a impus ca elementul indispensabil oricarei prezentari a oricarui subiect .
In cadrul paginilor web introducerea elementelor grafice – la acest moment ne referim la imaginile de tip GIF sau JPG – se face cu ajutorul tag-ului <IMG>.
Urmatorul cod are ca efect introducere imaginii imagine.gif in pagina noastra , cu dimensiunile specificate in atributele WIDTH ( latime ) si HEIGHT ( inaltime ) ale tag-ului .
<IMG src="/imagine.gif" mce_src="/imagine.gif" WIDTH=190 HEIGHT=70>
Rezultatul introducerii codului de mai sus:
Atributul SRC specifica sursa de unde browser-ul va incarca imaginea respectiva .
Aceasta locatie poate fi in sistemul respectiv ( in directorul paginii sau in orice alt director ce va fi specificat in cale ) sau in orice alta locatie pe web ( ex. http://www.tutorialul.ro/tutoriale-html/poza1.gif ) .
In cazul in care nu se introduce o cale catre aceasta imagine ci doar numele ei atunci browser-ul va cauta in directorul curent al paginii web .
Atributele WIDTH si HEIGHT pot lipsi iar browser-ul va recunoaste imaginea la dimensiunile ei originale ; chiar in cazul in care imaginea a fost special creat pe dimensiunile necesare paginii noastre este de preferat folosirea celor doua atribute care ajuta la incarcarea mai rapida a imaginii ( in caz contrar browser-ul va mai pierde timp calculand dimensiune si asezarea in pagina a imaginii respective ) .
Atributul ALT -Un alt atribut care este preferabil sa fie prezent este atributul ALT . Cu ajutorul acestui atribut putem oferi o alternativa browser-ului in cazul in care imaginea respectiva nu a putut fi incarcata :
<img src="/1.gif" width=20 height=20 alt="Text in cazul lipsei pozei din calea generata">
Rezultatul introducerii codului de mai sus:
Tag-ul anterior va face ca in cazul in care poza dorita nu este gasita browser-ul sa afiseze textul atributului ALT intr-o fereastra de dimensiunile specificate pentru imagine .
Tag-ul BORDER - Un alt atribut al tag-ului IMG este si BORDER - cu ajutorul sau putem specifica grosimea unui chenar care inconjoara imaginea dorita .
Tag-ul IMG accepta si el atributul ALIGN , intalnit de exemplu si in cadrul tag-ului
<img align=”right” src="/1.gif" width=20 height=20 alt="Text in cazul lipsei pozei din calea generata">
Text care va apare alaturi de imagine neacoperind imaginea .
Rezultatul introducerii codului de mai sus:
Text care va apare alaturi de imagine neacoperind imaginea .
Comanda anterioara va pozitiona imaginea la dreapta liniei si va face ca textul sa apara in stanga imaginii ( analog pentru folosirea atributului ALIGN=”left” ) .
In cazul folosirii valorii CENTER pentru atributul ALIGN se va obtine pozitionare in stanga a imaginii ( lucru default ) iar textul va incepe pe linia pozitionata in dreptul mijlocului imaginii , dupa umplerea acestei linii textul continuand pe linia urmatoare de sub imagine – aceasta optiune este in general evitata .
Pentru a obtine centrarea imaginii se va apela la incadrarea tag-ului IMG intre doua taguri complemetare <CENTER> si </CENTER> .
Tot in cadrul atributului ALIGN mai putem intalni alte trei valori :
- “bottom” – aliniaza partea inferioara a imaginii pe linia curenta
- “top” – aliniaza partea superioara a imaginii cu cel mai inalt element de pe linia curenta
- “middle” – aliniaza mijlocul imaginii cu linia curenta
LINKURI
Mai intai sa vedem ce este un link. .
Pentru a fi cat mai simplu : un link reprezinta o legatura (un cuvant, o imagine, o propozitie) in cadrul unei pagini si pe care poti da click pentru a naviga catre alte locatii .
Practic orice element al unei pagini web poate fi asociat unui link : un text , o imagine sau doar o portiune de imagine .
Secventa urmatoare reprezinta introducerea unui link catre pagina Tutorialul .
<a href="http://www.tutorialul.ro">Tutorialul.ro</a>
Rezultatul introducerii codului de mai sus:
Tutorialul.ro
Tagurile <a> si </a> ( = anchor ) transmit browser-ului faptul ca urmeaza definirea unui link .
Adresa link-ului se incadreaza in href=” .." . Href provine de la Hypertext Reference si este un atribut al tag-ului . Dupa incheierea tag-ului urmeaza textul sau imaginea care urmeaza sa faca legatura catre linkul dorit .
In cazul in care dorim realizarea unei legaturi catre o alta pagina din acelasi director se va introduce in cadrul atributului href doar numele paginii :
<a href="/continut.htm">Continut</a>
Un alt tip comun de legatura este linkul in cadrul aceleiasi pagini . Pentru a crea un astfel de link trebuie realizati doi pasi .
In primul rand trebuie sa identificam sectiunea paginii unde vrem sa putem sari si apoi sa realizam linkul .
Pentru primul pas – definirea zonei la care dorim sa se faca legatura - avem doua posibilitati :
<a name=”definitie_zona”> Text </a> sau <p id=”definitie_zona”> Text
Saltul propriu-zis la aceasta zona definita se face prin intermediul urmatoarei linii de cod :
<a href="#definitie_zona">Acest link va duce inapoi la zona definita</a>
Rezultatul introducerii codului de mai sus:
Acest link va duce inapoi la zona definita
Saltul se poate face si combinat – la o anumita zona definita in alta pagina , ca in exemplul urmator :
<a href="/pagina2.html#definitie_zona">Acest link va duce inapoi la zona definita in pagina 2</a>
Atributul MailTo - O alta intrebuintare foarte des intalnita a tag-ului tine de inserarea in pagina web a unei adrese de contact , mai exact o adresa de mail .
Urmatoarea linie de cod realizeaza exact acest lucru , cuvantul cheie mailto specificand browser-ului ca urmeaza o adresa de mail iar acesta va lansa clientul de mail al vizitatorului paginii cu adresa adresa@yahoo.com gata introdusa in cadrul mesajului :
<a href="mailto:adresa@yahoo.com">Trimite mail</a>
Rezultatul introducerii codului de mai sus:
Trimite mail
Atributul Subject - Un atribut folositor al tag-ului este si SUBJECT , mail-ul trimis de vizitator primind astfel un subiect gata definit de dumneavoastra :
<a href="mailto:adresa@yahoo.com?subject=testare">Trimite Mail</a>
Tot in problema linkurilor mai trebuie sa amintim si posibilitatea de a defini o adresa de baza pentru linkurile din pagina noastra . In mod normal pentru un link catre o pagina din acelasi director se foloseste doar numele paginii . Sa presupunem ca toate linkurile din pagina noastra sunt catre pagini aflate intr-un acelasi director DIRECTOR_SURSE ; in acest caz putem reduce textul presupus de introducerea acestei cai in fiecare atribut HREF in modul urmator :
<HEAD> <BASE HREF=http://www.site.com/director_surse> </HEAD>
Dupa utilizarea acestui cod sursa putem utiliza in cadrul atributului HREF doar numele fisierului respectiv .
 |
Merci mult! ...
Subscribe to this comment's feed
