Ticker

6/recent/ticker-posts

Header Ads Widget

Tutorial #11 | Desain Web Responsif

Sendjie Januari 28, 2021

 

Web Responsif HTML dan CSS

Desain web yang responsif hanya menggunakan HTML dan CSS, akan  membuat halaman web Anda terlihat bagus di semua perangkat.

 

Halaman web dilihat menggunakan berbagai perangkat seperti; desktop, tablet, dan handphone. Isi halaman web harus dapat menyesuaikan kontennya agar dapat tampil bagus disemua perangkat. 

 


Desain web responsif menggunakan CSS dan HTML ditujukan untuk mengubah ukuran, menyembunyikan, mengecilkan, memperbesar, atau memindahkan konten agar terlihat bagus di layar mana pun.

 

Sebagai pendahuluan dalam memahami desain web yang responsif, contoh berikut hanya sebagai pengantar Anda dalam memahami desain web responsive. Kita akan belajar lebih dalam lagi pada tutorial selanjutnya, dalam memahami kode-kode yang diperlukan dalam desain web responsif.

 

Ketik kode berikut pada HTMLPad.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

* {
    box-sizing: border-box;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}


[class*="col-"] {
    float: left;
    padding: 15px;
}


html {
    font-family: "Lucida Sans", sans-serif;
}
 

.header {
    background-color: #1E90FF;
    color: #ffffff;
    padding: 15px;
}
 

.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
 

.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color: #FFFF00;
    color: #000000;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}


.menu li:hover {
    background-color: #0099cc;
}


.aside {
    background-color: #00BFFF;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
 

.footer {
    background-color: #696969;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}
 

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}
 

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

</style>
</head>
<body>

<div class="header">
    <h1>Tutorial Desain Web Responsif </h1>
</div>

<div class="row">
    <div class="col-3 col-s-3 menu">
        <ul>
            <li>Belajar HTML5</li>
            <li>Belajar CSS</li>
            <li>Belajar JavaScript</li>
            <li>Belajar Bootstrap</li>
        </ul>
    </div>
 

    <div class="col-6 col-s-9">
        <h1>Desain Web Responsive</h1>
        <p>Latihan pendahuluan desain web ini menggunakan HTML dan CSS. Tak perlu khawatir dengan kode yang ada, akan kita bahas pada tutorial selanjutnya tahap demi tahap .</p>
    </div>


    <div class="col-3 col-s-12">
        <div class="aside">
            <h2>What?</h2>
            <p>Desain web responsif dapat tampil disemua perangkat.</p>
            <h2>Where?</h2>
            <p>Gabungan dari HTML dan CSS.</p>
            <h2>How?</h2>
            <p>Ikuti saja situs ini, mudah-mudahan Anda bisa.</p>
        </div>
    </div>
</div>
 

<div class="footer">
    <p>Ubah ukuran jendela browser untuk melihat respon dari isi halaman terhadap perubahan jendela browser.</p>
</div>

</body>
</html> 

Web Responsif | CSS

CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang menentukan bagiamana suatu text akan ditampilkan pada halaman web. Perancangan desain text dapat dilakukan dengan mendefinisikan huruf beserta ukurannya, warna, latar belakang, dan lain-lain.  Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan.  Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet.  Saat menggunakan CSS, Anda tidak perlu menulis propertis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.

 

CSS adalah salah satu bahasa desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda (markup laguage). Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi sekarang CSS dapat diaplikasikan untuk segala dokumen XML, termasuk SVG dan XUL bahkan ANDROID.  CSS dibuat untuk memisahkan konten utama dengan tampilan dokumen yang meliputi layout, warna dan huruf. Pemisahan ini dapat meningkatkan daya akses konten pada web, menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi dari sebuah karakteristik dari sebuah tampilan, memungkinkan untuk membagi halaman untuk formatting dan mengurangi kerumitan dalam penulisan kode dan struktur dari konten, contohnya teknik tableless pada desain web.

 

Kode berikut menampilkan kerangka dasar CSS dalam membuat web yang responsif. Selain mudah dalam penggunaannya, CSS juga tidak berbayar alias gratis.

 Ketik kode berikut pada HTMLPad.

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://tutorialflashaplikasiandroid.blogspot.com/">
<body>

<div class="seno-container seno-green">
  <h1>Dasar-dasar Desain Web Responsif</h1>
  <p>Ubah ukuran viewport untuk melihat perubahannya</p>
</div>

<div class="seno-row-padding">
  <div class="w3-third">
    <h2>Indonesia</h2>
    <p>Indonesia terdiri dari beberapa pulau.</p>
    <p>Sebuah negara yang subur dan kaya akan sumberdaya alam, hingga banyak negara yang ingin berkunjung ke Indonesia.</p>

  </div>

  <div class="seno-third">
    <h2>Jakarta</h2>
    <p>Jakarta adalah ibukota Republik Indonesia.</p>
    <p>Populai penduduknya kira-kira 12 juta, pembangunan infrastuktur menjadikan hutan beton.</p>
  </div>

  <div class="seno-third">
    <h2>Bali</h2>
    <p>Bali adalah tempat tujuan wisata terbaik.</p>
    <p>Pulau Bali merupakan salah satu dari ribuan pulau di Indonesia, yang memiliki banyak tempat wisata bertaraf internasional.</p>
  </div>
</div>


</body>
</html>

Baca juga:  Tutorial CSS

Web Responsif | Bootstrap

Bootstrap adalah framework open-source khusus front end yang awalnya dibuat oleh Mark Otto dan Jacob Thornton untuk mempermudah dan mempercepat pengembangan web di front end.

 

Bootstrap memiliki semua jenis HTML dan template desain berbasis CSS untuk berbagai fungsi dan komponen, seperti navigasi, sistem grid, carousel gambar, dan tombol (button).

 

Framework ini memang dapat menghemat waktu para developer karena tidak perlu mengelola template berkali-kali. Namun, fungsi utama dari Bootstrap adalah untuk membuat situs yang responsif.

 

Interface website akan bekerja secara optimal di semua ukuran layar baik di layar smartphone maupun layar desktop/laptop. Trafik dan jangkauan audiens versi desktop tidak akan hilang dan tetap diarahkan ke website versi mobile.

 

Berikut ini adalah contoh dasar framework Bootstrap.

 

Ketik kode berikut pada HTMLPad.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial scale=1"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">
  <div class="jumbotron">
    <h1>Latihan Pertama dengan Bootstrap</h1>
  </div>
  <div class="row">
    <div class="col-sm-4">
     ...
    </div>

    <div class="col-sm-4">
      ...
    </div>
    <div class="col-sm-4">
    ...
    </div>
  </div>

</div>

</body>
</html>

 

Published: Seno Adjie.

 

 

Tags:
Sendjie

Posted by: Sendjie

Mulai menulis buku komputer grafis sejak th 2000. Sudah banyak buku yang diterbitkan diberbagai penerbit; Informatika, Elex Media Komputindo, Salemba Infotek, Dian Rakyat, Bintang Indonesia.

Posting Komentar

0 Komentar