Untuk mempermantap keterampilan anda dalam membuat link sekaligus mengulang semua pelajaran yang telah lalu, kita akan mencoba membuat halaman web. Anggaplah ini adalah proyek pembuatan web anda yang pertama.
Bukalah program
Notepad anda. Klik menu
File lalu
Save. Pada kotak dialog yang muncul masuklah ke folder
My Documents lalu folder
My Webs. Cara masuknya, klik ganda (klik dua kali dengan cepat) folder yang bersangkutan. Setelah anda berada dalam folder
My Webs, buatlah folder baru dengan cara mengklik ikon
create new folder yang berada pada ikon ketiga. Maka akan muncul folder
New Folder, silakan anda ganti namanya misalnya
web1. Setelah itu pada kotak
Save As Type, ganti isinya dengan
All File. Lalu isi kotak
File Name dengan nama yang anda sukai misalnya
home.htm. Klik
Save.
Pada file dengan nama
home.htm ini, buatlah halaman web dengan judul (
title)
Halaman Pertama. Kemudian isilah halaman tersebut sedemikian rupa sehingga dalam browser tampak seperti ini:
HAL. 1 | HAL. 2 | HAL. 3 Selamat Datang di Proyek Pertama !Judul di atas merupakan header level kedua yang diletakkan di tengah. Dalam proyek pertama ini saya akan berlatih membuat halaman web yang sangat-sangat sederhana. Halaman web ini akan saya isi dengan beberapa format penulisan halaman web yang telah saya pelajari. Dengan demikian saya bisa memperlancar dan mempermantap keterampilan saya membuat halaman web. Amin...!
Ini Header Level KetigaMasih ingat, kan cara membuat paragraf? Suatu paragraf bisa tidak diberi tag penutup. Yang penting anda ingat, bila akan membuat lagi paragraf baru, tulis tag pembuka paragraf. Sedangkan untuk membuat baris, ada tag tersendiri.
Dalam paragraf ini anda akan mengulangi pelajaran membuat baris, seperti di bawah ini:
Klik di sini untuk melihat Daftar Definisi.
Untuk melihat Kesan dan Pesan, klik di sini.
Ini paragraf baru. Perlu anda ketahui bahwa halaman web yang tampak dalam browser merupakan beberapa baris kalimat, bila dibuat dalam kode HTML, bisa saja ditulis dalam satu baris saja. Yang penting untuk setiap baris baru harus diawali dengan tag <BR>. Ngerti maksudnya?
Kembali Keatas | Selanjutnya |
Sekarang kita akan membuat halaman web selanjutnya dengan judul
Halaman Kedua dengan tampilan dalam browser sebagai berikut:
HAL. 1 | HAL. 2 | HAL. 3 Mengutak-atik FontDalam halaman ini, kita menggunakan warna background kuning dengan font Comic Sans ukuran 2 warna biru sebagai font default. Masih ingat, kan cara pengaturannya?
Daftar Definisi- Internet
- Singkatan dari interconnection network atau hubungan antar jaringan. Internet ialah jaringan komputer global dan merupakan jaringan komputer yang terbesar di dunia karena mampu menghubungkan seluruh komputer yang ada di dunia.
- HTTP
- Singkatan dari Hypertext Transfer Protocol adalah salah satu protokol bahasa yang digunakan untuk berkomunikasi antar server komputer dalam internet. Protokol bahasa yang lain dalam internet misalnya: Telnet, News, Gropher, FTP.
- URL
- Singkatan dari Uniform Resource Locator adalah standar pegalamatan sebuah file di Internet yang dirancang khusus untuk digunakan dengan browser WWW seperti Netscape, Internet Explorer, Opera, dan lain-lain.
Bila anda ingin mencari terjemahan kata-kata Inggris ke Indonesia atau Indonesia ke Inggris, pergilah ke situs KamusWeb. Kembali Keatas | Selanjutnya |
Simpanlah halaman di atas dengan nama misalnya:
kuning.htm. Kemudian buatlah satu halaman web lagi dengan titel
Halaman Ketiga seperti berikut:
HAL. 1 | HAL. 2 | HAL. 3 Inilah Biodataku ....- Nama
- Tempat/tanggal lahir
- Nama orang tua
- Ayah
- Ibu
- Pendidikan
- Sekolah dasar
- Sekolah menengah pertama
- Sekolah menengah atas
- Perguruan tinggi
- Pekerjaan
- Alamat
- Hobi
Pesan dan KesanMembuat website sebenarnya gampang-gampang susah. Gampang karena kita tinggal mengganti kalimat-kalimat yang diletakkan diantara tag-tag. Kalau mau lebih mudah lagi, ambil saja halaman web yang sudah jadi (pilih yang paling sederhana). Buka source code-nya, kemudian edit lah isinya sesuai keinginan anda. Susahnya bila ingin membuat halaman web yang rumit dan dinamis. Untuk itu kita perlu belajar lebih banyak dan lebih giat lagi ....!
Kembali Keatas |
Simpanlah halaman ketiga di atas dengan nama misalnya:
biodata.htm. Sekarang kita telah mempunyai tiga buah file HTML yaitu
home.htm,
kuning.htm dan
biodata.htm. Tugas kita selanjutnya adalah memasukkan link-link ke dalam setiap halaman web tersebut.
Dalam setiap halaman, di bagian atasnya terdapat link-link berikut:
HAL. 1,
HAL. 2 dan
HAL. 3. Masing-masing link menuju ke file
home.htm,
kuning.htm dan
biodata.htm.
<P ALIGN="RIGHT"><A HREF="home.htm">HAL. 1</A> | <A HREF="kuning.htm">HAL. 2</A> | <A HREF="biodata.htm">HAL. 3</A> |
Juga dalam setiap halaman, terdapat link
Kembali Keatas dan
Selanjutnya. Teks
Kembali Keatas merupakan link yang membawa kita ke bagian paling atas dari setiap halaman. Untuk itu sebelumnya kita harus memberi nama pada baris tulisan
HAL. 1 | HAL. 2 | HAL. 3 yang merupakan baris teratas dari setiap halaman.
<HTML><HEAD><TITLE>Halaman Pertama</TITLE></HEAD> <A NAME="atas"></A><P ALIGN="RIGHT"><A HREF="home.htm">HAL. 1</A> | <A HREF="kuning.htm">HAL. 2</A> | <A HREF="biodata.htm">HAL. 3</A> |
Setelah itu barulah kita membuat link Kembali Keatas dengan kode sebagai berikut:
<A HREF="#atas">Kembali Keatas</A> |
Sedang teks
Selanjutnya dijadikan link yang menuju ke file sesudahnya. Yakni dari file
home.htm menuju ke
kuning.htm dan dari file
kuning.htm menuju ke
biodata.htm. Contoh dalam file
home.htm:
<A HREF="#atas">Kembali Keatas</A> | <A HREF="kuning.htm">Selanjutnya</A> |
Dalam halaman pertama terdapat dua link lagi di bagian tengah yaitu link yang menuju ke
Daftar Definisi yang ada di halaman kedua dan link yang menuju ke
Kesan dan Pesan yang ada di halaman ketiga. Karena itu kita harus mencantumkan nama terlebih dahulu pada baris Daftar Definisi di halaman kedua (file
kuning.htm) dan pada baris Kesan dan Pesan di halaman ketiga (file
biodata.htm) seperti contoh berikut:
<A NAME="defin"></A><H3>Daftar Definisi</H3> |
Untuk halaman ketiga:
<A NAME="kesan"></A><H3>Kesan dan Pesan</H3> |
Setelah itu barulah kita bisa memberi link pada kalimat berikut di halaman pertama:
<BR><A HREF="#defin">Klik di sini</A>untuk melihat <B>Daftar Definisi</B>. <BR>Untuk melihat<B>Kesan dan Pesan</B>, <A HREF="#kesan">klik di sini</A>. |
Di halaman kedua (file
kuning.htm) terdapat contoh link yang menuju ke situs yang lain. Buatlah link tersebut bila di-klik akan membuka jendela browser baru untuk menampilkannya. Begini jadinya:
<A HREF="http://www.kamus.web.id" TARGET="_blank">Kamus Web</A> |
Bila anda telah selesai memasukkan seluruh link-link tersebut, bukalah browser anda, kemudian cobalah meng-klik semua link-link yang terdapat dalam ketiga halaman web itu.
Sampai pelajaran ini, anda sebetulnya sudah dapat membuat website sendiri. Kami sangat menyarankan anda mencoba membuat website sederhana dengan bekal pengetahuan yang telah anda pelajari.