Materi i Tkj Web Desain

Dunia internet semakin lama semakin berkembang karena manusia selalu mencari terobosan baru. Meskipun pada awalnya internet hanya digunakan untuk menampilkan data-data statis, namun dalam perkembangan sebuah sistem informasi jarak jauh yang memberikan hak akses khusus bagi anggotanya sudah banyak yang menggunakannya. Matakuliah ini membahas tentang perkenalan desain web yang lebih banyak pada data statis sebagai pengantar pengelolaan web yang dinamis.

Standar Kompetensi

Mahasiswa mengenal internet dan dapat mengetahui, memahami, menguasai dan mampu mengimplementasi teori, konsep, prinsip pemrograman dan desain website dengan teknologi HTML, CSS dan Java Script

Materi Ajar1. Pengantar HTML Definisi halaman Web Cara kerja halaman web Tampilan HTML Pembuatan HTML dengan Text Editor

2. Pembuatan Halaman Web Tags yang harus ada di setiap halaman HTML Paragraphs dan Ganti baris Headings

Peeking at Other Peoples Pages

3. Linking ke Halaman Web yang Lain Linking ke Halaman lainnya Linking diantara Halaman Sendiri Relative Addresse

4. Publishing Halaman HTML Publishing Halaman Web di Disk Setting Up ke Internet Web Site Transferring Halaman ke Web Server Peletakan Halaman Web dalam Intranet

Uji coba Halaman Web

5. Format Text dan Alignment Emphasizing Text dengan Boldface dan Italics Format Character Alignment Text

6. Kontrol Font dan Karakter Spesial Ukuran Font dan Warna Pemilihan Tipe Tampilan Karakter Spesial Future of Web Fonts

7. Deret Text dalam Lists Tiga tipe list dalam HTML Lists Within Lists

8. Intra-Page dan E-mail Links Penggunaan Named Anchors Linking ke bagian khusus di halaman lain Linking alamat E-mail ke halaman Web

9. Peletakan Images dalam Halaman Web Peletakan Image dalam Halaman Web Pelabelan Image Horizontal Image Alignment Vertical Image Alignment Images yang berhubungan

10. Pembuatan Web Page Images Pemilihan Graphics Software Dasar Graphics Persiapan Photographic Images Controlling JPEG Compression Pembuatan Banners dan Buttons Pengurangan Bilangan Warna Antarmuka GIFs dan Progressive JPEGs 8. Intra-

Page dan E-mail Links Penggunaan Named Anchors Linking ke bagian khusus di halaman lain Linking alamat E-mail ke halaman Web

11. Pembuatan Tampilan Halaman Secara Cepat Penyeimbangan Ukuran File Image dan Kualitas Pengkhususan lebar dan tinggi Image Penyediaan Preview Image

12. Pembuatan Animated Graphics Pembuatan GIF Animation Multiple Animations dalam Satu Halaman A Hand-Crafted Animation Transparent Animations Melakukan perulangan

13. Backgrounds dan Kontrol Warna Background dan Kontrol Text Background Image Tiles Transparent Images Pembuatan Backgrounds Penentuan Backgrounds yang baik

14. Desain Halaman dan Layout Desain Halaman Web Image Spacing dan Borders Trik Lama tentang Background Banner Customizing Horizontal Rules

15. Image Maps Mapping Regions dalam Image Client-Side Image Maps Image Maps with Non-rectangular Regions Server-Side Image Maps Kombinasi Client/Server Image Maps

16. Layout dengan Tables lebih lanjut Pembuatan Table Sederhana Ukuran Table Alignment dan Spanning Backgrounds dan Spacing Nested Tables

17. Layout Interactive dengan Frames Definisi Frames Pembuatan Frameset Document Tag <FRAME> Linking antara Frames dan Windows Margins, Borders, dan Scrolling Nested Frames Supporting Frameless Browsers

18. Pembuatan Formulir HTML Cara kerja Formulir HTML Pembuatan Formulir Masukan Text Identifikasi tiap bagian data formulir Check Boxes Radio Buttons Selection Lists Text Areas Submit Pembuatan Custom Submit Button Including Hidden Data

20.Dasar Konsep CSS Values Selectors, Pseudo-Classes, Pseudo-Elements,

dan At-Rules Visual Media Styles Paged Media Styles Aural Media Styles

21. Embedding Multimedia in Web Pages Peletakan Video dalam halaman web Multimedia the Old-fashioned Way Embedding Video the Microsoft Way Microsoft Background Sounds Multimedia the Netscape Way Trying to Please Everybody Multimedia the New Way

22. Scripting, Applets, and ActiveX The Old Way Plug-in Power Internet Programming for the Rest of Us Strong Java ActiveX Controls

17

Desain untuk Situs Web yang Baik

Menurut Patrick Lynch, 1995Menyeimbangkan struktur dan hubungan dari

menu atau home page dengan halaman isi atau grafik dan dokumen yang di-link.

Tujuannya membangun hierarki menu dan halaman yang berasa alami dan terstuktur dengan baik bagi pemakai, dan tidak mengganggu pemakaian situs Web atau menyesatkan mereka.

18

10 Kesalahan Utama Desain Web

Top Ten Mistakes of Web Design (Jakob Nielsen, 1996)Penggunaan frame. Penggunaan teknologi baru dengan

serampangan. Gerakan teks dan animasi yang berjalan terus. URL yang kompleks. Halaman yatim.

19

10 Kesalahan Utama Desain Web (Lanj.)

Halaman yang terlalu panjang gulungannya. Isi terpenting dan navigasi harus tampak di bagian atas.

Kurangnya dukungan navigasi..Warna link yang tidak standar. Informasi yang basi. Waktu download yang terlalu lama. Pemakai

kehilangan minat dalam 10-15 detik.

20

10 Pedoman Terpenting Usability Homepage

Top Ten Guidelines of Homepage Usability (Jakob Nielsen, 2002)Buat maksud homepage jelas: Siapa Anda

dan apa yang Anda lakukan.○ Sertakan tagline satu kalimat.○ Tulis judul window dengan ketertampakan

yang baik pada search engine dan bookmark.

○ Kelompokkan informasi perusahaan dalam tempat yang dapat dibedakan.

21

10 Pedoman Terpenting Usability Homepage (Lanj.)

Bantu pemakai menemukan yang dibutuhkan.

○ Tegaskan tugas prioritas tertinggi situs.○ Sertakan kotak input pencarian.

Singkapkan isi situs.○ Tampilkan contoh isi situs.○ Awali nama link dengan kata kunci

terpenting.○ Tawarkan akses yang mudah untuk fitur

homepage terbaru.

22

10 Pedoman Terpenting Usability Homepage (Lanj.)

Gunakan desain visual untuk meningkatkan desain interaksi, bukan mendefinisikan.

○ Jangan memformat isi kritis secara berlebihan, misalnya area navigasi.

○ Gunakan gambar yang berarti.

23

Genre dan Tujuan bagi Perancang

Cara mengategorikan situs Web:Berdasarkan pendiri: individu, kelompok,

universitas, perusahaan, organisasi nirlaba, badan pemerintah.

Berdasarkan tujuan pendiri: menjual produk, mengiklankan produk, memberi informasi dan pengumuman, menyediakan akses, menawarkan jasa, membuat diskusi, mendidik masyarakat.

24

Genre dan Tujuan bagi Perancang (Lanj.)

Berdasarkan jumlah halaman atau informasi yang tersedia. Mis.:

○ 1-10: biografi, ringkasan proyek.○ 5-50: makalah ilmiah, konferensi.○ 50-500: buku, laporan tahunan.

Berdasarkan ukuran keberhasilan.○ Bagi individu: mencari pekerjaan, mencari teman.○ Bagi perusahaan: jumlah pengunjung per hari.○ Bagi penyedia akses: jumlah waktu pemakaian.○ Bagi lainnya: promosi.

25

Model Antarmuka Objek-Aksi untuk Perancangan Situs Web

Model OAI mendorong perancang situs web memfokuskan empat komponen dalam dua bidang:Tugas

○ Objek informasi terstruktur (hierarki, jaringan).○ Aksi informasi (pencarian, linking).

Antarmuka○ Metafora untuk objek informasi (rak buku,

ensiklopedia).○ Penanganan aksi (query, zoom).

26

Model Antarmuka Objek-Aksi untuk Perancangan Situs Web (Lanj.)

Strategi agregasi informasi Hal-hal yang mempengaruhi kepuasan

subjektif awal pemakai Pengujian dan pemeliharaan situs web

27

Strategi Agregasi Informasi Daftar pendek tak terstruktur: fitur pedoman

kota, divisi organisasi, proyek terbaru. Struktur linear: kalender peristiwa. Larik atau tabel: jadual penerbangan. Hierarki, tree: benua-negara-kota. Multitree, faceted retrieval: foto diurutkan

berdasarkan tanggal, jurufoto, lokasi, topik. Jaringan: World Wide Web, kutipan jurnal.

28

Hal-hal yang Mempengaruhi Kepuasan Subjektif Awal Pemakai

Kepuasan subjektif awal pemakai sangat kuat ditentukan oleh hal-hal berikut (Horton et al., 1996):Kekompakan dan faktor percabangan. Panjang

halaman dan jumlah link.Pengurutan, pengelompokan, dan penegasan. Dukungan akses universal.Desain grafis yang baik.Dukungan navigasi.

29

Pengujian dan Pemeliharaan Situs Web

Disarankan uji usability. Uji pada lingkungan yang realistik. Uji in-house dini dengan jumlah pemakai terbatas. Uji medan yang intensif. Proses peluncuran bertahap. Log pemakaian berguna. Umpan balik pemakai. Ekspektasi pemakai dan kebijakan organisasi memandu

tingkat perubahan.

INTERNET

Internet merupakan jaringan global yang menghubungkan suatu network dengan network lainya di seluruh dunia melalui TCP/IP menjadi protokol penghubung antara jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi, tukar menukar berbagai macam jenis informasi, dan data tanpa batas Negara dan Benua

WWW (World Wide Web) yang mempunyai definisi adalah salah satu fasilitas dimana kita dapat saling bertukar informasi di internet. Banyak orang berpendapat bahwa WWW adalah dunianya sedang internet adalah jaringannya. Protocol standard aturan yang di gunakan untuk berkomunikasi pada komputer networking, Hypertext Transfer Protocol (HTTP) adalah protokol untuk WWW

WWW (World Wide Web)

MATERI

HTML

HTML(HyperText Markup Language) merupakan standard bahasa yang di gunakan untuk menampilkan dokumen web, yang bisa anda lakukan dengan HTML yaitu:

Mengontrol tampilan dari web page dan contentnya. Mempublikasikan dokumen secara online sehingga bisa diakses dari seluruh dunia. Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online. Menambahkan object-object seperti image, audio, video dan juga Java applet dalam dokument HTML.

HTML Tag

Command HTML bisanya disebut TAG, TAG digunakan untuk menentukan tampilan dari dokumen HTML

<BEGIN TAG> .. </END TAG>

Contoh:

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

<HTML>. . .

</HTML> Tag tidak case sensitive, jadi bisa digunakan <HTML> atau <html> keduanya menghasilkan output yang sama

Bentuk dari tag HTML sebagai berikut:

<element attribute = value>

Element = nama tagAttribute = atribut dari tagValue = nilai dari atribut

Contoh:

<BODY BGCOLOR=”blue”>

Menggunakan NotepadUntuk memulai bekerja dengan HTML kita bisa gunakan editor Notepad atau editor lainya

• Simpan dengan nama file perdana.htm atau perdana.html• Buka dengan browser internet explorer file perdana.htm atau perdana.html maka outputnya akan di tampilkan seperti gambar dibawah ini

Struktur HTML Document

Dokumen HTML bisa di bagi mejadi tiga bagian utama:

HTMLSetiap dokumen HTML harus di awali dan di tutup dengan tag HTML <HTML> </HTML> tag HTML memberi tahu browser bahwa yang di dalam kedua tag tersebut adalah dokument HTML.

HEADBagian header dari dokumen HTML di apit oleh tag <HEAD></HEAD> di dalam bagian ini bisaanya dimuat tag <TITLE> yang menampilkan judul dari halaman pada titel browser.

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

Basic HTML Element

Tag perintah untuk ganti paragraph pada bahasa HTML dinyatakan oleh tag .

Contoh:

 Horizontal Rule tag digunakan untuk menggambar garis horizontal 

1. Paragraf (P)

2. Break

Tag di gunakan untuk memulai baris baru pada dokumen HTML, tag ini fungsinya mirip dengan carriage return.

Contoh:Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam dokument HTML Dokumen body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page

Dengan tag anda bisa menentukan format tampilan font dalam dokumen HTML seperti color, size, style dan lainya

3. Font

Contoh: Menentukan Format Tampilan Font 

Attribute Description

ColorUntuk menentukan warna font, kita bisa menggunakan

nama font atau hexadecimal (#000000 - #ffffff).

Size Untuk menentukan ukuran dari font 1 – 7.

Face

Untuk menentukan jenis font bisaanya dalam satu list

ada beberapa font dan akan di baca mulai dari yang

paling kiri.

Color merupakan attribute yang kita anda tambahkan pada beberapa element seperti body, font, link dan lainya. Color di bagi dalam tiga ketegori warna primer yaitu red, green dan blue. Masing-masing color didefinisikan dalam dua digit hexadecimal number

#RRGGBB

Hexadecimal Color

#FF0000 Red

#00FF00 Green

#0000FF Blue

#000000 Black

#FFFFFF White

4. Color

5. Horizontal Rules(HR)

Horizontal Rule tag <HR></HR>digunakan untuk menggambar garis horizontal dalam dokumen HTML. Ketikkan tag <HR> di dalam tag <body></body> seperti pada contoh dibawah ini.

Contoh: <HR> Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam dokumen HTML </HR>

Attribute Description

Positionmenetukan posisi dari HR, dengan value : center |

right | left.

Width Untuk menentukan panjang HR default 100%

Size Untuk menentukan tebal dari HR dalam pixel

Noshad Efek bayangan

Align attribute digunakan untuk menentukan perataan object dalam dokumen HTML baik berupa text, object, image, paragraph, division dan lain-lain.

Value Description

Left Rata kiri

Right Rata kanan

Center Rata tengah

Justify Rata kanan kiri

6. Alignment

7. Format text

Physical Formatting

Tag Description

 ... Bold text

 ... Italic text

 ... Underline Text

<BIG> ... </BIG> Untuk ukuran yang lebih besar dari normal

 ... Untuk ukuran yang lebih kecil dari normal

<STRIKE> ... </STRIKE> Untuk memberi garis di tengah text

 ... Superscript text

 ... Subscript text

<CENTER> ... </CENTER> Center document / text

Logical Formatting

Tag Description

 ... Text miring / 

 ... Text tebal / 

<INS> ... </INS> Underline text / 

<DEL> ... </DEL> Mencoret text / <STRIKE>

Untuk membuat indentasi paragraph kita bisa menggunakan BLOCKQUOTE, untuk indentasi pendek anda bisa gunakan element Q.

Contoh:BLOCKQUOTE untuk indentasi pendek bisa gunakan element Q

<blockquote>Color merupakan attribute yang kita anda tambahkan pada beberapa element seperti body, font, link dan lainya </blockquote>

8. Quotes / Indenatasi

Tag PRE di gunakan untuk menampilkan text sesuai dengan format aslinya.

Contoh:

<pre>Internet merupkan jaringan global yang menghubungkan suatu network dengan network lainya di seluruh dunia melalui TCP/IP menjadi protocol

penghubung antara jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi tanpa batas Negara dan Benua.

</pre>

9. Preformatted text

Tag DIV dan SPAN di gunakan untuk mengelompokkan element-element HTML. Span digunakan untuk mendefinisikan inline content sementara <div> digunakan untuk block-level content.

Contoh:<div>Divisi 1 Div tag digunakan untuk mengelompokkan group element bisaanya untuk block-level element </div>

<div align="right">Divisi 2 Ini didalam devisi kedua. di tulis dengan alignment kanan </div>

10. Grouping element

HTML menyediakan sejumlah simbol yang berguna untuk menampilkan karakter-karakter khusus untuk menyatakan suatu entitas karakter seperti A umlaut (Ä)ataupun numeric seperti ¼ sebagai mana dapat dilihat pada table berikut

Simbol HTML Simbol HTML

Ä

Ë

Ï

Ö

Ü

ß

&Auml

Ë

Ï

Ö

Ü

ß

Ä

Ë

Ï

Ö

Ü

ä

ë

ï

ö

ü

©

®

™

Spasi

&

>>

<<

<

>

X

+

©

®

™

&

»

«

<

>

×

÷

½

¾

¼

¢

£

¥

§

×

÷

½

¾

¼

¢

£

¥

§

×

÷

HTML ENTITIES

HTML Link

Konsep dasar dari URL (Uniform Resourse Locator) dasarnya semua resource yang ada di Internet memiliki alamat sendiri. Selanjutnya kita juga telah memahami konsep hypertext dari sebuah file HTML yang memungkinkan dibuat suatu link yang menghubungkan pada bagian lain dari dokumen HTML atau langsung mengarah pada suatu resource Internet tertentu

URL yang digunakan untuk mengimplementasikan penambahan link pada suatu page dapat kita sederhanakan dalam model berikut

Bagaimana

Pada bagian pertama dari URL ini adalah menunjukkan bagaimana cara data dikirimkan atau ditransmisikan melalui media jaringan. Secara teknis lebih sering kita sebut dengan istilah protokol. Misalnya untuk aplikasi World Wide Web ini kita menggunakan protokol yang disebut dengan protokol HTTP. Oleh karena itu pada bagian awal URL ini kita deklarasikan:

http://

Siapa

Pada bagian selanjutnya menjelaskan "siapa" yang memiliki URL. Bagian ini berisi nama komputer tempat resource Internet tersebut berada. Istilah yang lebih teknis kita sebut dengan hostname. Misalkan page kita diletakkan di mesin www.google.com maka penambahan URL sampai dengan bagian ini menjadi:

http://www.um.ac.id

Dimana

Bagian selanjutnya menunjukkan lokasi yang lebih spesifik tempat menyimpan resource Internet tersebut. Secara fisik bagian ini berisi nama direktori tempat penyimpanan resource yang bersangkutan.

http://www.um.ac.id/news

Apa

Bagian terakhir ini menunjukkan nama file yang akan kita gunakan. Untuk aplikasi web file ini berisi kode-kode HTML dan teks. Secara keseluruhan URL dapat dituliskan sebagai berikut:

http://www.um.ac.id/news/terbaru.html

Link ke Dokumen Lain

Misalkan ada dua dokumen html link1.htm dan link2.htm untuk membuat link dari link1.htm ke link2.htm :

Contoh :Link1.htm:

<html><head><title>Using Link</title></head>

<body><center>Creating Link </center> <a href="link2.htm"> Click here to view document 2</a></body></html>

Link2.htm

<html><head><title>Document 2</title></head>

<body><center>Creating link </center> <a href="link1.htm"> back to document 1</a></body></html>

Link ke Section tertentu dalam Dokumen

Untuk membuat link ke section tertentu dalam satu dokumen gunakan property name untuk membuat nama tujuan dari link.Syntax name anchor:

<A HREF=”#nama”>menuju ke Topic name</A>untuk membuat link ke name :<A NAME =”nama”>Topic name</A>

contoh:

link3.htm<html><head><title>Anchor Name</title></head><body>setting up web server <pre>

Materi i Tkj Web Desain

Documents

Transcript of Materi i Tkj Web Desain