Cara - Membuat Situs Web
Pelajari cara membuat situs web responsif yang akan berfungsi di semua perangkat, PC, laptop, tablet, dan ponsel.
Buat Situs Web dari Awal
Sebuah "Draf Tata Letak"
Adalah bijaksana untuk menggambar draf tata letak desain halaman sebelum membuat situs web:
Bilah navigasi
Konten Samping
Beberapa teks beberapa teks..
Isi utama
Beberapa teks beberapa teks..
Beberapa teks beberapa teks..
Beberapa teks beberapa teks..
catatan kaki
Langkah Pertama - Halaman HTML Dasar
HTML adalah bahasa markup standar untuk membuat situs web dan CSS adalah bahasa yang menggambarkan gaya dokumen HTML. Kami akan menggabungkan HTML dan CSS untuk membuat halaman web dasar.
Catatan: Jika Anda tidak tahu HTML dan CSS, kami sarankan Anda mulai dengan membaca Tutorial HTML kami .
Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta
charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>My Website</h1>
<p>A website created by me.</p>
</body>
</html>
Contoh Dijelaskan
- Deklarasi
<!DOCTYPE html>mendefinisikan dokumen ini menjadi HTML5 - Elemen
<html>adalah elemen root dari halaman HTML - Elemen tersebut
<head>berisi informasi meta tentang dokumen - Elemen
<title>menentukan judul untuk dokumen - Elemen
<meta>harus mendefinisikan set karakter menjadi UTF-8 - Elemen
<meta>dengan nama="viewport" membuat situs web terlihat bagus di semua perangkat dan resolusi layar - Elemen
<style>berisi gaya untuk situs web (tata letak/desain) - Elemen
<body>berisi konten halaman yang terlihat - Elemen
<h1>mendefinisikan heading besar - Elemen
<p>mendefinisikan paragraf
Membuat Konten Halaman
Di dalam <body>elemen situs web kami, kami akan menggunakan "Draf Tata Letak" dan membuat:
- Sebuah tajuk
- Bilah navigasi
- Isi utama
- Konten sampingan
- Catatan kaki
tajuk
Header biasanya terletak di bagian atas situs web (atau tepat di bawah menu navigasi atas). Biasanya berisi logo atau nama situs web:
<div class="header">
<h1>My Website</h1>
<p>A website
created by me.</p>
</div>
Kemudian kita menggunakan CSS untuk menata header:
.header {
padding: 80px; /* some padding */
text-align: center; /* center the text */
background: #1abc9c;
/* green background */
color: white; /* white text color */
}
/* Increase the font size of the <h1> element */
.header h1 {
font-size: 40px;
}
Bilah Navigasi
Bilah navigasi berisi daftar tautan untuk membantu pengunjung menavigasi situs web Anda:
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
Gunakan CSS untuk menata bilah navigasi:
/* Style the top navigation bar */
.navbar {
overflow: hidden; /* Hide overflow */
background-color: #333;
/* Dark background color */
}
/* Style the navigation bar links */
.navbar
a {
float: left; /* Make sure that the links stay
side-by-side */
display: block; /* Change the display to
block, for responsive reasons (see below) */
color: white; /* White text color */
text-align: center;
/* Center the text */
padding: 14px 20px; /* Add some padding */
text-decoration: none;
/* Remove underline */
}
/*
Right-aligned link */
.navbar a.right {
float: right;
/* Float a link to the right */
}
/*
Change color on hover/mouse-over */
.navbar a:hover {
background-color: #ddd; /* Grey background color */
color: black;
/* Black text color */
}
Isi
Buat tata letak 2 kolom, dibagi menjadi "isi sampingan" dan "konten utama".
<div class="row">
<div class="side">...</div>
<div
class="main">...</div>
</div>
Kami menggunakan CSS Flexbox untuk menangani tata letak:
/* Ensure proper sizing */
* {
box-sizing: border-box;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create
two unequal columns that sits next to each other */
/* Sidebar/left column
*/
.side {
flex: 30%; /* Set the width of the sidebar
*/
background-color: #f1f1f1; /* Grey background color
*/
padding: 20px; /* Some padding */
}
/* Main column */
.main {
flex: 70%; /* Set the width of the main content */
background-color: white; /* White background color */
padding: 20px; /* Some padding */
}
Kemudian tambahkan kueri media untuk membuat tata letak responsif. Ini akan memastikan bahwa situs web Anda terlihat bagus di semua perangkat (desktop, laptop, tablet, dan ponsel). Ubah ukuran jendela browser untuk melihat hasilnya.
/* Responsive layout - when the screen is less than 700px wide, make the two
columns stack on top of each other instead of next to each other */
@media
screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/*
Responsive layout - when the screen is less than 400px wide, make the
navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
Tip: Untuk membuat jenis tata letak yang berbeda, cukup ubah lebar fleksibel (tetapi pastikan bahwa itu menambahkan hingga 100%).
Tip: Apakah Anda bertanya-tanya bagaimana aturan @media bekerja? Baca lebih lanjut tentangnya di bab Kueri Media CSS kami .
Tip: Untuk mempelajari lebih lanjut tentang Modul Tata Letak Kotak Fleksibel, baca bab Flexbox CSS kami .
Apa itu ukuran kotak?
Anda dapat dengan mudah membuat tiga kotak mengambang berdampingan. Namun, ketika Anda menambahkan sesuatu yang memperbesar lebar setiap kotak (misalnya padding atau border), kotak tersebut akan pecah. Properti box-sizingini memungkinkan kita untuk memasukkan padding dan border dalam total lebar (dan tinggi) kotak, memastikan bahwa padding tetap berada di dalam kotak dan tidak pecah.
Anda dapat membaca lebih lanjut tentang properti ukuran kotak di Tutorial Ukuran Kotak CSS kami .
catatan kaki
Terakhir, kita akan menambahkan footer.
<div class="footer">
<h2>Footer</h2>
</div>
Dan gaya itu:
.footer {
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd;
/* Grey background */
}
Selamat! Anda telah membangun situs web responsif dari awal.
Ruang W3Schools
Jika Anda ingin membuat situs web Anda sendiri dan menghosting file .html Anda, coba pembuat situs web gratis kami , yang disebut W3schools Spaces :
