Tuesday, 3 April 2018

Kumpulan Kode HTML Terlengkap



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: