Mengelola isi halaman web
Memeriksa informasi untuk
relevansi dan currency
Teknologi Informasi dan Komunikasi
Hal.: 2 Memperbarui isi halaman web
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.
Teknologi Informasi dan Komunikasi
Hal.: 3 Memperbarui isi halaman web
Memeriksa informasi untuk
relevansi dan currency
Mengenal Macromedia Dreamweaver MXMacromedia 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
Teknologi Informasi dan Komunikasi
Hal.: 4 Memperbarui isi halaman web
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
Teknologi Informasi dan Komunikasi
Hal.: 5 Memperbarui isi halaman web
Memeriksa informasi untuk
relevansi dan currency
HTMLHTML 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.
Teknologi Informasi dan Komunikasi
Hal.: 6 Memperbarui isi halaman web
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.
Teknologi Informasi dan Komunikasi
Hal.: 7 Memperbarui isi halaman web
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
Teknologi Informasi dan Komunikasi
Hal.: 8 Memperbarui isi halaman web
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.
Teknologi Informasi dan Komunikasi
Hal.: 9 Memperbarui isi halaman web
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.
Teknologi Informasi dan Komunikasi
Hal.: 10 Memperbarui isi halaman web
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 :
Teknologi Informasi dan Komunikasi
Hal.: 11 Memperbarui isi halaman web
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 :
Teknologi Informasi dan Komunikasi
Hal.: 12 Memperbarui isi halaman web
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?”>
Teknologi Informasi dan Komunikasi
Hal.: 13 Memperbarui isi halaman web
Memeriksa informasi untuk
relevansi dan currency
Menyisipkan GambarAtribut 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
Teknologi Informasi dan Komunikasi
Hal.: 14 Memperbarui isi halaman web
Memeriksa informasi untuk
relevansi dan currency
Membuat FormForm 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.
Teknologi Informasi dan Komunikasi
Hal.: 15 Memperbarui isi halaman web
Memeriksa informasi untuk
relevansi dan currency
Memperbaharui Halaman WEBMemperbaharui 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).
Teknologi Informasi dan Komunikasi
Hal.: 16 Memperbarui isi halaman web
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
Teknologi Informasi dan Komunikasi
Hal.: 17 Memperbarui isi halaman web
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
Teknologi Informasi dan Komunikasi
Hal.: 18 Memperbarui isi halaman web
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
Teknologi Informasi dan Komunikasi
Hal.: 19 Memperbarui isi halaman web
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
Teknologi Informasi dan Komunikasi
Hal.: 20 Memperbarui isi halaman web