PWPB - Pertemuan 10 (CSS)

Assalamu'alaikum Wr.Wb
Salam sejahtera bagi kita semua...

Halo guys, kembali lagi di SekolahQue. kali ini kita masih akan membahas tentang CSS (Cascading Style Sheet). Kalo begitu langsung aja kita mulai...

(Untuk melihat codingan HTML-nya klik ya setiap judul tugas yang berwarna biru)

!--START--!

• EmbImageCSS.html

Nahh...disini saya akan memperlihatkan sebuah kodingan ya guys. Dibawah ini adalah contoh hasil dari codingan HTML dan CSS internal. klik ya judulnya :)

SCREENSHOT:

• ExtImageCSS.html

Ini adalah contoh penggunaan CSS external pada gambar / image. Jika sebelumnya kita menggunakan CSS internal kali ini saya coba memperlihatkan CSS External. Seperti apa yaa?? :) Klik judul yaa untuk melihat HTML dan di bawah itu adalah CSS ya guyss...

• ExtImage.css

Img#kucingkaget{ margin-top: 10px; float: left; clear: both; } Img#kucingteroris{ margin-top: 5px; float: right; clear: both; border: dotted; border-color :salmon; } Img#kucingpiano{ margin-top: 10px; float: right; clear: both; }

SCREENSHOT:

• InlineCSSforBgImage.html

Disini ingat ya guyss, untuk background gif-nya sesuaikan dengan resolusi layar kalian. Simple kok coba aja di rumah kalian dan asah kemampuan kalian sebaik-baiknya : )

SCREENSHOT:

• EmbCSSforBgImage.html

Untuk yang ini coba aja kalian cari GIF yang menurut kalian menarik dan bagus. Soalnya saya kurang tahu apakah ini harus sesuai resolusi layar atau tidak. Dan ingat ya guys, asah kreatifitas kalian agar mudah memahami bahasa pemrograman HTML dan CSS.

SCREENSHOT:

PENGETAHUAN...

• EmbBgImageAsImage.html

Sesuaikan ya guys dengan resolusi layar kalian agar GIF yang kalian pilih tetap cantik dan tampil sempurna :D

SCREENSHOT:

• EmbVideo.html

Untuk permulaan belajar CSS saya banyak menggunakan type CSS internal ya guys. Dan, di bawah ini salah satu contohnya. Untuk Videonya itu hanya contoh saja ya bukan video punya saya :D

SCREENSHOT:

• EmbVideoYoutube.html

Nahh...Disini kita akan mencoba mempelajari bagaimana cara agar tampilan web kita bisa seperti di bawah ini kalian liat aja ya guyss. Nahh yaitu dengan menggunakan tag <iframe allowfullscreen> kalian nanti tinggal salin link youtube yang ingin kalian gunakan dan hasilnya akan seperti ini. Ingat ya guyss pastenya di attribute "src" .

 Apa sih itu iframe dan apa sihh fungsinya?

Sebuah iframe berfungsi untuk menampilkan web page (halaman web) pada sebuah web page (halaman web). Maksudnya kita akan menampilkan suatu halaman web tertentu pada web kita. Tag yang di gunakan untuk menampilkan iframe adalah <iframe> dan penutupnya </iframe>

PEMBAHASAN SELANJUTNYA....

Guys, buat kalian yang ingin mengetahui tag-tag tabel lebih jelas bisa lihat Pertemuan 5 dan Pertemuan 6. Utamakan untuk membaca dan memahaminya terlebih dahulu agar dapat memahaminya dengan mudah dan baik.

Pahamii ya guyss hihi...

• EmbTableborderCollapse.html

Fungsi dari border-collapse adalah untuk membuat model border yang spesifik pada tabel. Bisa kalian lihat hasil dari codingannya atau klik judul bila ingin melihat codingannya secara langsung :D

SCREENSHOT:

• ExTableWithCSS.html + CSSonTable1.css

Tadinya saya mau memakai Try it editor di W3SCHOOL cuman untuk menambahkan file CSS-nya saya kurang tahu. Ketika saya mencari referensi ternyata dapet JSFiddle seneng dehh :D

Maafin ya guys, Adminnya terlalu kesenengan hihi...

SCREENSHOT:

• ExTableWithCSS2.html + CSSonTable2.css

Langsung saja liat codingannya dengan klik judul tugas, dan pahami tag-tag di pertemuan 5 dan pertemuan 6 ya guyss...

SCREENSHOT:

• ExTableWithCSS3.html + CSSonTable3.css

SCREENSHOT:

Quiz! Praktikum 10 guyss...

• Tugasp10.html + Tugasp10.css

Maaf ya guyss hihi...yang penting mirip-mirip dengan Quiznya...

Usaha terus-terusan agar dapat menyelesaikannya dengan baik...

SCREENSHOT:

Sekian dulu ya guyss...
Maaf kalo kurang paham atau kurang jelas dalam penjelasannya...
Do'akan agar SekolahQue dapat terus berkarya...

Assalamu'alaikum Wr.Wb