Skodev
Belajar coding dalam bahasa Indonesia
DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Daftar Isi:
Membuat sebuah situs web yang menarik memerlukan lebih dari sekedar pengetahuan dasar HTML. Kamu juga perlu memahami bagaimana cara mempercantik tampilan situs web kamu, dan salah satu caranya adalah dengan menghias header HTML menggunakan CSS. Dengan pengetahuan ini, kamu bisa membuat header situs web kamu tampak lebih profesional dan menarik.
Untuk memulai, kamu perlu membuat header HTML terlebih dahulu. Header ini nantinya akan kamu hiasi dengan CSS. Berikut adalah contoh cara membuat header HTML:
<html>
<head>
<title>Judul Situs</title>
</head>
<body>
<header>
<h1>Judul Header</h1>
</header>
</body>
</html>Pada contoh di atas, header disisipkan di dalam tag <body> dan judul header dituliskan di dalam tag <h1>.
Setelah membuat header HTML, selanjutnya adalah menambahkan CSS untuk menghias header tersebut. CSS dapat kamu sisipkan di bagian <head> pada kode HTML. Berikut contohnya:
<html>
<head>
<title>Judul Situs</title>
<style>
header {
background-color: red;
color: white;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Judul Header</h1>
</header>
</body>
</html>Pada contoh di atas, CSS digunakan untuk mengubah warna latar belakang header menjadi merah, warna teks menjadi putih, menambahkan jarak padding sebesar 10px, dan memposisikan teks di tengah header.
Untuk lebih mempercantik tampilan header, kamu bisa menambahkan efek seperti bayangan dengan menggunakan property box-shadow pada CSS, atau mengubah font dengan property font-family. Jangan lupa untuk selalu menyesuaikan desain dengan tema atau konsep situs web kamu.
Pada akhirnya, dengan penguasaan teknik ini, kamu bisa menghasilkan desain situs yang lebih berkesan dan profesional. Selamat mencoba!
Link terkait: