PENGEMBANGAN BAHAN BELAJAR

(1)

1

Andi Sulistiyono,

S.Kom

[email protected]

0813.1972.9696

PENGEMBANGAN

BAHAN BELAJAR

BERBASIS WEB

(2)

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)

3

Software yang

digunakan untuk

membuat website

(4)

4

Software yang

digunakan untuk

membuat website

(5)

5

Software yang

digunakan untuk

membuat website

(6)

6

Mengenal Software

Dreamweaver

(7)

7

Tampilan

Dreamweaver

Title Bar Menu Bar Toolbar Insert Toolbar Document Toolbar Standar Properties Inspector Status bar Tool Application

(8)

8

Title Bar

Menu Bar

Standart toolbar

Document

Toolbar

Status Bar

Properties Inspector

(9)

9

1. Klik

Site

pada menubar kemudian pilih

New Site

Memulai Dengan Dreamweaver

(10)

10

2. Isi kotak dialog Site Definition for website

Nama site Folder untuk

menyimpan file html Folder untuk

menyimpan file gambar

Membuat folder untuk penyimpanan

file

(11)

11

3. Lihat pada

Application Files

Nama site

Folder untuk gambar

(12)

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)

13

5. Mengisi file

HTML,

double klik nama file

HTML yang telah kita buat.

(14)

(15)

15

Menyimpan Dokumen

(16)

16

Klik disini untuk menjalankan program

Menjalankan

program

(17)

17

Bekerja dengan

Code

Tag-tag

HTML

(18)

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)

19

Document HTML bisa di bagi mejadi tiga bagian utama:

Struktur

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)

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

hasil

(21)

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)

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

(23)

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)

24

Bullet

Kotak

Bullet Titik

Bullet

Lingkara

n

SQUARE

DISC

CIRCLE

TYPE

<U

L

>

Description

Value

Attribute

Tag

Unordered List / tidak berurutan

(Bullet) :

(25)

25

List Item (LI)

2. Ordered List / Berurutan (Numbering) Contoh : <html> <head> <title>Ordere List</title> </head> <body> Scedule Pelatihan HTML <p>

<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> </ol> </ol></body></html>

Preview 5

hasil

(26)

26

Begin Number

n

START

<OL>

Lower Roman

Uper Roman

Uppercase

Lowercase

I

i

A

a

TYPE

<OL>

Description

Value

Attribut

e

Tag

Ordered List / Berurutan

(Numbering)

(27)

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> Jl. Cendrawasik Km 15.5 <br><br> Link terkait www.e-dukasi.net </body> </html>

Preview 6

hasil Ganti baris

(28)

28

2. Format Font

Dengan tag <FONT> anda bisa menentukan format tampilan font dalam document HTML

seperti color, size, style dan lainya.

Contoh:

<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)

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)

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>

Cetak garis bawah

<U>…</U>

Cetak miring

<I>…</I>

Cetak tebal

<B>…</B>

Description

Tag

(31)

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>

Preview 8

(32)

32

Navigasi / Hyperlink

HALAMAN WEB EDUKASINET</font></h1></center> <br>

<a href="#mapok">materi pokok</a> | <a href="#mol">modul online</a> | pengetahuan populer | uji kompetensi

</font></h4> <p align="left">

Materi Pokok</font><a name="mapok"></a></p> </center>

Modul Online</font> <a name="mol"></a></p> </body>

</html>

Hyperlink dalam satu halaman web (Anchor)

(33)

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> </html>

Preview 10

(34)

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

<p><img src="image/satu.jpg" height="500"

width="369"> width="369"> </body> </body> </html> </html>

Preview 11

(35)

35

Bekerja dengan Design

View

Area anda

mengetik

naskah

Input title disini

(36)

36

Page Properties -

Appearance

(37)

37

Page Properties - Links

(38)

38

Page

Properties-Heading

(39)

39

Properties Inspector

Digunakan untuk memformat teks

Font face Font face Font Size Font Size Font color Font color Alignment Alignment Hyperlink Hyperlink

(40)

40

Insert Image & Media

Digunakan untuk menambahkan gambar atau media lain(animasi/video) ke dalam lembar kerja

Pilih file gambarnya

(41)

41

Insert Image & Media

(42)

42

Insert Image & Media

(43)

43

Rollover Image

Gambar 1 Gambar 2

(44)

44

Table

Menambahkan tabel ke dalam lembar kerja

(45)

45

Table Properties

Digunakan untuk memberikan attribut-attribut pada tebal

banyaknya baris & kolom

lebar & tinggi tabel Jarak spasi dalam cell Jarak spasi antar cell Warna background Gambar latar belakang Perataan ketebalan garis pinggir warna garis pinggir

(46)

46

Navigasi/Hyperlink

Digunakan untuk menghubungkan antar file html dalam satu website atau dengan website lain.

Atau pada properties inspector

1. Hyperlink ke alamat website lain

(47)

47

Navigasi/Hyperlink

2. Anchor / Link dalam satu halaman

web

1. Blok bagian yang akan di panggil

2. Klik icon Anchor

Ketik nama anchor disini

(48)

48

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)

(49)

49

Cascading Style Sheet (CSS)

CSS digunakan untuk mempermudah dalam pemformatan tampilan halaman web

Klik tanda + untuk menambah css

(50)

50

(51)

51

Cascading Style Sheet (CSS)

Ketik nama css

(52)

52