fieldset diHTML adalah untuk mengelompokan sebuah object atau form dan juga untuk mempercantik sebuah form.
Tanpa Basa Basi Serba Tutorial Apapun akan kasih tutorialnya, Pertama jalankan/run text-editor yang gunakan, lalu ketiklah/copy script HTML seperti dibawah ini :
<div class="container">
<fieldset>
<legend>Komentar</legend>
<div class="kotak">
<span>Muhammad Fajar</span>:<br><hr>
<p> Makasih Kak Atas Tutorialnya :) </p>
</div>
<div class="kotak">
<span>Kefin Dwi Saputra</span>:<br><hr>
<p> Wah Sangat Membantu Lanjutkan Gan :D </p>
</div>
</fieldset>
</div>
Jika sudah dengan HTMLnya, Langkah selanjutnya kalian tambahkan script style
script style CSSnya seperti dibawah ini :
<style>
*{margin:0; padding: 0}
.container{width: 800px; margin: auto;}
fieldset{width: 400px; padding: 10px;}
.kotak{border: 1px solid grey; padding: 5px; margin:5px 0; overflow: hidden;}
</style>
Dan hasil dari kedua script diatas akan menjadi seperti dibawah ini :
<html>
<head>
<meta charset="UTF-8">
<title>Kotak Komentar</title>
<style>
*{margin:0; padding: 0}
.container{width: 800px; margin: auto;}
fieldset{width: 400px; padding: 10px;}
.kotak{border: 1px solid grey; padding: 5px; margin:5px 0; overflow: hidden;}
</style>
</head>
<body>
<div class="container">
<fieldset>
<legend>Komentar</legend>
<div class="kotak">
<span>Muhammad Fajar</span>:<br><hr>
<p> Makasih Kak Atas Tutorialnya :) </p>
</div>
<div class="kotak">
<span>Kefin Dwi Saputra</span>:<br><hr>
<p> Wah Sangat Membantu Lanjutkan Gan :D </p>
</div>
</fieldset>
</div>
</body>
</html>
Jika sudah seperti diatas maka kemudian kalian simpan, dan coba kalian jalankan/run
dibrowser yang kalian gunakan.Dan jika berhasil akan seperti dibawah ini:
Cukup mudah ya? Jadi contoh sederhananya kurang lebih seperti itu dalam membuat
kotak komentar.
Oke kalau begitu cukup sekian pembahasan kali ini tentang Cara Membuat Kotak Komentar dengan HTML dan CSS. kurang lebih nya mohon maaf dan semoga bermanfaat.
Demikian tutorial tentang Cara Membuat Kotak Komentar dengan HTML dan CSS.
Semoga bermanfaat bagi kalian jangan lupa untuk menge-share tutorial ini bila kalian merasa terbantu..
Terima kasih
Tidak ada komentar:
Posting Komentar