Tuesday, April 7, 2020

Tool Konversi HTML


Basa-basi

Hai sobat, apa kabar nih? Gak kerasa ya kita ketemu lagi di blognya orang goblog ini. Hehe. Pada kali ini, saya bakal membagikan tool keren yang bisa sobat coba. Tool ini memiliki nama: tool konversi html. Sengaja saya beri nama demikian supaya keliatan melangitkan bahasa Indonesia.

Sebelum melihat tool konversi HTMLnya, saya mau tanya dulu nih. Sobat tau gak sih apa itu arti konversi html? Kalo belum tau, hayuk simak pengertiannya
Oiya, bagi sobat yang sudah penasaran ingin menjajal Tool Konversi HTML,
silakan klik ini ya Tool Konversi HTML
Pengertian konversi HTML
Konversi HTML jika kita pisah kata-katanya, maka akan menjadi dua kata:

  • Konversi
  • HTML

Konversi sendiri bisa kita artikan sebagai perubahan dari satu bentuk ke bentuk yang lain.

Misalnya, Sobat disuruh mengerjakan tugas makalah oleh guru dan harus dikumpul dalam bentuk pdf. Maka setelah sobat menyelesaikan makalahnya dalam bentuk word, Sobat perlu mengubahnya dulu menjadi pdf. Nah, perubahan dari file word (doc,docx,dll) menjadi pdf itu bisa kita sebut juga sebagai konversi word ke pdf.

Contoh lainnya ialah gambar. Dalam dunia media gambar, kita pasti akan menemukan istilah png, jpg, img, dan sebagainya. Beberapa istilah tersebut biasa kita sebut sebagai ekstensi atau format. Ketika kita ingin mengubah gambar png ke gambar jpg, maka sama saja kita sedang melakukan konversi png ke jpg.

Ya, begitulah kurang lebih pengertian dari konversi. Atau jika Sobat masih bingung, maka artikan saja konversi menjadi kata mengubah. Jadi, konversi artinya itu mengubah.

Sedangkan HTML, ialah bahasa markah yang dipakai untuk membuat kerangka website. Untuk pengertian jelasnya saya belum bisa menjelaskan ya, hehe. Jadi, saya anggap Sobat sudah mengerti lebih kurangnya mengenai HTML.

Adapun makna konversi HTML pada postingan ini ialah mengubah sebagian kode HTML menjadi kode html yang lain.

Sebagai contoh begini Sobat. Saat saya ingin menampilkan text tebal pada blog ini, maka saya harus menggunakan tag html <b>. Misalnya saya akan menampilkan kalimat "Tool Konversi HTML" dengan teks tebal. Maka pada mode html, saya perlu menuliskan begini.

<b>Tool Konversi HTML</b>

Sehingga menghasilkan teks ini: Tool Konversi HTML

Nah, pertanyaannya gini, Bagaimana saya bisa menampilkan kode <b>Tool Konversi HTML</b>. Sedangkan apabila saya tulis demikian, maka kode <b> dan </b> nya secara otomatis hilang dan hanya berfungsi sebagai penebal teks saja?

Yap! Caranya ialah dengan mengubahnya. Kita perlu mengubah tanda "<" dan ">" supaya kode tersebut bisa ditampilkan. Yakni dengan mengubah kode "<" menjadi &lt; dan mengubah kode ">" menjadi &gt;

Sehingga untuk menampilkan teks <b>Tool Konversi HTML</b>, kita perlu menggunakan kode html berikut ini:

&lt;b&gt;Tool Konversi HTML&lt;/b&gt;

Kurang lebih seperti itu ya Sobat. Saya yakin Sobat mengerti.

Fungsi Tool konversi HTML

Nah, bagi Sobat yang masih bingung mengenai fungsi tool ini, berikut ini saya jelaskan lagi.

Tool Konversi HTML berfungsi supaya kode html bisa ditampilkan ke blog. Sebab jika tidak dikonversi atau diubah terlebih dahulu, maka kode html tidak akan tampil. Melainkan berjalan sesuai fungsinya masing-masing.

Seperti contoh di atas. Apabila kita ingin menampilkan kode <b>, maka kita perlu mengubahnya menjadi &lt;b&gt;. Adapun jika kita tidak menuliskannya seperti itu, maka kode akan berjalan sesuai fungsinya dan tidak akan ditampilkan ke layar. Ini merupakan salah satu kegunaannya saja. Selain itu, masih ada kegunaan dan fungsi-fungsi lainnya yang bisa Sobat terapkan.

Misalnya pada template Blogger. Terkadang di beberapa kode tertentu, Sobat tidak boleh menuliskan karakter "&" begitu saja, melainkan harus mengubahnya terlebih dahulu menjadi &amp;.

Bagaimana cara membuat Tool Konversi HTML

Baik Sobat, untuk membuat tool konversi html ini, kita hanya perlu menggunakan html dan javascript saja. Adapun css hanyalah sebagai penghiasnya. Caranya ialah sebagai berikut.
1. Masuk ke kode editor Sobat
2. Pastekan kode berikut ini ke kode editor

<div id="boxkonversi">
<textarea id="tekskode" placeholder="Silakan masukkan kode yang ingin Sobat konversi" requirement="Silahkan di isi" spellcheck="false"></textarea> 
<div class="button-group">
<br>
<button onclick="kοnversi()">Ubah</button> 
<button onclick="hapus();">Hapus</button>
<button onclick="pilih();">Salin</button>

<div id="opt" >
<div id="judul" >Pilih kode mana yang ingin Sobat ubah</div>
<input id="opt1"  type="checkbox" >ubah <code>&amp;</code> menjadi <code>&amp;amp;</code>
<br>
<input id="opt2" type="checkbox">ubah <code>'</code> menjadi <code>&amp;#39;</code>
<br>
<input id="opt3"  type="checkbox">ubah <code>"</code> menjadi <code>&amp;quot;</code>
<br>
<input id="opt4"  type="checkbox">ubah <code>&lt;</code> menjadi <code>&amp;lt;</code>
<br>
<input id="opt5"  type="checkbox" checked="checked" >ubah <code>&gt;</code> menjadi <code>&amp;gt;</code>
</div>
</div>


<style type="text/css">
#judul{
border-radius:8px;
padding:5px;
color:#373136;
text-align:center;
margin-bottom:10px;
background-color:#fff;
}
#boxkonversi textarea{
   width:100%;
   height:240px;
   margin:0 auto;
   display:block;
   background-color:#373136!important;
   padding:20px;
   font-family:monospace;
   font-size:90%;
   border-radius:5px 5px 0 0;
   resize:none;
   outline:none;
   color:white!important;
}

::-webkit-input-placeholder {color: #fff;}
::-moz-placeholder {color: #fff;}
::-ms-input-placeholder {color: #fff;}
::placeholder {color: #efefef;font-family:monospace;font-size:120%!important;}

#boxkonversi {
width:95%!important;
}
#boxkonversi .button-group{
   float:none;
    background-color:#373136!important;
   text-align:center;
   padding:20px 20px 40px 20px;
   margin-top:-50px;
   border-top:5px double #fff;
   border-radius:0px 50px 5px 5px;
}

.button-group button{
   cursor:pointer;
   background-color:rgba(233,233,233,.1);
   text-align:center;
   color:white;
   display:inline-block;
   padding:8px 16px;
   font-size:14px;
   font-weight:400;
   line-height:1.471;
   border-radius:3px;
   margin:0 5px;
   border:0;
   box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1);
   transition:all .5s
}
#opt input{
   -webkit-appearance:none;
   -moz-appearance:none;
   -ms-appearance:none;
   -o-appearance:none;
   appearance:none;
   position:relative;
   height:15px;
   width:15px;
   transition:all 0.15s ease-out 0s;
   background:transparent;
   border:1px solid #fff;
   cursor:pointer;
   display:inline-block;
   margin-right:2rem;
   outline:none;
   transform:translateX(0px);
   position:relative;
   padding:0
}

#opt input:checked{
border:0;
   background:transparent;
   animation:rubberBand 1s
}

#opt input:checked::before{position:absolute;content:'';background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z' fill='%23fff'/%3E%3C/svg%3E");
width:20px;height:20px;display:inline-block}
button:hover,button:active{
outline:none;
box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)
}
#opt code{
border:1px solid rgba(233,233,233,.1);
font-weight:bold;
background-color:transparent;
   color:#ffffff;
   border-radius:2px;
   padding:4px;
}


#opt1,#opt2,#opt3,#opt4,#opt5{
   display:inline-block;
   margin:0px 20px;
   align:left;
   vertical-align:middle;
   border:none;
   outline:none
}
#opt{
margin-top:20px;
text-align:left;
color:#eee;
}

</style>

<script type="text/javascript">
/*copyleft hasanaskari.xyz*/
let a = document.getElementById('tekskode');
function hapus() {
 b=a.value=""
}
function kοnversi() {
    let b = a.value,
        c = document.getElementById('opt1'),
        d = document.getElementById('opt2'),
        e = document.getElementById('opt3'),
        f = document.getElementById('opt4'),
        g = document.getElementById('opt5');
        
    b = b.replace(/\t/g, "    ");
    if (c.checked) b = b.replace(/&/g, "&amp;");
    if (d.checked){ b = b.replace(/'/g, "&#39;")};
    if (e.checked) b = b.replace(/"/g, "&quot;");
    if (f.checked) b = b.replace(/</g, "&lt;");
    if (g.checked) b = b.replace(/>/g, "&gt;");
    a.value = b;
};

function pilih(){
 a.select();
 a.setSelectionRange(0, 99999)
 document.execCommand("copy");
 hapus();
 alert("Teks sudah disalin" );
}
</script>

3. Jalankan kodenya

Atau jika Sobat ingin memasangnya di halaman Blogger:
1. Silakan masuk ke menu halaman
2. Buat entri baru
3. Pastekan kode tersebut pada mode HTML (bukan Compose)
4. Posting

Untuk penjelasan rinci dari kodenya, maaf sobat saya tidak jelaskan. Sebab akan sangat panjang. Jadi, bagi sobat yang penasaran fungsi kode secara rincinya, silakan dipahami sendiri saja ya.

Oiya, Sobat. Kode yang saya bagikan di atas sedikit berbeda dengan Tool konversi HTML yang saya tampilkan di akhir Postingan. Perbedaannya hanya dalam segi warna  dan checkboxnya saja. Adapun desain lainnya, tetap sama kok. Fungsi-fungsinya pun tidak ada yang berbeda. Jadi, ya dimaklumi sajalah biar kita terlihat sedikit beda. 😃

Silakan melihat demonya di sini:
Tool Konversi HTML

Tool Konversi HTML

Nah, Setelah Sobat mengerti sedikit banyak tentang tool konversi HTML ini, maka silakan Sobat gunakan tool ini sebaik mungkin. Diharap dengan adanya Tool ini, maka sobat dapat lebih maksimal memberikan tutorial bermanfaat. Khususnya bagi sobat yang berkecimbung dalam dunia kode-kode. Baiklah, berikut ini ialah Tool Konversi HTML nya.



Pilih kode mana yang ingin Sobat ubah
ubah & menjadi &amp;
ubah ' menjadi &#039;
ubah " menjadi &quot;
ubah < menjadi &lt;
ubah > menjadi &gt;

Akhir Kata

Sekian saja, semoga bermanfaat.

Disqus Codes
  • Untuk menulis teks tebal , sila gunakan atau
  • Untuk menulis teks miring, sila gunakan atau
  • Untuk menulis teks bergaris bawah , sila gunakan
  • Untuk menulis teks bergaris tengah , sila gunakan
  • Untuk menulis kode HTML, silakan pakai atau
    or

    dan gunakan parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Dapatkan Kabar Terbaru Melalui Email