Pertemuan 3 Web Design Fundamental Mata Pelajaran: TIK 3 Topik: Web Design T.P: 2011/2012 Versi: 2 1

Learning Outcomes Pada akhir pertemuan ini, diharapkan peserta didik akan mampu : Menjelaskan elemen dasar Desain web Membuat halaman web statis sederhana 2

Outline Materi Dasar desain web Dasar HTML Membuat Hyperlink dan Images Pemformatan Tingkat Lanjut Scripting sisi klien: Mengenal JavaScript Mengenal VB Script 3

Web Design Fundamental Web Design play important role in successful Web Application, it is the interface from computer to human world Web Application = Web Design + Web Programming A web site designer must start by structuring the information content in ways that allow for connection, interaction and interference. This principle concerns the format of a web site: the structure, sense-making, navigation and interface 4

Web Design Fundamental Important about designing web : Information Design User Interface Design Graphics design Tools for Web Design: Content Authoring (HTML Editor) Adobe Photoshop, Illustrator 5

HTML Basic HTML Hypertext Markup Language Not procedural Markup language Identify elements of a page so that a browser can render that page on your computer screen Used to format text and information Marked up with elements, delineated by tags Tags: keywords contained in pairs of angle brackets HTML tags Not case sensitive Good practice to keep all the letters in one case Forgetting to close tags is a syntax error 6

HTML Structure Always include the … tags Comments placed inside tags HTML documents … section Info about the document Info in header not generally rendered in display window … element names your Web page … section Page content Includes text, images, links, forms, etc. Elements include backgrounds, link colors and font faces element forms a paragraph, blank line before and after 7

Simple HTML Pages Web Programming Saya Mahasiswa UBinus Selamat Datang di Web Saya 8

Result 9

Text Formatting List (bullet) Text Style: Italic Font Underline Bold, etc Paragraph control Etc 10

Font Formatting Web Programming Saya Mahasiswa UBinus Selamat Datang di Web Saya 11

Result 12

Marquee Contoh marquee UBinus Cute HomePage 13

Result 14

Ordered List Tiga hal yang harus diperhatikan Siswa Sayangilah Ibumu melebihi sayangmu dengan doi mu Hormatilah dosenmu melebihi hormatmu pada Pak Polisi Jangan malas belajar text book dan internet 15

Unordered List Produk kami terdiri dari : Training Konsultasi 16

Result 17

Hyperlink and Images We can use Hyperlink to let user jump to other location or resources Hyperlink can used internally (within same page) or externally Syntax: Situs Saya 18

Advanced Formatting Table Frame Cascade Style Sheet (CSS) XSL (XML Style Sheet) 19

Table no nama 20

Table No Nama Kelas 1 Iwan Web Programming 21

Result 22

Inputbox and Password Inputbox and password are usefull for inserting data Masukkan nama Anda : dan Password : 23

Check and Radio Button Negara mana yang ingin anda kunjungi: Asia Afrika North Amerika Europe Jenis kelamin Anda ? Laki-Laki Wanita 24

Text Area TextArea is usefull for entering complete data Mohon masukkan alamat lengkap Anda: 25

Reset and Submit Button Reset Button for clearing message, submit button for submitting data 26

Frame UBinus Homepage 27

Client Side Scripting Client Side Scripting is script that execute in client side, that is Web Browser Client Side Scripting useful for standard input validation that no require any validation against database 2 popular Client Side Scripting: Java Script: Java language like scripting, supported by Netscape VB Script: Visual Basic like scripting, supported by Internet Explorer 28

Introduction to JavaScript JavaScript scripting language Originally created by Netscape Facilitates disciplined approach to designing computer programs Enhances functionality and appearance of Web pages … tag: Encloses entire script Attribute LANGUAGE=JavaScript Indicates scripting language (JavaScript default in IE5 & Netscape) JScript Microsofts version of JavaScript 29

Example Javascript function mulai() { alert ('Selamat datang di situs Web Programming!'); } 30

Result 31

Example Javascript function pangkat(bil,p) { var hasil=1 for (var hit=1 ; hit<=p ; hit++) { hasil=hasil*bil; } return (hasil) } function process() { var hasil; hasil = pangkat(in1.value,in2.value)*in3.value; out1.value=hasil } Kalkulator Sederhana ^ * = 32

Result 33

Introduction to VBScript VB Script is a scripting language that similar to Visual Basic Develop bye Microsoft and supported by Internet Explorer Contoh: Dim nama Dim alamat 34

Our first VBScript 7 8 9<!-- 10 Option Explicit 11 Dim intTotal Sub cmdAdd_OnClick() 14 Dim intValue intValue = InputBox("Enter an integer", "Input Box",, _ , 1000) 18 intTotal = CInt( intTotal ) + CInt( intValue ) 19 Call MsgBox("You entered " & intValue & _ 20 "; total so far is " & intTotal,, "Results") 21 End Sub 22--> Click the button to add an integer to the total <INPUT NAME = "cmdAdd" TYPE = "BUTTON" 31 VALUE = "Click Here to Add to the Total"> Set language to VBScript 1.2. OptionExplicit statement 1.3.Define procedure OnClick for the cmAdd button 1.4.Use CInt to convert input values from string subtype to integer subtype

Output 36 Input dialog Message dialog

Summary Dokumen web statis dapat dibuat menggunakan HTML Untuk membuat dokumwen web yang dinamis, dapat menggunakan vbscript, javscript serta bahasa pemrograman web lainnya Client side scripting ialah script yang dieksekusi di klien (Web browser). 37

References Internet & WWW How to Program, Deitel & Deitel Fundamental Web Design Principles, Widodo Budiharto, Panduan Lengkap Pemrograman Web Menggunakan J2EE, Andi Offset Yogyakarta 2005 Introduction to Web Programming 4 days: Introduction to Web Design 3 days: