Pada kesempatan kali ini saya akan membahas tentang Kolaborasi HTML CSS Tentang Display Block Dan Inline, tentu teman – teman sudah tahu apa perdaan dari display inline dan display block. Dan di dalam website www.kursuswebsite.org/blog pernah juga 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 maka teman – teman nanti akan tahu perbedaan dan hasil outputnya. Baik, saatnya kita implementasikan Kolaborasi HTML CSS Tentang Display Block Dan Inline seperti biasa sebelum mulai teman – teman siapkan terlebih dahulu text editornya, lalu buat script html nya yang bernilai block dan inline. Atau bisa copy script di bawah ini
<!DOCTYPE html> <html> <head> <title>Kolaborasi HTML CSS Tentang 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 pada browser nya, maka hasilnya seperti gambar di bawah ini,
Di atas ini adalah 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 bisa lihat script pada gambar di bawah ini dan ikuti seperti gambar
Jika sudah, save dan refresh pada browser nya maka hasil nya seperti di bawah ini
Nah, bisa kalian lihat background yang berwarna green/hijau adalah tag yang bernilai block dan background yang berwarna orange adalah tag html yang bernilai inline. Oke, kita akan merubah sifat asli mereka dengan css. Teman – teman perhatikan gambar di bawah ini
Bisa kalian lihat pada 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. Maka hasilnya akan terbalik, background green akan berubah menjadi inline dan background orange akan berubah menjadi block.
Inline yang berarti sejajar atau dalam satu baris, dan block yang berarti akan selalu membuat baris kebawah artinya block tidak akan memberikan ruang pada inline maka tag yang di sampingnya akan di block ke bawah. Sekian pada artikel kali ini tentang Kolaborasi HTML CSS Tentang Display Block Dan Inline kita jumpa lagi di artikel yang akan datang. Terima Kasih dan Sampai Jumpa
Semoga bermanfaat 
The post Kolaborasi HTML CSS Tentang Display Block Dan Inline appeared first on Kursus Website Terbaik.