rekayasa web -...

69
Rekayasa Web Andronicus Riyono, M.T. Universitas Kristen Duta Wacana

Upload: hakhanh

Post on 25-Mar-2019

223 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Rekayasa WebAndronicus Riyono, M.T.

Universitas Kristen Duta Wacana

Page 2: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Konsep Web, HTML, CSS, Good Sites, Bad Sites

Rekayasa WebPertemuan 2

Page 3: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Teknologi Web

Page 4: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Teknologi Web

Page 5: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Teknologi Web

Page 6: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Teknologi Web

Page 7: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Teknologi Web

Page 8: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Teknologi Web

Page 9: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

HyperText

• HTTP (HyperText Transfer Protocol)

• HTML (HyperText Markup Language)

• XHTML (eXtensible HyperText Markup Language)

Hyper... apa sih? Hiperaktif?

Page 10: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Linear Media vs.

Hypermedia

Page 11: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Linear media

• Media yang untuk mengakses informasi di dalamnya pengguna perlu melalui sebuah urutan tertentu yang linier

Page 12: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Contoh Linear Media: Buku

Ada urutan tertentu dari awal hingga akhir. Ketika Anda diminta untuk membaca halaman tertentu

(misal, halaman 232) Anda perlu menelusuri halaman-

halaman buku tersebut.

Page 13: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Contoh Linear Media: Kaset

Ada urutan tertentu dari awal hingga akhir. Ketika Anda ingin

memutar lagu ketiga, Anda perlu menelusuri kaset

tersebut (dengan fast-forward, stop, play, rewind).

Page 14: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Hypermedia

• Media yang untuk mengakses informasi di dalamnya pengguna dapat menuju secara langsung ke informasi yang diinginkan

Page 15: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Contoh Hypermedia:

CDAnda bisa langsung

mendengarkan lagu ketiga dengan menekan tombol angka 3 pada

Remote Control CD Player

Page 16: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Contoh Hypermedia:

Website!Sekumpulan link,

sebuah klik,dan Anda dibawa ke

halaman lain dari website tersebut, atau bahkan dari

website lain

Page 17: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Hypermedia + Text

• Hypermedia + Text = Hypertext

• Hyperlink, untuk menghubungkan antara dokumen yang satu dengan dokumen yang lain

Page 18: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2
Page 19: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2
Page 20: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2
Page 21: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2
Page 22: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Movie I: Warriors of the NET

• http://www.warriorsofthe.net/

Page 23: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Apa yang terjadi antara browser dan server?

• Kasus: Membuka halaman web UKDW

Page 24: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Teknologi Web

1 2 3, 4

56

Page 25: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Langkah 1:Mencari Alamat UKDW

• simulasi:nslookup www.ukdw.ac.id

Page 26: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Teknologi Web

1 2 3, 4

56

Page 27: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Langkah 2:Jawaban DNS

• Server: 4.2.2.1Address: 4.2.2.1#53

Non-authoritative answer:Name: www.ukdw.ac.idAddress: 222.124.22.21

Page 28: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Teknologi Web

1 2 3, 4

56

Page 29: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Langkah 3:Membuka koneksi

• simulasi:telnet 222.124.22.21 80 Trying 222.124.22.21...Connected to21.subnet222-124-22.astinet.telkom.net.id.Escape character is '^]'.

Page 30: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Teknologi Web

1 2 3, 4

56

Page 31: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Langkah 4:HTTP Request

• GET / HTTP/1.1Host: www.ukdw.ac.idUser-Agent: Mozilla/5.0 ...Accept: text/html, ...Accept-Language: en-us, ...Accept-Encoding: gzip,deflateAccept-Charset: ISO-8859-1,...Keep-Alive: 300Connection: keep-alive

Page 32: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Teknologi Web

1 2 3, 4

56

Page 33: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Langkah 5:HTTP Response

• HTTP/1.x 200 OKDate: Tue, 01 Sep 2009 22:13:40 GMTServer: Apache/2.0.59 (Win32)Set-Cookie: PHPSESSID=d358af56d20c3ef070e9e6583dd4699a; path=/Expires: Thu, 19 Nov 1981 08:52:00 GMT ...

Page 34: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Langkah 5 (lanjutan):HTTP Response

• <HTML><HEAD><TITLE>UKDW Official Site</TITLE><link href="http://www.ukdw.ac.id//settings/style/style.css" rel="stylesheet" type="text/css">...

Page 36: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Langkah 3 (lagi):Membuka koneksi (lagi)• simulasi:telnet 222.124.22.21 80 Trying 222.124.22.21...Connected to21.subnet222-124-22.astinet.telkom.net.id.Escape character is '^]'.

Page 37: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Langkah 4 (lagi):HTTP Request (lagi)

• GET /client/images/front_new/2.gif HTTP/1.1Host: www.ukdw.ac.idUser-Agent: Mozilla/5.0 ...Accept: text/html, ...Accept-Language: en-us, ...Accept-Encoding: gzip,deflateAccept-Charset: ISO-8859-1,......

Page 38: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Langkah 5 (lagi):HTTP Response (lagi)

• HTTP/1.x 200 OKDate: Tue, 01 Sep 2009 22:13:45 GMTServer: Apache/2.0.59 (Win32)Last-Modified: Wed, 01 Nov 2006 01:24:52 GMTEtag: "6842-728c-5ea8d43b"Accept-Ranges: bytesContent-Length: 29324 ...

Page 39: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Teknologi Web

1 2 3, 4

56

Page 40: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Langkah 6:Browser Menampilkan

Halaman lengkap setelah 8 HTTP Request/Response lainnya...

Page 41: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2
Page 42: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2
Page 43: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Apa perbedaannya?

• urutan pemanggilan file-file bisa berbeda

• waktu yang diperlukan untuk mendapatkan file-file bisa berbeda

• bahkan untuk mengambil file yang sama, waktu yang diperlukan bisa berbeda dalam kesempatan yang berbeda

• total waktu yang diperlukan untuk membuka sebuah halaman web tidak sama tiap kali

Page 44: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

HyperText Markup Language

• mark = tanda, marker = penanda, marking = memberi tanda

• Main Entry: markup language *Function: noun Date: 1980: a system (as HTML or SGML) for marking or tagging a document that indicates its logical structure (as paragraphs) and gives instructions for its layout on the page especially for electronic transmission and display

* http://www.merriam-webster.com/dictionary/markup

Page 45: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Memberi tanda (tag)

<p>

Informasi pendaftaran, jadwal tes dan biaya dapat dilihat detail di sini.

</p>

Berarti, bagian ini adalah isi paragrafnya.

ini adalah tanda (tag) p, menandai awal dari sebuah paragraf

ini adalah tanda penutup (closing tag) p, menandai akhir dari sebuah paragraf

{sebuahelemen

p

Page 46: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Struktur dasar halaman HTML

• <html>

• <head>

• <title></title>

• </head>

• <body>

• </body>

• <html>

Page 47: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Kepala dan Badan

• Head

• Berisi hal-hal selain isi (content) dari halaman web tersebut

• Body

• Berisi isi (content) dari halaman web tersebut yang ditampilkan pada browser

Page 48: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Kepala dan Badan

• Head

• Berisi hal-hal selain isi (content) dari halaman web tersebut

• Body

• Berisi isi (content) dari halaman web tersebut yang ditampilkan pada browser

Page 49: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

nested tags

• <p>

• Pada tanggal 7 November 2009,

• <a href="http://knastik.org/">

• KNasTIK 2009

• </a>

• akan diselenggarakan di UKDW

• </p>

nest = sarang?

atribut

Page 50: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Movie 2:The Machine is Us/ing Us

• The Machine is Us/ing Us.

• by Michael Wesch

• First Released on January 31st 2007

• http://mediatedcultures.net/mediatedculture.htm

Page 51: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Tag Soup

• opening tags, tanpa closing tags

• tag yang hanya didukung browser tertentu

• marquee

• blink

• berkesan tidak rapi, semacam seonggok tags dan berbagai macam isi lainnya (teks), itulah mengapa disebut sebagai tag soup

Page 52: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Browser war

• Persaingan antar browser, masing-masing merasa diri lebih unggul dari yang lain

• Misal

• Proprietary Tags (marquee, blink, dll.)

• Rendering engine

• Akibatnya

• Tampilan berbeda antar browser!

Page 53: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Web Standard* (markup)

• XHTML 1.1 (2001, 2008)

• XHTML Basic 1.1 (2000, 2008)

• XHTML 1.0 (2000, 2002)

• HTML 4.01 (1999)

• HTML 3.2 (1997)

* http://www.w3.org/TR/#Recommendations

Page 54: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Keuntungan menggunakan standar

• Accessibility

• To software/machines

• To people

• Stability

* http://www.webstandards.org/learn/faq/#p3

Page 55: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

XHTML 1.0 Transitional

• XHTML = HTML ditulis dengan kaidah XML

• Well-structured (properly nested tags)

• Case-sensitivity (all lowercased element)

• lebih baik dari HTML 4.01

• masih cukup fleksibel

• jika bisa, XHTML 1.1 lebih baik lagi

Page 56: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Validasi

• http://validator.w3.org/

• agar kita tahu yang kita buat sudah memenuhi standar atau belum

• kesalahan umum:

• tag img tanpa atribut alt

• lupa closing tag

Page 57: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2
Page 58: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2
Page 59: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

CSS

• Cascading Style Sheets

• Mengatur bagaimana elemen-elemen HTML yang ada pada sebuah halaman web ditampilkan oleh browser

Page 60: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Site evolution

http://mboffin.com/post.aspx?id=1619

Page 61: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Good Site / Bad Site

Page 62: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2
Page 63: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Diskusi:Good Sites Bad Sites

• Perusahaan yang membuat websites

• http://envato.com

• http://www.designbylinda.com

• http://www.designbylinda.com/design.htm

Page 64: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Diskusi:Good Sites Bad Sites

• Social Network

• http://facebook.com

• http://friendster.com

Page 65: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Diskusi:Good Sites Bad Sites

• Social Network

• http://www.carleton.ca/

• http://www.ukdw.ac.id/

Page 67: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Tugas Pribadi

• Baca Head First Web Design, Chapter 1 & 2

• Buat untuk website UKDW

• Visual Metaphor

• Theme (termasuk Color palette, Layout, visual elements, Central Themes, Interface Elements)

• Tidak ada maksimal halaman, be concise

• Be creative!

Page 68: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Perhatian!

• Margin: (atas, kanan, bawah, kiri) 3, 3, 4, 4cm

• Font: Verdana 12pt, Spacing: 1,5 spasi

• Filetype: PDF

• Subject: REKWEB-TUGAS2

• Nama File: REKWEB-TUGAS2-22xxxxxx.pdf

• dikirim ke: [email protected]

Page 69: Rekayasa Web - lecturer.ukdw.ac.idlecturer.ukdw.ac.id/riyono/wp-uploads/2009/09/rekweb-pertemuan-2.pdfKonsep Web, HTML, CSS, Good Sites, Bad Sites Rekayasa Web Pertemuan 2

Referensi

• Lowe, D., & Hall, W. (1998). Hypermedia and the web: An engineering approach.New York, NY: Wiley.