Senin, Desember 17, 2018

Belajar HTML (17): Penjelasan Tentang Blok pada Halaman Web

HTML Tutorial Web

Ketemu lagi sama BangHaji… Kita lanjutkan bahasan tentang web, kali ini tentang blok pada tag HTML. Secara umum dulu ya, blok ini semacam bidang tertentu yang terbentuk dari tag dan hanya berlaku pada tag itu saja dengan bidang yang lebarnya sepanjang lebar layar. Artinya bidang tersebut “habis” hanya untuk tag tersebut saja. Jika ada tag lagi setelah tag ini, maka akan tampil di posisi bawahnya.

Bingung? Sebagai contoh blok pada tag adalah tag heading yang pernah kita bahas pada tulisan berikut:

Belajar HTML (07): Format Heading dan Font

Dari tulisan di atas, coba perhatikan bahwa setiap heading akan memenuhi lebar layar dan heading berikutnya akan tampil di bawah. Padahal tulisan pada heading atasnya tidak panjang dan cukup untuk menampilkan heading kedua dan seterusnya. Nah, inilah yang dimaksud dengan blok. Sampai sini sudah mulai jelas ya apa itu blok pada HTML.

Baiklah kita lanjutkan saja. Blok ini terbagi dalam 2 implementasi yaitu pada tag elemen (disebut Block Elements) dan pada tag inline (Inline Elements).

Tag Elemen (Block Elements)

Ciri utama dari block elements adalah ditampilkan sepenuh lebar layar khusus untuk blok itu saja. Elemen lain akan berada di atas atau di bawahnya, tidak bisa berada di sampingnya. Semua block elements akan dimulai dari baris baru dan setiap elemen yang mengikuti sesudahnya akan ditampilkan pada baris baru lagi. Istilah kerennya adalah Full Blocks. 😎

Contoh tag untuk block elements ini adalah <p>, <h1> sampai <h6>, <ul>, <ol>, <dl>, <pre>, <hr>, termasuk juga tag untuk membuat break yaitu <br>.

Untuk contoh-contohnya saya kira tidak perlu dicoba lagi karena sudah pernah dibahas pada tulisan sebelumnya ya. Saya coba inventariskan saja seperti di bawah ini:

Adapun tag <hr> dan <pre> belum kita bahas. Kita akan coba latihannya saat ini ya. Sederhanya saja supaya paham tentang apa itu block elements dan pastinya paham juga fungsi dari tag-tag itu.

Untuk mengetahui seperti apa tag <hr> dan <pre> silakan coba latihan ini, simpan dengan nama file 40-html-horizontal-pre.html. Perlu diketahui bahwa <hr> digunakan untuk membuat sebuah garis mendatar. Sedangkan <pre> digunakan untuk menampilkan tulisan dalam bentuk font Courier New dan tidak menghilangkan spasi antara 1 kata dengan kata lain atau antara baris 1 dengan baris lain.

Selanjutnya →

Halaman : 1 2 3 4

Mari sebarkan manfaat kepada orang lain...

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *