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.
7/23/2019 Pengenalan Internet & Dreamweaver
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.
*
7/23/2019 Pengenalan Internet & Dreamweaver
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.
7/23/2019 Pengenalan Internet & Dreamweaver
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,
7/23/2019 Pengenalan Internet & Dreamweaver
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
7/23/2019 Pengenalan Internet & Dreamweaver
6/41
D. )eknologi
4
7/23/2019 Pengenalan Internet & Dreamweaver
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
7/23/2019 Pengenalan Internet & Dreamweaver
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
7/23/2019 Pengenalan Internet & Dreamweaver
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.
:
7/23/2019 Pengenalan Internet & Dreamweaver
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.
?
7/23/2019 Pengenalan Internet & Dreamweaver
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
7/23/2019 Pengenalan Internet & Dreamweaver
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.
*
7/23/2019 Pengenalan Internet & Dreamweaver
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.
7/23/2019 Pengenalan Internet & Dreamweaver
14/41
Latihan 1.#
Salinlah teks berikut ini lalu copy-kan *% ke bagian bawah ;
0uatlah menjadi unordered list dan ordered list sbb ;
/
7/23/2019 Pengenalan Internet & Dreamweaver
15/41
Latihan 1.$
Salinlah teks berikut ini lalu copy-kan *% ke bagian bawah ;
Aturlah hingga menjadi teks bertingkat seperti di bawah ini ;
3
7/23/2019 Pengenalan Internet & Dreamweaver
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
7/23/2019 Pengenalan Internet & Dreamweaver
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
7/23/2019 Pengenalan Internet & Dreamweaver
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
7/23/2019 Pengenalan Internet & Dreamweaver
19/41
LLatihan $.1L
0uatlah teks berikut ini ;
)ambahkan hyperlink dan e-mail link sbb ;
Latihan $.#
0uatlah halaman-halaman web berikut ini ;
:
7/23/2019 Pengenalan Internet & Dreamweaver
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
*?
7/23/2019 Pengenalan Internet & Dreamweaver
21/41
Latihan $.%L
0uatlah teks berikut ini ;
MODUL / : MERAN-ANG LA*OUT )ALAMAN 0EB
L
Latihan %.1
. 0uatlah layout berupa table pertama sbb ;
*. 9bahlah format table sehingga berbentuk ;
*
7/23/2019 Pengenalan Internet & Dreamweaver
22/41
. (engkapi halaman web sehingga tampilannya menjadi ;
/. )ambahkan link sebagai berikut ;
3. 0erdasarkan layout tadi, buatlah / buah halaman web berikut ini ;
**
7/23/2019 Pengenalan Internet & Dreamweaver
23/41
*
7/23/2019 Pengenalan Internet & Dreamweaver
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 -
*/
7/23/2019 Pengenalan Internet & Dreamweaver
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
7/23/2019 Pengenalan Internet & Dreamweaver
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
7/23/2019 Pengenalan Internet & Dreamweaver
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.
'uncul pada frame bawah.
Dok$.htmlM 0ackground ; hijau muda
Ini adalah isi Dokumen etiga.
'uncul pada frame bawah.
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
7/23/2019 Pengenalan Internet & Dreamweaver
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
7/23/2019 Pengenalan Internet & Dreamweaver
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 ;
*:
7/23/2019 Pengenalan Internet & Dreamweaver
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
7/23/2019 Pengenalan Internet & Dreamweaver
31/41
Latihan .1
7/23/2019 Pengenalan Internet & Dreamweaver
32/41
*
7/23/2019 Pengenalan Internet & Dreamweaver
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
7/23/2019 Pengenalan Internet & Dreamweaver
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 ;
7/23/2019 Pengenalan Internet & Dreamweaver
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
7/23/2019 Pengenalan Internet & Dreamweaver
36/41
2ontoh 5roses &osting di 8eocities
(angkah * ; 1egistrasi #lik Sign 9p !
2ontoh 5roses &osting di 8eocities(angkah ; 'engisi form registrasi
4
7/23/2019 Pengenalan Internet & Dreamweaver
37/41
6
7/23/2019 Pengenalan Internet & Dreamweaver
38/41
2ontoh 5roses &osting di 8eocities
(angkah / ; Info account hosting #I!
2ontoh 5roses &osting di 8eocities
(angkah 3 ; 'engisi kuesioner
7
7/23/2019 Pengenalan Internet & Dreamweaver
39/41
2ontoh 5roses &osting di 8eocities
(angkah / ; Info account hosting #II!
2ontoh 5roses &osting di 8eocities
(angkah 6 ; Sign-in
:
7/23/2019 Pengenalan Internet & Dreamweaver
40/41
2ontoh 5roses &osting di 8eocities
(angkah 7 ; lik 'anage
2ontoh 5roses &osting di 8eocities
(angkah : ; 5ilih file yg akan di-upload
/?
7/23/2019 Pengenalan Internet & Dreamweaver
41/41
2ontoh 5roses &osting di 8eocities
(angkah ? ; Info hasil upload
2ontoh 5roses &osting di 8eocities
(angkah ; 9ji hasil hosting
Top Related