Kolaborasi HTML CSS Tentang Display Block Dan Inline

Di kesempatan kali ini saya akan membahas mengenai Kolaborasi HTML CSS Tentang Display Block Dan Inline, tentu teman – teman telah tahu apa perdaan dari display inline dan display block. Dan di pada blog www.kursuswebsite.org/blog pernah pun di bahas mengenai display block dan display inline. Di latihan kali ini kita akan terbang tenggelam dengan html css yaitu kolaborasi antara html dan css, dimana kita akan menggunakan tag html yang bernilai block kemudian kita rubah html tersebut dengan css menggunakan display inline begitupun sebaliknya, html yang bernilai inline kita rubah dengan css menggunakan display block karenanya teman – teman nanti akan tahu perbedaan dan hasil outputnya. Bagus, saatnya kita implementasikan Kolaborasi HTML CSS Tentang Display Block Dan Inline seperti lazimnya sebelum mulai teman – teman siapkan terlebih dahulu text editornya, lalu bikin script html nya yang bernilai block dan inline. Atau dapat copy script di bawah ini



<!DOCTYPE html>
<html>
<head>
<title>Kolaborasi HTML CSS Mengenai Display Block Dan Inline</title>
</head>
<body>
<p>Ini tag html yang bernilai block </p>
<h1>Ini tag html yang bernilai block </h1>
<div>Ini tag html yang bernilai block</div>
<li>Ini tag html yang bernilai block</li>
<ul>Ini tag html yang bernilai block</ul>


<span>Ini tag html yang bernilai inline</span>
<a href=>Ini tag html yang bernilai inline</a>
<label>Ini tag html yang bernilai inline</label>
<strong>Ini tag html yang bernilai inline</strong>
<u>Ini tag html yang bernilai inline</u>
<i>Ini tag html yang bernilai inline</i>
<b>Ini tag html yang bernilai inline</b>
</body>
</html>


Kemudian save dengan nama index.html lalu jalankan di browser nya, karenanya hasilnya seperti gambar di bawah ini,



Pada



Di atas ini yakni beberapa tag html yang bernilai block dan inline, langkah berikutnya kita berikan background dengan css agar tahu area mana saja yang akan tampil, teman – teman dapat lihat script di gambar di bawah ini dan ikuti seperti gambar



Pada



Seandainya telah, save dan refresh di browser nya karenanya hasil nya seperti di bawah ini



Pada



Nah, dapat kalian lihat background yang berwarna green/hijau yakni tag yang bernilai block dan background yang berwarna orange yakni tag html yang bernilai inline. Oke, kita akan merubah sifat asli mereka dengan css. Teman – teman perhatikan gambar di bawah ini



Pada



Dapat kalian lihat di gambar di atas ini, saya memberikan css display Inline didalam tag html yang bernilai block, kemudian saya berikan css display block didalam tag yang bernilai inline. Karenanya hasilnya akan terbalik, background green akan berubah menjadi inline dan background orange akan berubah menjadi block.



Pada



Inline yang berarti sejajar atau pada satu baris, dan block yang berarti akan selalu membangun baris kebawah artinya block tak akan memberikan ruang di inline karenanya tag yang di sampingnya akan di block ke bawah. Demikian di artikel kali ini mengenai Kolaborasi HTML CSS Tentang Display Block Dan Inline kita jumpa lagi di artikel yang akan datang. Terima Kasih dan Hingga Jumpa



Semoga bermanfaat 🙂




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Even di javascript adalah sebuah suatu yang terjadi di element tertentu, maksudnya yaitu suatu respon atau aksi yang di lakukan oleh user dimana kegiatan tersebut akan memicu jalannya script javascript yang terdapat di blog tersebut. Di javascript terdapat banyak event namun di pembahasan kali ini kita akan membahas mengenai Perbedaan Antara Keyup dan Keydown Di jQuery, Keyup adalah sebuah event yang akan di jalankan ketika tombol dilepaskan di di keyboard, dan sedangkan Keydown adalah sebuah event ketika tombol ditekan di keyboard.
Read more

Membuat Table Warna Berselang dengan PHP

Image
Selamat datang di blog Source Code Aplikasi, masih dengan File yang kemarin, tapi sekarang ini kita akan menggunakan Framework Bootstrap dan Membangun Table Warna Berselang dengan PHP, jadi jangan lupa yang kemarin praktekin dulu yah teman teman link nya yang ini . oka seketika saja kita praktekan.
Read more