Sabtu, 07 November 2009

Mendesain Web Page: introducing-part 1

Tutorial kali ini akan menghadirkan bagaimana membuat halaman website langsung dari kode HTML. Hanya berbekal text editor seperti notepad Anda bisa mengaplikasikannya langsung.

Ga usah bertele-tele deh kita langsung aja, yah. Silakan ketikkan kode berikut ini pada notepad dan simpan dengan extensi html. Jangan lupa juga untuk membuat save as type menjadi all files.




<html>
<title>
</title>

<bodyv
</body>
<html>


Lalu coba buka file yang sudah Anda buat tadi. Hasilnya akan putih bersih. Tidak ada apa-apa seharusnya.

Ok mari kita lanjutkan. Tambahkan baris berikut pada diantara tag
<body> </body>
.


<table border="1" width="800px" align="center">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>


Dan lihat apa yang terjadi. Ada kotak-kotak yang berjajar tiga.


Biasanya ini dijadikan bagian untuk menaruh content. Mari kita cermati satu per satu.

border="1" --> lebar garis yang mengelilingi table bersekala 1.
width="800px" --> lebarnya 800px
align="center" --> dan posisinya pada tengah window browser.
&nbsp; --> akan memberikan space kosong

Biar lebih enak mengaturnya maka kita bisa pakai satu table utama dalam satu halaman dan sementara yang lain kita masukkan kedalamnnya. Sekarang kita akan membuat header dan footer yang biasanya diletakkan memanjang diatas dan dibawah bagian content yang sudah kita buat tadi.

Tabahkan saja kode ini diatas tag <tr>.
<tr><td>The Header</td></tr>


lalu untuk footer setelah tag </tr>.
<tr><td>Footer</td></tr>


Dan seharusnya kode yang Anda tuliskan menjadi seperti ini.


<html>
<title>
</title>

<body>
<table border="1" width="800px" align="center">
<tr><td colspan="3" width=800px height="150px"><img src="banner.jpg" width="800" height="150" alt="triksitus"></td></tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr><td colspan="3">Footer</td></tr>
</table>
</body>
<html>


Nanti akan keluar seperti ini.


bersambung ke bagian ke-2


Tidak ada komentar:

Posting Komentar