Belajarngoding Com Membuat Responsive Website U24eAfmSxGQ PDF

pdfcrowd.com open in browser PRO version Are you a developer?
Try out the HTML to PDF API

Tentang Kami
Tweet 2
Membuat Responsive Website
Posted by Cahyo Wicaksono, December 6th, 2013 on CSS
Setelah menulis tentang berkenalan dengan responsive website sekarang mari kita masuk ke bagian yang lebih
serius yakni bagian implementasi pembuatan responsive website. Sebenarnya dalam pembuatan responsive
website ini konsepnya sangatlah sederhana. Anda bisa menggunakan salah satu CSS handling yaitu media-
query.
belajarngoding.com
Seputar programming, design dan cerita sukses.
16 Like
pdfcrowd.com open in browser PRO version Are you a developer? Try out the HTML to PDF API
Dengan menggunakan media query memungkinkan untuk kita memberikan aturan untuk lebar layar tertentu.
Untuk lebih jelasnya lihat pada gambar dibawah ini.
Pada gambar diatas ada terdapat 4 komponen utama yakni header, content, sidebar dan footer. Yang
membuatnya berbeda adalah jika disebelah kiri merupakan implementasi css pada browser dengan layar
desktop (lebih besar dari 1024 pixel) dan sebelah kanan merupakan implementasi css pada browser mobile
(lebar browser kurang dari atau sama dengan 1024 pixel).
Dengan menggunakan media query kita bisa mengatur jika browser lebih kurang atau sama dengan 1024 maka
buat sebuah aturan yang baru.
Proses Pembuatan Responsive Website
Buatlah sebuah satu buah halaman yang menampilan header, content, sidebar dan footer kemudian berikan
nama index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta name="viewport" content="width=device-width, initial-scale=1"
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Responsive Example By belajarngoding.com</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'
<meta name="viewport" content="width=device-width" />


<link rel="stylesheet" type="text/css" href="style.css" />

</head>
Kemudian buatlah sebuah file style.css yang mengimplementasikan standar web design style dan responsive
design
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
</head>
<body>

<div class="header">
<h1>Responsive Example</h1>
<p>by <a href="http://belajarngoding.com/?ref=responsive-example">belajarngoding.com</
</div>

<div class="container clearfix">
<div class="content">
<div class="item">
<p><strong>This is content area</strong></p>
<p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.</
</div>
</div>
<div class="sidebar">
<div class="item">
<p><strong>Sidebar</strong></p>
<p>This is sidebar area, you can fill it with widget or simple information like about me or other content.</
</div>
</div>
</div>

<div class="footer">
<p>Respect the author - <a href="http://belajarngoding.com/?ref=responsive-example
</div>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.header, .content, .sidebar, .footer{
background: #cccccc;
margin-bottom: 10px;
}
.header, .container, .footer{
width: 960px;
margin: 0 auto;
}
.header h1, .header p{
padding: 10px;
}

.container{
margin-bottom: 10px;
}
.content{
width: 640px;
float: left;
margin-right: 20px;
}
.content .item{
padding: 10px;
}
.sidebar{
width: 300px;
float: left;
}
.sidebar .item{
padding: 10px;
}

.footer p{
text-align: center;
Bagian yang kita sebut sebagai media query adalah bagian ini
Yang terjadi sebenarnya adalah jika anda membuka halaman dengan mobile browser maka halaman tersebut
akan mengimplementasi fluid style (style yang menggunakan persen % sebagai satuan width pada CSSnya).
Untuk melihat hasil dari kedua file diatas, saya telah menggabungkannya dengan basic style css agar terlihat
lebih menarik. Silahkan lihat pada halaman demo responsive website. Untuk mengeceknya silahkan buka
halaman demo menggunakan browser pada komputer anda dan pada smartphone anda.
Cahyo Wicaksono
Seorang mobile developer yang menyukai semua yang berhubungan dengan web design, web
development mobile photography and #legography
33
34
35
36
37
38
39
40
41
42
text-align: center;
padding: 10px;
}

/* handling responsive */
@media only screen and (min-width: 320px) and (max-width: 1024px){
.header, .container, .footer, .content, .sidebar{
width: 100%;
}
}
1 @media only screen and (min-width: 320px) and (max-width: 1024px)
1 Comment belajarngoding Login
Sort by Best Share
Join the discussion
Reply
Gundala Putra Petir 5 months ago
top markotop om cahyo. #lanjutkan!

Subscribe Add Disqus to your site
Favorite
Share
copyright 2013 belajarngoding.com
please respect the author

Belajarngoding Com Membuat Responsive Website U24eAfmSxGQ PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Belajarngoding Com Membuat Responsive Website U24eAfmSxGQ PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

pdfcrowd.com open in browser PRO version Are you a developer?

Try out the HTML to PDF API

Anda mungkin juga menyukai