Скачать презентацию
Идет загрузка презентации. Пожалуйста, подождите
Презентация была опубликована 8 лет назад пользователемРуслан Болдырев
1 Pertemuan 3 Web Design Fundamental Mata Pelajaran: TIK 3 Topik: Web Design T.P: 2011/2012 Versi: 2 1
2 Learning Outcomes Pada akhir pertemuan ini, diharapkan peserta didik akan mampu : Menjelaskan elemen dasar Desain web Membuat halaman web statis sederhana 2
3 Outline Materi Dasar desain web Dasar HTML Membuat Hyperlink dan Images Pemformatan Tingkat Lanjut Scripting sisi klien: Mengenal JavaScript Mengenal VB Script 3
4 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
5 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
6 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
7 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
8 Simple HTML Pages Web Programming Saya Mahasiswa UBinus Selamat Datang di Web Saya 8
9 Result 9
10 Text Formatting List (bullet) Text Style: Italic Font Underline Bold, etc Paragraph control Etc 10
11 Font Formatting Web Programming Saya Mahasiswa UBinus Selamat Datang di Web Saya 11
12 Result 12
13 Marquee Contoh marquee UBinus Cute HomePage 13
14 Result 14
15 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
16 Unordered List Produk kami terdiri dari : Training Konsultasi 16
17 Result 17
18 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
19 Advanced Formatting Table Frame Cascade Style Sheet (CSS) XSL (XML Style Sheet) 19
20 Table no nama 20
21 Table No Nama Kelas 1 Iwan Web Programming 21
22 Result 22
23 Inputbox and Password Inputbox and password are usefull for inserting data Masukkan nama Anda : dan Password : 23
24 Check and Radio Button Negara mana yang ingin anda kunjungi: Asia Afrika North Amerika Europe Jenis kelamin Anda ? Laki-Laki Wanita 24
25 Text Area TextArea is usefull for entering complete data Mohon masukkan alamat lengkap Anda: 25
26 Reset and Submit Button Reset Button for clearing message, submit button for submitting data 26
27 Frame UBinus Homepage 27
28 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
29 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
30 Example Javascript function mulai() { alert ('Selamat datang di situs Web Programming!'); } 30
31 Result 31
32 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
33 Result 33
34 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
35 Our first VBScript 7 8 9 Click the button to add an integer 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 23 24 25 26 27Click the button to add an integer to the total. 28 29 30 32 33 34 1.1. 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">
36 Output 36 Input dialog Message dialog
37 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
38 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:
Еще похожие презентации в нашем архиве:
© 2024 MyShared Inc.
All rights reserved.