Kenapa kok Responsive ? tentunya responsive itu sangat penting dalam suatu web dan artinya responsive menurut saya adalah ketika web dikecilkan dan web dibesarkan maka otomatis content atau layout web ikut mengecil dan membesar, oke langsung saja tidak usah panjang lebar simak artikel saya berikut ini.
Langkah-langkah :
1. Buat folder web terlebih dahulu
2. Copy Css saya dibawah ini
Code:
Code:
3. Jika sudah dicopy lalu save dengan nama cssku.css* ini bodynya */.bodyblog{background-color: red;max-width: 900px;width: 100%;margin: 0px auto;position: relative;}/* ini banner */.bannernya{background-color: grey;max-width: 900px;width: 100%;padding: 6px 0px;position: relative;}.h1banner{text-align: center;max-width: 900px;width: 100%;padding: 0px 0px;}/* ini buat dropdown */.menu {background-color: green;max-width: 900px;width: 100%;padding: 1px 0px;}/* ini buat slider nya */.slider {background-color: yellow;max-width: 900px;width: 100%;padding: 70px 0px;}/*ini tempat postnya*/.post1{background-color: blue;max-width: 900%;width: 75%;padding: 30px 0px;}.post2{background-color: grey;max-width: 900%;width: 75%;padding: 30px 0px;}.post3{background-color: green;max-width: 900%;width: 75%;padding: 30px 0px;}/*ini sidebar*/.sidebar{background-color: pink;max-width: 900%;width: 25px;padding: 151px 100px;float: right;}/* ini bagian footernya */.footer{background-color: orange;max-width: 900px;width: 100%;padding: 1px 0px;}
4. Setelah itu copy source code html saya
Code :
<!DOCTYPE html>5. Jika sudah save dengan nama index.html
<html>
<head>
<link rel="stylesheet" href="cssku.css" media="screen">
<meta charset="utf-8">
<title>Web Latihan Saya</title>
</head>
<body class="bodyblog"> <!-- ini bodyblog -->
<!-- ini bannernya -->
<div class="bannernya">
<h1 class="h1banner"> Informatics Engineering</h1>
<p class="h1banner"> Contoh Bannernya <p>
</div>
<!-- ini tempat menu -->
<div class="menu">
<h3 class="h1banner">Ini buat menu dropdown</h3>
</div>
<!-- ini tempat slider nya -->
<div class="slider">
<h1 class="h1banner"> Ini Tempat Slider nya Nanti </h1>
</div>
<!-- ini sidebar -->
<div class="sidebar">
<h1 class="h1banner">Ini Sidebar</h1>
</div>
<!-- ini postnya -->
<div class="post1">
<h1 class="h1banner">Ini Post 1</h1>
</div>
<div class="post2">
<h1 class="h1banner">Ini Post 2</h1>
</div>
<div class="post3">
<h1 class="h1banner">Ini Post 3</h1>
</div>
<!-- ini footer -->
<div class="footer">
<h3 class="h1banner"> Ini Footernya</h3>
</div>
</body>
</html>
6. Jika sudah disave lalu coba jalankan di browser anda dengan cara open terus pilih index.html nya tadi nanti tampilan layout nya akan seperti ini
Mungkin itu saja tutorial tentang cara membuat layout sederhana yang responsive dengan html dan css jika ada salah dalam tutorial saya mohon di maklumi karena disini saya juga sama sama belajar terima kasih.
No comments:
Post a Comment