Modul 6 STMIK IKMI CIREBON Oleh Dita rizki amalia.

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

1 Modul 6 STMIK IKMI CIREBON Oleh Dita rizki amalia

2 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

3 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

4 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

5 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

6 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

7 1) DIV ID dan DIV Class a) DIV ID Contoh :
Kegiatan Belajar

8 1) DIV ID dan DIV Class a) DIV ID Output :
Kegiatan Belajar

9 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

10 1) DIV ID dan DIV Class b) DIV Class Contoh :
Kegiatan Belajar

11 1) DIV ID dan DIV Class b) DIV Class Output :
Kegiatan Belajar

12 2) Float Positioning Meratakirikan elemen gambar dan membuat paragraf naik keatas. Contoh :
Kegiatan Belajar

13 2) Float Positioning Meratakirikan elemen gambar dan membuat paragraf naik keatas. Output:
Kegiatan Belajar

14 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

15 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

16 3) Positioning a) Static Output
Kegiatan Belajar

17 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

18 3) Positioning b) Relative Output :
Kegiatan Belajar

19 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

20 3) Positioning c) Absolute Output:
Kegiatan Belajar

21 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

22 4) Implementasi Styling dan positionong pada markup DIV a) DIV ID dengan css Contoh :
Kegiatan Belajar

23 4) Implementasi Styling dan positionong pada markup DIV a) DIV ID dengan css Output:
Kegiatan Belajar

24 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

25 4) Implementasi Styling dan positionong pada markup DIV b) CLASS ID dengan css Contoh:
Kegiatan Belajar

26 4) Implementasi Styling dan positionong pada markup DIV b) CLASS ID dengan css Output:
Kegiatan Belajar

27 Tuliskan source code dari tampilan berikut:
b. Latihan Tuliskan source code dari tampilan berikut: Kegiatan Belajar

28 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

29 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

30 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

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

32 6. Kunci Jawaban tes formatif File html-nya:

33 6. Kunci Jawaban tes formatif File css-nya:

34 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