Hyperlink html ke halaman lain. Bagaimana cara menyisipkan hyperlink dalam HTML? Membuat dan menggunakan hyperlink dalam HTML

“Hyperlink dalam HTML” adalah pelajaran kelima dari buku teks HTML. Pelajaran ini akan fokus pada penggunaan tautan hiperteks. Apa pun didasarkan pada tautan hypertext dokumen web, oleh karena itu, setiap webmaster harus dapat bekerja dengan tautan.

Aturan untuk menggunakan tautan hypertext.

Hyperlink dalam HTML diperlukan untuk menghubungkan berbagai dokumen, baik dalam satu situs maupun di seluruh Internet. Untuk membuat tautan hiperteks (hyperlink), digunakan deskriptor :

atribut target dari tag menentukan bagaimana halaman baru akan terbuka dan mengambil nilai berikut:

• Link – menentukan tampilan link yang belum dikunjungi.
• Alink – menentukan tampilan link yang sudah dikunjungi.
• Vlink – menentukan tampilan link yang dipilih.

Pada pelajaran berikutnya kita akan berbicara tentang bekerja dengan grafik dalam HTML: kita akan belajar cara menyisipkan gambar dan menyesuaikannya penampilan dll.

Halo pengunjung yang budiman!

Pada artikel kali ini saya akan menunjukkan cara menambahkan link pada website berupa hyperlink sederhana, gambar, dan juga tombol yang bisa Anda atur desainnya sendiri. menggunakan CSS gaya. Ketiga pilihan tersebut sangat sering digunakan dan mempunyai efek yang cukup baik jika digunakan oleh pengunjung.

Mari kita mulai dengan yang paling sederhana dan mencapai yang rumit.

Tautan reguler dan hyperlink

http://site/poleznoe/kak-sdelat-ssylku-na-sait.html

Opsi ini ada tempatnya, tetapi ada kelemahan signifikan jika kita berbicara tentang efektivitas tautan semacam itu. Itu tidak dapat diklik, artinya, Anda tidak dapat membukanya hanya dengan satu klik mouse. Pilihan ini cukup sulit untuk dilihat oleh pengunjung.

Hal lainnya adalah hyperlink, yang bila diklik akan mengalihkan ke dokumen lain di Internet, baik internal (dalam situs yang sama) maupun eksternal (situs lain). Contoh linknya bisa dilihat dibawah ini. Coba klik tautannya.

Halaman utama sumber daya saya akan terbuka di tab baru. Untuk menerapkan opsi ini, Anda harus menggunakan alat mesin Anda, atau menulis baris berikut dalam kode HTML.

klik disini

Tautan dibuat dengan tag sederhana , di dalamnya terdapat alamat itu sendiri, di mana pengguna perlu diarahkan, serta jangkar tautan (dalam contoh di atas, jangkar adalah frasa “klik di sini”), yang menunjukkan teks tautan yang menjelaskan apa yang Anda inginkan terima ketika Anda pergi ke alamat ini.

Di dalam tag tautan Ada juga atribut untuk membuka halaman di tab baru.

Disarankan untuk menambahkan tag judul agar pengunjung dapat melihat tooltip ini saat mengarahkan kursor dan memahami tujuan mereka. Ini dilakukan secara sederhana, di dalam tag pembuka , seperti pada contoh di bawah ini.

Jika Anda melihat kode sumber tombolnya, semuanya sangat sederhana. Satu-satunya perbedaan dari hyperlink biasa adalah adanya id yang ditambahkan di dalam tag pembuka dan pada gilirannya, gaya desain ditulis ke dalamnya di file style.css.

Kami melihatnya segera setelah membuka tag tautan id="button" ditentukan, yang mana gaya desainnya sendiri ditetapkan. Struktur lainnya identik dengan hyperlink.

Halo para pembaca situs blog yang budiman. Hari ini kita akan membicarakannya cara membuat hyperlink di html, pelajari cara menggunakan tag dan atribut href dan targetnya, mari pelajari cara menjadikan gambar sebagai tautan.

Mari kita mulai dari yang sederhana dan pertimbangkan untuk membuat yang biasa teks tautan. Untuk membuat hyperlink teks, cukup dengan menyertakan bagian teks apa pun yang seharusnya menjadi tautan tanda berpasangan . Dan masuk atribut href Untuk tag ini, Anda harus menentukan alamat halaman web target di Internet:

Jika halaman tersebut tidak digunakan gaya CSS dan tidak ada atribut tambahan yang diterapkan, maka hyperlink pada halaman tersebut ditampilkan sebagai berikut secara default:

• tautan biasa ditampilkan dengan warna biru;
• tautan yang dikunjungi disorot dengan warna ungu;
• hyperlink aktif (diklik di saat ini) ditampilkan dengan warna merah, namun karena waktu antara mengeklik tautan dan mulai memuat dokumen baru cukup singkat, status tautan ini hanya berumur pendek;
• Teks tautan ditampilkan dengan garis bawah.

Alamat internet

Alamat lengkap berisi alamat Internet server web, dan jalur ke file yang perlu diperoleh. Misalnya:

http://www.site.ru/catalog/page15.html

Di sini www.site.ru adalah alamat server web, dan /catalog/page15.html adalah jalur ke file di server ini. Secara umum, alamat Internet lengkap biasanya hanya digunakan jika diperlukan untuk membuat hyperlink yang menunjuk ke sumber daya apa pun yang terletak di situs web lain.

Saat membuat hyperlink yang menunjuk ke file yang merupakan bagian dari situs yang sama dengan halaman web saat ini, lebih baik menggunakan alamat Internet yang dipersingkat. Alamat yang dipersingkat hanya berisi jalur ke file di server, karena Alamat server web sudah diketahui browser.

Ada alamat Internet yang dipersingkat mutlak Dan relatif. Alamat absolut menentukan jalur ke file target relatif terhadap folder root situs. Alamat seperti itu diawali dengan simbol / (garis miring) yang artinya folder akar. Misalnya, alamat "/page15.html" menunjuk ke file page15.html, yang disimpan di folder root situs. Atau alamat “/catalog/page.html” menunjuk ke file page.html, yang ditempatkan di folder katalog, bersarang di folder root situs.

Alamat relatif mengacu pada jalur file relatif terhadap file halaman web saat ini. Alamat relatif tidak memiliki karakter garis miring di depannya. Mari kita lihat beberapa contoh.

Misalnya, alamat "page.html" menunjuk ke file yang terletak di folder yang sama dengan file halaman web saat ini. Dan alamat “catalog/page.html” akan membuka file page.html, disimpan dalam folder katalog, bersarang di folder tempat halaman saat ini disimpan. Dengan menggunakan dua titik di awal alamat, Anda dapat menunjukkan folder dari tingkat bersarang sebelumnya. Jadi, misalnya, alamat “.../page.html” menunjuk ke halaman page.html yang disimpan dalam folder di mana folder dengan halaman web saat ini berada.

Tautan ke email

Menggunakan bahasa html dapat Anda buat hyperlink pos, mengklik yang meluncurkan program klien email. Saat menentukan alamat dalam suatu atribut href sebelum email yang perlu Anda masukkan "mailto:", yaitu sesuatu seperti ini: href="mailto: [dilindungi email]". Dan setelah titik dua sebelumnya alamat pos seharusnya tidak ada spasi.

menulis surat

Cara membuat gambar menjadi tautan

Di sinilah saya menyelesaikan pembicaraan tentang pembuatan hyperlink; Saya hanya akan mengingatkan Anda tentang poin-poin utama:

1. Digunakan untuk membuat tautan tanda berpasangan dengan atribut href yang diperlukan, yang nilainya berisi alamat halaman arahan: Teks;
2. Saat membuat tautan ke email, Anda harus memasukkan “mailto:” di atribut href sebelum alamat email: tulis surat;
3. Jika Anda perlu membuat tautan gambar, lalu kita tinggal menaruh tag img di dalam tag tersebut : .

Tautan hiperteks dirancang untuk menghubungkan teks, gambar, atau elemen halaman lainnya ke dokumen hiperteks lainnya. Semua elemen halaman situs web, termasuk tautan, dibuat oleh browser yang menerima instruksi rinci dari kode halaman yang dikirimkan kepadanya oleh server. Ini adalah kode untuk bahasa HTML(HyperText Markup Language - “bahasa markup hiperteks”) terdiri dari “tag” yang menggambarkan jenis, tampilan, dan lokasi semua elemen halaman web. Hyperlink standar dibuat oleh browser ketika menemukan, misalnya, tag berikut dalam kode halaman: Tautan teks Berikut adalah tag pembuka tautan, dan tag penutup. Tag pembuka mungkin berisi informasi tambahan- "atribut". Pada link sederhana ini, atribut href berisi alamat halaman atau dokumen yang akan dikirimi permintaan jika pengunjung mengklik link tersebut. Terkadang tidak perlu untuk menunjukkannya alamat lengkap- jika dokumen yang diminta terletak di server dalam folder yang sama (atau subfolder), maka cukup mencantumkan nama atau jalur ke subfolder saja. Ini disebut “relatif”, misalnya, seharusnya seperti ini: Tautan teks Ketika Anda mengklik tautan ini, dokumen moreText.html dari folder yang sama akan dimuat. Dan alamat tautan absolut dimulai dengan indikasi protokol, misalnya: Tautan teks Di sini “http” (HyperText Transfer Protocol) adalah alamat biasa dari suatu dokumen di jaringan. Dan jika Anda menentukan protokol "mailto", maka hyperlink akan meluncurkan milik Anda program surat, alih-alih membuka :email-linkDalam tautan ke file yang terletak di server FTP, tunjukkan masing-masing protokol FTP (File Transfer Protocol): Tautan ke arsip

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

Dimungkinkan untuk membuat hyperlink untuk tidak menuju ke halaman lain, tetapi ke beberapa bagian tertentu dari dokumen yang sama. Untuk menunjukkan "tujuan" seperti itu dalam kode html suatu dokumen, gunakan tautan jangkar: Dan tautan yang menggulirkan dokumen ke jangkar ini terlihat seperti ini: Tautan ke halaman pertama jangkar Anda dapat menautkan ke jangkar tidak hanya di dokumen ini , tetapi juga di halaman lain: Jangkar di halaman lain Tentu saja, dalam kode html dokumen lain harus ada tautan jangkar dengan atribut name="Anchor1" .

Tidak hanya teks, elemen halaman lainnya seperti gambar juga dapat berfungsi sebagai hyperlink. Tag paling sederhana untuk menggambar terlihat seperti ini: Agar sebuah gambar menjadi hyperlink, gambar tersebut harus berada di antara tag link pembuka dan penutup:

Hyperlink dapat menghubungkan halaman-halaman dalam satu situs atau menunjuk ke halaman mana pun di Internet. Saat membuat tautan ke halaman orang lain, Anda harus selalu menggunakan alamat absolut halaman tersebut (http://www.site.com/page.html). Jika Anda membuat link ke halaman dalam situs, sebaiknya menggunakan URL relatif (page.html, catalog/page.html). Saat membuat hyperlink grafis, ingatlah bahwa grafis mungkin tidak dapat diakses oleh beberapa pengguna, jadi pastikan untuk menyertakan elemen teks yang sesuai.

Contoh:

Hyperlink dalam halaman html

Terkadang perlu membuat hyperlink dalam satu halaman. Misalnya, pada halaman ini terdapat hyperlink di awal pelajaran, memungkinkan Anda untuk melihat pertanyaan tertentu, dan di bagian paling bawah halaman, memungkinkan Anda untuk pergi ke bagian atas halaman.

Contoh:

Hyperlink pos

Contoh:

Membuka halaman html di jendela baru

Dengan menggunakan atribut TARGET, Anda dapat memuat halaman di jendela browser baru. Atribut ini dimaksudkan untuk menentukan nama jendela. Nama jendela digunakan untuk tujuan resmi. Untuk membuka halaman di jendela baru, Anda perlu menggunakan konstanta _blank.

Contoh:

Warna teks hyperlink

Atribut LINK, ALINK, VLINK menentukan warna font hyperlink.

Atribut LINK digunakan untuk menyorot hyperlink yang belum dikunjungi pengguna.

Prosedur untuk mengikuti hyperlink

Beberapa browser mungkin mendukung kemampuan untuk menavigasi hyperlink menggunakan tombol Tab. Dalam hal ini, browser secara default menyorot hyperlink sesuai urutan kemunculannya di teks halaman. Anda dapat mengubah urutan transisi menggunakan atribut tag TABINDEX . Untuk menyertakan hyperlink dalam daftar yang menjelaskan urutan navigasi baru, Anda harus menetapkan atribut TABINDEX sejumlah bilangan bulat positif dalam rentang dari 1 hingga 32767. Untuk mengecualikan hyperlink dari daftar, Anda harus menetapkan nomor negatif apa pun ke atribut tersebut. Saat pengguna menekan tombol TAB, kursor berpindah ke hyperlink dengan nilai indeks positif terkecil. Jika beberapa hyperlink diberi nilai indeks yang sama, hyperlink pertama yang dipilih adalah hyperlink yang muncul lebih tinggi di teks halaman.