Membuat Layout Website dasar Responsive menggunakan HTML dan CSS internal - Kerangka susunan website atau yang sering disebut dengan layout merupakan unsur dasar dari sebuah website sebelum dikembangkan lebih lanjut. Bagi kalian yang ingin belajar atau sekedar ingin tahu, semoga teman-teman sekalian bisa membuat tampilan tampilan website dasar yang mudah, Karena saya akan memberikan Source Code Layout Website Sederhana.
Tampilan sebuah website ibarat karya seni, semakin bagus tampilan menunjukan tingkat profesional seorang desainer website, begitu pula sebaliknya. Untuk itu disini saya akan memberikan sebuah Source Code lengkap, kalian tinggal copy-paste dan langsung bisa dilihat hasilnya di browser kalian masing-masing.
Layout yang akan kita buat sudah termasuk website dasar Responsive, jadi kalian tidak perlu repot-repot menambahkan CSS atau Bootstrap agar Layout Website dasar ini menjadi responsive. Saya rasa tampilan yang saya buat mudah dipahami bagi teman-teman sekalian yang baru belajar menggunakan HTML+CSS. Dalam source code dibawah, Kode CSS sudah saya beri keterangan kegunaanya pada setiap class supaya kalian tidak bingung kalau ada class yang belum pernah kalian buat.
Tampilan sebuah website ibarat karya seni, semakin bagus tampilan menunjukan tingkat profesional seorang desainer website, begitu pula sebaliknya. Untuk itu disini saya akan memberikan sebuah Source Code lengkap, kalian tinggal copy-paste dan langsung bisa dilihat hasilnya di browser kalian masing-masing.
Layout yang akan kita buat sudah termasuk website dasar Responsive, jadi kalian tidak perlu repot-repot menambahkan CSS atau Bootstrap agar Layout Website dasar ini menjadi responsive. Saya rasa tampilan yang saya buat mudah dipahami bagi teman-teman sekalian yang baru belajar menggunakan HTML+CSS. Dalam source code dibawah, Kode CSS sudah saya beri keterangan kegunaanya pada setiap class supaya kalian tidak bingung kalau ada class yang belum pernah kalian buat.
Membuat Tampilan Website Sederhana tapi Responsive
Sebelum mulai kalian juga bisa melihat postingan sebelum-sebelumnya tentang HTML dan CSS hanya di motubablog. Oke sekarang kita mulai membuatnya.
#CSS yang saya gunakan adalah CSS Internal, berarti CSS berada dalam file html langsung dengan menggunakan
#CSS yang saya gunakan adalah CSS Internal, berarti CSS berada dalam file html langsung dengan menggunakan
1. Buat file dan beri nama index.html
2. Copy-paste kode dibawah ke file index.html
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
font-family: 'Segoe UI';
margin-left: 10%;
margin-right: 10%;
background: #e4e4e4;
}
/* Header (JUDUL BLOG)*/
.header {
padding: 10px;
background: rgb(41, 120, 184);
}
.header h1 {
font-size: 50px;
font-family: 'Segoe UI';
text-shadow: 3px 3px rgba(240, 240, 240, 0.781);
}
/* Style untuk bentuk menu Navigasi */
.topnav {
overflow: hidden;
background-color: rgb(43, 43, 43);
}
/* Style untuk teks menu navigasi */
.topnav a {
float: left;
display: block;
color: #ffffff;
text-align: center;
padding: 14px 16px;
font-weight: bold;
text-decoration: none;
}
/* warna berubah ketika kursor menyentuh navigasi */
.topnav a:hover {
background-color: rgb(235, 53, 53);
}
/* kolom kiri */
.leftcolumn {
float: left;
width: 75%;
}
/* kolom kanan */
.rightcolumn {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
}
/* untuk gambar */
.imgtest {
background-color: rgb(43, 43, 43);
text-align: center;
width: 100%;
padding: 20px;
color: #e4e4e4;
font-family: 'Segoe UI';
}
.imgtest:hover{
background-color: rgb(235, 53, 53);
}
/* menambahkan efek card pada artikel */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* Hapus floats setelah kolom */
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: rgb(41, 120, 184);
margin-top: 20px;
}
/* Tampilan Responsive - saat lebar layar kurang dari 800px, maka konten akan bertumpuk atas bawah, dan menu navigasi tetap */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
body {
margin-left: 0%;
margin-right: 0%;
}
.header {
text-align: center;
}
}
/* Tampilan Responsive - saat lebar layar kurang dari 400px, maka menu navigasi akan bertumpuk-tumpuk, begitu pula pada menu content*/
@media screen and (max-width: 500px) {
.topnav a {
float: none;
width: 100%;
}
body {
margin-left: 0%;
margin-right: 0%;
}
.header {
text-align: center;
}
}
</style>
</head>
<body>
<div class="header">
<h1>Motubablog</h1>
<p><font color="white">Blog seputar teknologi dan programing</font></p>
</div>
<div class="topnav">
<a href="#">Berita</a>
<a href="#">Tips</a>
<a href="#">Windows</a>
<a href="#">Android</a>
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">C</a>
<a href="#">Tips Blogger</a>
<a href="#" style="float:right">Search</a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>JUDUL POSTINGAN</h2>
<h5>Deskripsi, 20 JUNI 2019</h5>
<div class="imgtest" style="height:200px;">gambar</div>
<p>Text...</p>
<p>Paijo, M.Kom menyelesaikan pendidikan dasar dan menengahnya di kota Bikini Bottom, Atlantis. Selanjutnya Penulis pendidikan S1 dan S2 di Universitas Klarinet Internasional dalam bidang Ilmu Komputer. Penulis juga ahli dalam bidang Desain Website.</p>
</div>
<div class="card">
<h2>JUDUL POSTINGAN</h2>
<h5>Deskripsi, 20 JUNI 2019</h5>
<div class="imgtest" style="height:200px;">gambar</div>
<p>Text...</p>
<p>Paijo, M.Kom menyelesaikan pendidikan dasar dan menengahnya di kota Bikini Bottom, Atlantis. Selanjutnya Penulis pendidikan S1 dan S2 di Universitas Klarinet Internasional dalam bidang Ilmu Komputer. Penulis juga ahli dalam bidang Desain Website.</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>Tentang Saya</h2>
<div class="imgtest" style="height:100px;">gambar</div>
<p>Beberapa teks tentang biodata diri</p>
</div>
<div class="card">
<h3>Postingan Populer</h3>
<div class="imgtest"><p>gambar</p></div>
<div class="imgtest"><p>gambar</p></div>
<div class="imgtest"><p>gambar</p></div>
</div>
<div class="card">
<h3>Ikuti</h3>
<p>Beberapa teks</p>
<div class="imgtest"></div>
<div class="imgtest"><p>gambar</p></div>
</div>
</div>
</div>
<div class="footer">
<p>@Copyright 2019 Motubablog<p>
</div>
</body>
</html>
3. Save.
Hasilnya
Bagaimana mudah sekali kan? kalian dapat mengeditnya sesuai dengan keinginan kalian masing-masing. Untuk mengecek apakah Website sederhana ini Responsive atau tidak cukup kalian perkecil jendela browser jika tampilan mengikuti dan masih terlihat bagus itu artinya Responsive.
bSekian artikel ini semoga menambah ilmu sekaligus bermanfaat bagi kalian tetang bagaimana membuat layout Website Sederhana namun Responsive. Terimakasih.