<h3 class="centeredText"><span style="text-decoration: underline; color: #e34f26;"><span style="vertical-align: inherit;"><span style="vertical-align: inherit;">Klik di sini</span></span></span><span style="vertical-align: inherit;"><span style="vertical-align: inherit;"> untuk mengedit demo ini</span></span></h3><! - Komentar ini hanya dapat dilihat di editor sumber ->< p > < img class = "imageRight" style = "width: 53px; tinggi: 60px;" src = "https://htmleditor.tools/img/html-editor-tools.png" alt = "Alat editor HTML" /> < span style = "vertical-align: inherit;" > < span style = "vertical-align: inherit;" > Ini adalah teks tempat demo Anda dapat bereksperimen dengan </ span > < span style = "vertical-align: inherit;" >> </ span > < strong class = "orangeText" > < span style = "vertical-align: inherit;" > < span style = "vertical-align: inherit;" > Editor HTML & nbsp; </ span > </ span > </ strong > < span style = "vertical-align: inherit;" > < span style = "vertical-align: inherit;" > . </ span > < > Lihat bagaimana editor visual dan sumber instan mengubah satu sama lain. </ span > </ span > </ p >< p > < span style = "vertical-align: inherit;" > < span style = "vertical-align: inherit;" > Editorial Pilihan Uji dan Pembersihan Alat. </ span > </ span > </ p >< p > & nbsp; </ p >< table style = "height: 164px;" width = "378" >< tbody >< tr >< td colspan = "2" > < strong > < span style = "vertical-align: inherit;" > < span style = "vertical-align: inherit;" > Ini adalah meja. </ span > </ span > </ strong > </ td ></ tr >< tr >< td > < span style = "vertical-align: inherit;" > </ span > < span style = "text-decoration: underline;" > < span style = "vertical-align: inherit;" > < span style = "vertical-align: inherit;" > Gambar </ span > </ span > </ span > < span style = "vertical-align: inherit;" > < span style = "</ span > < span style = "vertical-align: inherit;" > : </ span > </ span > </ td >< td style = "perataan teks: pusat; lebar: 266px;" > < img src = "https://htmleditor.tools/img/smiley.png" alt = "tersenyum" /> & nbsp; < em > < span style = "vertical-align: inherit;" > < span style = "vertical-align: inherit;" > Hai, saya & Ouml; d & ouml; nke! </ span > </ span > </ em > </ td ></ tr >< tr >< td > < span style = "vertical-align: inherit;" > < span style = "vertical-align: inherit;" > Tautan teks: </ span > </ span > </ td >< td > & nbsp; & nbsp; < A href = "https://htmlg.com/" > < rentang gaya = "vertical-align: mewarisi;" > < span style = "vertical-align: inherit;" > Klik di sini </ span > </ span > </ a > < span style = "vertical-align: inherit;" > < span style = "vertical-align: inherit;" > untuk lebih banyak fitur! & nbsp;> </ td ></ tr ></ tbody ></ table >< p > < span style = "vertical-align: inherit;" > < span style = "vertical-align: inherit;" > Salin-tempel dokumen apa pun di editor WYSIWYG untuk </ span > </ span > < span class = "orangeText" > < span style = "vertical-align: inherit;" > < span style = "vertical-align: inherit;" > membahas </ span > </ span > < = "vertical-align: inherit;" > < span style = "vertical-align: inherit;" > menjadi kode HTML. </ span > </ span > </ p >Editor dan Pembersih HTML Instan Online Gratis
Alat Editor HTML adalah kumpulan sumber daya online gratis yang membuat penulisan konten web lebih mudah dari sebelumnya. Bekerja dengan kode HTML secara langsung di browser web Anda tanpa mengunduh dan menginstal perangkat lunak yang mencurigakan. Dengan cross browser yang kuat dan kompatibilitas perangkat, Editor HTML ini akan menghemat banyak waktu Anda. Yang Anda butuhkan hanyalah koneksi internet dan Anda siap berangkat.
Menggunakan HTML Editor sangat intuitif. Setiap kali Anda memuat halaman, ada konten demo untuk Anda mainkan dan coba. Jika Anda membutuhkan bantuan lebih lanjut silakan baca instruksi di bawah ini. Saya akan mempresentasikan bagaimana cara kerja editor HTML , cara menggunakan antarmuka pengguna, terdiri dari tiga panel dan bagaimana mengkonversi dokumen ke HTML .
Temukan opsi pembersihan HTML di sisi kanan layar tempat Anda dapat menjalankan fitur satu per satu atau semua opsi yang dicentang sekaligus, mengklik tombol Bersihkan besar yang terletak di bagian bawah editor soruce.
Editor HTML telah dirancang untuk mengintegrasikan semua fitur yang diperlukan oleh copywriter, blogger, dan editor web lainnya. Pengembang web yang berpengalaman akrab dengan kode HTML tetapi alat online gratis ini memungkinkan bagi non-pengembang untuk menulis artikel. Anda tidak perlu tahu apa-apa tentang pemrograman. Setiap orang yang dapat menggunakan editor kata dapat dengan mudah bekerja dengan editor HTML ini juga. Tidak perlu tahu bahasa pemrograman dan / atau markup.
Alat daring ini akan memungkinkan Anda menyatukan dokumen Anda dengan sangat cepat dan mudah. Sementara itu, Anda juga dapat belajar coding HTML. Ini pasti akan lebih mudah daripada menggunakan Notepad, Dreamviewer atau software serupa lainnya yang memerlukan instalasi dan peningkatan yang konstan dan tidak perlu.
Dengan alat ini semuanya datang secara otomatis dan gratis! Inilah sebabnya saya menyarankan Anda untuk menandai alamat web ini.
Pembersih HTML bawaan dapat merapikan kode Anda dengan satu sentuhan tombol. Sesuaikan opsi pembersihan di dropdown di bawah editor sumber, mengklik ikon roda gigi:
- Singkirkan gaya inline yang tidak diinginkan . Fitur yang sangat berguna saat menyalin konten dari MS Word atau editor teks lainnya.
- Hapus kelas dan ID yang bukan milik situs web Anda. Ini bisa berguna ketika Anda menyalin kode HTML dari situs web lain yang menggunakan style sheet CSS berbeda.
- Tag kosong , seperti paragraf, bentang, atau kemunculan elemen lainnya yang ditutup segera setelah tag pembuka juga merupakan sisa yang tidak diinginkan yang mungkin ingin Anda buang. Misalnya <span> </span> akan dihapus jika opsi ini dicentang saat Anda melakukan pembersihan.
- Mengatur celah vertikal menggunakan paragraf kosong di dokumen Anda adalah kesalahan yang sangat umum. Hapus tag yang hanya berisi spasi dengan opsi ini.
- Mirip dengan kebiasaan buruk sebelumnya , orang sering menggunakan ruang berulang untuk mengatur lekukan atau untuk menggeser teks ke kanan. Bersihkan dengan klik sederhana.
- Dokumen HTML sering berisi komentar , ditulis antara <! - dan -> . Opsi pembersihan ini memungkinkan Anda untuk mengupas semuanya.
- Hapus semua atribut tag , kecuali atribut src gambar dan atribut tautan href . Kalau tidak, tag ini akan menjadi tidak valid.
- Opsi konversi ke teks biasa menghapus setiap tag HTML dan hanya menyisakan teks seperti Anda akan menempelkannya di Notepad .
Bagaimana cara menggunakan editor HTML?
Editor HTML adalah alat terbaik untuk menyusun artikel web dengan cepat dan bebas kesalahan. Lihat konten kaya teks dan kode sumbernya berdampingan di komposer waktu nyata ini. Sesuaikan konten di salah satu editor dan perubahan akan berlaku untuk yang lain secara otomatis.
Editor HTML instan online ini terdiri dari dua area teks waktu nyata, tempat Anda dapat melihat pratinjau dan mengakses visual dan kode sumber secara bersamaan. Ubah editor WYSIWYG di sebelah kiri atau sintaks yang disorot kode soruce di sebelah kanan, penyesuaian Anda akan memengaruhi yang lain segera saat Anda mengetik.
Bergantung pada dokumen sumber Anda, Anda dapat menggunakan editor HTML untuk dua hal:
Konversi dokumen kaya teks ke kode HTML
Katakanlah Anda memiliki dokumen PDF yang ingin Anda terbitkan di situs web. Pilih sumber kemudian salin dan tempel di editor visual di sebelah kiri. Ini akan mengonversi konten dan menampilkan kode sumber yang sesuai di sebelah kanan secara instan. Gunakan opsi pembersihan yang disebutkan sebelumnya atau buat perubahan lebih lanjut dengan salah satu area editor - mana yang lebih Anda kenal.
Edit dan buat kode HTML
Untuk membuat dokumen yang memiliki sumber HTML yang ada sebagai titik awal, Anda harus menyalin-tempel kode di area sisi kanan. Pratinjau akan ditampilkan dan diubah secara waktu nyata dan Anda dapat lebih lanjut memodifikasi artikel Anda.
Jika Anda tidak memiliki dokumen atau kode sumber apa pun untuk memulai, buat di bidang mana saja yang Anda sukai. Anda dapat melompat di antara mereka seperti yang Anda inginkan. Bilah alat editor kata mungkin berguna di atas area WYSIWYG.
Simpan dan publikasikan dokumen
Ketika Anda telah menyelesaikan artikel Anda dan ada baiknya online Anda dapat menyalin kode sumber dari editor yang disorot sintaksis. Tergantung pada CMS Anda, ada banyak cara untuk menerbitkan artikel.
Untuk menyimpan konten sebagai file .html , pertama buat file .txt baru di sistem Anda. Tambahkan bagian kepala dan tubuh yang diperlukan ke file (kunjungi lembar cheat HTML dan cari bagian templat halaman Kosong) akhirnya dan tempel kode Anda antara tag tubuh pembuka dan penutup. Simpan file kemudian ganti namanya, ubah ekstensi menjadi .html . Buka di browser web untuk melihatnya beraksi. Lembar cheat (tautan di atas) akan membantu Anda menambahkan bagian header yang diperlukan lainnya ke file Anda.
Wordpress adalah platform situs web paling populer. Pelajari cara menulis posting di sini . Hubungi webmaster jika Anda tidak yakin sistem apa yang digunakan situs web Anda atau jika Anda perlu bantuan dalam mempublikasikan artikel.
Bagaimana Cara Kerja Editor HTML Instan?
Anda dapat mengedit kode HTML yang dibungkus di dalam tag tubuh dokumen. Pastikan Anda tidak mengedit bagian kepala karena ini bukan tujuan editor HTML ini dirancang.
Kami dapat memiliki dua kemungkinan kasus. Anda harus mengonversi dokumen visual ke HTML atau memiliki kode yang sudah ada yang perlu Anda edit. Dalam kasus pertama, rekatkan dokumen di editor WYSIWYG, jika tidak salin di editor sumber . Setelah menempatkan teks di editor, yang lain akan menampilkan pratinjau / hasil secara instan.
Ketika konten ditempatkan di dalam area kerja, kita perlu memutuskan apakah kita perlu bekerja lebih lanjut dengan kode atau tidak. Jika kode sumber tampak terlalu berantakan, penuh dengan kelas alien dan gaya inline yang dapat merusak tampilan dan nuansa default desain web. Dalam hal ini saya akan menyarankan Anda untuk merapikan HTML Anda dengan menekan tombol Bersihkan atau memilih opsi yang diinginkan dalam daftar.
Editor WYSIWYG
WYSIWYG adalah singkatan dari What You See Is What You Get . Komposer kata ini dapat ditemukan di sisi kiri layar dan ini adalah tempat Anda dapat melihat pratinjau bagaimana dokumen akan terlihat ketika Anda mempublikasikannya di situs web.
Penegasan di atas hanya sebagian benar karena tampilan halaman web tidak ditentukan oleh markup saja tetapi oleh stylesheet CSS juga. The editor HTML profesional memungkinkan Anda mengimpor file CSS eksternal untuk membuat preview yang lebih akurat. Dalam hal ini hanya akan memungkinkan Anda melihat pratinjau elemen dalam urutan yang diberikan: gambar, tabel, tajuk dll.
Editor TinyMCE juga dapat digunakan sebagai penghitung kata. Lihat tampilan di sudut kanan bawah.
Bilah Alat Editor Visual
Toolbar terletak di atas textarea. Saya sarankan Anda untuk menguraikan melalui opsi yang ditawarkan dan mengujinya. Beberapa dari mereka memiliki pintasan keyboard dengan tombol Ctrl.
- File - menyegarkan halaman atau mencetak konten.
- Edit - pasangan undo-redo memungkinkan untuk mengembalikan dokumen kembali ke keadaan sebelumnya. Cut-copy-paste berfungsi seperti halnya untuk perangkat lunak lain. Ketika opsi Tempel sebagai teks dicentang, perintah tempel menghapus gaya teks dan hanya menambahkan paragraf. Pilih semua highlight seluruh konten. Alat Temukan dan ganti menggantikan cuplikan teks.
- Sisipkan - tambahkan atau embed file media, gambar atau tautan jangkar. Jelajahi galeri karakter khusus untuk menambahkan simbol paling umum yang tidak dapat ditemukan di keyboard Anda. Item lain yang dapat Anda tambahkan dari titik menu ini adalah: garis horizontal (tag <jr />), tautan jangkar, tanggal atau waktu saat ini, dan ruang non-pecah (karakter & nbsp;).
- Lihat - item ini memungkinkan Anda untuk menyorot karakter yang tidak terlihat (seperti ruang yang tidak putus), memblokir elemen seperti paragraf dan pos dan menampilkan alat bantu visual (misalnya perbatasan sel tabel). The Preview menampilkan screenshot dari dokumen yang sebenarnya sedangkan Fullscreen modus memperbesar WYSIWYG HTML5 Editor untuk mengisi seluruh Monitor.
- Format - gaya teks dengan satu klik. Sorot bagian kemudian pilih gaya yang diinginkan: Bold , Italic , Underline , Coret , Superscript , Subscript atau memilih salah satu dari Format dropdown. Ini berisi pos, paragraf, kutipan blok dan banyak lagi. The T x format Batal barang menghilangkan gaya inline dari doc.
- Tabel - bekerja dengan tabel HTML dengan mudah. Buat satu menggunakan wizard, pilih dimensi yang diinginkan atau sesuaikan kisi yang ada.
- Alat - memungkinkan untuk melihat kode sumber. Anda tidak akan terlalu sering menggunakan fitur ini karena kode HTML5 selalu terlihat.
Ikon Pintasan
Beberapa fitur tidak perlu membuka dropdown di toolbar. Anda dapat mengaksesnya langsung melalui ikon khusus.
Lihat gambar di atas atau arahkan ikon dengan mouse Anda untuk mendapatkan tooltip yang menyarankan apa yang dilakukan pintasan.
Editor Kode Sumber HTML
Area editor HTML sekunder tempat Anda dapat menyesuaikan dan menyempurnakan markup Anda. Beberapa perubahan lebih mudah diedit di area ini, terutama bagi mereka yang terbiasa dengan pengkodean HTML.
Tempel di sini ketika Anda memiliki sumber HTML untuk diedit . Ini akan memperbarui pratinjau. Jelas, tidak semua perubahan akan tercermin di bagian WYSIWYG: misalnya atribut alt dari tag gambar, atau atribut target dari sebuah tautan, dan daftar berjalan. Komentar yang ditulis antara tag pembuka dan penutup <! - -> hanya dapat dilihat di sini.
Salah satu fitur hebat editor sumber adalah penyorotan sintaksis yang menyediakan keterbacaan yang lebih baik melalui kamus CodeMirror. Komentar berwarna coklat, tag berwarna biru, nama atribut tag berwarna merah, nilai atribut tag berwarna ungu sementara kontennya berwarna hitam. Tempatkan kursor pada tag pembuka untuk melihat tag penutupnya disorot. Pekerjaan yang sama juga terbalik.
Bilah Alat Editor Sumber
Terletak di bawah area editor, bagian ini memungkinkan Anda memanipulasi sumber dengan beberapa ikon. Anda tidak harus menghafalnya, Anda dapat mengarahkan gambar-gambar ini untuk melihat petunjuk tentang apa yang mereka lakukan.
- Penghitung karakter - angka dapat dilihat setelah label Sumber : . Saat editor visual menghitung kata-kata, di sini Anda dapat melacak jumlah karakter. Ini akan menjadi merah ketika dokumen mencapai panjang kritis yang mungkin membekukan komputer Anda. Tidak disarankan untuk melakukan pembersihan sumber saat peringatan ini diaktifkan.
- Undo - Tidak sama dengan menekan CTRL + Z pada editor visual. Tombol ini mengembalikan dokumen ke keadaan sebelum opsi pembersihan, atau acara operasi bilah alat. Anda dapat kembali hanya satu langkah dengan undo.
- Halaman baru - menghapus dua editor untuk memulai lembaran baru.
- Kompresor - menghapus komentar dan baris baru untuk mengompresi kode HTML menjadi satu baris tunggal.
- Indent - mengatur markup ke tampilan hierarki untuk memberikan keterbacaan yang lebih baik pada hierarki tag elemen blok yang memasukkan tab berurutan sebagai spasi putih. Menekannya dua kali memasuki ruang putih sebelum elemen sebaris juga, yang dapat menyebabkan ruang yang tidak diinginkan.
- Pengkodean - pound Inggris dapat ditandai sebagai & pound; atau £ . Opsi ini memungkinkan Anda untuk memutuskan ke mana Anda ingin menandai karakter khusus. Dianjurkan untuk membiarkan pengkodean diaktifkan.
- Demo - mengisi editor HTML dengan konten demo agar Anda dapat menguji operasinya.
- Bersihkan - tombol pembersihan utama melakukan semua opsi pembersihan yang diperiksa ke apakah. Lihat subtitle berikutnya untuk detailnya.
Opsi Pembersihan HTML
Panel yang terletak di sidebar kanan adalah daftar fitur pembersih HTML yang memungkinkan Anda melakukan operasi massal di markup. Kotak centang menandai opsi aktif yang dijalankan dengan tombol Bersihkan besar, sementara opsi dapat dipicu secara individual dengan menekan segitiga.
Secara default enam opsi pertama diaktifkan. Anda dapat memilih atau menonaktifkan semua mengklik tajuk. Nama-nama tersebut cukup deskriptif tetapi inilah penjelasan tentang apa yang dilakukan setiap item.
- Inline gaya - sangat mirip dengan T x pilihan dari WYSIWYG HTML5 Editor toolbar, ini menghapus segala sesuatu yang ditulis antara style = "..." di atribut tag.
- Kelas & ID - sangat berguna ketika Anda memigrasikan konten dari satu situs web ke situs web lain yang menggunakan kelas dan pengidentifikasi yang berbeda. Opsi ini menghapus semua yang tampak seperti class = "..." atau id = "..." .
- Tag kosong - menghilangkan tag di mana tidak ada antara tag pembuka dan tag penutup.
- Tag dengan satu spasi - kebiasaan mengedit teks buruk yang sangat umum adalah menambahkan baris kosong pada dokumen untuk menyisipkan celah vertikal: <p> & nbsp; </p> . Opsi ini menangani ini.
- Ruang berturut-turut - praktik HTML buruk lainnya adalah menyisipkan ruang putih berulang untuk menggeser teks ke kanan. Ini akan menghapus spasi berturut-turut dan hanya menyisakan satu.
- Hapus komentar - menghapus komentar dari kode HTML5.
- Atribut tag - menghapus atribut tag, kecuali src gambar dan href tautan. Ini menghapus hampir semua hal tetapi membiarkan struktur tag tetap utuh.
- Untuk teks biasa - menghapus tag tetapi tidak konten di dalamnya, hanya menyisakan teks dalam satu baris.
Konversi Dokumen Ke Kode HTML
Konversi dokumen ke kode HTML tidak pernah semudah ini. Yang harus Anda lakukan adalah menyalin-tempel dokumen di area WYSIWYG dan Anda akan menerima kode sumber secara instan. Penggunaan yang paling umum adalah transformasi Word ke HTML tetapi dengan metode yang sama dapat digunakan untuk dokumen visual apa pun, seperti PDF, Excel
Triknya bekerja mundur juga. Jika Anda ingin mengonversi file HTML ke Microsoft Word, lalu tempel kode di editor sumber, ambil konten visual dan tempel di program Word.
Meringkas Apa yang Kami Pelajari tentang Editor HTML
Setelah membaca artikel ini Anda mungkin menyadari bahwa ini mungkin alat online terbaik yang akan menghemat banyak waktu dan uang. Digunakan bersama-sama dengan alat HTML lain Anda dapat memaksimalkan efisiensi kerja Anda apakah Anda seorang penerbit biasa atau profesional.
Saya akan menyebut alat editor HTML ini Swiss Army Knife dari penerbitan konten online karena kemudahan penggunaan dan keserbagunaan yang diwakilinya. Jika Anda tidak puas dengan apa yang ditawarkan situs web ini, Anda dapat berlangganan keanggotaan di htmlg.com yang menyediakan lebih banyak fitur, seperti pengelola tag, filter tag dan atribut, dan banyak lagi.
Pastikan Anda menyimpan tautan ini dan dipersilahkan untuk membaginya dengan teman-teman Anda yang mungkin menganggap sumber daya gratis ini bermanfaat.
Rahasia pribadi
Pengeditan HTML dan setiap operasi di situs web ini dijalankan di sisi klien dan dokumen rahasia Anda tidak pernah dikirim ke server kami. Kami tidak mengumpulkan data pribadi tetapi kami menggunakan Google Analytics untuk mengumpulkan statistik pengunjung anonim.
Kami menggunakan cookie untuk menyimpan pengaturan Anda dan untuk memeriksa apakah ini pertama kali Anda mengunjungi situs web ini. Editor mengisi area kerja dengan pesan selamat datang untuk menyambut pengunjung pertama kali. Demo ini dapat digunakan untuk bereksperimen dengan situs web.
HTML-Editor.Tools mungkin juga menampilkan iklan (AdSense atau platform lain), jadi kami harap Anda menonaktifkan pemblokir iklan untuk menjaga layanan ini gratis.
Situs web ini tidak mengumpulkan data pribadi tetapi kami menggunakan aplikasi pihak ketiga yang mungkin melakukannya. Harap verifikasi kebijakan privasi mereka untuk mengetahui lebih lanjut: Google Analytics, Google Adsense, Gmail, Facebook, Youtube. Kami dapat menambahkan aplikasi baru ke situs web kapan saja tanpa pemberitahuan. Silakan periksa kode sumber untuk mengidentifikasi mereka. Berlaku syarat dan ketentuan .
EmoticonEmoticon