Link-uri

Lagaturile (link-urile) reprezinta partea cea mai importanta a unei pagini Web.

Ele transforma un text obisnuit in hipertext sau hiperlegatura, 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. De obicei link-ul este subliniat iar atunci când suntem deasupra lui cursorul își schimbă forma.

Link-ul este definit cu etichetele <a> și </a> și are atributele:

• href - adresa fișierului destinație

• target - în ce fereastră se va deschide fișierul destinație
• title - o mică descriere asociată legăturii afișată în momentul în care mouse-ul se află deasupra legăturii

Adresa fișierului destinație (href) reprezinta o adresa de tip URL.

Atributul target poate lua valorile:

• _blank - pagina va fi încărcată într-o nouă fereastră

• _parent - pagina va fi încărcată în fereastra părinte
• _top - pagina va fi încărcată în fereastra top a cadrului
• _self - pagina va fi încărcată în aceeași fereastră (implicita, daca nu este completat atributul target)

Culoarea link-urilor poate fi modificată introducând în eticheta body următoarele atribute:

• LINK - legătură nevisitată (default albatru)

• VLINK - legătură vizitată (default rosu)

Ancore

Se pot adăuga puncte de reper (ancore) pentru o deplasare mai usoară în cazul unor pagini HTML lungi sau către un
loc anume aflat într-o altă pagină.
Ancora se definește tot între etichetele <a> și </a> dar cu atributul name. Pentru a face trimitere către ancoră se
introduce un link cu atributul href având ca valoare denumirea ancorei astfel:

Ancora <a name="nume">Ancora</a>

Link către ancora aflată în aceeași pagină <a href="#nume">Înapoi la ancora</a>
Link către ancora aflată în altă pagină <a href="pagina.html#nume">Înapoi la ancora din
pagina.html</a>
Attribute Value Description

charset char_encoding Not supported in HTML5.

Specifies the character-set of a linked document

coords coordinates Not supported in HTML5.

Page 1 of 5
 Specifies the coordinates of a link

href URL Specifies the URL of the page the link goes to

hreflang language_code Specifies the language of the linked document

media media_query Specifies what media/device the linked document

is optimized for

name section_name Not supported in HTML5. Use the global id

attribute instead.
Specifies the name of an anchor

rel alternate Specifies the relationship between the current

author document and the linked document
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag

rev text Not supported in HTML5.

Specifies the relationship between the linked
document and the current document

shape default Not supported in HTML5.

rect Specifies the shape of a link
circle
poly

target _blank Specifies where to open the linked document

_parent
_self
_top
framename

type media_type Specifies the media type of the linked document

Page 2 of 5
Imagini
Cum se insereaza o imagine in cod HTML?

Imaginea nu este text, ce cauta in HTML?

<img src="smiley.gif" alt="Smiley face" height="42" width="42" />

Atributele tagului IMG (imagine) in HTML:

Attribute Value Description

align top Not supported in HTML5.

bottom Specifies the alignment of an image according to
middle surrounding elements
left
right

alt text Specifies an alternate text for an image

border pixels Not supported in HTML5.

Specifies the width of the border around an image

crossorigin anonymous Allow images from third-party sites that allow cross-
use-credentials origin access to be used with canvas

height pixels Specifies the height of an image

hspace pixels Not supported in HTML5.

Specifies the whitespace on left and right side of an
image

ismap ismap Specifies an image as a server-side image-map

longdesc URL Not supported in HTML5.

Specifies the URL to a document that contains a long
description of an image

src URL Specifies the URL of an image

usemap #mapname Specifies an image as a client-side image-map

vspace pixels Not supported in HTML5.

Specifies the whitespace on top and bottom of an
image

width pixels Specifies the width of an image

Page 3 of 5
Ce este URL-ul?

URL = Uniform Resource Locator: este protocolul ce ne ajuta sa scriem si sa cautam adresa unei pagini dintr-un site
din Internet.

Partea de inceput a unei adrese URL, de obicei, incepe cu protocolul folosit (de ex: http) urmat de numele
domeniului unde se gaseste fisierul dorit. Numele de domeniu nu este case-sensitive (nu conteaza daca scriem cu
majuscule sau minuscule).

Finalul adresei este construit din calea pana la fisier + numele si extensia fisierului. Calea si numele fisierului sunt
sensibile la majuscule (sunt case-sensitive)

Dupa numele fisierului se pot trimite valori pentru variabile trimise in protocolul HTTP GET. Pentru delimitare se
foloseste caracterul special “?”. De ex: ?first_name=John&last_name=Doe.

O adresa complete poate arata asa:

http://www.w3.org/TR/WD-html40-970917/htmlweb.html?first_name=John&last_name=Doe

sunt suportate si alte protocoale, nu numai http. De exemplu:

• mailto:pcostin@gmail.com
• ftp://ds.internic.net/rfc/rfc1808.txt
• etc ...

In adresele URL nu se admite caracterul spatiu si nici folosirea caracterelor speciale. Aceste caractere pot sa fie
folosite daca in prealabil au fost convertite in codul ASCII ("American Standard Code for Information Interchange").
Opertia de transcriere pentru a putea fi folosite in adrese se numeste URL-encode, Percent-encoding.

Spatial devine %20 sau se poate folosi caracterul +.

Adresa complete se numeste adresare absoluta. Exista si prescurtari ale adresarii. Acestea se bazeaza pe “distanta”
dintre fisiere, cel curent si cel pe care il adresez. De aceea poarta numele de adresare relativa.

Adresare relativa
1) Daca fisierul referit in URL se afla pe acelasi disc local se foloseste numai numele fisierului.

De ex: listex_11.jpg

2) 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.

De ex: ../../exemple/list/listex_11.jpg

.. /– inseamna intoarce-te un nivel

./ - inseamna pornind din radacina

Page 4 of 5
Exersati adresarea relative pornind de la imaginea de mai jos:

Page 5 of 5