rekayasa perangkat lunak · pdf fileonline sehingga bisa di akses. membuat online form yang...
TRANSCRIPT
Dasar Pemrograman WebPemrograman Web
Adam Hendra Brata
Konsep Dasar Desain WebHTML
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 menanganipendaftaran, transaksi secara online.
Menambahkan object-object sepertiimage, 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 mengembalikandocument 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
Homepage
Kepala
<head>
Tubuh
<body>
<Head>
<Title>
Judul Homepage
</Title>
</Head>
<Body>
Isi…Teks
Isi…Tabel.
Isi…Audio, Video, dll.
</Body>
<html>
<head>
<title>Halaman Latihan</title>
</head>
<body>
<h1>Ini adalah latihan pemrogramanweb 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 Web2. Frame menyebabkan
permasalahan kepada robot search engine
3. Frame membuat URL berhenti bekerja
4. Frame mempersulit Bookmarking dan dalam pencetakan
5. Frame mempersulit aksesibilitas6. 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 sistematis2. Relatif mudah jika ingin
mengubah yg bersifat parsial3. Tingkat presisi posisi elemen
lebih tinggi Table layout memiliki kekurangan :
1. Ukuran file menjadi besar2. 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
ContohH1{
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 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.
Perhatian
Terimakasih dan Semoga
Bermanfaat ^^