Pengenalan WWW

dan HTML
Desain Web
Program Studi Teknik Informatika S-1
STMIK-Mikroskil Medan
Gunawan (gunawan@mikroskil.ac.id)
1
02/03/09 - Desain Web 2009
Pokok Bahasan
World Wide Web (WWW) 1
Pengembangan Web 2
HyperText Markup Language (HTML) 3
2
02/03/09 - Desain Web 2009
POKOK BAHASAN
World Wide Web
(WWW)
02/03/09 - Desain Web 2009
3
World Wide Web (WWW)
Salah satu layanan yang tersedia di Internet
Berawal pada tahun 1989 di CERN (Consei Europeen
pou la Reserche Nucleaire/Pusat Riset Nuklir Eropa),
Jenewa, Swiss oleh Tim Berners-Lee
Menawarkan informasi melimpah dalam berbagai
bentuk dengan keterkaitan dokumen hypertext dan
multimedia
Menggunakan protokol HTTP (Hypertext Transfer
Protocol)
4
02/03/09 - Desain Web 2009
Istilah Penting dalam WWW
Page/Web Page
HTML (HyperText Markup Language)
Website
Web Server
Browser/Web Browser
Webmaster/Web Manager
Surfer
Hyperlink/Link
Hypertext
URL (Uniform Resource Locator)
5
02/03/09 - Desain Web 2009
Hypertext
Teks dalam dokumen yang saling terhubung dengan
teks lain dalam cara yang nonlinear
Halaman web yang memiliki link ke halaman lain
6
02/03/09 - Desain Web 2009
Browser
7
02/03/09 - Desain Web 2009
Mengirim pesan permintaan ke web server
Menerima file-file hasil permintaan dari web server
Me-render kode HTML dari halaman web dan
menampilkan hasilnya
Menggunakan browser:
Masukkan URL website yang hendak dikunjungi
Dapatkan informasi dan ikuti setiap link yang dibutuhkan
Contoh browser:
Microsoft Internet Explorer
Opera
Mozilla
Konqueror
Netscape Navigator
Firefox
Safari
Chrome
Browser (cont.)
Masalah
website yang
sama kelihatan
berbeda pada
browser
berbeda!
8
02/03/09 - Desain Web 2009
Browser (cont.)
Kesimpulan
Internet Explorer
dan Firefox
merupakan browser
yang umum
digunakan
9
02/03/09 - Desain Web 2009
Uniform Resource Locator (URL)
Dalam mengakses halaman web, browser harus
mengetahui:
Bagaimana mengakses halaman
Di mana halaman dapat diambil
Apa nama file untuk halaman yang bersesuaian
URL didesain untuk menjawab pertanyaan di atas
dalam bentuk how://where/what
URL yang multiprotokol membuat dokumen hypertext
bisa mengakses aplikasi Internet lain
10
02/03/09 - Desain Web 2009
Uniform Resource Locator (URL) (cont.)
11
02/03/09 - Desain Web 2009
Ilustrasi Penggunaan WWW
12
02/03/09 - Desain Web 2009
POKOK BAHASAN
Pengembangan Web
02/03/09 - Desain Web 2009
13
Pengembangan Web
Web Design
Berkaitan dengan masalah
layout, grafik, dan media
lainnya yang dipakai dalam
menampilkan isi web
Memerlukan keterampilan
seni
Meliputi: HTML (Hypertext
Markup Language), CSS
(Cascading Style Sheets),
XML (eXtensible Markup
Language), XHTML
(eXtensible HyperText
Markup Language), grafik
web, animasi web
Pengembangan
Web
Web Programming
Berkaitan dengan
penambahan sifat interaktif
dan dinamis ke web
Memerlukan keahlian
pemrograman
Meliputi: J avaScript, VBScript,
SSI (Server Side Include), CGI
(Common Gateway Interface),
ASP (Active Server Pages),
PHP (Personal HomePage:
Hypertext Preprocessor), J SP
(J ava Server Pages), CFML
(Cold Fusion Markup
Language), J ava Applet
14
02/03/09 - Desain Web 2009
Desain Web
Web
Design
Information
design
Graphic
design
Interface
design
HTML, style sheet, and
graphic production
Multimedia
Scripting and
programming
15
02/03/09 - Desain Web 2009
Software Desain Web
16
02/03/09 - Desain Web 2009
Timeline Desain Web
17
02/03/09 - Desain Web 2009
POKOK BAHASAN
HyperText Markup Language
(HTML)
02/03/09 - Desain Web 2009
18
Pengenalan HTML
Hyper Text Markup Language
Bahasa yang digunakan dalam penayangan isi web
Bukan merupakan bahasa pemrograman bahasa
markup untuk melakukan penandaan terhadap sebuah
dokumen teks
File HTML: file teks yang berisi tag-tag markup harus
berakhiran (berekstensi) htm atau html
Tag markup memberitahukan web browser untuk
menampilkan halaman
Dapat dibuat menggunakan teks editor sederhana
19
02/03/09 - Desain Web 2009
Pengenalan HTML (cont.)
Standar HTML dikembangkan oleh W3C (World Wide
Web Consortium)
Standar, spesifikasi, dan rancangannya
http://www.w3.org
Spesifikasi HTML terbaru HTML 4.01
Saat ini terdapat spesifikasi baru pengganti HTML
XHTML versi terakhir: 2.0
20
02/03/09 - Desain Web 2009
Milestone HTML
Pengembangan dari standar pemformatan dokumen
teks SGML (Standard Generalized Markup Language)
HTML 1.0 1990
HTML+ 1993
HTML 2.0 Nopember 1995 (IETF)
HTML 3.0 1995
HTML 3.2 Januari 1997 (W3Cs HTML Working
Group)
HTML 4.0 18 Desember 1997
HTML 4.01 24 April 1998
21
02/03/09 - Desain Web 2009
Elemen HTML
Dokumen HTML merupakan file teks yang dibentuk oleh
elemen-elemen HTML
Elemen HTML didefinisikan menggunakan tag-tag
HTML
22
02/03/09 - Desain Web 2009
Tag HTML
Digunakan untuk menandai elemen HTML
Diapit oleh dua karakter (< dan >)
Biasanya berpasangan contoh: <b> dan </b>
Tag pertama dalam pasangan tag awal
Tag kedua dalam pasangan tag akhir
Teks di antara tag awal dan akhir isi elemen
Tidak case sensitive <b> tidak berbeda dengan <B>
Bentuk umum tag HTML:
<nama_tag><br>, <hr>
<nama_tag></nama tag><p>...</p>, <h1>...</h1>
23
02/03/09 - Desain Web 2009
Elemen dan Tag HTML
24
02/03/09 - Desain Web 2009
Atribut Tag HTML
Tag HTML dapat memiliki atribut
Atribut menyediakan informasi tambahan pada sebuah
elemen HTML
Didefinisikan pada tag awal dari sebuah elemen HTML
Dapat diberi nilai ataupun tidak bernilai
Penulisan tag yang memiliki atribut:
<nama_tag atribut1=nilai [atribut2=nilai atribut3=nilai ...]>
Contoh:
<hr align=right>
<hr align=left noshade>
<img src=images/foto.jpg alt=
height=400 width=300>
<nama_tag atribut=nilai [atribut2=nilai atribut3=nilai ...]>
...</nama_tag>
Contoh:
<font face=Arial size=5
color=#CCCCCC>...</font>
25
02/03/09 - Desain Web 2009
Atribut Tag HTML (cont)
26
02/03/09 - Desain Web 2009
Struktur Dasar Dokumen HTML
Bagian head umumnya berisi informasi mengenai
dokumen tersebut, misalnya judul dokumen, versi
HTML yang digunakan, dan lain-lain
Bagian body berisi layout atau desain halaman web
27
02/03/09 - Desain Web 2009
Membuat Dokumen HTML
28
02/03/09 - Desain Web 2009
Contoh Dokumen HTML
29
02/03/09 - Desain Web 2009
30
02/03/09 - Desain Web 2009