1
Andi Sulistiyono,
Andi Sulistiyono,
S.Kom
S.Kom
andi_sulistiyono@yahoo.com
0813.1972.9696
0813.1972.9696
PENGEMBANGAN
PENGEMBANGAN
BAHAN BELAJAR
BAHAN BELAJAR
BERBASIS WEB
2
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.
Curriculum Vitae
3
Software yang
Software yang
digunakan untuk
digunakan untuk
membuat website
4
Software yang
Software yang
digunakan untuk
digunakan untuk
membuat website
5
Software yang
Software yang
digunakan untuk
digunakan untuk
membuat website
6
Mengenal Software
Mengenal Software
Dreamweaver
7
Tampilan
Tampilan
Dreamweaver
Dreamweaver
TitleBar Menu
Bar Toolbar Insert
Toolbar Document
Toolbar Standar Properties
Inspector
Status bar Tool
8
Title Bar
Title Bar
Menu Bar
Menu Bar
Standart toolbar
Standart toolbar
Document
Document
Toolbar
Toolbar
Status Bar
Status Bar
9
1. Klik
Site
pada menubar kemudian pilih
New Site
Memulai Dengan Dreamweaver
10
2. Isi kotak dialog Site Definition for website
Nama site Folder untuk
menyimpan file html Folder untuk
menyimpan file gambar
11
3. Lihat pada
Application Files
Nama site
Folder untuk gambar
12
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
13
5. Mengisi file
HTML,
double klik nama file
HTML yang telah kita buat.
15
Menyimpan Dokumen
16
Klik disini untuk menjalankan
program
Menjalankan
Menjalankan
program
17
Bekerja dengan
Code
Tag-tag
Tag-tag
HTML
18
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.
<html>
-</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
lavender.
Begin
Tag
19
Document HTML bisa di bagi mejadi tiga bagian utama:
Struktur
Struktur
HTML
HTML
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.
20
<html>
<head>
<title>
Judul yang ada di pojok kiri atas pada
browser
</title>
</head>
<body>
Disini tempat menuliskan teks,
menyisipkan tabel, gambar, animasi dll.
</body>
</html>
Contoh 1 :
Preview 1
21 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> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html>
Basic HTML Element
Block level element yang sering di gunakan : Heading (H1 sampai H6)
Preview 2
hasil
22 Contoh : <html> <head> <title>Formating Paragraf</title> </head> <body> <h3>Pelatihan HTML</h3> <p>
Palatihan HML di selenggarakan oleh Pustekkom Diknas
</p> </body> </html>
Paragraf (P)
Digunakan untuk memulai paragraf baru atau format paragraf
Preview 3
hasil
hasil
23
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> <li>Kamis</li> <li>Jumat</li> <li>Sabtu</li> <li>Minggu</li> </ul></body> </html>
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:
Preview 4
hasil
24
Bullet
Kotak
Bullet Titik
Bullet
Lingkara
n
SQUARE
DISC
CIRCLE
TYPE
<U
L
>
Description
Value
Attribute
Tag
25
List Item (LI)
2. Ordered List / Berurutan (Numbering) Contoh : <html> <head> <title>Ordere List</title> </head> <body>
Scedule Pelatihan HTML <p>
[image:25.720.6.709.9.521.2]26
Begin Number
n
START
<OL>
Lower Roman
Uper Roman
Uppercase
Lowercase
I
i
A
a
TYPE
<OL>
Description
Value
Attribut
e
Tag
27
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> <p>
Pustekkom Depdiknas<br>
28
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"> Pelatihan Produksi PengPop Tahap 1
</font> </body> </html>
Preview 7
29
Untuk menentukan jenis font biasanya dalam satu list ada beberapa font dan akan di baca mulai dari yangpaling kiri.
face
Untuk menentukan ukuran dari font 1 - 7 Size
Untuk menentukan warna font, anda bisa menggunakan nama font atau hexadecimal(#000000 - #ffffff)
Color
Description Attribute
30
Alignment
Align attribute digunakan untuk menentukan perataan object dalam document HTML baik berupa text, object, image, paragraph, division dan lain-lain.
Rata kanan
kiri
Justify
Rata
tengah
Center
Rata kanan
Right
Rata Kiri
Left
Description
Value
Format
Text
Subcript text>
<SUB>…</SUB>
Superscript text
<SUP>…</SUP>
Untuk memberi
garis di
tengah text
<STRIKE>…
</STRIKE>
Untuk ukuran yang
lebih
kecil dari normal
<SMALL>…
</SMALL>
Untuk ukuran yang
lebih
besar dari normal
<BIG>…</BIG>
31
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>
32
Navigasi / Hyperlink
<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> </body>
</html>
Hyperlink dalam satu halaman web (Anchor)
33
Tabel
Tag <TABLE> digunakan untuk membuat table dalam document HTML
,bagian pokok dari table adalah cell yang didefinisikan dengan
menggunakan tag <TD>.
Contoh :<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>
34
Menambahkan gambar &
animasi
Anda dapat menambahkan gambar dan animasi pada halaman web yang anda buat. Contoh : Contoh : <html> <html> <head> <head> <title>Gambar</title> <title>Gambar</title> </head> </head> <body> <body> <center><h1>Insert Gambar</h1></center> <center><h1>Insert Gambar</h1></center> <p> <p>Insert gambar di sini
Insert gambar di sini
<p><img src="image/satu.jpg" height="500"
<p><img src="image/satu.jpg" height="500"
35
Bekerja dengan Design
Bekerja dengan Design
View
View
Area anda
mengetik
naskah
Input title disini
36
Page Properties -
Page Properties -
Appearance
37
Page Properties - Links
38
Page
Page
Properties-Heading
39
Properties Inspector
Digunakan untuk memformat teks
Font face
Font face
Font Size
Font Size
Font color
Font color
Alignment
Alignment
Hyperlink
40
Insert Image & Media
Digunakan untuk menambahkan gambar atau media lain(animasi/video) ke dalam lembar kerja
Pilih file gambarnya
Pilih file gambarnya
41
Insert Image & Media
42
Insert Image & Media
43
[image:43.720.130.702.8.526.2]Rollover Image
Gambar 1
44
Table
Menambahkan tabel ke dalam lembar kerja
[image:44.720.12.711.15.508.2]45
Table Properties
Digunakan untuk memberikan attribut-attribut pada tebal
banyaknya baris & kolom
46
Navigasi/Hyperlink
Digunakan untuk menghubungkan antar file html dalam satu website atau dengan website lain.
47
Navigasi/Hyperlink
2. Anchor / Link dalam satu halaman
web
1. Blok bagian yang akan di panggil
2. Klik icon Anchor
48
Navigasi/Hyperlink
2. Anchor / Link dalam satu halaman
web
Blok menu yang di gunakan untuk memanggil/link
49
Cascading Style Sheet (CSS)
CSS digunakan untuk mempermudah dalam pemformatan tampilan halaman web
50
51
Cascading Style Sheet (CSS)
52
Terima
Terima
kasih
kasih
Sukses Untuk Kita
Sukses Untuk Kita
Semua