Andi Sulistiyono, S.Kom

andi_sulistiyono@yahoo.com

0813.1972.9696

PENGEMBANGAN BAHAN BELAJAR BERBASIS WEB

PendidikanSD Negeri 2 Sadang - KudusSMP Negeri 1 Jekulo - KudusSMA Negeri 2 Kudus MalangSistem Informasi Universitas Dian Nuswantoro SemarangPengalaman KerjaTahun 1998 - 2000 Asisten Laboratorium Komputer Universitas Dian Nuswantoro SemarangTahun 2000 - 2002 Instruktur Komputer di Sentra Pendidikan Bisnis Magistra Utama SemarangTahun 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

Software yang digunakan untuk membuat website

Software yang digunakan untuk membuat website

Software yang digunakan untuk membuat website

Mengenal Software Dreamweaver

Tampilan DreamweaverTitle BarMenu BarToolbar InsertToolbar DocumentToolbar StandarProperties InspectorStatus barTool Application

Title BarMenu BarStandart toolbarDocument ToolbarStatus BarProperties Inspector

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

2. Isi kotak dialog Site Definition for websiteNama siteFolder untuk menyimpan file htmlFolder untuk menyimpan file gambarMembuat folder untuk penyimpanan file

3. Lihat pada Application FilesNama siteFolder untuk gambarApplication Files

4. Buat file HTML klik kanan pada nama site yang kita buat tadi kemudian pilih New FileKemudian ketik nama file yang akan anda buat, file utama yang di buat diberi nama index.htmlMembuat file HTML

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

Menyimpan Dokumen

Klik disini untuk menjalankan programMenjalankan program

Bekerja dengan CodeTag-tag HTML

Tag-tag HTMLCommand HTML biasanya disebut TAG, TAG digunakan untuk menentukan tampilan dari document HTML.

Setiap document HTML di awali dan di akhiri dengan tag HTML.

---

Tag tidak case sensitive, jadi anda bisa gunakan atau keduanya menghasilkan output yang sama.Bentuk dari tag HTML sebagai berikut:

Element - nama tagAttribute - atribut dari tagValue - nilai dari atribut.Contoh :

BODY merupakan element, BGCOLOR(Background) merupakan atribut yang memiliki nilai lavender.Begin TagEnd Tag

Document HTML bisa di bagi mejadi tiga bagian utama:Struktur HTML1. HTMLSetiap document HTML harus di awali dan di tutup dengan tag HTML tag HTML memberi tahu browser bahwa yang di dalam kedua tag tersebut adalah document HTML.2. HEADBagian header dari document HTML di apit oleh tag di dalam bagian ini dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser.

3. BODYDocument body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page.

Judul yang ada di pojok kiri atas pada browser

Disini tempat menuliskan teks, menyisipkan tabel, gambar, animasi dll.

Contoh 1 :Preview 1

Contoh :

Heading Elemet

Heading 1Heading 2Heading 3Heading 4Heading 5Heading 6

Basic HTML ElementBlock level element yang sering di gunakan : Heading (H1 sampai H6)

Preview 2

Contoh :

Formating Paragraf

Pelatihan HTML

Palatihan HML di selenggarakan oleh Pustekkom Diknas

Paragraf (P)Digunakan untuk memulai paragraf baru atau format paragrafPreview 3hasil[

1. Unordered List / tidak berurutan (Bullet) :

Contoh :

Unordere List

Contoh penggunaan Unordered List

SeninselasaRabuKamisJumatSabtuMinggu

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 4hasil

Unordered List / tidak berurutan (Bullet) :

List Item (LI)2. Ordered List / Berurutan (Numbering)Contoh :

Ordere List

Scedule Pelatihan HTML

SeninPengenalan HTMLMembuat halaman webSelasaMembuat Tabelmenambahkan GambarRabuMembuat Link

Preview 5hasil

Ordered List / Berurutan (Numbering)

Pemformatan Halaman1. Begin row (BR) Tag di gunakan untuk memulai baris baru pada document HTML. Contoh:

br

HALAMAN WEB PUSTEKKOM

Pustekkom DepdiknasJl. Cendrawasik Km 15.5 Link terkaitwww.e-dukasi.net

Preview 6hasilGanti baris

2. Format Font Dengan tag anda bisa menentukan format tampilan font dalam document HTML seperti color, size, style dan lainya.Contoh:

Pelatihan Produksi PengPop

Pelatihan Produksi PengPop Tahap 1

Preview 7hasil

Attribute Format Font

AlignmentAlign attribute digunakan untuk menentukan perataan object dalam document HTML baik berupa text, object, image, paragraph, division dan lain-lain.Format Text

Navigasi / HyperlinkBerfungsi 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

Link 1

HALAMAN WEB PUSTEKKOM

Pustekkom DepdiknasJl. Cendrawasih Km 15.5 Link terkaitwww.e-dukasi.net

Preview 8

Navigasi / Hyperlink

Link 2

HALAMAN WEB EDUKASINET

materi pokok | modul online | pengetahuan populer | uji kompetensi

Materi Pokok

Modul Online

Hyperlink dalam satu halaman web (Anchor)Preview 9

TabelTag digunakan untuk membuat table dalam document HTML ,bagian pokok dari table adalah cell yang didefinisikan dengan menggunakan tag .Contoh :

tabel 1

TABEL

Tabel dengan single cellTabel dengan dua cellTabel dengan tiga cellTabel dengan empat cell

ABCD

Preview 10

Menambahkan gambar & animasiAnda dapat menambahkan gambar dan animasi pada halaman web yang anda buat.Contoh :

Gambar

Insert Gambar

Insert gambar di sini

Preview 11

Bekerja dengan Design ViewArea anda mengetik naskahInput title disini

Page Properties - Appearance

Page Properties - Links

Page Properties-Heading

Properties InspectorDigunakan untuk memformat teksFont faceFont SizeFont colorAlignmentHyperlink

Insert Image & MediaDigunakan untuk menambahkan gambar atau media lain(animasi/video) ke dalam lembar kerja Pilih file gambarnya1. Insert Image

Insert Image & Media2. Insert Animasi

Insert Image & Media3. Insert Flash Button

Rollover ImageGambar 1Gambar 2

TableMenambahkan tabel ke dalam lembar kerjaatau

Table PropertiesDigunakan untuk memberikan attribut-attribut pada tebalbanyaknya baris & kolomlebar & tinggi tabelJarak spasi dalam cellJarak spasi antar cellWarna backgroundGambar latar belakangPerataanketebalan garis pinggirwarna garis pinggir

Navigasi/HyperlinkDigunakan untuk menghubungkan antar file html dalam satu website atau dengan website lain.Atau pada properties inspector1. Hyperlink ke alamat website lain

Navigasi/Hyperlink2. Anchor / Link dalam satu halaman web1. Blok bagian yang akan di panggil2. Klik icon AnchorKetik nama anchor disini

Navigasi/Hyperlink2. Anchor / Link dalam satu halaman webBlok menu yang di gunakan untuk memanggil/linkKetik nama bagian yang akan di panggil (anchor)

Cascading Style Sheet (CSS) CSS digunakan untuk mempermudah dalam pemformatan tampilan halaman webKlik tanda + untuk menambah css

Cascading Style Sheet (CSS)

Cascading Style Sheet (CSS) Ketik nama css

Terima kasihSukses Untuk Kita Semua

Andi Sulistiyonohttp://andisulistiyono.multiply.com/Andi Sulistiyonohttp://andisulistiyono.multiply.com/Andi Sulistiyonohttp://andisulistiyono.multiply.com/Andi Sulistiyonohttp://andisulistiyono.multiply.com/