Membuat Web Dengan Dreamweaver

PENGEMBANGAN
BAHAN BELAJAR
BERBASIS WEB
Andi Sulistiyono,
S.Kom
andi_sulistiyono@yahoo.com
0813.1972.9696
1
Curriculum Vitae
Pendidikan
 SD Negeri 2 Sadang - Kudus
 SMP Negeri 1 Jekulo - Kudus
 SMA Negeri 2 Kudus Malang
 Sistem Informasi – Universitas Dian Nuswantoro Semarang
Pengalaman Kerja
 Tahun 1998 - 2000 Asisten Laboratorium Komputer
Universitas Dian Nuswantoro Semarang

 Tahun 2000 - 2002 Instruktur Komputer di Sentra Pendidikan
Bisnis Magistra Utama Semarang

 Tahun 2004 masuk Pustekkom sebagai Programmer Multimedia, penulis
naskah pengetahuan populer, Team Leader pengerjaan Content Materi

Pokok dan Pengetahuan Populer, Pengkaji media penyusunan GBIM,
JM, Naskah pengetahuan populer dan Materi Pokok.
2
digunakan untuk
membuat website
3
digunakan untuk
membuat website
4
digunakan untuk
membuat website
5
Mengenal Software
Dreamweaver
6
Tampilan
Dreamweaver Menu
Bar
Title
Bar
Toolbar Insert
Toolbar Tool
Document Application
Toolbar
Standar
Status
bar
Properties
Inspector
7
Title Bar
Menu Bar
Standart toolbar
Document
Toolbar
Status Bar
Properties Inspector
8
Memulai Dengan Dreamweaver
Memberi nama site
1. Klik Site pada menubar kemudian pilih New Site
9
Membuat folder untuk penyimpanan
file
2. Isi kotak dialog Site Definition for website
Nama site
Folder untuk
menyimpan file html
Folder untuk
menyimpan file gambar
10
Application Files
3. Lihat pada Application Files
Nama site
Folder untuk gambar
11
Membuat file HTML
4. Buat file HTML klik kanan pada nama site yang
kita buat tadi kemudian pilih New File
Kemudian ketik nama file

yang akan anda buat,
file utama yang di buat
diberi nama index.html
12
Mengisi content file HTML
5. Mengisi file HTML, double klik nama file HTML yang telah kita buat.
13
14
Menyimpan Dokumen
15
Klik disini untuk
menjalankan
program
Menjalankan
program
16
Bekerja dengan
Code
Tag-tag
HTML
17
Tag-tag HTML
Command HTML biasanya disebut TAG, TAG digunakan untuk menentukan tampilan
dari document
HTML.
<BEGIN TAG> </END TAG>

Setiap document HTML di awali dan di akhiri dengan tag HTML.
Begin
<html> Tag
-
-
- End Tag
</html>
Tag tidak case sensitive, jadi anda bisa gunakan <HTML> atau <html> keduanya
menghasilkan
output yang sama.
Bentuk dari tag HTML sebagai berikut:
<Element Attribute = Value>

Element - nama tag
Attribute - atribut dari tag
Value - nilai dari atribut.
Contoh :
<body bgcolor="lavender">
BODY merupakan element, BGCOLOR(Background) merupakan atribut yang
memiliki nilai 18
Struktur
HTML
Document HTML bisa di bagi mejadi tiga bagian utama:
1. HTML
Setiap document HTML harus di awali dan di tutup dengan tag HTML
<HTML> </HTML>
tag HTML memberi tahu browser bahwa yang di dalam kedua tag tersebut adalah
document HTML.
2. HEAD
Bagian header dari document HTML di apit oleh tag <HEAD></HEAD> di dalam bagian
ini dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser.
<HEAD>
<TITLE> </TITLE>
</HEAD>
3. BODY
Document body di gunakan untuk menampilkan text, image link dan semua yang akan
di tampilkan pada web page.
<BODY> </BODY>
19
Contoh 1 :
<html>
<head>
<title>
Judul yang ada di pojok kiri atas pada
browser
</title>
</head>
hasil
<body>
Disini tempat menuliskan teks,
menyisipkan tabel, gambar, animasi dll.
</body>
</html>
Preview 1
20
Basic HTML Element
Block level element yang sering di gunakan : Heading (H1 sampai
H6)
Contoh :
<html>
<head>
<title>Heading Elemet</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4> hasil
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Preview 2
21
Paragraf (P)
Digunakan untuk memulai paragraf baru atau format paragraf
Contoh :
<html> hasil
<head>
<title>Formating Paragraf</title>
</head>
<body>
<h3>Pelatihan HTML</h3>
<p>
Palatihan HML di selenggarakan

oleh Pustekkom Diknas
</p>
</body>
</html>
Preview 3 [
22
List Item(LI)
List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun
yang tidak berurutan (unordered list).
Ada 2 macam list yang bisa anda tambahkan ke document HTML:
1. Unordered List / tidak berurutan (Bullet) :
Contoh :
<html>
<head>
<title>Unordere List</title>
</head>
<body>
Contoh penggunaan Unordered List
<p>
<ul type="circle">
<li>Senin</li>
<li>selasa</li>
<li>Rabu</li> hasil
<li>Kamis</li>
<li>Jumat</li>
<li>Sabtu</li>
<li>Minggu</li>
</ul></body>
</html>
Preview 4
23
Unordered List / tidak berurutan
(Bullet) :
Tag Attribute Value Description

<U TYPE SQUARE Bullet
L DISC Kotak
> CIRCLE Bullet Titik
Bullet
Lingkara
n
24
List Item (LI)
2. Ordered List / Berurutan
(Numbering)
Contoh :
<html>
<head>
<title>Ordere List</title>
</head>
<body>
Scedule Pelatihan HTML
<p>
hasil
<ol start="1" type="I">
<li>Senin</li>
<ol type="a">
<li>Pengenalan HTML</li>
<li>Membuat halaman
web</li>
</ol>
<li>Selasa</li>
<ol type="A">
<li>Membuat Tabel</li>
<li>menambahkan
Gambar</li>
</ol>
<li>Rabu</li>
<ol type="i">
<li>Membuat Link</li>
Preview 5
25
</ol>
Ordered List / Berurutan
(Numbering)
Tag Attribut Value Description

e
<OL> TYPE I Lower Roman
i Uper Roman
A Uppercase
a Lowercase
<OL> START n Begin Number
26
Pemformatan
Halaman
1. Begin row (BR)
Tag <BR> di gunakan untuk memulai baris baru pada document
HTML.
Contoh:
<html>
<head>
<title>br</title>
</head>
<body>
<center>HALAMAN WEB PUSTEKKOM</center> hasil
<p>
Pustekkom Depdiknas<br>
Jl. Cendrawasik Km 15.5 <br><br>
Link terkait
www.e-dukasi.net
</body>
</html>
Preview 6
Ganti baris
27
2. Format Font
Dengan tag <FONT> anda bisa menentukan format tampilan font dalam document
HTML
seperti color, size, style dan lainya.
Contoh:
<html>
<head>
<title>Pelatihan Produksi PengPop</title>
</head>
<body>
<font color="#0000FF" size=”2”
face="Verdana, Arial, Helvetica, sans-serif"> hasil
Pelatihan Produksi PengPop Tahap 1
</font>
</body>
</html>
Preview 7
28
Attribute Format Font
Attribute Description
Color Untuk menentukan warna font, anda bisa menggunakan nama font
atau hexadecimal(#000000 - #ffffff)
Size Untuk menentukan ukuran dari font 1 - 7
face Untuk menentukan jenis font biasanya dalam satu list ada beberapa
font dan akan di baca mulai dari yangpaling kiri.
29
Alignment
Align attribute digunakan untuk menentukan perataan object dalam document
HTML baik berupa text, object, image, paragraph, division dan lain-lain.
Value Description Format

Text
Tag Description
Left Rata Kiri
<B>…</B> Cetak tebal
Right Rata kanan
<I>…</I> Cetak miring
Center Rata <U>…</U> Cetak garis bawah
tengah
<BIG>…</BIG> Untuk ukuran yang
Justify Rata kanan lebih
kiri besar dari normal
<SMALL>… Untuk ukuran yang
</SMALL> lebih
kecil dari normal
<STRIKE>… Untuk memberi
</STRIKE> garis di
tengah text
<SUP>…</SUP> Superscript text
<SUB>…</SUB> Subcript text>
30
Navigasi / Hyperlink
Berfungsi untuk memanggil halaman lain yang terkait baik dalam satu alamat web
tersebut atau ke alamat web lain.
Contoh :
Halaman web Pustekkom yang memanggil halaman web
edukasinet
<html>
<head>
<title>Link 1</title>
</head>
<body>
<center>HALAMAN WEB PUSTEKKOM</center>
<p>
Pustekkom Depdiknas<br>
Jl. Cendrawasih Km 15.5 <br><br>
Link terkait
<a href="link2.html">www.e-dukasi.net</a>
</body>
</html>
Preview 8
31
Navigasi / Hyperlink
Hyperlink dalam satu halaman web (Anchor)
<html><head>
<title>Link 2</title>
</head>
<center>
<h1><font face="Verdana, Arial, Helvetica, sans-serif"
color="#0033FF">
HALAMAN WEB EDUKASINET</font></h1></center>
<br>
<center><h4><font face="Verdana, Arial, Helvetica, sans-serif"
color="#0033FF">
<a href="#mapok">materi pokok</a> | <a href="#mol">modul
online</a> | pengetahuan populer | uji kompetensi
</font></h4>
<p align="left">
<font face="Verdana, Arial, Helvetica, sans-serif"
color="#FF9900">
Materi Pokok</font><a name="mapok"></a></p>
</center>
<font face="Verdana, Arial, Helvetica, sans-serif"
color="#FF9900">
Modul Online</font> <a name="mol"></a></p>
Preview
</body> 9
</html>
32
Tabel
Tag <TABLE> digunakan untuk membuat table dalam document HTML
,bagian pokok dari table adalah cell yang didefinisikan dengan
menggunakan
Contoh :
tag <TD>.
<html>
<head>
<title>tabel 1</title>
</head>
<body>
<center><h1>TABEL</h1></center>
<p>
<table border="1">
<tr>
<td>Tabel dengan single cell</td>
<td>Tabel dengan dua cell</td>
<td>Tabel dengan tiga cell</td>
<td>Tabel dengan empat cell</td>
</tr>
<tr>
<td align="center">A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
</table>
</body> Preview 10
</html> 33
Menambahkan gambar &
animasi
Anda dapat menambahkan gambar dan animasi pada halaman web yang
anda buat.
Contoh :
<html>
<head>
<title>Gambar</title>
</head>
<body>
<center><h1>Insert Gambar</h1></center>
<p>
Insert gambar di sini
<p><img src="image/satu.jpg" height="500"
width="369">
</body>
</html>
Preview 11
34
Bekerja dengan Design
View
Input title disini
Area anda
mengetik
naskah
35
Page Properties -
Appearance
36
Page Properties - Links
37
Page Properties-
Heading
38
Properties Inspector
Digunakan untuk memformat teks
Font face
Font Size Hyperlink
Font color
Alignment
39
Insert Image & Media
Digunakan untuk menambahkan gambar atau media lain(animasi/video) ke dalam
lembar kerja
1. Insert Image
Pilih file gambarnya
40
2. Insert Animasi
41
3. Insert Flash Button
42
Rollover Image
Gambar
1
Gambar
2
43
Table
Menambahkan tabel ke dalam lembar kerja
atau
44
Table Properties
Digunakan untuk memberikan attribut-attribut pada tebal
banyaknya
lebar & tinggi Jarak spasi
baris & kolom tabel dalam cell Perataan
warna garis
pinggir
Warna Gambar latar Jarak spasi ketebalan

background belakang antar cell garis pinggir
45
Navigasi/Hyperlink
Digunakan untuk menghubungkan antar file html dalam satu website atau dengan
website lain.
1. Hyperlink ke alamat website lain
Atau pada properties inspector
46
Navigasi/Hyperlink
2. Anchor / Link dalam satu halaman
web
2. Klik icon
Anchor
1. Blok bagian yang

akan di panggil
Ketik nama anchor

disini
47
Navigasi/Hyperlink
2. Anchor / Link dalam satu halaman
web
Blok menu yang di

gunakan untuk
memanggil/link
Ketik nama bagian yang

akan di panggil (anchor)
48
Cascading Style Sheet (CSS)
CSS digunakan untuk mempermudah dalam pemformatan tampilan halaman
web
Klik tanda +
untuk
menambah css
49
50
Ketik nama
css
51
Terima
kasih
Sukses Untuk Kita
Semua 52

Membuat Web Dengan Dreamweaver

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Membuat Web Dengan Dreamweaver

Uploaded by

Copyright:

Available Formats

PENGEMBANGAN

 SMP Negeri 1 Jekulo - Kudus

 SMA Negeri 2 Kudus Malang

 Sistem Informasi – Universitas Dian Nuswantoro Semarang

Universitas Dian Nuswantoro Semarang

Bisnis Magistra Utama Semarang

naskah pengetahuan populer, Team Leader pengerjaan Content Materi

1. Klik Site pada menubar kemudian pilih New Site

2. Isi kotak dialog Site Definition for website

Folder untuk gambar

Kemudian ketik nama file

<BEGIN TAG> </END TAG>

<Element Attribute = Value>

Palatihan HML di selenggarakan

1. Unordered List / tidak berurutan (Bullet) :

Tag Attribute Value Description

Tag Attribut Value Description

Size Untuk menentukan ukuran dari font 1 - 7

Value Description Format

Font Size Hyperlink

Pilih file gambarnya

Warna Gambar latar Jarak spasi ketebalan

Atau pada properties inspector

1. Blok bagian yang

Ketik nama anchor

Blok menu yang di

Ketik nama bagian yang

You might also like