Tag / Kode HTML dan Contohnya

Tag-tag dan contoh dibawah ini adalah sebagai pembelajaran untuk saya aja, tapi kalo ada yang mau ikutan belajar atau mau nambah2in dipersilahkan aja ya.
Tag-tag ini akan selalu saya update jika menemukan Tag baru.
Berikut kode2nya :)
LEBIH BAGUS LAGI DIPRAKTEKKAN DISINI

Memberi Komentar atau keterangan
<!-->Teks Disini</!-->
Ket: Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser Membuat baris baru
<br/>
Ket: Tanda diatas sama seperti menekan tombol enter. Jadi tanda ini posisinya selalu diakhir baris. Jika baris tersebut kosong, isi aja dengan kode ini. Ingat, bedakan antara " huruf tebal " dengan kode diatas, jangan sampai salah.

Membuat paragraf baru
<p>

Teks tebal
<b>Teks disini</b>

Teks ketik
<tt>Teks disini</tt>

Teks bercoret
<s>Teks disini<s>

Teks garis bawah
<u>Teks disini</u>

Teks sup ^atas
^{Teks disini}

Teks sub _bawah
<sub>Teks disini</sub

Teks rata kiri

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

Teks rata kanan

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

Teks rata kanan kiri
<div style="text-align:justify;"> Teks disini</div>

Teks berada di tengah
<div style="text-align:center;"> Teks disini</div>

Teks baris pertama menjorok ke dalam
<p style="text-indent:30px;"> Teks disini</p>

Teks menjorok ke dalam semua

<blockquote> Teks disini</blockquote>

Teks berwarna
<span style="color:#f00">Teks disini</span>

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

Membuat textarea
<*textarea name="code" rows="3" cols="20" style=";color:#ff0000;">Teks disini

Textarea dengan bingkai

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

Textarea dengan bingkai dan huruf berwarna

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

Textarea dengan background

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

Textarea dengan background dan bingkai

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

Textarea 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 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 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

Membuat garis

---

<hr>

Membuat garis warna

---

<hr style="color:red">

Mengatur ukuran garis

---

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

Garis sebelah kiri

---

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

Garis sebelah kanan

---

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

Membuat garis dengan background

---

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

Garis titik-titik

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

Garis putus-putus

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

Membuat daftar

• Daftar 1
• Daftar 2
• Daftar 3

<ul> <li>Daftar 1</li> <li>Daftar 2</li> <li>Daftar 3</li> </ul>

Menampilkan Link dengan teks

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

Menampilkan gambar

<img src="http://url-gambar">

Menampilkan URL gambar dengan Teks

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

Menampilkan link dengan gambar

<a href="http://url-tujuan"><img src="http://url-gambar"></a>

Menampilkan link dengan gambar dan teks

beri raring

<a href="http://url-tujuan"><img src="http://url-gambar">teks</a>

Merubah ukuran gambar

<img src="http://url-gambar" width="100" height="100"> semakin kecil angkanya maka semakin kecil pula gambarnya

Menampilkan gambar di samping post sebelah kiri

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

Menampilkan gambar di samping post sebelah kanan

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

Membuat bingkai pada gambar

<img style="border:5px solid #0f0;" src="http://url-gambar"/>

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

Merubah warna background

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

Membuat background dengan bingkai

Posisi di kanan
<div style="background:#ccc; border:3px solid #000;padding: 3px;margin-right:20px"> Teks disini</div>

Posisi di tengah
<div style="background:#ccc; border:3px solid #000;padding: 3px;margin:20px"> Teks disini</div>

Posisi di kiri
<div style="background:#ccc; border:3px solid #000;padding:5px;margin-left:20px"> Teks disini</div>

.
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"/>

HTML radio
Jenis Kelamin;

Laki-laki
Perempuan
<input type="radio" name="food"/> Laki-laki<br/><input type="radio" name="food"/> Perempuan

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

HTML password
Masukkan password

<input type="password" title="password" size="20"/>

Tombol bottom

<a href="http://url tujuan"><input type="submit" value="Nama tombol"/></a>

Membuat tabel

teks	teks
teks	teks

<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> Sumber I