Tutorial CSS Font, Link, dan Table

CSS Font, Link, dan Table

Assalamu'alaikum W. W.

A. Pendahuluan
Halo, pada kesempatan kali ini saya akan menjelaskan tentang CSS, dalam pengaturan Font huruf, Link dan Table .

1.Pengertian
  Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen / artibut dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukanlah sebuah bahasa pemograman.
  CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

2.Latar Belakang

Ingin mengetahui bagaimana cara membuat tampilan dalam sebuah website dengan baik.
3.Maksud dan Tujuan
Paham dan dapat mengggunakan CSS, dan dapat membuat tampilan dalam sebuah website.
B. Alat dan Bahan

-PC
-Text Editor
-Web Browser
C. Jangka Waktu Pelaksanaan
-
D. Penjelasan
Font
Artibut - artibut untuk mengatur font:
   1. Font Family
Font familiy digunakan untuk mengatur jenis font apa yang akan digunakan, seperti Arial, Sans-serif, serif, dll.

   2. Font Style

Font style digunakan untuk mengatur gaya font dalam sebuah website, seperti italic, obilique.

   3. Font Size

Font size digunakan untuk mengatur ukuran dari font dalam sebuah website. Ukuran normal font ketika tidak di atur adalah 16px = 1em.
Font size juga dapat diatur dengan menggunakan  pixel, em, dan persen.
   4. Font Weight
Font weight digunakan untuk mengatur ketebalan dari sebuah font, dapat di atur menjadi Bold/Sangat tebal.
   5. Font Variant
Font variant digunakan untuk menentukan teks harus ditampilkan dalam font huruf kecil atau tidak. Contoh, dalam small-caps, semua huruf kecil diubah menjadi huruf kapital. Namun huruf kecil yang diubahy menjadi besar terlihat dalam ukuran lebih kecil daripada ukuran normal.
Contoh Penggunaan CSS Font:
Script:

Tampilan :

 

Link
Link dapat di atur dengan properti CSS apapun (misalnya color, font-family, background, dsb.).
Ada 4 properti link, yaitu :

1.  a:link : untuk link normal yang belum dikunjungi.
2.  a:visited : untuk link yang telah dikunjungi.
3.  a:hover : untuk pengaturan ketika cursor berada pada atas link.
4.  a:active : untuk link yang diklik.

  Contoh penggunaaan :

Advanced - Link Buttons
 Contoh ini menunjukkan di mana kita menggabungkan beberapa properti CSS untuk menampilkan link sebagai kotak / tombol:
Contoh penggunaan :
Script :

Tampilaan di website :

Table
1. Table Border
     Table border digunakkan untuk membuat border untuk table. dengan cara engeetikan border : 1px solid black  ; 1px = tebal tabel , solid = jenis table, black = warna table.
2. Table Collaapse
     Table collapse digunakan untuk mengatur agar table hanya meemiliki satu border.
3. Table Width and Height
     Di sini kita dapat mengatur panjang dan lebar sebuah table.
4. Horizontal Alignment
     Di sini kita dapat mengatur letak dari tulisan yang berada pada dalam tabel secara horizontal.
5.  Vertical Alignment
     Di sini kita dapat mengatur letak dari tulisan yang berada di dalam tabel secara vertical.
6. Table Padding
     Table padding mengatur jarak antara border dan konten di dalam table, gunakan padding properti di <td> dan <th>.
7. Horizontal Dividers
     Di sini kita dapat mengatur agar yang terlihat hanya border-bottom/ bawah -nya saja.
8. Hoverable Table
     Di sini kita mengatur agar ketika mouse berada pada atas konten table, makan background table akan berubah.
9. Striped Table
     Di sini kita mengatur agar table memiliki background selang seling antar satu baris.
10 . Table Color
     Table Color berguna agar kita dapat mengatur warna dari table yang kita buat.
11.  Responsive Table
     Di sini kita mengatur agar table dapat respom=nsive di semua device. Dan ketika device itu terlalu kecil untuk table, maka di bawah table persis akan muncul scroll.
Contoh penggunaan :
Script :

 

 Tampilan :

E. Kesimpulan
>Penggunaan pengturan font yang baik dapat membuat website menjadi lebih indah.
>Penggunaan link yang benar dapat membuat website menjadi lebih menarik dan efektif
>Pengaturan table yang benar dapat membuat website anda menjadi lebih menarik.
F. Referensi
https://id.wikipedia.org/wiki/Cascading_Style_Sheets
https://www.w3schools.com/css/css_font.asp
https://www.w3schools.com/css/css_link.asp
https://www.w3schools.com/html/html_tables.asp

Wassalamu'alaikum W. W.

Share this post