CSS Links, Lists, and Tables (RAS)

Hallo semua, kembali lagi di blog feed the code. kali ini kita akan membahas mengenai Links, Lists, dan Tables. buat teman-teman yang belum tau, fungsi css adalah untuk merapikan/membuat suatu web itu lebih manarik, keren, dan mudah di gunakan. dah kali ini kita akan membahas nya satu per sat, langsung saja kita bahas

1. CSS Links

dengan adanya Links , tombol atau link nya bisa bebeda-beda contoh nya : 

gimana sih cara buatnya?? gampang kok, kita bisa membuat dengan cara mengkombinasikan semuanya jadi lebih bagus jika kita belajar HTML dan CSS dengan baik , nah jadi kita lihat dan simak perlahan.

pertama, kita harus membuat form, kemudian kita masukan tag <a> yang arti nya link, kemudian kita membuat css nya yang itu style yang dengan tag <style> kemdudian masukan kodenya :

yang pertama, link: artinya adalah warna dari linknya, ketika tidak melakukan apa apa.  yang saya masukan adalah warna hijau : 

setelah itu , visited : artinya adalah ketika kursor / pointer kita mengenai/tekan link tersebut maka akan terjadi perubahan warna yang mulanya hijau saat di didekatkan akan menjadi blue: 

nah seperti itu , setelah itu hover : artinya adalah ketika kursor kita hanya mengarah ke link terserbut, tidak ditekan hanya sekedar menyentuh :

 dan yang terakhir ada active : artinya adalah ketik mengclick link tersebut :

nah mudah kan ?? tapi gimana cara menampilkan tidak ingin ada garis bawah ?? tinggal di tambahin text-decoration aja, maka garis bawah akan hilang.

maka hasilnya akan menjadi : 

atau teman-teman ingin  mengstabilo text tersebut? bisa kok , tambahin aja background-color di bawahnya sesuai dengan keinginan. nah terus kita akan membuat link tersebut dalam bentuk button, gimana caranya?? nih contoh hasilnya : 

gimana ?? baguskann, gimana nih cara buatnya ? tapi sebelumnya teman-teman sekalian harus bisa membedakan antara link dan button , kalau LINK itu untuk membuat new tab saat kita menglick nya ,sedangkan BUTTON itu ketika diclick akan terjadinya proses, bisa juga kalau diclick membuat new tab tapi tidak sering ditemukan, maka dari itu button bisa dimasukan codingan javascript sedangkan link tidak. tapi fungsinya sama kok. nah kita liat ni codingannya : 

nah codingan nya sudah jelas kan ?? border-radius adalah membentuk lengkungan pada border. semangkin tinggi radius pada border, makin lengkung sebuah persegi panjang tersebut. kemudian codingan lain seperti text-align, display teman-teman sekalian bisa cek di blog ini juga

         2. CSS Lists

nah sebelumnya , Lists itu adalah seperti daftar/daftar isi, bisa berupa daftar menu,dll. nah saya akan memberi contohnya : 

nah gimana, unikkan ? contoh ini bisa di gunaka jika kita ingin membukan bisnis makan atau bisnis kecil berupa menu makanan, nih codingan nya : 

nah biar saya perjelas artinya , tag <ul> artinya adalah seperti daftar items layaknya peluru jadi bisa berupa bentuk bulat , kotak, bintang ,dll.  kemudian ada tag <li> arti nya adalah isi nya . nah dalam tag <ul> itu ada tag <li> , nah tipe nya ada beberapa, yang saya katakan sebelumnya tag <li> ada berupa bulat (circle), kotak(square), dll. sedangkan tag <ol> itu sama tapi dalam tag <ol> ada tag <li> yang isinya berbeda, kalau tag <ul> berisi bentuk, makan tag <ol> itu berisikan urutan, bisa berupa angka (1,2,3,dst) , romawi (I,II,II,IV,dst), option huruf (a,b,c,d,dst). 

           3. Tables

nah seperti yang kita ketahui, tables, yang arti nya adalah tabel. nah simpel saja sih , kita hanya menbutuhkan 3 element , yaitu  <table> , <tr> , <td>. biar saya perjelas, 

<table> itu arti nya adalah kita sudah membuat table , tapi belum diisi/masih kosong.

<tr> arti nya adalah kita membuat baris pertama , dan belum diisi/masih kosong.

<td> arti nya adalah isi dari <tr> tersebut. contoh nya : 

nah ini bentuk umumnya, kenapa gak ada garis pemisahnya ?? karena kita belum memasuka ukuran garis nya. saya akan jelaskan, deretan "Nama,Kelas,Umur" itu merupakan deretan satu atau baris pertama. kemudian "Rico,XI TKJ 1, 16 tahun" itu merupakan barisan kedua. kemudian "Nama,Rico" itu merupakan kolom pertama, "Kelas, XI TKJ 1" itu merupakan kolom kedua begitu seterusnya. jadi cara simpelnya "XI TKJ 1 " terletak pada baris kedua kolom kedua. 

gimana cara agar lebih terlihat rapi?? kita tambahin saja "border:1px" pada tag <table> , arti nya adalah kita menambahkan garis/pemisah antar kolom dan baris dengan ukuran 1 pixels, ukuran disini berarti ketebalan pemisah antara kolom dan baris.

hasilnya akan seperti ini : 

atau kalian bisa membuat tulisannya menjadi tengah, bisa tambahakan text-align:center pada tag <style>. gimana ?? mudahkan ?? 

Nah, sampai disini dulu materi kita, mungkin materi ini tidak begitu banyak, ini hanya sebagian dari materi-materi yang ada. masih banyak materi yang harus teman-teman sekalian yang harus pelajari. kiranya sobat-sobat sekalian bisa mengerti yang saya sampaikan. ataupun sobat-sobat ada yang tidak mengerti ataupun materi yang disampaikan kurang jelas teman-teman sekalian bisa komentar di kolom bawah dan bertanya.

baik, sampai disni dulu , kiranya bermaanfaat bagi teman-teman sekalian yang membaca artikel ini , terima kasih.