Scribd
Upload
48 views

Chapter 1-HTML Intro OL 1 Worksheet

This document provides an introduction to web design. It defines key terms like the World Wide Web, hyperlinks, HTML, HTTP, and web browsers. It explains the purpose and target audience of different types of websites. The document outlines the process of planning a website including wireframes, mockups, and site maps. It also discusses HTML, CSS, JavaScript, and other technologies used in web design. The roles of a web designer are defined as working with HTML, CSS, JavaScript, scripting languages, and XML.

Uploaded by

Jimmy Fong Xin Wern
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
48 views

Chapter 1-HTML Intro OL 1 Worksheet

This document provides an introduction to web design. It defines key terms like the World Wide Web, hyperlinks, HTML, HTTP, and web browsers. It explains the purpose and target audience of different types of websites. The document outlines the process of planning a website including wireframes, mockups, and site maps. It also discusses HTML, CSS, JavaScript, and other technologies used in web design. The roles of a web designer are defined as working with HTML, CSS, JavaScript, scripting languages, and XML.

Uploaded by

Jimmy Fong Xin Wern
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

Introduction 

To Web Design 
DESAIN WEB (IF-1P03)

Ken Ratri Retno Wardani, S.Kom, M.T.


Program Studi Informatika

Institut Teknologi Harapan Bangsa

1
Objective

• What is the Web?
• define the Internet and associated key
terms
• Scope web Desain

2
World Wide Web
o The World Wide Web (commonly shortened to 
the Web) is ……………………………………………….

3
4
World Wide Web
• A home page – is

• A hyperlink, 

5
World Wide Web

o hypertext documents are created ……….

o HTML is sent or received…..

6
Protocols

o A protocol is 

o A server is

o Hypertext Transfer Protocol (HTTP) is

o File Transfer Protocol (FTP) is

7
Web Browsers

• A web browser is

• A Uniform Resource Locator (URL) is

• A domain is

8
Types of Websites

• Many company websites also support electronic


commerce (e-commerce), ..

• Educational institutions use a Learning Management


System (LMS) to simplify course management–

• ..

• ..

9
Planning a Website

• Purpose of the website—

• Target Audience—

• Multiplatform Display—

10
11
Internet vs Web

12
Web Design

• ………..

• Skills : …………..

• Desain :……………………

13
Wireframe  
• …………………………………..

14
Mockup

15
Site Map

•A site map is……..

•Several website structures:
……………..
………………
………………

16
Site Map

• A linear website structure…………….

17
Site Map

• In a variation of a linear website structure, 

18
Site Map

• A hierarchical website ……………….

19
Site Map

• A webbed website 
structure

20
Willoughby's Website
Splash Page
index.html

Pictures Gallery Name Page Progress Page


gallery.html name.html progress.html

Canada Trip Christmas Tree


canada.html tree.html

21
The Making of a Good Design
Good Design is:
• ………………
• …………………
• ……………………
• ……………………….
• ………………………….

22
Web Design Has Many Different Roles : 

• HTML ; 

• CSS ; 
• JavaScript ;

• PHP, ASP, ColdFusion scripting
• XML

23
24
HTML

25
CSS Support
• Cascading Style Sheets (CSS) is a style sheet 
language used for describing the presentation 
semantics (the look and formatting) of a document 
written in a markup language.
• HTML supports CSS3.
• CSS3 is supported by major browsers.
• CSS reduces presentation duty of an HTML page. 
Modification of looks is simple. 

26
HTML+ Cascading Style Sheets (CSS)

27
JavaScript

• It is a popular client‐side scripting language used to 
create interactivity within a web browser
• The web pages that contain JavaScript are named 
with an .htm or .html extension
• Not to be confused with a file with just JavaScript 
code with a .js extension
• Not to be confused with Java –a full function 
programming language
• Ex. Alert box, time, calculator, game etc

28
JQUERY
• It is a library of JavaScript programs designed for 
easy integration onto a webpage
• jQuery is a fast, small, and feature‐rich JavaScript 
library

29
Thankyou
Q & A

30

You might also like