Come ancorare HTML. Ancora HTML sulla pagina

Internet è diventato a lungo parte integrante della vita di tutti i giorni. Le persone sono felici di visitare vari siti per leggere notizie, condividere foto, passare un po 'di tempo a guardare video divertenti o fare acquisti.

E nonostante il fatto che l'era delle tecnologie e delle applicazioni mobili stia arrivando, le tecniche di creazione di pagine web belle e accattivanti continuano a migliorare. Pochi utenti capiscono cosa si nasconde dietro le quinte del loro browser preferito e cosa succede quando pagano sul sito per gli acquisti con le loro carte di credito. Ma in realtà, dietro tutto questo, ci sono migliaia di righe di codice che sono state sviluppate e migliorate nel corso degli anni per garantire l'esperienza più comoda e piacevole dall'utilizzo del servizio web. Ancoraggio HTML, collegamento ipertestuale, markup, titoli - questi e molti altri concetti saranno ulteriormente descritti in questo articolo.

La base della pagina web

Al fine di creare siti Web e pagine su Internet che potessero aprirsi e apparire uguali in dozzine di browser diversi su più piattaforme contemporaneamente, era necessario creare una specifica singola per questo tipo di documenti. Questa specifica era HTML (dall'inglese HyperText Markup Language).
Tradotto, significa "linguaggio di markup ipertestuale". E questo termine descrive il suo scopo abbastanza accuratamente. La struttura di un documento HTML non descrive il contenuto della pagina Web stessa, ma semplicemente "traccia" diverse sezioni, dando loro determinati attributi o proprietà. Questo markup consente al documento di apparire identico dal browser al browser ed è anche la chiave per i protocolli di trasferimento dati correnti sul Web globale - HTTP e HTTPS.

Struttura del documento HTML

La base di qualsiasi documento HTML è un numero pari di tag. Queste sono note speciali che danno al contenuto alcune proprietà. La caratteristica fondamentale dei tag è che devono essere messi in coppia: il primo tag è "open" e il "closing" deve sempre seguirlo.

Pertanto, il browser sa esattamente quali sono i limiti degli attributi specificati dal tag. Tuttavia, il tag potrebbe essere vuoto (non contenente alcun contenuto all'interno). Un esempio di quest'ultimo è un elemento newline. Tag che non contengono all'interno di alcun testo o altri dati, non è necessario chiudere. I tag possono essere usati per dare al testo uno specifico colore o stile, o per incorporare elementi speciali (tabelle, file multimediali, collegamenti) nel documento.

Link di ancoraggio e documento HTML

Per consentire ai visitatori del sito di navigare tra pagine diverse o all'interno di una pagina, è possibile utilizzare i collegamenti. Per spostarsi all'interno di un sito o diversi collegamenti ipertestuali vengono utilizzati. Solitamente sono utilizzati per la comunicazione tra due aree completamente diverse della risorsa.

Una delle regole di un buon design di un sito Web è la regola della necessità di fondere in un unico posto solo omogeneo nel tipo o scopo del contenuto. Se la pagina diventa molto grande o è divisa in sezioni logiche, allora ha senso consentire all'utente di spostarsi rapidamente tra le sezioni della pagina. E qui l'ancoraggio HTML cosiddetto sarà molto utile. Spesso questa tecnica viene utilizzata nella progettazione dell'intestazione, per collegarla alla parte di informazione di destinazione. Inoltre, questo tipo di navigazione è estremamente conveniente da utilizzare a fini promozionali, indirizzando l'utente a determinati contenuti, ignorando tutti gli altri.

Per utilizzare l'ancoraggio HTML con scorrimento uniforme, lo sviluppatore deve incorporare un collegamento a una libreria JavaScript nella struttura del documento.

Come creare

Per inserire un ancoraggio HTML nella pagina, viene utilizzato un tag di collegamento standard. Questo è uno dei tag principali nella struttura di un documento HTML.
Può avere un numero di attributi, come href o nome, che indicano il tipo di collegamento descritto da questo tag. Il collegamento di ancoraggio HTML è diverso dal collegamento ipertestuale che utilizza il simbolo "#". Dopo di ciò, è necessario specificare il nome univoco dell'ancora in modo che il browser possa determinare in modo univoco il target per la transizione. È estremamente importante non dimenticare che all'interno dello stesso documento non è possibile assegnare due nomi identici, tuttavia ciò è consentito su diverse pagine del sito.

Un esempio di creazione di un ancoraggio nella struttura del documento

Quindi, come ancorare un HTML su una pagina? Per prima cosa è necessario selezionare l'area del documento che servirà. Può essere un sottotitolo all'interno di un testo grande. Tali sottotitoli sono solitamente etichettati.

L'identificatore di ancoraggio è solitamente impostato nel tag di apertura e l'attributo id = viene utilizzato per descriverlo. Questo è seguito dal nome unico dell'ancora stesso. Questo attributo può essere contenuto in quasi tutti i tag di apertura. Dopo aver chiamato l'ancoraggio HTML sulla pagina, tutto ciò che dobbiamo fare è creare un collegamento ad esso in un'altra parte del documento o in un altro documento.

Questi sottotitoli sono solitamente taggati.

. L'identificatore di ancoraggio è solitamente impostato nel tag di apertura e l'attributo "id =" è usato per descriverlo. Questo è seguito dal nome unico dell'ancora stesso. Questo attributo può essere contenuto in quasi tutti i tag di apertura. Dopo aver stabilito il nome dell'ancoraggio html, tutto ciò che dobbiamo fare è creare un collegamento ad esso in un'altra parte del documento o in un altro documento. Il collegamento all'ancora all'interno dello stesso documento viene spesso chiamato locale, mentre il collegamento a diversi documenti è definito assoluto.

Tuttavia, l'utilizzo di HTML da solo è difficile da raggiungere con facilità nelle transizioni tra le ancore. Ma questo approccio porterà al fatto che l'utente è aggrovigliato nella navigazione sulla pagina o tra le pagine e quindi guasta la loro impressione di utilizzare la risorsa. Nel caso di ancoraggi locali, è molto più preferibile utilizzare l'ancoraggio HTML con scorrimento uniforme, in modo che il visitatore del sito possa monitorare visivamente la direzione in cui l'amministrazione lo guida attraverso la risorsa.

Per creare questo effetto, è necessario ricorrere a JavaScript. Il principio di funzionamento del piccolo script sarà il seguente: prima di tutto dobbiamo bloccare il comportamento standard dell'ancora HTML sulla pagina. Questo è necessario in modo che il browser non decida di reindirizzare il visitatore sul link. Dopo questo, il nostro script elabora l'identificatore contenuto nel tag . Il nome dell'ancora HTML viene mantenuto, viene cercato nel documento per trovare la destinazione per la nostra animazione. Quando viene trovato il target, lo script calcola la distanza dall'inizio della pagina al punto più in alto dell'elemento a cui ci siamo riferiti. Questa distanza verrà utilizzata per animare senza problemi lo scorrimento delle pagine. Abbiamo solo bisogno di determinare la velocità di scorrimento per noi stessi.

Regola speciale

Quando si progettano pagine Web, i progettisti devono sempre ricordare che è sbagliato sovraccaricare una pagina con informazioni, in quanto ciò potrebbe comprometterne la percezione. E se hai bisogno di dare all'utente la possibilità di andare rapidamente in una parte importante della pagina, allora non c'è niente di più semplice e migliore per questo scopo rispetto all'utilizzo di un ancoraggio HTML. L'animazione della transizione tra le diverse parti della pagina è implementata da diverse linee di codice JavaScript, e l'effetto di esso è significativo - l'utente sarà sempre consapevole di quale parte del documento si trova e dove ha bisogno di andare dopo.