tidak terasa sudah sampai tahap responsive, dan akhirnya tampilan website akan sudah jadi, dan lebih bahagia lagi website kita bisa responsive di berbagai view
device. Dan sebelum mulai kita mencoba dan menerapakan kode-kode css dan html ini izinkan diri ini terlebih dahulu untuk mengucapkan
Salam sobat semua
Alhamdulillahi robbil 'alamiin atas segala nikmat yang telah Allah berikan pada diri ini sehingga diri ini bisa menulis dan berbagi dengan kalian semua dalam
tulisan ini, Sholawat serta salamku akan tetap terpanjatkan untuk baginda sayyidina Muhammad ibni Abdillah S.A.W. beserta kepada keluarga dan para sahabatnya.
dan bagi kalian teman,sahabat, saudara serta pembaca tulisan ini semoga Allah selalu memberi kenikmatan yang tiada batas untuk kita semua. Aamiiin yaa Robbal
'alamiin.
Sebelum memulai mari kita baca bismillah terlebih dahulu sehingga tulisan dan usaha yang semua kita lakukan mendapat kemudahan dan pertolongan dari Allah, serta
membawa dan memberikan manfaat bagi kita semua.
Bismillahirrohmanirrohiim, untuk kali ini kita akan mencoba menyelesaikan tampilan web yang sudah kita coba buat dari kemaren-kemaren yang hanya tinggal di maniskan
atau di baguskan sedikit dan ditambahi dengan feature yang namanya responsive view di segala device dengan menggunakan properti media screen. oke langsung saja
kita coba buka file yang kemaren sudah kita buat kemaren, tapi seperti biasa duplikat dulu file yang kemaren sebagai backup sehingga data akan tetap utuh dan
aman. bagi yang baru mengikuti tulisan ini silahkan di ketik atau copy paste semua kode di tulisan ini dengan alur dari tulisan ini. dan sebelum kita mencoba properti
media screen untuk responsive view device ini mari kita coba sediikit permak untuk tampilan web yang kemaren, dan sekarang kita ketik atau copy paste code css
berikut ini dalam text editor kesayangan kalian
body{margin:0;padding:0;}#main{min-width:150px;width:100%;background:#f5f5f5 ;margin:0px;font-size:14px;font-family:arial;}.link{text-decoration:none;}.lis{list-style:square inside;}.terlihat{display:block;}#kepala{background-color:#00acf4;color:#fff;padding:7px;position:fixed;width:100%;}#isi{color:#000;padding:87px 7px 7px 7px;width:71%;margin-right:17px;float:left;min-width:425px;}#isi .judul{margin:11px 0px 0px 0px;padding:7px;background:#00b2f8;color:#fff;font-size:17px;font-weight:bold;}#isi .konten{margin:0;padding:7px;background:#e8e8e8;color:#000;}#sidekanan{background:#e8e8e8;float:left;width:23%;padding:83px 7px 7px 7px;min-width:345px;}.letakgambar{float:left;visibility:hidden;}.clear{clear:both;}
dalam kode diatas saya menambahkan kode css di file yang kemaren seperit berikut
#isi .judul{
margin:11px 0px 0px 0px;
padding:7px;
background:#00b2f8;
color:#fff;
font-size:17px;
font-weight:bold;
}
#isi .konten{
margin:0;
padding:7px;
background:#e8e8e8;
color:#000;
}
yang artinya kode diatas berfungsi biar nanti kalau di suatu waktu dan biar juga gampang mengingat selektor kita butuh nama selektor yang sama maka kita tulis
nama selektor tersebut berbarengan dengan selektor induk atau awal, jadi selektor yang namanya sama tidak akan berpengaruh atau tidak akan memberikan perubahan
atau efek pada html jika selektor tersebut tidak dalam selektor awal atau induknya. biar lebih paham dan jelas mari kita simak kode kode selanjutnya. dan untuk
penulisan biar kita bisa memberi nama selektor yang sama maka aturan penulisannya seperti berikut
selektor-awal(induk) selektor-anak(turunan){
properti:value;
}
atau
selektor-id selektor-class{
properti:value;
}
bisa juga
selektor-id selektor-id{
properti:value;
}
dan untuk kode HTML nya silahkan copy paste sebagai berikut
<html>
<head>
<title>My Web</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<div id="kepala">
<h1>Websiteku</h1>
</div>
<div id="isi">
<div class="judul">
Ini Konten saya
</div>
<div class="konten">
<p>Ini adala isi dari main content yang akan saya buat
sebagai website pertama saya
</p>
<p>dan ini adalah pembelajaran saya untuk melangkah dan membuat
website prtama saya
<div>Sekarang kita lagi mencoba properti display
<p class="terlihat">
<a href="http://notemazdopunk.blogspot.com/" target="_blank" class="link">Link Catatan Mazdopunk</a>
</p>
dan dalam ini kita butuh beberapa langkah.
</div>
</p>
</div>
<div class="judul">
Informasi tentang kotaku
</div>
<div class="konten">
<p>Macam-macam nama kota di jawa timur:
<ul class="lis">
<li>Probolinggo</li>
<li>Surabaya</li>
<li>Jember</li>
<li>Pasuruan</li>
<li>Malang</li>
</ul>
</p>
<p>
<h1>Probolinggo</h1>
<br>
Probolinggo adalah salah satu kabupaten di propinsi jawa timur. probolinggo ini tidak terlalu besar juga
untuk kabupatennya
<br>
Kota Probolinggo adalah sebuah kota di Provinsi Jawa Timur, Indonesia. Terletak sekitar 100 km sebelah tenggara Surabaya, Kota Probolinggo berbatasan dengan Selat Madura di sebelah utara, serta Kabupaten Probolinggo di sebelah timur, selatan, dan barat. Wikipedia
<ul class="lis">
<li>Luas: 56,67 km²</li>
<li>Peringkat luas wilayah: 75</li>
<li>Provinsi: Jawa Timur</li>
<li>Populasi: 223.159 (2014)</li>
<li>Hotel: Bintang 3 rata-rata seharga Rp 513.036. Lihat hotel</li>
<li>Cuaca: 31 °C, Angin arah Timur Laut dengan kecepatan 11 km/h, Kelembapan 72% weather.com</li>
<li>Waktu setempat: Sabtu 13.26</li>
</ul>
<div class="letakgambar">
<img src="gambar/back1.jpg">
</div>
<div class="clear"></div>
<p>
<ul class="lis">
<li>Luas: 56,67 km²</li>
<li>Peringkat luas wilayah: 75</li>
<li>Provinsi: Jawa Timur</li>
<li>Populasi: 223.159 (2014)</li>
<li>Hotel: Bintang 3 rata-rata seharga Rp 513.036. Lihat hotel</li>
<li>Cuaca: 31 °C, Angin arah Timur Laut dengan kecepatan 11 km/h, Kelembapan 72% weather.com</li>
<li>Waktu setempat: Sabtu 13.26</li>
</ul>
</p>
</p>
</div>
</div>
<div id="sidekanan">
<h3>Informasi tentangku</h3>
<p>
<table>
<tr>
<td valign="top">Alamat</td>
<td>Probolinggo Indonesia</td>
</tr>
<tr>
<td valign="top">Status</td>
<td>Menikah, dan ingin menikah lagi hehehe</td>
</tr>
</table>
</p>
</div>
<div class="clear"></div>
</div>
</body>
</html>
dan dari kode diatas tersebut akan dihasilkan output seperti berikut
dan sekarang kita permak untuk yang selektor sidekanan biar tampak manis atau bagus dengan kode css sebagai berikut
#sidekanan{float:left;width:23%;padding:83px 7px 7px 7px;min-width:345px;}#sidekanan .judul{margin:11px 0px 0px 0px;padding:7px;background:#00b2f8;color:#fff;font-size:17px;font-weight:bold;}#sidekanan .konten{margin:0;padding:7px;background:#dadada;color:#000;}
sehingga untuk kode css lengkapnya sebagai berikut
body{
margin:0;
padding:0;
}
#main{
min-width:150px;
width:100%;
background:#f5f5f5 ;
margin:0px;
font-size:14px;
font-family:arial;
}
.link{
text-decoration:none;
}
.lis{
list-style:square inside;
}
.terlihat{
display:block;
}
#kepala{
background-color:#00acf4;
color:#fff;
padding:7px;
position:fixed;
width:100%;
}
#isi{
color:#000;
padding:87px 7px 7px 7px;
width:71%;
margin-right:17px;
float:left;
min-width:425px;
}
#isi .judul{
margin:11px 0px 0px 0px;
padding:7px;
background:#00b2f8;
color:#fff;
font-size:17px;
font-weight:bold;
}
#isi .konten{
margin:0;
padding:7px;
background:#e8e8e8;
color:#000;
}
#sidekanan{
float:left;
width:23%;
padding:83px 7px 7px 7px;
min-width:345px;
}
#sidekanan .judul{
margin:11px 0px 0px 0px;
padding:7px;
background:#00b2f8;
color:#fff;
font-size:17px;
font-weight:bold;
}
#sidekanan .konten{
margin:0;
padding:7px;
background:#dadada;
color:#000;
}
.letakgambar{
float:left;
visibility:hidden;
}
.clear{
clear:both;
}
dan di selektor sidekanan pada file html kita rubah seperti ini
<div id="sidekanan">
<div class="judul">
<p>Informasi tentangku</p>
</div>
<div class="konten">
<p>
<table>
<tr>
<td valign="top">Alamat</td>
<td>Probolinggo Indonesia</td>
</tr>
<tr>
<td valign="top">Status</td>
<td>Menikah, dan ingin menikah lagi hehehe</td>
</tr>
</table>
</p>
</div>
</div>
dan untuk kode html lengkapnya seperti ini
<html>
<head>
<title>My Web</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="main">
<div id="kepala">
<h1>Websiteku</h1>
</div>
<div id="isi">
<div class="judul">
Ini Konten saya
</div>
<div class="konten">
<p>Ini adala isi dari main content yang akan saya buat
sebagai website pertama saya
</p>
<p>dan ini adalah pembelajaran saya untuk melangkah dan membuat
website prtama saya
<div>Sekarang kita lagi mencoba properti display
<p class="terlihat">
<a href="http://notemazdopunk.blogspot.com/" target="_blank" class="link">Link Catatan Mazdopunk</a>
</p>
dan dalam ini kita butuh beberapa langkah.
</div>
</p>
</div>
<div class="judul">
Informasi tentang kotaku
</div>
<div class="konten">
<p>Macam-macam nama kota di jawa timur:
<ul class="lis">
<li>Probolinggo</li>
<li>Surabaya</li>
<li>Jember</li>
<li>Pasuruan</li>
<li>Malang</li>
</ul>
</p>
<p>
<h1>Probolinggo</h1>
<br>
Probolinggo adalah salah satu kabupaten di propinsi jawa timur. probolinggo ini tidak terlalu besar juga
untuk kabupatennya
<br>
Kota Probolinggo adalah sebuah kota di Provinsi Jawa Timur, Indonesia. Terletak sekitar 100 km sebelah tenggara Surabaya, Kota Probolinggo berbatasan dengan Selat Madura di sebelah utara, serta Kabupaten Probolinggo di sebelah timur, selatan, dan barat. Wikipedia
<ul class="lis">
<li>Luas: 56,67 km²</li>
<li>Peringkat luas wilayah: 75</li>
<li>Provinsi: Jawa Timur</li>
<li>Populasi: 223.159 (2014)</li>
<li>Hotel: Bintang 3 rata-rata seharga Rp 513.036. Lihat hotel</li>
<li>Cuaca: 31 °C, Angin arah Timur Laut dengan kecepatan 11 km/h, Kelembapan 72% weather.com</li>
<li>Waktu setempat: Sabtu 13.26</li>
</ul>
<div class="letakgambar">
<img src="gambar/back1.jpg">
</div>
<div class="clear"></div>
<p>
<ul class="lis">
<li>Luas: 56,67 km²</li>
<li>Peringkat luas wilayah: 75</li>
<li>Provinsi: Jawa Timur</li>
<li>Populasi: 223.159 (2014)</li>
<li>Hotel: Bintang 3 rata-rata seharga Rp 513.036. Lihat hotel</li>
<li>Cuaca: 31 °C, Angin arah Timur Laut dengan kecepatan 11 km/h, Kelembapan 72% weather.com</li>
<li>Waktu setempat: Sabtu 13.26</li>
</ul>
</p>
</p>
</div>
</div>
<div id="sidekanan">
<div class="judul">
<p>Informasi tentangku</p>
</div>
<div class="konten">
<p>
<table>
<tr>
<td valign="top">Alamat</td>
<td>Probolinggo Indonesia</td>
</tr>
<tr>
<td valign="top">Status</td>
<td>Menikah, dan ingin menikah lagi hehehe</td>
</tr>
</table>
</p>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
nah di selektor class judul itu kan sama tapi masing-masing selektor tidak tercampur aduk dengan selektor yang sama lainnya. untuk hasil kode diatas akan menghasilkan
output seperti berikut
nah setelah di permak agak manis dan bagus, sekarang kita coba perkecil browser kita, dan kita lihat hasilnya seperti apa kode diatas tanpa properti media screen
dan tag meta viewport.
@media screen and (max-width:800px){selektor yang akan di responsive{properti:value;}}
dan sehingga akan menjadi seperti ini
@media screen and (max-width:800px){
#isi,#sidekanan{
width:95%;
}
}
dan untuk kode lengkapnya seperti ini
body{
margin:0;
padding:0;
}
#main{
min-width:150px;
width:100%;
background:#f5f5f5 ;
margin:0px;
font-size:14px;
font-family:arial;
}
.link{
text-decoration:none;
}
.lis{
list-style:square inside;
}
.terlihat{
display:block;
}
#kepala{
background-color:#00acf4;
color:#fff;
padding:7px;
position:fixed;
width:100%;
}
#isi{
color:#000;
padding:87px 7px 7px 7px;
width:71%;
margin-right:17px;
float:left;
min-width:425px;
}
#isi .judul{
margin:11px 0px 0px 0px;
padding:7px;
background:#00b2f8;
color:#fff;
font-size:17px;
font-weight:bold;
}
#isi .konten{
margin:0;
padding:7px;
background:#e8e8e8;
color:#000;
}
#sidekanan{
float:left;
width:23%;
padding:83px 7px 7px 7px;
min-width:345px;
}
#sidekanan .judul{
margin:11px 0px 0px 0px;
padding:7px;
background:#00b2f8;
color:#fff;
font-size:17px;
font-weight:bold;
}
#sidekanan .konten{
margin:0;
padding:7px;
background:#dadada;
color:#000;
}
.letakgambar{
float:left;
visibility:hidden;
}
.clear{
clear:both;
}
@media screen and (max-width:800px){
#isi,#sidekanan{
width:95%;
}
}
dan sekarang kita tambahkan tag meta view port diantara tag head pada kode html seperti berikut
<meta name="viewport" content="width=device-width, initial-scale=1.0">
sehingga untuk kode lengkapnya seperti berikut
<html>
<head>
<title>My Web</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="main">
<div id="kepala">
<h1>Websiteku</h1>
</div>
<div id="isi">
<div class="judul">
Ini Konten saya
</div>
<div class="konten">
<p>Ini adala isi dari main content yang akan saya buat
sebagai website pertama saya
</p>
<p>dan ini adalah pembelajaran saya untuk melangkah dan membuat
website prtama saya
<div>Sekarang kita lagi mencoba properti display
<p class="terlihat">
<a href="http://notemazdopunk.blogspot.com/" target="_blank" class="link">Link Catatan Mazdopunk</a>
</p>
dan dalam ini kita butuh beberapa langkah.
</div>
</p>
</div>
<div class="judul">
Informasi tentang kotaku
</div>
<div class="konten">
<p>Macam-macam nama kota di jawa timur:
<ul class="lis">
<li>Probolinggo</li>
<li>Surabaya</li>
<li>Jember</li>
<li>Pasuruan</li>
<li>Malang</li>
</ul>
</p>
</div>
</div>
<div id="sidekanan">
<div class="judul">
<p>Informasi tentangku</p>
</div>
<div class="konten">
<p>
<table>
<tr>
<td valign="top">Alamat</td>
<td>Probolinggo Indonesia</td>
</tr>
<tr>
<td valign="top">Status</td>
<td>Menikah, dan ingin menikah lagi hehehe</td>
</tr>
</table>
</p>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
dan dari kode diatas akan menghasilkan output sperti berikut
dan ternyata dari hasil diatas sangat tampak memnag lebih manis dan bagus menggunakan properti media screen dan tag meta viewport. dan sekarang website
kita sudah jadi templatenya tinggal merubah konten template websites yang sudah kita coba dari kemaren-kemaren.
dan saya rasa untuk tulisan kali ini tentang media scree dan tag meta viewport untuk responsive nya saya rasa cukup sampai disini dulu, dan kita akan lanjut di next
tulisan Insya Allah. dan mudah-mudahan tulisan ini bisa memberikan dan membawa manfaat buat kita semua, Aamiiin.
dan untuk file kode diatas bisa kalian download disini
Salam sobat semua
#css #free #share #html #responsive #layout #media-screen #viewport #web #website #websites #berbagi #gratis
Komentar
Posting Komentar