Kode-kode dasar HTML

Jumpa lagi sobat bloggers, kali ini ane pengen sharing tentang Kode-kode dasar HTML. Langsung aja deh sobat bloggers. Di bawah ini ada beberapa kode-kode yg digunakan untuk mewakili pemformatan text maupun mebuat  object dalam halaman sobat, meskipun sekarang sudah banyak pembuatan halaman HTML dengan software instant seperti Dreamweaver dll.




Membuat Center, gunakan kode : 
<p align="center">Belajar</p> 
hasilnya seperti:
Belajar

Membuat Posisi kekanan gunakan kode : 
<p align="right">Belajar</p> 
hasilnya seperti :
Belajar

Membuat Posisi kekiri gunakan kode: 
<p align="left">Belajar</p> 
hasilnya seperti :
Belajar

Membuat Huruf Tebal gunakan kode: 
<b>Belajar</b> 
hasilnya seperti :
Belajar

Membuat Huruf Garis Bawah gunakan kode : 
<u>Belajar</u> 
hasilnya seperti :
Belajar

Membuat Huruf bercetak Miring gunakan kode : 
<i>Belajar</i> 
hasilnya seperti :
Belajar

Membuat Kombinasi huruf tebal,miring,garisbawah, gunakan kode :
<b><i><u>Belajar</u></i></b> 
hasilnya seperti :
Belajar

Membuat Huruf tebal strong gunakan kode : 
<srong>Belajar</strong> 
hasilnya seperti :
Belajar

Membuat Huruf Hidden gunakan kode : 
<span style="visibility: hidden">Belajar</span> 
hasilnya seperti :

Namanya juga hidden..ya..ga keliatan.. (^^,)v

Membuat Huruf Besar semua (uppercase) gunakan kode :
<span style="text-transform: uppercase">Belajar</span> 
hasilnya seperti :
Belajar

Membuat Huruf Small caps gunakan kode:
<span style="font-variant: small-caps">Belajar</span> 
hasilnya seperti ini:
Belajar

Membuat Huruf Subscribe / kecil di bawah gunakan kode:
<p>4<sub>2</sub></p>
hasilnya seperti ini:
42

Membuat Huruf Superscribe / pangkat gunakan kode:
<p>4<sup>2</sup></p> 
hasilnya seperti ini:
42

Membuat Huruf bergaris atas gunakan kode:
<span style="text-decoration: overline">Belajar</span> 
hasilnya seperti ini:
Belajar mengganti huruf

Membuat Huruf bergaris tengah gunakan kode:
<strike>Belajar</strike> 
hasilnya seperti ini:
Belajar

Menentukan jenis huruf gunakan kode:
<p><font-family="Arial" >Belajar</font></p> 
hasilnya seperti ini:
Belajar

Menentukan ukuran huruf gunakan kode:
<p><font-size="3" >Belajar</font></p> 
hasilnya seperti ini:
Belajar

Menentukan warna huruf gunakan kode:
<p style="color: green; >Belajar</p> hasilnya seperti ini:
Belajar

Membuat bullet dot bolong gunakan kode:
<ul type="circle">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:
  • DOT 1
  • DOT 2
  • DOT 3

Membuat bullet dot kotak gunakan kode:
<ul type="square">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:
  • DOT 1
  • DOT 2
  • DOT 3

Membuat bullet dot bulat gunakan kode:
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:
  • DOT 1
  • DOT 2
  • DOT 3

Mengatur posisi bullet gunakan kode:
<blockquote>
<blockquote>
<blockquote>
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
</blockquote>
</blockquote>
</blockquote>
hasilnya seperti ini:
  • DOT 1
  • DOT 2
  • DOT 3

Menentukan kombinasi warna,jenis,dan ukuran huruf gunakan kode:
<p><font style="color: green; font-family: courier new; font-size: 15px;" >Belajar</font></p>
hasilnya seperti ini:
Belajar

Membuat tabel border solid gunakan kode:
<table border="1" width="200">
<tr>
<td style="border-style: solid">Text</td>
</tr>
</table>
hasilnya seperti :


Text



Membuat tabel border dot gunakan kode:
<table border="1" width="200"
style="border-style: dotted">
<tr>
<td border="2" style="border-style:
dotted">Text</td>
</tr>
</table>
hasilnya seperti ini:


Text



Membuat tabel border dashed gunakan kode:
<table border="1" width="200" style="border-style: dashed">
<tr>
<td style="border-style: dashed">Text</td>
</tr>
</table>
hasilnya seperti ini:


Text



Membuat tabel border groove gunakan kode:
<table border="1" width="200" style="border-style: groove">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:


Text



Membuat tabel border Ridge gunakan kode:
<table border="1" width="200" style="border-style: ridge">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:


Text



Membuat tabel border Insert gunakan kode:
<table border="1" width="200" style="border-style: inset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:


Text



Membuat tabel border Outset gunakan kode:
<table border="1" width="200" style="border-style: outset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text



Membuat Tabel Biasa gunakan kode :
<table border="1"width="200"><td>Text</td></table>
hasilnya seperti:


Text



Membuat Tabel berwarna gunakan kode :
<table border="1"width="200"bgcolor="green"><td>Text</td></tabel> 
hasilnya seperti :


Text



Membuat Tabel berwarna tak berbingkai gunakan kode :
<table border="0"width="200"bgcolor="blue"><td>Text</td></tabel> 
hasilnya seperti:


Text



Untuk kode-kode HTML yang lain anda bisa mengulik lewat software-software web designer atau situs-situs penyedia layanan HTML.

**Tabel-tabel diatas,akan terlihat sempurna jika dibuka pada browser IE (Internet Explorer)

Share:

5 comments

  1. mantab gan,
    tapi cara buat menu navigasi drop down seperti punya mas bro gmana ya, ;p

    ReplyDelete
  2. @Didi Wirawanmksud mas yg mana y? ;n
    seperti yg warna orange di sebelah kanan itukah?:h

    ReplyDelete
  3. maksud nya yang dibawah header, seperti :

    Home
    My Shopping Center »
    Downloads
    Tips / Triks »
    Sekilas Info
    dll.
    nah, itu bagaimana sob. ane udah nyari tapi nggak berhasil. mohon dibantu ;p



    ReplyDelete
  4. @Didi WirawanOwh yg itu...
    sebenernya itu saya dpt dari bawaan template yg kemudian saya edit sedikit sih, emang sih kebetulan saya juga ga terpikir utk posting ttg hal itu krn saya pikir udah bnyak yg pada tahu,hehehe...
    coba ente googling sob dengan keyword "Membuat Menu Drop Down pada Blog" pasti buanyak bgt blog yg membahas soal itu,nah tinggal selerea ente mau pakai yg enis dan modelnya kya apa ;b
    semoga membantu sob jwaban dr saya :d

    ReplyDelete