Tuesday, 3 April 2018

Home » » Kumpulan Kode HTML Terlengkap

Kumpulan Kode HTML Terlengkap

By  April 03, 2018  4 comments


Postingan kali ini saya akan menunjukan Kode HTML, dengan tujuan untuk mempermudah bagi anda yang belum pernah mencoba membuat web sendiri dengan kode HTML.



1. Membuat paragraf baru

<p>

2. Teks tebal

<b>Teks disini</b>

3. Teks ketik

<tt>Teks disini</tt>

4.Teks bercoret

<s>Teks disini<s>

5. Teks garis bawah

<u>Teks disini</u>

6. Teks sup atas

<sup>Teks disini</sup>

7. Teks sub bawah

<sub>Teks disini</sub

8.Teks rata kiri

<div style=”text-align:left;”>Teks rata kiri</div>

9.Teks rata kanan

<div style=”text-align:right;”>Teks rata kanan</div>

10. Teks rata kanan kiri

<div style=”text-align:justify;”>Teks disini</div>

11. Teks berada di tengah

<div style=”text-align:center;”>Teks disini</div>

12. Teks baris pertama menjorok ke dalam

<p style=”text-indent:30px;”>Teks disini</p>

13. Teks menjorok ke dalam semua

<blockquote>Teks disini</blockquote>

14. Teks berwarna

<span style=”color:#f00″>Teks disini</span>

15. Teks stabilo

<span style=”background:#0f0;color:#f00″>Teks disini</span>

16. Membuat text area

<textarea cols=”20″ rows=”2″>teks disini</textarea>

17. Text area huruf warna

<*textarea name=”code” rows=”3″ cols=”20″ style=”;color:#ff0000;”>Teks disini</textarea>

18. Text area dengan bingkai

<textarea name=”code” rows=”3″ cols=”20″ style=”border:5px inset #00ffff;”>Teks disini</textarea>

19. Text area dengan bingkai dan huruf berwarna

<textarea name=”code” rows=”3″ cols=”20″ style=”color:#ff1493;border:5px inset #9932cc;”>Teks disini</textarea>

20. Text area dengan background

<*textarea name=”code” rows=”3″ cols=”20″ style=”background:#ff6347;”>Teks disini</textarea>

21. Text area dengan background dan bingkai

<*textarea name=”code” rows=”3″ cols=”20″ style=”background:#000080;border:5px inset #ff7f50;”>Teks disini</textarea>

22. Text area dengan background dan bingkai serta huruf berwarna

<textarea name=”code” rows=”3″ cols=”20″ style=”background:#9932cc;color:#ff6347;border:5px inset #ff1493;”>Teks disini</textarea>

23. Text area dashed

<textarea name=”code” rows=”3″ cols=”20″ style=”background:#0f0;color:#295F00;border:5px #295F00 dashed;line-height:1.5em;padding:5px;”>Teks disini</textarea>

24. Text area dotted

<textarea name=”code” rows=”3″ cols=”20″ style=”background:#ef0090;color:#FFEFF9;border:5px dotted #FFEFF9;line-height:1.5em;padding:5px;”>Teks disini</textarea>

25. Membuat garis

<hr>

26. Membuat garis warna

<hr style=”color:red”>

27. Mengatur ukuran garis

<hr style=”color:#00f” width=”60%”>

28. Garis sebelah kiri

<hr style=”color:#00f” width=”60%” align=”left”>

29. Garis sebelah kanan

<hr style=”color:#00f” width=”60%” align=”right”>

30. Membuat garis dengan background

<hr style=”height:3px;background:#00f;color:#f00;”>

31. Garis titik-titik

<div style=”border-bottom:3px dotted #00f;”></div>

32. Garis putus-putus

<div style=”border-bottom:3px dashed #00f;”></div>

33. Membuat daftar

 Daftar 1
Daftar 2
Daftar 3
<ul>

<li>Daftar 1</li>

<li>Daftar 2</li>

<li>Daftar 3</li>

</ul>
34. Menampilkan Link dengan teks

<a href=”http://url-tujuan”>nama link</a>

35. Menampilkan gambar

<img src=”http://url-gambar”&gt;

36. Menampilkan URL gambar dengan Teks

<a href=”http://url-gambar”>nama link</a>

37. Menampilkan link dengan gambar

<a href=”http://url-tujuan”><img src=”http://url-gambar”></a&gt;

38. Menampilkan link dengan gambar dan teks

<a href=”http://url-tujuan”><img src=”http://url-gambar”>teks</a&gt;

39. Merubah ukuran gambar

<img src=”http://url-gambar&#8221; width=”100″ height=”100″>

semakin kecil angkanya maka semakin kecil pula gambarnya

40. Menampilkan gambar di samping post sebelah kiri

<img src=”http://url-gambar&#8221; style=”float:left;margin:0 3px 3px;”>Teks disini

41. Menampilkan gambar di samping post sebelah kanan

<img src=”http://url-gambar&#8221; style=”float:left;margin:0 3px 3px;”>Teks disini

42. Membuat bingkai pada gambar
<img style=”border:5px solid #0f0;” src=”http://url-gambar”/&gt;

untuk mengganti bingkai, “solid” ganti dengan; ridge, groove, double, dashed, dotted, inset, outset

43. Merubah warna background

<div style=”background:#0f0″>Teks disini</div>

44. Membuat background dengan bingkai
  • Posisi di kanan                                                                         style=”background:#ccc; border:3px solid #000;padding:  3px;margin-right:20px”>Teks disini</div>
  • Posisi di tengah                                                                        style=”background:#ccc; border:3px solid #000;padding: 3px;margin:20px”>Teks disini</div>
  • Posisi di kiri                                                                             style=”background:#ccc; border:3px solid #000;padding:5px;margin-left:20px”>Teks disini</div>

45. HTML file

 Nama Anda;
Nama depan
Nama belakang;
Nama depan 
<input title=”nama” id=”first” name=”first” type=”text” size=”20″/><br/>Nama belakang: <input title=”nama” id=”first” name=”first” type=”text” size=”20″/>
46. HTML radio

 Jenis Kelamin;
Laki-laki
Perempuan
<input type=”radio” name=”food”/> Laki-laki<br/><input type=”radio” name=”food”/> Perempuan

47. HTML checkbox

 Hoby;
Sepak bola;
Volly;
Basket;
<input type=”checkbox” name=”sport” value=”football”> Sepak bola<br/><input type=”checkbox” name=”sport” value=”vollyball”> Volly<br/><input type=”checkbox” name=”sport” value=”basketball”> Basket

48. HTML password

 Masukkan password
<input type=”password” title=”password” size=”20″/>

49. Tombol bottom kirim

 <a href=”http://url tujuan”><input type=”submit” value=”Nama tombol”/></a>
50. Membuat tabel

 <table border=”1″ width=”100%”<tr><th colspan=”2″>TEKS</th></tr><tr><td style=”width=50%”>teks</td><td style=”width=50%”>teks</td></tr><tr><td>teks</td><td>teks</td></tr></table>

Sekian bentuk kode HTML yang bisa anda pelajari dan anda coba semoga postingan ini bermanfaat bagi anda.

4 comments: