Belajar CSS Dasar (Table With CSS) - Praktikum 10

-

Assalamualaikum WR.WB


Hai,Kembali lagi ke blog saya,Pada postingan kali ini saya masih akan membahas tentang CSS.
Tapi kali ini kita akan berfokus tentang membuat tabel dan menghiasnya dengan CSS.Untuk lebih jelasnya kita langsung ke materinya

1.EmbeddedImageCSS

Coding:



Pembahasan:

Codingan ini berjenis Embedded CSS,sama seperti codingan sebelumnya Embedded artinya codingan CSS nya berada di head file HTML,dan banyak property CSS yang kita gunakan dalam postingan postingan sebelumnya


Output:



2. External Image CSS

Codingan HTML:



 Codingan CSS:



 Pembahasan:

Codingan ini berjenis External CSS,yang artinya file CSS dan file HTML nya terpisah/bukan dalam 1 folder.border:dotted berfungsi untuk  membuat border titik

Output:




 3. InlineCSSforBgImage

Coding:




Pembahasan:

Codingan ini berjenis inline,artinya didalam file HTML yang sama,dalam masing masing tag CSS
Poperty yang digunakan sama seperti postingan sebelum sebelumya seperti font-size,background-colour,dll


Output:


 4.EmbeddedCSSforBgImage

Coding:



Pembahasan:
Sama seperti Codingan sebelumnya, Property - Property yang digunakan pada codingan ini sebelumnya juga sudah pernah digunakan dan dijelaskan seperti font-family,text-shadow,dll

Output:


5.EmbeddebBgImageAsImage

Coding:



Pembahasan:

Output:


Pembahasan:

Codingan ini menggunakan embedded CSS,Dalam codingan ini ada property background-repeat,background-repeat berfungsi untuk mengulang background sampai berulang ulang,repeat-x berarti mengulangnya kesamping,jika repeat-y mengulangnya ke bawah.

6.Embedded Video

Coding:


Pembahasan:

Codingan ini hampir sama dengan postingan yang lalu,untuk menampilkan video,tetapi bedanya ini juga memakai CSS,contohnya style="display"

Output:




7.EmbeddedVideoYoutube

Coding:



 8.EmbeddedTableCollapse

Coding:

 Pembahasan:

 

 9. ExternaltableCSS1

Coding:


Codingan CSS:


Pembahasan:



10.ExternalTableCSS2

Coding:


Codingan CSS:

Pembahasan:



 11.ExternalTableCSS3

Codingan HTML:




Codingan CSS:


Output:






Pembahasan:

Nah,ketiga codingan diatas sama dengan postingan yang lalua(menampilkan tabel) tetapi bedanya sekarang kita mengedit tabel tersebut menggunakan CSS,contohnya untuk mengatur border.kita bisa membuat border menjadi titik,garis,atau pun double bisa menggunakan CSS.Contoh seperti codingan diatas.

12.Quiz

Codingan HTML:


Codingan CSS:



Output:



Nah,mungkin cukup sekian postingan saya kali ini semoga postingan ini bisa bermanfaat bagi kita semua,dan mohon maaf apabila ada yang tidak jelas atau kurang dipahami,sampai ketemu di postingan selanjutnya




Komentar

Posting Komentar

Postingan populer dari blog ini

Laravel : Create Data, Validation, dan Old Input

-
Gambar
Assalamualaikum WR.WB     Hai! kembali lagi ke blog saya,pada postingan kali ini saya akan memberikan materi Laravel yaitu Membuat data di Laravel (Create Read Update Delete)  atau disebut juga dengan CRUD.Nah mari kita langsung ke pembahasannya!      Di postingan  sebelumnya , kita telah membuat beberapa tabel diantaranya tabel siswa dan juga kelas, jadi sekarang kita akan membuat create data di tabel siswa caranya sebagai berikut: 1. Buat link untuk menghubungkan form utama dengan form tambah data buka file  resources/views/belajar.blade.php  kemudian tambahkan ini di bawah tulisan data siswa <a class="btn btn-sm btn-success" href="{{ url('/siswa/create') }}">Tambah Data</a> 2. Ubah Routes buka file file  routes/web.php  lalu tambakan Route::get('/siswa/create','SiswaController@create'); 3. Menampilkan view dengan nama form yang terdapat pada folder siswa buka file  app/Http/Controllers/SiswaControlle
Baca selengkapnya

Belajar PHP (Nested Looping) -Praktikum 24

-
Gambar
Assalamualaikum WR.WB Hai!Kembali lagi ke blog saya,pada postingan kali ini saya akan memberikan tutorial menggunakan Nested Loop di PHP.Tapi sebelum kita ke materi apa sih yang disebut Nested Loop? Pengertian Nested Loop 1. Nested Looping Nested Looping adalah istilah dimana kita menggunakan beberapa kali pengulangan dalam 1 codingan, istilahnya tidak jauh berbedadengan Nested If . Seperti yang telah kita ketahui, jenis jenis pengulangan ada 3, yaitu : For, While, dan Do - While. Dalam Nested Looping kita dapat menggunakannya dengan bersamaan, sekarang saya akan mencontohkan penggunakan Nested Looping. <html> <head> <title> Ammar taradifa - XI RPL 3</title> </head> <link href="Loop.css" rel="stylesheet" type = "text/css" > <body> <center> <?php $jumlah = 5; for ($i = 1; $i <= $jumlah; $i++) { for ($j = 1; $j <= $i; $j++) { echo 'X'; }
Baca selengkapnya

Program Menentukan Hari Menggunakan If Dan Switch Case dan

-
Gambar
Assalamualaikum WR WB Pada postingan akan kali ini saya akan membahas program untuk menentukan kode hari dan menentukan kelulusan seseorang. 1. Program Menentukan Hari If Program ini akan menentukan hari berdasarkan kode yang user input,yang nanti akan dieksekusi oleh program.contohnya user menginput angka 7 maka program akan mengoutput hari senin. Berikut codingan programnya: Jadi apabila user menginput kode dari 1 - 7  maka program akan mengoutput dari hari minggu - hari senin.Berikut rincianya: -Kode 1 = Hari Minggu -Kode 2 = Hari Senin -Kode 3 = Hari Selasa -Kode 4 = Hari Rabu -Kode 5 = Hari Kamis -Kode 6 = Hari Jumat -Kode 7 = Hari  Sabtu  Berikut hasil programnya: 2. Program Menentukan Hari Switch Case Program ini sama seperti program di atas akan tetapi kali ini menguunakan switch case,Apa itu switch case? Switch-case merupakan pernyataan yang dirancangan khusus untuk menangani pengambilan keputusan yang melibatkan sejumlah atau banyak alternatif
Baca selengkapnya