Cara menggunakan header html keren

Tutorial belajar css kali ini berkaitan dengan tampilan pengguna (user interface / UI). Pada halaman news atau blog, judul (HTML Heading) adalah hal yang paling pertama kita lihat.

Aku mencoba membuat desain judul agar lebih menarik dan berkesan. Berikut 3 desain html heading yang aku coba buat dengan css. Bebas untuk kamu menggunakannya di blog atau website kamu.

HTML Heading dengan Garis Line

Kita akan membuat heading dengan garis bawah mengikuti ukuran judul tersebut.

Kode HTML:

<h2 class="heading-style-with-line">Heading Style dengan Garis Line</h2>

Kode CSS:

.heading-style-with-line {
     border-bottom: 1px solid #ddd;
     font-weight: normal;
     padding-bottom: 0.5em;
}

Heading dengan Padding

Kita akan membuat heading dengan gaya modern. Kali ini aku akan menambahkan padding pada judul tersebut dan border-left aku buat lebih lebar.

Kode HTML:

<h2 class="heading-style-left-padding">Heading Style dengan Padding</h2>

Kode CSS:

.heading-style-left-padding {
     border-left: 10px solid red;
     font-weight: normal;
     padding-left: 0.5em;
}

Heading dengan Underline

Kita akan membuat gaya heading dengan garis bawah berwarna. Garis bisa kamu tentukan sendiri panjangnya (tidak mengikuti panjang dari judul).

Untuk mengubah warna garis bawah silakan cari referensi di halaman Kode Warna HTML.

Kode HTML:

<h2 class="heading-style-small-underline">Heading Style dengan Underline</h2>

Kode CSS:

.heading-style-small-underline {
     font-weight: normal;
}
.heading-style-small-underline:after {
     border-bottom: 2px solid orange;
     content: "";
     display: block;
     padding-top: 0.25em;
     width: 220px;
}

Demikian sedikit cara mengubah gaya judul pada halaman website. Source code diatas bisa kamu gunakan dalam blog atau website kamu secara gratis!

Untuk kamu yang ingin belajar html dari nol, aku menulis materi belajar html khusus untuk pemula. Penjelasan disertai gambar dan contoh kode html.

Silakan baca materi belajar html di Belajar HTML Gampang Banget! – HTML Warrior #1.

Semoga bermanfaat dan jangan lupa share ya! 🙂