Cara menggunakan membuat hyperlink di css

Question

Tag link dalam html adalah “a” yang memiliki kepanjangan anchor, secara bawaan sendiri html telah membuat link agar menarik, namun kita dalam melakukan perubahan untuk mengatur link dengan css.

Table of Contents Show

Bagaimana Cara Menambahkan Hyperlink dalam HTML?
Apa sintaks yang benar untuk membuat hyperlink?
Langkah langkah membuat link HTML adalah?
Tag HTML apakah yang digunakan untuk mendefinisikan internal style sheet?
Bagaimana Cara Membuat Hyperlink pada HTML?
Apakah link HTML itu?
Tag HTML apakah yang digunakan untuk mendefinisikan internal style sheet?
Jelaskan apa yang dimaksud dengan CSS?

Table of Contents

Bagaimana Cara Menambahkan Hyperlink dalam HTML?
Apa sintaks yang benar untuk membuat hyperlink?
Langkah langkah membuat link HTML adalah?
Tag HTML apakah yang digunakan untuk mendefinisikan internal style sheet?

Bagaimana agar link dapat menarik dan dapat sesuai dengan desain yang kita inginkan, mulai dari ketika mouse melewati link tersebut hingga setelah dikunjungi, kita dapat mengatur link dengan css tersebut agar link tersebut memiliki warna yang berbeda-beda.

Untuk dapat mengatur link dengan css yaitu dengan menggunakan beberapa pseudo-class, pseudo-class ini akan dibahas pada tutorial berikutnya. Berikut ini tabel pseudo-class yang bisa digunakan untuk mengatur link dengan css.

Properti	Keterangan
:link	Link normal, pada saat menggunakan belum mengarahkan cursor atau belum klik link tersebut
:visited	Pseudo-class :visited akan berfungsi apabila link tersebut telah terjadi klik atau telah dikunjungi
:hover	Fungsi :hover akan aktif apabila mouse mengarahkan atau melewati link tersebut
:active	Pseudo-class :active akan berfungsi apabila link pada saat bersamaan di klik oleh cursor

Dari tabel pseudo-class diatas akan kita bahas satu persatu dengan detail untuk mempermudah proses pembelajaran css tentang mengatur link dengan css ini.

Dibawah ini adalah source code html untuk mengatur link dengan css, silahkan dipraktekan pada komputer anda, lalu perhatikan penjelasan lebih.

<!DOCTYPE html>
<html>
    <head>
        <title>Link</title>
        <style type="text/css">
            a:link {
                color: red;
            }
            a:visited {
                color: yellow;
            }
            a:hover {
                color: blue;
            }
            a:active {
                color: black;
            }
        </style>
    </head>
<body>
    <a href="#">Ini adalah contoh link</a>
</body>
</html>
Code language: HTML, XML (xml)

Jika anda sudah menulis kode diatas pada komputer anda silahkan perhatikan penjelasan detail dibawah ini.

Pseudo-class :link

Pseudo-class link berguna apabila link tersebut dalam keadaan diam, atau cursor mouse tidak mengarah kearah link tersebut, pada source code diatas link yang diam tersebut telah diberi warna merah.

Pseudo-class :visited

Pseudo-class visited akan aktif apabila link telah dikunjungi, ketika link telah dikunjungi maka akan berubah sesuai dengan tampilan yang telah didefinisikan.

Pseudo-class :hover

Pada pseudo-class hover ini akana berfungsi apabila cursor mouse di arahkan tanpa di klik pada link tersebut, maka warnya akan berubah sesuai yang telah ditentukan.

Pseudo-class :active

Pseudo-class active ini akan berfungsi apabila link di klik, untuk membuktikannya silahkan diklik dan tahan, maka secara bersamaan warna link tersebut akan berubah.

Demikianlah tutorial bagaimana cara mengatur link dengan css ini, semoga dapat berguna dan dipraktekan dengan baik.

Assalamualaikum Wr. Wb.

Kembali lagi bersama Webhozz Blog. Pada postingan ini saya ingin membagikan sedikit ilmu tentang CSS, yaitu tentang text hyperlink yang biasanya berisi teks biasa yang selalu kita gunakan untuk menuju halaman tertentu saat diklik. Biasanya Tampilan Standarnya seperti ini.

Biasanya text link seperti itu ketika sudah pernah kita klik, akan berubah menjadi warna ungu. Akan tetapi, saat belum diklik warnanya jadi warna biru. Hal tersebut pasti rasanya agak kurang enak menarik untuk dilihat kan? Jadi, di postingan ini kita akan membuat hal tersebut menjadi menarik semenarik mungkin. Disini kita akan membuatnya menjadi tombol yang menarik. Mari kita mulai.

Pertama kita buka aplikasi Sublime Text 3 (karena itu adalah aplikasi yang saya gunakan pada tutorial ini) dan Kita Buat Source Code HTML seperti berikut.

Kedua, mari kita sisipkan kalimat pada tag <title></title> dan masukkan scipt text linknya pada tag body. Perhatikan pada baris ke-4 dan baris ke-8 pada gambar di bawah ini.

Maka di browser akan tampil seperti ini tampillannya.

Ketiga, coba perhatikan tanda # di baris ke 8. Tanda pagar itu bertujuan agar teks linknya saat kita klik tidak kemana-mana dan tidak terjadi apa-apa karena link tersebut belum kita isi dengan link yang ingin kita tuju. Kemudian pada tag <head></head>, kita isi dengan kode css sebagai berikut (coba perhatikan baris 6 sampai baris 20).

Maka tampilannya akan berubah seperti di bawah ini.

Keterangan dari koding CSS tersebut adalah:

No	Script Kode	Baris	Fungsi
1	<style type=”text/css”></style>	6 dan 19	Sebagai pembuka kode CSS
2	a	7	Dalam HTML, a merupakan tag untuk text link. Jadi dalam style css ini nanti akan berpengaruh langsung pada text link pada tab <body></body>
3	{}	8	Membuat tanda yang merupakan fungsi penyusun pada objek yang ingin dijadikan fungsi css.
4	text-decoration: none;	9	Untuk menghlilangkan garis bawah pada text link
5	color: black;	10	Untuk membuat warna text linknya. Disini warnanya black, berarti warna tulisannya menjadi hitam. Untuk ganti warna, kita bebas gunakan kode warna lainnya.
6	background-color: orange;	11	Untuk mengganti warna background menjadi orange. Untuk ganti warna, kita bebas gunakan kode warna lainnya.
7	font-family: arial;	12	Untuk mengganti format font text linknya. Biasanya teks defaultnya Times New Roman, jadi disini diganti menggunakan font Arial pada text link.
8	font-weight: bold;	13	Untuk membuat text linknya menjadi tebal.
9	border: 1px solid black;	14	Membuat garis tepi pada kotak text linknya dengan tebal 1px dengan style solid yaitu garis dan warna hitam dengan setting black.
10	line-height: 50px;	15	Membuat posisi text link berada di tengah kotak.
11	margin: auto;	16	Membuat posisi keseluruhan bisa menjaga jarak secara otomatis.
12	padding: 10px;	17	Membuat posisi tulisan text linknya di tengah kotak dengan posisi jarak 10px pada sudut atas, kanan, bawah, dan kiri.
13	border-radius: 5px;	18	Membuat sisi kotak pada teks link menjadi lebih tumpul dengan radius 5px, secara otomatis tajamnya sisi kotak akan berubah dengan ketumpulan dengan radius 5px.

Ke empat, stylenya memang sudah berubah. Tapi saat kita arahkan mouse ke text link tersebut, warnanya tidak berubah. Sebenarnya sih gak apa-apa, hanya saja kita perlu menambahkan style agar text linknya keliatan makin interaktif. Oke, kita lanjutkan koding css seperti berikut di bawah script a{} tadi (perhatikan baris 22 sampai 25).

Jika kita gabungkan secara keseluruhan, maka tampilan kodingnya akan jadi seperti ini.

Beginilah hasilnya jika dijalankan di browser saat text link disentuh oleh kursor yang digerakkan oleh mouse. Dan apabila mouse digerakkan menjauhi text luink, maka akan kembali jadi warna orange.

Adapun keterangan dari koding tambahan tadi adalah sebagai berikut:

No	Script Kode	Baris	Fungsi
1	a:hover	22	Sebagai lanjutan dari script untuk text link pada sebelumnya, yaitu a{}. Akan tetapi, disini ada tambahan :hover, yang mana fungsi tersebut berguna saat mouse diarahkan pada text link dan text linknya akan berubah.
2	background-color: yellow;	24	Merubah warna backround pada text link menjadi berwarna kuning, karena kita gunakan yellow sebagai backgroundnya.

Dan Alhamdulillah untuk tutorial kali ini sampai disini dulu. Kita bisa menambahkan juga dengan script kode css lainnya untuk menambahkan kreatifitas kita masing-masing. Jadi, mohon maaf jika ada kekurangan pada artikel tutorial kali ini. Insya Allah akan siap tutorial selanjutnya. Demikian dan terima kasih.

Wassalamualaikum Wr. Wb.

Bagaimana Cara Menambahkan Hyperlink dalam HTML?

Cara Membuat Link di HTML Link pada HTML dapa dibuat dengan tag <a> , kemudian tag ini harus memiliki atribut href untuk menentukan alamat URL tujuan dari link. Link akan ditampilkan dengan warna biru dan garis bawah. Ini adalah style standar dari setiap browser.

Apa sintaks yang benar untuk membuat hyperlink?

Links di HTML – Sintaks.

Tag <a>di HTML mendefinisikan hyperlink. ... .

Atribut terpenting dari elemen <a> adalah atribut href, yang menunjukkan tujuan link..

Kedua contoh di atas menggunakan URL absolut (alamat web lengkap) di atribut href..

Untuk menggunakan gambar sebagai link , cukup letakkan tag <img> di dalam tag <a> :.

Langkah langkah membuat link HTML adalah?

Untuk membuat link di HTML kita perlu yang namanya tag <a> singkatan dari anchor. Tag <a> mempunyai atribut khusus yaitu href. Atribut ini digunakan untuk mendefinisikan alamat url yang nantinya akan dituju. Kepanjangan dari href adalah Hypertext Reference.

Tag HTML apakah yang digunakan untuk mendefinisikan internal style sheet?

Internal CSS Internal CSS adalah kode CSS yang ditulis di dalam tag <style> .

Bagaimana Cara Membuat Hyperlink pada HTML?

Untuk membuat link di HTML kita perlu yang namanya tag <a> singkatan dari anchor. Tag <a> mempunyai atribut khusus yaitu href. Atribut ini digunakan untuk mendefinisikan alamat url yang nantinya akan dituju. Kepanjangan dari href adalah Hypertext Reference.

Apakah link HTML itu?

Hyperlink atau link adalah objek pada HTML (bisa berupa teks, gambar, atau multimedia lainnya) yang jika diklik membawa ke halaman lain. Fungsi dari link adalah untuk menghubungkan satu halaman dengan halaman lain agar mudah diakses.

Tag HTML apakah yang digunakan untuk mendefinisikan internal style sheet?

Internal CSS Internal CSS adalah kode CSS yang ditulis di dalam tag <style> .

Jelaskan apa yang dimaksud dengan CSS?

Kata Tech Terms, CSS adalah salah satu styling language (bahasa desain), bagian dari markup language yang dapat “mewarnai” atau mendesain suatu halaman website. CSS sendiri adalah singkatan dari Cascading Style Sheet. Markup language ini biasanya dipasangkan dengan markup language (bahasa marka) seperti HTML.

kode css Contoh CSS