Cara Membuat HTML Dengan Mudah Dan Simpel

Cara Membuat HTML - Hai sahabat Cara Buat Blog, apa kabarnya hari ini? semoga sehat semua ya. Kali ini kita akan membahas cara membuat HTML. Apa itu HTML? HTML adalah HyperText Markup Language, adalah bahasa interpretasi yang dipakai pada sebuah halaman web. HTML yang mendeskripsikan struktur halaman web yang ditulis dengan tag atau element yang yang mengapit konten atau teks didalamnya. Jadi jika Anda melihat sebuah website atau blog itu sebenarnya merupakan kode-kode HTML, jika ingin tahu silahkan klik kanan lalu klik view page source atau di address bar anda ketik view-source:alamat website (ganti tulisan alamat website warna biru dengan alamat web yang ingin Anda lihat), maka Anda akan melihat kode-kode HTML. Dengan cara ini Anda bisa melihat jeroan alias isi dalam website orang lain.

Baca juga: Panduan Cara Buat Blog Bagi Pemula

Sebenarnya untuk mendapatkan kode HTML sangat mudah kok, Anda tinggal buka blogger lalu posting seperti biasa, jika Anda mau lihat kode HTML maka tinggal klik HTML disebalh compose, untuk lebih jelasnya silahkan lihat gambar dibawah:

Gimana sudah jelas? sangat mudah bukan, jadi Anda bisa mencontek dari sana. Namun pada artikel ini saya akan berikan kode-kode HTML yang mungkin tidak terdapat di postingan blogger seperti contoh diatas atau bagi Anda yang tidak mempunyai akun blogger.

Cara Membuat HTML Dengan Mudah Dan Simpel

Membuat Teks miring (italic)
<i>teks anda</i>

Membuat Garis bawah pada teks (underline)
<u>teks anda</u>

Membuat Teks dicoret
<s>teks anda</s>

Membuat list numbering

1. Item 1
2. Item 2
3. Item 3

<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>

Membuat Daftar /bullet

• Item 1
• Item 2
• Item 3

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

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

Teks kanan

<div style="text-align: right;"> Teks Rata Kanan </div>

Teks di tengah
<center> teks anda</center>

Membuat teks berwarna
<span style="color:#1e90ff">teks anda</span>

Membuat Baris Baru
<br />

Membuat Paragrap
<p/>

Membuat Teks Berbayang / Shadow
Membuat Teks Berbayang / Shadow
<style type="text/css">b.drop-shadow { text-shadow: 2px 2px 3px red }</style><font color="yellow"><b class="drop-shadow"><b>teks anda</b></font></b>

garis putus-putus

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

garis titik-titik

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

garis dengan background

---

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

garis kiri

---

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

garis kanan

---

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

mengatur ukuran garis

---

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

garis warna
<hr style="color:red">

membuat garis

---

<hr/>

Link dengan tombol

<div style="text-align:center;"> <a href="http://URLanda"><input type="submit" value="teks link anda" /></a></div>

Membuat link dengan gambar
<a href="http://url tujuan"><img src ="http://url gambar anda"/></a>

Membuat link dengan teks atau anchor text
<a href="http://url tujuan">link teks anda</a>

Mengubah ukuran gambar
<img src="http://url-gambar" width="100" height="100">

Menampilkan gambar
<img src="http://url gambar anda"</a>

Membuat teks tebal atau bold
<b>teks anda</b>

Teks mesin ketik
<tt>teks anda</tt>

Teks _{di bawah} / subscript
_{Teks anda}

Teks ^{di atas} / superscript
^{teks anda}

Teks ukuran besar

<h1> teks</h1> ukuran kecil sampai h6

Teks ukuran besar + warna
<font color="orange" size="15px">Teks</font><br /> Jika 15 ditganti yang lebih besar maka tulisan akan lebih besar makin besar

Membuat teks dengan alinea baru / baris pertama agak menjorok kedalam

seperti ini contohnya

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

Teks dengan background warna
<span style="background-color: #ffc1e0;">Teks</span>

Teks area
<text*area cols="15" rows="2">isi teks area, hapus tanda *</text*area>

Teks area dengan huruf warna
<text*area name="code" cols="15" rows="1" style=";color:#ff00ff;">isi teks area. hapus tanda * </text*area>

Teks area dengan bingkai
<text*area name="code" cols="15" rows="1" style="border:5px inset #00ffff;">isi teks area. hapus tanda * </text*area>

Teks area, bingkai dan huruf warna
<text*area name="code" cols="15" rows="1" style="color:#ff1493;border:5px inset #9932cc;">isi teks area, hapus tanda * </text*area>

Teks area dengan background warna
<tex*tarea name="code" cols="15" rows="1" style="background:#ff6347;">isi teks area, hapus tanda *</tex*tarea>

Teks area, background warna dan menggunakan bingkai
<text*area name="code" cols="15" rows="1" style="background:#fa8072;border:5px inset #ff7f50;">isi teks area, hapus tanda * </tex*tarea>

Teks area, background, bingkai, huruf warna
<text*area name="code" cols="15" rows="1" style="background:#9932cc;color:#ff6347;border:5px inset #ff1493;">isi teks area, hapus tanda * </tex*tarea>

Teks area garis putus-putus atau dashed
<textarea name="code" cols="15" rows="1" style="background:#0f0;color:#295F00;border:5px #295F00 dashed;line-height:1.5em;padding:5px;">isi teks area, hapus tanda * </text*area>

Teks area garis titik-titik atau dotted
<text*area name="code" cols="15" rows="1" style="background:#ef0090;color:#FFEFF9;border:5px dotted #FFEFF9;line-height:1.5em;padding:5px;">isi teks area, hapus tanda * </text*area>

Tabel 1 kolom
<table width="100%" border="1"> <tr><td width="100%" bgcolor="green" align="center">teks</td></tr> </table>
Hasil

teks

Tabel 2 kolom
<table width="100%" border="1"> <tr><td width="50%" bgcolor="green" align="center">teks 1</td><td width="50%" bgcolor="green" align="center">teks 2</td></tr> </table>
Hasil

teks 1

teks 2

Tabel 3 kolom
<table width="100%" border="1"> <tr><td width="33%" bgcolor="green" align="center">teks 1</td><td width="34%" bgcolor="green" align="center">teks 2</td><td width="33%" bgcolor="green" align="center">teks 3</td></tr> </table>
Hasil

teks 1

teks 2

teks 3

Nah itu dia kode-kode HTML atau cara membuat HTML, jadi Anda tidak perlu hafal, tinggal nyontek aja guys. Semoga bermanfaat ya guys. Jangan lupa like dan share ya guys. Thanks

Share on Facebook

Share on Twitter

Share on Google+

Tags :

Related : Cara Membuat HTML Dengan Mudah Dan Simpel