Belajar Membuat HTML

Pada bab ini kita akan belajar membuat paragaf, heading, format text dan bentuknya.

1. Membuat Paragraf
Silahkan ketik di notepad seperti dibawah ini:

<html>
<head><title>Menambah Text dan Formatnya</title></head>
<body>
Ini baris pertama<p>
Dan ini baris ke tiga<br>
Kalau ini baris ke empat<br>
</body>
</html>

Hasilnya silahkan di lihat disini.

  • <p> artinya pindah paragraf atau pindah dua baris

<i> dan </i> adalah text yang digaris bawahi.

  • <br> artinya pindah baris
  • 2. Membuat Heading
    Silahkan ketik diantara <body> dan </body> seperti dibawah ini: <h1>Heading Pertama</h1>
    <h2>Heading Kedua</h2>
    <h3>Heading Ketiga</h3>
    <h4>Heading Keempat</h4>
    <h5>Heading Kelima</h5>
    <h6>Heading Keenam</h6>

    Hasilnya silahkan di lihat disini.

  • Terlihat bahwa besarnya tulisan tiap heading berbeda-beda.
    3. Format Text dan Bentuknya
    Silahkan ketik diantara <body> dan </body> seperti dibawah ini: <style type=”text/css”>
    body {font-family:”Arial”;font-size:”12pt”;color:blue}
    </style>
    <body>
    Ini <b><i><u>halaman</u></i></b> web saya
    </body>

    Hasilnya silahkan di lihat disini.

  • <style> dan </style> adalah bentuk, ukuran dan warna text.
  • <b> dan </b> adalah text yang ditebalkan.
  • <i> dan </i> adalah text yang dimiringkan.

Tabel digunakan untuk menampilkan angka-angka dalam baris dan kolom, pada bab ini kita akan belajar bagaimana membuat tabel.

1. Membuat Tabel Sederhana
Silahkan ketik diantara <body> dan </body> seperti dibawah ini:

<table>
<tr><th>Kolom 1</th><th>Kolom 2</th></tr>
<tr><td>Baris 2</td><td>Baris 2</td></tr>
<tr><td>Baris 3</td><td>Baris 3</td></tr>
</table>

Hasilnya silahkan di lihat disini.

  • <tr> definisi baris horisontal
  • <td> definisi data sel dalam satu baris
  • <th> definisi data sel pada judul tabel
    2. Membuat Tabel Dengan Formatnya
    Silahkan ketik diantara <head> dan </head> seperti dibawah ini: <style type=”text/css”>
    th {font-family:”Arial”;font-size:”12pt”;color:red}
    td {font-family:”Tahoma”;font-size:”12pt”;color:blue}
    </style>

    Silahkan ketik diantara <body> dan </body> seperti dibawah ini:

    <table with=”50%” border=”1″ rules=ALL>
    <tr><th bgcolor=”silver”>Kolom 1</th><th bgcolor=”silver”>Kolom 2</th></tr>
    <tr><td align=”center”>Baris 2</td><td align=”center”>Baris 2</td></tr>
    <tr><td align=”center”>Baris 3</td><td align=”center”>Baris 3</td></tr>
    </table>

    Hasilnya silahkan di lihat disini.

    3. Membuat Tabel Lanjutan
    Silahkan ketik diantara <head> dan </head> seperti dibawah ini:

    <style type=”text/css”>
    th {font-family:”Arial”;font-size:”12pt”;color:red}
    td {font-family:”Tahoma”;font-size:”12pt”;color:blue}
    </style>

    Silahkan ketik diantara <body> dan </body> seperti dibawah ini:

    <table with=”100%” border=”1″ rules=ALL>
    <tr><th bgcolor=”silver” colspan=”2″>Kombinasi kolom 1 dan kolom 2.</th></tr>
    <tr><td>Baris 2</td><td rowspan=”2″>Kombinasi baris 2 dan baris 3.</td></tr>
    <tr><td>Baris 3</td></tr>
    </table>

    Hasilnya silahkan di lihat disini.

    Mudah sekali khan? Sekarang buka Bab 4

  • Pada bab ini kita akan membahas cara menghubungkan text atau web dokumen yang kita buat ke lokasi tertentu atau sering disebut dengan Hyperlinks.
    Kita dapat menghubungkan text kita dengan file dan email lainnya, bisa juga kita hubungkan dalam halaman yang sama ataupun halaman yang berbeda.

    1. Menghubungkan Text kita dengan file lain dan email lain
    Silahkan ketik diantara <body> dan </body> seperti dibawah ini:

    Silahkan <a href=”hal1.html”>klik disini </a>untuk membuka halaman pertama.<br>
    Silahkan <a href=”http://www.geocities.com/riyanto_its/html.html”>klik disini </a>untuk membuka web belajar HTML.<br>
    Silahkan <a href=”mailto:sigit@ece.ibaraki-ct.ac.jp”>klik disini </a>untuk mengirim email ke Sigit.<br>

    Hasilnya silahkan di lihat disini.

    2. Menghubungkan Text Pada Halaman Yang Sama
    Silahkan ketik diantara <body> dan </body> seperti dibawah ini:

    <h2>Klik tulisan bergaris untuk membaca text secara penuh</h2><br>
    <a href=”#BS”><i>Paragraf Satu</i></a><br>
    <a href=”#BD”><i>Paragraf Dua</i></a><br>
    <h1>Membaca Artikel Penuh>/h1><br>
    <h2><a name=”BS”>Paragraf Satu</a></h2><br>
    Ini tulisan pertama.<p>
    Ini tulisan kedua.<p>
    Ini tulisan ketiga.<p>
    Ini tulisan keempat.<p>
    Ini tulisan kelima.<p>
    Ini tulisan keenam.<p>
    Ini tulisan ketujuh.<p>
    <h2><a name=”BD”>Paragraf Dua</a></h2><br>
    Ini tulisan pertama.<p>
    Ini tulisan kedua.<p>
    Ini tulisan ketiga.<p>
    Ini tulisan keempat.<p>
    Ini tulisan kelima.<p>
    Ini tulisan keenam.<p>
    Ini tulisan ketujuh.<p>

    Hasilnya silahkan di lihat disini.

    3. Menghubungkan Text Pada Halaman Lain
    Silahkan ketik diantara <body> dan </body> seperti dibawah ini:

    <h2>Klik tulisan bergaris untuk membaca text secara penuh</h2><br>
    <a href=”para1.html”><i>Paragraf Satu</i></a><br>
    <a href=”para2.html”><i>Paragraf Dua</i></a><br>

    Hasilnya silahkan di lihat disini.

    semoga bermanfaat..

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s