Halo ... kawan , kaliini saya akan sharing tentang beberapa jenis tag dan link . Saya harap kamu sudah membaca postingan saya sebelumnya tentang struktur dasar penulisan tag html .
Oke , tag atau element HTML yang telah saya pelajari ternyata memiliki 2 jenis sifat yaitu :
Oke , tag atau element HTML yang telah saya pelajari ternyata memiliki 2 jenis sifat yaitu :
- Block element
- Inline element
block element dan inline element tentu memiliki kegunaan tertentu , berikut penjelasan nya :
BLOCK ELEMENT
Block element merupakan tag - tag atau element - element HTML yang selalu memakai lebar keseluruhan dari lebar halaman. Suatu tag atau element yang bersifat Block element selalu membentuk baris baru saat digunakan. jika kamu membuat dua atau lebih tag atau element HTML yang bersifat block element , maka tag selanjutnya selalu membuat baris baru.
contohnya :
<!DOCTYPE html>
<html>
<head>
<title>Block Element</title>
</head>
<body>
<h1 style="background-color:red;"> ini adalah tag h1 yang bersifat block element <h1>
</body>
</html>
penjelasan :
contoh hasil :
gambar: 1
dari gambar 1 di atas kamu dapat melihat warna merah yang mewakili tag h1 secara penuh menempati lebar halaman. apabila kamu tambahkan tag atau element baru, setelah tag atau element yang bersifat block element , tag atau element yang baru tersebut akan berada di baris baru. berikut contoh gambarnya
contoh hasil :
gambar : 2
contoh hasil :
gambar 3
dari gambar 3 diatas kamu dapat melihat warna #fff999 yang mewakili tag span memiliki lebar sesuai lebar teks atau content di dalamnya. apaila ditambahkan element lain yang bersifat inline element maka element selanjutnya akan berlanjut atau menyesuaikan sisa lebar . sebagai contoh lihat gambar 4
contoh hasil :
gambar 4
contoh hasil
gambar :5
style = "..."merupakan atribut pada sebuah tag yang mendefinisikan property css secara langsung pada tag tersebut. saya memberi property background-color dengan value red . agar tag h1 nantinya bisa kita lihat sifatnya sebagai tag block element.
contoh hasil :
gambar: 1
contoh hasil :
gambar : 2
dari gambar 2 di atas nampak pada content teks 2 membentuk baris baru.
contoh tag tag yang bersifat block element di antaranya :
- <h1>..</h1> s/d <h6> ... </h6>
- <br />
- <p> ... </p>
- <hr />
- ...dan lain lain ...
INLINE ELEMENT
Inline Element merupakan tag tag atau element element HTML yang memiliki lebar sesuai lebar content di dalamnya dan menyesuaikan dengan lebar halaman. Suatu tag atau element HTML yang bersifat Inline Element akan menyesuaikan letaknya mengikuti sisa lebar halaman yang tersisa.
contohnya:
<!DOCTYPE html>penjelasan :
<html>
<head>
<title>Inline Element</title>
</head>
<body>
<span style="background-color:#fff999;"> ini adalah tag h1 yang bersifat inline element </span>
</body>
</html>
<span> ... </span>tag span merupakan salah satu tag atau element html yang digunakan untuk menandai teks atau content untuk diberikan property sebuah teks atau content
#fff999merupakan kode hexa warna pada pewarnaan
contoh hasil :
gambar 3
contoh hasil :
gambar 4
dari gambar 4 diatas kamu dapat melihat lebar halaman yang digunakan oleh element yang baru di buat dan menyisakan lebar halaman .
contoh tag tag yang bersifat inline element di antaranya :
- <span>..</span>
- <strong > ... </strong>
- <del> ... </del>
- <sub> ... </sub>
- ...dan lain lain ...
MENGGABUNGKAN INLINE ELEMENT & BLOCK ELEMENT
Dari deskripsi dan penjelasan mengenai Block Element dan Inline Element , bagaimana hasil jika Inline Element dan Block Element digunakan pada sebuah halaman website. Untuk lebih memahami silahkan ikuti contoh berikut.
contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Inline Element</title>
</head>
<body>
<span style="background-color:#fff999;"> ini adalah tag h1 yang bersifat inline element </span>
<div style="background-color:red;"> ini adalah tag h1 yang bersifat block element </div>
</body>
</html>
penjelasan :
<div> ... </div>tag div merupakan salah satu tag atau element html yang bersifat block element . biasanya tag div digunakan untuk mengelompokkan atau membungkus tag-tag atau element-element html yang lain.
contoh hasil
gambar :5
Dari gambar 5 bisa dilihat hasil apabila tag atau element html yang bersifat inline element dan block element digabungkan.
sesuai penjelasan sebelumnya yang menerangkan bahwa inline element memiliki lebar sesuai lebar content di dalamnya dan menyesuaikan dengan lebar halaman. maka pada baris pertama terlihat menyisakan lebar halaman.
pada baris kedua yang merupakan block element yang selalu memakai lebar keseluruhan dari lebar halaman maka pada gambar 5 terbentuklah baris baru.
oke... demikian penjelasan mengenai inline element dan block element tag html. yang saya sharing ke kamu.
Untuk postingan berikutnya saya akan membahas tentang menampilkan gambar pada halaman website
Semoga Postingan ini bermanfaat buat kamu ... Terimakasih sudah berkunjung
Penulis : Seno Apriliyadi
You can withdraw money with oncasinos.info Visa, Mastercard, bank wire, and Bitcoin. It takes one to 5 business days, depending on the method. With Bitcoin, you can to|you probably can} withdraw as a lot as you need, while the maximum deposit is $5,000. Payouts here are are|listed under are} normally processed in a really short time, which is a big advantage.
ReplyDeleteIs a detailer, fabricator, and installer of HVAC sheet metal duct. McCorvey has carried out on quite a few high profile projects throughout the U.S. HRPO sheet may be laser minimize, punched, Air Humidifiers and fashioned with wonderful outcomes. This is a very common comparison of stainless to carbon steel as many of the material’s properties are dependent upon alloying metal content.
ReplyDelete