192
Teknologi Informasi dan Komunikasi Kelas XI
Yang berarti daftar item yang digunakan untuk hardware adalah ul dan li dengan tipe bullet Square ul type=”square”
liHarddiskli liModemli
lidan lain-lainli
Sedangkan daftar item yang digunakan untuk software adalah ol, yaitu daftar item bernomor ol liWindows XPli
liNorton Utilityli liMicrosoft Officeli
lidan lain-lainli
HTML di atas akan ditampilkan pada halaman web sebagai berikut hasilnya akan sama dengan memanipulasi daftar item secara langsung pada halaman web homepage:
Gambar 3.8 Tampilan hasil manipulasi daftar item pada halaman Web
2. Manipulasi Daftar Item Secara Langsung pada Halaman Web Homepage
Manipulasi daftar item serta pengaturan propertiesnya pada halaman web homepage sama halnya dengan manipulasi gambar serta pengaturan propertiesnya pada halaman dokumen MS.Word,
dengan langkah sebagai berikut: a.
Buatlah file dengan nama file Belajar Homepage 2 seperti pada gambar di atas. b.
Tentukan pointer sisipan tempat gambar akan disisipkan. c.
Klik Bullets and Numbering pada menu Format.
d. Ketikan text yang diinginkan. Misalnya, seperti gambar di atas.
e. Aturlah format dan posisi text agar lebih menarik.
193
Membuat Homepage Sederhana dan Interaktif
1. Manipulasi Form dengan HTML
Form adalah fasilitas yang digunakan untuk formulir isian pada halaman web homepage. Bentuk-bentuk form yang tersedia antara lain seperti berikut.
One Line text Box Sebuah baris text dari user seperti pesan, saran, dan lainnya.
Scrolling Text Box Beberapa baris text dari user seperti pesan, saran, dan lainnya.
Check Box Kotak pilihan dari sebuah daftar pilihan.
Radio Button Tombol satu pilihan dari pilhan yang tersedia.
Drop Down Menu Daftar item yang dapat dipilih dan diklik.
Push Button Tombol yang digunakan untuk menjalankan sebuah perintah.
Label Label pada sebuah halaman web.
Perhatikan HTML berikut: Untuk memanipulasi text ”Hubungi kami ...” dan ”Komentar apa ...” dapat dilakukan melalui tag-tag
kode HTML berikut.
H. Manipulasi Form
Gambar 3.9 Bentuk-bentuk Form
One Line Text Box Scrolling Text Box
Check Box
Drop Down Menu Radio Button
Push Button
Tabel 3.2 Bentuk-Bentuk Form
194
Teknologi Informasi dan Komunikasi Kelas XI
Untuk memanipulasi Radio Button dapat dilakukan melalui tag-tag kode HTML berikut.
Untuk manipulasi text ”Bagian apa saja ...” dapat dilakukan melalui tag-tag kode HTML berikut.
Untuk manipulasi Drop Down Menu dapat dilakukan melalui tag-tag kode HTML berikut.
Untuk manipulasi text ”Tulislah komentar anda ...” dapat dilakukan melalui tag-tag kode HTML berikut.
195
Membuat Homepage Sederhana dan Interaktif
Untuk manipulasi Label dan Online textbox dapat dilakukan melalui tag-tag kode HTML berikut.
Untuk manipulasi Label dan Scrolling textbox 2 baris dapat dilakukan melalui tag-tag kode HTML berikut.
Untuk manipulasi text ”Tulislah alamat …” dapat dilakukan melalui tag-tag kode HTML berikut.
Untuk manipulasi Label dan Online textbox dapat dilakukan melalui tag-tag kode HTML berikut.
196
Teknologi Informasi dan Komunikasi Kelas XI
Untuk manipulasi Checkbox dapat dilakukan melalui tag-tag kode HTML berikut.
Untuk manipulasi Push Button dapat dilakukan melalui tag-tag kode HTML berikut.
HTML di atas akan ditampilkan pada halaman web sebagai berikut hasilnya akan sama dengan memanipulasi Form secara langsung pada halaman web:
Gambar 3.10 Tampilan HTML pada halaman web
2. Manipulasi Form Secara Langsung pada Halaman Web Homepage
Untuk menyisipkan form pada pada halaman web dapat dilakukan dengan langkah: a.
Bukalah file yang diinginkan atau buatlah yang baru dengan nama file Belajar Homepage 3. b.
Tentukan pointer sisipan tempat Form yang akan disisipkan.
197
Membuat Homepage Sederhana dan Interaktif
c. Klik menu Insert - Form.
d. Klik beberapa bentuk form yang tersedia maka akan tampil bentuk form pada halaman web
homepage . Seperti pada gambar di atas.
e. Aturlah format dan posisi teks agar lebih menarik.
Untuk memanipulasi frame dapat dilakukan dengan langkah sebagai berikut. 1.
Klik menu File - New - Page hingga muncul kotak dialog New.
2. Klik tab Frames Pages dan pilih bentuk frame lalu klik OK muncul kotak jendela seperti berikut.
Gambar 3.11 Jendela New Page
Gambar 3.12 Jendela New Frame
I. Manipulasi Frame
198
Teknologi Informasi dan Komunikasi Kelas XI
3. Pada setiap frame, klik Set Initial Page apabila ingin membuka menggunakan referensi yang
sudah ada atau New Page apabila ingin membuat referensihalaman baru.
4. Jika kamu mengklik Set Initial Page, tentukan homepage pada kotak dialog Create Hyperlink
atau buatlah halaman baru jika kamu mengklik New Page.
5. Kamu dapat melihat hasil manipulasi frame melalui halaman Preview.
Gambar 3.13 Tampilan New - Page - 1. htm di Preview
1. Manipulasi Tabel dengan HTML
Untuk memanipulasi tabel dapat dilakukan melalui tag-tag kode HTML berikut.
J. Manipulasi Tabel
199
Membuat Homepage Sederhana dan Interaktif
HTML di atas akan ditampilkan pada dokumen homepage sebagai berikut hasilnya akan sama dengan memanipulasi table secara langsung pada halaman web homepage:
Gambar 3.14 Tampilan hasil manipulasi tabel
2. Manipulasi Tabel Secara Langsung pada Halaman Web Homepage
Untuk menyisipkan table pada pada halaman web homepage dapat dilakukan dengan langkah: 1.
Bukalah file yang diinginkan. 2.
Tentukan pointer sisipan tempat tabel yang akan disisipkan. 3.
Klik menu Table - Insert - Table.
4. Tentukan banyaknya baris dan kolom Table.
5. Aturlah format dan posisi text agar lebih menarik.
Kegiatan Belajar
Buatlah homepage yang menarik tentang melalui FrontPage dengan tema salah satu dari tema berikut:
a. Ilmu Pengetahun
b. Penawaran barang
c. Seni dan Kebudayaan
K. Membuat Layout Homepage yang Diinginkan
Agar lebih menarik, sebuah homepage harus di disain dengan format layout yang menarik. Untuk menghasilkan homepage yang menarik perlu diperhatikan:
1. Unsur-unsur yang termuat beserta komposisinya.
2. Simpel hingga tidak terkesan penuh.
3. Fokus objek yang menjadi pusat pesan yang akan disampaikan.
4. Kenyamanan mata saat seorang mengunjungi homepage.
Untuk itulah sebaiknya langkah dalam membuat homepage yang diinginkan adalah sebagai berikut: 1.
Membuat layout desain homepage dengan menggunakan software grafis. 2.
Aturlah komposisi warna, bentuk dan ukuran objek yang termuat pada homepage. 3.
Memilih animasi agar lebih menarik. 4.
Membuat HTML atau langsung pada lembar halaman normal. 5.
Menggunakan fasilitas hyperlink.
200
Teknologi Informasi dan Komunikasi Kelas XI
Sebagaimana diketahui bahwa hyperlink adalah mengkaitkan sebuah text atau objek pada sebuah file atau referensi lainnya. Biasanya fasilitas ini digunakan untuk memberi penjelasaan atau file lanjutan
dari sebuah homepage atau website. Untuk menggunakan Hyperlink dapat dilakukan dengan langkah sebagai berikut:
1. Pastikan bahwa file atau referensi yang akan dikaitkan dengan text atau objek telah dibuat
Belajar Homepage 3.html seperti gambar di bawah. 2.
Buka file tempat text atau objek yang akan dikaitkan Belajar Homepage 4.html seperti gambar di bawah.
3. Sorot text atau objek yang akan dikaitkan misalnya text Harddisk.
4. Klik Hyperlink pada menu Insert hingga muncul kotak dialog Create Hyperlink.
Gambar 3.15 Jendela Create Hyperlink
5. Ketiklah alamat file yang akan dikaitkan pada kotak isian URL yang tersedia atau kamu dapat
menggunakan fasilitas ikon-ikon yang tersedia untuk explorer alamat file yang diinginkan.
Gambar 3.16 Toolbar URL
L. Menerapkan Hyperlink
201
Membuat Homepage Sederhana dan Interaktif
6. Klik OK sehingga text berwarna biru atau lainnya.
7. Selesai.
Sekarang kamu dapat mencobanya melalui halaman Preview. Arahkan dan klik text tersebut maka kamu akan melihat file Belajar Homepage 3 segera ditampilkan.
Gambar 3.17 Preview hasil Hyperlink
Untuk menerapkan Cascading Style Sheet dapat dilakukan dengan langkah sebagai berikut: 1.
Klik Menu File - New - Page hingga muncul kotak dialog New.
2. Klik tab Style Sheet dan pilih salah satu Style Sheet yang tersedia lalu OK.
3. Halaman dokumen baru siap dilengkapi text, objek, dan lainnya.
Kegiatan Belajar
1. Bukalah salah satu website yang menggunakan fasilitas hyperlink. Perhatikan text atau
objek yang dikaitkan serta referensinya. 2.
Buatlah sebuah homepage dengan menggunakan hyperlink pada beberapa text dan objek.
M. Menerapkan Cascading Style Sheet
N. Membuat Aplikasi dalam Sistem yang Terintegrasi
Membuat aplikasi dalam sistem yang terintegrasi berarti membuat sebuah homepage yang memuat banyak halaman yang saling berhubungan satu sama lainnya. Untuk membuat aplikasi dalam sistem
yang terintegrasi dapat dilakukan dengan menggunakan fasilitas hyperlink, database, form dan komponen lainnya.
