Basic HTML Workshop

1
Basic HTML Workshop

• Session 1 Introduction to HTML
• Spring 2005

2
Objectives for session 1

• To learn the key vocabulary for Web page
  development.
• To learn the basic concepts of the Internet.
• To set up your own Web page.
• To learn the tips for effective Web design.

3
Part 1Internet and Hypertext Markup Language
4
What is the Internet?

• Inter-connection of various computer networks.
• Worldwide network of networks connected with each
  other.

5
Computer Network
A collection of computers that can communicate
with each other. Each computer has its own unique
address. Computers in a network share a common
address.
www4.gu.edu.au/shr/lrt/ mod06/m06t01s01.htm
6
Internet a worldwide network of networks
http//www.iijnet.or.jp/sankyo/inet/2.html
Enables computers to access information provided
by computers in other networks.
7
Main functions of the Internet

• WWW (World Wide Web)
• Browsing and developing Web pages.
• E-mail
• FTP (File Transfer Protocol)
• details in Session 3.

8
The Web (World Wide Web or WWW)

• The system with which Web pages function.
• Recognizes, transfers and displays various
  types of file format. (texts, images, sounds and
  videos etc)
• connects all kinds of information on the
  Internet (enables to access all information in a
  simple manner.)

9
Web pages and Web sites
Other Web page
Web Page
Web page (Home)
Web site
Hyperlinks
Hyperlinks
Web page
Other Web page
10
HTML (Hypertext Markup Language)

• The basic programming language used for creating
  Web pages.
• holds all the necessary files together.
• makes hyperlinks available.

11
HTML (Hypertext Markup Language)
Web pages HTML files uploaded to the Internet
12
Web pages

Sound file
Web page
Video file
Image file
13
Browsers

• Software to view Web pages.
• Understand the HTML codes and display what they
  intend.

14
Editors

• Software used to write HTML codes and create
  files.

• Text Editors Notepad, Wordpad, SimpleText
• Text Editors with features Macromedia Homesite,
  BBEdit
• Advanced Editors Dreamweaver, Microsoft Frontpage

15
Dreamweaver
16
(No Transcript)
17
Web Servers

• Computers that house Web sites.

Other computers request browsing your pages
through the servers. (using HTTP protocol)
Server
You upload HTML files to the Web server. (using
FTP protocol)
18
URL (Uniform Resource Locator)

• http//www2.hawaii.edu/yokokudo/index.htm
• a b
  c d
• a Protocol
• b Server name
• c Directory name (the space in the server
  reserved for you)
• d File name

19
URL (Uniform Resource Locator)

• http//www2.hawaii.edu/yokokudo/601/pathfinder.ht
  m

www2.hawaii.edu
yokokudo
bib.plan.htm
694
601
pathfinder.htm
20
Your homepage

• Lets set up your space on the UH server!
• Instruction is on your handout.
• The URL is going to be
• http//www2.hawaii.edu/your userID

21
Part 2Planning a website
To create Web pages that effectively communicate
important information to users
22

• Clear and simple contents.
• headings/ short sentences/ bullets
• Simple navigation and structure.
• clear categories/ where you are indication/
• simple hierarchy
• Small file size.
• less images and special effects.

23
Clear category naming

• Lets assume you are looking for job listings
  section on a web site.

Jobs
Employment Opportunity
Job-o-Rama
Obvious Less obvious
Requires thoughts
Steve Krug, Dont Make Me Think! A Common Sense
Approach to Web Usability (Indianapolis, Ind.
Que, c2000), 14.
24
Where Do Users Pay Attention to?
Steve Outing and Laura Ruel, The Best of
Eyetrack III What We Saw When We Looked Through
Their Eyes, EyetrackIII home page on-line
25
Lets look at some sites

• Queens Borough Public Library
• http//www.queenslibrary.org/
• Glen Eira Library Information Service
• http//www.gleneira.vic.gov.au/library/
• Rudys Alaska Fishing Page
• http//www.alaskafishinglogs.com/
• The Bus Oahu transit services
• http//www.thebus.org/

26
To start planning your pages

• Jot down concepts and ideas you want in web
  pages.
• Pick up the keywords from them and think which
  ones should be headings or hyperlinks.

27
Thank you!