Senin, 27 Maret 2017

Belajar HTML dan CSS Bagian 6 : Mengenal Heading Pada HTML

Heading Pada Html

       Assalamualaikum Wr. Wb. Selamat datang kembali di blog lupacode. Sebelumnya kita telah mempelajari tentang Belajar HTML dan CSS Bagian 5. Bagi sahabat lupacode yang baru saja bergabung atau nyasar ke halaman ini, silahkan pelajari terlebih dahulu dari artikel yang pertama agar sahabat paham dan mengerti maksud dari artikel yang akan saya bahas kali ini. Sahabat semua dapat melihat seluruh isi artikel pada blog ini di halaman Daftar isi

Lupacode - Belajar html bagian 6

       Pertama – tama seperti biasa saya buat file baru dan saya beri nama heading.html di dalam folder html yang sebelumnya telah saya buat. Terlebih dahulu saya ketikan struktur kode htmlnya beserta contoh tag heading seperti ini :

<!DOCTYPE html>
<html>
<head>
            <title>HTML Heading</title>
</head>
<body>

            <h1>Heading 1</h1>
            <h2>Heading 2</h2>
            <h3>Heading 3</h3>
            <h4>Heading 4</h4>
            <h5>Heading 5</h5>
            <h6>Heading 6</h6>

</body>
</html>

        Dalam file html ini saya telah membuat 6 buah heading, dan ini adalah heading yang dimiliki oleh html mulai dari <h1> sampai <h6> h1 adalah heading level tertinggi dan h6 adalah heading terkecil, agar sahabat tidak bingung mari kita lihat hasilnya. Bagaiamana sudah mulai paham sampai sini ?
         Heading h1 memiliki ukuran font yang paling besar sedangkan heading h6 memiliki ukuran font yang paling kecil. Seperti yang harus sahabat pahami pada heading ini adalah kapan kalian membutuhkan salah satu pada heading ini. Misalnya sahabat ingin membuat sebuah headline pada halaman atau membuat sebuah judul untuk artikel diblog sahabat. Kalian bisa menggunakan <h1> karna menurut saya itu element paling penting di dalam halaman kalian. Contoh saya menuliskan <h1> Judul Artikel </h1> dan setelahnya kalian misalkan mempunya sebuah isi artikel, dan dapat menggunakan tag <p>ini adalah isi artikel</p>. Untuk sub judul kalian dapat menggunakan heading <h2> misalkan <h2>Sub Judul</h2> lalu isinya <p> ini adalah sub body artikel </p>
           Analogi lain yang dapat kita aplikasikan adalah ketika kita membuat karya ilmiah. Dimana kita menuliskan Bab 1, Bab 2 dan seterusnya. Judul Bab bisa kalian anggap sebagai <h1> dan sub bab seperti Bab 1.1 bisa kalian anggap sebagai <h2> dan sub bab lainnya kalian bisa menggunakan <h3> dan seterusnya. Supaya lebih jelas kita dapat melihat contohnya, misalkan saya membuka halaman www.detik.com Dapat kita lihat bahwa disana banyak sekali terdapat judul artikel salah satunya adalah seperti ini

lupacode - heading html


       Jika kita ingin melihat headline itu digunakan menggunakan h1 atau h2 makan kalian dapat melihatnya dengan cara memanfaatkan fasilititas yang diberikan oleh google chrome yaitu dengan menggunakan inspect element. Kalian cukup klik kanan pada mouse lalu pilih inspect element. Lalu akan muncul dibawah nya source code halaman tersebut, dan kalian coba pilih icon kaca pembesar untuk memilih element mana yang ingin kita lihat, kemudian klik pada salah satu bagian halaman yang ingin kita lihat.
         Baik sampai disini dulu untuk Belajar HTML dan CSS Bagian 6 mengenai pembahasan tentang Heading Pada <HTML> kita akan lanjut kedalam pembahasan materi selanjutnya yaitu Belajar HTML dan CSS Bagian 7

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon