Cara Membuat Kotak Komentar Sederhana dengan HTML dan CSS

Hallo teman-teman, Bertemu kembali dengan saya dan masih diwebsite ini. Seperti biasa ya teman-teman, semoga masih diberikan kesehatan dan kebahagiaan agar dapat kembali semangat dalam mencari informasi atau ingin mengupgrade skill didunia website.

Pada kesempatan kali ini saya akan membahas tentang Cara Membuat Kotak Komentar Sederhana dengan HTML dan CSS. ditutorial ini saya menggunakan sebuah styntax html5 yaitu fieldset, cukup mudah dan rapih jika menggunakan fieldset ini. Jika teman-teman belum mengetahui apa itu fieldset silahkan teman-teman baca pembahasan saya tentang fieldset dibawah ini :

– https://www.kursuswebsite.org/cara-penggunaan-tag-fieldset-pada-form-html/

Oke saya rasa sudah cukup paham ya teman-teman dan sekarang kita langsung saja dimulai Cara Membuat Kotak Komentar Sederhana dengan HTML dan CSS. pertama-tama silahkan jalankan/run text-editor yang teman-teman gunakan, lalu ketiklah/copy script HTML seperti dibawah ini :

<div class="container">
	<fieldset>
		<legend>Komentar</legend>
		<div class="kotak">
			<span>Murihat</span>:<br><hr>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. when an unknown printer took a galley of type and scrambled it to make a type specimen book....</p>
		</div>
		<div class="kotak">
			<span>Rizal</span>:<br><hr>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. when an unknown printer took a galley of type and scrambled it to make a type specimen book....</p>
		</div>
	</fieldset>
</div>

Jika sudah dengan HTMLnya, langkah selanjutnya teman-teman tambahkan 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>

Maka 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>Murihat</span>:<br><hr>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. when an unknown printer took a galley of type and scrambled it to make a type specimen book....</p>
		</div>
		<div class="kotak">
			<span>Rizal</span>:<br><hr>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. when an unknown printer took a galley of type and scrambled it to make a type specimen book....</p>
		</div>
	</fieldset>
</div>
</body>
</html>

Oke jika sudah seperti diatas maka kemudian silahkan teman-teman simpan, dan coba teman-teman jalankan/run dibrowser yang teman-teman gunakan. Jika benar maka hasilnya akan terlihat seperti pada gambar dibawah ini :

Bagaimana teman-teman? Cukup mudah ya. Jadi contoh sederhananya kurang lebih seperti itu dalam membuat kotak komentar. Jika teman-teman kurang tertarik dengan design sederhana diatas silahkan teman-teman modifikasi sesuai keinginan teman-teman dengan acuan dasarnya seperti diatas.

Oke kalau begitu cukup sekian pembahasan kali ini tentang Cara Membuat Kotak Komentar Sederhana dengan HTML dan CSS. kurang lebih nya mohon maaf dan semoga bermanfaat.

Terimakasih