pengenalan internet & dreamweaver

7/23/2019 Pengenalan Internet & Dreamweaver

1/41

INTERNET

Internet merupakan singkatan dari Interconnected Network, yang apabila diartikan secara

langsung adalah jaringan yang saling berhubungan. Internet adalah kumpulan computer yang

terhubung satu dengan yang lain dalam sebuah jaringan. Disebut jaringan yang saling terhubung

karena internet mengubungkan computer dengan jaringan-jaringan computer yang ada di seluruh

dunia menjadi sebuah jaringan computer yang sangat besar.

Ada dua peranan internet yang sangat penting, yakni sebagai sumber data dan informasi

serta sarana pertukaran data dan informasi. Sebagai sumber informasi, internet menyimpan

berbagai jenis informasi apa pun di internet. Internet dapat digunakan sebagai sarana pertukaran

informasi dari satu computer ke computer lain, tanpa dibatasi oleh jarak dan waktu.

Aplikasi Internet

! "orld "ide "eb #www!

"orld "ide "eb #www! merupakan sarana aplikasi yang paling banyak digunakan dan

merupakan aplikasi yang paling penting. Aplikasi www dapat dimanfaatkan untuk

berbagai hal. www adalah dokumen-dokumen internet yang disimpan di ser$er-ser$er

yang terdapat di seluruh dunia. Dokumen web tersebut dibuat dengan menggunakan

format hyperte%t dan hypermedia, yaitu &yperte%t 'arkup (anguage #&)'(!. &)'(,

digunakan untuk menyimpan informasi. Dokumen yang dibuat dengan &)'( digunakan

untuk mnyimpan informasi. Dokumen yang dibuat dengan &)'( tersebut dapat memuat

teks, gambar, animasi, audio, dan $ideo.

*! +lectronic 'ail #+-'ail!

+-mail atau surat elektronik adalah aplikasi internet untuk sarana komunikasi surat-

mnyurat dalam bentuk elektronik. 'engirim e-mail sama persis dengan mengirim sebuah

surat biasa. ita dapat bercerita, mengirimkan pesan atau apa saja. 'elalui e-mail kita

juga dapat mengirimkan file dokumen, gambar dan sebagainya. +-mail merupakan alat

komunikasi yang murah dan cepat. ita dapat mengirimkan surat ke suluruh dunia

dengan biaya yang sangat murah.

! 'ailing (ist

'ailing list atau sering disebut juga milis adalah aplikasi internet yang digunakan

sebagai sarana diskusi atau bertukar informasi dalam satu kelompok melalui e-mail.


2/41

Setiap e-mail yang dikirimkan ke alamat milis akan dikirimkan ke seluruh alamat e-mail

yang terdaftar sebagai anggota milis tersebut. asilitas ini digunakan oleh kelompok-

kelompok untuk bertukar informasi dan berdiskusi sesama anggota kelompok.

/! Newsgroup

Newsgroup adalah aplikasi internet yang digunakan untuk berkomunikasi satu sama lain

dalam sebuah forum. 0iasanya, anggota forum newsgroup mempunyai kepentingan dan

ketertarikan yang sama serta membahas topic-topik tertentu. Newsgroup dapat dianggap

sebagai sebuah bulletin board, dimana setiap orang bebas memaparkan pendapatnya

untuk dibaca oleh orang lain yang tergabung dalam kelompok tersebut. Sarana yang

mungkin digunakan dalam newsgroup dapat berupa multimedia #audio-$isual! dengan

menggunakan fasilitas konferensi $ideo, dapat berupa teks saja atau teks dan audio

dengan menggunakan fasilitas chat #I12!.

3! Internet 1elay 2hat #I12!

I12 adalah aplikasi internet yang digunakan untuk bercakap-cakap di internet. 0ercakap-

cakap di internet dikenal dengan istilah chatting. 2hatting dilakukan dengan cara

mengetik apa yang ingin kita kayakan kepada teman chatting kita, kemudian

mengirimkanny dalam bentuk teks. Saat ini beberapa layanan chatting di internet telah

dilengkapi dengan sarana untuk menampilkan gambar yang diambil menggunakan

webcam.

4! ile )ransfer 5rotocol #)5!

)5 adalah aplikasi internet yang digunakan untuk mengirimkan atau mengambil file ke

atau dari computer lain #internet!. )5 memungkinkan transfer data lebih cepat.

6! )elnet

)elnet adalah aplikasi internet yang digunakan untuk mengakses computer yang letaknya

jauh. )elnet dapat digunakan apabila kita mempunyai alamat I5 #I5 Address! dari

computer yang akan diakses dan kita juga harus mempunyai hak akses #user ID dan

5assword! ke computer tersebut.

*


3/41

7! 8opher

8opher adalah aplikasi yang digunakan untuk mencari informasi yang ada di internet.

Namun, informasi yang dicari hanya terbatas pada teks saja. 9ntuk mendapatkan

informasi yang dicari hanya terbatas pada teks saja. 9ntuk mendapatkan informasi

melalui 8opher, kita harus menghubungkan diri dengan 8opher ser$er yang ada di

internet.

:! 5acket Internet 8opher #5ing!

5ing digunakan untuk mengetahui apakah computer yang kita gunakan terhubung

#terkoneksi! dengan computer lain di internet. 5engecekan hubungan ini dilakukan

dengan cara mengirimkan sejumlah paket data.

Dari aplikasi-aplikasi yang ada di internet, maka sampai saat ini kegunaan internet yang

dapat kita rasakan adalah sebagai berikut;

Sarana untuk mendapatkan dan mengirimkan informasi yang cepat dan murah.

&al ini didapatkan dengan menggunakan aplikasi e-mail, www, newsgroup, )5,

dan 8opher.

'engurangi biaya kertas dan biaya distribusi. 'isalnya oran nasional dapat

dicetak di daerah, oran masuk internet, majalah, brosur, dan sebaginya.

Sebagai media promosi, internet dimanfaatkan untuk beriklan dan menampilkan

profil perusahaan serta produk-produknya.

Sarana komunikasi interaktif, seperti pada e-mail, dukungan pelanggan dengan

www, konferensi $ideo, I12, telepon $ia internet.

Sarana penelitian dan pengembangan #1esearch and De$elopment!

Sarana untuk mempertukarkan data.

5emanfaatan Internet Di 0idang 0isnis

. +lectronic 2ommerce #+-2ommerce!

+-2ommerce atau perdagangan secara elektronik adalah perdagangan yang

dilakukan dengan memanfaatkan jaringan telekomunikasi, terutama internet. Internet

memungkinkan orang atau organisasi yang berada pada jarak yang jauh dapat saling

berkomunikasi untuk melakukan transaksi perdagangan.


4/41

eutungan yang diperoleh perdagangan secara elektronik adalah;

5erdagangan secara elektronik memungkinkan perusahaan untuk menjual

produknya kepada lebih banyak orang. Dengan kata lain, perusahaan

dapat menjangkau pasar yang lebih luas. 'isalnya, perusahaan atau toko

di Amerika dapat menjual produknya kepada orang Indonesia.

5erusahaan tidak perlu membuka banyak cabang distribusi.

0iaya yang dikeluarkan perusahaan dapat dikurangi, karena perusahaan

tidak perlu menyediakan toko yang besar dan pegawai yang banyak.

arena biaya yang di keluarkan perusahaan dapat dikurangi, maka harga

barang yang dijual dapat lebih murah. Akibatnya, banyak konsumen

yang dapat menjangkau harga barang tersebut dan barang menjadi lebih

laku.

0arang yang dijual lebih murah dapat meningkatkan daya saing

perusahaan.

Sedangkan keuntungan yang diperoleh konsumen antara lain;

onsumen tidak perlu mendatangi toko untuk mendapatkan

barang, cukup memesan barang melalui internet, barang akan diantar ke

rumah.

onsumen dapat menghemat waktu dan biaya transport

berbelanja.

onsumen mempunyai lebih banyak pilihan, karena dapat

membandingkan semua produk yang ada di internet.

onsumen dapat membeli barang yang terdapat di negara lain,

yang di dalam negeri mungkin saja belum tersedia.

&arga barang yang dibeli menjadi lebih rendah atau murah.

*. Internet 0anking

Internet banking sering juga dikenal dengan sebutan +lectronic 0anking #+-0anking!, 2yberbanking,


5/41

euntungan lain, nasabah dapat melakukan transaksi perbankan kapan saja dan di mana

saja #asalkan ada internet!.

0agi pihak bank, internet banking memungkinkan bank untuk menurangi biaya

operasional. Internet banking akan mengurangi nasabah yang dating ke bank, sehingga

bank dapat menggunakan kantor yang lebih kecil dan pegawai yang lebih sedikit. edua

hal tersebut menyebabkan bank dapat mengurangi biaya sewa tempat dan gaji karyawan.

)ransaksi-transaksi yang dapat dilakukan melalui internet banking adalah transfer uang,

pengecekan saldo, pemindahbukuan, pembayaran tagihan-tagihan, informasi rekening,

transaksi-transaksi, dan lain sebagainya.

. 0elajar >arak >auh

0elajar jarak jauh sudah lama dilakukan jauh sebelum internet ada. Dahulu

belajar jarak jauh dilakukan dengan cara belajar mandiri. 5ihak penyelenggara belajar

jarak jauh mengirimkan bahan-bahan pelajaran berupa buku, kaset dan $ideo kepada para

siswa untuk dipelajari. 9ntuk mengukur tingkat kemampuan siswa, diberikan latihan dan

ujian yang harus dikerjakan. (atihan atau ujian tersebut haris dikerjakan dan dikirimkan

kembali oleh para siswa.

Sistem belajar seperti ini sebenarnya jauh dari sempurna. Dalam belajar,

seseorang membutuhkan interaksi atau komunikasi langsung dengan guru, interaksi atau

komunikasi dengan sumber belajar, dan iterakasi atau komunikasi dengan sesama siswa.

>ika salah satu dari hal tersebut tidak terpenuhi, hasil yang diperoleh menjadi tidak

maksimal.

Internet merupakan alat komunikasi yang murah. Internet juga memungkinkan

terjadinya dialog seseorang dengan orang lain #one to one communication!. Selain itu

juga, internet memungkinkan terjadinya komunikasi dengan tatap muka melalui

teleconference. emampuan dan karakteristik internet tersebut memungkinkan internet

dimanfaatkan sebagai media belajar jarak jauh. 5emanfaatan internet akan membuat

proses belajar jarak jauh menjadi lebih efektif.

Ada beberapa factor yang harus dipenuhi agar internet dapat dimanfaatkan

sebagai media belajar jarak jauh yang efektif, antara lain sebagai berikut;

A. Institusi penyelenggara

0. 5engajar

2. Siswa

3


6/41

D. )eknologi

4


7/41

>aringan omputer

umpulan computer yang terhubung satu dengan yang lainnya disebut dengan jaringan

computer. Atau dapat juga disebut beberapa komputer yang saling terhubung sehingga dapat

terjadi komunikasi. Setiap komputer yang terhubung ke suatu jaringan akan memiliki alamat

#network address! yang unik. Dalam sebuah jaringan computer, terdapat sebuah computer ser$er

dan kumpulan computer client. Sesuai dengan namanya, computer ser$er berfungsi untuk

melayani pengiriman dan penerimaan data dari computer-komputer yang ada di dalam jaringan.

Dengan kata lain, computer ser$er berfungsi sebagai penyedia sumber yang dibutuhkan oleh

computer-komputer client. Sumber tersebut dapat berupa data-data, program-program, file-file,

dan sebagainya. Sedangkan computer client adalah computer yang menerima pelayanan. 0ila

jaringan computer terhubung ke internet, computer ser$er juga dapat berfungsi sebagai gateway.

Disebut gateway, karena computer ser$er tersebut merupakan gerbang atau jalur yang digunakan

oleh computer client untuk mengekses internet.

0eberapa manfaat yang dapat diperoleh dari adanya jaringan computer, antara lain

sebagai berikut;

. 'embagi sumber daya

>aringan computer dapat dimanfaatkan sebagai sarana untuk membagi sumber daya yang

ada. Sumber daya tersebut dapat berupa perlengkapan computer, seperti printer, maupun

sumber daya yang berupa data-data, file-file, dan program-program. Dengan adanya

jaringan computer, maka sumber daya yang harus disediakan dapat dikurangi.

*. 1eliabilitas tinggi

>aringan computer memungkinkan kita untuk mengopikan data-data ke dua atau lebih

computer. Dengan demikian, apabila salah satu computer rusak dan data-data yang

disimpan di dalamnya hilang, kita masih dapat menggunakan data yang disimpan di

computer lain. &al ini akan menguntungkan karena kita tidak terhambat, meskipun ada

computer yang rusak ataupun data-data yang hilang.

. 'enghemat uang

Dengan menggunakan jaringan, perusahaan dapat menghemat peralatan yang harus

digunakan, misalnya printer. Dengan adanya jaringan computer, satu buah printer dapat

digunakan oleh beberapa oang, sehingga perusahaan tidak perlu membeli printer untuk

setiap karyawan. Dengan demikian, jaringan computer yang dibangun dapat menghemat

biaya yang dikeluarkan.

/. Sarana komunikasi

6


8/41

>aringan computer dapat dimanfaatkan oleh perusahaan atau organisasi. 'isalnya, ketika

memberikan pengumuman rapat, pimpinan perusahaan tidak perlu mengirimkan surat

kepada semua stafnya. 5impinan perusahaan cukup mengirimkan undangan melalui

jaringan computer yang ada.

0erbagai jenis jaringan computer

. >aringan sederhana.

>aringan sederhana biasa juga di sebut dengan jaringan peer to peer, yang artinya jaringan

computer yang hanya melibatkan dua buah computer. >aringan jenis ini tidak dapat

menggunakan lbih dari dua buah computer. >aringan sederhana menggunakan kabel yang

di sebut kabel cross link.

*. (AN

(AN #(ocal Area Network! adalah jaringan computer yang terdapat dalam sebuah

gedung, perkantoran atau sekolah. 9mumnya (AN dimiliki oleh perusahaan atau

organisasi tertentu. (AN digunakan untuk menghubungkan computer-komputer yang

terdapat di dalam gedung atau kentor tersebut.

7


9/41

. 'AN

'etropolitan Area Network #'AN! adalah jaringan (AN dalam $ersi yang lebih besar.

9mumnya 'AN digunakan untuk menhubungkan beberapa kantor yang letaknya

berdekatan. 'isalnya saja, kantor-kantor pemerintahan yang terdapat dalam sebuah kota

dapat dihubungkan dengan 'AN. &al ini dibuat untuk berbagai data antara satu instansi

dengan instansi yang lain. 'isalnya saja, kantor Dinas 5ajak dapat berbagi data dengan

kantor Dinas 5ertanahan. 'an dapat dimanfaatkan oleh pemerintah maupun swasta.

/. "AN

"ide Area Network #"AN! adalah jaringan computer yang mencakup area yang sangat

luasdari segi geografis. "AN dapat saja mencakup sebuah Negara atau benua. "AN

banyak digunakan oleh perusahaan-perusahaan besar yang daerah operasinya mencakup

beberapa Negara yang terletak di berbagai belahan dunia. "AN juga digunakan oleh

Negara-negara yang telah maju umtuk mengubungkan database dari satu daerah dengan

daerah lain dan antar instansi dan lembaga-lembaga yang ada.

:


10/41

3. Internet

Internet juga merupakan sebuah jaringan computer. Internet merupakan jaringan yang

sangat besar yang mencakup seluruh dunia. =rang yang terhubung dengan internet berari

terhubung dengan senua computer yang ada di dunia yang juga terhubung ke internet.

Internet merupakan kumpulan dari (AN, 'AN, dan "AN yang ada di seluruh dunia.

9ntuk menghubungkan jaringan-jaringan tersebut ke dalam sebuah jaringan internet yang

sangat besar, maka dibangun jaringan kabel serat optic yang menghubungkan satu benua

dengan benua yang lain. abel serat optic tersebuat dibangun melalui dasar laut.

?


11/41

Macromedia Dreamweaver

"orld wide web sebenarnya merupakan gabungan dari web site seluruh dunia. 2ontoh

beberapa web site yang terkenal antara lain ; yahoo.com, google.co.id dan lain-lain. &alaman web

yang pertama kali ditampilkan ketika sebuah web site diakses di sebut dengan &ome page. Setiap

halaman web di bangun dari script &)'( #&yper )e%t 'arkup (anguage!, yaitu file teks yang

dilengkapi dengan tag-tag tertentu.

'acromedia Dreamwea$er adalah program bantu untuk mempermudah kita membuat @

merancang halaman web, sehingga kita tidak perlu lagi menuliskan tag-tag &)'( yang cukup

rumit dan merepotkan.

'+'9(AI D1+A'"+A


12/41

9ntuk menampilkan hasil perubahan format teks pada program browser Internet +%plorer;

lik icon 5re$iew in 0rowser, atau

)ekan tombol *

Latihan 1.1

Salinlah teks berikut ini ;

"=1(D "ID+ "+0

Sebelum berkembangnya "orld "ide "eb #"""!, Internet umumnya hanya digunakan di

kalangan yang sangat terbatas, yaitu kalangan akademisi dan riset. 5ada tahun ::, N2SA

mengeluarkan '=SAI2, program web browser pertama dengan kemampuan grafik. 5rogram ini

disiapkan untuk seluruh platform yang saat itu biasa digunakan, yaitu ; B "indow #9ni%!,

"indows #52!, dan 'acintosh.

Aturlah formatnya hingga menghasilkan teks seperti di bawah ini ;

"=1(D "ID+ "+0

Sebelum berkembangnya "orld "ide "eb #"""!, Internet umumnya hanya digunakan di

kalangan yang sangat terbatas, yaitu kalangan akademisi dan riset. 5ada tahun ::, N2SA

mengeluarkan '=SAI2, program web browser pertama dengan kemampuan grafik. 5rogram ini

disiapkan untuk seluruh platform yang saat itu biasa digunakan, yaitu; B "indow #9ni%!,

"indows #52!, dan 'acintosh.

. 9bahlah warna teks judul menjadi merah, dan alinea menjadi biru.

/. 2opy-kan teks di bawah judul # kali! ke bagian bawah, lalu atur perataan alinea

; kiri, alinea * ; tengah, alinea ; kanan, dan alinea / ; justify.

*


13/41

3. 0erikan e fek indent pada alinea /, lalu kembalikan k e teks s emula dengan

memberikan efek outdent.

4. )ambahkan data tanggal hari ini di awal teks.

6. )ambahkan karakter-karakter khusus berikut ini di akhir teks ;

C E F

Cara menambahkan bullet / unordered list

A. )andai @ blok teks yang akan diberi bullet.

0. lik icon 9nordered (ist atau pilih menu )eks(ist9nordered (ist.

2. 9ntuk mengganti jenis bullet, pilih menu )eks(ist5roperties, lalu ganti bagian

Style.

Cara menambahkan nomor / ordered list

A. )andai @ blok teks yang akan diberi nomor.

0. lik icon =rdered (ist atau pilih menu )eks(ist=rdered (ist.

2. 9ntuk mengganti jenis nomor, pilih menu )eks(ist5roperties, lalu ganti bagian

Style.

D. >ika ingin mengganti nomor awalnya, isi bagian Start 2ount dengan nomor yang

diinginkan.

2ontoh ; jika nomor ingin dimulai dengan huruf 2, maka isilah bagian Start

2ount dengan .

Cara membuat list bertin!kat

A. )andai @ blok seluruh teks yang dijadikan list bertingkat.

0. lik icon =rdered (ist @ 9norderd (ist. >ika ingin mengubah jenis nomor @ bullet,

pilih menu )eks(ist5roperties.

2. )andai bagian teks yang akan menjadi subnomor, lalu klik icon )e%t Indent.

9ntuk mengganti jenis subnomor, pilih menu )eks(ist5roperties.

Cara membuat de"inition list

A. )andai @ blok teks yang akan dijadikan definition list.

0. 5ilih menu )eks(istDefinition (ist.


14/41

Latihan 1.#

Salinlah teks berikut ini lalu copy-kan *% ke bagian bawah ;

0uatlah menjadi unordered list dan ordered list sbb ;

/


15/41

Latihan 1.$

Salinlah teks berikut ini lalu copy-kan *% ke bagian bawah ;

Aturlah hingga menjadi teks bertingkat seperti di bawah ini ;

3


16/41

Latihan 1.%

0uatlah teks berikut ini ;

MODUL 2 : MEMBUAT TABEL

)able biasanya dibuat untuk menampilkan kumpulan data @ informasi secara terstruktursehingga lebih mudah untuk dibaca. Selain itu table juga bisa digunakan sebagai media bantu

dalam merancang layout halaman web.

Membuat table baru :

. lik posisi penempatan table.

*. 5ilih menu Insert&Table.

. )entukan property table sbb ;

Rows @ Columns ; jumlah baris @ jumlah kolom

Table 'idth ; lebar table #dalam persentase atau satuan pi%el!

(order Thicness ; ketebalan garis pembatas #border!Cell )addin! ; jarak antar data dengan border sel

Cell *+acin! ; jarak antar sel

,eader ; jenis judul tabel

/. lik tombol -

Mengatur propert la!nna pa"a table :

. lik salah satu sel pada table, lalu pilih menu Modi"&Table&*elect Table.

*. Isi @ pilih property table pada )anel )ro+ert di bagian bawah ;

0li!n ; posisi table relatif terhadap halaman web

(!Color ; warna latar table

(!Ima!e ; nama file gambar sebagai latar table

(rdrColor ; warna garis pembatas #border!

Men!#!p$an bar!# % $olom baru :

. lik @ tandai posisi penempatan baris @ kolom baru.

*. 5ilih menu Modi"& Table&Insert Rows or Columns.

. )entukan @ isi item-item sbb ;

Insert; ; pilihan insert baris #Rows! atau kolom #Columns!

Number o" Rows / Columns ; jumlah baris @ kolom yang akan disisipkan

4


17/41

'here ; pilihan posisi baris @ kolom baru

/. lik tombol -

Meng&apu# bar!# % $olom :

. lik posisi baris @ kolom yang akan dihapus.*. 5ilih menu Modi"& Table&Delete Rows / Columns.

Menggabung$an beberapa #el :

. 0lok @ tandai sel-sel yang akan digabungkan.

*. 5ilih menu Modi"& Table&Mer!e Cells.

Meme'a& #el :

. lik @ pilih sel yang akan dipecah.

*. 5ilih menu Modi"& Table&*+lit Cells.

. )entukan @ isi item-item sbb ;

*+lit Cell into ; pilihan dipecah menjadi beberapa baris atau beberapa kolom

Number o" Rows / Columns ; jumlah baris @ kolom yang diinginkan

/. lik tombol -

LLatihan #.1

(uku as C. Merdeka

LLatihan #.#

(uku as C. Merdeka

6


18/41

LLatihan #.$

D02T0R NIL0I *I*'0

*D NE3ERI D03- 45

MODUL ( : )*+ERL,NK

&yperlink adalah sarana yang memungkinkan kita untuk berpindah dari suatu tempat ke

tempat lain secara cepat. 'edia untuk hyperlink bisa berupa teks @ gambar @ objek lainnya. 0ila

pointer mouse melewati objek hyperlink #mouse over!, maka lambang pointer mouse akan

berubah menjadi miniature telapak tangan.

-ara 'epat untu$ membuat te$# &perl!n$ :

. )andai teks @ gambar yang akan menjadi media hyperlink.

*. )uliskan alamat tujuan hyperlink di bagian Linkpada )anel )ro+erties.

Membuat l!n$ e.ma!l :

. )andai teks @ gambar yang akan menjadi media link e-mail.

*. 5ilih menu Insert&Email Link.

. )uliskan alamat e-mail tujuan pada bagian E6mail.

Membuat l!n$ $e bag!an la!n :

. 0eri nama teks @ gambar yang menjadi tujuan suatu link melalui menu Insert&Named

0nchor.

*. )andai teks @ gambar yang akan menjadi media hyperlink.. )uliskan alamat tujuan hyperlink di bagian Link pada )anel )ro+erties dan awali

penulisan nama tersebut dengan tanda G. 2ontoh ; jika nama tujuan suatu link adalah

0wal, maka pada bagian Link harus ditulis 70wal.

7


19/41

LLatihan $.1L


)ambahkan hyperlink dan e-mail link sbb ;

Latihan $.#

0uatlah halaman-halaman web berikut ini ;

:


20/41

Latihan $.$

0uatlah halaman-halaman web berikut ini ;

H Nama ile ; ,ome.html

Selamat Datang

di Website *M) 0L0M 8D8*(okasi Sekolah J (ink ke file *ekolah.html

+kskul J (ink ke file Ekskul.html

Akreditasi J (ink ke file 0kreditasi.html

H Nama ile ; *ekolah.html

Lokasi Sekolah

*M) 0L0M 8D8*

S'5 I ;

>l. Ibu Inggit 8arnasih ?7, 0andung

)elp.#?**! 3*??36

S'5 II ;

>l. )erusan 2ibaduyut :*, 0andung

)elp.#?**! 3/?///(ack J (ink ke file ,ome.html

H Nama ile ; Ekskul.html

Ekstrakulikuler

*M) 0L0M 8D8*

. =lah 1aga

i. 0asket

ii. utsal

iii. 0adminton

*. )eknologi

i. omputer

ii. 1obotika

. (ain-laini. )amborin

ii. 'asak

(ack J (ink ke file ,ome.html

H Nama ile ; 0kreditasi.html

Akreditasi BAN

*M) 0L0M 8D8*

A. *M) I ;

)erakreditasi A

0. *M) II;

)erakreditasi A

(ack J (ink ke file ,ome.html

*?


21/41

Latihan $.%L


MODUL / : MERAN-ANG LA*OUT )ALAMAN 0EB

L

Latihan %.1

. 0uatlah layout berupa table pertama sbb ;

*. 9bahlah format table sehingga berbentuk ;

*


22/41

. (engkapi halaman web sehingga tampilannya menjadi ;

/. )ambahkan link sebagai berikut ;

3. 0erdasarkan layout tadi, buatlah / buah halaman web berikut ini ;

**


23/41

*


24/41

MODUL : +ENGGUNAAN ,MAGE AN,MAS,

Men!#!p$an !mage :

1. lik posisi penempatan image.

#. 5ilih menu Insert&Ima!e.

$. 5ilih nama file image, lalu klik tombol -.

%. 9ntuk menentukan perataan teks relatif terhadap image, pilih bagian 0li!npada )anel

)ro+erties.

Men!#!p$an an!ma#! 3la#& :

1. lik posisi penempatan animasi flash.

#. 5ilih menu Insert&Media&2lash.

$. 5ilih nama file animasi flash, lalu klik tombol -.

Membuat !mage &perl!n$ :

. lik gambar @ image yang akan dijadikan media link.

*. )entukan alamat tujuan link pada bagian Link.

Membuat roll o4er !mage &perl!n$ :

1. lik posisi penempatan roll o$er image.#. 5ilih menu Insert&Ima!e -b9ects&Rollover Ima!e.

$. )entukan property roll o$er image sbb ;

a. -ri!inal Ima!e ; pilih nama file image pertama

b. Rollover Ima!e ; pilih nama file image kedua

c. 'hen Clicked: 3o to 8RL ; tentukan alamat tujuan link

%. lik tombol -

*/


25/41

Membuat !mage map 5&ot#pot6 :

1. lik posisi penempatan image map.

#. 5ilih menu Insert&Ima!e.

$. 5ilih nama file image, lalu klik tombol -.

%. lik @ pilih image tersebut.

;. 5ilih bentuk hotspot pada )anel )ro+erties ; Rectangular otspot !ool #segiempat! @

"val otspot!ool #lingkaran! @#olygon otspot !ool #bentuk bebas!5. )entukan alamat tujuan link pada bagian Link.

Membuat 3la#& button &perl!n$ :

1. lik posisi penempatan tombol flash.

#. 5ilih menu Insert&Media&2lash (utton.

$. )entukan property tombol flash sbb ;

a. *tle ; pilih bentuk @ jenis tombol flash

b. (utton Te


26/41

Men!ap$an 3rame#et pa"a &alaman 9eb baru :

0. 5ilih menu 2ile&New.

(. 5ada tab 3eneralpilih 2ategory 2ramesets.

C. 5ilih jenis frameset pada bagian 2ramesets.

D. lik tombol Create.

Mengatur propert 3rame#et :! lik salah satu garis border antara dua frame.

*! Isi @ pilih property table pada )anel )ro+ert di bagian bawah ;

i! (orders ; >es #border dimunculkan!, No #border disembunyikan!, De"ault

#tergantung browser!

ii! (order 'idth ; lebar @ ketebalan garis seluruh border

iii! (order Color ; warna latar frame

i$! alue / 8nits ; ukuran frame tertentu #pilih frame-nya pada tampilan RowCol

*election!

Mengatur propert 3rame :

! >ika 5anel rames belum muncul, tekan tombol H*hi"t 2#.

*! lik @ pilih frame yang akan diatur property-nya.! Isi @ pilih property table pada )anel )ro+ert di bagian bawah ;

i! 2rame Name ; nama frame

ii! *rc ; dokumen sumber untuk frame yang bersangkutan

iii! *croll ; >es #scroll bar dimunculkan!, No #scroll bar disembunyikan!, 0uto #scrollbar muncul jika diperlukan!, De"ault #tergantung browser!

i$! No Resi=e ; mengunci ukuran frame #jika diaktifkan!

$! (orders ; >es #border dimunculkan!, No #border disembunyikan!, De"ault

#tergantung browser!

$i! (order Color ; warna latar frame

$ii! Mar!in 'idth / ,ei!ht ; mengatur jarak margin

Mengatur propert &alaman 9eb :1? 5ilih menu Modi"&)a!e )ro+erties.

#? )entukan pilihan masing-masing item, misalkan untuk warna latar bisa diisi item

(ack!round.

Men!mpan 3!le 3rame 3rame#et :

1? 5ilih menu 2ile&*ave 0ll.

#? )entukan nama file untuk frameset, lalu klik tombol *ave.

$? )entukan nama file untuk masing-masing frame, lalu klik tombol *ave.

Mengatur l!n$ "alam 3rame :

! 5ilih teks @ image @ objek yang menjadi media hyperlink.

*! 5ilih @ tulis nama file yang akan dimunculkan.)entukan frame yang akan menjadi tujuanpenempatan link pada item Tar!et.

Latihan 5.1

1. 0uatlah empat buah file berikut ini di folder D@ )*'@ 2rame1

*4


27/41

Dok1.htmlM 0ackground ; biru muda

Ini adalah isi Dokumen 5ertama.

'uncul pada frame bawah.

Dok#.htmlM 0ackground ; coklat mudaIni adalah isi Dokumen edua.


Dok$.htmlM 0ackground ; hijau muda

Ini adalah isi Dokumen etiga.


Navi!asi.htmlM 0ackground ; kuning muda

Contoh )en!!unaan 2rame

ADokumen )ertamaB ADokumen eduaB ADokumen eti!aB

#. Siapkan sebuah frameset #i%ed )op! sbb ;

$. Simpan file frameset dengan nama ; Lat2rame1.htm%. Isi frame sebelah atas #toprame! ; Navi!asi.htm

Isi frame sebelah atas #mainrame! ; Dok1.htm

;. Atur link pada bagian na$igasi sbb ;

Dokumen 5ertama Dok1.htmDokumen edua Dok#.htm

Dokumen etiga Dok$.htm)arget penempatan ketiga file di atas adalah pada

frame sebelah bawah #)arget mainrame!.

5. Simpan kembali semua file dengan 2ile *ave 0ll, lalu coba tampilkan dalam browser.

Latihan 5.#

1. 0uatlah lima buah file berikut ini di folder D@ )*'@ 2rame#

#background masing-masing bebas!

*6


28/41

Sistem.html M 2ontoh-contoh software sistem operasi ;

'icrosoft "indows

'ac=S

(inu%

ree0SD

0e=S

0ahasa.html M 2ontoh-contoh software bahasa pemrograman ;

5ascal

2OO

Assembler

ortran

Aplikasi.html M 2ontoh-contoh software aplikasi ;

'icrosoft =ffice

2orel =ffice

(otus Smart Suite

>udul.html M 0uat dengan =N) 0+1991AN 0+SA1

;; (ASIIASI S=)"A1+ ;;

(ink.html M 0uat dengan (AS& 09))=N

Sistem =perasi #link ; sistem.html!

0hs 5emrograman #link ; bahasa.html!

5rogram Aplikasi #link ; aplikasi.html!

#. Siapkan sebuah frameset #i%ed )op, Nested 1ight! L simpan dengan nama ;

Lat2rame#.htm

$. Isi frame sebelah atas #toprame! ; >udul.htmIsi frame sebelah kiri #mainrame! ; Sistem.htm

Isi frame sebelah kanan #rightrame! ; (ink.htm

%. (engkapi #edit! frame target pada flash button dengan main2rame

;. Simpan kembali semua file dengan 2ile *ave 0ll, lalu coba tampilkan dalam browser.

*7


29/41

MODUL : JUM+ MENU

Membuat ;ump menu :

1. lik posisi penempatan$ump menu ;

#. 5ilih menu Insert&2orm -b9ects&um+ Menu.

$. )uliskan label pilihan menu pada bagian Te9'5 '+N9 di atas dengan link sbb ;

*:


30/41

. INDEF.,TML G2R0ME*ET?

7. )ambahkan )A18+) 1A'+ pada >9'5 '+N9 di atas seluruhnya ke main2rame.

MODUL < : MEMBUAT MENU +O+. U+

Salah satu fasilitas menarik yang disediakan Dreamwea$er sebagai media na$igasi adalah

menu popup. 'enu pop-up digunakan terutama untuk na$igasi yang terdiri atas banyak link,

sehingga akan lebih efektif jika pilihan link dikelompokkan. Setiap kelompok akan memiliki

sebuah menu pop-up yang terdiri atas beberapa sublink..

-ara membuat menu pop.up :

1? Siapkan objek link #bisa berupa teks@image@roll-o$er image@hotspot! dan buatlah menjadi null

link dengan menuliskan


31/41

Latihan .1


32/41

*


33/41

'enu.html

Inde%.html #rameset!

0uat menu +o+6u+pada baris kedua 'enu.htm sbb ;

M-D8L 4 C0*C0DIN3 *T>LE *,EET GC**?

Membuat -SS

1? 5ilih menu TEFT & C** *T>LE* & NE'

#? )uliskan nama 2SS, tipe L letak pendefinisian, lalu klik tombol -

$? )entukan detail format 2SS yang diinginkan

Mengguna$an -SS

. 5ilih teks yang akan diberi style 2SS tertentu

*. 5ada bagian property, pilih nama 2SS yang diinginkan

Meng.e"!t -SS

1. 5ilih menu TEFT & C** *T>LE* & M0N03E *T>LE*

#. 5ilih nama 2SS yang akan di-edit, lalu klik tombol EDIT

$. (akukan perubahan format 2SS yang diinginkan

Membuat 8!le E=ternal -SS

1? 5ilih menu 2ILE & NE'

#? 5ada bagian C0TE3-R>pilih (0*IC )03E #sebelah kiri! J C** #sebelah kanan!$? 0uatlah semua style 2SS yang diperlukan

%? Simpanlah file ini dengan e%tension file .C**

Meman3aat$an 8!le E=ternal -SS

1. 5ilih menu TEFT & C** *T>LE* & M0N03E *T>LE*

#. 5ilih tombol 0TT0C,

$. lik tombol (R-'*E, lalu pilih nama file EFTERN0L C** yang diperlukan

%. lik tombol D-NE


34/41

;. Seluruh style dalam file e%ternal 2SS telah siap untuk dipakai

Latihan 4.1 Internal *tle *heet

0uat dua buah style sbb;

0. )ag ; .9udul: Selector type ; Class: Define in ; This document onl

)ype M ont ; Arial, SiPe ; 4 point, "eight ; 0old, Decoration ; 9nderline

(. )ag ; .isi: Selector type ; Class: Define in ; This document onl

)ype M ont ; ustify, )e%t Indent ; ? point

Latihan 4.# ELE.C**

0uat tiga buah style sbb ;

1. )ag ; .udul(esar: Selector type ; Class: Define in ; This document onl

)ype M ont ; 8eorgia, SiPe ; */ point, "eight ; 0old, 2ase ; 9ppercase

0lock M )e%t Align ; 2enter

0order Style ; Solid, "idth ; )hin

#. )ag ; .udulecil: Selector type ; Class: Define in ; This document onl

)ype M ont ; Arial, SiPe ; 7 point, "eight ; 0old, Decoration ; 9nderline

$. )ag ; .IsiTeks: Selector type ; Class: Define in ; This document onl

)ype M ont ; 2ourier, SiPe ; / point, Style ; Italic0lock M )e%t Align ; >ustify

Latihan 4.$ Rede"ine Ta!

0uatlah tiga buah tabel berikut ini;

alender Akademik

Semester 8anjil *??6@*??7

alender AkademikSemester 8enap *??6@*??7

Definisikan ulang dua buah style sbb ;

1. )ag #dipilih, bukan ditulis! ; th: Selector type ; Ta!: Define in ; This document onl

)ype M ont ;


35/41

0lock M )e%t Align ; 2enter

M-D8L 1K 'E( ,-*TIN3

"eb &osting is a ser$ice that pro$ides a physical location in which a web site resides.

2ustomersQ websites are stored on computer ser$ers located insecure and climate controlleden$ironments and permanently connected to the Internet through high-speed data lines.

2ustomers can work on local webpage files and then upload them to the ser$er. As soon as thepages are uploaded to the ser$er, they become li$e $isible to anyone surfing the "orld "ide "eb.

"eb hosting pro$iders usually charge a monthly fee for hosting ser$ices. Some pro$iders host

websites free of charge. In these cases, the ser$ices are usually paid for by the placement of small

ads on the sites being hosted.

itur Ideal Ser$er &osting

. Secure

*. 2limate controlled en$ironments

. 5ermanently connected to the Internet through high-speed data lines

Alternatif 5enempatan Ser$er

. Di lokasi user #di rumah@kantor sendiri!*. 9ser bebas mengelola ser$er-nya

. 9ntuk memperoleh kinerja ser$er yg ideal membutuhkan cost besar L skill admin yg

memadai 2o-location #menitipkan komputer ser$er pada suatu hosting pro$ider!

/. 5rasarana tempat@ruang L koneksi internet permanen berkecepatan tinggi ditangani olehhosting pro$ider

3. 2ost-nya relatif lebih kecil dibanding alternatif pertama

4. 'enggunakan jasa webhosting #menitipkan materi website pada suatu hosting pro$ider!

6. 2ost-nya paling rendah, bahkan ada yg gratis Ada timbal balik penempatan banner iklan

di website kita untuk layanan free web hosting

2ontoh 5roses &osting di 8eocities

(angkah ; 0rowse www.geocitiescom

3


36/41


(angkah * ; 1egistrasi #lik Sign 9p !

2ontoh 5roses &osting di 8eocities(angkah ; 'engisi form registrasi

4


37/41

6


38/41


(angkah / ; Info account hosting #I!


(angkah 3 ; 'engisi kuesioner

7


39/41


(angkah / ; Info account hosting #II!


(angkah 6 ; Sign-in

:


40/41


(angkah 7 ; lik 'anage


(angkah : ; 5ilih file yg akan di-upload

/?


41/41


(angkah ? ; Info hasil upload


(angkah ; 9ji hasil hosting

pengenalan internet & dreamweaver

Documents