Collegamenti
Note:
I collegamenti ipertestuali sono essenziali per collegare i siti Web e i contenuti. Per creare un collegamento, è sufficiente utilizzare l'opzione Inserisci collegamento in Word o nel documento Google.
È possibile aggiungere collegamenti a tutto il contenuto predefinito e alle diverse opzioni di formattazione.
In Word e Google Docs sono accettati solo collegamenti assoluti, che in genere è più facile da copiare e incollare dal browser. I collegamenti vengono automaticamente convertiti in relativi al sito, mentre i collegamenti esterni vengono mantenuti assoluti.
I collegamenti vengono spesso utilizzati oltre i collegamenti di testo e i riferimenti, ad esempio elementi multimediali incorporati o frammenti di riferimento allineati nella pagina.
Esempio:
Struttura contenuto:
Visualizza contenuto nel documento
Codice:
Poiché i collegamenti sono considerati Contenuto predefinito, hanno uno stile nel codice CSS del progetto o del blocco. In genere non viene utilizzato alcun codice JavaScript.
Nel progetto boilerplate non è presente alcun codice di stile relativo al collegamento.
Menzione speciale: Microsoft Word Online non consente collegamenti sulle immagini. Una soluzione consiste nel consentire agli autori di inserire un collegamento direttamente sotto l'immagine e quindi di racchiuderlo sul lato client, ad esempio
/**
* Wraps images followed by links within a matching <a> tag.
* @param {Element} container The container element
*/
function wrapImgsInLinks(container) {
const pictures = container.querySelectorAll('picture');
pictures.forEach((pic) => {
const link = pic.nextElementSibling;
if (link && link.tagName === 'A' && link.href) {
link.innerHTML = pic.outerHTML;
pic.replaceWith(link);
}
});
}
Menzione speciale: si consiglia di gestire alcuni collegamenti che devono essere aperti in una nuova finestra a seconda che si tratti di collegamenti esterni o di PDF (ad esempio) sul lato client, ad esempio
/**
* Handles external links and PDFs to be opened in a new tab/window
* @param {Element} main The main element
*/
export function decorateExternalLinks(main) {
main.querySelectorAll('a').forEach((a) => {
const href = a.getAttribute('href');
if (href) {
const extension = href.split('.').pop().trim();
if (!href.startsWith('/')
&& !href.startsWith('#')) {
if (!href.includes('xyz.com') || (extension === 'pdf')) {
a.setAttribute('target', '_blank');
}
}
}
});
}