PWPB - Pertemuan 11 (CSS)

Assalamu'alaikum Wr.Wb

      Halo guys, seperti biasa balik lagi di SekolahQue. Blog yang belajar tentang dasar-dasar codingan bahasa pemrograman Web. Kali ini, kita akan membuat sebuah codingan HTML dan CSS. Sebelumnya, dibeberapa pertemuan sudah belajar CSS dan kali ini kita masih akan membahas tentang CSS lagi guys. Langsung saja kita mulai...

(Untuk mengetahui codingan HTML dan CSS bisa menekan setiap judul tugas yang diberi warna biru)

<!--START--!>

• CSSonForm1.html + onForm1.css

     Pada materi ini, kita menggabungkan antara textarea di html dan file external CSS. Ohh..iya guys, pada pertemuan sebelumnya kita masih banyak menggunakan file internal CSS dan sekarang kita akan menggunakan file external CSS. Baca juga ya pertemuan-pertemuan sebelumnya agar kalian bisa paham dari setiap tag-tag html dan properti di CSS.

• CSSonForm2 + onForm2.css

     Pada CSSonForm1 textarea yang ada tidak di desain dengan warna pada file CSS. Jika kalian membaca pada pertemuan-pertemuan sebelumnya pasti kalian akan paham mengenai fungsi-fungsi pada setiap tag dan properti di html dan CSS.

SCREENSHOT:

• CSSonForm3 + onForm3.css

    Saya menjelaskan apa yang belum saya jelaskan aja ya guys, jika penasaran apa fungsi-fungsi pada tag-tag html bisa baca di pertemuan sebelumnya.

   Pada properti CSS terdapat border-bottom-color yaitu fungsinya untuk memberikan warna pada bagian garis textarea. Dan disana terdapat properti border-left, border-right, border-top, border- bottom yang berfungsi untuk mengubah serta memberikan warna pada tiap garis textarea yang ditentukan oleh masing-masing properti CSS yang tadi saya sebutkan.

SCREENSHOT:

• extCSSonButton.html + CSSonButton.css

    Guys...di CSS tersebut terdapat value dotted itu berfungsi untuk merubah sebuah garis atau border pada textarea atau input menjadi titik-titik sepanjang garis. Sedangkan solid berfungsi sebagai garis akan tetapi garis yang dikeluarkan lebih besar daripada garis border sebelumnya. Dan Dashed berfungsi untuk merubah garis menjadi seperti tanda strip sepanjang garis.

SCREENSHOT:

• extCSSonButtonHover.html + CssonButtonHover.css

        Nahh guys...Untuk memanggil tag html yang akan kita ubah atau kita desain di CSS yaitu dengan cara menambahkan Class atau Id pada tag html setelah itu langsung kita ubah di CSS. Untuk class kita memanggilnya dengan menggunakan tanda "." terlebih dahulu. Jika tag htmlnya berupa input maka kita harus menyertakan input tersebut di CSS.Dan jika tag htmlnya <a> maka disertakan pula a tersebut di CSS Contoh:

<input type="button" name="button" class="button1">-------->HTML

---------------------------------------------------------------------------------------DIBAWAH ADALAH CSS

input.button1{

}

<a href="CSSonForm1.html" class="asal">---------->HTML

---------------------------------------------------------------------------------------DIBAWAH ADALAH CSS

a.asal{

}

Sedangkan untuk id pun tag-tag tersebut masih berlaku pada CSS. Untuk memanggil ID ke CSS ingat ya guys gunakan simbol "#" .Contohnya

<input type="button" name="button" id="button1">-------->HTML

---------------------------------------------------------------------------------------DIBAWAH ADALAH CSS

input#button1{

}

<a href="CSSonForm1.html" id="asal">---------->HTML

---------------------------------------------------------------------------------------DIBAWAH ADALAH CSS

a#asal{

}

SCREENSHOT:

    Nahh...fungsi hover itu adalah ketika kita melihat tampilannya di web dan kita mengarahkan atau meng-klik tombol submit maka tampilannya akan berubah. Sedangkan bila tidak menggunakan Hover akan seperti materi tugas extCSSonButton (Hanya tampilan awalnya saja). Dan untuk menggunakan hover pada CSS harus menggunakan simbol ":" terlebih dahulu. Kalian bisa lihat codingannya di tiap judul tugas yang telah di berikan point-point di atas.

SAATNYA QUIZZZ GUYSS!!
Saya disuruh oleh guru PWPB di sekolah saya untuk membuat form pendaftaran seperti di bawah ini.

Dan harus membuatnya se-kreatif mungkin!

• Quiz11.html + Quiz11.css

Dann ini adalah hasil kreatifitas saya. Nahh untuk membuat textarea atau input menjadi tidak memiliki sudut atau bisa disebut bulat itu menggunakan properti border-radius pada file CSS. Yang fungsinya untuk membuat tiap sudut border menjadi bulat atau bisa berdasarkan keinginan kita sendiri.

SCREENSHOT:

Sekian dulu ya guys...
Pelajari setiap tag-tagnya dan doakan agar SekolahQue bisa terus berkarya...

Assalamu'alaikum Wr.Wb