Orientation to HTML and Web Editors

1
Orientation to HTML and Web Editors

• Created by Jian Wu and Jenise Rowekamp

2
Brief History of the World Wide Web

• First web page appeared in Nov., 1990
• Purpose of WWW - to share information, mainly
  government, research, universities
• Hypertext - allows links to other text, pictures,
  sounds, other web pages, etc.
• Web pages are written in html (or by using an
  exercise maker or web editor) and read by a
  browser.

3
How it Works

• HTML (HyperText Markup Language) - used to define
  the various components of a World Wide Web page
• Computers have unique IDs (IP address)
• Browsers (Firefox, IE, Safari) use an address (
  URL) to request a page
• Web servers send or serve a page
• Browsers display the page
• Links are requests for a different page, a
  graphic, an audio/video file, etc.

4
A Taste of HTML

• Understanding HTML tags lt gt
• Used to define the styles, formats and features
  of a web page.
• Usually has a start tag and an end tag
• lth1gtThis is a level 1 headinglt/h1gt, ltbgt bold
  text lt/bgt
• Example Ella and Louis

5
Examples of HTML

• To change text characteristics such as font,
  size, bold, italics,etc. ltbgtthis text is boldlt/bgt
• To manipulate texts
• E.g. To start a new line ltbrgt, to start a new
  paragraph ltpgt, to make a heading lth1gtlt/h1gt, to
  center a text ltcentergt lt/centergt.
• To build a link
• lta hrefhttp//languagecenter.cla.umn.edugtLink
  to CLA Language Centerlt/agt
• To add an image
• ltimg srcmyimage.jpg alignleftgt
• To embed an audio file
• ltembed srcsoundfile.mp3 controllertrue.gt

6
Popular Web Editing (Web Page Creation) Programs

• Microsoft Word and other word processing programs
  (Save asWeb Page)
• Mozilla/SeaMonkey Composer (free)
• FrontPage
• DreamWeaver

7
Common Web Page Attributes and Features

• Page and text color
• Link to other web pages
• Tables
• Graphics
• Sound, video

8
More Attributes and Features

• JavaScripts and interactive behaviors
• Interactive images - rollover image, etc.
• Media - Flash, applet, plugins, etc.
• Dynamic page and database interaction - ASP, PHP,
  etc.
• Forms and CGI

9
Some General Guidelines of Basic Web Page Design

• Use of a table(s) to organize and hold
  information. Different cells contain different
  types of information (directions, pictures,
  sounds, links to URLs, etc. Table boundaries can
  be transparent.
• Examples Ricardo, Jenise

10
Guidelines - Continued

• Selection of fonts
• Serif fonts versus Sans-serif fonts
• Serif fonts have thin lines and feet such as
  Times
• Sans-serif fonts have even lines and no feet such
  as Geneva
• Normally, Sans-serif fonts are easier to read on
  web pages.

11
Guidelines - Continued

• Be careful about web page color - avoid putting
  more than 5 colors on one page, or not enough
  contrast in background and text.
• Graphics are good, but dont over-use them
• Consider file size and download time
• Accessibility issues - at a minimum, provide
  alternative text for pictures