Features of a Good Web Page

1
Features of a Good Web Page

• Quality Content
• Meets your needs.
• Meets your intended audiences needs
• Is accurate and complete (are those links up to
  date?)
• Reader Convenience
• Is the download time acceptable?
• Formats are generic enough for many browsers and
  user preferences
• Multiple versions of the site, or parts of it,
  provided when appropriate
• Artistic Composition
• Pleasing to look at.
• Color combinations are web-safe.
• Visually intriguing without being busy.

2
Relative Areas of Screen Importance

1. Most important information
2. Navigation banner logo
3. Dynamic area
4. Reading content area
5. Consistent links

3
Three Features of a Good Web Site

• Organized Content
• Presents all the information you want to present
  when and where you wanted to present it.
• Displays enough of the organization for readers
  to understand what each section will contain
  without having to visit each section.
• Is accurate and complete (are those links up to
  date?)
• Reader Convenience
• Clear and consistent navigation throughout.
• Formats are generic enough for many browsers and
  user preferences
• Multiple versions of the site, or parts of it,
  are often used
• Links to other sites placed appropriately and
  match context.
• Artistic Composition
• Pleasing to look at.
• Color combinations are web-safe.
• Visually intriguing without being busy.

4
Four Things Every Web Site Should Have

• A clear and consistent method of navigation
• Side bar vs bottom of page vs clickable
  images,etc
• A Site Map
• Visible, top level description of your site.
• A Repository
• Non-visible document used by the web site
  developer.
• A Links Page
• Links external to your site, but related to your
  site.

5
Organization Site Maps and Repositories

• A site map is a graphical map of your entire web
  site made visible to the viewer.
• Make accessible from the front page (or from all
  pages)
• Provides top level information about each section
  of the site.
• There is no single "correct" way to do a site
  map.
• A repository is a web management document used by
  the web developer to track changes - not for
  public viewing.
• Web sites must constantly change to survive.
• Tracking and maintaining the individual changes
  to individual pages can be tricky.
• Even a simple web site usually has three
  versions published, back-up, and in development.

6
The Links Page

• You probably wont be able to say everything
  there is about your topic. A links page provides
  links to other web sites.
• Adding links to other web pages does good things
  for you
• You become a resource, and your web site gets
  visited more often.
• You become an authority.
• Keeping links on a single page does good things
  for you
• Separates the links from your content to minimize
  disruptions.
• makes it clear to the user when they are leaving
  your site.
• One way to increase traffic to your web site is
  to exchange links with others who have web sites
  related to yours.
• Web rings are communities of web pages focused on
  a single topic

7
Structure of HTML

• HTML uses tags to suggest how to display items on
  a page
• Learning HTML is really about learning how to use
  the tags.
• Makes it easy to do useful pages quickly.
• Anything that is not specified by tags is
  displayed per the browsers preference
• Adding extra spaces in between words wont have
  any effect on the page.
• Putting things on a new line wont have any
  effect on the displayed web page (the ltBRgt tag
  does that).

8
Structure of HTML

• There are 4 tags required in any HTML document.
• ltHTMLgtlt/HTMLgt Tells the browser where the web
  page starts and stops
• ltTITLEgtlt/TITLEgt Tells the browser what title to
  display for this page.
• ltHEADgtlt/HEADgt Tells the browser where the
  informational portion of the web page starts and
  stops
• ltBODYgtlt/BODYgt Tells the browser where the
  displayed portion of the web page starts and
  stops. No ltFRAMESETgt required.
• ltFRAMESETgtlt/FRAMESETgt Tells the browser that you
  are about to define a series of frames dividing
  up the viewing area. No ltBODYgt.

9
HTML Structure Head

• The head of the document contains information
  useful for the creator of the document and the
  web site.
• Author list, intended purpose, revision history,
  web tools used, and whatever is important to the
  owner of the web page.
• ltHEADgt
• ltMETA NAMEkeyword
• CONTENTtype of informationgt
• ltMETA NAMEAuthor
• CONTENTKeith Garfieldgt
• lt!-- This is a comment. The browser ignores the
  information inside the comment tag -- gt
• lt/ HEADgt

10
Headings

• Headings are standard fonts provided by the HTML
  standard.
• There are 7 levels of heading, ltH1gt through ltH7gt.
• ltH1gt is the largest font.
• Styles may be included in the heading tag, but
  will apply only to that specific use of the tag.
• You can define your own fonts/styles/colors for
  these headings in your stylesheet.
• ltBODYgt
• ltH1gt Largest heading lt/H1gt
• ltH3gt Normal font lt/H3gt
• ltH6gt Smallest heading lt/H6gt
• ltH1 ALIGNCENTER LEFT RIGHTgt
• lt/BODYgt

11
The ltFONTgt Tag

• Allows you to set font properties.
• ltFONTgt
• COLOR SETS COLOR OF THE FONT.
• FACE SETS FACE OF THE FONT (CASE SENSITIVE!).
• SIZE SETS THE FONT SIZE.
• OTHER FONT MANIPULATION TAGS
• ltBgtlt/Bgt STARTS AND STOPS BOLDFACE.
• ltIgtlt/Igt STARTS AND STOPS ITALICS.
• Heading tags set sizes predefined for your
  browser ltH2gtlt/H2gt, etc
• Ex ltFONT SIZE1gtltIgtHello, World!lt/Igtlt/FONTgt

12
The ltAgt (Anchor) Tag

• Allows virtual links to other pages/images/sites.
• ltA gt
• CLASS ALLOWS LINKS TO BE ASSOCIATED WITH A SET
  CLASS
• HREF SETS THE URL OF THE PAGE BEING LINKED TO.
• NAME ALLOWS YOU TO NAME SECTIONS OF YOUR
  DOCUMENT
• ONCLICK ALLOWS EVENTS TO OCCUR ON THE
  MOUSECLICK.
• ONMOUSEOUT ASSOCIATES EVENTS WITH THE MOUSE
  LEAVING.
• ONMOUSEOVER ALLOWS EVENTS TO OCCUR WHEN THE
  MOUSE POINTER IS ON THE IMAGE.
• REL ALLOWS USER TO SET RELATIONSHIP TO LINKED
  DOCUMENT
• REV ALLOWS USER TO SET RELATIONSHIP TO LINKED
  DOCUMENT
• STYLE ALLOWS LINK TO BE ASSOCIATED WITH A STYLE
• TARGET TELL WHERE TO DISPLAY THE LINKED PAGE
• TITLE LETS YOU SET A TITILE FOR THE LINKED
  DOCUMENT
• Ex ltA HREF"http//www.cs.ucf.edu/courses/cgs317
  5"gthomelt/agt

13
Named Anchors

• Named anchors are used to allow the viewer to
  move to specific polaces on a single web page.
• Useful for long web pages that scroll way off the
  screen, or useful for allowing viewers to
  navigate right to the start of sections of a
  page.
• To name a link use the following format ltA
  NAME"name"gtlt/agt
• To insert the link, use the normal notation but
  indicate the named link using the sign ltA
  HREF"name"gtclick here!lt/agt
• Example
• (This is a link to a quote on the bottom of the
  same page.)
• ltA HREF quotegt a quote lt/Agt
• lt! -- the body of the web page -- gt
• ltA NAMEquotegt Knowledge is power! lt/Agt

14
Unordered Lists - The ltULgt Tag

• Lists are useful for organizing information on
  your web pages. They can be ordered (like an
  outline) or unordered (bulletted)
• ltULgtlt/ULgt Starts and stops an unordered list.
• CLASS - allows you to set the style to a pre-set
  class (such as one set up in a style sheet)
• COMPACT - tells the browser to reduce spaces
  between list elements
• STYLE - allows you to set the style of the list
  elements
• TYPE - allows you to select what shape "bullet"
  will precede each item in the list
• ltLIgtlt/LIgt starts and stops a list element (the
  lt/ligt is often omitted).
• CLASS - allows you to set the style for this
  element only to a pre-set style class (such as
  one defined in a stylesheet)
• STYLE - allows you to set the style for this
  element only
• TYPE - allows you to select the "bullet" shape
  for this element only
• VALUE - allows you to change the value of the tag
  associated with the element (only valid for
  ordered lists)

15
Ordered Lists - The ltOLgt Tag

• Ordered lists allow you to list items in outline
  format, using sequential tags rather than
  "bullets."
• ltOLgtlt/OLgt
• CLASS - allows you to set the style to a pre-set
  class (such as one defined in a stylesheet)
• COMPACT - tells the browser to reduce the space
  between list elements
• START -allows you to specify the value of the
  first tag (works with TYPE)
• STYLE - allows you to set the style of the list
  elements
• TYPE - allows you to specify the type of tag to
  use (works with START)
• A Capital letters
• a lower case letters
• I Capital Roman numerals
• i lower case Roman numerals
• 1 common Arabic numerals

16
efinition Lists - The ltDLgt Tag

• Definition lists are used to provide a list of
  definitions in a preset manner.
• Each item of the list is composed of two parts
• The term specified by the ltDTgt tag
• The definition specified by the ltDDgt tag
• ltDLgt
• CLASS - allows you to set the style to a pre-set
  class
• COMPACT - tells the browser to reduce the space
  between list elements
• STYLE - allows you to set the style of the list
  elements
• ltDTgt
• CLASS - allows you to set the style to a pre-set
  class
• STYLE - allows you to set the style for this item
  only
• ltDDgt
• CLASS - allows you to set the style to a pre-set
  class
• STYLE - allows you to set the style for this item
  only

17
The ltIMGgt Tag

• Allows you to place images in your document.
• ltIMGgt
• ALIGN ALIGNS IMAGE RELATIVE TO SUROUNDING TEXT.
• ALT SETS TEXT ASSOCIATED WITH THE IMAGE TO BE
  DISPLAYED.
• BORDER SETS THE BORDER THICKNESS IN PIXELS
• CONTROLS
• DYNSRC
• HEIGHT
• HSPACE
• ISMAP
• LOOP
• LOWSRC
• NAME
• ONABORT -
• ONERROR -
• ONLOAD
• SRC SETS THE URL OF THE IMAGE.
• START
• USEMAP

18
The Table

• Tables begin and end with the ltTABLEgt and
  lt/TABLEgt tags.
• Tables are composed of rows, each of which starts
  and stops with ltTRgt and lt/TRgt tags.
• Each row may contain header cells ltTHgt, and lt/THgt
• Each row may contain data cells ltTDgt, and lt/TDgt
• Each cell may contain virtually anything, even
  other tables (this is called nesting tables).

19
The ltTablegt Tag

• ltTABLEgt
• ALIGN TABLE ALIGNMENT ON PAGE
• BACKGROUND ALLOWS A BACKGROUND IMAGE (MS IE
  ONLY)
• BGCOLOR ALLOWS A BACKGROUND COLOR
• BORDER SET BORDER SIZE IN PIXELS.
• BORDERCOLOR SETS BORDERCOLOR (MS IE ONLY)
• BORDERCOLORLIGHT - (MS IE ONLY)
• BORDERCOLORDARK - (MS IE ONLY)
• CELLPADDING
• CELLSPACING
• CLASS
• COLS
• FRAME - (MS IE ONLY)
• HEIGHT
• HSPACE
• (CONTINUED ON NEXT SLIDE)

20
The ltTablegt Tag

• ltTABLEgt
• NOWRAP - (MS IE ONLY)
• STYLE
• RULES - (MS IE ONLY)
• VALIGN - (MS IE ONLY)
• VSPACE
• WIDTH

21
The ltTRgt Tag

• ltTRgtlt/TRgt
• ALIGN
• BGCOLOR
• BORDERCOLOR
• BORDERCOLORLIGHT
• BORDERCOLCORDARK
• CLASS
• NOWRAP
• STYLE
• VALIGN

22
The ltTHgt and ltTDgt Tags

• ltTHgtlt/THgt OR ltTDgtlt/TDgt
• ALIGN
• BACKGROUND
• BGCOLOR
• BORDERCOLOR
• BORDERCOLORLIGHT
• BORDERCOLCORDARK
• CLASS
• COLSPAN
• HEIGHT
• NOWRAP
• ROWSPAN
• STYLE
• VALIGN
• WIDTH

23
Introduction to HTML Style

• Styles can be suggested at three different
  levels.
• For a specific HTML tag (inline styles).
• For a specific web page (document-level
  stylesheets).
• For an entire web site (external stylesheets).

24
Inline Styles

• Occur within specific tags
• ltfont size2gtblah blah blahlt/fontgt
• ltfont face"Arial"gtblah blah blahlt/fontgt
• Format is different from that used in style
  sheets.
• Applies only to the specific tag it occurs in.
• Use when you know that this is a unique situation
  - you don't need to repeat this style again or
  often.
• Use when you know you will not change the style.
• Its hard to find all the occurences.

25
Document Level Styles

• Occur within header of document.
• Format is same as with stylesheets.
• Applies only to the specific web page it occurs
  in.
• Use when you construct a page that differs
  radically from the rest of your web site (and
  even then you might not want to use it - you can
  always build multiple external style sheets).

26
External Stylesheets

• Exist as separate documents linked to the HTML
  page.
• Format is selector followed by property values.
• body background AABBDD
• h1 font-family arial
• Applies to every web page linked to it.
• ltlink rel"stylesheet" type"text/css"
  href"stylesheet_name.css"gt
• Use to create and maintain a consistent look and
  feel throughout your web site.
• Changing styles is easy -- do it at one place.

27
Going Beyond HTML

• Pure HTML is relatively static
• No computational power
• Display only
• Very little interaction between the viewer and
  the web page
• Common Gateway Interface (CGI)
• A standardized interface used to allow HTML to
  interact with other software programs.
• HTML has been designed to interface with more
  powerful programming languages
• JavaScript used to run scripts of code within
  an HTML document.
• Java used to run applets, or programs associated
  with the HTML document and run on the viewer's
  computer.
• Perl A popular language to write general purpose
  programs that run on a machine other than the
  viewer's computer. Uses CGI.
• Many others most languages can interact with
  HTML via CGI.

28
JavaScript Behavior

• JavaScript runs within the web page.

INTERNET
Index.html

29
Java Behavior

• Java applets run on your machine external to the
  web page.

INTERNET
Index.html

30
Perl/PHP/etc (Script) Behavior

• Perl scripts do not run on your machine at all
  (Note This is true of general purpose programs,
  of which Perl scripts is an example).
• The FORM tag is used to send data to the Perl
  script.

INTERNET
???????

31
Flash Media Behavior

• Flash Media runs within the web page.
• Flash media specifies animations in short form by
  defining start/stop points.

INTERNET
Index.html

32
Maintaining Safety

• Allowing arbitrary programs to run on your
  machine allows anyone to damage your machine or
  data.
• Rules have been put in place to reduce the risk
• To protect YOU, Java applets cannot read or write
  to your files.
• To protect YOU, JavaScript scripts are limited to
  reading and writing to "cookie" files. Cookie
  files are small files that can store information.
  They cannot be run as programs.
• To protect OTHERS, access to Perl scripts must be
  stored in a special place, typically called the
  cgi-bin.
• To Protect YOU PHP file processing must be
  allowed by the server manager and is controlled
  by the server manager.

33
The ltFORMgt Tag

• ltFORMgt
• ACTION DETERMINES WHAT APPLICATION WILL PROCESS
  THE DATA
• CLASS - SPECIFIES STYLE WITH A PREDEFINED CLASS
• ENCTYPE - DATA ENCODING TYPE
• METHOD - SPECIFIES HOW THE DATA SENDS DATA TO THE
  SERVER ("POST" OR "GET")
• NAME - NAMES THE FORM (USEFUL FOR JAVASCRIPT)
• ONRESET - ASSOCIATES SCRIPT WITH FORM RESET
• ONSUBMIT - ASSOCIATE SCRIPT WITH FORM SUBMISSION
• STYLE - SPECIFIES STYLE (AS FROM A STYLESHEET)
• TARGET - DIRECTS RESULT OF FORM OUTPUT TO A FRAME

34
The ltINPUTgt Tag

• ltINPUTgt
• ACCEPT DETERMINES WHAT APPLICATION WILL PROCESS
  THE DATA
• ALIGN - SETS ALIGNMENT
• BORDER - ALLOWS A BORDER TO SURROUND THE INPUT
  DEVICE
• CLASS - SPECIFIES STYLE WITH A PREDEFINED CLASS
• CHECKED - PRE-CHECKS CHECKBOX INPUT TYPES
• MAXLENGTH - SETS MAX INPUT LENGTH FOR TEXT INPUT
  TYPES
• NAME - NAMES THE DEVICE (USEFUL FOR JAVASCRIPT)
• ONBLUR
• ONCHANGE
• ONCLICK
• ONFOCUS
• ONSELECT
• SIZE - SETS DISPLAY SIZE OF TEXT INPUTS
• SRC - SOURCE OF AN IMAGE BUTTON
• STYLE - ALLOWS STYLES TO BE SET
• TYPE - SETS TYPE (IE TEXT, BUTTON, RADIO)
• VALUE - SETS AN INITIAL VALUE OR DISPLAY

35
Methods of Allowing Input to forms

• There are 12 predefined mechanisms to input data
  to a from
• BUTTON - DISPLAYS TEXT AND CAN BE CLICKED TO
  INITIATE SCRIPTS
• CHECKBOX - CAN BE CHECKED ON AND OFF. YOU
  USUALLY SUPPLY DESCRIPTIVE TEXT TO GO WITH IT.
• FILE -
• HIDDEN -
• IMAGE - LIKE A BUTTON, BUT YOU CAN USE AN IMAGE
  FILE.
• PASSWORD - LIKE TEXT BUT INPUT IS NOT VISIBLE
• RADIO - LIKE A CHECKBOX, BUT ROUND.
• RESET - BUTTON ALLOWING ENTIRE FORM TO BE RESET.
• SUBMIT - BUTTON ALLOWING FORM DATA TO BE
  SUBMITTED VIA CGI.
• TEXT - BASIC TEXT INPUT (ONE LINE).
• ltSELECTgt - DROP DOWN MENU OF ITEMS TO SELECT.
• ltTEXTAREAgt - MULTILINE TEXT

36
Sample Questions
Which of the following tags is NOT used when the
ltBODYgt tag is used? a. ltHTMLgt tag b. ltHEADgt
tag c. ltTITLEgt tag d. ltFRAMESETgt tag Tags
that allow users to navigate your web site are
the a. ltAgt tag. b. ltFONTgt and lt/FONTgt tags c.
ltFRAMESETgt tag d. ltNAVIGATEgt tag