Friday, October 1, 2010

Main HTML Lagi! :P

Tag <table> adalah salah satu tag yang memiliki atribut terbanyak. Dalam tag <table> juga terdapat 2 tag yang penting yaitu tag <tr></tr> untuk membuat baris dan tag <td></td> untuk membuat kolom. Tag <table> adalah tag penting dalam pendesainan sebuah tampilan situs. Jadi anda harus cukup menguasai tag ini

Mau tau? Coba lagi yook!
Buatlah file baru seperti biasa pada notepad :D

A. Latihan 1

<html>
<head>

<title><Atribut dari tag tabel</title>
</head>

<body>
<h1><font color="00FF00"> Membuat Tabel </font></h1>
<table border="1" bordercolor="black" bgcolor="white" cellpadding="5"
cellspacing="0" width="75%">
<tr >
<td bgcolor="00FFFF"> a </td>
<td bgcolor="00FFCC"> b </td>
<td bgcolor="00FF66"> c </td>
</tr>

<tr>
<td bgcolor="00CCFF"> d </td>
<td bgcolor="00CCCC"> e </td>
<td bgcolor="00CC66"> f </td>
</tr>

<tr>
<td bgcolor="0099FF"> g </td>
<td bgcolor="0099CC"> h </td>
<td bgcolor="009999"> i </td>
</tr>

<tr>
<td bgcolor="0066FF"> j </td>
<td bgcolor="0066CC"> k </td>
<td bgcolor="006699"> l </td>
</tr>

</table>
</body>
</html>

B. Latihan 2

<html>
<head>
<title>Atribut dari tag</title>
</head>
<body>
<p><b><font color="blue">Tabel sebagai bingkai dari paragraf</font></b></p>

<table border="1" cellpadding="8"
bgcolor="white" width="100%" bordercolor="black">

<tr>
<td>
<p>Tabel memiliki peranan sangat penting dalam tampilan sebuah situs web. Tanpa<br>
tabel desainer akan mengalami kesulitan dalam mendesain sebuah halaman<br>
web. </p>

<p>Kalau anda perhatikan website yang memiliki tampilan yang tersusun rapi.<br>
Sebenarnya itu adalah tabel, hanya saja atribut<br>
<font color="red"><b>border="0"</b></font>
sehingga tabel seakan tidak ada (transparan).<br>
</p>

<p>Situs rahasia-webmaster.com banyak menggunakan tabel sebagai bingkai<br>
paragraf. Perlu diingat tag-tag pada html dapat mengandung unsur yang sama.<br>
Contohnya di dalam sebuah tabel terdapat tabel lagi. Di bawah ini adalah tabel<br>
yang berada di dalam tabel utama.</p><br>

<p align="center">
<!-- tag <table> untuk tabel anak -->
<table border="1" style="border-collapse: collapse" bgcolor="white"
bordercolor="black" cellpadding="8" width="80%">
<tr bgcolor="yellow">
<td><b>Nama Barang</b></td>
<td><b>Harga Barang</b></td>
</tr>
<tr>
<td>Monitor</td><td>Rp. 500.000,-</td>
</tr>
<tr>
<td>CDRW</td><td>Rp. 245.000,-</td>
</tr><!--</table ini untuk menutup tabel anak -->
</table>
</tr>
</table>
</body>
</html>

Main HTML :O

HTML (Hyper Text Markup Language) adalah sekumpulan simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang dimaksudkan untuk menampilkan halaman pada web browser. Tag-tag tadi memberitahu browser bagaimana menampilkan halaman web dengan lengkap kepada pengguna.
Tag-tag HTML selalu diawali dengan <x> dan diakhiri dengan </x> dimana x tag HTML seperti b, i, u, dan sebagainnya.


Apa Saja yang Dibutuhkan?

* Text editor (notepad, vi, emacs, dsb)
* Web browser (internet explorer, firefox, google chrome, dsb)


Sebuah halaman website akan diapit oleh tag <html> ...... </html>. File-file HTML selalu berakhiran dengan ekstensi *.htm atau *.html. Jadi jika anda mengetik sebuah naskah dan menyimpannya dengan ekstensi *.html maka anda membuat file yang berformat HTML.
Beberapa contoh tag HTML :

<b>Ini tulisan tebal</b>
<i>Ini tulisan miring</i>
<u>Ini tulisan bergaris bawah</u>
Ini baris 1<br>Ini baris 2
Ini garis horizontal<hr>


Ada beberapa tag yang memiliki atribut di dalamnya, seperti tag <font>, <table>, <input> dan sebagainya. Pada tag font ia memiliki beberapa atribut diantaranya atribut color, size, face.
<fontcolor="red" face="Arial" size="12">Ini Font Arial berwarna merah dan berukuran 12pt</font>


note :
Jika anda lihat atribut color berada pada urutan pertama, yang kedua adalah face, dan yang terakhir adalah size. Anda tidak perlu memperdulikan urutan atribut tersebut karena browser hanya membaca isi dari properi, bukan urutannya :)

MARI MARI DICOBA YOK! :D (untuk mencoba file-file latihan HTML buatlah sebuah folder HTML di salah satu hard disk anda!)

A. LATIHAN Tag <p> ..... </p> (ketikkan ini pada text editor anda, simpan, lalu jalankan)

<html>

<head>
<title> Atribut Tag <p> </title>
</head>

<body bgcolor="ABCDEF">
<p align="left"><b>Teks ini berada di kiri</p>

<p align="center">Teks ini berada di tengah</p>

<p align="right">Teks ini berada di kanan</b></p>

<p align="justify">Paragraph ini bertipe justify. Dimana semua<br>
teks akan dibuat lurus sama dengan batas tepi halaman. Oh ya,<br>
tag &lt;p&gt;/p&gt; merupakan<br>
default atau bentuk baku tag tag &lt;p&gt;/p&gt ; dimana teks<br>
atau paragraf akan<br>
berformat rata kiri.<br>
Jika anda tidak memberi atribut

<i>align</i> pada tag
&lt;p&gt; maka browser akan menganggap rata kiri.</p>

<p><font face="Arial">Ini Font Arial</font></p>

<marquee><p><font face="Arial"><i>Ini Font Arial dan miring</i></font></p>
</marquee>

<p><font face="verdana" size="4" color="blue"><b>ini font verdana<br>
berukuran 12 pt berwarna biru sekaligus tebal</b></font>
</p><br>

<p align="center"><font face="Tahoma" color="red"><b>ini font tahoma<br>
berwarna<br>
merah, tebal dan berada di tengah</b></font>
</p><br>

<p align="center"><font face="Arial" color="red"> Ini Font Arial berwarna<br>
merah,

</font><font face="Verdana" color="blue"> sedangkan ini adalah font<br>
Verdana berwarna biru</font>

</p>
</body>

</html>

setelah selesai, simpan file tersebut dengan mengetik menu File - Save. Akan muncul kotak dialog Save, arahkan ke drive hard disk anda pada folder HTML yang telah anda buat. Pada isian file name isikan nama file yang anda inginkan, lalu berikan akhirkan .html pada akhir nama file tersebut.
(contohnya tag_p.html). Pastikan Save as Type adalah HTML Document. Untuk menjalankan anda cukup tekan tombol F5 maka akan muncul output dari kode anda.