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! 🙂
hey...BroangNetter siapa yang suka sosmed,fb-an,twitteran,instagraman,streaming youtube dan segala aktifitas berbau internetan? haha... pernah kepikir gak gimana cara membuat halaman web atau sosmed yang kalian kunjungi itu... nah.....kali ini kita coba membuat halaman web dengan html ..... apa itu html? Hyper Text Markup Language ( HTML ) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. sumber : //id.wikipedia.org/wiki/HTML pokoknya gitu deh ya...haha tapi sebelum belajar membuat halaman web dengan html, perlu kalian tau juga kalo kita butuh editor untuk mempermudah dalam penulisan kode-kode htlm itu. sebenarnya di sistem operasi seperti windows,os x dan linux sudah ada text editor yang bisa kita gunakan, tapi......tampilan dan fitu