Capitolul 2: HTMLAncore
Din perspectiva unui user, cel mai folosit element de pe Web este link-ul. Acesta îți permite să navighezi de la o pagină la alta. Însă în HTML un link nu este dat prin elementul <link>
(element care există dar are altă întrebuințare), ci prin elementul <a>
<a href="undeva.html"> Aici e linkul dumneavoastră </a>
În continuare, am să le numesc „ancore”.
Ancorele pot avea mai multe atribute, dar cel mai important este href
. Aici definim unde va ajunge utilizatorul atunci când apasă pe ancoră.
Ancore spre alt fișier
Atunci când vrem ca link-ul nostru să ducă spre alt fișier HTML, sau altă adresă din același site, punem calea spre fișier, relativ la fișierul în care suntem.
Iată câteva situații:
Ancore spre alt site
Atributul href poate avea un URL complet, începând cu http:// sau https://
<a href="https://www.ScoalaWeb.ro/"> Această ancoră ar deschide site-ul ScoalaWeb </a>
Ancore în interiorul paginii
Dacă vrem să navigăm în interiorul documentului în care ne aflăm, cum face Wikipedia, va trebui să creăm un element cu id="nume-ales-de-noi"
și link-uri cu href="#nume-ales-de-noi"
.
Exemplu:
<a href="#partea-interesanta"> Această ancoră va face scroll la partea interesanta </a>
Presupunem că sunt multe chestii aici...
<h2 id="partea-iteresanta"> Partea interesantă </h2>
Ancorele cu #hashtag pot fi folosite și împreună cu un URL sau o cale spre un fișier. În acest caz, se va deschide acel URL sau fișier, direct la elementul din hashtag:
<a href="https://en.wikipedia.org/wiki/Tim_Berners-Lee#Personal_life">
Ancore spre alte servicii
Ancorele din HTML pot inclusiv să deschidă alte aplicații.
Dacă atributul href
începe cu mailto:
, browserul va deschide aplicația de e-mail. Se poate include și o adresă, care să fie pusă automat, dar și alte detalii
Exemplu:
<a href="mailto:cornel@scoalaweb.ro?subject=Ce faci?&body=De ce nu răspunzi?"> Dă-mi un e-mail </a>
Se mai poate folosi prefixul tel:
, urmat de un număr de telefon, pentru a deschide aplicația de telefon.
<a href="tel:+40765432109"> Sună-mă </a>
Notă: acesta nu este numărul meu de telefon. Habar nu am cine o să răspundă dacă încercați să sunați.
Se pot folosi și alte prefixe de servicii în href
, dar trebuie să existe o aplicație instalată pe dispozitiv care suportă acel serviciu.