Atas: Bahasa Markup - Elemen Frasa
Sumber Asli Bab 7 Anchor Point
Cara yang benar untuk mengatakan tautan dalam HTML harus disebut jangkar. Mereka tidak hanya memungkinkan kami untuk menunjuk ke dokumen, tetapi juga ke paragraf tertentu di halaman, dan juga dapat digunakan sebagai alat yang nyaman untuk tautan yang tepat. Biarkan objek tautan lebih dekat ke fokus. Dalam bab ini, kita akan melihat empat praktik jangkar yang berbeda, menjelaskan keunggulan masing -masing metode, dan juga memperkenalkan bagaimana atribut judul dapat meningkatkan kemudahan penggunaan tautan. Selain itu, kami juga akan menggunakan CSS untuk merancang gaya untuk tautan. Ketika Anda perlu menentukan bagian tertentu dari halaman, menandai jangkar adalah cara terbaik untuk melakukannya.
Ini adalah situasi umum saat merancang situs web. Anda ingin menautkan ke bagian tertentu dari halaman tertentu, tetapi pengguna mungkin membaca di halaman lain. Pilih salah satu dari empat metode yang dibahas di sebelahnya memungkinkan Anda mencapai tujuan Anda.
Dalam contoh, misalkan kita bermaksud menautkan ke judul tertentu di halaman yang sama: Metode A: Nama lubang
<p> <a href =#jeruk> tentang jeruk </a> </p>
... beberapa teks ...
<a name = jeruk> </a>
<h2> jeruk lezat </h2>
... lebih banyak teks ...
Gunakan tag jangkar dengan konten kosong dan atribut nama untuk menandai titik tautan tertentu. Mungkin ini adalah metode yang Anda kenal. Letakkan konten kosong <a> di depan judul dan sambungkan (menggunakan simbol #, diikuti dengan nilai atribut nama), yang memungkinkan kita untuk terhubung ke bagian tertentu dari halaman. Ketika halaman berisi daftar panjang item yang perlu digulir, kami dapat dengan mudah terhubung ke proyek tertentu melalui metode ini.
Gambar 7-1 menunjukkan hasilnya setelah mengklik tautan tentang jeruk, yang berarti melompat ke tempat yang kami identifikasi <a name = jeruk> </a>, yang tepat pada judul.
Gambar 7-1. Contoh mengklik untuk terhubung ke tautan jangkar tertentu
Efeknya bagus, tetapi membuang -buang tag kosong untuk mengidentifikasi lokasi tautan agak tidak konsisten dengan semantik. Metode B dapat meningkatkan ini. Metode B: Semua dalam nama
<p> <a href =#jeruk> tentang jeruk </a> </p>
... beberapa teks ...
<h2> <a name = jeruk> jeruk lezat </a> </h2>
... lebih banyak teks ...
Seperti metode A, kami masih menggunakan tag <a> dengan atribut nama, tetapi kali ini kami membungkusnya di luar judul yang ingin saya tautkan. Ini memang terlihat lebih semantik. Dalam metode A, objek koneksi kami adalah ... yah, tidak ada apa -apa, tetapi dalam metode B, kami tidak hanya menjelaskan bahwa teks ini adalah bagian dari tag judul, tetapi juga salah satu jangkar koneksi halaman ini. Hati -hati dengan gaya global <a>
Jika metode B digunakan, ada tempat yang harus Anda perhatikan. Jika Anda menentukan gaya CSS global untuk semua elemen <a> (warna, ukuran teks, dekorasi teks, dll.), Gaya ini akan mengganti gaya yang Anda tentukan untuk elemen <h2>. Alasan ini terjadi adalah bahwa dalam contoh ini, tag <a> adalah elemen anak yang terletak di dalam tag <h2> yang mengelilinginya.
Misalnya, jika Anda memiliki pernyataan seperti ini di CSS Anda:
A{
Warna: Hijau;
font-weight: tebal;
Dekorasi Teks: Garis Besar;
}
Metode B dan CSS ini akan membuat judul berubah menjadi hijau, berani dan digarisbawahi seperti <a> di halaman lain, mungkin berbeda dari gaya <h2> yang Anda harapkan.
Kita dapat menggunakan: tautan kelas semu dari <a> untuk menghindari fenomena ini (dan juga mendapatkan manfaat lain), yang akan dibahas secara rinci nanti dalam bab ini. Atribut nama yang lebih kaya
Salah satu manfaat menggunakan Metode B (dan Metode A) adalah bahwa atribut nama dapat menangani lebih banyak nama jangkar. Secara khusus, itu adalah kemampuan untuk menggunakan simbol dalam nama
Misalnya, jika Anda menggunakan metode B, Anda dapat melakukan ini (di sini mewakili simbol e):
<p> <a href =#resum é> resum saya é </a> </p>
... beberapa teks ...
<h2> <a name = resum é> Dan's resum é </a> </h2>
... lebih banyak teks ...
Fungsi ini sangat penting ketika berhadapan dengan karakter yang bukan milik huruf bahasa Inggris.
Tetapi ada beberapa metode yang perlu disebutkan. Metode berikut tidak memerlukan penggunaan <a> untuk mengatur titik jangkar. Mari kita lihat metode C.
Metode C: Buang nama
<p> <a href =#jeruk> tentang jeruk </a> </p>
... beberapa teks ...
<h2 id = jeruk> jeruk enak </h2>
... lebih banyak teks ...
Ah, fungsi atribut ID seperti atribut nama, yang juga dapat menentukan titik jangkar untuk halaman. Selain itu, metode C juga menghilangkan metode A dan B menggunakan atribut nama sebagai tag <a> tambahan. Kami telah mengurangi kode sumber, yang selalu menjadi hal yang baik.
Karena atribut ID dapat ditambahkan ke tag apa pun, kami dapat dengan mudah menambahkan jangkar ke elemen apa pun di halaman. Dalam contoh ini, kami memilih untuk menambahkan jangkar ke judul, tetapi kami juga dapat dengan mudah menambahkan jangkar ke <div>, <orm>, <p>, <ul> ... dan semua tag lainnya. Satu membunuh, dua burung dengan satu burung
Bahkan, dalam kebanyakan kasus, kita dapat menambahkan gaya atau skrip ke atribut ID yang sudah ada sebelumnya, yang merupakan manfaat lain dari metode C. Karena itu, kita tidak perlu menambahkan kode tambahan untuk hanya mengatur jangkar.
Misalnya, mari kita asumsikan bahwa Anda memiliki formulir untuk meninggalkan komentar di bagian bawah halaman panjang, dan Anda ingin menambahkan tautan ke bagian atas halaman. Formulir ini telah mengatur id = komentar untuk menentukan gaya yang unik. Beginilah cara kami dapat secara langsung menghubungkan ID sebagai jangkar tanpa menambahkan tag <a> dengan atribut nama.
Kode terlihat seperti ini:
<p> <a href =#komentar> Tambahkan komentar! </a> </p>
... banyak teks ...
<bentuk id = Action komentar =/path/to/script>
... bentuk elemen ...
</form>
Juga, jika halaman Anda panjang, maka Anda menambahkan tautan ke jangkar atas di bagian bawah sehingga pengguna dapat kembali ke atas.
Perlu disebutkan bahwa meskipun terlihat sangat cocok, yang terbaik adalah menghindari menggunakan Top saat menentukan nama jangkar. Beberapa browser mempertahankan nama ini untuk tujuan khusus. Menggunakan nama ini dapat menyebabkan hasil yang tidak konsisten. Yang terbaik adalah memilih nama yang sama tetapi tidak menyebabkan masalah. Mungkin menggunakan #gemesis? Atau #utmost? Anda memiliki ide sendiri.
Browser kuno dengan atribut ID
Saat hanya menggunakan atribut ID sebagai jangkar, ada kerugian penting yang layak disebut, yaitu, beberapa browser kuno tidak mendukung metode ini. Oh, ini memang harus dipertimbangkan ketika mengidentifikasi jangkar Anda sendiri, dan ini juga merupakan contoh yang disayangkan dari kompatibilitas ke depan. Mari kita lihat contoh terakhir, metode D. Metode D: Bersama
<p> <a href =#jeruk> tentang jeruk </a> </p>
... beberapa teks ...
<h2> <a id = name jeruk = jeruk> jeruk lezat </a> </h2>
... lebih banyak teks ...
Jika Anda ingin mencapai kompatibilitas maju dan kompatibilitas mundur saat menandai jangkar, Anda mungkin akan menyukai metode ini. Baik browser kuno dan masa depan dapat dengan benar mengidentifikasi tag jangkar bernama, tetapi karena W3C tidak merekomendasikan atribut nama (http://www.w3.org/tr/xhtml1/#c_8) dalam rekomendasi XHTML1.0, Anda juga menggunakan atribut ID untuk mendukung browser masa depan.
Sama seperti metode B, kita harus memperhatikan gaya global yang mempengaruhi tag <a>.
Nama bersama
Jika Anda memilih untuk menggunakan metode D, dapat diterima untuk memilih nama yang sama untuk atribut ID dan nama (mungkin sangat nyaman), tetapi ini hanya mungkin jika ada pada tag yang sama. Selain itu, hanya ada beberapa tag spesifik yang memungkinkan ini, yang, tepatnya, termasuk <a>, <pllet>, <fame>, <mmg>, <peta>. Oleh karena itu, kami memindahkan id = jeruk dari <h2> ke tag jangkar.
Sekarang kita telah melihat empat metode untuk menetapkan titik jangkar, mari kita ringkas kelebihan dan kerugian dari masing -masing metode.
Sebelumnya Halaman 1 2 3 Halaman Berikutnya Baca teks lengkapnya