Embed Size (px)
Citation preview
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 filenamehttp://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/XHTML 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
DHTML Dynamic HTML Refers to a combination of HTML,
JavaScript, CSS, in such a way that makes web page elements move or change (dynamic)
Requires advanced web-programming skill Many web tools provide ways for novice
developers a way to add basic DHTML elements to your pages
CGI Programming Sometimes information is sent to or from a
user of a web page This information is sent or streamed using
a Common Gateway Interface syntax For example:
Scripts can be written that translate information gathered from a form into a stream of information that is sent to another location on the web
CGI Usually requires advanced programming skills
XML Extensible Markup Language Allows the programmer to create their
own types or tags User-defined tags add self-
documentation to your source code XML is a powerful tool for transferring
info between applications and databases
Usually written by programmers
Java A programming language that can
be used to create small applications “applets”
Can also be used to write large, complex applications
Many web developers never use Java Strong programming skills are
required
Where do I start? Understand how the Web works Take a class on Web design Learn the fundamentals of (X)HTML Understand the role of the server Learn a Web design tool Build some test Web sites Keep adding to your “bag of tricks”
IS&T Web Development Focus
Information Systems and Information Technology degrees focus on Web Application development INFO 2450 - Web Application Design
X(HTML), CSS, Templates, Intro to Web Graphics INFO 3420 - Internet Application I
ASP.NET, SQL Server, C++ - Security, Web Admin, E-Commerce
INFO 4420 - Internet Application II XML, Web Services
INFO (???? ) - Elective CourseOpen Source Application Development (new Spring 2010)
What is Needed for this Class?
Hardware Computer Scanner/Cell Phone/ Digital Camera Consistent Internet connection
Software
HTML Editor – Notepad, EditPad Web Graphics Application-
GIMP open source graphics application
Authoring Environment –Microsoft Expression Web
Internet Web Browser – You choose
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 Website Management
Afterward… Find your own niche
