Modul 9 STMIK IKMI CIREBON Oleh Dita rizki amalia.

Presentasi berjudul: "Modul 9 STMIK IKMI CIREBON Oleh Dita rizki amalia."— Transcript presentasi:

1 Modul 9 STMIK IKMI CIREBON Oleh Dita rizki amalia

2 Konsep Dasar Web Fragment Lebih jauh tentang DIV id dan DIV class
Materi Pokok 1. Materi Pokok Konsep Dasar Web Fragment Lebih jauh tentang DIV id dan DIV class

3 2. Pengantar Class Selector diginakan untuk menentukan sekelompok elemen. Berbeda dengan ID Selector, Class Selector digunakan untuk banyak elemen. Pengantar

4 3. Capaian Pembelajaran Mata Kuliah
Kemampuan menganalisis sebuah permasalah yang berkaitan pembagian web fragment Kemampuan mengkonstruksi web fragment dengan markup html5 Kemampuan mengimplementasikan styling pada fragment menggunakan css Capaian Pembelajaran

5 4. Kemampuan Akhir Mahasiswa mampu menganalisis sebuah permasalahan yang berkaitan pembagian web fragment Mahasiswa mampu mengkonstruksi web fragment dengan markup html5 Mahasiswa mampu mengimplementasikan styling pada fragment menggunakan css Kemampuan Akhir

6 5. Kegiatan Belajar a. Uraian dan Contoh 1) Konsep dasar web Fragment
Setiap website/weblog yang anda buka, jika diperhatikan pasti memiliki empat bagian/group. Keempat bagian/group ini antara lain : a. Header: bagian kepala website yang berisi logo website, nama website, slogan website, menu website dan lainnya. b. Content: Berisi isi dari website itu sendiri, jika website berupa weblog, maka contentnya berisi postingan terbaru atau informasi lainnya. c. Sidebar: Berada di samping Content dan biasanya berisi iklan, kategori artikel dan widget atau hiasan situs lainnya. d. Footer Bagian kaki dari website yang pada umumnya diisi dengan tag website tersebut Kegiatan Belajar

7 1) Konsep dasar web Fragment Dalam HTML, kita dapat membagi bagian-bagian tersebut dengan menggunakan tag <div> (division/bagian) dan untuk menamai setiap div kita gunakan atribut id atau class5. Berikut contoh penggunaan tag div jika kita terapkan pada bagian-bagian website yang telah kita sebutkan sebelumnya, contohnya: <div id=‚header> </div> <div id=‚content‛> <div id=‚sidebar‛> <div id=‚footer‛> Kegiatan Belajar

8 2) DIV ID Atribut ID digunakan untuk penamaan elemen HTML yang memiliki karakteristik unik/berbeda. Tidak boleh ada dua atau lebih elemen yang mempunyai ID yang sama. Perhatikan contoh berikut : <div id=‚menu‛> <ul id=‚menu‛> <li>Beranda</li> <li>Tutorial</li> </ul> Kegiatan Belajar

9 3) CLASS ID Class digunakan untuk penamaan elemen yang memiliki karakteristik/struktur sama dan dapat digunakan berulang kali dalam markup (Kode HTML). Sebagai contoh, perhatikan kode HTML berikut : <ul id=‚menu‛> <li class=‚merah‛>Beranda</li> <li>Tutorial</li> <li class=‚merah‛>Berita</li> <li>Video</li> </ul> Kegiatan Belajar

10 Buatlah halaman web dengan layout (web fragment) berikut:
b. Latihan Buatlah halaman web dengan layout (web fragment) berikut: Kegiatan Belajar

11 c. Rangkuman Dalam web fragment di html 5 penggunaan div sangatlah penting hal tersebut diperlukan untuk membagi halaman web menjadi beberapa segmen agar tampilan menjadi lebih menarik. Kegiatan Belajar

12 Dengan menggunakan css buatlah script untuk tampilan html berikut ini:
d. Tes formatif Dengan menggunakan css buatlah script untuk tampilan html berikut ini: Kegiatan Belajar

13 e. Umpan Balik dan Tindak Lanjut
Mahasiswa mendengar, mencatat , dan mengerjakan latihan tentang web fragment baik itu dengan html dan css. Kegiatan Belajar

14 6. Kunci Jawaban tes formatif

15 6. Kunci Jawaban tes formatif

16 7. Referensi [1] Agung, Gregorius. , HTML5 + CSS 3, PT
7. Referensi [1] Agung, Gregorius., HTML5 + CSS 3, PT. Elex Media Komputindo, [2] Lee, Christopher, Mos Wonted CSS Tips and Triks, ANDI Yogyakarta, 2012 [3] Hidayatullah,Priyanto, Pemrograman Web. INFORMATIKA Bandung,2014 Referensi