Pautan Teks HTML

Pautan HTML boleh menjadi pautan atau hiperpautan. Ini mengubah hala ke halaman, imej atau tapak web lain; ia boleh jadi apa sahaja. Ia juga digunakan untuk menavigasi pada halaman yang sama untuk bahagian tertentu. Mereka biasa memaparkan data dan dokumen hanya dengan mengkliknya. Kami membungkus dokumen, imej, url atau data kami di dalam teks. Bergantung pada keperluan, ia juga boleh menunjuk ke fail, objek atau apa-apa pada halaman yang sama atau halaman yang berbeza. Apabila kita menuding tetikus pada pautan HTML, ia menukar kursor kepada ikon lain. Kita boleh membincangkan cara ia berfungsi dan cara menciptanya dalam bahagian seterusnya artikel kami. Dalam topik ini, kita akan belajar tentang pautan Teks HTML.

Sintaks untuk Pautan HTML

Kami boleh mencipta Pautan HTML pertama kami daripada sintaks berikut di bawah. Kami akan menggunakan teg, atribut dan sifat yang sepadan dalam sintaks yang diberikan di bawah.

<a href="your url">Link your corresponding text here</a>

Dalam sintaks di atas, kami menggunakan tag anchor untuk membuat pautan html atau hiperpautan. Kami akan membincangkan tag anchor ini secara terperinci.

Teg anchor ialah teg yang melaluinya kami boleh melampirkan atau memautkan teks, frasa atau perkataan kami untuk membuat pautan luaran atau dalaman. Dengan menggunakan tag anchor; kami membuat URL ke dalam halaman kami yang boleh digunakan untuk menavigasi ke mana-mana halaman lain, tapak web atau dalam bahagian yang sama pada halaman itu.

Menggunakan tag anchor, kami mempunyai banyak kelebihan yang dinyatakan di bawah.

• Atur: Ia membantu untuk mengatur data kami. Kami tidak perlu membuat beberapa halaman web atau membahagikan data kami kepada beberapa bahagian untuk tujuan pengurusan; kami boleh menyusun data kami dengan mudah di satu tempat sahaja.
• Tiada Tatal: Dengan menggunakan pautan html atau pautan dalaman html, kita tidak perlu risau tentang menatal pada halaman yang sangat panjang; kita boleh klik pada pautan itu untuk mencari halaman bahagian yang dikehendaki. Jadi ia memudahkan untuk mencari sebarang data atau bahagian pada halaman.

Bagaimana untuk Membuat Tag Anchor?

Seperti yang anda boleh lihat dalam sintaks di atas, kami telah menggunakan begitu banyak perkara di sana sekarang; kita akan melihat dengan lebih dekat cara mencipta dan cara ia berfungsi.

Ia terdiri daripada tiga bahagian berbeza (atribut):

1. atribut href
2. atribut sasaran
3. atribut nama

1. atribut href

Atribut href bermaksud rujukan hiperteks. Katakan kita ingin membuat hiperpautan, jadi keperluan pertama ialah alamat dokumen yang boleh sama seperti tapak web lain, fail seperti PDF, dll.

Jadi, sebagai contoh :

<a href="http://www.google.com">Google</a>

Dalam hal ini, http://www.google.com ialah nilai yang kami tetapkan pada atribut href kami. Oleh itu, setiap kali kita mengklik Google, ia akan mengarahkan kita ke pautan halaman utama google. Oleh itu atribut href mengandungi alamat dokumen. Kami juga boleh menyebut pautan HTML kami sendiri ke href.

Contohnya

<a href="demo.html">My page</a>

2. atribut sasaran

Atribut sasaran mentakrifkan cara dokumen akan dibuka. Ia mempunyai banyak jenis, dan kita boleh menggunakannya mengikut keperluan kita.

• _ibu bapa: Ia hanya membuka dokumen yang dilampirkan ke dalam bingkai induk.
• _blank: Ia membuka dokumen ke dalam tab atau tetingkap baharu.
• _atas: Ia membuka dokumen yang dilampirkan dalam tetingkap penuh.
• _self: Ia membuka dokumen ke dalam tetingkap yang sama atau tab yang sama di mana dokumen itu diklik. Secara lalai, sasaran ini didayakan. Kita boleh ubah suai seperti di bawah :

<a href="http://www.demo.com" target="_blank" rel="noopener">Your Link text</a>

Di sini target=”_blank” ialah sintaks untuk menggunakannya.

3. atribut nama

Atribut nama digunakan untuk melompat atau menavigasi ke satu titik pada halaman; ini boleh berguna apabila kami mempunyai halaman VRU yang penting dengan kandungan yang begitu banyak. Ini membantu menjimatkan penemuan dan masa pengguna tanpa menatal. Sintaks di bawah:

<a name="to end"></a> or

Dalam hal ini, kami mengklik untuk pergi ke penghujung halaman tanpa menatal ke bawah.

<a href="#SomeSection">Section</a>

Pelayar ini akan mengenal pasti bahagian tersebut, tetapi kita mesti menggunakan (#) dengan atribut nama.

<a href="otherpage.html#title">Link your text</a>

Dengan ini, kami secara dalaman boleh merujuk kepada "tajuk" beberapa halaman lain. Di sini juga, (#) mesti digunakan pada penghujung alamat halaman.

Warna Pautan HTML

Kami juga boleh memberikan warna pada pautan html kami. Secara lalai, mereka mempunyai tiga keadaan untuk warna pautan; ini akan muncul dalam semua penyemak imbas.

• Pautan aktif: Apabila kita mengklik mana-mana pautan, ia menjadi pautan aktif dengan warna bergaris bawah dan merah.
• Pautan yang tidak dilawati: Warna lalai penyemak imbas standard untuk pautan yang belum dilawati ialah biru dan bergaris bawah.
• Pautan yang dilawati: Ini berwarna ungu dan bergaris.

Tetapi kami juga boleh menyediakan warna tersuai kami untuk dipautkan menggunakan sintaks di bawah. Kami boleh mengikuti jenis yang berbeza ini untuk memberi warna pada pautan kami. Tetapi kami menggunakan CSS sebaris di sini; anda juga boleh membuat CSS luaran jika anda mahu.

• Directly provide the name of the color.
• By using the HEX color code.
• By using rgb() and rgba() values.
• By using hsl and hsla() values.

<a href="http://demo.com/" style="color:blue;">Red Link</a>

We can directly specify the color name in the style attribute. This is an inline CSS.

<a href="http://demo.com/" style="color:#FF0000;">Red color code</a>

Here we are specifying the color by using color codes. (HEX color codes)

<a href="http://demo.com/" style="color:rgb(255,0,0);">Red color</a>

We can also use RGB() values to specify the color of our links. We can control the opacity of the color by using rgb().

<a href="http://demo.com/" style="color:rgba(255,0,0,0.4);">Red color</a>

You can replace rbg() with rgba() but specify the fourth value for transparency and opacity.

<a href="http://demo.com/" style="color:hsl(0,10%,50%);">Red color</a>

We can also use HSL t color our link. HSL stands for hue, saturation, and lightness. We can also use HSLA for specifying color, but we need to provide one more parameter in hsla().

Conclusion – HTML Text Link

So in Sort, we use the anchor tag and its attributes to create the hyperlink or link in HTML. HREF contains the document’s address and the target responsible for handling the document. We can also color our link using inline or external CSS.

Atas ialah kandungan terperinci Pautan Teks HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!