TIK · BAB 3 Membuat Homepage Sederhana dan Interaktif

Osdirwan Osman Adhi Susano

24/08/2021 09:51:20

SMA 11 KTSP

Daftar Isi

BAB 1 Menggunakan Internet untuk Keperluan Informasi dan Komunikasi BAB 2 Program Pengolah Angka (Microsoft Office Excel 2003 BAB 3 Membuat Homepage Sederhana dan Interaktif

Halaman

183

Membuat Homepage Sederhana dan Interaktif

Membuat Homepage

Sederhana dan Interaktif

Kata Kunci

Sudahkah kamu mengetahui cara membuat

homepage

sederhana dan interaktif? Apakah kamu

telah mengetahui perangkat lunak apa saja untuk membuat sebuah

homepage

? Sudah dapatkah

kamu untuk melihat dan memodifikasi HTML sebuah website dalam jaringan internet?

Jika kamu sudah mengetahuinya, coba dipahami lebih dalam lagi pada pembahasan berikut

ini. Pada akhir pembahasan ini, kamu diharapkan mampu:

Menyebutkan janis-jenis perangkat lunak.

Menyebutkan komponen-komponen pada tampilan jendela FrontPage.

Menyebutkan elemen-elemen dalam Dokumen HTML.

Mengedit teks HTML menggunakan Microsoft Word.

Menyebutkan bentuk Form beserta kegunaannya.

Melihat dan memodifikasi HTML sebuah website dalam jaringan internet.

Menjelaskan cara memanipulasi

frames

Menjelaskan cara melakukan

download

dan

upload

• Cascrading

Style Sheet

• Desain grafis

• Domain

• Form

• Frame

• Frontpage

• Homepage

• HTML

• Hyperlink

• Item

• Upload

• Web Database

Interaktif

BAB 3

184

Teknologi Informasi dan Komunikasi Kelas XI

Sebagaimana kamu ketahui bahwa

homepage

adalah halaman depan sebuah website yang

memuat informasi penting.

Homepage

dapat diibaratkan sebagai halaman daftar isi dari sebuah

buku. Pada dasarnya, membuat

homepage

tidak jauh berbeda dengan membuat sebuah dokumen

pada MS.Word dengan fasilitas

Hyperlink

-nya. Dengan fasilitas ini kita dapat melihat lompatan-

lompatan antarhalaman yang sangat cepat dan menarik. Demikian pula pada sebuah

homepage

dengan fasilitas Hypertext atau Hypertext Mark-Up Language (HTML) maka lompatan-lompatan

antarhalaman atau website tidak terjadi ruang lingkup server yang sama. Akan tetapi, dapat terjadi

pada server yang letaknya saling berjauhan di seluruh penjuru dunia

Lalu perangkat lunak apa saja yang digunakan dalam membuat

homepage

beseta

komponennya dan cara mengkaitkan komponen tersebut dengan sebuah referensi? Pada bagian

inilah kamu akan mengetahui cara membuat

homepage

sederhana hingga

home

interaktif yang

menarik. Sering kali sebuah

homepage

disamakan dengan istilah web.

Gambar 3.1 Cara membuka FrontPage

Perangkat lunak yang diperlukan untuk membuat

homepage

, antara lain Microsoft Word,

Microsoft FrontPage, Bahasa Pemrograman Java, Dreamweaaver, dan lain-lain. Adapun untuk

mendukung desain grafis agar sebuah

homepage

tampil lebih menarik, kamu dapat menggunakan

perangkat lunak, seperti Corel Draw, Photoshop, Freehand, dan sebagainya.

Untuk membuat

homepage

pada Microsoft Word sama artinya dengan membuat sebuah

dokumen dengan berbagai komponennya (seperti hyperlink dan lain-lain) kemudian menyimpannya

dalam format tipe file Web Page (melalui

Save As Web Page

pada menu

File

Mengingat FrontPage masih banyak digunakan dan secara otomatis sudah ter-

install

dalam

Microsoft Office maka pada buku ini akan dipelajari secara lengkap mulai dari

homepage

sederhana

hingga

homepage

interaktif yang mengandung database. FrontPage ini tidak jauh berbeda dengan

perangkat lunak sejenis lainnya. Oleh sebab itu, buku ini dapat digunakan sebagai acuan belajar

perangkat lunak sejenis lainnya.

Mengaktifkan FrontPage

Untuk mengaktifkan FrontPage dapat dilakukan melalui

Start

Program

Microsoft FrontPage

A. Menentukan Perangkat Lunak yang Diperlukan untuk Membuat

Homepage

185

Membuat Homepage Sederhana dan Interaktif

Tampilan FrontPage Beserta Komponennya

Baris Judul

Baris Menu

Baris

Toolbar

Tombol ukuran

Baris tampilan

FrontPage editor

Gambar 3.2 Tampilan FrontPage

Elemen dasar kotak jendela FrontPage yang perlu kamu ketahui adalah sebagai berikut.

Baris judul

(Title Bar)

, yaitu baris yang menampilkan nama file atau dokumen FrontPage yang

sedang aktif.

Tombol Ukuran

(Sizing Button

) yang digunakan untuk mengatur ukuran kotak jendela

(Maxi-

mize, Minimize, Close)

Baris Menu

(Menu Bar)

, yaitu baris yang berisi perintah-perintah dalam mengelola dokumen

FrontPage

(File, Edit, View, Insert, Format, Tools, Table, Frames, Window, Help)

Toolbars

yang berisi ikon-ikon perintah dalam mengelola dokumen FrontPage.

Baris Tampilan

(Views Bar)

yang berisi ikon-ikon untuk memudahkan perpindahan

antarkotak jendela

(Page, Folders, Report, Navigation, Hyperlinks, Taks)

Daftar Folder

(Folder List

) yang berisi folder atau file yang terkait dengan file dokumen

FrontPage yang sedang aktif.

Taks Pane

yang digunakan untuk mempermudah dalam mengedit dokumen

HTML

FrontPage Editor

yang digunakan sebagai halaman untuk membuat dan mengedit dokumen

HTML

Elemen-elemen tersebut dapat ditampilkan atau disembunyikan melalui menu

View

B. Membuka Source HTML Sebuah Homepage

Source

sebuah

homepage

berisi bahasa atau kode-kode HTML sebuah

homepage

. Untuk

membuka

source

HTML sebuah

homepage

dapat dilakukan dengan langkah sebagai berikut:

186

Teknologi Informasi dan Komunikasi Kelas XI

Ketik alamat

homepage

(URL)

yang diinginkan pada

Address Bar

lalu tekan

Enter

(atau

tombol

) hingga muncul

homepage

yang diinginkan.

Klik

Source

pada menu

View

maka

source

akan muncul pada kotak jendela

Notepad

Gambar 3.3 Tampilan Source HTML sebuah Homepage

Untuk melihat

Source

sebuah

homepage

dapat pula dilakukan melalui sheet HTML pada

FrontPage Editor.

No.

Keterangan

Elemen HTML

Horizontal Line

Garis horizontal pada dokumen FrontPage

Date and Time

Tanggal dan waktu saat ini pada dokumen FrontPage.

Navigation Bar

Sekumpulan tombol atau teks yang dikaitkan

(hyperlink)

dengan dokumen page atau referensi lainnya dalam struktur

web.

Page Banner

Bagian dari halaman web yang memuat elemen grafik dan

teks.

Office Pivot Table

Tabel ringkasan atau rekapiluasi interaktif.

Office Chart

Grafik yang berhubungan dengan data tabel MS.Excel.

Banner add Manager

Banner rotasi yang menampilkan gambar, ukuran, efek

transisi secara bergantian.

C. Elemen-Elemen dalam Dokumen HTML

Elemen-elemen dokumen HTML termuat dalam menu

Insert

. Elemen-elemen yang perlu kamu

ketahui adalah sebagai berikut.

Tabel 3.1 Elemen-Elemen Dokumen HTML

187

Membuat Homepage Sederhana dan Interaktif

No.

Keterangan

Elemen HTML

Hit Counter

Penghitung banyak kunjungan sebuah website.

Hover Button

Tombol kreatif yang dikaitkan dengan efek suara, gambar,

dan lainnya.

10.

Marque

Pesan

text

berjalan secara horizontal.

11.

Confirmation Field

Komponen yang diganti dengan

Field

sebuah form dari

halaman konfirmasi.

12.

Include Page

Komponen yang diganti dengan isi atau halaman lain sebuah

web.

13.

Scheduled Picture

Gambar yang

ditampilkan pada interval waktu tertentu.

14.

Scheduled Include Page

Halaman yang ditampilkan pada interval waktu tertentu.

15.

Substitution

Variabel pada halaman web seperti nama kepemilikan

halaman.

16.

Search Form

Form yang dig

unakan untuk mencari teks atau halaman

dengan kriteria tertentu dari web yang sedang aktif.

17.

Table of Conten

Table yang berisi komponen yang mengandung

hypertext

18.

One Line Text Box

Sebuah baris

text

dari

user

seperti pesan, saran, dan lainnya.

19.

Scrolling Text Box

Beberapa baris

text

dari

user

seperti pesan, saran, dan lainnya.

20.

Check Box

Kotak pilihan dari sebuah daftar pilihan.

21.

Radio Button

Tombol satu pilihan dari pilhan yang tersedia.

22.

Drop Down Menu

Daftar item yang dapat dipilih dan diklik.

23.

Push Button

Tombol yang digunakan untuk menjalankan sebuah perintah.

24.

Label

Label pada sebuah halaman web.

Apabila kamu membuat homepage melalui Microsoft Word maka kamu dapat mengedit

text

HTML melalui Microsoft Word dengan langkah sebagai berikut:

D. Mengedit Text HTML Menggunakan Microsoft Word

188

Teknologi Informasi dan Komunikasi Kelas XI

Buka

homepage

yang diinginkan melalui penulisan URL pada

Address Bar

Gambar 3.4 Dokumen sebelum dan sesudah editing

Klik ikon

Edit

pada toolbar (atau

Edit

with Microsoft Word pada menu

File

) hingga muncul

kotak jendela Microsoft Word dengan baris judul dokumen yang diinginkan.

Edit

(hapus, salin, atau pindahkan)

text

yang diinginkan lalu simpan dengan mengklik

Save

pada menu

File

E. Manipulasi Text

Manipulasi Text dengan HTML

Untuk memanipulasi

text

dapat dilakukan melalui

tag-tag

(kode)

HTML

. Manipulasi

text

meliputi

mengedit

text

beserta

Font, Font Size, Font Style, Font Color, dan Effect

. Perhatikan HTML berikut!

189

Membuat Homepage Sederhana dan Interaktif

Yang berarti pada halaman dokumen tertulis pada paragraf:

Yang bertuliskan:

MAJU BERSAMA CREATIF COMPUTER

, ditulis dengan format:

•

Bold

atau tebal yang ditandai dengan adanya tag : ............

•

Jenis huruf Times New Roman dengan adanya tag : font face = ”Times New Roman”

•

Ukuran huruf 4 (atau 14 pt) dengan adanya tag : size = ”4”

•

Warna huruf biru dengan adanya tag : color = ”#0000FF”

Yang bertuliskan:

Selamat Datang Kepada Para Peserta

, ditulis dengan format:

•

Italic

atau miring yang ditandai dengan adanya tag : ............

•

Jenis huruf Times New Roman dengan adanya tag : font face = "Comic San MS"

•

Ukuran huruf 3 (atau 12 pt) dengan adanya tag : size = "3"

•

Warna huruf normal hitam dengan tidak adanya tag : color

Yang bertuliskan : PELATIHAN HOMEPAGE DESIGN, ditulis dengan format:

•

Normal (Reguler) yang ditandai dengan tidak adanya tag gaya huruf.

Beberapa tag gaya huruf (Font Style):

............ yang berarti

italic

............ yang berarti

Bold

•

Jenis huruf Normal (Courier New) dengan tidak adanya tag : font face

•

Ukuran huruf normal dengan tidak adanya tag : size

•

Warna huruf normal hitam dengan tidak adanya tag : color

Yang bertuliskan : di, ditulis dengan format:

•

Normal (Reguler) yang ditandai dengan tidak adanya tag gaya huruf.

•

Jenis huruf Normal (Courier New) dengan tidak adanya tag : font face

•

Ukuran huruf normal dengan tidak adanya tag : size

•

Warna huruf normal hitam dengan tidak adanya tag : color

Yang bertuliskan:

Kampus Pusat Pelatihan, ditulis dengan format:

•

Normal (Reguler) yang ditandai dengan tidak adanya tag gaya huruf.

•

Jenis huruf Normal (Courier New) dengan tidak adanya tag : font face

•

Ukuran huruf normal dengan tidak adanya tag : size

•

Warna huruf normal hitam dengan tidak adanya tag : color

Creatif Computer

ditulis dengan format:

•

Bold

atau tebal yang ditandai dengan adanya tag : .............

•

Jenis huruf Normal (Courier New) dengan tidak adanya tag : font face

•

Ukuran huruf normal dengan tidak adanya tag : size

•

Warna huruf normal hitam dengan tidak adanya tag : color

HTML di atas akan ditampilkan pada halaman Web sebagai berikut (hasilnya akan sama

dengan memanipulasi tabel secara langsung pada halaman Web

(Homepage)

190

Teknologi Informasi dan Komunikasi Kelas XI

Gambar 3.5 Tampilan hasil manipulasi teks HTML pada halaman Web

Manipulasi Text Secara Langsung pada Halaman Web (Homepage)

Manipulasi

text

secara langsung pada halaman web

(homepage)

serta pengaturan formatnya

sama halnya dengan manipulasi

text

serta pengaturan formatnya pada halaman dokumen MS.Word.

Untuk memanipulasi

text

pada halaman normal dapat dilakukan dengan langkah sebagai berikut.

Tentukan pointer sisipan tempat

text

akan ditulis.

Ketiklah

text

yang diinginkan seperti gambar di bawah ini.

Formatlah melalui

Font

pada menu

Format

Text

sudah tertulis dengan format yang diinginkan.

Simpanlah dengan nama file

Belajar Homepage 1

melalui

Save As

pada menu

File

Gambar 3.6 Tampilan hasil manipulasi teks pada halaman Web

191

Membuat Homepage Sederhana dan Interaktif

Manipulasi Gambar dengan HTML

Untuk memanipulasi gambar dapat dilakukan melalui

tag-tag

(kode)

HTML

Yang berarti gambar diambil dari alamat URL : ”PE01832_.gif” (gambar komputer)

HTML di atas akan ditampilkan pada halaman web sebagai berikut. Hasilnya akan sama

dengan memanipulasi gambar secara langsung pada halaman web

(homepage)

Gambar 3.7 Tampilan hasil manipulasi gambar dengan HTML

Manipulasi Gambar Secara Langsung pada Halaman Web (Homepage)

Manipulasi gambar serta pengaturan propertiesnya pada halaman web

(homepage)

sama halnya

dengan manipulasi gambar serta pengaturan propertiesnya pada halaman dokumen MS.Word.

Untuk

memanipulasi

text

pada halaman normal dapat dilakukan dengan langkah sebagai berikut:

Bukalah file yang diinginkan. Misalnya, File Belajar Homepage 1.

Tentukan

pointer

sisipan tempat gambar akan disisipkan.

Klik

Insert - Picture - ClipArt

(atau From File atau Video).

Pilih dan masukkan gambar yang diinginkan.

Aturlah format gambar agar lebih menarik.

F. Manipulasi Gambar

G. Manipulasi Daftar Item

Manipulasi Daftar Item

Untuk memanipulasi daftar item dapat dilakukan melalui

tag-tag

(kode) HTML berikut.

192

Teknologi Informasi dan Komunikasi Kelas XI

Yang berarti daftar item yang digunakan untuk hardware adalah

dan

dengan tipe bullet Square

<<ul type=”square”>

<li>Harddisk</li>

<li>Modem</li>

Sedangkan daftar item yang digunakan untuk software adalah ol, yaitu daftar item bernomor <ol>

<li>Windows XP</li>

<li>Norton Utility</li>

<li>Microsoft Office</li>

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

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:

Buatlah file dengan nama file

Belajar Homepage 2

(seperti pada gambar di atas).

Tentukan pointer sisipan tempat gambar akan disisipkan.

Klik

Bullets and Numbering

pada menu

Format

Ketikan

text

yang diinginkan. Misalnya, seperti gambar di atas.

Aturlah format dan posisi

text

agar lebih menarik.

193

Membuat Homepage Sederhana dan Interaktif

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.