[Web Development] Modulul III - Linkurile și Imaginile

[BeNy gL]

Salut,

De data aceasta vom începe cu modulul "Linkurile si Imaginile".

 

Link-urile

   Noțiunea de hyperlink, ne ajută la conectarea și trecerea de la o pagină la alta. Pentru a accesa un link avem nevoie de structura: 

<a href=”http://www.google.com”> Click here </a>

   “A”-ul este exterem de utilizat pe site-uri și de aceea tag-ul este așa de scurt, “A”-ul vine din cuvântul englezesc “anchor” ceea ce înseamnă în limba română ancoră. “Href” este prescurtarea cuvantului englezesc hypertext reference.

   Deci, în cod vedem tag-ul <a>, precum şi atributul href cu URL-ul care duce la site-ul Google:

   Atributul Href este alcatuit din 2 parti: numele atributului (A) si locatia (URL) la care duce link-ul (B). Exista si 2 tipuri de link-uri: relative si absolute.

 

Link-urile absolute

   Acest tip de linkuri se utilizează, de obicei, atunci când vrem să conectăm pagina noastră cu o pagină sau un material de pe un alt site.

   Linkurile absolute sunt probabil cel mai simplu de introdus, dar se pot dovedi și cele mai complicate în ceea ce privește o viitoare modificare. 

Exemplu: <a href="http://www.google.com/">Google</a>

 

Link-urile relative

   Spre deosebire de linkurile absolute, unde doar destinația contează, la linkurile relative este foarte importantă și locația linkului, adică de unde este direcționat vizitatorul site-ului.

   Linkurile relative sunt, de obicei, utilizate pentru a crea conexiuni în cadrul unui site. Deşi acum linkurile absolute pot părea drept cea mai practică soluţie, de fapt e invers. Linkurile relative se folosesc întotdeauna pentru linkuri în cadrul site-urilor.

Exemplu:  <a href="contact-us.html">Contact info</a> 

 

Atributul Target

Am menţionat deja că tag-ul <a> trebuie să aibă atributul href, deoarece fără el, practic, este inutil. Există și un atribut target opțional, care definește modul în care a fost activat linkul și care poate avea una dintre următoarele valori:

•  _blank – încarcă documentul legat într-o nouă fereastră
•  _parent – încarcă documentul legat într-un element părinte al paginii, în care se află linkul. În cazul în care linkul nu se află pe pagina inclusă, acesta se încarcă în toată fereastra
• _self – încarcă documentul legat în aceeaşi fereastră în care se află şi linkul. Dacă omitem atributul target, această valoare va fi considerată implicită
•  _top – încarcă în toată fereastra, ignorând cadrele (frames).

 

Named anchors (Ancorele denumite)

   Named anchors se folosesc atunci când vrem ca linkul să direcţioneze spre o parte exactă a paginii. În anumite cazuri, o pagină poate avea un conținut care necesită mult derularea (scroll) pe verticală pentru a găsi un anumit detaliu. Putem plasa named anchors oriunde pe pagină şi apoi setăm un link, la secţiunea respectivă de pe pagină. 

  Pentru a posta ancora, introducem tag-ul <a>, dar, deoarece ancora nu este un link, nu duce nicăieri, ci doar indică locul respectiv, nu are un atribut href și nici conţinut.

Exemplu:  <a name="something"></a>

  Aceasta este doar o parte a procesului. Am setat un Named anchor care are un nume și nu este vizibilă în browser. Acum, ne rămâne să legăm această ancoră de aceeași pagină sau de o altă pagină. De exemplu, dacă vrem să legăm o ancoră de aceeași pagină, vom adăuga:

Exemplu:  <a href="#something">Link</a>

  Pe de altă parte, dacă vrem să ne legăm de ancora de pe o altă pagină, vom adăuga:

Exemplu:  <a href="index.html#something">Link</a>

 Deci, un link clasic cu adăugarea unui Named anchor precedat de semnul #.

 

Imaginile

   Există doar patru formate de imagini pe care le putem utiliza astăzi pe paginile web. Acestea sunt JPG, GIF, PNG, SVG

• JPG (Joint Photographic Experts Group) foloseşte extensia .jpg sau .jpeg. Acest format nu suportă transparența, nici animația, dar este excelent pentru comprimarea fotografiilor, deoarece suportă milioane de culori.
• GIF (Graphics Interchange Format) este limitat la 256 de culori. GIF-urile sunt excelente pentru desene tehnice și pentru imagini mici (iconițe, thumbnails etc). GIF-urile pot memora 2, 4, 16 până la 256 de culori, așadar putem salva mult din dimensiune în momentul în care creăm fișierele.
• PNG (Portable Network Graphic) este un format mai nou suportat de către toate browser-ele actuale și combină funcţionalitățile formatelor GIF și JPEG. Acest format raster pentru imagini foloseşte comprimarea fără pierderi. Utilizează RGB și sistemul de culori în tonurile gri. Există două tipuri de formate:
• PNG-8, care conține informația pe 8 biți despre culori (asemănător cu GIF);
• PNG-24, care conține informația pe 24 de biţi despre culori (combină cele mai bune aspecte ale formatelor GIF și JPG).  
• SVG (Scalable Vector Graphics), este un format pentru imagini de tip vectorial, bazat pe XML fiind utilizat pentru grafică 2D, care permite interactivitatea și animația.

Dacă rezumăm toate cele trei tipuri, ajungem la următoarele concluzii:

1. JPG este cel mai bun pentru fotografii și imagini cu multe detalii
2. GIF este cel mai bun pentru imagini mici şi iconiţe
3. PNG combină cele mai bune aspecte ale formatelor GIF și JPG, dar în detrimentul dimensiunii fișierelor. Nu este suportat de browser-ele vechi.
4. SVG cel mai mare avantaj este posibilitatea de a scala imaginile la orice dimensiune fără să pierdem din calitate 

 

Imaginea trebuie să aibă rezoluţia şi dimensiunile corespunzătoare 

   Fiecare imagine este, de asemenea, compusă din pixeli, iar termenul de rezoluţie indică numărul de pixeli (puncte) per inch (dots per inch - dpi). Rezoluția standard în care majoritatea monitoarelor afişează site-urile este de 72 dpi, așa că imaginile ar trebui salvate întotdeauna la această rezoluție.

   În afară de rezoluție, trebuie să avem grijă şi de dimensiuni, adică de lățimea (engl. Width) și înălțimea (engl. Height) imaginilor. Dimensiunile trebuie să fie aceleași în care se va afişa şi imaginea pe pagină.

   Este important să reţinem că imaginile trebuie mai întâi pregătite în Adobe Photoshop sau într-un instrument similar și abia apoi importate în documentul HTML.

 

Adăugarea imaginilor

   Pentru a adăuga imagini pe o pagină HTML, folosim tag-ul <img>. Acest tag este cu autoînchidere, respectiv nu are nici început și nici sfârșit, dar trebuie să conțină următoarele două atribute:

• Src indică URL-ul din care se apelează imaginea (imaginea este întotdeauna în afara fişierului HTML)
• Alt defineşte textul care va fi afișat vizitatorului site-ului dacă, indiferent de motiv, imaginea nu este afişată

 

Atributele opţionale ale tag-ului img:

• Title – putem folosi acest atribut dacă vrem să introducem informații suplimentare despre o imagine. Majoritatea browser-elor moderne afișează textul ca un tooltip atunci când stăm cu mouse-ul deasupra imaginii.
• Width şi Height – lăţimea şi înălţimea imaginii în pixeli. Dacă nu sunt setate aceste atribute, browser-ul va încărca valorile din fișierul imaginii. 
• Align s-a utilizat pentru poziționarea imaginilor în raport cu elementele din jur. Comportamentul lor se poate observa în imaginea de mai jos: 

Imaginile, respectiv tag-urile img din limbajul HTML sunt aşa-numitele elemente inline. 

Edited May 1, 2020 by BeNy gL