Pemrograman Web Dasar Pemrograman Web 2 · PDF fileBahasa pemrograman web yang untuk ......

Dasar Pemrograman Web 2Pemrograman Web

Adam Hendra Brata

Pokok Bahasan

Client - Server- Pemrograman

Sisi Client- Pemrograman

Sisi Server

HTML- Tag- Struktur- Layout- IMK

CSS- Style- Layout

Teknologi Client Server

Konsep Dasar Desain WebHTML

CSS

Teknologi Client Server

Arsitektur Client Server Model komunikasi yang terdiri server

sebagai pemberi layanan dan client sebagai pengguna layanan

Pokok Bahasan



Sisi Server


CSS- Style- Layout

Web Server Web server adalah server yang bertugas

sebagai penyedia dokumen yang diminta web browser. Web server harusmampu melayani permintaan dokumenyang diminta web browser, dan mampudisetting berinteraksi dengan program JSP, ASP, PHP, secara CGI dansebagainya.

Contoh : Apache (PHP), IIS (ASP), Tomcat (JSP)

Pokok Bahasan



Sisi Server


CSS- Style- Layout

Web Browser Web Browser adalah perangkat lunak

yang mulanya hanya untukmenampilkan (rendering) dokumenweb/HTML. Namun saat ini, web browser harus mampu mengeksekusi(interpretasi) JavaScript atau VBScript, menjalankan Java Applet, memahamidokumen XML, dan menjalankandokumen tertentu dengan fasilitasplug-in.

Contoh : Internet Explorer, Mozilla Firefox, Google Chrome.

Pokok Bahasan



Sisi Server


CSS- Style- Layout

Pemrograman Sisi Client Bahasa pemrograman web yang untuk

mengaplikasikannya tidak memerlukanweb server, atau bahasa pemrogramanyang berjalan di sisi client.

Contoh :

HTML

JavaScript

Pokok Bahasan



Sisi Server


CSS- Style- Layout

Pemrograman Sisi Server Bahasa pemrograman web yang untuk

mengaplikasikannya memerlukan web server, atau bahasa pemrograman yang berjalan di sisi server.

Contoh :

ASP, memerlukan web server IIS.

PHP, memerlukan web server Apache.

JSP, memerlukan web server Tomcat

Pokok Bahasan



Sisi Server


CSS- Style- Layout

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.

Pokok Bahasan



Sisi Server


CSS- Style- Layout

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

Pokok Bahasan



Sisi Server


CSS- Style- Layout

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>

Pokok Bahasan



Sisi Server


CSS- Style- Layout

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

Pokok Bahasan



Sisi Server


CSS- Style- Layout

Struktur HTMLPokok Bahasan



Sisi Server


CSS- Style- Layout

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>

Pokok Bahasan



Sisi Server


CSS- Style- Layout

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

Pokok Bahasan



Sisi Server


CSS- Style- 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>

Pokok Bahasan



Sisi Server


CSS- Style- Layout

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

Pokok Bahasan



Sisi Server


CSS- Style- Layout

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>

Pokok Bahasan



Sisi Server


CSS- Style- Layout

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

Pokok Bahasan



Sisi Server


CSS- Style- Layout

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>

Pokok Bahasan



Sisi Server


CSS- Style- Layout

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.

Pokok Bahasan



Sisi Server


CSS- Style- Layout

Interaksi Manusia dan KomputerPokok Bahasan



Sisi Server


CSS- Style- Layout

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

Pokok Bahasan



Sisi Server


CSS- Style- Layout

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

Pokok Bahasan



Sisi Server


CSS- Style- Layout

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.

Pokok Bahasan



Sisi Server


CSS- Style- Layout

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.

Pokok Bahasan



Sisi Server


CSS- Style- Layout

Cascading Style Sheet Terdapat 3 teknik dasar penggunaan

CSS : Inline Style Sheet Embedded Style Sheet Linked Style Sheet

Pokok Bahasan



Sisi Server


CSS- Style- Layout

Inline Style Sheet Mengetikkan langsung dalam tag

html sebagai atribut

Pokok Bahasan



Sisi Server


CSS- Style- Layout

Embedded Style Sheet Menggunakan tag style di dalam

tag head.

Pokok Bahasan



Sisi Server


CSS- Style- Layout

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.

Pokok Bahasan



Sisi Server


CSS- Style- Layout

Linked Style SheetPokok Bahasan



Sisi Server


CSS- Style- Layout

Aturan Penulisan CSS Selector

Terdiri dari tag,class,ID Declaration

Mendeskripsikan property dan value

ContohH1{

Color : #0000FF}

Keterangan : Selector : H1 Property : Color Value : #0000FF

Pokok Bahasan



Sisi Server


CSS- Style- Layout

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.

Pokok Bahasan



Sisi Server


CSS- Style- Layout

ClassPokok Bahasan



Sisi Server


CSS- Style- Layout

IDPokok Bahasan



Sisi Server


CSS- Style- Layout

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

Pokok Bahasan



Sisi Server


CSS- Style- Layout

CSS LayoutPokok Bahasan



Sisi Server


CSS- Style- 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

Tugas 1 Membuat website profil pribadi dengan

kriteria : Minimum 5 halaman, terkoneksi

dengan hyperlink Memuat data diri dilengkapi

dengan foto dan gambar lain Menggunakan HTML dan CSS Layout boleh memakai table atau

CSS Jika bisa menggunakan CSS layout,

maka penilaian bisa lebih tinggi Menggunakan konsep desain

bertema sesuai dengan profil masing – masing

Dilarang menggunakan template website, CSS template dan sebagainya

Tugas 1

Tugas 1 Kirimkan tugas dalam bentuk zip atau

rar yang dalamnya terdiri dari beberapa jenis file yang terkait dengan web yang dibuat

Kumpulkan tugas melalui email ke alamat email

[email protected] [email protected]

Deadline : Minggu, 1 Maret jam 00.00 (Sabtu Tengah Malam)

Tugas 1

Terimakasih dan Semoga

Bermanfaat ^^

Pemrograman Web Dasar Pemrograman Web 2 · PDF fileBahasa pemrograman web yang untuk ......

Documents

Transcript of Pemrograman Web Dasar Pemrograman Web 2 · PDF fileBahasa pemrograman web yang untuk ......