2. Teknologi Informasi dan KomunikasiHal.: 2 Isikan Judul Halaman
Memeriksa informasi untuk
relevansi dan currency
Software Web Design
Software web design merupakan perangkat lunak yang
berguna untuk membangun/membuat/mendisain
halaman-halaman web, baik yang bersifat statis
maupun dinamis.
Software web design terpopuler yang ada saat ini antara
lain:
1. Adobe Image Ready,
2. Macromedia Dreamweaver
3. Macromedia Fireworks,
4. Microsoft Frontpage
5. dan lain sebagainya.
3. Teknologi Informasi dan KomunikasiHal.: 3 Isikan Judul Halaman
Memeriksa informasi untuk
relevansi dan currency
Mengenal Macromedia Dreamweaver MX
Macromedia Dreamweaver yang merupakan salah
satu software web design terpopuler dipilih
sebagai software web design yang akan
digunakan dalam proses pemelajaran ini
Macromedia Dreamweaver dipilih karena
kompatibilitas dan dukungannya terhadap
berbagai bahasa pemrograman web, antara lain :
ASP, JSP, CFM, ASP.NET, PHP, JavaScript, CSS dan
XML
4. Teknologi Informasi dan KomunikasiHal.: 4 Isikan Judul Halaman
Memeriksa informasi untuk
relevansi dan currency
Window Dreamweaver
MX ini dibagi menjadi 7
bagian, yaitu :
1.Insert Bar,
2.Document Toolbar,
3.Document Window,
4.Panel Groups,
5.Tag Selector,
6.Property Inspector
7.Files Panel
5. Teknologi Informasi dan KomunikasiHal.: 5 Isikan Judul Halaman
Memeriksa informasi untuk
relevansi dan currency
HTML
HTML yang merupakan kepanjangan dari Hyper Text
MarkUp Language memiliki fungsi untuk memformat
dokumen teks biasa agar bisa digunakan pada World
Wide Web (WWW).
HTML bukan merupakan suatu bahasa pemrograman,
karena sifatnya yang hanya memberikan tanda
(marking up) pada suatu dokumen teks dan bukan
sebagai program.
6. Teknologi Informasi dan KomunikasiHal.: 6 Isikan Judul Halaman
Memeriksa informasi untuk
relevansi dan currency
Struktur dasar dokumen HTML
berisi elemen-elemen atau tag,
seperti pada gambar berikut :
Keterangan :
<html> </html> : mendefinisikan
bahwa teks yang berada diantara
kedua tag tersebut adalah file
HTML.
<head> </head> : mendefinisikan
head dalam sebuah file HTML.
<title> </title> : mendefinisikan
judul yang hendak ditampilkan
pada browser.
<body> </body> : mendefinisikan
teks beserta formatnya yang
hendak ditampilkan sebagai isi
halaman web.
7. Teknologi Informasi dan KomunikasiHal.: 7 Isikan Judul Halaman
Memeriksa informasi untuk
relevansi dan currency
Format Teks Dasar dalam HTML :
Heading, HTML mengenal 6 level heading, mulai 1
(terbesar) sampai 6. heading ditampilkan dengan font
lebih besar dan tebal daripada teks normal
Paragraf, setiap ada paragraf baru diawali dengan <p>
List, HTML mendukung daftar (list) tidak bernomor, bernomor dan
definisi
Performatted Text, dalam HTML, spasi, tab dan baris
baru (enter) tidak memiliki pengaruh
Extended Quotations, untuk membuat kutipan panjang, sehingga
hasilnya menjorok ke dalam, digunakan tag <blockquote>.
8. Teknologi Informasi dan KomunikasiHal.: 8 Isikan Judul Halaman
Memeriksa informasi untuk
relevansi dan currency
Ganti baris (line break), untuk menulis alamat surat
dengan baris-baris pendek, tidak bagus jika
menggunakan tag <p> (spasi terlalu lebar)
Garis datar (horizontal rule), untuk membuat garis
horizontal yang digunakan untuk membatasi bagian-
bagian digunakan tag <hr>.
Memformat karakter,
<b> atau <strong> untuk membuat teks Bold.
<i> atau <em> untuk membuat teks Italic.
<tt> atau <code> untuk membuat teks typewriter.
9. Teknologi Informasi dan KomunikasiHal.: 9 Isikan Judul Halaman
Memeriksa informasi untuk
relevansi dan currency
Dasar Link HTML
Hyperlink merupakan sesuatu yang sangat penting di
website, sebab hyperlink akan menghubungkan antara
satu halaman dengan halaman lainnya baik dalam satu
website maupun antar website.
Untuk membuat hyperlink digunakan tag <a>. Huruf a
artinya "anchor". Tag <a> biasanya diikuti atribut
"href" dimana nilai dari atribut ini merupakan alamat
halaman yang akan dituju.
10. Teknologi Informasi dan KomunikasiHal.: 10 Isikan Judul Halaman
Memeriksa informasi untuk
relevansi dan currency
Macam-macam link
1. Relative dan Absolute Link, link ke suatu dokumen pada
direktori lain dapat dibuat dengan menentukan relative
path dari posisi dokumen asal berada. Ini disebut
sebagai relative link.
a href=”Harga/index.html”>Daftar Harga</a>
Alamat (URL) dokumen secara lengkap (absolute path)
dapat digunakan untuk menentukan tujuan link, disebut
link absolute :
a href=”http://gmail.google.com”>E-mail Google</a>
11. Teknologi Informasi dan KomunikasiHal.: 11 Isikan Judul Halaman
Memeriksa informasi untuk
relevansi dan currency
2. Link ke suatu bagian di dokumen lain, misalnya :
satu.html dilink ke suatu bagian di dua.html, caranya
adalah :
Pada dokumen satu.html, dituliskan :
<a href=”dua.html#BT”>Tiga</a>
Pada bagian yang dituju, dituliskan :
<a name=”BT”>Tiga</a>
12. Teknologi Informasi dan KomunikasiHal.: 12 Isikan Judul Halaman
Memeriksa informasi untuk
relevansi dan currency
3. Link ke suatu bagian di dokumen yang sama, caranya
hampir sama dengan langkah di atas :
Pada dokumen satu.html, dituliskan :
<a href=”#BT”>Tiga</a>
Pada bagian yang dituju, dituliskan :
<a name=”BT”>Tiga</a>
4. Mailto, link yang langsung menuju ke alamat e-mail.
<a href=”mailto:saya@gmail.com?subject=Masuk
ga?”>
Kirim E-mail</a>
13. Teknologi Informasi dan KomunikasiHal.: 13 Isikan Judul Halaman
Memeriksa informasi untuk
relevansi dan currency
Menyisipkan Gambar
Atribut ukuran gambar, bila tidak dituliskan, maka ukuran
gambar sesuai ukuran aslinya. Namun ukuran gambar
bisa dibuat dengan nilai tertentu dengan cara
menuliskan atribut height dan width.
Membuat Tabel
Tabel merupakan cara untuk menampilkan informasi
dalam bentuk sel yang terdiri dari kolom dan baris.
Membuat Frame
Frame HTML digunakan untuk membuat tampilan HTML
yang terbagi menjadi beberapa bagian di mana setiap
bagiannya merupakan satu halaman HTML yang
terpisah.
14. Teknologi Informasi dan KomunikasiHal.: 14 Isikan Judul Halaman
Memeriksa informasi untuk
relevansi dan currency
Membuat Form
Form merupakan elemen HTML yang berupa blanko
(form) yang dipergunakan untuk menjaring informasi
dari pengguna
Macam-macam form :
Input, dengan tipe :
1. Text, password, checkbox, radio button, reset, submit
dan hidden.
2. Text area.
3. Select.
15. Teknologi Informasi dan KomunikasiHal.: 15 Isikan Judul Halaman
Memeriksa informasi untuk
relevansi dan currency
Memperbaharui Halaman WEB
Memperbaharui halaman situs web dengan sesuatu yang
baru, dengan mempertimbangkan kebutuhan
pengunjung dan situs web itu sendiri
Untuk memperbaharui (update) halaman situs web yang
perlu menjadi bahan pertimbangan sejak halaman web
tersebut dirancang adalah kita harus memastikan agar
elemen-elemen yang ada pada setiap halaman mudah
untuk di rubah (edit).
16. Teknologi Informasi dan KomunikasiHal.: 16 Isikan Judul Halaman
Memeriksa informasi untuk
relevansi dan currency
Memeriksa informasi untuk relevansi dan keterkinian
Pada dasarnya dalam proses pembuatan situs web
diperlukan kerjasama antara pihak pengembang dengan
klien yang memesan situs web tersebut.
Dalam menentukan content (content awal, tambahan
maupun revisi) pihak pengembang harus lebih banyak
mendengar apa yang menjadi kebutuhan klien.
Interaktivitas pengguna menjadi jantung sebuah situs
web
17. Teknologi Informasi dan KomunikasiHal.: 17 Isikan Judul Halaman
Memeriksa informasi untuk
relevansi dan currency
Beberapa Gagasan yang disampaikan Tord Yard (programmer
flash di WWW.EGO7.COM) tentang pentingnya
menambahkan interaktivitas pada content halaman sebuah
situs web :
1. Gunakan umpan balik grafik untuk menginformasikan
pengguna tentang elemen interaktif, seperti status tombol
yang bergulung
2. Sertakan suara sebagai bentuk umpan balik tambahan agar
content tidak terlihat membosankan
3. Pertimbangkan pemakaian animasi untuk menerangkan
elemen penting, atau untuk meminta keikutsertaan
pengunjung.
18. Teknologi Informasi dan KomunikasiHal.: 18 Isikan Judul Halaman
Memeriksa informasi untuk
relevansi dan currency
Beberapa cara untuk memeriksa informasi content
situs web untuk relevansi dan keterkinian, adalah
sebagai berikut :
1. Sesuaikan content situs web dengan tujuan dan fungsi
situs tersebut
2. Lakukan riset untuk mencari informasi terbaru yang
sesuai dengan content situs
3. Content tambahan atau revisi juga bisa dengan
meminta content tersebut ke pihak klien baik berupa
data tertulis maupun elektronik
19. Teknologi Informasi dan KomunikasiHal.: 19 Isikan Judul Halaman
Memeriksa informasi untuk
relevansi dan currency
4. Lakukan konfirmasi dalam menentukan batasan umur
sebuah links, apakah akan dipertahankan atau dihapus
5. Pihak pengembang selaku pembuat situs web bila
perlu merevisi content yang mungkin diperlukan
dengan mengkonfirmasikan dahulu dengan pihak klien
20. Teknologi Informasi dan KomunikasiHal.: 20 Isikan Judul Halaman
SMK NEGERI 2 CIKARANG BARAT
The End
