Getting Started
Learning Web Design:
Chapter 1 and Chapter 2
Lesson Overview
What is the Internet?
History of the Internet
Anatomy of a Web Page
What is the Web Made Of?
Careers in Web Development
Web-Related Languages
Where Do I Start?
The Internet
Internet = A network of networks
No company or government owns the Internet
Many ways to share information between computers
The World Wide Web is a subset of the Internet
WWW
The communication protocol of the WWW is HTTP = Hypertext Transfer Protocol
The web is a visual medium that combines text and graphics
Information is presented to the user via a web page
Does not mean: “Whistle while you wait”
A Brief History of the Internet
1969 The Internet began as ARPANET
US Department of Defense funded the project
They wanted a way to insure the transfer of information between servers if there were a nuclear attack
1972 First electronic mail sent
1989 brought the advent of the WWW
Tim Berners-Lee proposed hypertext to link related documents - The Invention of WWW (Youtube)
First web pages were text only
1993 First graphical Web Browser- Mosiac
1997 The term “weblog” is coined, later shortened to “blog.”
2007 – Over 1 billion Internet users and over 92 billion web sites
Who Controls the Web?
No single entity controls the Web
Two organizations have an influence over the direction of the Web
The World Wide Web Consortium (W3C) based at MIT
They help set up the standards and enforce rules for the Web, www.w3.org
Browser developers like Microsoft and Mozilla
Constantly add new features to their browsers, often in
conflict with each other and the work of the W3C
The Web Attracts Business
The early Internet was a community of research institutions and government agencies
E-Commerce technologies have allowed businesses to conduct transactions in a somewhat secure manner on the Web
Many companies still keep their most private information on intranets where they can make use of Web technologies
The Web is Graphical
Browsers allow the presentation of both text and graphics in color on the same page
The Web is really a hypermedia system
Images
Sound
Video
Animation
Text and Hypertext
Source: http://www.learnthenet.com/english/html/14wbpganat.htm
Anatomy of a Web Page
A web page is an electronic document written in a computer language called HTML
(Hypertext Markup Language)
When you surf the WWW, web pages are displayed in a web browser
Web pages on a site are linked together through a system of hyperlinks, enabling you to jump between them by clicking on a link
Viewing Source Code
Source: http:// www.learnthenet.com/english/html/14wbpganat.htm
<html>
<body>
<h1>This is my Main Page</h1>
<p>This is some text.</p>
<p><a href="page1.htm">
This is a link to Page 1
</a>
</p>
<p><a href="page2.htm">
This is a link to Page 2
</a>
</p>
</body>
</html>
index.html
Viewing Source Code cont.
HTML pages contain:
HTML tags and plain text
The code of the web page is stored as an ASCII text file with either the .htm or .html file extension
You can view the source code by:
opening the file in a text editor
from the browser: View->Source
URL- Universal Resource Locator
Resources are found on the Web through an address or location known as a URL
The URL is made up of three parts:
The protocol: http, ftp, news etc.
The hostname
The directory and filename
http://daytona.raceway.com/home/race.html
protocol hostname directory/filename
Default Files
When the server receives a request for a web page with just the directory name, it looks for a default document
Default filenames are usually
index.htm
index.html
The “i” must be lowercase to act as default file
For security reasons, every directory should have a default file – prevents snooping
What is the Web Made Of?
Your personal computer
Web browser software
A connection to an Internet Service Provider (ISP)
Servers that host the data
Routers and switches to control the flow of the data
Source: http://www.learnthenet.com/english/section/www.html
Web Servers
To publish pages on the Web you need a Web Server
This is a program that responds to requests for files from a browser
The server accepts the connection, sends contents of the file, and then closes the connection
What the Browser Does
A user working on a computer (client) machine sends a request across the Internet to a Web Server
The Web Server finds the requested page and sends the information back to the Client
The Client uses an application called a Browser to display the page
Microsoft Internet Explorer
Most popular browser, newest version IE8
This browser is built into all the current versions of Microsoft Windows
Also runs on Macintosh and UNIX platforms
As of July 2009, 67.68% market share
Free download available from Microsoft’s Web site
Mozilla Firefox
In 1998, Netscape freed up the source code for their web browser
The Mozilla foundation is the
independent, non-profit organization that support modification to Firefox
Firefox is closing in on IE as a dominant
web browser, 22.47% of browser market
as of July 2009
Safari
This browser was created by Apple Inc.
and first released in January 2003
Version of Safari for Windows was released in 2007
As of July 2009, had 4% browser market
Key features: tabbed browsing, support CSS3, spell-checking
Can be downloaded for free from http://www.apple.com/safari/download/
What do I need to learn?
Web design is a catch-all term for the process that encapsulates a number of disciplines:
Graphic design
User Interface design
Information design
HTML production
Programming
Multimedia
Careers in Web Development
People of all backgrounds are becoming interested in learning about Web design:
Print designers evolving their expertise to Web design
Secretaries and office staff given Web development responsibilities
Programmers moving into Web programming
Graphic designers lending their talents to Web development teams
Information engineers designing information presentation and data gathering via the Web
Graphic Designers
Make decisions about everything that is seen on the Web page
Color
Typography – Font sizes, styles and colors
Graphics
Page Layout
Might require some formal training if you want to design commercial sites
Interface Designers
Focus on how the Web page works
Usability is a key issue
Create methods for how things are done:
buttons, menus, navigation links etc.
Often have background in software design
Requires a combination of personal research, experience, and common sense
Information Designers
Focus on the organization of content and how you get to it:
Also called information architects
Use flowcharts and diagrams
Might have a background in database design and data modeling
Some have background in library science
HTML Producers
A majority of the Web design process involves the creation of HTML pages
HTML programmers often need to have other scripting or programming skills
Debugging errors is an important task
Usually part of a development team
Often use powerful tools to shorten development time
Programmers
Enhance web pages with advanced functionality
Write scripts
Programs
Applications
Database interactivity
Server
Some have background in Computer Science
Some are self-taught
Multimedia Developer
A web site can come to life with the addition of multimedia
Graphics
Sound
Video
Animation
Interactivity
A background in video or sound mastering is preferred
Knowledge of development tools a must
Web-Related Languages
HTML/XHTML
Style Sheets
JavaScript,VBScript
DHTML
CGI Scripting
XML
Java
HTML
Hypertext Markup Language
The language used to write web pages
Evolving to XHTML
Enhanced Hypertext Markup Language
Everyone working with web development needs a background in HTML
Once you learn the basics, using development tools will be easier
Cascading Style Sheets (CSS)
Allow you greater control over text and page formatting
Styles can be reused to define a “look and feel” standard for a site
Won’t work consistently on all browsers
Will gain in popularity
JavaScript
A scripting language
Not Java
These program instructions can be inserted into a web page to add functionality
Mouse-Overs
Form Validation
Pop-up windows or menus
Changing behaviors
Many professional web authoring tools generate JavaScript for you
It is helpful to have a programming background
Where do I start?
Understand how the Web works
Take a class on Web design
Learn the fundamentals of HTML
Understand the role of the server
Learn a Web design tool
Build some test Web sites
Keep adding to your “bag of tricks”
What is Needed for this Class?
Hardware
Computer
Consistent Internet connection
Web Server
Software
HTML Editor – Notepad, HTMLKit
Web Graphics Application-GIMP
Authoring Environment – Microsoft Expression Web
Internet Web Browser – You choose
FTP Client - CyberDuck
Summary
Web design is a very broad field of study
This class covers just the tip of the iceberg:
HTML/XHTML
CSS
Web Graphics
Templates
