Scribd Logo
Unggah

Selamat datang di Scribd!

  • Modul Web Responsif PDF

    Diunggah oleh

    Dzikri Faozi
    14 tayangan15 halaman

    Judul Asli

    Modul Web Responsif.pdf

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    14 tayangan15 halaman

    Modul Web Responsif PDF

    Diunggah oleh

    Dzikri Faozi

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 15

    1|Halaman

    MEMBUAT TAMPILAN WEB RESPONSIF


    DENGAN MENGGUNAKAN HTML5 DAN CSS

    A. Tujuan
     Memahami penggunaan html5 pada tampilan web responsif
     Memahami penggunaan css pada tampilan web responsif

    B. Alokasi Waktu
    3 JP (3 x 45 menit)

    C. Dasar Teori
    Web responsif merupakan suatu teknik desain yang membuat website dapat tampil
    dengan baik di berbagai browser dengan ukuran layar (device) yang berbeda. Jadi tampilan
    pada desktop komputer dengan smartphone akan berbeda. Nama lain dari web responsif
    adalah web dinamis. Dengan teknik responsif ini maka tidak perlu sebuah web development
    membuat banyak tampilan untuk satu situs.

    Kelebihan dari web responsif adalah sederhana (simple) dan tak perlu membuat banyak
    website (misal untuk tampilan mobile dan PC) karena otomatis akan menyesuaikan dengan
    keadaan layar (device). Sedangkan kekurangannya adalah untuk gambar yang di load ketika
    membuka di smartphone akan sama dengan yang di load ketika membuka di pc, tetapi untuk
    masalah ini sepertinya sudah bukan lagi menjadi masalah karena perangkat smartphone masa
    kini tak kalah saing dengan PC (komputer).

    Gambar 1. Tampilan Web Responsif

    Published by: SMKN SUKOREJO 1


    2|Halaman

    Secara mendasar, Responsive Design dikembangkan melalui kode-kode CSS, seperti


    yang saya tampilkan dibawah ini :
    @media(min-width:992px) {
    .selector {
    width:970px;
    }
    }

    @media(max-width:768px) {
    .selector {
    width:750px;
    }
    }

    Kode yang berwarna biru adalah kode css untuk mendeskripsikan bahwa kode yang ada
    diantara kurung kurawal pertama & terakhirnya hanya digunakan untuk perangkat yang
    resolusinya 992 piksel atau lebih (untuk Komputer/Laptop). Sedangkan Kode yang berwarna
    hijau adalah kode css untuk mendeskripsikan bahwa kode yang ada diantara kurung kurawal
    pertama & terakhirnya hanya digunakan untuk perangkat yang resolusinya 768 piksel atau
    lebih kecil (untuk Tablet).

    Langkah 1. Mendefinisikan Meta Tag Desain Responsif

    Kebanyakan mobile browser mengatur skala halaman html selebar viewport, sehingga
    dapat tampil sesuai layar mobile dengan menggunakan tag meta viewport untuk me-reset ini.
    Tag viewport digunakan untuk memberitahu browser untuk menggunakan lebar perangkat
    sebagai lebar viewport dan menonaktifkan skala awal. Sertakan meta tag ini di bagian
    <head>.

    Menggunakan nilai meta viewport width=device-width menginstruksikan laman untuk


    mencocokkan lebar layar dalam pixel yang tidak tergantung perangkat. Hal ini
    memungkinkan laman untuk mengubah posisi/geometri materi agar sesuai dengan ukuran
    layar yang berbeda.

    Menambahkan atribut initial-scale=1.0 mengintruksikan browser untuk membangun


    hubungan 1:1 antara pixel CSS dan pixel yang tidak tergantung perangkat terlepas dari
    orientasi perangkat, dan memungkinkan laman untuk memanfaatkan lebar landscape penuh.

    Published by: SMKN SUKOREJO 2


    3|Halaman

    Langkah 2. Menentukan Struktur HTML

    Pada langkah ke-2 ini yaitu membuat struktur html dengan header, content, sidebar, dan
    footer. Untuk header berukuran tinggi 200 pixel, untuk content berukuran lebar 660 pixel dan
    untuk sidebar berukuran lebar 300 pixel sehingga lebar keseluruhan adalah 960 pixel.

    HEADER

    SIDEBAR

    CONTENT

    FOOTER

    Gambar 2. Tampilan Struktur HTML secara umum

    Langkah 3. Membuat Media Query

    CSS3 adalah trik untuk membuat desain web yang responsif. Dalam CSS3 untuk
    membuat trik ini sama halnya seperti di dalam pemrograman dengan membuat suatu kondisi
    (if), dimana CSS3 memberikan kondisi bagaimana browser harus merender halaman untuk
    viewport yang telah di set lebarnya.

    Published by: SMKN SUKOREJO 3


    4|Halaman

    Contoh trik CSS3 di bawah adalah untuk lebar viewport khusus berukuran 980 pixel atau
    di bawahnya. Pada dasarnya untuk trik ini kita membuat semua lebar container html seperti
    header, content dan yang lainnya ke dalam nilai persentase, sehingga halaman html flexible
    mengikuti layar browser.

    Untuk viewport berukuran 700 pixel atau kurang, tentukan ukuran content dan sidebar
    keukuran auto width dan disable float sehingga akan tampil sejajar ke bawah mengikuti lebar
    layar.

    Untuk viewport berukuran 480 pixel atau kurang seperti ukuran-ukuran perangkat
    handphone, sembunyikan sidebar dan set ukuran tinggi header menjadi auto.

    Contoh di atas hanyalah dasar dari desain web responsif yang bertujuan untuk
    memberikan tampilan yang berbeda untuk tiap ukuran viewport, anda bisa saja menambahkan
    query seperlunya sesuka anda pada desain responsif anda.

    Published by: SMKN SUKOREJO 4


    5|Halaman

    D. Latihan

    Latihan 1
    Coba ketikkan syntax di bawah ini dan simpan dengan nama index.html !

    Published by: SMKN SUKOREJO 5


    6|Halaman

    Published by: SMKN SUKOREJO 6


    7|Halaman

    Kemudian coba ketikkan syntax di bawah ini dan simpan dengan nama style.css !

    Published by: SMKN SUKOREJO 7


    8|Halaman

    Published by: SMKN SUKOREJO 8


    9|Halaman

    Published by: SMKN SUKOREJO 9


    10 | H a l a m a n

    Published by: SMKN SUKOREJO 10


    11 | H a l a m a n

    Setelah itu, bukalah file yang berformat .html menggunakan browser Mozilla FireFox.

    Published by: SMKN SUKOREJO 11


    12 | H a l a m a n

    Maka tampilannya seperti ini.

    Gambar 3. Tampilan Website seperti Desktop (ukuran Layar Komputer)

    Kemudian jika ingin membuat tampilan web tersebut menjadi ukuran smartphone, dapat
    menge-klik menu di pojok kanan atas.

    Published by: SMKN SUKOREJO 12


    13 | H a l a m a n

    Setelah itu, pilihlah Developer.

    Setelah itu, pilihlah Responsive Design View (Ctrl+Shift+M).

    Published by: SMKN SUKOREJO 13


    14 | H a l a m a n

    Maka akan muncul tampilan seperti di bawah ini:

    Untuk mengganti ukuran tampilannya dapat diganti pada ukuran di atasnya. Coba lihat
    Gambar di bawah ini.

    Published by: SMKN SUKOREJO 14


    15 | H a l a m a n

    E. Tugas Praktikum
    Buatlah syntax program web responsif (web dinamis) yang dapat ditampilkan diberbagai
    browser dengan bermacam ukuran (smartphone maupun komputer) dan menggunakan
    database CRUD yang bertemakan “Berita” dan harus terdapat struktur HTML, di bawah ini:
    a. Header
    b. Content
    c. Footer
    dimana terdapat 2 akses, yaitu: Admin dan Pengguna. Tugas Admin adalah dapat
    membuat, melihat, merubah, dan menghapus berita. Sedangkan Pengguna hanya bisa melihat
    berita saja.

    Published by: SMKN SUKOREJO 15

    Anda mungkin juga menyukai