MEMBUAT HEADER
STRUKTUR DASAR HTML TEMPLATE ATAU WEBSITE
Langkah pertama buka text editor kalian, di sini saya menggunakan Visual Studio Code.
STUDI KASUS: Belajar CSS untuk MARGIN dan PADDING.
Membuat struktur dasar HTML menggunakan VS Code cukup ketik " ! " (tanda seru) kemudian ketuk "Tab" VS Code akan secara otomatis menampilkan Struktur Dasar HTML.
HTML/CSS
VISUAL STUDIO CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template</title>
</head>
<body>
</body>
</html>
TAMPILAN DI LAYAR
di layar monitor hanya tampil judul halaman web.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template</title>
<h1>Logo Website</h1>
</head>
<body>
<nav>Area Navigasi</nav>
</body>
</html>
kita tambahkan h1 dan nav
tampilan layar sbb:
kita atur CSS nya
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template</title>
<h1>Judul Website</h1>
<style>
h1 {
background-color: aqua;
color: blue;
margin: auto;
padding: 40px;
text-align: center;
}
nav {
background-color: rgb(18, 6, 29);
color: aqua;
padding: 10px;
}
</style>
</head>
<body>
<nav>Area Navigasi</nav>
<h3>Hello World !</h3>
<p>lorem ipsum</p>
</body>
</html>
Sampai disini selesai membuat struktur dasar HEADER, hanya perlu mengatur CSS untuk menentukan font dan warna HEADER
Pekerjaan selanjutnya :
tampilan layar
disini
selesai membuat header dasar, tinggal berkreasi dengan CSS
