Kode-kode dasar HTML

Wrote by 5 Comments

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)

Tags:

Share:

5 comments

  1. Anonymous28 December 2012 at 16:42

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

    ReplyDelete
  2. Unknown28 December 2012 at 23:59

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

    ReplyDelete
  3. Anonymous29 December 2012 at 12:40

    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. Unknown29 December 2012 at 23:53

    @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
  5. Anonymous2 January 2013 at 13:54

    oke sob. sudah ketemu :w

    ReplyDelete