Rekayasa Web
Andronicus Riyono, M.T.Konsep 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)
Linear Media
vs.
Linear media
•
Media yang untuk mengakses informasi di dalamnya pengguna perlu melalui sebuah urutan tertentu yang linierContoh 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.
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,
Hypermedia
•
Media yang untuk mengakses informasi di dalamnya pengguna dapat menuju secara langsung ke informasi yang diinginkanContoh
Hypermedia:
CD
Anda bisa langsung
mendengarkan lagu ketiga dengan menekan tombol angka 3 pada
Contoh
Hypermedia:
Website!
Sekumpulan link, sebuah klik,
dan Anda dibawa ke
halaman lain dari website tersebut, atau bahkan dari
Hypermedia + Text
•
Hypermedia + Text = Hypertext•
Hyperlink, untuk menghubungkan antara dokumen yang satu dengan dokumen yang lainMovie I:
Warriors of the NET
Apa yang terjadi antara
browser dan server?
Teknologi Web
1 2 3, 4
5 6
Langkah 1:
Mencari Alamat UKDW
•
simulasi:Teknologi Web
1 2 3, 4
5 6
Langkah 2:
Jawaban DNS
•
Server: 4.2.2.1 Address: 4.2.2.1#53 Non-authoritative answer: Name: www.ukdw.ac.id Address: 222.124.22.21Teknologi Web
1 2 3, 4
5 6
Langkah 3:
Membuka koneksi
•
simulasi: telnet 222.124.22.21 80 Trying 222.124.22.21... Connected to 21.subnet222-124-22.astinet.te lkom.net.id. Escape character is '^]'.Teknologi Web
1 2 3, 4
5 6
Langkah 4:
HTTP Request
•
GET / HTTP/1.1 Host: www.ukdw.ac.id User-Agent: Mozilla/5.0 ... Accept: text/html, ... Accept-Language: en-us, ... Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,... Keep-Alive: 300 Connection: keep-aliveTeknologi Web
1 2 3, 4
5
Langkah 5:
HTTP Response
•
HTTP/1.x 200 OKDate: Tue, 01 Sep 2009 22:13:40 GMT
Server: Apache/2.0.59 (Win32) Set-Cookie:
PHPSESSID=d358af56d20c3ef070e9 e6583dd4699a; path=/
Expires: Thu, 19 Nov 1981 08:52:00 GMT ...
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">...
Langkah 5 (lanjutan):
HTTP Response
•
<TD ROWSPAN=3> <img src="http:// www.ukdw.ac.id//client/images/ front_new/2.gif" width=185 height=238 alt=""> </TD>Langkah 3 (lagi):
Membuka koneksi (lagi)
•
simulasi: telnet 222.124.22.21 80 Trying 222.124.22.21... Connected to 21.subnet222-124-22.astinet.te lkom.net.id. Escape character is '^]'.Langkah 4 (lagi):
HTTP Request (lagi)
•
GET /client/images/front_new/ 2.gif HTTP/1.1 Host: www.ukdw.ac.id User-Agent: Mozilla/5.0 ... Accept: text/html, ... Accept-Language: en-us, ... Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,... ...Langkah 5 (lagi):
HTTP Response (lagi)
•
HTTP/1.x 200 OKDate: Tue, 01 Sep 2009 22:13:45 GMT
Server: Apache/2.0.59 (Win32) Last-Modified: Wed, 01 Nov
2006 01:24:52 GMT
Etag: "6842-728c-5ea8d43b" Accept-Ranges: bytes
Teknologi Web
1 2 3, 4
5
Langkah 6:
Browser Menampilkan
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 kaliHyperText
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
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
{
sebuah elemen
Struktur dasar halaman
HTML
•
<html>•
<head>•
<title></title>•
</head>•
<body>•
</body>•
<html>Kepala dan Badan
•
Head•
Berisi hal-hal selain isi(content) dari halaman web tersebut
•
Body•
Berisi isi (content) darihalaman web tersebut yang ditampilkan pada browser
Kepala dan Badan
•
Head•
Berisi hal-hal selain isi(content) dari halaman web tersebut
•
Body•
Berisi isi (content) darihalaman web tersebut yang ditampilkan pada browser
nested tags
•
<p>•
Pada tanggal 7 November 2009,•
<a href="http://knastik.org/">•
KNasTIK 2009•
</a>•
akan diselenggarakan di UKDW•
</p>nest = sarang?
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/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 soupBrowser war
•
Persaingan antar browser, masing-masing merasa diri lebih unggul dari yang lain•
Misal•
Proprietary Tags (marquee, blink, dll.)•
Rendering engine•
AkibatnyaWeb 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/#RecommendationsKeuntungan
menggunakan standar
•
Accessibility•
To software/machines•
To people•
Stability * http://www.webstandards.org/learn/faq/#p3XHTML 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 fleksibelValidasi
•
http://validator.w3.org/•
agar kita tahu yang kita buat sudah memenuhi standar atau belum•
kesalahan umum:•
tag img tanpa atribut alt•
lupa closing tagCSS
•
Cascading Style Sheets•
Mengatur bagaimana elemen-elemenHTML yang ada pada sebuah halaman web ditampilkan oleh browser
