Bagaimana cara membuat tautan dalam HTML?

Daftar Isi:

Bagaimana cara membuat tautan dalam HTML?
Bagaimana cara membuat tautan dalam HTML?
Anonim

Situs web, blog, halaman web - konsep yang sudah tidak asing lagi di zaman kita. Dengan perkembangan Internet, situs untuk menghosting halaman web menjadi sangat populer, dan ini tidak mengherankan: bagi sebagian orang, memiliki situs web sendiri adalah suatu keharusan, bagi orang lain itu adalah hiburan yang menyenangkan. Dalam kasus pertama, kita biasanya berbicara tentang perusahaan, perusahaan, pengusaha swasta, ketika mereka mengiklankan produk atau layanan apa pun yang diminta. Yang kedua tentang blogger.

Selain itu, ada pengguna internet yang sekadar mencari informasi, membaca blog, menonton video, dan sebagainya.

Untuk membuat website yang berkualitas, ada banyak pilihan. Kami akan fokus pada pemrograman web melalui HTML.

Apa itu HTML

HTML adalah singkatan dari Hyper Text Mark-Up Language. Diterjemahkan dari bahasa Inggris, ini berarti "Hypertext Markup Language".

Dengan kata lain, HTML adalah sekumpulan kode yang dengannya Anda dapat membuat elemen utama situs, bingkainya, sepertibagaimana kata-kata terdiri dari kalimat.

Kode HTML ditulis secara eksklusif dalam huruf Latin dan disebut tag, dan setiap kode diapit dalam tanda kurung siku. Beberapa tag berpasangan, beberapa tidak berpasangan.

Dipasangkan berarti harus digunakan berpasangan tanpa gagal. Misalnya, tag pembuka menunjukkan di mana ia dimulai pada halaman web, dan tag penutup menunjukkan di mana ia berhenti. Yang terakhir ini berbeda dari yang pertama dengan adanya karakter garis miring setelah braket sudut bukaan. Misalnya, adalah tag pembuka,adalah tag penutup.

Tag yang tidak berpasangan tidak membutuhkan pasangan.

Banyak tag dapat memiliki atribut - elemen tambahan yang memberikan arti yang lebih spesifik. Misalnya, tag.

desain web
desain web

Di mana HTML digunakan

Pemahaman klasik tentang di mana HTML dibutuhkan adalah pembuatan situs web.

Dalam praktiknya, ini mungkin cukup, karena HTML memungkinkan Anda membuat elemen utama situs, menu (termasuk yang multi-level), mengatur latar belakang, menyisipkan teks, gambar, audio, video, mengedit font dan masih banyak lagi.

Namun, ada bahasa lain yang memungkinkan Anda menambahkan elemen yang lebih menarik dan sering kali diperlukan ke halaman web:

  • CSS menetapkan gaya untuk seluruh situs tanpa perlu terus-menerus menentukan fitur gaya dari elemen individual menggunakan tag - warna dan font teks, misalnya.
  • Bahasa skrip memungkinkan Anda untuk mengembangkan dan menyematkan program mini (skrip) di situs, mulai darihal-hal estetika dangkal (mengubah warna tautan saat mengarahkan mouse) dan diakhiri dengan yang fungsional (mengumpulkan alamat email pelanggan, nomor telepon).
  • Dengan PHP Anda dapat mengembangkan buku tamu atau sistem komentar Anda sendiri.

Juga HTML digunakan dalam pembuatan email untuk distribusi.

milis internet
milis internet

Apa itu tautan

Mereka memungkinkan Anda untuk menavigasi ke halaman web lain, baik di dalam situs maupun eksternal.

Tautan HTML biasanya digunakan:

  • Untuk membuka sumber web eksternal.
  • Untuk berpindah halaman dalam situs.
  • Untuk membuka formulir google.

Tautan ke sumber dalam HTML juga sering ditunjukkan, terutama karena saat menyalin materi dari situs lain, Anda harus menentukan penulisnya. Jika tidak, menyalin tanpa atribusi dapat termasuk dalam definisi pelanggaran hak cipta, pencurian konten, dan bumerang. Selain itu, penggunaan bahan pinjaman yang tidak unik mengurangi kinerja SEO, dan menunjukkan tautan ke sumber mengurangi risiko.

Jenis tautan

Dalam pengertian klasik, tautan adalah alamat sumber daya web yang dapat Anda kunjungi dengan mengkliknya.

jenis tautan
jenis tautan

Selain itu, ada hyperlink: teks dan gambar. Dalam kasus ini, tautan HTML "tersembunyi" di bawah beberapa kalimat (kata) atau gambar, dan untuk mengikutinya, Anda perlu mengklik teks atau gambar.

Jenis tautan lain:

  • Belum dikunjungi - tautan yang belum diklik selama sesi tertentu. Misalnya, jika Anda mengikuti tautan ini kemarin, lalu mematikan komputer Anda, dan menyalakannya kembali hari ini, sekarang tautan tersebut tidak lagi dikunjungi, karena sesi baru telah dimulai.
  • Aktif - dalam keadaan ini, tautan disimpan untuk waktu yang sangat singkat: interval antara mengeklik tautan dan mengikutinya.
  • Visited - tautan yang telah dikunjungi setidaknya sekali selama satu sesi.

Untuk tautan teks biasa, tautan yang dikunjungi cenderung berubah warna kecuali ditentukan lain.

Sebuah gambar hyperlink tidak mengubah tampilannya, baik dikunjungi atau tidak.

Cara menyisipkan tautan biasa

Banyak sumber web menganggap alamat situs sebagai tautan, segera buat agar dapat diklik dan sorot dengan warna. Misalnya, jika alamat dikirim melalui messenger atau email, mengkliknya, Anda dapat pergi ke situs.

Dalam hal membuat situs sendiri menggunakan HTML, Anda harus memasukkan tautan menggunakan tag khusus. Ini akan terlihat seperti ini: alamat situs web. Teks tautan dalam HTML harus ditentukan secara lengkap, dengan protokol.

Cara menyisipkan hyperlink teks

Dikatakan sebelumnya bahwa hyperlink teks melakukan fungsi yang sama seperti tautan biasa, tetapi terlihat lebih estetis: alih-alih alamat situs, yang seringkali tidak perlu panjang, kata atau frasa ditunjukkan. Misalnya, dalam kalimat "Cari informasi di sini", Anda dapat menyembunyikan tautan dikata "disini". Ini akan disorot dan mengkliknya akan membawa pengguna ke situs yang diinginkan.

memasukkan hyperlink
memasukkan hyperlink

Cara membuat link HTML sudah pernah dibahas sebelumnya. Anda dapat menyisipkan hyperlink teks menggunakan tag yang sama. Satu-satunya perbedaan adalah Anda perlu menentukan di antara tag teks di mana tautan akan disembunyikan: teks yang terlihat.

Cara menyisipkan hyperlink gambar

Ini sedikit lebih rumit di sini. Kami menggunakan tag yang sama, tetapi alih-alih teks, Anda perlu menentukan jalur ke gambar.

Jalur adalah lokasi gambar. Jika gambar (foto) terletak di layanan berbagi file, maka Anda perlu menentukan semua folder di sepanjang jalur ke gambar melalui garis miring. Anda juga dapat menyertakan tautan ke gambar jika memungkinkan.

Untuk menandai

selain src, atribut lain juga berlaku, memungkinkan Anda untuk menyesuaikan tinggi, lebar dan lokasi gambar dan banyak lagi. Beberapa di antaranya:

  • Src - menentukan jalur ke gambar.
  • Lowsrc - identik dengan atribut sebelumnya, tetapi ditentukan untuk gambar berkualitas rendah.
  • Tinggi - tinggi gambar.
  • Lebar - lebarnya.
  • Alt - deskripsi gambar. Saat Anda mengarahkan kursor ke foto atau gambar, teks yang ditentukan dalam atribut ini akan muncul.
  • Border - menentukan ketebalan batas di sekitar gambar.

Atribut ditentukan setelah tag dan disertakan dalamkomposisinya. Atribut harus diikuti oleh nilainya. Misalnya, untuk atribut "height" atau "width" (tinggi, lebar) menentukan tinggi gambar di halaman web. Satuan pengukuran adalah piksel, kecuali ditentukan lain.

Ini akan terlihat seperti ini: <a href="alamat halaman web"

. Atribut ini akan membantu mengatur ukuran yang sesuai untuk gambar. Perbatasan membantu membuat batas yang tidak terlihat di sekitar gambar.

mengikuti tautan
mengikuti tautan

Atribut di atas berlaku secara terpisah untuk tag penyisipan gambar. Misalnya:.

Apa itu tautan jangkar

Membuat tautan jangkar adalah keterampilan yang sangat berguna. Seringkali ada kebutuhan untuk meletakkan halaman web dengan blok teks yang panjang atau dengan beberapa subbagian pada satu halaman. Dalam hal ini, Anda dapat langsung memulai dengan daftar tautan ke subbagian teks atau halaman web, dan ketika Anda mengkliknya, pengguna akan langsung menuju ke bagian yang diminta.

Membuat tautan jangkar akan membutuhkan lebih banyak penggunaan tag atribut daripada jenis tautan lainnya.

jangkar tautan
jangkar tautan

Pertama, Anda perlu menetapkan nilai keseluruhan untuk setiap blok informasi atau subbagian teks menggunakan atribut top, lalu mengaitkannya dengan tautan yang sesuai.

Fitur mereka lebih luas, oleh karena itu disarankan untuk terlebih dahulu menguasai pembuatan tautan yang lebih sederhana, dan kemudian beralih ke pembentukan tautan jangkar.

Tips

Penempatan berbagai blok informasi di halaman web
Penempatan berbagai blok informasi di halaman web

Bantuan dari yang berpengalamanprogrammer:

  • Anda dapat membuatnya agar informasi tentang tautan ditampilkan saat mengarahkan kursor ke HTML. Untuk ini, atribut alt, yang juga kita gunakan untuk elemen grafis, bisa berguna.
  • Dimungkinkan untuk membuat daftar tautan menggunakan HTML. Secara khusus, ini dapat berguna untuk tautan jangkar, serta ketika Anda perlu membuat daftar sumber daya web yang dapat diikuti oleh tautan langsung dari halaman web saat ini.
  • Dengan bantuan CSS dan JavaScript, serta beberapa fungsi HTML, Anda dapat membuat desain tautan teks dan hyperlink yang berbeda dari biasanya. Misalnya, saat Anda mengarahkan kursor ke sebuah tautan, itu dapat mengubah warnanya dan kembali ke yang sebelumnya saat kursor menjauh darinya. Ini dapat dilakukan dengan skrip JavaScript khusus. Selain itu, warna tautan dapat diatur ke sesuatu selain biru untuk yang belum dikunjungi atau ungu untuk dikunjungi. Ini adalah tugas CSS.
  • Jangan menyalahgunakan tautan. Sebuah halaman web dengan banyak link yang tidak pantas terlihat ceroboh dan ceroboh.
  • Pastikan pengguna memahami bahwa hyperlink dengan gambar tersebut benar-benar sebuah gambar, dan bukan hanya sebuah gambar.

Kesimpulan

Sangat mudah untuk menautkan ke halaman dalam HTML. Penting untuk mengikuti semua poin utama dari bahasa ini, karena kesalahan kecil saja dapat menyebabkan fakta bahwa tidak akan ada hasil, dan kode tidak akan berfungsi.

Direkomendasikan: