Kode-Kode HTML

Simpan Postingan

Pada kesempatan kali ini saya mau sediit berbagi tentang Kode HTML lengkap, untuk mempermudah kita dalam melakukan posting dengan HTML. semoga Kode-kode kecil ini memberi manfaat buat kita semua.

Berikut Kode-Kode HTML nya..

Membuat baris baru


<br/>

Membuat paragraf baru

<p>

Teks tebal
Teks disini
<b>Teks disini</b>

Teks ketik
Teks disini
<tt>Teks disini</tt>

Teks bercoret
<s>Teks disini<s>
<s>Teks disini<s>

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

Teks sup atas
^{Teks disini}
^{Teks disini}

Teks sub bawah
_{Teks disini}
_{Teks disini}

Teks rata kiri

Teks rata kiri

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

Teks rata kanan

Teks rata kanan

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

Teks rata kanan kiri

Teks disini

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

Teks berada di tengah

Teks disini

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

Teks baris pertama menjorok ke dalam

Teks disini

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

Teks menjorok ke dalam semua

Teks disini

<blockquote> Teks disini</blockquote>

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

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

Teks Berbayang
text berbayang



<style type="text/css">b.drop-shadow { text-shadow: 2px 2px 3px red }</style><font color="yellow"><b class="drop-shadow"><b>text berbayang</b></font></b><br /><br />

Membuat textarea
teks disini
<textarea cols="20" rows="2">teks disini


Text area huruf warna
Teks disini
<textarea name="code" rows="3" cols="20" style=";color:#ff0000;">Teks disini


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


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


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


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


Textarea dengan background dan bingkai serta huruf berwarna
Teks disini
<textarea name="code" rows="3" cols="20" style="background:#9932cc;color:#ff6347;border:5px inset #ff1493;">Teks disini


Textarea dashed
Teks disini
i


Textarea dotted
Teks disini
<textarea name="code" rows="3" cols="20" style="background:#0f0;color:#295F00;border:5px #295F00 dashed;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

Menampilkan Link dengan teks
nama link
<ul> <li>Daftar 1</li> <li>Daftar 2</li> <li>Daftar 3</li> </ul>

Menampilkan gambar gambar-1.jpg

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

Menampilkan URL gambar dengan Teks
nama link
<a href="http://url-gambar">nama link</a>

Menampilkan link dengan gambar
follow-this-blog.gif

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

Menampilkan link dengan gambar dan teks
beri-rating.png beri raring
teks
<a href="http://url-tujuan"><img src="http://url-gambar">teks</a>

Merubah ukuran gambar kode-html.png
semakin kecil angkanya maka semakin kecil pula gambarnya
<img src="http://url-gambar" width="100" height="100">

gambar-1.jpgMenampilkan gambar di samping post sebelah kiri
Teks disini panjang lebar
<img src="http://url-gambar" style="float:left;margin:0 3px 3px;">Teks disini panjang lebar

gambar-1.jpgMenampilkan gambar di samping post sebelah kanan
Teks disini panjang lebar
<img src="http://url-gambar" style="float:left;margin:0 3px 3px;">Teks disini

Membuat bingkai pada gambar
gambar-1.jpg

<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

Teks disini

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

Membuat background dengan bingkai:

Posisi di kanan

Teks disini

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

Posisi di tengah

Teks disini

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

Posisi di kiri

Teks disini

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

HTML checkbox

Hoby;
Sepak bola
Volly
Basket

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

TEKS

teksteks teksteks
<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, Semoga bermanfaat.. ! 

 

 

Html

Februari 10, 2016 • 0 komentar

Disclaimer: gambar, artikel ataupun video yang ada di web ini terkadang berasal dari berbagai sumber media lain. Hak Cipta sepenuhnya dipegang oleh sumber tersebut. Jika ada masalah terkait hal ini, Anda dapat menghubungi kami di halaman ini.