Cara membuat link css di html

Assalamualaikum Wr. Wb.

Table of Contents Show

Langkah langkah membuat link pada web HTML?
Langkah langkah membuat website HTML dan CSS?
Bagaimana Cara Menambahkan CSS ke dalam dokumen HTML?
Bagaimana cara menulis script CSS di HTML jelaskan?

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.

Langkah langkah membuat link pada web 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. Tentu saja ini bisa kita ubah-ubah sesusi selera.

Langkah langkah membuat website HTML dan CSS?

Membuat Website Menggunakan HTML dan CSS.

Membuat wireframe / kerangka website. Langkah yang pertama ini adalah membuat wireframe. ... .

Menginstal text editor. Langkah kedua inilah yang paling penting. ... .

Membuat folder baru. ... .

Membuat file index. ... .

Membuat file style. ... .

6. Hubungkan file css dengan file html..

Bagaimana Cara Menambahkan CSS ke dalam dokumen HTML?

Ada tiga cara untuk menambahkan CSS ke dalam dokumen HTML: Inline – menggunakan atribut style dalam elemen HTML. Internal – menggunakan elemen <style> di dalam elemen <head> Eksternal – menggunakan elemen <link> di dalam elemen <head>