Linkuri HTML
Linkurile se găsesc pe aproape fiecare pagină web. Le permit utilizatorilor să treacă, printr-un click, de la o pagină la alta.
Linkuri HTML - Hyperlinkuri
Linkurile HTML sunt hyperlinkuri. Apeși pe un link pentru a sări la un alt document, iar când muți mausul peste un link, cursorul se transformă într-o mânuță.
Notă: Un link nu trebuie neapărat să fie text. Poate fi o imagine sau orice alt element HTML.
Linkuri HTML - Sintaxă
Tag-ul <a> definește un hyperlink. Cel mai important atribut al său este href, care setează destinația linkului. Textul linkului este partea vizibilă pe care cititorul o apasă pentru a ajunge la acea adresă.
Implicit, un link nevizitat este subliniat și albastru, un link vizitat este subliniat și mov, iar un link activ este subliniat și roșu.
Sfat: Linkurile pot fi stilizate cu CSS pentru a arăta diferit.
Exemplu
Un link către PromptCookbook.
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link de bază</title>
</head>
<body>
<a href="https://prompt-cookbook.com">Vizitați PromptCookbook!</a>
</body>
</html>
Sintaxa unui link
Forma unui hyperlink.
<a href="url">link text</a>
Linkuri HTML - Atributul target
Implicit, un link se deschide în fereastra curentă. Atributul target schimbă locul în care se deschide documentul legat. Valorile sale sunt: _self (implicit, aceeași fereastră sau filă), _blank (o fereastră sau filă nouă), _parent (cadrul părinte) și _top (întreaga fereastră).
Exemplu
Un link care se deschide într-o filă nouă cu target="_blank".
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Deschidere în tab nou</title>
</head>
<body>
<a href="https://prompt-cookbook.com" target="_blank">Vizitați PromptCookbook!</a>
</body>
</html>
URL-uri Absolute vs. URL-uri Relative
Un URL absolut este o adresă web completă, precum https://www.w3.org/. Un URL relativ indică o pagină din același site web și omite partea https://www.
Exemplu
O pagină cu linkuri atât absolute, cât și relative.
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>URL-uri absolute și relative</title>
</head>
<body>
<h2>URL-uri absolute</h2>
<p><a href="https://www.linkedin.com">Linkedin</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>URL-uri relative</h2>
<p><a href="PromptCookbook.jpg">Imagini HTML</a></p>
<p><a href="/html/html-intro">Tutorial HTML</a></p>
</body>
</html>
Linkuri HTML - Folosește o Imagine ca Link
Pentru a folosi o imagine ca link, pune tag-ul <img> în interiorul tag-ului <a>.
Exemplu
O imagine care funcționează ca un link.
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link imagine</title>
</head>
<body>
<a href="https://prompt-cookbook.com">
<img src="/sites/default/files/html/HtmlLinks/smiley.gif" alt="Tutorial HTML" style="width:42px;height:42px;">
</a>
</body>
</html>
Legarea la o Adresă de Email
Folosește mailto: în interiorul href pentru a crea un link care deschide programul de email al utilizatorului cu un mesaj nou.
Exemplu
Un link care începe un email nou.
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link de email</title>
</head>
<body>
<a href="mailto:[email protected]">Trimite email</a>
</body>
</html>
Buton ca Link
Pentru a face un buton să se comporte ca un link, adaugă puțin JavaScript care rulează la apăsarea butonului și schimbă locația paginii.
Exemplu
Un buton care navighează ca un link atunci când este apăsat.
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buton ca link</title>
</head>
<body>
<button onclick="document.location='https://prompt-cookbook.com'">Tutorial HTML</button>
</body>
</html>
Titluri de Link
Atributul title oferă informații suplimentare despre un element, de obicei afișate ca un tooltip atunci când mausul se deplasează deasupra lui.
Exemplu
Un link cu un tooltip din atributul său title.
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titlul linkului</title>
</head>
<body>
<a href="https://prompt-cookbook.com" title="Mergeți la secțiunea HTML PromptCookbook">Vizitați tutorialul nostru HTML</a>
</body>
</html>
Mai Multe Despre URL-uri Absolute și Relative
Poți lega cu un URL complet, o cale relativă la domeniu, sau o cale relativă la folderul paginii curente.
URL Complet
Un link folosind o adresă web completă.
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link complet</title>
</head>
<body>
<a href="https://prompt-cookbook.com">Tutorial HTML</a>
</body>
</html>
Relativ la Domeniu
Un link către o pagină din folderul html al site-ului curent.
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Domeniul linkului</title>
</head>
<body>
<a href="/html/html-intro">Tutorial HTML</a>
</body>
</html>
Același Folder
Un link către o pagină din același folder.
Ieșire: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Folderul linkului</title>
</head>
<body>
<a href="/html/html-intro">Tutorial HTML</a>
</body>
</html>
Rezumatul Capitolului
Pe scurt: folosește elementul <a> pentru a crea un link, atributul href pentru a-i seta adresa, și atributul target pentru a seta unde se deschide. Pune un <img> în interiorul unui <a> pentru a folosi o imagine ca link, și folosește mailto: în href pentru a deschide programul de email al utilizatorului.
Tag-uri HTML pentru Linkuri
Tag-ul principal de aici este <a>, care definește un hyperlink.