Assalamualaikum teman-teman, hari ini saya mau bagi informasi nih gimana caranya menyajikan CSS untuk Memformat Tampilan Multimedia & TABEL. Saya menggunakan aplikasi Sublime Text, atau kalian juga bisa menggunakan Notepad++, atau text editor yang lain! Ohya, jangan lupa untuk membuat folder gambar, kemudian letakkan gambar gambar yang akan digunakan didalam folder seperti contoh berikut :
Langsung saja nih, apa aja sih yang akan saya bahas?
- Embbeded Image CSS
- External Image CSS
- Inline CSS for Background Image
- Embedded CSS for Background Image
- Embedded Background Image As Image
- Embedded Video
- Embedded Video Youtube
- Embedded Table Border Collapse
- External Table with CSS
- External Table with CSS 2
- External Table with CSS 3
- Quiz
Daripada penasaran, ayoo kita mulai teman-teman!!!!
Embedded Image CSS
 |
| 1 (a) |
 |
| 1 (b) |
Fungsi tag dan atribut :
- clear : untuk membersihkan element yang sebelumnya telah mengalami
float. Sehingga, element yang di-clear akan berpisah dari element yang mengalami float dan akan berpindah pada baris baru.
- border-color : digunakan untuk mengatur warna dari border.
External Image CSS
 |
| 2 (a) |
 |
| 2 (b) -- format file .css -- |
 |
| 2 (c) |
Inline CSS for Background Image
 |
| 3 (a) |
 |
| 3 (b) |
Ingat, sesuaikan nama folder dan nama gambar.
Embedded CSS for Background Image
 |
| 4 (a) |
 |
| 4 (b) |
Embedded Background Image as Image
 |
| 5 (a) |
 |
| 5 (b) |
Fungsi tag dan atribut :
- background-repeat : Membuat background berulang dalam arah vertical dan horizontal. Dalam penggunaannya kode "background-repeat:repeat;" seringkali tak dituliskan karena tanpa kode tersebut secara otomatis sebuah background image akan berfungsi sebagai background berulang.
- background-repeat:repeat-x; Membuat background berulang secara horizontal.
- background-repeat:repeat-y; Membuat background berulang secara vertical.
- background-position : berfungsi sebagai pengarah posisi background-image seperti halnya text-aign pada css, kalau text-align bersifat untuk semua elemen tetapi tidak dengan attribut background:position justru mengarah pada background:image.
- padding-top : mengatur padding bagian atas
- margin-bottom : mengatur margin bagian bawah
Embedded Video
 |
| 6 (a) |
 |
| 6 (b) |
Ingat, lokasi dari penyimpanan video sesuaikan.
Embedded Video Youtube
 |
| 7 (a) |
 |
| 7 (b) |
Fungsi tag dan atribut :
- src : url video youtube
CSS PADA TABEL
Konsep dasar model box
Embedded Table Border Collapse
 |
| 8 (a) |
 |
| 8 (b) |
Fungsi tag dan atribut :
- border-collapse : untuk membuat model border yang spesifik pada table.
External Table with CSS
 |
| 9 (a) |
 |
| 9 (b) -- format file .css -- |
 |
| 9 (c) |
External Table with CSS 2
 |
| 10 (a) |
 |
| 10 (b) |
 |
| 10 (c) |
Fungsi tag dan atribut :
- border-top (solid) : untuk membuat border solid (garis tebal).
- border-right (groove) : untuk membuat border grooved 3D. Efek ini terjadi ketika ada nilai border-color.
- border-left (dashed) : untuk membuat border garis.
- border-bottom (dotted) : untuk membuat border titik.
External Table with CSS 3
 |
| 11 (a) |
 |
| 11 (b) |
 |
| 11 (c) |
Fungsi tag dan atribut :
- vertical-align : untuk membuat model border yang spesifik pada table.
QUIZ
 |
| 12 (a) |
 |
| 12 (b) |
 |
| 12 (c) |
Sekian saja informasi yang dapat saya berikan. Mohon maaf apabila masih banyak kesalahan kata kata yang sifatnya disengaja atau tidak. Semoga dapat bermanfaat. Selamat belajar dan sehat selalu teman teman!😘
