Lompat ke konten Lompat ke sidebar Lompat ke footer

BELAJAR HTML | Mengenal Block dan Inline serta Menambah Komentar pada HTML

Assalamualaikum Wr Wb, Selamat datang kembali di Awonapa JR, Apakabar teman teman semua? baik selalu yah, aamiin.

Selanjutnya Kita masih akan terus membahas mengenai apa itu HTML sampai TUNTAS!
karena pada postingan sebelumnya kita sudah membahas mengenai 


BELAJAR HTML | Mengenal Format Text pada HTML
dan pastinya teman teman semua sudah paham yah, karena itu termasuk dasar di dalam pembuatan file HTML


block inline dan komentar

Nah dan pada kesempatan kali ini kita akan membahas tentang Block dan Inline serta Menambah Komentar pada HTML.

Sebelum kita masuk lebih dalam mengenai Block dan Inline serta Menambah Komentar pada HTML. Kita akan mencoba memahami apa itu Block dan Inline.

Block dan Inline ini biasanya sering di gunakan pada pembuatan CSS yang sangat berguna pada pembuatan CSS karena dapat mempermudah dan membuat tampilan web menjadi lebih rapih.

Pemahaman Block

Block pada HTML adalah : mengalir kebawah (lawan dari display inline), yaitu konten HTML yang diberikan display block akan mengambil tempat secara block atau penuh ke kanan, jadi jika ada konten lagi setelahnya maka akan ditampilkan di bawahnya. Contoh display block secara bawaan pada tag HTML yaitu tag heading, div, paragraf dan lain sebagainya. Apabila display block maka pada CSS bisa diberi property width dan height.

Dapat di ambil simpel nya seperti ini, jadi setelah di block, walaupun dia hanya satu atau dua kata maka ia akan langsung mengambil penuh sisa nya, jadi jika ada kata lagi setelah itu dia akan langsung berada di bagian bawah setelah kata tadi.

Contoh untuk Block


<html>
    <head>
        <title>Awonapa JR</title>
    </head>
    <body>
        <!-- ini bagian div -->
        <div>
            <h1>Selamat Datang di Blog Awonapa JR</h1>
            <h2>Semoga Bermanfaat</h2>
        </div>
    </body>
</html>


Hasil dari script di atas adalah seperti ini :


Selamat Datang di Blog Awonapa JR

Semoga Bermanfaat

Jadi block sudah langsung mengambil alih bagian kanan dari elemen tersebut.


Pemahaman Inline


Inline yaitu mengalir ke samping, semua konten HTML yang diberikan display inline akan mengalir ke samping. Maksudnya akan memenuhi tempat yang ada di sampingnya, jika sudah mentok ke samping maka konten HTML akan mengisi ke bawahnya. Pada tag HTML bawaan yang memiliki display inline contohnya tag link, image, span, dan lain sebagainya. Apabila menggunakan display inline maka pada CSS tidak bisa diberi property width dan height. Namun kecuali pada tag image bisa menggunakan property width dan height.


Contoh untuk Inline


<!DOCTYPE html>
<html>
    <head>
        <title>Awonapa JR</title>
    </head>
    <body>
        <div>
            <p>Silahkan Kunjungi Fanspage kami.</p>
            <a href="www.facebook.com">Fanspage Facebook</a>
            <span><img src="html.png" height="100" width="200"/></span>
            <span><a href="www.facebook.com">Fanspage Twitter</a></span>
        </div>
    </body>
</html>

dari script di atas maka hasilnya akan seperti ini



inline html


span akan mengisi kekosongan di samping halaman yang kosong,.


MENAMBAH KOMENTAR PADA HTML

Nah selanjutnya kita akan membahas Cara Menambah Komentar di HTML
maksud komentar disini bukan seperti pada komentar facebook atau sosial media lainya. 
Maksudnya disini adalah kita akan memberi penjelasan di dalam suatu file.html yang kita buat, contoh seperti gambar dibawah ini


Komentar HTML

nah jadi script untuk menggunakan komentar atau penjelasan di HTML adalah seperti ini


<!-- ini bagian div -->

script itu tidak akan di run oleh html, karena itu adalah kegunaan untuk memberi komentar pada HTML.


Baik cukup sampai disini dulu, kita akan lanjutkan nanti.
Semoga mudah dipahami yah! jika belum jelas silahkan untuk berkomentar!

Salam Awonapa JR

Wassalamualaikum Wr Wb

Posting Komentar untuk "BELAJAR HTML | Mengenal Block dan Inline serta Menambah Komentar pada HTML"