Apprendimento HTML Parte 15: Tutorial Come creare collegamenti in HTML
Conoscerai sicuramente giàil termine "collegamento" perché su vari siti Web è possibile trovare collegamenti sotto forma di testo o immagini. La domanda è: come creare un collegamento in un documento HTML? Per rispondere a questa domanda, in questo articolo spiegherò come inserire un collegamento a un documento HTML e altre questioni relative al collegamento.
Il collegamento viene utilizzato come collegamento tra unouna pagina con un'altra pagina. Più chiaramente, l'uso di collegamenti in HTML è di collegare il documento HTML a un'altra pagina che è l'indirizzo di destinazione. Il collegamento è un testo o un'immagine associati a un indirizzo specifico. Per capire meglio il materiale "Link", considera la spiegazione seguente:
a. Uso del tag <a>
L'uso dei collegamenti nei documenti HTML è indicato dal'uso di elementi di ancoraggio, ovvero tag associati <a> …… </a>. Nei browser, i collegamenti sono generalmente contrassegnati da un testo blu che ha una sottolineatura. Se si fa clic su un testo o un'immagine che contiene un collegamento, il percorso del collegamento verrà aperto nella scheda stessa o in una nuova scheda. Gli attributi contenuti nel tag <a> sono i seguenti:
| attributo | funzione |
| href | Indica la posizione del documento di destinazione |
| id | Collega fogli di stile (CSS) o segna posizioni su una pagina |
| hreflang | Indica la lingua utilizzata |
| tipo | Fornire note sul tipo di contenuto del documento di destinazione |
| rotaia | Descrivere la relazione del documento corrente con il documento di destinazione |
| rev | Descrivere la relazione tra il documento di destinazione e il documento originale |
| charset | Specifica il carattere della codifica del documento Web |
| titolo | Fornisce il titolo di un collegamento nella descrizione comando |
Ecco un semplice esempio di utilizzo dei collegamenti in HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Link Di HTML</title>
</head>
<body>
<p>Anda sedang belajar HTML di blog <a href="https://www.nesabamedia.com">Nesaba Media</a></p>
</body>
</html>Dopo aver eseguito il codice HTML sopra nel browser, verrà visualizzato come mostrato di seguito:
b. Attributo ID
L'attributo href nel tag <a> è usato perdichiarare un file di destinazione. Il percorso di destinazione HTML all'interno del tag <a> può essere seguito utilizzando l'attributo id che viene utilizzato per portare il lettore a una determinata parte del documento.
Per facilitare la comprensione, prova a scrivere "#about" sull'attributo href sul link e scrivi l'attributo id = "about" sul tag <p>. Per esempi di scrittura di codice puoi vedere di seguito:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Link Di HTML</title>
</head>
<body>
<p>Klik <a href="#tentang">Tentang</a> untuk mengetahui informasi mengenai Nesaba Media</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="tentang">Nesabamedia.com merupakan seputar tutorial komputer, internet dan jaringan komputer.</p>
</body>
</html>I risultati nel browser saranno così:
Ho volutamente usato molti tag persemplifica la comprensione della funzione di questo attributo. Quando fai clic sul link "Informazioni", verrai immediatamente indirizzato a questa parte della frase "Nesabamedia.com tratta tutorial per computer ... ...".
c. Attributo del titolo
Quindi, se usi l'attributo title,quindi il contenuto del titolo verrà visualizzato come una descrizione comandi che verrà visualizzata se si passa il mouse sopra il collegamento. Ecco un esempio di scrittura in HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Link Di HTML</title>
</head>
<body>
<a href="https://id.wikipedia.org/wiki/Soekarno">Biografi</a>
</body>
</html>Dopo aver eseguito il codice sopra, vedrai una schermata come quella sotto quando passi il mouse sul link Biografia:
d. Differenze nei collegamenti esterni e nei collegamenti locali
I collegamenti esterni vengono utilizzati per aprire pagine Webresidente in un altro sito Web (dominio diverso), di solito seguito scrivendo l'indirizzo completo del percorso di destinazione con la sezione "http: //". Ecco un esempio di scrittura e utilizzo in HTML:
<!DOCTYPE html>
<html>
<head>
<title>External Link</title>
</head>
<body>
<p>Untuk mengetahui informasi lengkap mengenai Bill Gates, klik <a href="https://en.wikipedia.org/wiki/Bill_Gates">Biografi</a></p>
</body>
</html>Dopo aver eseguito il codice HTML nel browser, apparirà come di seguito:
A differenza del collegamento locale utilizzato per aprire una pagina Web sullo stesso sito Web o radice del documento. Ad esempio l'indirizzo del tuo sito web www.nesabamedia.com e sul sito web c'è una pagina chiamata belajarpiano.html, Se si desidera creare un collegamento a quella pagina, non è necessario scrivere l'URL completo come www.nesabamedia.com/belajarpiano.html nell'attributo href, basta scrivere belajarpiano.html solo. Esempi di scrittura come di seguito:
<!DOCTYPE html>
<html>
<head>
<title>Local Link</title>
</head>
<body>
<p>Klik <a href="belajarpiano.html">link ini</a> untuk membaca tutorial belajar piano yang benar</p>
</body>
</html>Un altro esempio come questo, supponiamo di avere una cartella chiamata Impara l'HTML, All'interno della cartella ci sono 2 file html e 2 cartelle, ognuna delle quali ha 1 file html. Per essere chiari, la struttura delle cartelle è simile alla seguente:
Quindi ecco qua, diciamo solo che sono attualmentemodifica il file chiamato webku.html e voglio creare un link che porta alla pagina del mio story.html, quindi ho solo bisogno di scrivere il codice HTML in questo modo:
<a href="cinta/kisahku.html">Supponendo che sto ancora modificando il mio file web.html, ma questa volta voglio creare un link che punti alla mia pagina di carriera, html, quindi il codice HTML sarà così:
<a href="bisnis/karirku.html">Sto ancora modificando il mio file web.html. Se voglio creare un collegamento che punti alla pagina post.html, il codice HTML è così:
<a href="posting.html">Utilizzando i collegamenti locali, non è necessario scrivere per intero l'indirizzo della pagina in cui si desidera andare.
Fare foto come link
Ci sono momenti in cui vogliamo fare un'immagine comecollegamenti per esigenze specifiche come la creazione di un pulsante che porta a un'altra pagina, in cui il pulsante è effettivamente costituito da immagini. Per esempi di codice HTML puoi vedere di seguito:
<!DOCTYPE html>
<html>
<head>
<title>Gambar sebagai Link</title>
</head>
<body>
<p>Klik tombol dibawah ini jika anda ingin membaca halaman posting.<br>
<a href="posting.html"><img src="/images/tombol.jpg" alt="halaman posting"></a>
</p>
</body>
</html>Dopo aver eseguito il codice HTML sopra nel browser, appare come di seguito:
Quando fai clic sull'immagine del pulsante, lo faraireindirizzato alla pagina post.html. Oh sì, per aver scritto <img scr = "indirizzo immagine" ... assicurati che sia corretto, se è sbagliato l'immagine non verrà visualizzata. Nel codice HTML sopra, file tombol.jpg L'ho messo in una cartella con il file html, quindi ho appena scritto <img src = "button.jpg" ... non è necessario scrivere l'indirizzo completo del file immagine. E per il file html l'ho chiamato gambar.html mentre il file immagine che ho nominato il pulsante.
Se capisci il concetto di collegamenti locali di cui ho discusso in precedenza, non sarai confuso in questo passaggio.
d. Attributo target sul collegamento
L'attributo target viene utilizzato per specificare ospecificare come viene visualizzato un percorso di destinazione dopo aver fatto clic sul collegamento per sapere se è stato aperto nella scheda / finestra corrente o in una nuova scheda / finestra. Di seguito sono riportati i valori negli attributi di destinazione che è possibile utilizzare:
| attributo | funzione |
| _ vuoto | Aprire la pagina Web di destinazione in una nuova scheda o finestra |
| _self | Apri la pagina Web di destinazione nella scheda o finestra corrente (impostazione predefinita) |
| _parent | Aprire la pagina Web di destinazione nel frame principale |
| _top | Apre la pagina Web di destinazione nella scheda o nella finestra aperta, annullando tutti i frame |
Ricorda, in HTML5, utilizzando "_parent"e "_top" è stato deprecato perché il sito Web non è ora scritto in base a frame o set di frame. Inoltre questi due attributi sono usati raramente. Se non si specifica un attributo target sul collegamento, per impostazione predefinita la pagina Web di destinazione verrà aperta nella scheda o nella finestra attualmente aperta ("_self").
Di seguito è riportato un esempio del codice di scrittura e l'utilizzo dell'attributo target = "_ blank" in HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Target _blank</title>
</head>
<body>
Baca selengkapnya mengenai tutorial HTML hanya di <a href="https://www.nesabamedia.com" target="_blank">Nesaba Media</a>
</body>
</html>Dopo aver eseguito il codice sopra nel browser, verrà visualizzato come mostrato di seguito:
Questo è il tutorial su come creare un collegamento in HTML insiemeuna spiegazione dei tag e degli attributi associati ai collegamenti in HTML. Il prossimo materiale che devi imparare è come aggiungere immagini in HTML.
