Setiap element HTML memiliki tampilan default tergantung pada jenis elemen. Tampilan nilai default untuk kebanyakan unsur adalah blok atau inline.
HTML Block and Inline
Block Level-Element
Block Level-Element atau elemen blok-tingkat selalu dimulai pada baris baru dan mengambil penuh lebar yang tersedia (membentang dari kiri kekanan sejauh itu bisa).
Contoh element block bertingkat :
- <div>
- <h1>-<h6>
- <p>
- <form>
Inline Element, berbeda halnya dengan element blok-bertingkat element inline tidak dimulai pada baris baru hanya membutuhkan berapa banyak lebar yang diperlukan.
Contoh element inline :
- <span>
- <img>
- <a>
Contoh:
<div style="background-color:blue;color:white;padding:20px">
<h2>SMK NEGERI 1 BAWANG<h2>
<p>SMK N 1 Bawang atau sering disebut skansa merupakan Sekolah Menengah Kejuruan di Kabupaten Banjareunegara dengan alamat Jl. Raya Pucang no 132 Banjarnegara Jawa Tengah. Yang memiliki 8 jurusan yang diantaranya : jurusan akuntansi, adm.perkantoran, tata niaga, tata busana, mekatronika, rpl, tkj, Budidaya perikanan.<p>
</div>
Hasilnya seperti dibawah ini:
Dari script di atas silahkan anda mencoba.
Element <span>, sering digunakan sebagai wadah beberapa teks. Ketika digunakan bersamaan dengan CSS dapat dijadikan sebagai style pada teks.
Contoh :
<h2>SMKN <span style="color:blue">Bawang</span> Banjarnegara</h2>
Hasilnya seperti dibawah ini:
Dari script di atas silahkan anda mencoba.
HTML Classes
HTML Classes, atribut ini memungkinkan untuk menentukan gaya yang sama untuk dengan nama kelas yang sama.
Contoh penerapan :
<div class="cities">
<h2>INDONSIA</h2>
<p>Republik Indonesia (RI), biasa disebut Indonesia, adalah negara di Asia Tenggara yang dilintasi garis khatulistiwa dan berada di antara benua Asia dan Australia serta antara Samudra Pasifik dan Samudra Hindia. Indonesia adalah negara kepulauan terbesar di dunia yang terdiri dari 13.466 pulau,[6] nama alternatif yang biasa dipakai adalah Nusantara.[7] Dengan populasi lebih dari 258 juta jiwa pada tahun 2016,[8] Indonesia adalah negara berpenduduk terbesar keempat di dunia dan negara yang berpenduduk Muslim terbesar di dunia, dengan lebih dari 207 juta jiwa.[9] Bentuk pemerintahan Indonesia adalah republik, dengan Dewan Perwakilan Rakyat, Dewan Perwakilan Daerah dan Presiden yang dipilih secara langsung</p>
</div>
<div class="cities">
<h2>KOREA SELATAN</h2>
<p>Republik Korea atau biasa dikenal sebagai Korea Selatan atau Korsel adalah sebuah negara di Asia Timur yang meliputi bagian selatan Semenanjung Korea. Di sebelah utara, Republik Korea berbataskan Korea Utara, di mana keduanya bersatu sebagai sebuah negara hingga tahun 1948. Laut Kuning di sebelah barat, Jepang berada di seberang Laut Jepang (disebut "Laut Timur" oleh orang-orang Korea) dan Selat Korea berada di bagian tenggara.</p>
</div>
Hasilnya seperti dibawah ini
Dari script di atas silahkan anda mencoba.
Selain itu atribut class HTML juga dapat digunakan untuk elemen inline
Contoh penerapan :
<style>
span.note {
font-size :120%;
color : blue;
}
</style>
<h2>SMKN 1 <span class="note">Bawang</span> Banjarnegara</h2>
<p>SMK <span class="note"> Negeri 1</span> Bawang</p>
</style>
Hasilnya seperti dibawah ini :
Dari script di atas silahkan anda mencoba.
Cukup sampai disini postingan dari saya.
Terimaksih
Selamat Mencoba
Referensi :
0 komentar:
Posting Komentar