Spectra 102: Custom Edit Handlers for Content

Download Report

Transcript Spectra 102: Custom Edit Handlers for Content 

Let’s Make a Web Page
Beau A.C. Harbin
NetSERF.org
Topics

General Introduction to WWW
 Creating HTML pages
 Intermediate Web sites
 Advanced Web sites
 Launching and Testing Web sites
 Recommendations
General Introduction
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
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)
URLs
A URL is simply a Web site’s address
 This address is known as a Uniform
Resource Locator

– http://www.netserf.org
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
Components of a Web Page

HTML pages
 Images (gifs, jpgs, or pngs)
 Hyperlinks
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
HTML and its History
Year
HTML History
1991
First HTML spec
1993
HTML 1.0
1994
1995
Mosaic 1.0
Netscape 1.0
HTML 2.0
HTML 3.0
1996
1997
Browser History
Mosaic 2.0
IE 1.0, 2.0
Netscape 2.0, 3.0
IE 3.0
HTML 3.2
HTML 4.0
Netscape 4.0
IE 4.0
Creating HTML pages
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
HTML Syntax
Coding Rules


Each HTML tag must be surrounded by < >
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
The Basic HTML Page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
<HTML>
<HEAD>
<TITLE>Unknown</TITLE>
<META>
</HEAD>
<BODY>
<!--Page text goes here -->
</BODY>
</HTML>
HTML Headings

Six heading levels: H1 - H6
 Should be used in order
 Sample
<H2 align=“center”>H2 Heading</H2>
Line Breaks

Line breaks and white space in code are
ignored
 Use <BR> to force a line break
 CLEAR attribute values:
– LEFT
– RIGHT
– ALL

Use <P> to force a paragraph break
Aligning Text Blocks

ALIGN attribute can be used for:
Hx, P, HR, DIV

To align an element, use:
<DIV align=“ALIGNMENT”> or
<P align = “ALIGNMENT”>
– LEFT
– RIGHT
– CENTER
Horizontal Rules

<HR>
– SIZE
– WIDTH
– ALIGN
– NOSHADE
Ordered Lists
encloses the list; <LI> for each list item
 Code

<OL>
<OL>
<LI>Doe, Jane</LI>
<LI>Smith, John</LI>
</OL>

Display
1. Doe, Jane
2. Smith, John
Unordered Lists
encloses the list; <LI> for each list item
 Code

<UL>
<UL>
<LI>Doe, Jane</LI>
<LI>Smith, John</LI>
</UL>

Display
 Doe, Jane
 Smith, John
Definition Lists
encloses list
 <DT> for each term
 <DD> for each definition
 Code

<DL>
<DL>
<DT>HTTP</DT>
<DD>The Hypertext Transfer Protocol</DD>
</DL>

Display:
HTTP
The Hypertext Transfer Protocol
Nesting Lists

Any list type may be nested inside another list:
<UL>
<LI>Saints</LI>
<UL>
<LI>Thomas Aquinas</LI>
<LI>Augustine of Hippo</LI>
<LI>Catherine</LI>
</UL>
<LI>HR</LI>
</UL>
Tags

Logical tags describe information structure
 Physical tags specify display characteristics
 HTML recommends avoiding physical tags
in favor of Cascading Style Sheets
Logical Tags
<STRONG> strong emphasis (rendered as bold
text)
 <EM> emphasis (rendered as italics)

Physical Tags
<B> bold
 <I> italics


<FONT FACE=“ARIAL” SIZE=“+2” COLOR=“GREEN”>
specifies font characteristics
Intermediate Web Sites
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
Link Syntax

Use the anchor tag
<A HREF="http://www.netserf.org">Visit
NetSERF’s Home Page</A>

Make an image a link
<A HREF="http://www.netserf.org">
<IMG SRC=”netserflogo.gif"></A>

Create a target (bookmark) for another link
<A NAME="linkname"></A>
Creating Text Links

Linking to other web sites
<A HREF="http://www.netserf.org">Visit
NetSERF’s Home Page</A>

Linking to another page in the same web site
<A HREF="../nextpage.htm">Next Page</A>

Linking to another point in the same page
<A HREF="#linkname">Next Point</A>

Linking to a target in another page
<A HREF="nextpage.htm#linkname">The Target</A>
Embedding Images

Images are separate files downloaded after
the HTML file
 Three types of Image formats:
– GIFs
– JPGs
– PNGs
GIFs

Best suited for computer generated images
 Up to 256 colors
 Lowering the number of colors will reduce size
 Special Types:
– Transparent
– Animated
JPEGs (JPGs)

Unlimited colors
 Best suited for photographs
 Compression algorithm to reduce file size
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+
Using Images

Use the <IMG> tag:
<IMG SRC="logo.gif">

Rules of thumb in using Images
 total image weight no greater than 50-100K
 no single image greater than 20-25K
Image Attributes
HEIGHT and WIDTH
 ALIGN
 ALT
 HSPACE and VSPACE

<IMG SRC="CSS_positioning.png" WIDTH=400
HEIGHT=300 ALT="CSS" ALIGN="LEFT" HSPACE="2"
VSPACE="2" BORDER="0">
Creating Graphics Links

Enclose the <IMG> tag within an <A> tag:
<A HREF="http://www.netserf.org"><IMG
SRC=”netserflogo.gif"></A>
Using Image Maps

Define areas in an image that link to other
pages
Image Map Syntax
<IMG SRC="../images/bullets-easy.gif" USEMAP="#map" ISMAP>
<MAP NAME="map">
<AREA SHAPE="rect" HREF="seeds.html” COORDS="1,5,146,27">
<AREA SHAPE="rect" HREF="tips.html" COORDS="1,28,151,50">
</MAP>
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
Using Tables

Tables are used to control page layout
 Tables can contain:
– Text
– Graphics
– Form fields
– Other tables
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
Basic Table Syntax





creates the table itself
<TR></TR> creates a table row within a table
<TH></TH> creates a header cell within a table row
<TD></TD> creates a data cell within a table row
<CAPTION></CAPTION> creates a caption for the
table
<TABLE></TABLE>
Simple Table Example

Code:
<TABLE>
<TR>
<TH>Color</TH>
<TH>Hex Code</TH>
</TR>
<TR>
<TD>Red</TD>
<TD>#FF0000</TD>
</TR>
…
</TABLE>
Simple Table Output

Display:
Table Usage Rules

Start with <TABLE>; end with </TABLE>
 Unlimited number of rows, each beginning with
<TR> and ending with </TR>
 Each row contains table cells or table headers
 No text outside <TD> or <CAPTION> tag
 Fill empty cells with a non-breaking space
(&nbsp;)
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
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
Advanced Web Sites
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
Advantages of Using CSS

Promotes bandwidth efficiency
 Simplifies HTML code
 Enables you to create elaborate physical
formatting without graphics
 Simplifies your Web page maintenance
Disadvantages of Using CSS

Supported only by later browser versions
(IE 3.02+, Netscape 4.0+, Opera 3.5+)
 Interpreted inconsistently among browsers
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
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
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+)
Disadvantages

Implemented differently in different
browsers and even different releases of the
same browser
 Scripts need to be tested on all target
browsers
The <SCRIPT> Tag

All scripting language instructions included
in the <SCRIPT> tag, which is often found
within the <HEAD> tag:
<script language="JavaScript" type="text/javascript">
<!-{script code}
// -->
</script>
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
The Object Hierarchy

JavaScript Tree shows the hierarchy of
built-in objects
Object Properties

Set of attributes associated with objects
 Referenced in scripts using the object.property
notation:
document.bgColor

Many properties can be reset
Methods

Collections of JavaScript statements that are
executed when they are called
 Perform some operation on or relating to an
object
Methods

Methods perform some operation on an object
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
Events and Event-Handlers

Adding single lines of JavaScript:
Event-Handlers

More complex handlers use JavaScript
functions
 Functions define a block of code to be
executed only when it is called
JavaScript Functions
<SCRIPT ID="clientEventHandlersJS"
LANGUAGE="JavaScript">
<!-function _onclick()
{
window.alert("You clicked there!")
}
-->
</SCRIPT>
Calling JavaScript Functions
<p onClick="_onclick()">Click here!</p>
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
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+
DHTML: Changing Classes
.normal {
color : CCCCCC;
background-color : 000066;
}
.highlight {
color : 000066;
background-color : FFFF00;
}
DHTML: Changing Classes
<span id="link1" class="normal”
onmouseover="link1.className='highlight'"
onmouseout="link1.className='normal'">
Highlight Me
</span>
Launching and Testing Web
Sites
Testing Web Sites

Usability testing

Content testing

Response time
Usability Testing

Validate all links

Validate all images resolved

Browse using all targeted browsers
Content Testing

HTML Validation

Spell Checking
Response Testing

Response time of Web server (and under load)

Reduce image sizes, cache images, use CSS
Deploying a Web Site

Transfer all files to the Web server (FTP)

Verify default page
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
Recommendations