Tag yang membuat hyperlink ke dokumen lain. Membuat link dalam HTML. Membuka halaman html di jendela baru

29.10.2019 drive SSD

Dalam pelajaran ini, kita akan berbicara tentang cara menautkan di html. Tautan sangat sering digunakan di situs web, mereka memungkinkan Anda bernavigasi dari satu halaman situs ke halaman lainnya. Fitur tautan adalah tautan tidak hanya mengarah ke halaman web, tetapi juga ke file, gambar, dll.

Tautan bisa internal atau eksternal. Tautan internal menavigasi ke halaman dan file dalam situs yang sama. Tautan eksternal mengarah ke situs, dokumen, dan file pihak ketiga. Pada saat yang sama, jenis tautan ini diatur secara praktis dengan cara yang sama.

Cara membuat link dalam HTML, contoh

1. HREF— bertanggung jawab ke mana tautan harus mengarah. Tautan standar didefinisikan sebagai berikut: Teks tautan.

2. TARGET— bertanggung jawab atas jendela di mana dokumen akan dibuka. Bawaan dokumen baru terbuka di jendela browser saat ini. Atribut "target" memungkinkan Anda membuka tautan di jendela browser baru. Atribut ini memiliki parameter berikut:

_blank - memuat halaman di jendela baru;
_self - memuat halaman di jendela saat ini;
_parent - memuat halaman ke dalam bingkai induk;
_top - Membatalkan semua frame dan memuat halaman di jendela baru.

3. NAMA- digunakan untuk menavigasi ke area tertentu dalam halaman. Tanda pound diikuti oleh kata kunci (bookmark atau label) dalam tanda kutip. Untuk membuka label ini, gunakan tautan tempat label ini ditulis.

Contoh tautan eksternal
Pergi ke situs

Pergi ke situs

Pelajaran WordPress Gratis

Contoh 4: Gambar sebagai tautan.

Contoh gambar sebagai tautan

Contoh tautan ke tempat tertentu di halaman
Lewati ke teks

Teks halaman...

PADA contoh ini halaman diberi label "daftar" menggunakan atribut "nama". Menautkan ke label ini akan menavigasi ke area halaman tertentu.

Unduh berkas

Menulis sebuah surat

Anda dapat mengatur warna tautan menggunakan atribut yang ditentukan dalam tag "body" sebagai parameter. Pertimbangkan atribut ini:

tautan - tautan yang belum dikunjungi, secara default ditampilkan dengan warna biru;
alink - tautan aktif, merah secara default;
vlink adalah tautan yang dikunjungi, ungu secara default.

Contoh warna tautan ...

Jadi, kami menemukan bagaimana tautan dibuat dalam HTML. Tautan dapat ditata. Anda dapat melihatnya dalam pelajaran dengan mengklik tautan.

Tautan dapat dibagi menjadi dua kategori:
tautan ke sumber daya eksternal- dibuat menggunakan tag dan digunakan untuk meningkatkan kemampuan dokumen saat ini saat diproses oleh browser;
hyperlink- tautan ke sumber daya lain yang dapat dikunjungi atau diunduh pengguna.

Cara membuat hyperlink di situs web

1. Struktur tautan

Hyperlink dibuat menggunakan file . Di dalam tag ditempatkan teks yang akan ditampilkan pada halaman web. Teks tautan ditampilkan di browser dengan garis bawah, warna font biru, dan saat Anda mengarahkan kursor ke tautan, tampilan kursor mouse berubah.

Parameter tag wajib adalah atribut href, yang menentukan URL halaman web.

penunjuk tautan

Tautan memiliki dua bagian penunjuk dan bagian alamat. penunjuk tautan mewakili sepotong teks atau gambar yang terlihat oleh pengguna. Bagian alamat tautan tidak terlihat oleh pengguna, ini mewakili alamat sumber daya yang ingin Anda navigasikan.

Bagian alamat tautan terdiri dari URl. URL(Uniform Resource Locator) - alamat sumber daya yang seragam. Saat membuat alamat untuk memisahkan kata, disarankan untuk menggunakan tanda hubung daripada garis bawah. Secara umum, URl memiliki format berikut:

Metode akses://servername:port/path

Metode akses, atau protokol, bertukar data antara workstation di jaringan yang berbeda. Protokol transfer data yang paling umum:

file membaca file dari disk lokal:

File:/gallery/pictures/summer.html

http menyediakan akses ke halaman web menggunakan protokol HTTP:

http://situs.ru/

https adalah implementasi khusus dari protokol HTTP yang menggunakan enkripsi (biasanya SSL atau TLS)

https://situs.ru/

ftp membuat permintaan ke server FTP untuk mendapatkan file:

ftp://pgu/direktori/perpustakaan

mailto memulai sesi email dengan tujuan dan host yang ditentukan:

surat: [dilindungi email]

Nama server menggambarkan nama lengkap mesin di jaringan, misalnya, site.ru . Jika nama server tidak ditentukan, maka tautan dianggap lokal, mis. itu merujuk ke mesin yang sama dengan dokumen HTML yang berisi tautan.

nomor port TCP di mana server web berjalan. Ini adalah nomor yang harus ditentukan jika metode memerlukan nomor port (server individu mungkin memiliki nomor port sendiri yang berbeda). Jika tidak ada port yang ditentukan, port 80 digunakan secara default. Port standar adalah:
21 - FTP
23 - Telnet
70 - Gopher
80 - HTTP

Jalur berisi nama folder tempat file tersebut berada.

2. Jalur absolut dan relatif

Ketika hanya nama file yang ditentukan dalam tautan, browser mengasumsikan bahwa file berada di folder yang sama dengan dokumen yang berisi hyperlink. Dalam praktiknya, situs web berisi ratusan dokumen yang diposting di folder terpisah untuk membuat mereka lebih mudah untuk mengelola. Untuk membuat tautan ke file di luar folder yang berisi dokumen saat ini, Anda harus menentukan lokasi atau jalur file. HTML mendukung dua jenis jalur: absolut dan relatif.

Beras. 1. Contoh struktur folder

2.1. Jalan mutlak

Jalan mutlak menentukan lokasi yang tepat dari file dalam seluruh struktur folder di komputer (server). Jalur absolut ke file memberikan akses ke file dari sumber daya pihak ketiga dan berisi komponen berikut:
1) protokol, misalnya, http (opsional);
2) wilayah ( Nama domain atau alamat IP komputer);
3) folder (nama folder yang menunjukkan jalur ke file);
4) berkas (nama berkas).

Ada dua jenis catatan jalur absolut - dengan dan tanpa protokol:

http://site.ru/pages/tips/tips1.html //site.ru/pages/tips/tips1.html

Jika file tersebut berada di folder root, maka path ke file tersebut adalah sebagai berikut:

http://site.ru/index.html

Jika tidak ada nama file, halaman web yang diatur secara default di pengaturan server web (yang disebut file indeks) akan dimuat.

http://situs.ru/

Biasanya, file indeks adalah dokumen bernama index.html . Adanya garis miring / berarti alamat masuk ke folder, jika tidak ada, langsung ke file.

2.2. Jalur relatif

Jalur relatif menjelaskan jalur ke dokumen yang ditentukan relatif terhadap dokumen saat ini. Jalur ditentukan berdasarkan lokasi halaman web tempat tautan itu berada. Tautan relatif digunakan saat membuat tautan ke dokumen lain di situs yang sama. Ketika browser tidak menemukan protokol http:// di tautan, browser akan mencari dokumen yang ditentukan di server yang sama.

Jalur relatif berisi komponen berikut:
1) folder (nama folder yang menunjukkan jalur ke file);
2) berkas (nama berkas).

Jalur untuk tautan relatif memiliki tiga notasi khusus:
/ menunjuk ke direktori root dan memberitahu Anda untuk memulai dari direktori root dokumen dan melanjutkan ke folder berikutnya
./ menunjuk ke folder saat ini
../ naik satu folder (direktori)

Perbedaan utama antara jalur relatif dan jalur absolut adalah jalur relatif tidak berisi nama folder root dan folder induk, yang membuat alamat lebih pendek, dan jika berpindah dari satu domain ke domain lain, Anda tidak perlu untuk menulis alamat absolut baru. Tetapi jika sumber daya pihak ketiga menautkan, misalnya, ke gambar Anda dengan alamat relatif, maka gambar tersebut tidak akan ditampilkan di situs lain.

3. Jangkar

Jangkar, atau tautan internal, membuat tautan ke berbagai bagian laman web saat ini, memungkinkan Anda menavigasi antar bagian dengan cepat. Ini berguna ketika ada terlalu banyak teks di halaman. Tautan internal juga dibuat menggunakan tag dengan perbedaan bahwa atribut href berisi nama pointer - yang disebut jangkar, bukan URL. Nama pointer selalu didahului dengan tanda #.

Halo, para pembaca situs blog yang terkasih! Seperti yang Anda ketahui, untuk promosi situs yang sukses dan meningkatkan posisinya di hasil Hasil Pencarian, perlu untuk melakukan optimasi SEO berkualitas tinggi pada situs. Konsep "", yang, pada gilirannya, dibagi menjadi internal dan eksternal, terkait erat dengan konsep-konsep seperti "tautan situs internal dan eksternal". Oleh karena itu, sangat penting bagi kita untuk mengetahui berapa banyak tautan yang harus ada di situs, cara memeriksa nomornya, cara menghapus tautan yang tidak perlu dari situs dan menutupnya dari pengindeksan, cara meningkatkan massa referensi dll. Untuk menjawab semua ini dan pertanyaan lain mengenai internal dan tautan eksternal, mari kita pahami dulu apa itu tautan (atau hyperlink) dalam HTML.

Pada artikel kali ini saya akan menjelaskan apa itu link, cara membuat hyperlink di HTML pada website, cara membuka link di jendela baru, cara membuat link ke alamat email (e-mail) dan cara membuat link menjadi gambar. Kami juga akan menyentuh konsep-konsep seperti tag html dan atribut hyperlink, jangkar tautan, jangkar html (jangkar) dan tautan hash. Jadi, mari kita mulai.

Apa itu tautan (hyperlink).

Jika hyperlink mengarah ke halaman web atau file yang tidak ada (dihapus, dipindahkan) atau alamatnya salah, maka tautan seperti itu disebut rusak. Seharusnya tidak ada tautan yang rusak di situs, karena menyesatkan pengunjung dan, dengan mengeklik tautan seperti itu, seseorang tidak mungkin kembali ke situs Anda. Kami akan berbicara lebih detail tentang mengapa tautan yang rusak muncul, bagaimana menemukan dan memperbaikinya, dalam artikel terpisah. Dan sekarang mari kita lanjutkan.

Cara membuat link (hyperlink) dalam HTML pada sebuah website.

Menautkan ke halaman lain di situs Anda atau situs lain sangat mudah. Untuk membuat hyperlink, Anda perlu memberi tahu browser apa tautannya dan menunjukkan alamat dokumen yang akan dituju. Ini dilakukan dengan menggunakan tag HTML. dan atribut href yang diperlukan:

Di sini URL adalah alamat dokumen yang akan dituju. Dan teks hyperlink yang terletak di antara tag dan, disebut jangkar tautan dan terlihat oleh pengunjung halaman web. Selain fakta bahwa teks tautan (jangkar) memberi tahu pembaca di mana transisi akan dilakukan, itu juga sangat penting dalam Optimisasi Mesin Pencari(SEO), karena merupakan salah satu faktor penentu yang mempengaruhi peringkat situs Anda untuk kata kunci yang terkandung dalam jangkar ini. Biasanya, jenis peringkat ini disebut referensial.

Tautan mutlak

Mereka digunakan untuk menunjuk ke dokumen di situs lain (link eksternal).

Hal ini diperbolehkan untuk membuat link absolut dalam situs yang sama, namun lebih tepat menggunakan alamat relatif untuk membuat link internal, yang terlihat lebih pendek. Namun, saat menganalisis berbagai situs, saya perhatikan bahwa sebagian besar webmaster membuat tautan internal dengan alamat absolut. Ada nilai tambah di sini, karena jika halaman Anda disalin, maka dengan cara ini Anda akan mendapatkan tautan eksternal yang berfungsi kembali.

Seperti yang Anda lihat, dengan referensi absolut, semuanya sederhana. Lebih sulit dengan yang relatif, karena saat membuatnya, Anda perlu memahami nilai atribut href yang perlu Anda tentukan, karena itu tergantung pada lokasi asli dokumen. Seperti yang saya katakan, tidak ada yang benar-benar peduli dengan ini dan membuat semua tautan di situs menjadi mutlak. Namun, jika Anda tertarik untuk mempelajari lebih lanjut tentang cara membuat tautan relatif dengan benar untuk sebuah situs, saya dapat merekomendasikan artikel oleh Dmitry, penulis blog ktonanovenkogo.ru. Saya belum melihat penjelasan yang lebih rinci dan dapat dimengerti.

Misalnya, saya akan menunjukkan kepada Anda bagaimana tampilan tautan yang mengarah ke file yang relatif ke root situs (potong saja semuanya di sebelah kiri garis miring ketiga di tautan absolut yang serupa):

Tautan relatif

Untuk utama

Teks tautan (jangkar)

Warna dan tampilan teks popup hanya bergantung pada pengaturan sistem operasi dan peramban.

Cara membuka tautan di jendela baru.

Secara default, ketika Anda mengklik tautan, dokumen baru akan dibuka di jendela saat ini. Namun, saat melihat situs secara pribadi, ini tidak nyaman bagi saya. Saat membaca artikel dan mengikuti tautan, akan lebih mudah bagi saya bahwa halaman tersebut terbuka di jendela baru dan saya dapat terus membaca artikel sebelumnya kapan saja. Alasan lain untuk membuka tautan di jendela baru adalah ketika Anda membuka situs orang lain, kemungkinan besar pembaca tidak akan kembali. Terutama jika dia melakukan beberapa transisi dan tidak ingat di mana dia berada beberapa menit yang lalu.

Atribut tag target akan membantu kami membuka tautan di jendela baru. . Defaultnya adalah _self , yang biasanya tidak ditulis. Untuk membuka dokumen di jendela baru, ubah nilai atribut target menjadi _blank :

1	<a href = "http://situs" target = "_blank" > Jendela baru</a>

Jendela baru

Bagaimana jika ketika Anda mengunjungi situs orang lain, di mana tautan terbuka di jendela saat ini, Anda ingin membukanya di yang baru? Anda hanya perlu mengkliknya bukan dengan tombol, tetapi dengan roda mouse. Pada kasus ini halaman baru akan terbuka di jendela baru.

Cara membuat link ke email (alamat email).

Mengklik tautan ini akan membuka program untuk bekerja dengan surel, diinstal oleh Anda secara default, di mana bidang "Kepada" sudah akan diisi. Untuk mengisi subjek surat secara otomatis, Anda perlu membuat tautan ke email dengan formulir berikut:

Alih-alih kata-kata "subjek_surat", Anda perlu menulis topik yang diinginkan dan, tentu saja, dalam huruf Latin. Kami melakukan ini karena banyak browser dan program email tidak bekerja dengan baik dengan Cyrillic dan ada kemungkinan untuk melihat segala macam omong kosong di baris subjek. Dengan menggunakan saran yang tidak rumit ini, Anda akan dapat membuat tautan ke email tanpa takut akan kejutan yang tidak perlu.

Cara membuat gambar menjadi tautan.

Di sini atribut judul adalah tooltip, dan teks yang ditulis dalam atribut alt (sumber informasi alternatif) akan muncul di halaman jika gambar dinonaktifkan di browser. Jika atribut judul berfungsi, pertama-tama, untuk kenyamanan pembaca, maka mesin pencari mencoba memahami apa yang ditampilkan dalam gambar oleh atribut alt. Disarankan untuk menulis kata kunci dalam tag ini, yang akan sangat penting dalam optimasi mesin pencari. Lagi pula, tidak ada yang membatalkan pencarian berdasarkan gambar.

Cara membuat hyperlink (jangkar html) pada satu halaman html.

Di atas, kami telah mempertimbangkan cara membuat tautan ke halaman situs web, baik internal maupun eksternal. Namun terkadang, Anda harus membuat hyperlink dalam halaman web yang sama. Untuk apa? Nah, misalnya, agar ketika membaca teks yang sangat panjang, kita memiliki kemampuan untuk melompat ke bagian mana pun dengan cepat. Atau itu akan berguna ketika di awal artikel Anda mempublikasikan kontennya poin demi poin. Kemudian, dengan mengklik item yang diinginkan, Anda akan langsung menuju ke materi yang Anda minati. Transisi semacam itu dibuat menggunakan bookmark yang sudah terpasang di badan artikel, yang disebut jangkar html (jangkar, jangan disamakan dengan jangkar teks) dan tautan hash khusus.

Untuk membuat jangkar, pertama buat bookmark dengan nama apa pun (hanya huruf latin, angka, tanda hubung, dan garis bawah yang digunakan) yang ditentukan menggunakan atribut nama tag :

Ke atas

1	<a href = "javascript:scroll(0,0);" > "aligncenter size-full wp-image-1393" title = "(!LANG:Tombol Atas" src = !} "http://website/wp-content/uploads/2011/12/Top.jpg" alt= "Tombol Atas_Atas" lebar="100" tinggi="100" />

Dmitry KtoNaNovenkogo menyarankan cara lain untuk mengatur bookmark dalam teks halaman web, tanpa menggunakan jangkar html. Untuk melakukan ini, kami membuat bookmark dari tag HTML apa pun yang tersedia di halaman, menetapkan atribut id universal untuknya. Misalnya, kami membuat bookmark dari tag header h3:

teks judul

Penting untuk menulis huruf Latin di atribut id sebagai karakter pertama dari nama jangkar, kemudian Anda dapat menggunakan karakter lain yang diizinkan.

Mari, misalnya, kembali ke judul “ “, lalu lanjutkan.

Anda dapat menggunakan tautan hash untuk pergi ke tempat yang tepat tidak hanya dalam satu halaman, tetapi juga untuk pergi ke halaman lain dari situs tersebut. Untuk melakukan ini, kami mengatur jangkar html di tempat yang tepat di halaman yang tepat, dan di tautan hash itu sendiri, sebelum simbol hash, kami menulis alamat halaman ini. Sebagai contoh:

Tautkan teks ke jangkar bookmark html

Jenis dan warna hyperlink dalam HTML.

Tautan yang belum dikunjungi berwarna biru dan digarisbawahi.
Tautan aktif - berubah menjadi merah pada waktu antara mengeklik tautan dan mulai memuat halaman baru. Tentu saja, dia belum lama berada dalam kondisi ini.
Tautan yang dikunjungi - berubah warna menjadi ungu setelah mengkliknya.

Anda dapat mengubah warna hyperlink dalam dokumen html menggunakan tag dan atribut berikut:

Tautan - warna tautan yang belum dikunjungi.
Alink - warna tautan aktif.
Vlink adalah warna tautan yang dikunjungi.

Semua atribut di atas dapat digabungkan:

1	<body link = "#1122cc" vlink = "#6611cc" alink = "#d14836" >

Saya harap sekarang sudah jelas cara membuat hyperlink pada halaman HTML dan pada email, cara membuat gambar menjadi link, apa itu text anchor, hash link dan html anchor, apa itu tag html dan atribut link. Saya telah mencoba yang terbaik untuk menjelaskan secara rinci tautan apa yang ada di HTML dan apa itu. Biarkan saya mengingatkan Anda bahwa memasukkan hyperlink ke dalam teks dilakukan hanya dalam mode HTML.

Tidak pernah menulis artikel panjang seperti itu, lebih dari 10.000 karakter. Tetapi topik tautan ini tidak habis, untuk dilanjutkan.

Jika artikel ini bermanfaat bagi Anda, silakan klik tombol jejaring sosial di bawah ini. Sampai jumpa di halaman!

Petunjuk

Tautan hypertext dirancang untuk menautkan teks, gambar, atau elemen halaman lainnya ke dokumen hypertext lainnya. Semua elemen halaman situs, termasuk tautan, dibuat oleh browser, yang menerima instruksi terperinci dari kode halaman yang dikirim ke sana oleh server. Kode HTML (HyperText Markup Language) ini terdiri dari "tag" yang menggambarkan jenis, tampilan, dan lokasi semua elemen pada halaman web. Hyperlink standar dibuat oleh browser ketika menemukan, misalnya, tag berikut dalam kode halaman: Tautan teksDi sini - tag tautan pembuka, - tag penutup. Tag pembuka mungkin berisi informasi tambahan - "atribut". Pada link sederhana ini, atribut href berisi alamat halaman atau dokumen yang akan diminta jika pengunjung mengklik link tersebut. Terkadang tidak perlu menentukan alamat lengkap - jika dokumen yang diminta terletak di server di folder yang sama (atau subfolder), maka cukup untuk menentukan hanya namanya atau jalur ke subfolder. Ini disebut "relatif", mereka harus, misalnya, seperti ini: Tautan teks Ketika Anda mengklik tautan ini, dokumen moreText.html akan dimuat dari folder yang sama. Dan alamat tautan absolut dimulai dengan protokol, misalnya: Tautan teks Di sini "http" (Protokol Transfer Hiperteks - "protokol transfer hiperteks") adalah alamat dokumen yang biasa di web. Dan jika Anda menentukan protokol "mailto", maka hyperlink akan meluncurkan program email Anda, alih-alih pergi ke: email-linkIn tautan ke file yang terletak di server FTP, masing-masing, tunjukkan protokol FTP (File Transfer Protocol - "transfer file protokol"): Tautan ke arsip

Atribut hyperlink lain yang menentukan jendela mana dokumen baru ini harus dimuat adalah "target". Jika Anda dapat memasukkan alamat yang benar di atribut href, maka target hanya dapat memiliki empat nilai: _self - halaman harus dimuat ke dalam jendela atau bingkai yang sama. "Bingkai" mengacu pada satu bagian dari jendela yang dibagi menjadi beberapa bagian; _parent - jika halaman saat ini sendiri dimuat dari jendela lain (atau bingkai), maka ia memiliki jendela "induk". Dan nilai _parent mengharuskan halaman yang ditunjuk oleh tautan dimuat ke dalam jendela induk ini; _top - halaman baru harus dimuat ke dalam jendela yang sama. Jika jendela ini dibagi menjadi beberapa bingkai, maka mereka akan dihancurkan saat memuat, dan halaman baru akan menjadi satu-satunya bingkai di jendela ini; _blank - jendela terpisah akan dibuka untuk mengikuti tautan; Misalnya:
Tautan akan terbuka di jendela baru

Dimungkinkan untuk membuat hyperlink untuk tidak pergi ke halaman lain, tetapi ke beberapa bagian tertentu dari dokumen yang sama. Untuk menunjukkan "tujuan" seperti itu dalam kode html dokumen, tautan jangkar digunakan: Dan tautan yang menggulir dokumen ke jangkar ini terlihat seperti ini: Tautan ke jangkar pertama halaman halamanTentu saja, dalam kode html dokumen lain, harus ada tautan jangkar seperti itu dengan atribut name="Anchor1".

Hyperlink tidak hanya berupa teks, tetapi juga elemen halaman lainnya - misalnya, gambar. Tag paling sederhana yang menggambar gambar terlihat seperti ini: Dan agar gambar menjadi hyperlink, itu harus diapit di antara tag pembuka dan penutup tautan:

Hyperlink adalah salah satu komponen terpenting dari dokumen html. Berkat komponen ini, serta tautan biasa, Internet sangat mudah digunakan. Kami akan melihat opsi paling sederhana untuk memasukkan hyperlink yang akan membantu Anda, sebagai programmer pemula, menguasai pelajaran ini.