Menyajikan CSS untuk Memformat Tampilan Multimedia & TABEL | Nassya Putri R.

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?

1. Embbeded Image CSS
2. External Image CSS
3. Inline CSS for Background Image
4. Embedded CSS for Background Image
5. Embedded Background Image As Image
6. Embedded Video
7. Embedded Video Youtube
8. Embedded Table Border Collapse
9. External Table with CSS
10. External Table with CSS 2
11. External Table with CSS 3
12. 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.

1. background-repeat:repeat-x; Membuat background berulang secara horizontal.
2. 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!😘