Lets Make a Web Page

1
Lets Make a Web Page

• Beau A.C. Harbin
• NetSERF.org

2
Topics

• General Introduction to WWW
• Creating HTML pages
• Intermediate Web sites
• Advanced Web sites
• Launching and Testing Web sites
• Recommendations

3
General Introduction
4
The Internet the World Wide Web

• The Internet is a network of networks
• The World Wide Web is the part of the Internet
  that is based on hypertext
• Web pages are written in HyperText Markup
  Language (HTML)
• Hyperlinks link Web pages together

5
Browser Software

• HTML documents require browser software to
  interpret HTML code and display results
• Different browsers interpret HTML differently
• Standard browsers
• IE 4.0 (currently in 5.0)
• Netscape 4.0 (currently in 4.71, 6 PR1)

6
URLs

• A URL is simply a Web sites address
• This address is known as a Uniform Resource
  Locator
• http//www.netserf.org

7
Defining a Web Site

• A Web site is a group of related Web pages and
  associated files such as images, stylesheets, and
  scripts
• The pages that make up a Web site are typically
  organized in a hierarchical manner

8
Components of a Web Page

• HTML pages
• Images (gifs, jpgs, or pngs)
• Hyperlinks

9
Extending Web Pages

• Client-side scripting (Javascript, VBScript)
• Dynamic HTML (DHTML)
• Server-side scripting (ColdFusion, ASP)
• Java Applets
• Active X controls
• Flash / Shockwave
• Embedded movies, audio and animation

10
HTML and its History
11
Creating HTML pages
12
What do you need to build a web page?

• Browser software
• Netscape, IE, Opera, Lynx, AOL
• An editor for writing HTML pages
• Allaire HomeSite, Notepad, Front Page
• Graphics software (optional)
• Paint Shop Pro, Photoshop
• FTP software to move pages to server
• WS_FTP

13
HTML Syntax
14
Coding Rules

• Each HTML tag must be surrounded by lt gt
• Names and attributes are not case-sensitive
• Attributes are always included in the start tag
• Attribute values should be enclosed in quotes
• Tags may be nested in other tags
• Tags may not overlap

15
The Basic HTML Page

• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
  Transitional//EN"gt
• ltHTMLgt
• ltHEADgt
• ltTITLEgtUnknownlt/TITLEgtltMETAgt
• lt/HEADgt
• ltBODYgt
• lt!--Page text goes here --gt
• lt/BODYgt
• lt/HTMLgt

16
HTML Headings

• Six heading levels H1 - H6
• Should be used in order
• Sample
• ltH2 aligncentergtH2 Headinglt/H2gt

17
Line Breaks

• Line breaks and white space in code are ignored
• Use ltBRgt to force a line break
• CLEAR attribute values
• LEFT
• RIGHT
• ALL
• Use ltPgt to force a paragraph break

18
Aligning Text Blocks

• ALIGN attribute can be used for
• Hx, P, HR, DIV
• To align an element, use
• ltDIV alignALIGNMENTgt or
• ltP align ALIGNMENTgt
• LEFT
• RIGHT
• CENTER

19
Horizontal Rules

• ltHRgt
• SIZE
• WIDTH
• ALIGN
• NOSHADE

20
Ordered Lists

• ltOLgt encloses the list ltLIgt for each list item
• Code
• ltOLgt
• ltLIgtDoe, Janelt/LIgt
• ltLIgtSmith, Johnlt/LIgt
• lt/OLgt
• Display
• 1. Doe, Jane
• 2. Smith, John

21
Unordered Lists

• ltULgt encloses the list ltLIgt for each list item
• Code
• ltULgt
• ltLIgtDoe, Janelt/LIgt
• ltLIgtSmith, Johnlt/LIgt
• lt/ULgt
• Display
• Doe, Jane
• Smith, John

22
Definition Lists

• ltDLgt encloses list
• ltDTgt for each term
• ltDDgt for each definition
• Code
• ltDLgt ltDTgtHTTPlt/DTgt ltDDgtThe Hypertext
  Transfer Protocollt/DDgt
• lt/DLgt
• Display
• HTTP
• The Hypertext Transfer Protocol

23
Nesting Lists

• Any list type may be nested inside another list
• ltULgt
• ltLIgtSaintslt/LIgt
• ltULgt
• ltLIgtThomas Aquinaslt/LIgt
• ltLIgtAugustine of Hippolt/LIgt
• ltLIgtCatherinelt/LIgt
• lt/ULgt
• ltLIgtHRlt/LIgt
• lt/ULgt

24
Tags

• Logical tags describe information structure
• Physical tags specify display characteristics
• HTML recommends avoiding physical tags in favor
  of Cascading Style Sheets

25
Logical Tags

• ltSTRONGgt strong emphasis (rendered as bold text)
• ltEMgt emphasis (rendered as italics)

26
Physical Tags

• ltBgt bold
• ltIgt italics
• ltFONT FACEARIAL SIZE2 COLORGREENgt
  specifies font characteristics

27
Intermediate Web Sites
28
Using Links

• Clicking a link displays the linked page
• Return to the original page using the browser's
  Back button
• Linked pages may be local or on any other web
  server

29
Link Syntax

• Use the anchor tag ltA HREF"http//www.netserf.o
  rg"gtVisit
• NetSERFs Home Pagelt/Agt
• Make an image a link ltA HREF"http//www.netserf
  .org"gt
• ltIMG SRCnetserflogo.gif"gtlt/Agt
• Create a target (bookmark) for another link ltA
  NAME"linkname"gtlt/Agt

30
Creating Text Links

• Linking to other web sites ltA
  HREF"http//www.netserf.org"gtVisit
• NetSERFs Home Pagelt/Agt
• Linking to another page in the same web site ltA
  HREF"../nextpage.htm"gtNext Pagelt/Agt
• Linking to another point in the same page ltA
  HREF"linkname"gtNext Pointlt/Agt
• Linking to a target in another page ltA
  HREF"nextpage.htmlinkname"gtThe Targetlt/Agt

31
Embedding Images

• Images are separate files downloaded after the
  HTML file
• Three types of Image formats
• GIFs
• JPGs
• PNGs

32
GIFs

• Best suited for computer generated images
• Up to 256 colors
• Lowering the number of colors will reduce size
• Special Types
• Transparent
• Animated

33
JPEGs (JPGs)

• Unlimited colors
• Best suited for photographs
• Compression algorithm to reduce file size

34
PNGs

• Good for all image types
• Unlimited colors
• Color reduction to decrease file size
• Supported natively only by IE 4, Netscape 4.5,
  and Opera 3.0

35
Using Images

• Use the ltIMGgt tag
• ltIMG SRC"logo.gif"gt
• Rules of thumb in using Images
• total image weight no greater than 50-100K
• no single image greater than 20-25K

36
Image Attributes

• HEIGHT and WIDTH
• ALIGN
• ALT
• HSPACE and VSPACE
• ltIMG SRC"CSS_positioning.png" WIDTH400
  HEIGHT300 ALT"CSS" ALIGN"LEFT" HSPACE"2"
  VSPACE"2" BORDER"0"gt

37
Creating Graphics Links

• Enclose the ltIMGgt tag within an ltAgt tag
• ltA HREF"http//www.netserf.org"gtltIMG
  SRCnetserflogo.gif"gtlt/Agt

38
Using Image Maps

• Define areas in an image that link to other pages

39
Image Map Syntax

• ltIMG SRC"../images/bullets-easy.gif"
  USEMAP"map" ISMAPgt
• ltMAP NAME"map"gt
• ltAREA SHAPE"rect" HREF"seeds.html
  COORDS"1,5,146,27"gt
• ltAREA SHAPE"rect" HREF"tips.html"
  COORDS"1,28,151,50"gt
• lt/MAPgt

40
Image Slicing

• Cut image into several pieces
• Assemble pieces in an HTML table
• Make images links to simulate an image map
• Performs better than a single large image

41
Using Tables

• Tables are used to control page layout
• Tables can contain
• Text
• Graphics
• Form fields
• Other tables

42
When to Use Tables

• You can use tables to
• Arrange data in columns and rows
• Control horizontal spacing of text or graphic
  elements
• Line up form fields
• Display data in a two-dimensional grid-style
  format

43
Basic Table Syntax

• ltTABLEgtlt/TABLEgt creates the table itself
• ltTRgtlt/TRgt creates a table row within a table
• ltTHgtlt/THgt creates a header cell within a table
  row
• ltTDgtlt/TDgt creates a data cell within a table row
• ltCAPTIONgtlt/CAPTIONgt creates a caption for the
  table

44
Simple Table Example

• Code
• ltTABLEgt
• ltTRgt
• ltTHgtColorlt/THgt ltTHgtHex Codelt/THgtlt/TRgt
• ltTRgt
• ltTDgtRedlt/TDgt
• ltTDgtFF0000lt/TDgt
• lt/TRgt
• lt/TABLEgt

45
Simple Table Output

• Display

46
Table Usage Rules

• Start with ltTABLEgt end with lt/TABLEgt
• Unlimited number of rows, each beginning with
  ltTRgt and ending with lt/TRgt
• Each row contains table cells or table headers
• No text outside ltTDgt or ltCAPTIONgt tag
• Fill empty cells with a non-breaking space
  (nbsp)

47
Other Table Options

• Border - lines around the cells
• Cellpadding - space around text inside cell
• Cellspacing - space between cells
• BgColor - background color of cell
• Width - width of table ( or n)
• Align - left, right, center (table and cells)
• Valign - top, bottom, middle (cells)
• Rowspan - spans cells across rows
• Colspan - spans cells across columns

48
Page Layout Tables

• Tables are commonly used to lay out whole HTML
  pages because of their ability to
• Precisely position element horizontally
• Control the displayed page width within the
  browser window

49
Advanced Web Sites
50
Cascading Stylesheets

• Allow you to add formatting information to
  documents
• Will not affect HTML in older browsers
• Enable you to easily create and modify styles
  shared among multiple documents

51
Advantages of Using CSS

• Promotes bandwidth efficiency
• Simplifies HTML code
• Enables you to create elaborate physical
  formatting without graphics
• Simplifies your Web page maintenance

52
Disadvantages of Using CSS

• Supported only by later browser versions (IE
  3.02, Netscape 4.0, Opera 3.5)
• Interpreted inconsistently among browsers

53
Basic CSS Syntax

• Stylesheets are simply rules that determine how
  the styles you specify should be applied
• Every rule consists of a selector and property
  definitions
• P
• font-family sans-serif
• font-size 10px
• There are three selector types
• Tag, Class, ID

54
Introduction to JavaScript

• Scripting languages are used to embed programming
  instructions to the browser in a Web page
• Benefits
• Save time with some processes
• Offer functionality not possible in HTML

55
Advantages

• Manipulate page contents in response to user
  events
• Perform form field validation
• Other benefits include
• Lightweight for easy downloading
• Performs well
• No security risks
• Works across browsers and platforms (Netscape
  2.0 and IE 3.0)

56
Disadvantages

• Implemented differently in different browsers and
  even different releases of the same browser
• Scripts need to be tested on all target browsers

57
The ltSCRIPTgt Tag

• All scripting language instructions included in
  the ltSCRIPTgt tag, which is often found within the
  ltHEADgt tag
• ltscript language"JavaScript" type"text/javascrip
  t"gt
• lt!--
• script code
• // --gt
• lt/scriptgt

58
Objects

• Objects are the core of JavaScript
• Several built-in objects available to any script
• For a list of built-in objects, use the
  JavaScript Object Tree

59
The Object Hierarchy

• JavaScript Tree shows the hierarchy of built-in
  objects

60
Object Properties

• Set of attributes associated with objects
• Referenced in scripts using the object.property
  notation
• document.bgColor
• Many properties can be reset

61
Methods

• Collections of JavaScript statements that are
  executed when they are called
• Perform some operation on or relating to an object

62
Methods

• Methods perform some operation on an object

63
Events and Event-Handlers

• Execute some JavaScript code in response to an
  event
• Tied to particular HTML tags through special
  event attributes
• Some are HTML 4.0 specific
• Generally available for A and Form tags

64
Events and Event-Handlers

• Adding single lines of JavaScript

65
Event-Handlers

• More complex handlers use JavaScript functions
• Functions define a block of code to be executed
  only when it is called

66
JavaScript Functions

• ltSCRIPT ID"clientEventHandlersJS"
  LANGUAGE"JavaScript"gt
• lt!--
• function _onclick()
• window.alert("You clicked there!")
• --gt
• lt/SCRIPTgt

67
Calling JavaScript Functions

• ltp onClick"_onclick()"gtClick here!lt/pgt

68
DHTML

• Dynamic HTML (DHTML) is a combination of CSS and
  scripting
• Display properties are set using CSS
• Properties are modified in response to some event

69
DHTML Changing Classes

• To change the class, you simply set ID.className
  equal to the name of the new class
• Supported only by IE 4.0

70
DHTML Changing Classes

• .normal
• color CCCCCC
• background-color 000066
• .highlight
• color 000066
• background-color FFFF00

71
DHTML Changing Classes

• ltspan id"link1" class"normal
  onmouseover"link1.className'highlight'"
  onmouseout"link1.className'normal'"gt
• Highlight Me
• lt/spangt

72
Launching and Testing Web Sites
73
Testing Web Sites

• Usability testing
• Content testing
• Response time

74
Usability Testing

• Validate all links
• Validate all images resolved
• Browse using all targeted browsers

75
Content Testing

• HTML Validation
• Spell Checking

76
Response Testing

• Response time of Web server (and under load)
• Reduce image sizes, cache images, use CSS

77
Deploying a Web Site

• Transfer all files to the Web server (FTP)
• Verify default page

78
Maintaining a Live Web Site

• Never make changes directly to a live web site.
• Make changes to your local site and test for any
  problems
• Get feedback from users to inform you of any
  problems you may have missed

79
Recommendations