You are on page 1of 53

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 K udus Malang Sistem Informasi – Universitas Dian Nuswantoro Semarang Pengalaman Ker ja Tahun 1998 - 2000 Asisten Laboratorium Komputer Universitas Dian Nuswantoro S emarang Tahun 2000 - 2002 Instruktur Komputer di Sentra Pendidikan Bisnis Magist ra Utama Semarang Tahun 2004 masuk Pustekkom sebagai Programmer Multimedia, penu lis naskah pengetahuan populer, Team Leader pengerjaan Content Materi Pokok dan Pengetahuan Populer, Pengkaji media penyusunan GBIM, JM, Naskah pengetahuan popu ler 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 Toolbar Insert Menu Bar Title Bar Toolbar Document Tool Application Toolbar Standar Properties Inspector Status bar 7 .

Title Bar Menu Bar Standart toolbar Document Toolbar Status Bar Properties Inspector 8 .

Klik Site pada menubar kemudian pilih New Site 9 .Memulai Dengan Dreamweaver Memberi nama site 1.

Isi kotak dialog Site Definition for website Nama site Folder untuk menyimpan file html Folder untuk menyimpan file gambar 10 .Membuat folder untuk penyimpanan file 2.

Application Files 3. Lihat pada Application Files Nama site Folder untuk gambar 11 .

file utama yang di buat diberi nam a index.Membuat file HTML 4. Buat file HTML klik kanan pada nama site yang kita buat tadi kemudian pilih N ew File Kemudian ketik nama file yang akan anda buat.html 12 .

double klik nama file HTML yang telah kita buat.Mengisi content file HTML 5. 13 . Mengisi file HTML.

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.nama tag Attribute . jadi anda bisa gunakan <HTML> atau <html> keduanya men ghasilkan output yang sama. Contoh : <body bgcolor="lavender"> BODY merupakan element. <html> </html> Begin Tag End Tag Tag tidak case sensitive. TAG digunakan untuk menentukan tampilan dari document HTML.atribut dari tag Value . Bentuk dari tag HTML sebagai berikut: <Element Attri bute = Value> Element . BGCOLOR(Bac kground) merupakan atribut yang memiliki nilai 18 . <BEGIN TAG> </END TAG> Setiap document HTML di awali dan di akhir i dengan tag HTML.nilai dari atribut.

HEAD Bagian header dari document HTML di apit oleh tag <HE AD></HEAD> di dalam bagian ini dimuat tag TITLE yang menampilkan judul dari hala man pada titlenya browser. <BODY> </BODY> 19 . 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 ada lah document HTML. <HEAD> <TITLE> </TITLE> </HEAD> 3. image link dan semua yang akan di tampilkan pada web page. 2.Struktur HTML bisa di bagi mejadi tiga bagian utama: Document HTML 1. BODY Document body di gunakan untuk menampilkan text.

menyisipkan tabel. </body> </html> Preview 1 hasil 20 .Contoh 1 : <html> <head> <title> Judul yang ada di pojok kiri atas pada browser </title> </ head> <body> Disini tempat menuliskan teks. animasi d ll. gambar.

Basic HTML Element Block level element yang sering di gunakan : Heading (H1 sampai H6) Contoh : <ht ml> <head> <title>Heading Elemet</title> </head> <body> <h1>Heading 1</h1> <h2>H eading 2</h2> <h3>Heading 3</h3> hasil <h4>Heading 4</h4> <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> <head > <title>Formating Paragraf</title> </head> <body> <h3>Pelatihan HTML</h3> <p> P alatihan HML di selenggarakan oleh Pustekkom Diknas </p> </body> </html> hasil Preview 3 [ 22 .

Unordered List / tidak berurutan (Bullet) : Contoh : < html> <head> <title>Unordere List</title> </head> <body> Contoh penggunaan Unord ered List <p> <ul type="circle"> <li>Senin</li> <li>selasa</li> <li>Rabu</li> ha sil <li>Kamis</li> <li>Jumat</li> <li>Sabtu</li> <li>Minggu</li> </ul></body> </ html> Preview 4 23 .List Item(LI) List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) mau pun yang tidak berurutan (unordered list). Ada 2 macam list yang bisa anda tamba hkan ke document HTML: 1.

Unordered List / tidak berurutan (Bullet) : Tag Attribute <U TYPE L > Value SQUARE DISC CIRCLE Description Bullet Kotak Bullet Titik Bullet Lingkara n 24 .

List Item (LI) 2. Ordered List / Berurutan (Numbering) Contoh : <html> <head> <title>Ordere Lis t</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"> Preview 5 <li>Membuat Link</li> </ ol> 25 .

Ordered List / Berurutan (Numbering) Tag <OL> Attribut e TYPE Value I i A a n Description Lower Roman Uper Roman Uppercase Lowercase Begin Number <OL> START 26 .

Cendrawasik Km 15.net </body> </html> hasil Preview 6 Ganti baris 27 . Begin row (BR) Halaman Tag <BR> di gunakan untuk memulai baris baru pada document HTML.e-d ukasi.Pemformatan 1. Contoh: <html> <head> <title>br</title> </head> <body> <center>HALAMAN WEB PUSTEKKOM</center> < p> Pustekkom Depdiknas<br> Jl.5 <br><br> Link terkait www.

sans-serif"> Pelatihan Produksi PengPop Tahap 1 </font> </body > </html> hasil Preview 7 28 .2. style dan lainya. Contoh: <html> <head> <title>Pelatihan Pr oduksi PengPop</title> </head> <body> <font color="#0000FF" size=”2” face="Verdana. Helvetica. Format Font Dengan tag <FONT> anda bisa menentukan format tampilan font dalam document HTML seperti color. size. Arial.

Attribute Format Font Attribute Color Description Untuk menentukan warna font. anda bisa menggunakan nama font atau he xadecimal(#000000 .#ffffff) Untuk menentukan ukuran dari font 1 .7 Untuk menen tukan jenis font biasanya dalam satu list ada beberapa font dan akan di baca mul ai dari yangpaling kiri. Size face 29 .

division dan lain-lain. Value Left Right Center Justify Description Rata Kiri Rata kanan Rata tengah Rata kanan kiri Format Text Tag <B>…</B> <I>…</I> <U>…</U> <BIG>…</BIG> <SMALL>… </SMALL> <STRIKE>… </STRIKE> <SUP>…</SUP> B>…</SUB> Description Cetak tebal Cetak miring Cetak garis bawah Untuk ukuran yang lebih b esar dari normal Untuk ukuran yang lebih kecil dari normal Untuk memberi garis d i tengah text Superscript text Subcript text> 30 . object. paragraph.Alignment Align attribute digunakan untuk menentukan perataan object dalam document HTML b aik berupa text. image.

net</a> </body> </html> Preview 8 31 .e-dukasi. Cendrawasih Km 15.Navigasi / Hyperlink Berfungsi untuk memanggil halaman lain yang terkait baik dalam satu alamat web t ersebut atau ke alamat web lain.5 <br><br> Link terkait <a href ="link2.html">www. Contoh : Halaman web Pustekkom yang memanggil halaman web edukasinet <html> <hea d> <title>Link 1</title> </head> <body> <center>HALAMAN WEB PUSTEKKOM</center> < p> Pustekkom Depdiknas<br> Jl.

sans-serif" color="#0033FF"> HALAMAN WEB EDUKASINET</font></h1></ center> <br> <center><h4><font face="Verdana. Helvetica. Ari al. Helvetica. Arial. Helvetica. sans-seri f" color="#FF9900"> Modul Online</font> <a name="mol"></a></p> </body> Preview 9 </html> 32 . Arial. sans-serif" colo r="#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. Helvetica.Navigasi / Hyperlink Hyperlink dalam satu halaman web (Anchor) <html><head> <title>Link 2</title> </head> <center> <h1><font face="Verdana. sans-serif" color="#FF9900"> Materi Pokok</font><a name="mapok"></a></p> </center> <font face="Verdana. Arial.

Contoh : <html> <head> <title>tabel 1</title> </head> <body> <center><h1>TABEL</h1></cent er> <p> <table border="1"> <tr> <td>Tabel dengan single cell</td> <td>Tabel deng an 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 .bagian pokok dari table adalah cell yang didefinisikan dengan menggunakan tag <TD>.Tabel Tag <TABLE> digunakan untuk membuat table dalam document HTML .

Menambahkan gambar & Anda dapat menambahkan gambar dan animasi pada halaman web yang animasi anda buat. Contoh : <html> <head> <title>Gambar</title> </head> <body> <center><h1>Insert G ambar</h1></center> <p> Insert gambar di sini <p><img src="image/satu.jpg" heigh t="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 PropertiesHeading 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 lemba r kerja 1. Insert Image Pilih file gambarnya 40 .

Insert Image & Media 2. Insert Animasi 41 .

Insert Flash Button 42 .Insert Image & Media 3.

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 baris & kolom lebar & tinggi tabel Jarak spasi dalam cell Perataan warna garis pinggir Warna background Gambar latar belakang Jarak spasi antar cell ketebalan garis pinggir 45 .

Hyperlink ke alamat website lain Digunakan untuk menghubungkan antar file html dalam satu website atau dengan web site lain.Navigasi/Hyperlink 1. Atau pada properties inspector 46 .

Blok bagian yang akan di panggil Ketik nama anchor disini 47 . Anchor / Link dalam satu halaman web 2.Navigasi/Hyperlink 2. Klik icon Anchor 1.

Navigasi/Hyperlink 2. Anchor / Link dalam satu halaman web Blok menu yang di gunakan untuk memanggil/link Ketik nama bagian yang akan di pa nggil (anchor) 48 .

Cascading Style Sheet (CSS) CSS digunakan untuk mempermudah dalam pemformatan tampilan halaman web Klik tanda + untuk menambah css 49 .

Cascading Style Sheet (CSS) 50 .

Cascading Style Sheet (CSS) Ketik nama css 51 .

Terima kasih Sukses Untuk Kita Semua 52 .