Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Spectra 102: Custom Edit Handlers for Content
Document related concepts
Transcript
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
( )
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
