Rekayasa Perangkat Lunak
advertisement
Pemrograman Web
Dasar Pemrograman Web
Adam Hendra Brata
Konsep Dasar Desain Web
HTML
CSS
HTML
HTML (HyperText Markup Language)
Bahasa standar yang digunakan untuk
menampilkan document web.
Mengontrol tampilan dari web page dan
contentnya.
Mempublikasikan document secara
online sehingga bisa di akses.
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 document HTML.
HyperText Markup Language
Bahasa umum untuk web
Ditransmisikan lewat Hyper Text
Transfer Protocol
Client mengirim string request
(dengan parameter)
Server mengembalikan
document yang diminta
Mendeksripsikan konten dokumen dan
strukturnya
Format terstruktur
Konten dan struktur pada dokumen
yang sama
Browser dan formatter bertanggung
jawab dalam proses rendering
Dokumen yang formatnya salah
dapat ditampilkan secara parsial
Beda browser bisa berbeda hasil
penampilan
Tag HTML
Kalau pada bahasa pemrograman
kita mengenal keyword code, maka
pada HTML kita mengenal yang
namanya tag.
Contoh tag html adalah <head>,
<title>, <body>, <html>, <img>, dan
lain-lain.
Tag html tidak bersifat case sensitive
<body> sama dengan <BODY>
Bentuk umum penulisan tag html adalah:
<ELEMENT ATTRIBUTE = value>
Element - nama tag
Attribute - atribut dari tag
Value - nilai dari atribut
Contoh:
<BODY BGCOLOR=lavender>
Contoh Tag HTML
<html> Penanda Dokumen <br> Ganti baris
<head> Header
< font> Font
<title> Judul dokumen
<li> Enumerasi
<body> Isi dokumen
<hr> Garis mendatar
<h1> Judul paragraf
<img> Gambar
<p> Paragraf
<a> Link (kaitan)
<b> <i> <u>
<table> Tabel
<sup> <sub> Atribut
<!----> Komentar
Struktur HTML
<Head>
<Title>
Kepala
<head>
Judul Homepage
</Title>
</Head>
Homepage
<Body>
Isi…Teks
Isi…Tabel.
Isi…Audio, Video, dll.
Tubuh
<body>
</Body>
<html>
<head>
<title>Halaman Latihan</title>
</head>
<body>
<h1>Ini adalah latihan pemrograman
web pertamaku
</h1>
</body>
</html>
Layout dalam Desain Web
Layout menjadi hal utama dalam desain
web, karena tata letak yang tepat dari
sebuah website menentukan
keberhasilan dari tujuan web tersebut.
Layout secara umum dibagi menjadi :
Frame layout
Table Layout
CSS Layout
Frame Layout
Frame layout dibentuk dengan
menggunakan beberapa halaman web
terpisah yang “disatukan” dengan
menggunakan frame
Ciri utamanya dalam script webnya
ditemukan tag <frameset></frameset>
Frame Layout
Teknik frame layout adalah teknik yang
sangat “jadul”
Kelebihan frame layout adalah pada
kesederhanaannya dan bisa menjaga
elemen website tidak terkena scroll
Frame layout memiliki kekurangan :
1. Frame merusak penyatuan dari
sebuah Web
2. Frame menyebabkan
permasalahan kepada robot
search engine
3. Frame membuat URL berhenti
bekerja
4. Frame mempersulit Bookmarking
dan dalam pencetakan
5. Frame mempersulit aksesibilitas
6. Frame secara teknis memperumit
kompleksitas Web
Table Layout
Table layout dibentuk dengan
menggunakan elemen table dalam
HTML yang disusun sedemikan rupa
sehingga menjadi sebuah layout web
Ciri utamanya dalam script webnya
ditemukan penggunaan tag <table>
</table> dan banyak sekali kombinasi
pemakaian tag <tr></tr> dan <td></td>
Table Layout
Teknik table layout adalah teknik yang
yang populer di era pertengahan
perkembangan web (2000-an)
Kelebihan table layout adalah :
1. Sangat mudah dipahami dan
dimaintain karena sistematis
2. Relatif mudah jika ingin
mengubah yg bersifat parsial
3. Tingkat presisi posisi elemen
lebih tinggi
Table layout memiliki kekurangan :
1. Ukuran file menjadi besar
2. Terkadang tampilan rusak jika
browser yang dipakai tidak
support
3. Tidak cocok untuk digunakan
pada web yang memiliki layout
bersifat dinamis
CSS Layout
CSS layout dibentuk dengan
menggunakan elemen CSS yang
mengkombinasikan tag dan style dalam
HTML
Ciri utamanya dalam script webnya
ditemukan banyak penggunaan tag
<div></div>
Interaksi Manusia dan Komputer
IMK didefinisikan sebagai disiplin ilmu
yang berhubungan dengan
perancangan, evaluasi, dan
implementasi sistem komputer
interaktif untuk digunakan oleh
manusia dan studi tentang fenomena di
sekitarnya.
IMK pada prinsipnya membuat agar
sistem dapat berdialog dengan
penggunanya “seramah” mungkin.
Faktor IMK yang menjadi fokus utama
pada desain web adalah penggunaan
warna, layout, penggunaan gambar dan
penggunaan huruf.
Interaksi Manusia dan Komputer
Interaksi Manusia dan Komputer
Warna
Warna secara umum memiliki arti
dan kesan yang berbeda-beda,
bahkan di beberapa negara warna
memiliki arti yang lebih spesifik
Merah = panas, semangat, kuat,
marah
Merah di Cina dianggap sebagai
warna keberuntungan namun
warna merah di Afrika dianggap
sebagai warna duka cita
Layout
Tata letak unsur-unsur website yang
baik membuat pengguna merasa
nyaman untuk memakai website,
sehingga desain layout menjadi hal
yang sangat penting sebelum
melakukan pemrograman lebih
lanjut
Interaksi Manusia dan Komputer
Gambar
Penggunaan gambar di web
memberikan kesan memperjelas
dan mempercantik tampilan
Namun perlu diingat bahwa
pemakaian gambar yang kurang
tepat, juga dapat memberi nilai
minus pada desain kita
Penggunaan gambar harus
disesuaikan dengan tema dan
kebutuhan
Huruf
Penggunaan huruf yang baik
menjadi kunci keberhasilan sebuah
website
Huruf harus bisa dibaca dengan
jelas, sesuai kaidah umum dan
sesuai dengan tema web
CSS
Cascading Style Sheet
CSS = Cascading Style Sheet
Fungsi : mendefinisikan style untuk
suatu teks dengan jenis huruf, ukuran ,
warna tertentu.
Dalam pemakaian HTML murni kita
pasti menggunakan tag <font> dan tag
lain untuk mengontrol bagaimana
layout dari halaman anda. Hal ini
mengikat presentasi halaman web
dengan isinya, dan terasa menyulitkan
dalam perancangan dan
pengembangannya.
CSS adalah standard pembuatan dan
pemakaian style untuk dokumen
terstruktur , CSS digunakan untuk
mempersingkat penulisan tag HTML
seperti font,color,text, dan table
menjadi lebih ringkas sehingga tidak
terjadi pengulangan tulisan.
Cascading Style Sheet
Jika web memiliki sekian halaman yang
memiliki format yang seragam, dan
kemudian ingin merubah format
dasarnya, tentu yang dilakukan adalah
mengubah tiap halaman tersebut.
Dengan Style Sheet dapat mengontrol
seluruh layout dari site yang dibuat, dan
jika ingin mengubah tampilan dari web
site tersebut cukup dengan
memodifikasi style sheet.
Keuntungan menggunakan CSS
Memisahkan presentation sebuah
dokumen dari content document itu
sendiri.
Mempermudah dan Mempersingkat
pembuatan dan pemeliharaan
dokumen web
Mempercepat proses
rendering/pembacaan HTML.
Cascading Style Sheet
Terdapat 3 teknik dasar penggunaan
CSS :
Inline Style Sheet
Embedded Style Sheet
Linked Style Sheet
Inline Style Sheet
Mengetikkan langsung dalam tag
html sebagai atribut
Embedded Style Sheet
Menggunakan tag style di dalam
tag head.
Linked Style Sheet
Menyimpan informasi style ke dalam
sebuah file dengan ekstensi/type file
css dan memanggil file css dalam
html dengan tag link yang
diletakkan dalam tag head.
Linked Style Sheet
Aturan Penulisan CSS
Selector
Terdiri dari tag,class,ID
Declaration
Mendeskripsikan property dan
value
Contoh
H1
{
Color : #0000FF
}
Keterangan :
Selector : H1
Property : Color
Value : #0000FF
Selector
Secara umum ada 3 jenis selector dalam
CSS :
Tag HTML
ID
Class
Class
Diawal penulisan menggunakan
tanda titik, pada HTML
ditambahkan class
ID
Diawali dengan tanda #, dapat
digunakan untuk mendefinisikan
header,content, dan footer dalam
desain web krn didefiniskan dengan
ID berbeda.
Class
ID
CSS Layout
CSS Layout sangat populer digunakan
dalam desain web
Kelebihan CSS Layout
Update tampilan lebih mudah
Beban bandwidth lebih kecil
Modifikasi web template lebih
mudah
Lebih mudah digunakan pada
mobile phone
Seacrh engine friendly
Kekurangan CSS Layout
Memerlukan ketelitian tinggi dalam
menuliskan tag tag div terutama lay
out yang kompleks
Terkadang efek tampilan di tiap
browser berbeda
CSS Layout
Perhatian
Perhatian
Dikarenakan materi yang disampaikan
pada presentasi kuliah ini hanya sebagai
pengantar dasar saja, maka diharapkan
membaca dan mencari referensi lain
sebagai pengayaan pengetahuan
tentang dasar – dasar desain web.
Cari dan baca artikel / tutorial dari
internet atau buku tentang desain web.
Explorasi kembali materi tentang
desain web dan HTML-CSS.
Terimakasih dan
Semoga
Bermanfaat ^^