Desain Web

Materi Pokok

Modul 6
Materi Pokok

Pengantar
Pengantar

Capaian
Capaian
Pembelajaran
Pembelajaran

Kemampuan
Kemampuan
Akhir
Akhir
Kegiatan
Kegiatan
Belajar
Belajar
Kunci
Kunci
Jawaban
Jawaban

Referensi STMIK IKMI CIREBON

Referensi
Oleh
Dita rizki amalia
 Desain Web
Materi Pokok
Materi Pokok
1. Materi Pokok
Pengantar
Pengantar a. Pengenalan DIV ID dan DIV Class
Capaian b. Pengenalan float positioning
Capaian
Pembelajaran
Pembelajaran c. Position Relative dan Position Absolut
Kemampuan d. Implementasi Styling dan positionong pada markup
Kemampuan
Akhir
Akhir DIV
Kegiatan
Kegiatan
e. Studi Kasus
Belajar
Belajar
Kunci
Kunci
Jawaban
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok
Materi Pokok 2. Pengantar
Pengantar Kelebihan CSS dalam layout web dibandingkan tabel
Pengantar
adalah fleksibilitas dan juga lebih meminimalisasi jumlah byte
Capaian
Capaian
file. Apabila Anda menggunakan tabel untuk mendesain
Pembelajaran
Pembelajaran layout, maka semakin banyak sel yang dibuat, akan semakin
Kemampuan besar ukuran byte file dan akibatnya loading web pun
Kemampuan
Akhir membutuhkan waktu yang lebih lama.
Akhir
Kegiatan
Kegiatan
Belajar
Belajar
Kunci
Kunci
Jawaban
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok
Materi Pokok
3. Capaian Pembelajaran Mata Kuliah
Pengantar Kemampuan
Pengantar mengkonstruksi Layout
Capaian menggunakan markup DIV HTML
Capaian
Pembelajaran
Pembelajaran Kemampuan memilih dan mengimplementasikan
Kemampuan tipe pisitioning yang tepat pada permasalahan –
Kemampuan
Akhir
Akhir permasalahan tertentu seperti float positionong,
Kegiatan
Kegiatan
position relative dan position absolut
Belajar
Belajar menggunakan CSS
Kunci
Kunci
Jawaban .
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok
Materi Pokok
4. Kemampuan Akhir
Pengantar Mahasiswa
Pengantar mampu mengkonstruksi Layout
Capaian menggunakan markup DIV HTML
Capaian
Pembelajaran
Pembelajaran Mahasiswa mampu memilih dan
Kemampuan mengimplementasikan tipe pisitioning yang tepat
Kemampuan
Akhir
Akhir pada permasalahan – permasalahan tertentu
Kegiatan
Kegiatan
seperti float positionong, position relative dan
Belajar
Belajar position absolut menggunakan CSS
Kunci
Kunci
Jawaban
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok
Materi Pokok
5. Kegiatan Belajar
a. Uraian dan Contoh
Pengantar
Pengantar 1) DIV ID dan DIV Class
Capaian a) DIV ID
Capaian
Pembelajaran
Pembelajaran Atribut ID digunakan untuk penamaan elemen HTML yang
Kemampuan
memiliki karakteristik unik/berbeda. Tidak boleh ada dua atau
Kemampuan
Akhir lebih elemen yang mempunyai ID yang sama.
Akhir
Kegiatan
Kegiatan
Belajar
Belajar
Kunci
Kunci
Jawaban
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok 1) DIV ID dan DIV Class
Materi Pokok
a) DIV ID
Pengantar
Pengantar Contoh :
Capaian
Capaian
Pembelajaran
Pembelajaran

Kemampuan
Kemampuan
Akhir
Akhir
Kegiatan
Kegiatan
Belajar
Belajar
Kunci
Kunci
Jawaban
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok 1) DIV ID dan DIV Class
Materi Pokok
a) DIV ID
Pengantar
Pengantar Output :
Capaian
Capaian
Pembelajaran
Pembelajaran

Kemampuan
Kemampuan
Akhir
Akhir
Kegiatan
Kegiatan
Belajar
Belajar
Kunci
Kunci
Jawaban
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok 1) DIV ID dan DIV Class
Materi Pokok
b) DIV Class
Pengantar
Pengantar Class digunakan untuk penamaan elemen yang memiliki
Capaian
karakteristik/struktur sama dan dapat digunakan berulang kali
Capaian
Pembelajaran dalam markup (Kode HTML).
Pembelajaran

Kemampuan
Kemampuan
Akhir
Akhir
Kegiatan
Kegiatan
Belajar
Belajar
Kunci
Kunci
Jawaban
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok 1) DIV ID dan DIV Class
Materi Pokok
b) DIV Class
Pengantar
Pengantar Contoh :
Capaian
Capaian
Pembelajaran
Pembelajaran

Kemampuan
Kemampuan
Akhir
Akhir
Kegiatan
Kegiatan
Belajar
Belajar
Kunci
Kunci
Jawaban
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok 1) DIV ID dan DIV Class
Materi Pokok
b) DIV Class
Pengantar
Pengantar Output :
Capaian
Capaian
Pembelajaran
Pembelajaran

Kemampuan
Kemampuan
Akhir
Akhir
Kegiatan
Kegiatan
Belajar
Belajar
Kunci
Kunci
Jawaban
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok 2) Float Positioning
Materi Pokok
Meratakirikan elemen gambar dan membuat paragraf naik
Pengantar keatas.
Pengantar

Capaian
Contoh :
Capaian
Pembelajaran
Pembelajaran

Kemampuan
Kemampuan
Akhir
Akhir
Kegiatan
Kegiatan
Belajar
Belajar
Kunci
Kunci
Jawaban
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok 2) Float Positioning
Materi Pokok
Meratakirikan elemen gambar dan membuat paragraf naik
Pengantar keatas.
Pengantar

Capaian
Output:
Capaian
Pembelajaran
Pembelajaran

Kemampuan
Kemampuan
Akhir
Akhir
Kegiatan
Kegiatan
Belajar
Belajar
Kunci
Kunci
Jawaban
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok 3) Positioning
Materi Pokok
a) Static
Pengantar
Pengantar Secara default, seluruh elemen/tag HTML memiliki positioning
Capaian
static. Artinya anda belum bisa/tidak dapat menentukan posisi
Capaian
Pembelajaran elemen tersebut. Ketika anda ingin merubah posisi dari elemen
Pembelajaran
tersebut maka anda harus memberikan position:relative dan
Kemampuan
Kemampuan
selanjutnya anda dapat menggunakan property top, right,
Akhir
Akhir bottom, dan left untuk menentukan posisi elemen yang
Kegiatan bersangkutan.
Kegiatan
Belajar
Belajar Sebagai contoh perhatikan kode HTML dan CSS berikut :
Kunci
Kunci
<div id=‚box‛></div>
Jawaban
Jawaban Berikut kode CSSnya.
Referensi #box{ width : 300px; height : 300px; }
Referensi
 Desain Web
Materi Pokok 3) Positioning
Materi Pokok
a) Static
Pengantar
Pengantar Ketika anda tidak memberikan nilai pada property position,
Capaian
maka secara default, #box memiliki position:static, jadi anda
Capaian
Pembelajaran tidak dapat menggunakan property top, right, bottom dan left
Pembelajaran
untuk menentukan posisi #box tersebut :
Kemampuan
Kemampuan
Akhir
#box{ background : green;
Akhir width : 300px;
Kegiatan
Kegiatan
Belajar height : 300px;
Belajar
top : 100px;
Kunci
Kunci
Jawaban left : 200px; }
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok 3) Positioning
Materi Pokok
a) Static
Pengantar
Pengantar Output
Capaian
Capaian
Pembelajaran
Pembelajaran

Kemampuan
Kemampuan
Akhir
Akhir
Kegiatan
Kegiatan
Belajar
Belajar
Kunci
Kunci
Jawaban
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok 3) Positioning
Materi Pokok
b) Relative
Pengantar
Pengantar Sekarang cobalah untuk menambahkan position:relative pada
Capaian
#box dan perhatikan bahwa box tersebut bergeser 100px dari
Capaian
Pembelajaran atas dan 200px dari kiri.
Pembelajaran
#box{ background : green;
Kemampuan
Kemampuan
Akhir width : 300px;
Akhir
height : 300px;
Kegiatan
Kegiatan
Belajar top : 100px;
Belajar
Kunci
left : 200px;
Kunci
Jawaban position:relative; }
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok 3) Positioning
Materi Pokok
b) Relative
Pengantar
Pengantar Output :
Capaian
Capaian
Pembelajaran
Pembelajaran

Kemampuan
Kemampuan
Akhir
Akhir
Kegiatan
Kegiatan
Belajar
Belajar
Kunci
Kunci
Jawaban
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok 3) Positioning
Materi Pokok
c) Absolute
Pengantar
Pengantar Penambahan position:absolute akan membuat elemen tersebut
Capaian
terlepas dari aturan penempatan elemen dan dibatasi oleh
Capaian
Pembelajaran parent yang memiliki positioning relative. Sulit memahami apa
Pembelajaran
yang saya tulis diatas, kita langsung ke contoh kasus.
Kemampuan
Kemampuan
Akhir
Buatlah markup HTML seperti berikut :
Akhir <div id=‚box‛> <div id=‚box2‛></div> </div>
Kegiatan
Kegiatan
Belajar Lalu berilah style seperti berikut :
Belajar
#box{
Kunci
Kunci
Jawaban width:300px; height:300px;
Jawaban
background:green; }
Referensi
Referensi
#box2{
width:50px; height:50px; background:yellow; }
 Desain Web
Materi Pokok 3) Positioning
Materi Pokok
c) Absolute
Pengantar
Pengantar Output:
Capaian
Capaian
Pembelajaran
Pembelajaran

Kemampuan
Kemampuan
Akhir
Akhir
Kegiatan
Kegiatan
Belajar
Belajar
Kunci
Kunci
Jawaban
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok 4) Implementasi Styling dan positionong pada markup DIV
Materi Pokok
a) DIV ID dengan css
Pengantar
Pengantar Property “text-decoration” digunakan untuk menambah atau
Capaian
membuang ornamen tertentu pada teks.
Capaian
Pembelajaran
Pembelajaran
Sintaks-nya :
#nama-ID {Property: value;}
Kemampuan
Kemampuan
Akhir
Akhir
Kegiatan
Kegiatan
Belajar
Belajar
Kunci
Kunci
Jawaban
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok 4) Implementasi Styling dan positionong pada markup DIV
Materi Pokok
a) DIV ID dengan css
Pengantar
Pengantar Contoh :
Capaian
Capaian
Pembelajaran
Pembelajaran

Kemampuan
Kemampuan
Akhir
Akhir
Kegiatan
Kegiatan
Belajar
Belajar
Kunci
Kunci
Jawaban
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok 4) Implementasi Styling dan positionong pada markup DIV
Materi Pokok
a) DIV ID dengan css
Pengantar
Pengantar Output:
Capaian
Capaian
Pembelajaran
Pembelajaran

Kemampuan
Kemampuan
Akhir
Akhir
Kegiatan
Kegiatan
Belajar
Belajar
Kunci
Kunci
Jawaban
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok 4) Implementasi Styling dan positionong pada markup DIV
Materi Pokok
b) CLASS ID dengan css
Pengantar
Pengantar Digunakan untuk menentukan sekelompok elemen yang
Capaian
berbeda
Capaian
Pembelajaran
Pembelajaran
Sintaksnya:
Cara penulisan class id:
Kemampuan
Kemampuan
Akhir .nama-class {property: value;}
Akhir
Kegiatan
Untuk menempelkan class ke dalam tag html:
Kegiatan
Belajar Taghtml.nama-class {property ; value;}
Belajar
Kunci
Kunci
Jawaban
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok 4) Implementasi Styling dan positionong pada markup DIV
Materi Pokok
b) CLASS ID dengan css
Pengantar
Pengantar Contoh:
Capaian
Capaian
Pembelajaran
Pembelajaran

Kemampuan
Kemampuan
Akhir
Akhir
Kegiatan
Kegiatan
Belajar
Belajar
Kunci
Kunci
Jawaban
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok 4) Implementasi Styling dan positionong pada markup DIV
Materi Pokok
b) CLASS ID dengan css
Pengantar
Pengantar Output:
Capaian
Capaian
Pembelajaran
Pembelajaran

Kemampuan
Kemampuan
Akhir
Akhir
Kegiatan
Kegiatan
Belajar
Belajar
Kunci
Kunci
Jawaban
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok
Materi Pokok
b. Latihan
Pengantar
Pengantar
Tuliskan source code dari tampilan berikut:
Capaian
Capaian
Pembelajaran
Pembelajaran

Kemampuan
Kemampuan
Akhir
Akhir
Kegiatan
Kegiatan
Belajar
Belajar
Kunci
Kunci
Jawaban
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok
Materi Pokok c. Rangkuman
Pengantar • DIV ID merupakan elemen dalam html yang spesifik
Pengantar
• Sedangkan dalam class ID penamaan elemen bisa sama dan
Capaian
Capaian
Pembelajaran
berulang
Pembelajaran
• Secara default, seluruh elemen/tag HTML memiliki
Kemampuan positioning static. Artinya anda belum bisa/tidak dapat
Kemampuan
Akhir
Akhir menentukan posisi elemen tersebut. Untuk mengubah posisi
Kegiatan tersebut maka gunakan posisi relatif
Kegiatan
Belajar
Belajar • Penambahan position:absolute akan membuat elemen
Kunci tersebut terlepas dari aturan penempatan elemen dan dibatasi
Kunci
Jawaban
Jawaban
oleh parent

Referensi
Referensi
 Desain Web
Materi Pokok
Materi Pokok c. Rangkuman
Pengantar • Dalam penulisan css pun berbeda antara div ID dan div Class
Pengantar
Cara penulisan class id:
Capaian
Capaian
Pembelajaran .nama-class {property: value;}
Pembelajaran
Cara penulisan class selector:
Kemampuan
Kemampuan
Akhir
#nama-ID {Property: value;}
Akhir
Kegiatan
Kegiatan
Belajar
Belajar
Kunci
Kunci
Jawaban
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok d. Tes formatif
Materi Pokok
 Dengan menggunakan css buatlah script untuk tampilan
Pengantar html berikut ini:
Pengantar

Capaian
Capaian
Pembelajaran
Pembelajaran

Kemampuan
Kemampuan
Akhir
Akhir
Kegiatan
Kegiatan
Belajar
Belajar
Kunci
Kunci
Jawaban
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok
Materi Pokok
e. Umpan Balik dan Tindak Lanjut
Pengantar
Pengantar
Mahasiswa mendengar, mencatat , dan
Capaian mengerjakan latihan tentang div baik itu dengan
Capaian
Pembelajaran
Pembelajaran html dan css.
Kemampuan
Kemampuan
Akhir
Akhir
Kegiatan
Kegiatan
Belajar
Belajar
Kunci
Kunci
Jawaban
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok
Materi Pokok 6. Kunci Jawaban tes formatif
Pengantar File html-nya:
Pengantar

Capaian
Capaian
Pembelajaran
Pembelajaran

Kemampuan
Kemampuan
Akhir
Akhir
Kegiatan
Kegiatan
Belajar
Belajar
Kunci
Kunci
Jawaban
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok
Materi Pokok 6. Kunci Jawaban tes formatif
Pengantar File css-nya:
Pengantar

Capaian
Capaian
Pembelajaran
Pembelajaran

Kemampuan
Kemampuan
Akhir
Akhir
Kegiatan
Kegiatan
Belajar
Belajar
Kunci
Kunci
Jawaban
Jawaban

Referensi
Referensi
 Desain Web
Materi Pokok
Materi Pokok
7. Referensi
Pengantar
Pengantar [1] Agung, Gregorius., HTML5 + CSS 3, PT. Elex
Capaian Media Komputindo, 2012.
Capaian
Pembelajaran
Pembelajaran [2] Lee, Christopher, Mos Wonted CSS Tips and
Kemampuan Triks, ANDI Yogyakarta, 2012
Kemampuan
Akhir
Akhir [3] Hidayatullah,Priyanto, Pemrograman Web.
Kegiatan
Kegiatan
Belajar
INFORMATIKA Bandung,2014
Belajar
Kunci
Kunci
Jawaban
Jawaban

Referensi
Referensi