just about sites: belajar html

Tampilkan postingan dengan label belajar html. Tampilkan semua postingan

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

Senin, 20 April 2009

Komentar dalam HTML

Ada kalanya kita tidak menginginkan bagian dari baris kode yang kita tulis tidak dieksekusi atau dijalankan. Biasanya sebagai tanda untuk mempermudah dalam mengedit dikemudian hari.

Bisa Anda bayangkan misalnya ada ratusan atau bahkan mungkin ribuan baris kode yang harus dibuat. Dan kita akan melakukan perubahan kecil disalah satu atau beberapa baris itu. Rasanya kurang efisien bila kita melakukan pengecekan satu per satu.

Untuk itulah komentar diperlukan. Komentar akan tampak ketika kita melihat kode sumber. Tapi tidak akan memberi pengaruh apa-apa ketika kode-kode itu dieksekusi.

Dalam html cara untuk memberi komentar adalah dengan diawali tanda .

Sebagai contoh :


<!-- komentar mulai -->

atau


<!-- komentar yang
  agak panjang -->

Selamat berkomentar...
Read More......

Sabtu, 18 April 2009

komponen dasar html

Tutorial kali ini kita akan membuat halaman web yang paling mendasar.

Tag <br>
Kita akan menggunakan tag <br> salah satu tag dalam html yang tidak perlu tag penutup. Fungsinya untuk memberi jarak satu baris. Coba deh sintak berikut. Ketikkan saja pada Notepad atau editor kesukaan Anda dan simpan dengan nama file terserah Anda yang penting berekstensi .html, contohnya coba1.html.


Ini kata-kata yang<br>berada dibawah.
Ini kata-kata yang<br>
berada dibawah.

Maka akan terlihat seperti berikut :


Ini kata-kata yang
berada dibawah.

Membuat paragraf
Untuk menampilkan text dengan paragraf maka diperlukan tag <p> seperti berikut


<p>ini paragraf</p>
<p>dan ini paragraf yang lain</p>

maka akan tertampil seperti berikut ini


ini paragraf
dan ini paragraf yang lain

Jika kita perhatikan secara otomatis tag <p> akan memberikan jarak antar paragraf. Yang berarti kata-kata yang berada dalam tag <p> merupakan satu paragraf. Jadi kita tidak perlu menggunakan tag <br> untuk menampilkan paragraf.

Judul
Cara paling mudah untuk menampilkan text sebagai judul adalah dengan menggunakan tag judul.

Seperti dibawah ini


<h1>Judul 1</h1>
<h2>Judul 2</h2>
<h3>Judul 3</h3>

Ada 6 buah tag untuk judul dengan ukuran yang berbeda-beda. Semakin besar angka yangmengiringi h <h..> maka semakin kecil ukuran hurufnya.

Membuat link.
Link merupakan jantung dari internet. Semua halaman web terhubung satu dengan yang lain melalui link ini. Untuk membuatnya maka kita menggunkan tag <a href=""> </a>.

Misalnya kita ingin membuat link dengan kata tutorial html yang mengarah ke http://triksitus.blogspot.com maka sintaknya menjadi seperti ini.


<a href="http://triksitus.blogspot.com">tutorial html</a>

Menampilkan gambar.
Untuk memanpilkan gambar sebenarnya kita hanya tinggal menyebutkan tempat dimana gambar itu disimpan. Nah, sintaknya jadi kayak begini.


<img scr="gambar.jpg" width="150" height="200">

Gimana mudah bukan..
Read More......

Kamis, 02 April 2009

Pengertian HTML

HTML merupakan bahasa markup. Bahasa dimana untuk menuliskan suatu maksud harus menyertakan tag pengiring. Jadi misalnya kita ingin menuliskan text bercetak tebal maka harus diringi dengan <b> text yang dicetak tebal </b>.

Walaupun terkadang waktu kita lihat dari sebuah website, misalnya (kalo di firefox lewat view>page source) terlihat sangat rumit. Tapi sebenarnya kalo diperhatikan intinya cuman seperti ini


 <html>
      <head>
      </head>

      <body>
      </body>
 </html>

Semua yang ada diantara tag <html> dan </html> merupakan kode HTML. Yang berada diantara tag <body> dan </body> adalah yang kita lihat sebagai sebuah halaman web. Yup, jadi yang banyak dikerjain nanti ya diantara tag body itu.

Hampir semua tag dalam HTML memiliki tag pembuka seperti <html> dam tag penutup </html>.

Oya, karena tag HTML tidak case sensitive maka antara <html> dan <HTML> memberikan efek yang sama.

Tag-tag dalam HTML juga memiliki atribut. Atribut berfungsi untuk memberikan efek tertentu terhadap yang diapit oleh tag tersebut.

<body bgcolor="red">

Tag body diatas diberi atribut bgcolor yang menyebabkan warna background menjadi merah.

ok, have fun with HTML ^^
Read More......

just about sites