Modul 6 STMIK IKMI CIREBON Oleh Dita rizki amalia
Pengenalan DIV ID dan DIV Class Pengenalan float positioning Materi Pokok 1. Materi Pokok Pengenalan DIV ID dan DIV Class Pengenalan float positioning Position Relative dan Position Absolut Implementasi Styling dan positionong pada markup DIV Studi Kasus
2. Pengantar Kelebihan CSS dalam layout web dibandingkan tabel adalah fleksibilitas dan juga lebih meminimalisasi jumlah byte file. Apabila Anda menggunakan tabel untuk mendesain layout, maka semakin banyak sel yang dibuat, akan semakin besar ukuran byte file dan akibatnya loading web pun membutuhkan waktu yang lebih lama. Pengantar
3. Capaian Pembelajaran Mata Kuliah Kemampuan mengkonstruksi Layout menggunakan markup DIV HTML Kemampuan memilih dan mengimplementasikan tipe pisitioning yang tepat pada permasalahan – permasalahan tertentu seperti float positionong, position relative dan position absolut menggunakan CSS . Capaian Pembelajaran
4. Kemampuan Akhir Mahasiswa mampu mengkonstruksi Layout menggunakan markup DIV HTML Mahasiswa mampu memilih dan mengimplementasikan tipe pisitioning yang tepat pada permasalahan – permasalahan tertentu seperti float positionong, position relative dan position absolut menggunakan CSS Kemampuan Akhir
5. Kegiatan Belajar a. Uraian dan Contoh 1) DIV ID dan DIV Class a) 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. Kegiatan Belajar
1) DIV ID dan DIV Class a) DIV ID Contoh : Kegiatan Belajar
1) DIV ID dan DIV Class a) DIV ID Output : Kegiatan Belajar
1) DIV ID dan DIV Class b) DIV Class Class digunakan untuk penamaan elemen yang memiliki karakteristik/struktur sama dan dapat digunakan berulang kali dalam markup (Kode HTML). Kegiatan Belajar
1) DIV ID dan DIV Class b) DIV Class Contoh : Kegiatan Belajar
1) DIV ID dan DIV Class b) DIV Class Output : Kegiatan Belajar
2) Float Positioning Meratakirikan elemen gambar dan membuat paragraf naik keatas. Contoh : Kegiatan Belajar
2) Float Positioning Meratakirikan elemen gambar dan membuat paragraf naik keatas. Output: Kegiatan Belajar
3) Positioning a) Static Secara default, seluruh elemen/tag HTML memiliki positioning static. Artinya anda belum bisa/tidak dapat menentukan posisi elemen tersebut. Ketika anda ingin merubah posisi dari elemen tersebut maka anda harus memberikan position:relative dan selanjutnya anda dapat menggunakan property top, right, bottom, dan left untuk menentukan posisi elemen yang bersangkutan. Sebagai contoh perhatikan kode HTML dan CSS berikut : <div id=‚box‛></div> Berikut kode CSSnya. #box{ width : 300px; height : 300px; } Kegiatan Belajar
3) Positioning a) Static Ketika anda tidak memberikan nilai pada property position, maka secara default, #box memiliki position:static, jadi anda tidak dapat menggunakan property top, right, bottom dan left untuk menentukan posisi #box tersebut : #box{ background : green; width : 300px; height : 300px; top : 100px; left : 200px; } Kegiatan Belajar
3) Positioning a) Static Output Kegiatan Belajar
3) Positioning b) Relative Sekarang cobalah untuk menambahkan position:relative pada #box dan perhatikan bahwa box tersebut bergeser 100px dari atas dan 200px dari kiri. #box{ background : green; width : 300px; height : 300px; top : 100px; left : 200px; position:relative; } Kegiatan Belajar
3) Positioning b) Relative Output : Kegiatan Belajar
3) Positioning c) Absolute Penambahan position:absolute akan membuat elemen tersebut terlepas dari aturan penempatan elemen dan dibatasi oleh parent yang memiliki positioning relative. Sulit memahami apa yang saya tulis diatas, kita langsung ke contoh kasus. Buatlah markup HTML seperti berikut : <div id=‚box‛> <div id=‚box2‛></div> </div> Lalu berilah style seperti berikut : #box{ width:300px; height:300px; background:green; } #box2{ width:50px; height:50px; background:yellow; } Kegiatan Belajar
3) Positioning c) Absolute Output: Kegiatan Belajar
4) Implementasi Styling dan positionong pada markup DIV a) DIV ID dengan css Property “text-decoration” digunakan untuk menambah atau membuang ornamen tertentu pada teks. Sintaks-nya : #nama-ID {Property: value;} Kegiatan Belajar
4) Implementasi Styling dan positionong pada markup DIV a) DIV ID dengan css Contoh : Kegiatan Belajar
4) Implementasi Styling dan positionong pada markup DIV a) DIV ID dengan css Output: Kegiatan Belajar
4) Implementasi Styling dan positionong pada markup DIV b) CLASS ID dengan css Digunakan untuk menentukan sekelompok elemen yang berbeda Sintaksnya: Cara penulisan class id: .nama-class {property: value;} Untuk menempelkan class ke dalam tag html: Taghtml.nama-class {property ; value;} Kegiatan Belajar
4) Implementasi Styling dan positionong pada markup DIV b) CLASS ID dengan css Contoh: Kegiatan Belajar
4) Implementasi Styling dan positionong pada markup DIV b) CLASS ID dengan css Output: Kegiatan Belajar
Tuliskan source code dari tampilan berikut: b. Latihan Tuliskan source code dari tampilan berikut: Kegiatan Belajar
c. Rangkuman • DIV ID merupakan elemen dalam html yang spesifik • Sedangkan dalam class ID penamaan elemen bisa sama dan berulang • Secara default, seluruh elemen/tag HTML memiliki positioning static. Artinya anda belum bisa/tidak dapat menentukan posisi elemen tersebut. Untuk mengubah posisi tersebut maka gunakan posisi relatif • Penambahan position:absolute akan membuat elemen tersebut terlepas dari aturan penempatan elemen dan dibatasi oleh parent Kegiatan Belajar
c. Rangkuman • Dalam penulisan css pun berbeda antara div ID dan div Class Cara penulisan class id: .nama-class {property: value;} Cara penulisan class selector: #nama-ID {Property: value;} Kegiatan Belajar
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
e. Umpan Balik dan Tindak Lanjut Mahasiswa mendengar, mencatat , dan mengerjakan latihan tentang div baik itu dengan html dan css. Kegiatan Belajar
6. Kunci Jawaban tes formatif File html-nya:
6. Kunci Jawaban tes formatif File css-nya:
7. Referensi [1] Agung, Gregorius. , HTML5 + CSS 3, PT 7. Referensi [1] Agung, Gregorius., HTML5 + CSS 3, PT. Elex Media Komputindo, 2012. [2] Lee, Christopher, Mos Wonted CSS Tips and Triks, ANDI Yogyakarta, 2012 [3] Hidayatullah,Priyanto, Pemrograman Web. INFORMATIKA Bandung,2014 Referensi