How Web Pages Work

1
How Web Pages Work

• By Lee Lasson, On-Line Consulting
• November 18, 2008
• For Estes Park Computer Users Group

2
Web Pages Are Text

• HyperText Markup Language (HTML)
• Number, Letters, Punctuation
• Tag based markup
• ltHTMLgt
• lt/HTMLgt
• Format is separate from content
• No special tools are required
• You may edit web pages with notepad.exe

3
Sample HTML Page

• ltHTMLgt
• ltHEADgt
• ltTITLEgtHome Pagelt/TITLEgt
• lt/HEADgt
• ltBODYgt
• Hello World!
• lt/BODYgt
• lt/HTMLgt

4
Browser

• To view Web Pages you need to use a browser.
• A browser is a class of software that requests
  resources from servers.
• Browsers display the content formatted based on
  the tags in the HTML
• Popular Browsers
• Internet Explorer
• Firefox
• Well browse to the file location
  C\Users\llasson\Documents\My Web
  Sites\TestSite\index.htm to see the file.

5
DEMO View Source

• Go to any page on the Internet
• Right-Click and select View Source
• Simple HTML pages are relatively easy to see what
  is going on.
• Simple pages usually end in .htm or .html
• Complex pages are another story.
• Lets look at two popular web pages
• http//www.google.com
• http//www.msn.com/

6
What Else Makes a Web Page?

• Images
• ltimg alt"test pic" src"images/235_small.JPG"
  width"100" height"75"gt
• Types of images
• JPG (JPEG)
• GIF (Graphic Interchange Format)
• PNG (Portable Network Graphic)
• Links
• Universal Resource Location (URL)
• Also known as Web Address

7
Additional Web Technologies

• Javascript (Sun)
• Java (Sun)
• Flash (Adobe)
• Silverlight (Microsoft)
• Quicktime (Apple)
• Streaming Media (Apple, Microsoft, Real)
• Portable Document Format (Adobe)

8
Browser Tricks Anyone?

• Type in name and press CONTROL-ENTER
• Example TourEstesltCTRL-ENTERgt
• Any others?
• CONTROL-N for New Windows
• CONTROL-T for New Tab

9
Web Editors

• Microsoft Notepad
• Microsoft FrontPage
• Microsoft Expression Web
• Adobe Dreamweaver
• Content Management System (CMS)

10
Demo HTML Editor

• Lets Update EPICUG.org using FrontPage 2003 to
  show the upcoming Christmas Party
• Change Content
• December 11th 600 PM
• FIT and Tech White Elephant Exchange

11
Questions?