Basic HTML Workshop

1
Basic HTML Workshop

• Session 1 Introduction to HTML
• Fall 2006

2
What is the Internet?

• Inter-connection of computer networks
• Interconnected networks worldwide
• Computers access other networks

3
Computer Network

• Computers communicate with each other
• Each computer uniquely identified
• Networked computers share address

4
Functions of the Internet

• WWW (World Wide Web)
• Browsing Web pages (HTTP)
• E-mail
• Online Chat
• File Transfer Protocol (FTP) gtSession 2
• Net News

5
World Wide Web

• Collection of documents
• Stored on servers
• Enables access to information
• Recognizes and displays file format
• Created by Tim Berners-Lee

6
Web Page

• Collection of files

7
Web Page

• Web page Files uploaded to Internet
• HTML code
• Images
• Media

8
HTML (Hypertext Markup Language)

• Programming language
• Used to create Web pages
• Gathers web page files together
• Makes hyperlinks available

9
Browsers

• Software to view Web pages
• Understand programming languages
• Display what is programmed

Internet Explorer
Firefox
Netscape
Safari
10
Editors

• Software used to write HTML code
• Text Editors
• Text Editors with Features
• Advanced Editors

11
Text Editors

• Notepad, Wordpad, SimpleText, TextEdit

12
Text Editors with Features

• Homesite, BBEdit, Arachnophilia

http//www.arachnoid.com/arachnophilia/
13
Advanced Editors

• Dreamweaver, Microsoft Frontpage

14
Web Servers

• Computers that house Web sites

Server
Upload HTML files to Web server (FTP)
Other computers request pages through the server
(HTTP)
15
URL (Uniform Resource Locator)

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

16
URL (Uniform Resource Locator)

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

www2.hawaii.edu
yokokudo
694
bib.plan.htm
601
pathfinder.htm
17
Planning a Website

• Create effective web pages
• Audience?
• Message?

18
Planning a Website

• Clear and simple contents
• Simple navigation and structure
• Small file size
• Avoid too many visual effects

http//projects.ics.hawaii.edu/donnab/lis670/bad_
page.html
19
Clear Naming Conventions

• Looking for job listings?

Jobs
Employment Opportunity
Job-o-Rama
Obvious Less obvious
Requires thought
Steve Krug, Dont Make Me Think! A Common Sense
Approach to Web Usability (Indianapolis, Ind.
Que, c2000), 14.
20
Clear Navigation
Resume
Resume
What to click?
Steve Krug, Dont Make Me Think! A Common Sense
Approach to Web Usability (Indianapolis, Ind.
Que, c2000), 14.
21
Sample Sites

• Queens Borough Public Library
• http//www.queenslibrary.org/
• Rudys Alaska Fishing Page
• http//www.alaskafishinglogs.com/
• The Bus Oahu transit services
• http//www.thebus.org/

22
Your Homepage

• Set up your space on the UH server!
• URL
• http//www2.hawaii.edu/youruserID

23
Exercise
To establish your space on the UH server and
create a home page         Go to
http//www.hawaii.edu/account/

• 1 Sign in with your UH username and password.
• 2 Under Personal Home Page Options click on the
  link Create Homepage.
• 3 Put in a title, choose a logo, and type in some
  text in the comment box. Press continue. Write
  down your home page URL address (e.g.
  http//www2.hawaii.edu/yourusername).
• 4 Open a new browser window. Type in the address
  of your new homepage.
• 5 Once you make your homepage, the address will
  be http//www2.hawaii.edu/your username. Notice
  that index.html is not added to the end of the
  address, but rather it is implied.