Belajar Membuat Website Responsive Dengan HTML dan CSS

Mempelajari dalam membuat website tidak hanya tampilan, namun kita perlu memperhatikan bagaimana website yang baik ketika tampilan website diakses melalui tablet atau handphone? nah, buat kamu yang masih belajar dalam membuat website. Sebaiknya mempelajari Membuat Website Responsive, hal ini sangat penting agar tampilan website tidak berantakan ketika diakses disemua device.

Table of Contents

Website Responsive

Website Responsive adalah dimana tata letak tampilan akan disesuaikan oleh browser berdasarkan device, contohnya, ketika kamu mengakses website di handphone maka tampilan website nya akan menyesuaikan pada layar handphone tersebut. lalu apa saja yang harus dilakukan untuk belajar membuat website responsive dengan html dan css?

Buatlah terlebih dahulu file index.html
Buatlah file CSS. Untuk menyimpan syntax CSS. Disini saya membuat dengan nama file style.css

Berikut adalah syntax HTML dan CSS nya, Silahkan Kamu bisa mengketikan nya secara langsung atau di copas. dan saya akan menjelaskan arti dari syntax nya setelah selesai.

Index.html

<!DOCTYPE html>
  <head>
    <title> Simple HTML Web Responsive</title>
    <meta name="robots" content="index, follow">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <img src="https://alafgani.web.id/wp-content/uploads/2023/07/Screenshot_45.png" alt="HTML logo" width="100%">
    <h1>Website Responsive Desain alafgani.web.id</h1>
    <h2>Get your web things started</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    <h2 class="myborder">responsive web design</h2>
    </br></br></br></br>
</body>
</html>

Style.CSS

body {
background: white;
margin: 0 15%;
font-family: sans-serif;
}
h1 {
text-align: center;
text-transform: none;
border-bottom: 3px solid #405459;
margin-top: 30px;
}
h2 {
color: #20331a;
font-size: 1.3em;
}
img {
display: block;
max-width: 100%;
margin: 0 auto;
.myborder {
text-align: center;
border
}

Oke sudah selesai, silahkan simpan lalu buka file index.html jalankan pada browser. belajar membuat website responsive dengan html dan css.

Hasilnya seperti ini website responsive dengan html dan css kita sudah jadi.

Jika diakses di ukuran layar handphone maka hasilnya akan seperti ini:

Penjelasan

Sebenarnya dengan hanya memperhatikan dan mengketikan syntax diatas kamu sudah memahaminya secara detail tentang contoh membuat website responsive. Karena kita sudah mengulas dan mempelajari tutorial html dan css dasar sebelumnya dari alafgani.web.id.

Untuk memperdalam materi belajar html dan css, kamu bisa mendownload Ebook HTML Gratis yang sudah kami sajikan untuk Kamu.