just about sites: making web page

Minggu, 08 November 2009

Mendesain Web Page - Part 2 : header and footer

Setelah kita membuat kolom-kolom untuk membagi halaman web kita. Sekarang tinggal buat isinya. Kita mulai dari atas dulu saja, ya dari header.

Header
Biasanya header diposisikan untuk menampilkan banner situs atau gambar sebagai ilustrasi yang sesuai dengan content yang disajikan atau hanya sebagai pemanis agar tampilan secara keseluruhan tampak menarik.

Biar praktis Anda bisa memakai banner yang sudah saya siapkan disini. Dan letakkan satu folder dengan file html yang kita buat ini.

Kita akan buat header dengan ukuran 800 x 150px. Tambahkan kode berikut pada tag <td> dibawah <table>.


height="150px"

Kode diatas untuk menyesuaikan ukuran kolom dengan banner.

Lalu untuk banner ganti text The header dengan


<img src="banner.jpg" width="800" height="150" alt="triksitus">.

img src="banner.jpg" --> menunjukkan alamat dan nama gambar.
alt="triksitus" --> text yang tampil bila browser tidak menampilkan gambar.

Footer
Habis header kita turun ke footer. Biasanya menjadi tempat untuk meletakkan informasi singkat seperti navigasi tambahan, copyright, disclaimer dan lain sebaginya.

Kita mulai dulu dari background. Kalau mau yang cepet Anda bisa pakai background yang sudah saya buatkan disini.

Beri kode berikut setelah <td colspan="3" yang paling bawah.


background="footer-bg.jpg" height="64px"

Berikut tampilan setelah Anda menambahkan kode itu.

background="footer-bg.jpg" --> menujukkan alamat dan nama dari gambar background.

Text Pada Footer
Ganti Footer dengan copyright© 2009 triksitus, misalnya atau Anda bisa menggantinya dengan text yang lain. Dan, tambahkan setelah background="footer-bg.jpg" height="64px", kode berikut:

valign="top"

Untuk membuat text yang berada pada footer diatas.

Dan, kode yang sudah kita buat tadi seperti ini.

<html>
<title>
</title>

<body>
<table border="1" width="800px" align="center">
<tr><td colspan="3" 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" background="footer-bg.jpg" height="64px" valign="top">copyright© 2009 triksitus</td></tr>
</table>
</body>
<html>

Tampilannya menjadi seperti berikut

bersambung ke part 3

Read More......

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

Read More......

just about sites

Minggu, 08 November 2009

Mendesain Web Page - Part 2 : header and footer

Sabtu, 07 November 2009

Mendesain Web Page: introducing-part 1

cbox

follower

Link Sahabat

Statistik