HTML5 - Tutorial 6: Link HTML (Collegamenti ipertestuali)

💻 #HTML5 - Tutorial 6: HTML Links (Collegamenti HTML)

In questo tutorial del corso di HTML (in italiano) parleremo di links o collegamenti, più in particolare ci occuperemo di:

• Generalità dei links
• #Link #HTML - Sintassi
• Come modificare i colori di default dei links
• Link HTML - L'attributo target
• Link HTML - L'attributo title
• URL assoluti e URL relativi
• Link a un indirizzo e-mail
• Come creare segnalibri

I links si trovano in quasi tutte le pagine web.

I links HTML non sono altro che collegamenti ipertestuali che consentono agli utenti di spostarsi da un punto ad un altro di una pagina oppure da una pagina all'altra con un semplice clic.

NB: un collegamento non deve essere necessariamente di testo, può essere infatti un’immagine o qualsiasi altro elemento HTML.

📌 Il tag che definisce un collegamento ipertestuale è ＜a＞.

L'attributo più importante di quest'elemento è href che indica la destinazione del collegamento.

Testo del link è la parte che sarà visibile all’utente; facendo clic su questo testo, l’utente verrà inviato all'indirizzo URL specificato.

📌 Colori di un link

Per impostazione predefinita, i collegamenti verranno visualizzati (in tutti i browser) in questa maniera:
• un collegamento non visitato è sottolineato e blu
• un collegamento visitato è sottolineato e viola
• un collegamento attivo è sottolineato e rosso

Usando i CSS, é possibile personalizzare questi colori (ma anche l’aspetto in generale: sfondo, grandezza, sottolineatura ecc…) a seconda dello stato in cui si trova:

▶ a:link (collegamento non visitato)
▶ a:visited (collegamento che l'utente ha già visitato)
▶ a:hover (collegamento su cui l’utente passa sopra con il puntatore)
▶ a:active (collegamento nel momento in cui viene cliccato)

📌 L’attributo target

Per impostazione predefinita, la pagina collegata verrà visualizzata nella finestra del browser corrente.
Per modificare questa impostazione, è necessario specificare un'altra destinazione per il collegamento, attraverso l'attributo target.
L' attributo target può avere uno dei seguenti valori:

▶ _self - Predefinito. Apre il documento nella stessa finestra / scheda in cui è stato cliccato
▶ _blank - Apre il documento in una nuova finestra o scheda
▶ _parent - Apre il documento nel frame principale
▶ _top - Apre il documento nel corpo intero della finestra

📌 L’attributo title

L' attributo title specifica informazioni aggiuntive su un elemento. Queste informazioni vengono spesso visualizzate come tooltip quando il mouse si sposta sull'elemento.

📌 Collegamento a un indirizzo e-mail

Per creare un collegamento che apra il programma di posta elettronica predefinito dell'utente (per consentirgli di inviare una nuova email) basta utilizzare mailto: dentro l'attributo href

📌 Segnalibri

I links HTML possono essere utilizzati per creare segnalibri, in modo che gli utenti possano passare a parti specifiche di una pagina web.
Per questo motivo i segnalibri sono utilizzati specialmente in pagine molto lunghe.

La procedura da seguire è questa: anzitutto bisogna creare il segnalibro, dopodiché occorre aggiungere un collegamento ad esso.

Quando l’utente farà clic sul collegamento, la pagina scorrerà verso il basso o verso l'alto fino alla posizione con il segnalibro.

🇬🇧 ENGLISH VERSION 🇬🇧

📌 HTML Links - Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

Note: A link does not have to be text. A link can be an image or any other HTML element!

📌 Link Colors

By default, links will appear as follows in all browsers:

▶ An unvisited link is underlined and blue
▶ A visited link is underlined and purple
▶ An active link is underlined and red

Tip: Links can of course be styled with CSS, to get another look!

📌 HTML Links - The target attribute

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

▶ _self - Default. Opens the document in the same window/tab as it was clicked
▶ _blank - Opens the document in a new window or tab
▶ _parent - Opens the document in the parent frame
▶ _top - Opens the document in the full body of the window

📌 Link Bookmarks

HTML links can be used to create bookmarks, so that readers can jump to specific parts of a web page.

- Create a Bookmark in HTML

Bookmarks can be useful if a web page is very long.

To create a bookmark - first create the bookmark, then add a link to it.

When the link is clicked, the page will scroll down or up to the location with the bookmark.

💼 Ing. Francesca Martorana

[TizianoGallenzi-cjmk]

Sei fantastica per dindirindina. Mi ricordi la maestra delle elementari, e per come spieghi le cose sembra che tu mi stia insegnando a fare le addizioni, anzi qualcosa di ancora più semplice! ❤

[ladyansia]

Grazie, è sempre un piacere ascoltarti👍

[stayrock]

Mi sorge una domanda: sto facendo delle piccole esercitazioni per conto mio e ho realizzato una piccola pagina, con un titolo, un'immagine e un elenco puntato. Fin qui tutto ok, ma ora vorrei inserire il nome del sito dopo l'elenco, cosa dovrei fare? Andare a capo e inserire "br", digitare semplicemente "a href, oppure inserire anche un paragrafo'?

[virginiaalongi]

purtroppo il segnalibro nel mio sito non va! perché??