PRAKTEK MEMBUAT HALAMAN WEBUntuk 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 programNotepadanda. Klik menuFilelaluSave. Pada kotak dialog yang muncul masuklah ke folderMy Documentslalu folderMy Webs. Cara masuknya, klik ganda (klik dua kali dengan cepat) folder yang bersangkutan. Setelah anda berada dalam folderMy Webs, buatlah folder baru dengan cara mengklik ikoncreate new folderyang berada pada ikon ketiga. Maka akan muncul folderNew Folder, silakan anda ganti namanya misalnyaweb1. Setelah itu pada kotakSave As Type, ganti isinya denganAll File. Lalu isi kotakFile Namedengan nama yang anda sukai misalnyahome.htm. KlikSave.Pada file dengan namahome.htmini, 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. 3Selamat 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 membuatparagraf? Suatu paragraf bisa tidak diberitag penutup. Yang penting anda ingat, bila akan membuat lagi paragraf baru, tulistag pembukaparagraf. Sedangkan untuk membuat baris, ada tag tersendiri. Dalam paragraf ini anda akan mengulangi pelajaran membuat baris, seperti di bawah ini:Klik di sini untuk melihatDaftar Definisi.Untuk melihatKesan 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 | SelanjutnyaSekarang kita akan membuat halaman web selanjutnya dengan judulHalaman Keduadengan tampilan dalam browser sebagai berikut:HAL. 1 | HAL. 2 | HAL. 3Mengutak-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 DefinisiInternetSingkatan dariinterconnection networkatau 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.HTTPSingkatan dariHypertext Transfer Protocoladalah salah satu protokol bahasa yang digunakan untuk berkomunikasi antar server komputer dalam internet. Protokol bahasa yang lain dalam internet misalnya: Telnet, News, Gropher, FTP.URLSingkatan dariUniform Resource Locatoradalah 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 | SelanjutnyaSimpanlah halaman di atas dengan nama misalnya:kuning.htm. Kemudian buatlah satu halaman web lagi dengan titelHalaman Ketigaseperti berikut:HAL. 1 | HAL. 2 | HAL. 3Inilah Biodataku ....1.Nama2.Tempat/tanggal lahir 3.Nama orang tuaa.Ayahb.Ibu4.Pendidikani.Sekolah dasarii.Sekolah menengah pertamaiii.Sekolah menengah atasiv.Perguruan tinggi5.Pekerjaan6.Alamat*.Rumah*.Kantor 7.HobiPesan dan KesanMembuat website sebenarnya gampang-gampang susah. Gampang karena kita tinggal mengganti kalimat-kalimat yang diletakkan diantaratag-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 kitaperlu belajar lebih banyak dan lebih giat lagi ....!Kembali KeatasSimpanlah halaman ketiga di atas dengan nama misalnya:biodata.htm. Sekarang kita telah mempunyai tiga buah file HTML yaituhome.htm,kuning.htmdanbiodata.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. 2danHAL. 3. Masing-masing link menuju ke filehome.htm,kuning.htmdanbiodata.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 linkKembali KeatasdanSelanjutnya. TeksKembali Keatasmerupakan link yang membawa kita ke bagian paling atas dari setiap halaman. Untuk itu sebelumnya kita harus memberi nama pada baris tulisanHAL. 1 | HAL. 2 | HAL. 3yang 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 teksSelanjutnyadijadikan link yang menuju ke file sesudahnya. Yakni dari filehome.htmmenuju kekuning.htmdan dari filekuning.htmmenuju kebiodata.htm. Contoh dalam filehome.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 keDaftar Definisiyang ada di halaman kedua dan link yang menuju keKesan dan Pesanyang ada di halaman ketiga. Karena itu kita harus mencantumkan nama terlebih dahulu pada baris Daftar Definisi di halaman kedua (filekuning.htm) dan pada baris Kesan dan Pesan di halaman ketiga (filebiodata.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 (filekuning.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. [Tutorial Html] [Wap Master][HOME] [PREV] [NEXT] [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12]by ndies 2008Copy Left & PasteSome Rights Reserved A1
Kembali
