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 !!!!
Artikel 
0 komentar:
Trimakasih atas kunjungan anda.. Blog ini Dofollow) Silahkan menaruh kritik dan saran pada kotak komentar ini, asal tidak SPAM dan bagi yang mencantumkan link, akan terhapus otomatis.