TUTORIAL KODE HTML

KODE-KODE DASAR HTML

Dalam HTML seperti pemformatan text berupa tebal,miring,garis bawah,membuat tabel,dll,dapat di lakukan dengan kode-kode.

Di bawah ini ada beberapa kode-kode untuk mewakili pemformatan text maupun mebuat berbagai object dalam halaman anda,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 :

Belajar

Namanya juga hidden..ya..ga keliatan..

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:

Membuat Huruf Superscribe / pangkat gunakan kode:

<p>4<sup>2</sup></p> hasilnya seperti ini:

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><font-color=”green” >Belajar</font></p> hasilnya seperti ini:

Belajar

Membuat bullet dot bolong 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

Membuat bullet dot kotak 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

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

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

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: