Post on 04-Mar-2016
description
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/