I link e le immagini sono due delle risorse più comuni che aggiungerai alle tue pagine web, quindi sapere come indirizzarli correttamente è fondamentale.
I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione.
Ogni sito Web deve fare riferimento a determinate risorse, siano esse immagini, file o altre pagine Web. Decidere come collegarsi ad altri file è estremamente importante per garantire che i browser li individuino correttamente.
Puoi collegarti alle risorse utilizzando un URL relativo o assoluto. Questo vale sia per i file locali su un computer che per gli URL basati su protocollo a cui si accede tramite il Web.
Come utilizzare un percorso URL assoluto
Un URL assoluto contiene l'intero percorso di un particolare percorso di file. Esempi di questi includono il percorso completo dei file sul tuo computer:
- file:///C:/Users/Sharl/Desktop/test.html
- file:///C:/Users/John/Documents/Work/Q4Summary.docx
- file:///C:/Users/Mark/Documents/Music/Recording.mp3
Un altro esempio include un URL di protocollo completo, che puoi utilizzare per identificare una risorsa da inviare su Internet. Più comunemente, iniziano con "https" o "http":
- https://www.google.com
- https://calendar.google.com/calendar
- https://www.airbnb.com.au/rooms
L'URL assoluto contiene tutte le informazioni necessarie per individuare il file o la risorsa a cui stai tentando di accedere. Questo è necessario se ti stai collegando a un sito esterno.
- Costruisci un semplice sito web in HTML creando una nuova cartella e aggiungendo due nuovi file chiamati indice.html E styles.css.
- In indice.html, aggiungi del codice HTML per creare un sito web di base:
<!DOCTYPE html>
<html lang="it">
<Testa>
<titolo> Il mio sito web </title>
<meta set di caratteri="UTF-8">
<nome meta="finestra" contenuto="width=larghezza-dispositivo, scala-iniziale=1">
<collegamento rel="foglio di stile" href="styles.css" />
</head>
<corpo>
<classe div="contenitore">
<h1> Il mio sito web </h1>
<P> Benvenuti nel mio sito web. </P>
</div>
</body>
</html> - In styles.css, aggiungi uno stile alla pagina web.
corpo {
famiglia di caratteri: Arial, Helvetica, sans-serif;
}.contenitore {
display: flessibile;
direzione flessibile: colonna;
align-items: centro;
}.mb28 {
margine inferiore: 28px;
} - In indice.html, aggiungi un tag all'interno del contenitore div e aggiungi l'URL assoluto al sito principale di Google ( https://www.google.com).
<a href="https://www.google.com" classe="MB28">Google. com</UN> - È inoltre possibile accedere alle immagini online utilizzando il percorso assoluto completo del file memorizzato. Puoi anche eseguire passaggi aggiuntivi per assicurarti di aver aggiunto immagini reattive al tuo codice HTML pagina web.
<img src="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=formato&adatta=ritaglia&w=3870&q=80" alternativo="Foto di uccello carino" classe="MB28" larghezza="900" altezza="600"> - Clicca sul indice.html file per aprirlo in un browser e visualizzare l'immagine recuperata dalla sua posizione esterna.
- Dalla cartella principale del tuo sito Web, crea una nuova cartella per archiviare le immagini, chiamata immagini. All'interno della cartella, aggiungi una nuova immagine e assegnale un nome, ad esempio CuteBird.jpg.
- Identifica il percorso assoluto del file immagine che hai appena aggiunto. Puoi farlo trovandolo nel percorso di navigazione dell'app di gestione file del tuo sistema operativo. Sarà inoltre necessario aggiungere il nome del file alla fine del percorso. Ad esempio, "C:\Users\Sharl\Desktop\Website\Images\CuteBird.jpg"
- In indice.html, sostituisci il tag immagine con una nuova immagine che utilizza il percorso assoluto che punta a CuteBird.jpg file memorizzato sul tuo computer. Ricordarsi di aggiungere il prefisso file:// per indicare una risorsa del filesystem locale. Su Unix e macOS, puoi quindi aggiungere il percorso assoluto identificato nel passaggio precedente. Su Windows, dovrai sostituire le barre rovesciate con le barre e aggiungere una barra in avanti extra prima della lettera dell'unità, ad esempio:
- Clicca sul indice.html file per aprirlo in un browser e visualizzare l'immagine memorizzata sul computer.
Come utilizzare un percorso URL relativo
Un URL relativo memorizza solo una parte dell'URL o del percorso e di solito è relativo alla posizione del file o della sezione corrente di un sito web.
Nell'esempio precedente, per accedere Logo.ico da indice.html utilizzando un URL relativo, useresti il percorso "Immagini/Icone/Logo.ico". Altri esempi includono:
- Pages/Bird1.html
- Images/CuteBird.jpg
- styles.css
Quando utilizzi la stessa struttura di cartelle su un altro computer, il sito Web sarà comunque in grado di recuperare il file. Quando si esegue il routing sul Web, invece di utilizzare il collegamento completo come " https://example.com/about", puoi invece utilizzare il routing relativo:
- /about
- /contact
- /projects/local-clients
Puoi utilizzare un URL relativo per creare collegamenti o immagini di riferimento all'interno della tua pagina Web HTML.
- All'interno della root della directory del tuo sito web, crea una nuova cartella chiamata Pagine.
- All'interno della nuova cartella Pages, crea un nuovo file chiamato Uccello1.html.
- Popolare Uccello1.html con codice HTML per creare la pagina.
<!DOCTYPE html>
<html lang="it">
<Testa>
<titolo> Uccello 1 </title>
<meta set di caratteri="UTF-8">
<nome meta="finestra" contenuto="width=larghezza-dispositivo, scala-iniziale=1">
<collegamento rel="foglio di stile" href="../styles.css" />
</head>
<corpo>
<classe div="contenitore">
<h1> Caffè </h1>
<P> Il caffè è un dolce uccellino che ama giocare! </P>
</div>
</body>
</html> - All'interno del contenitore div, aggiungi un tag immagine e utilizza un URL relativo per collegarti al file CuteBird.jpg Immagine.
<img src="../Images/CuteBird.jpg" alternativo="Foto di uccello carino" classe="MB28" larghezza="900" altezza="700"> - Nel indice.html file, rimuovere il contenuto esistente all'interno del contenitore div. Sostituiscilo con un singolo UN tag che utilizza un collegamento relativo per aprire il file Uccello1.html file.
<classe div="contenitore">
<h1> Il mio sito web </h1>
<P> Benvenuti nel mio sito web. </P>
<a href="Pages/Bird1.html" classe="MB28">Uccello 1: Caffè</UN>
</div> - Clicca sul indice.html file per aprirlo in un browser e fare clic sul nuovo collegamento per accedervi Uccello1.html.
Ora puoi determinare la differenza tra URL assoluti e relativi. Ora puoi prestare particolare attenzione per assicurarti che le tue risorse vengano sempre recuperate.
Dovresti anche assicurarti sempre che tutti i collegamenti a cui i tuoi utenti possono accedere siano sicuri e protetti.