"Berbagi hal yang bermanfaat"

Wednesday, April 21, 2010

BELAJAR MEMBUAT HOMEPAGE SEDERHANA



Menggunakan Notepad Sebagai Editor Html

Salah satu program sederhana yang dapat digunakan untuk menulis HTML adalah Notepad.
Berikut adalah langkah-langkahnya :

1.   Aktifkan Notepad dengan cara klik Start>All Program>Accessories>Notepad
2.   Setelah aktif program Notepad, mulailah mengetikkan kode-kode HTML yang diinginkan.
3.   Simpan dengan ekstention html contoh Latihan1.html
4.   Buka file yang telah ditulis dengan menggunakan salah satu Browser seperti IE, Netscape, Opera, Mozilla. Maka hasil penulisan kode-kode HTML tadi akan diterjemahkan dalam tampilan halaman web.

ÿ     Form Html

Format dokumen HTML memiliki format dasar sebagai berikut :

<HTML>
<HEAD>
<TITLE> judul dokumen html </TITLE>
</HEAD>

<BODY>
Isi dokumen HTML
</BODY>

</HTML>

ÿ     Halaman Web Pertamaku

Bukalah program NotePad, dan ketikkan kode HTML berikut ini :

<HTML>
<HEAD>
<TITLE> Web Pertamaku </TITLE>
</HEAD>

<BODY>
Hello Word !!
Make Website it’s easy !!!
</BODY>

</HTML>
Simpan kode diatas dengan nama file Web Pertamaku.html

Kemudian bukalah file tersebut dengan web browser yang ada di komputer Anda, dengan cara klik menu File > Open tentukan lokasi penyimpanan file kemudian klik OK atau cara mudah adalah dengan klik 2 kali file Web Pertamaku.html maka secara otomatis file tersebut akan aktif di program browser komputer anda.

Nah tampilan akan seperti ini




Mudah Bukan !!!

ÿ     Merubah Ukuran Huruf

Merubah ukuran huruf dapat dilakukan dengan beberapa cara, antara lain :

1.   Tag Font Size
     
      <FONT SIZE=”1”>ukuran 1.</FONT>
<FONT SIZE=”2”>ukuran 2.</FONT>
<FONT SIZE=”3”>ukuran 3.</FONT>
<FONT SIZE=”4”>ukuran 4.</FONT>
<FONT SIZE=”5”>ukuran 5.</FONT>
<FONT SIZE=”6”>ukuran 6.</FONT>
<FONT SIZE=”7”>ukuran 7.</FONT>
2.   Tag Heading
     
      <H1> menggunakan Heading 1 </H1>
      <H2> menggunakan Heading 2 </H2>
      <H3> menggunakan Heading 3 </H3>
      <H4> menggunakan Heading 4 </H4>
      <H5> menggunakan Heading 5 </H5>
      <H6> menggunakan Heading 6 </H6>


ÿ     Menggunakan Beberapa Tag untuk Format Tampilan

Beberapa tag untuk Teks adalah :

<B> membuat huruf tebal. </B>
<I>   membuat huruf miring. </I>
<U> membuat garis bawah. </U>
<FONT SIZE=value> merubah ukuran huruf. </FONT>
<FONT COLOR=”value”> merubah warna huruf. </FONT>
<FONT FACE=”value”> merubah jenis huruf. </FONT>

Contoh :

<FONT SIZE=”4” FACE=”Comic Sans MS” COLOR=”green”> <B> Tampilan huruf tebal, font Comic Sans MS, berukuran 4, berwarna hijau. </B></FONT>

ÿ     Membuat Frame dengan HTML

Untuk membuat tampilan Homepage terbagi dalam beberapa bagian dalam satu halaman dengan setiap bagian menampilkan file yang berbeda maka kita dapat menggunakan tag Frame.

Misal kita akan mengatur tampilan Homepage seperti contoh di bawah ini :

File : “Judul.HTML”
File : “Daftar Isi.HTML”
File : “Isi.HTML”

Untuk membuat tampilan home page seperti kerangka diatas maka kita harus memiliki 4 buah file HTML yang terdiri dari :
1.   File Judul.HTML
2.   File Daftar Isi.HTML
3.   File Isi.HTML
4.   File Induk.HTML (File yag berisi tag Frame dan tag Frame Set untuk menyatukan 3 file di atas.

Catatan : Semua file harus berada dalam 1 folder penyimpanan agar dapat dieksekusi bersamaan begitu juga jika ada gambar.

Nah mari kita coba membuatnya !!

1.   Buatlah File Judul.HTML dengan kode sebagai berikut :

<HTML>
<HEAD></HEAD>

<BODY BGCOLOR=”Blue”>
<FONT SIZE=7 COLOR=”Red”> <Center> <B> VC-Com HOMEPAGE </B>
</CENTER></FONT>
</BODY>

</HTML>

Jika dijalankan akan tampil sebagai berikut :


2.   Buatlah File Daftar Isi.HTML dengan kode sebagai berikut :

<HTML>
<HEAD></HEAD>

<BODY BGCOLOR="red">
<FONT SIZE=4 color="blue"> <B> MENU : </B> <BR>
Kursus<BR>
Servis<BR>
Percetakan<BR>
</FONT>
</BODY>

</HTML>

Jika dijalankan akan tampil sebagai berikut :

 
3.   Buatlah File Isi.HTML dengan kode sebagai berikut :

<HTML>
<HEAD></HEAD>

<BODY BGCOLOR="yellow">
<FONT SIZE=3 color="blue"> <B> PROFIL VC-Com : </B> <BR>
<br>
VC-Com adalah lembaga kursus komputer privat yang berdiri  sejak tahun 2005 menyediakan berbagai layanan, antara lain : Kursus,  Servis, Percetakan
</FONT>
</BODY>

</HTML>

Jika dijalankan akan tampil sebagai berikut :


Nah, setelah selesai membuat 3 file sekarang kita buat 1 file lagi simpan dengan nama induk.html (ingat penulisan nama file besar kecilnya huruf harus sesuai) dengan kode sebagai berikut :


Keterangan :
Tag Frameset Rows untuk membagi halaman menjadi 2 baris atau lebih (untuk membagi 3 tinggal ditambah saja %-nya contoh (20%,40%,60%)
Tag Frameset Cols untuk membagi halaman menjadi 2 kolom atau lebih.
Tag Frame SRC untuk menentukan isian file yang akan ditampilkan pada kolom / baris
Tag Br untuk pindah baris baru

Jika dijalankan akan tampil sebagai berikut :


Mudah bukan !!!!

Untuk membuat animasi dan mengelola halaman homepage supaya lebih menarik tunggu coretanku selanjutnya, moga bermanfaat !!!!

Referensi :
Syamsuardi, TIK 3, Penerbit Erlangga KBK 2004
Indri, Modul Belajar Homepage VC-Com Penedagandor. 2009

0 comment:

Post a Comment

Berikan komentar yang membangun, cantumkan identitas Anda (account e-mail) agar kami dapat follow up apa yang Anda inginkan ...
Terima Kasih atas komentar Anda !