Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget Atas Posting

Suka dengan konten Maringngerrang.com?
Jika kamu merasa terbantu dengan konten di blog ini, silakan dukung kami melalui Saweria.co/maringngerrang. Dukungan berharga dari kalian semua-lah yang membuat blog ini bisa tetap hadir di hadapan kamu. Terima kasih!

HTML Editor

Selamat datang! Halaman ini merupakan salah satu tools dari Maringngerrang sebagai pendukung berbagai artikel dan tutorial yang ada di blog ini. Pada halaman ini kamu bisa melakukan review atau menampilkan demo terhadap kode HTML, CSS, bahkan Javascript yang ingin kamu gunakan. Keterangan lebih lanjut bisa kamu lihat di bagian bawah.

Hasil kode kamu muncul di sini:



Bagaimana menggunakan HTML Editor ini?

Untuk penggunaan tools ini sangat mudah, kamu cukup memasukkan kode HTML pada textarea di atas lalu untuk menampilkan hasilnya tekan tombol Tampilkan di atas, maka secara otomatis semua teks yang ada di textarea akan diterjemahkan kedalam kode HTML dan ditampilkan pada kotak di bawahnya.

Apa saja yang bisa tampilkan?

Kamu hanya bisa menampilkan halaman "statis". Yaitu dengan menggunakan kode HTML, CSS, dan Javascript. Selain dari itu kode mungkin tidak dapat diterjemahkan seperti, PHP, py, dan skrip dinamis lainnya.

Contoh

Kamu bisa menampilkan kode HTML dengan menuliskan langsung tag yang telah disalin atau diketik secara manual pada textarea. Misalnya kamu menuliskan kode berikut:

<style>
#maringngerrang {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 3rem;
}
</style>
<div id="maringngerrang">Halo kawan!</div>

Jika dibutuhkan kamu bisa menambahkan sumber berikut untuk menggunakan Jquery, Bootstrap, dan Fontawesome.

Jquery

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Font Awesome

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

Bootstrap

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" />

Dapatkan Info Terbaru!