Belajar Html Dasar

Home » Belajar Html Dasar

Belajar Html Dasar


Silahkan copy kode html dibawah ini dan input ke blogger anda, html akan terus saya update sesuai permintaan dan kebutuhan. Untuk request html silahkan hubungi saya melalui grup Telegram

Klik show untuk melihat html
Silahkan Copy html yang ada di box ini

Untuk uji coba html anda klik disini

Daftar isi html

html untuk Text

Header 1

<h1>Header 1</h1>
Html header bisa digunakan hingga <h6> semakin besar angka maka akan semakin kecil header


Paragraf biasa
<p>Paragraf Biasa</p>
Tulisan Miring
<i>Tulisan miring</i>
Tulisan Tebal
<b>Tulisan tebal</b>
Garis bawah
<u>Garis bawah</u>
Tulisan warna
<font color="red">Tulisan warna</font>
Pada tulisan bercetak miring silahkan ganti warna sesuai kebutuhan (dalam B.inggris)


Gaya Tulisan

<font face="Chiller">Gaya Tulisan</font>
Silahkan ganti tulisan bewarna merah dengan jenis fontnya
Rp. 250.000
<strike>Rp. 250.000</strike>

html List

Daftar Isi
  • daftar isi 1
  • daftar isi 2
  • daftar isi 3
  • daftar isi 4
<p>Daftar Isi </p>
<ul>
<li>daftar isi 1</li>
<li>daftar isi 2</li>
<li>daftar isi 3</li>
<li>daftar isi 4</li>
</ul>
Ganti <ul> dengan <ol> untuk membuat list angka

html untuk Link dan Gambar

<a href="http://www.pengusahasyariah.com/">pengusahasyariah.com</a>
Ganti tulisan warna merah dan masukan link Anda

<a href="http://pengusahasyariah.com"> <img src="https://images2.imgbox.com/8a/f4/vQvDgOIm_o.png" width="200" height="200"></a>
Silahkan atur ukuran gambar pada kolom width dan height, kosongkan untuk original size.
Ganti tulisan merah dengan url kamu.
ganti tulisan biru dengan url gambar.

html Call to Action

<a href="https://api.whatsapp.com/send?phone=6281266285050&text=Halo%20bang%20fadil%20ini%20tes%20aja">Order Via WA</a>
Silahkan ganti dengan no Hp Anda, %20 menyatakan spasi


<a href="https://api.whatsapp.com/send?phone=6281266285050&text=Halo%20bang,%20fadil%20tes%20aja....."><img src="http://fortunaherbal.com/wp-content/uploads/2018/01/whatsapp-tombol.png" /></a>
silahkan ganti tulisan bewarna merah dengan url gambar anda


<a href="tel:081993278330"><img src="http://www.yashtravelsindia.com/images/call-now.png" /></a>
silahkan gunakan no hp Anda dan ganti tulisan bewarna merah dengan url gambar anda


<a href="https://t.me/fadiladitya"><img src="http://poolforcoin.com/blog/wp-content/uploads/2018/01/telegram.png"></a>
silahkan ganti tulisan bewarna merah dengan id telegram Anda


<a href="sms:081266285050?&body=Bang fadil ini tes aja"><img src="http://www.7dayfurnitures.com/wp-content/uploads/2016/08/sendsms.png"></a>
silahkan ganti tulisan bewarna merah dengan no hp Anda
silahkan ganti tulisan bewarna biru untuk isi pesan
silahkan ganti tulisan bewarna hijau dengan url gambar Anda

<a title="WhatsApp" href="https://api.whatsapp.com/send?phone=6281266285050&text=Halo%20Bang%20Fadil%20tes%20aja" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnD8IjmkplLb2SKtWy2l_TL5du-aaH4O_WwPbNAGz7eooPr33sW5VD09zYoEKQoY7AmkzYPsp5krMB5AWR644QqhaaJGtthqATYs5Ll4ag7N79n66_-riHwnuqCClPE_ku5FkQzKnABqw/h120/icon+whatsapp.png"></a>

<a title="LINE" href="http://line.me/ti/p/@fadiladitya_e" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivFSkHE2vxnXiKbyphe1gtj0s1237c0uRIk0ACUxFdPtoTvjER2w-d58XcTkg1nX4SQxC1BxFQfM5HaEenYTUzgHSxfNJw1WmmGLzHFQ1oTffaimn7-LNQ6EPn2Fo6IlC7mpaksrcKIJI/h120/icon+line.png"></a>

<a title="BBM" href="bbmi://PINkamu" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZvXhwyQI_avaRho1r5PELLFDxpmdeE8KVYwXXfwLmpAbhiGPXVRzOAa-J7TGn-XEJXPg5vEzWovF-zrzN-H95mubBqqRkW5WaYJMXYKM5IdjgFkjsn-2omGAS2DEqYsW8XLZ6ndkzoNU/h120/icon+BBM.png"></a>

<a title="Messenger" href="https://www.messenger.com/t/Fadil.Aditya.Edwin" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAgOaems78m7UWCih6ZW-cRIcO0iZIZKwO5h-0qOufeJRNm_ujH0XdU-29AyF8lPiZpChP_beRUldeyrL_zKk4J15pT9_bZOzFYRs4AOtvs0UWPqFmq2CNPf4qgJLBaienqBH_PI72nA/h120/icon+messenger.png"/></a>
Silahkan ganti tulisan bewarna Merah dengan no Hp Wa, Id Line, Pin BBM, dan Link messenger


<a href="https://instagram.com/fadiladitya_e"><img src="http://www.stickpng.com/assets/images/580b57fcd9996e24bc43c521.png" height="100" width="100" alt="" /></a>

Membuat fitur chat melayang di halaman web
Buka Tema--> Edit html --> Ctrl+F-->Cari </body>--> Copy kode dibawah ini di atas </body>  
<div style="position:fixed; position:float; bottom:0px; left:0px; clip:inherit; border:none;"> <a href="https://api.whatsapp.com/send?phone=6281266285050" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnD8IjmkplLb2SKtWy2l_TL5du-aaH4O_WwPbNAGz7eooPr33sW5VD09zYoEKQoY7AmkzYPsp5krMB5AWR644QqhaaJGtthqATYs5Ll4ag7N79n66_-riHwnuqCClPE_ku5FkQzKnABqw/h120/icon+whatsapp.png" width="50" height="50"/></a></div>
Silahkan ganti tulisan merah dengan link Anda, apakah WA atau Telegram,dll
Silahkan ganti tulisan biru dengan url gambar anda
Untuk atur posisi atas, bawah, kiri , kanan, silahkan ganti tulisan hijau
Untuk lihat demo klik disini

Html untuk testimoni
<div class="feat-15 txt-center">
<div class="head-feat">
<h2>Apa Pendapat Mereka Tentang Ebook ini?</h2>
<p class="txt-caption">klik untuk memperbesar gambar</p>
</div> <div class="row group">
<div class="col kolom14">
<a href="https://telset.id/wp-content/uploads/2017/03/Empty-1.png" title="Testimoni" class="MagicZoom" rel="zoom-id:zoom;opacity-reverse:true;"> <img src="https://telset.id/wp-content/uploads/2017/03/Empty-1.png" /> </a>
</div>
<div class="col kolom14">
<a href="https://telset.id/wp-content/uploads/2017/03/Empty-1.png" title="Testimoni" class="MagicZoom" rel="zoom-id:zoom;opacity-reverse:true;"> <img src="https://telset.id/wp-content/uploads/2017/03/Empty-1.png" /> </a>
</div>
<div class="col kolom14">
<a href="https://telset.id/wp-content/uploads/2017/03/Empty-1.png" title="Testimoni" class="MagicZoom" rel="zoom-id:zoom;opacity-reverse:true;"> <img src="https://telset.id/wp-content/uploads/2017/03/Empty-1.png" /> </a>
</div>
<div class="col kolom14"> <a href="https://telset.id/wp-content/uploads/2017/03/Empty-1.png" title="Testimoni" class="MagicZoom" rel="zoom-id:zoom;opacity-reverse:true;"> <img src="https://telset.id/wp-content/uploads/2017/03/Empty-1.png" /> </a>
</div>
</div> </div>
Silahkan ganti tulisan merah dengan link gambar Anda

Mengunci halaman artikel dengan JavaScript
<div style="position:fixed; position:float; bottom:0px; left:0px; clip:inherit; border:none;"> <script language="JavaScript"> var password; var pass1="Password"; password=prompt('Masukkan password untuk membuka Halaman!',' '); if (password==pass1) alert('Password yang anda masukan Benar! Silahkan Pelajari dan Praktek!'); else { window.location="https://linkartikel"; } </script>
Silahkan ganti tulisan merah dengan linkPassword Anda
Silahkan ganti tulisan biru dengan url tujuan (artikel web)
Copy html di atas ke bagian Postingan / Halaman --> klik Html (samping Compose) Klik disini untuk lihat gambar