Tutoriale HTML - Imagini si legaturi (linkuri) in HTML

Imagini

Pentru a insera o imagine într-o pagina, se utilizează eticheta <img> (de la "image"=imagine).

Pentru a putea fi identifică imaginea care va fi inserată, se utilizează un atribut al etichetei <img> şi anume src (de la "source"=sursǎ). Valoarea acestui atribut este adresa URL a imaginii.
Dacă imaginea se află în acelaşi director cu fişierul HTML care face referire la imagine, atunci adresa URL a imaginii este formată numai din numele imaginii, inclusiv extensia.

tutorial html imagini legaturi

tutorial html imagini legaturi

Un tabel de imagini

tutorial html imagini legaturi

tutorial html imagini legaturi

Un tabel de tabele de imagini şi texte

Exemplul urmǎtor prezintǎ un tabel cu un rând având douǎ celule. Fiecare celulǎ a tabelului este formatǎ dintr-un nou tabel care conţine douǎ rânduri. În rândul de sus se aflǎ o imagine, iar în rândul de jos un text explicativ privind imaginea.

tutorial html imagini legaturi

tutorial html imagini legaturi

Imagini folosite ca legături

O legătura (link) introduce în pagina Web o zona activă.
Efectuând click cu butonul mouse-ului pe aceasta zona în browser se va încărca o altă pagină.

În mod prestabilit imaginea utilizatǎ pe post de zona activǎ este înconjuratǎ de un chenar având culoarea unei legături.

tutorial html imagini legaturi

tutorial html imagini legaturi

Am utilizat imaginea poz11.gif drept legǎturǎ cǎtre pagina e7_1.html. Fǎcând click acum pe imagine se deschide:

tutorial html imagini legaturi

tutorial html imagini legaturi

tutorial html imagini legaturi

Fǎcând click pe textul subliniat apare:

tutorial html imagini legaturi

Metainformaţiile, adicǎ informaţiile despre conţinutul unei pagini Web, se introduc cu ajutorul unui element special <meta> plasat în interiorul blocului <head> </head>. Acest element acceptǎ patru atribute

  • name
  • content
  • http-equiv
  • scheme,

la care se adaugǎ un atribut universal (comun tuturor elementelor): lange

tutorial html imagini legaturi

tutorial html imagini legaturi

Metainformaţiile nu sunt vizibile în interiorul unei pagini Web. Ele sunt conţinute în fişierul sursǎ . html

Din meniul ViewSource. Apare:

tutorial html imagini legaturi

Atributul name poate fi utilizat pentru a furniza informaţii legate de autorul paginii si de drepturile de autor:

tutorial html imagini legaturi

Pentru a transmite serverelor data creǎrii şi data ractualizǎrii unei pagini Web, se utilizeazǎ atributul http-equiv. Valoarea atributului content este

“zzz zz lll aaaa hh:mm:ss ttt”, unde:

  • “zzz” reprezintǎ primele trei litere ale zilei din sǎptǎmânǎ (Mon, Tue, Wed, Thu, Fri, Sat, Sun)
  • “zz” reprezintǎ ziua din cadrul lunii (01, 02, 03,…,31)
  • “lll” reprezintǎ primele trei litere din numele lunii (Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec)
  • “aaaa” reprezintǎ anul exprimat cu patru cifre (de exemplu 2003)
  • hh:mm:ss” reprezintǎ ora, minutul şi secunda
  • “ttt” reprezintǎ standardul de timp utilizat (de exemplu GMT)

tutorial html imagini legaturi

Observaţie:

Dacǎ data este furnizatǎ într-un format ambiguu (de exemplu ,,03-07-1999”), atunci adǎugaţi atributul scheme care precizeazǎ formatul utilizat pentru datǎ (de exemplu scheme = ”Month-Day-Year”)

Pentru a putea furniza informaţii despre persoana care administreazǎ site-ul, utilizaţi atributul

http-equiv ca în exemplul urmǎtor. În aceste cazuri, valoarea atributului content este o adresǎ

e-mail, eventual urmatǎ, între paranteze rotunde, de un nume complet al persoanei.

tutorial html imagini legaturi

Pentru a reîncǎrca aceeaşi paginǎ la un interval precizat de secunde, folosiţi atributul http-equiv cu valoarea “refresh”, iar în atributul content introduceţi numǎrul de secunde dupǎ care doriţi ca pagina sǎ fie reactualizatǎ.

tutorial html imagini legaturi

tutorial html imagini legaturi

Dupǎ 5 secunde apare din nou:

tutorial html imagini legaturi

Dacǎ dorim ca dupǎ un numǎr de secunde o pagina sǎ fie înlocuitǎ de o alta, atunci în atributul content este precizatǎ şi adresa URL a paginii noi:

tutorial html imagini legaturi

tutorial html imagini legaturi

Dupǎ 9 secunde apare:

tutorial html imagini legaturi

Legǎturi

O legǎturǎ cǎtre o paginǎ aflatǎ în acelasi director se formeazǎ cu ajutorul etichetei <a> (de la ,,anchor”=ancorǎ). Pentru a preciza pagina indicatǎ de legǎturǎ se utilizeazǎ un atribut al etichetei <a> numit href, care ia valoare numele fişierului HTML aflat în acelaşi director, care va înlocui vechea paginǎ. Prezenţa etichetei de sfârşit < / a> este obligatorie.

Urmǎtorul exemplu admite cǎ în acelaşi director (de exemplu, în directorul de lucru C:\ bew) se aflǎ douǎ fişiere HTML, p1.html şi p2.html:

tutorial html imagini legaturi

tutorial html imagini legaturi

Cele douǎ fişiere se deschid unul dupǎ altul prin apǎsarea unui click pe textul subliniat.

tutorial html imagini legaturi tutorial html imagini legaturi

O legǎturǎ cǎtre o paginǎ aflatǎ pe acelaşi disc local

Presupunem acum cǎ pagina referitǎ de legǎturǎ se aflǎ pe acelaşi disc local, dar într-un alt director.

Exemplul urmǎtor presupune cǎ p3.html se aflǎ în directorul C: \ bew \ a \ , iar p4.html se aflǎ în directorul C: \ bew \ b \ bb \ .

tutorial html imagini legaturi

tutorial html imagini legaturi

Cele douǎ fişiere se deschid când unul când altul prin apǎsarea unui singur click pe textul subliniat.

tutorial html imagini legaturi tutorial html imagini legaturi