Copyright © 2004 ProsoftTraining, All Rights Reserved. Site Development Foundations © 2007 Prosoft...

Copyright © 2004 ProsoftTraining, All Rights Reserved.

Site Development Foundations

© 2007 Prosoft Learning Corporation

All rights reserved


Lesson 1:Introduction to

Web Site Development

Objectives

• Distinguish between using a text editor and using a GUI markup language editor

• Identify Web page design issues• Identify the standards organization that

controls markup languages• Identify front-end and back-end Web issues• Define the concepts of creative design and

branding standards, and demonstrate their importance to business

Creating Web Pages

• The need for skills in Web-based technologies:– Contribute to team projects– Create Web pages– Create résumés

• You must know at least the following markup languages:– Hypertext Markup Language (HTML)– Extensible HTML (XHTML)

Additional Web Page Elements

• Web pages use more than HTML or XHTML -- additional technologies include:– Flash– Java– ActiveX

• You must also understand how Web pages use:– Databases– Common Gateway Interface (CGI)

Databases and Web Pages

• Databases can store information about company inventory

• Databases can store customer information

Web Pages and CGI

• CGI is used for many purposes:– To help Web pages pass information to and

from databases– To provide active content (e.g., hit counters)– To provide dynamic content

• Examples of CGI technology include:– Perl– PHP Hypertext Preprocessor (PHP)– Active Server Pages (ASP) and .NET– JavaServer Pages (JSP)– Server-Side JavaScript (SSJS)– ColdFusion

Text Editors and Markup Languages

• You do not need to use a special editor application to create markup– You can use a simple text editor (e.g.,

Notepad or Vi)• When creating HTML or XHTML files, you

must:– Save the text as plaintext– Save the file using either the .html or .htm

file name extension

Graphical User Interface (GUI) HTML Editors

• GUI HTML editors:– Create HTML/XHTML code for you

• You type page text as you would with a standard word processor

• You point and click with a mouse• Popular GUI HTML editors include:

– Adobe Dreamweaver– Microsoft FrontPage– SeaMonkey Composer

Why Learn Markup Languages?

• GUI HTML editors do not keep pace with the latest improvements in markup language

• You can add features to pages not supported by the editor

• You will not be limited by the GUI editor’s capabilities

Front-End Issues• A Web page is an interface that should:

– Provide a distinct message

– Be accessible by all users

– Incorporate appealing images and graphical elements

– Include constantly updated hyperlinks

– Use tables wisely

– Present carefully designed Web forms

– Connect pages to databases securely

– Use the most current technologies appropriate

– Use images sparingly

– Be easily navigable and without dead ends

– Include alternative navigation

Web Page Accessibility

• An accessible Web page has:– A user-friendly and accessible front end– Back-end server resources that process and store user

input• The WC3 estimates that up to 10 percent of people have

disabilities that, if not accommodated by Web sites, can cause companies to lose significant amounts of revenue

• Why adhere to accessibility standards?– It makes your site available to all users– You can be penalized for failing to provide accessibility,

either by losing customers or through government-imposed fines

Disabilities Acts• The Americans with Disabilities Act (ADA)

– Enforced by the U.S. Justice Department– Requires Web designers to create "reasonable

accommodations" for disabled users:• Ensuring that all images have text-based descriptions• Providing text-based alternatives to all non-text

content (e.g., Java applets and Flash presentations)• Providing easy-to-read forms

• Additional disabilities acts and initiatives:– Canada’s Common Look and Feel for the Internet– The Australian Government’s Guide to Minimum Web Site

Standards – Accessibility– India’s Maharashtra Right to Information Act

Disabilities Acts (cont’d)• Web Content Accessibility Guidelines (WCAG)

– Provided by the W3C Web Accessibility Initiative (WAI)

– A product of worldwide cooperation– 14 WAI guidelines

• Rehabilitation Act: Electronic and Information Technology Accessibility Standards, Section 508– Known simply as Section 508– All federal agencies must ensure that all

electronic and information technology developed, procured, maintained or used by federal agencies be comparably accessible to users with disabilities

– Based on the WCAG

Child Online Protection Act (COPA)

• Designed to protect minors from harmful material– U.S. government law– Penalties specified– You can learn more about COPA at:

• The COPA Commission Home Page www.copacommission.org

• The COPA Act Text www.copacommission.org/commission/original.shtml

Verifying Web Page Accessibility

• Many tools available, including:– WebXACT (http://webxact.watchfire.com/ )– STEP508 (www.section508.gov)– RetroAccess (www.retroaccess.com)

• One way you can help improve accessibility is by adhering to the XHTML 1.0 standard when you write Web page code

General Web Page Accessibility Considerations

• Visual challenges– Text readability– Text support for images– Screen reader support

• Audio challenges– Alternative audio support– Alternative speech input– Text support for audio elements

• Cognitive and technical challenges• Site maps can improve accessibility• Change documentation can improve accessibility

Creative Design and Branding Standards

• A Web page is often part of a larger marketing and sales strategy– Creating and ensuring brand recognition (name

recognition)– Presenting a strong message

• A Web page allows you to develop:– A market– Mind share– A brand

Creative Design and Branding Standards

• Design and branding standards – topics for meetings include:– Target markets– Market messages– Media choices– Color combinations– Sales strategies– Technologies to use

• Audience development techniques include:– Flash, Java– Company logos– Strategies developed by sales and marketing– Push and pull technologies– Visitor tracking

Portals

• A Web site that act as a centralized access point for additional Web sites– Portal types:

• Vertical• Horizontal

• Portal benefits:– Direct users to the best sites– Attract users to products– Improve brand name

Wiki Site• A Web site that allows all visitors to collaborate in

its construction– Wiki software is installed on a Web server– You can lock down certain pages and leave

others open to editing• Wiki examples

– Wikipedia (www.wikipedia.org)– LinuxQuestions.org

(http://wiki.linuxquestions.org/wiki/Main_Page)– MemoryAlpha

(http://en.wikipedia.org/wiki/Memory_Alpha)• Wiki software purveyors

– WikiBase (http://c2.com/cgi/wiki?WikiBase)– JSP Wiki (www.jspwiki.org)

File Formats and Active Content• Your pages will include various content formats,

including PDF documents, images and media files• Common file formats and MIME types

– HTML: text/html– JPEG: image/jpeg– Cascading Style Sheets (CSS): text/css– MPEG: audio/mpeg– MP3: audio/mp3

• Evaluating proprietary formats – Difficulty/inconvenience– Cost– Audience limitation

Back-End Issues

• Database connectivity– Types of databases– Web servers use relational databases to

store data• Relational databases

– Creating relational databases– Relational database vendors– Databases, Web servers and SQL

Relational Database Manipulation Terminology

• Join -- combining two database tables to create a new table• Table -- a database topic that contains rows (records) and

columns (attributes or fields)• Record -- one row of a relational database table• Field -- one column of a relational database table• Entity (i.e., record) -- a person, place or thing represented in a

database table row• Attribute -- a category of information related to an entity• Linking attribute -- common attribute between tables that

allows a join to occur• Relation -- a link generated between two entities• Tuple -- two or more entities currently linked by a relation• Query -- searching a database

Types of Database Table Joins

• Inner join– Results in a new table in which the information

in one column of the first table is combined with a column of the second table

– The most common type of join• Outer join

– Used to combine tables when one column of a table contains an empty, or null, value

– Less common

SQL Commands

• SELECT — requests data from a particular table or table row

• FROM — delimits the beginning search point in a table or table row

• WHERE — delimits the ending search point in a table or table row

• JOIN — creates a new table from selected data• SUM — adds numerical information within records

Accessing and Updating Databases

• Ways to access databases include:– Locally– Over the LAN from a share you establish– Via the Web through a Web application

• Database connectivity methods– Open Database Connectivity (ODBC)– Java Database Connectivity (JDBC)

• Indexing and cataloging

Bandwidth and Download Time

• Download time– Factor in all files– Consider typical connection speeds

• Calculate download time for a Web page– Check the size of the HTML file and all associated

images, files or programs– Determine the speed of your network connection– Convert the connection speed and file size to common

units of measure (e.g., bytes or bits)– Divide file size by connection speed

Naming Web Page Files

• Web servers search for default page names• Default page names include:

– index.html– index.htm– default.htm– default.asp

• Default page names can change from server to server– Apache Server -- usually index.html– IIS -- usually default.htm, default.html or

index.html

HTTP 404 – File Not Found Error

• Indicates that a user has requested a file that does not exist on the specified Web server– Generated by the server– Can be customized

Habitat For Humanity Web Site

• A not-for-profit, volunteer-driven organization that builds and sells homes for families worldwide

• Has built more than 150,000 homes worldwide • A Web site example in this course• Like any Web site, it targets an audience

– The site is part of a concerted effort to bring in volunteers

– People with technical expertise must run the site– More than technical expertise is required –

The Web design team must also understand the business goals


Lesson 2:Markup Language and Site

Development Essentials

Objectives

• Discuss the history of markup languages• Distinguish between HTML and XHTML• Identify HTML and XHTML flavors• Explain the value of universal markup• Demonstrate knowledge of site management

principles• Plan Web site development

History of Markup Languages

• Standard Generalized Markup Language (SGML)– Originally created by IBM in 1986– A metalanguage, meaning it is used to

create other languages– The basis for HTML, XHTML and XML– You create your own document rules using

a Document Type Definition (DTD)

History of Markup Languages (cont’d)

• Hypertext Markup Language (HTML)– Though based on SGML, invented by Tim Berners-Lee– Allows hyperlinks– HTML vs. SGML

• HTML versions include:– HTML 3.2– HTML 4.01 (the most popular version of HTML)

• HTML 4.0 flavors include:– 4.01 Transitional -- allows deprecated tags, not as strict– 4.01 Strict -- requires all container tags and no allows

deprecated tags– 4.01 Frameset -- for use with frames

History of Markup Languages (cont’d)

• Extensible Markup Language (XML)– XML describes data instead of formatting– HTML or XHTML provides formatting and

document structure– A subset SGML, also a metalanguage

• XML documents have a tree structure• XML documents must be well-formed• XML and valid documents: the DTD• XML and style sheets• From HTML to XML

Universal Markup Creation

• Follow W3C standards• Benefits of following standards include:

– Code will render as expected in more browsers

– Pages will be more scalable (as you add more sophisticated content, you will not run into problems)

– Pages are more likely to be available to disabled users

Web Site Development Principles

• Project management and the Web development project cycle– Create and document an initial Web site plan– Obtain relevant input from stakeholders– Communicate the Web site plan– Consider technical and non-technical concerns– Develop the site– Publish the site– Manage the site

Creating and Documenting an Initial Web Site Plan

• Site plan is a rough outline of planned development– Site diagram– Storyboard

• Eventually becomes a site map for completed site • Determining audience and message• Validating design issues

– Consider issues such as central message, fonts, images, colors, ethnic and cultural diversity, and common color schemes

Obtaining Relevant Input from Stakeholders

• Stakeholders are relevant organization employees or contributors who can provide or help determine:– The purpose of the Web site– The services that the audience requires from the site– Development timelines

• As you work with stakeholders:– Remember that non-technical people may be asked to

approve your project– You must translate technical issues into non-technical

language• Team members can include representatives from marketing,

IT, sales and other areas of your organization

Documenting and Communicating the Plan

• Create a storyboard• Document decisions in meetings and follow up• Communicate the plan in various ways:

– Calling relevant parties to ensure that everyone is satisfied

– Sending e-mail messages– Sending postal ("snail mail") messages if

necessary– Sending fax messages– Telephone calls

Communicating the Plan

• Use oral presentations and presentation aids, including:– Presentation software – Overhead projection– Whiteboards– Easel and poster paper– Charts – Published handouts

Leading Discussions

• Strategies leaders use to manage a meeting:– Make introductions– Recall past business– Create a list of action items, including

timelines– Monitor time– Ensure proper discussion focus– Handle heated discussions– Distribute minutes

Considering Technical and Non-Technical Issues

• Leaders can ensure communication by:– Regularly asking if anyone has questions– Asking team members to summarize their

understanding of decisions– Asking a third party to deliver a summary of

progress– Writing regular updates about the project

Developing the Site

• As your team develops the site, you will be engaged in various activities:– Creating markup code– Testing functionality– Approving the site– Publishing the site

Testing Pages in Multiple Browsers

• As you develop Web pages, test them using multiple Web browsers

• Different generation of the same browser may interpret HTML somewhat differently

• Browser vendors also implement standards differently

• Browser types include:– Microsoft Internet Explorer– Mozilla Firefox– Netscape Navigator– Lynx– Opera

Publishing the Site

• To publish a site, you need to know:– The IP address and/or DNS name of the site– User name and authentication information– The destination directory (i.e., folder) on the

Web server– Space requirements– The protocol you will use to upload the site

• Working with service providers

Managing the Site

• When managing a site, you must be prepared to:– Create new content– Update dead links– Remove old sites– Remove unused pages– Ensure connectivity– Report access troubles – Process feedback from customers and

stakeholders

Obtaining Feedback

• Your Web team must process various types of feedback

• Feedback can come from various sources• Ways to obtain quality feedback

– Providing Web forms on the site that ask for customer input

– Conducting surveys in person– Conducting surveys via e-mail

Intellectual Property• A unique product or idea created by an individual or

organization– Generally has commercial value

• Never "borrow" content without express, written consent• Review copyright and trademark issues (e.g., trade secrets,

licensing, infringement, plagiarism)• Understand copyright scope, reach and time limits• Consider ethical issues of copyright, trademark and

plagiarism• Avoid copyright infringement, trademark infringement and

plagiarism by:– Reviewing content– Obtaining express, written consent– Creating reasonable deadlines

Outsourcing

• Increasingly, Web development work (including site design) is being outsourced to workers in remote locations– May save the company money– May require you to work with remote workers

• As you use and work with remote teams, you may have to obtain:– Non-Disclosure Agreements (NDAs)– Legal consultation


Lesson 3:XHTML Coding

Objectives

• Demonstrate knowledge of basic XHTML document structure

• Identify XHTML document structure tags, including the <meta> tag and the <!DOCTYPE> tag

• Create XHTML that validates properly• Format paragraphs and text with XHTML tags• Use comments and good coding practices

Markup Tags

• Markup tags are element names enclosed in angle brackets, or wickets < >– Tags are key to markup files– Tags embed the markup element

information in the document so that a user agent (e.g., browser) will render text as instructed by the associated element

– The combination of markup tags and standard text is loosely referred to as either "code" or "markup"

Container Tags• Two types of tags: container and empty• Container tags contain page text between an

opening and a closing tag, as shown• Container tags are also known as non-empty tags• XHTML requires the use of container or non-empty

tags

Empty Tags

• An empty tag does not use a closing tag• Used in HTML only, Transitional or Frameset flavor• Never used in XHTML; code will not validate if you

use empty tags

Alternative Non-Empty Tag

• HTML and XHTML allow alternative notation for stand-alone non-empty tags

• Place the slash ( / ) after the element name (before the closing wicket), rather than before the element name like in a standard closing tag:

</title> My Home Page

• All XHTML tags must be closed (using either a pair of container tags or the stand-alone non-empty tag)

What Constitutes a Tag?

• An element• An attribute• A value

Document Structure Tags

• Every XHTML document must have the following document structure components to render as expected and validate:– A <!DOCTYPE> tag– An <html> tag – A <head> tag– Any <meta> tags– A <link> tag reference to a style sheet

(recommended)– A <title> tag – A <body> tag

Document Structure Tags (cont’d)

Are XHTML Tags Case-Sensitive?

• XHTML tags are case-sensitive and should always be typed in lowercase letters

• By contrast, HTML tags are not case-sensitive

Document Type Declaration (DOCTYPE)

• An SGML statement that describes the nature of your code

• Placed at the top of the document using the <!DOCTYPE> tag

• If you do not specify a DOCTYPE, then two problems may arise:– You will not be able to control how your

code renders in the future– You will not be able to use a markup

validator• Each version and flavor of HTML/XHTML has

its own DOCTYPE

The <html> and <head> Tags

• The <html> </html> tags encompass all other HTML or XHTML elements in the document– Takes various attributes

• The <head> </head> tags encompass several document elements, including:– The <meta> tag– The <link> tag that references a CSS file, if

present– The <title> tag

The <body> tag

• All content to be displayed on the page through the user agent must be enclosed between the <body> </body> tags– <body> takes many attributes, including:

• bgcolor• background• link

– Values accompany attributes, and must be enclosed in quotation marks in XHTML

Web Site File Structure

• When creating a Web page, you must consider the site’s file structure

• Your XHTML/HTML and image files will be uploaded to a server eventually, so it is always good practice to organize your files

Preparing Your Development Environment

• Obtain a text editor• Install multiple browsers • Set file preferences

Cascading Style Sheets (CSS)

• A technology that adds formatting and structure to your pages

• A style sheet is simple text file that contains instructions

• If all pages on your site are linked to the same style sheet, then one simple change to the style sheet will change all specified elements across the site

• Strict flavors of HTML and XHTML require that you use style sheets

CSS Terminology

• Proper CSS structure• Inheritance• CSS and XHTML• Benefits of using CSS• Style sheets and compatibility

Paragraph Formatting and Block-Level Elements

• Block-level markup elements– Affect entire paragraphs or multiple

paragraphs• The <p> tag• The <br/> tag

• Text-level markup elements– Elements that can affect as little as a single

character or word• <bold> or <strong>• <i> or <em>

Heading Levels

• Block-level element• Heading levels 1

through 6– <h1> </h1>– <h2> </h2>– <h3> </h3>– <h4> </h4>– <h5> </h5>– <h6> </h6>

Tag Nesting in Markup

• Placing one pair of tags between another– Proper: <h1><i> ... </i></h1>– Improper: <h1><i> ... </h1></i>

• Improper: The <i> tag is opened within the <h1> tags, but closed after the </h1> tag

• If you fail to properly nest code, your pages may still render in some user agents, but they will not validate and may fail to render in the future

Primitive Formatting with the <pre> Tag

• The <pre> tag retains formatting on preformatted text

• Can be used to retain tabular format, fonts, etc.

• All text between <pre> </pre> tags will render as formatted in the HTML file

Indenting and Centering Text

• The <div> tag• Alternatively, use <p align= "center"> </p>• The <blockquote> tag can also be used to

indent (but not center) text

Text-Level Elements

• Bold, italic and underlined text• Bold:

– <b> and <strong>• Italic:

– <i> and <em>

Font Style Elements vs. Phrase Elements

• The <b> element is a font style element, <strong> is a phrase element; both create boldface text

• The same is true of <i> and <em>, respectively, which both create italic or emphasized text

• The difference is that <b> specifically means apply the bold font style, whereas <strong> indicates that the text is to be given a strong appearance

• In short, <b> represents a font appearance instruction, whereas <strong> represents the weighting of the phrase relative to surrounding text

The <code>, <kbd> and <samp> Tags

• All make text appear in a fixed-width font in an HTML 4.0-compliant browser window

• Available to both HTML 4.0 and XHTML

Lists

• Two types of lists:• Ordered

– A numbered list– Uses the <ol> element and requires a

closing tag </ol>• Unordered

– A bulleted list– Uses the <ul> element and requires a

closing tag </ul>

Lists (cont’d)• Ordered list code:<h2>Ordered List</h2>

<ol>

<li>This is the first numbered item.</li>

<li>This is the second numbered item.</li>

<li>This is the last numbered item.</li>

</ol>

• Unordered list code:<h2>Unordered List</h2>

<ul>

<li/>This is the first bulleted item.

<li/>This is the second bulleted item.

<li/>This is the last bulleted item.

</ul>

Good Coding Practice

• Create code that can be easily read by others• Exceptions:

– Some code might encounter problems if it includes random spaces

– Always test your code in multiple browsers and validate it

• Adding hidden comments: 

• Use comments to annotate code or document changes


Lesson 4:Horizontal Rules and Graphical Elements

Objectives

• Add horizontal rules to your pages• Incorporate image files as stand-alone

graphics• Use the Web-safe color palette• Use colors and tiled images for page

backgrounds• Add special characters to XHTML pages• Structure your XHTML document using the

<div> tag and CSS

Horizontal Rules in XHTML

• Create a horizontal rule using the <hr> tag:– <h1>Horizontal Rules</h1>

<hr/>Horizontal rules: Lines used to make visual divisions in your document.

• Horizontal rule attributes

Images in Web Pages

• Use the <img> tag to insert an image file using either of two formats to close the tag: – <img src="imagefile.gif"> </img>– <img src="imagefile.gif"/>

• Image file formats– Graphics Interchange Format (GIF)– Joint Photographic Experts Group (JPEG)– Portable Network Graphics (PNG)

Comparing Image File Formats

Format Transparency

Interlacing Compression

Animation

GIF Yes Yes Yes Yes

JPEG (standard)

No No Yes No

PNG Yes Yes Yes Yes

Images and the alt Attribute

• In XHTML, every image must follow good coding practice by including the alt attribute with a corresponding value

• Code will not validate as XHTML without this attribute

• Browsers and screen-reader technology can read alt description and render it in audio for disabled users– <img src="image.gif" alt="Alternative

text"/>

Combining Background Images and Colors

• The bgcolor attribute: – Specifies background colors

• The background attribute: – Inserts an image as a background

• If you use both the bgcolor and background attributes in a <body> tag, then only the attribute specified last in the tag will render

Aligning Images Relative to Text

• The align attribute positions images relative to text

<img src="imagefile.gif" align="alignment value"> • Values include:

– "bottom"– "middle"– "top"– "left"– "right"

• The align attribute has been deprecated in favor of style sheets, but can still be used; code will still validate as XHTML 1.0 Transitional

Resizing Images

• Specify image size using the following attributes:– height– width

• The syntax for these attributes is:

<img src="imagename.gif"

height="NumberOfPixels"

width="NumberOfPixels"/>• Specifying both height and width can distort an

image; be sure to use proper proportions

Special Characters• Uses code with ampersand (&) and semicolon (;)• Special characters include:

– The "less than" symbol <• Code: <

– The "greater than" symbol >• Code: >

– The copyright sign © • Code: © or ©

– The registered trademark sign ® • Code: ® or ®

– The United Kingdom pound sterling sign: £ • Code: £

• Non-breaking space:

Specifying Colors

• Colors can be specified by name or by Hexadecimal "Red Green Blue (RGB)" value

Web-Safe Color Palette

• A set of 216 colors guaranteed to render properly

• Ensures that colors in pages render as expected– If you specify a color not supported by the

monitor or operating system, the system will approximate the color, a process called dithering

– Unexpected results may occur as the result of dithering

Page Colors and Backgrounds

• Specifying page colors:

<body bgcolor="colorNameOrCode"> • Specifying text color on the page:

– <body text="colorNameOrCode">

• Specifying color of unvisited links:– <body alink="colorNameOrCode">

• Specifying color of visited links:– <body vlink="colorNameOrCode">

• Providing a background image: – <body background="image.png">

Specifying Font Information

• You can use the <font> tag– The size attribute: specify value "1" through

"7"– The face attribute: specify font type (e.g.,

Arial, Times New Roman)

<font size="7" color="#993399" face="arial">

• The <font> tag is deprecated• The W3C recommends to use style sheets

instead

Web Design Issues

• Color combinations– Popular color combinations

• Consider existing sites– Habitat for Humanity (www.habitat.org)– Microsoft (www.microsoft.com)– Red Hat (www.redhat.com)

• Cultural and audience concerns– Page layout

• Layout guidelines• Document structure, the <div> tag and style

sheets• Relative path names• White space, the <img> tag and XHTML


Lesson 5:Hyperlinks

Objectives

• Reference full and partial URLs• Specify alternative protocols• Create hyperlinks for text and images• Link to local files and remote sites• Create an internal anchor within a file and link

to it

The Anchor Tag

• The <a> tag creates hyperlinks• A container tag that encompasses the text or

image (or both) to be used as a link• The syntax for using the anchor tag to create a

link is as follows:

<a href="URL"> linked text or image (or both) </a>

The Anchor Tag (cont’d)• A fully qualified URL specifies an entire path• A partial URL assumes a path relative to the file’s current

location

Type of Reference

Description Examples

Fully qualified URL (also called absolute URL)

A URL (i.e., URI) that contains a full path to a resource, including the protocol indicator. Also known as a hard link.

http://www.someserver.com/somepage.html

or

http://someserver.com/pub/~james/somefile.ext

or

c:\intetpub\wwwroot\ccyp\syb\syb.html

Partial URL (also called relative URL)

A URL that assumes the current document’s path. All references are made from the document’s current directory.

syb.html: Specifies a file in the current directory

../css/stylesheet.css: Specifies a file one directory up from the current page

pub/images/mybullet.gif: Specifies a file in a subdirectory

The Anchor Tag (cont’d)• You can specify various protocols

Protocol

Hyperlink HTML Example

HTTP Visit the <a href="http://www.ciwcertified.com">CIW<a/> site.

HTTPS (Secure HTTP)

Visit our <a href="https://www.ciwcertified.com">secure CIW<a/> site.

FTP Download the file from our <a href="ftp://ftp.server.com">FTP server.</a>

E-mail You can send e-mail to us at <a href="mailto:[email protected]"> [email protected]</a>.

Telnet Please visit our <a href="telnet:melvyl.ucr.edu">Telnet server.</a>

The Anchor Tag (cont’d)

• Make sure that you:– Use a closing anchor tag </a>– Place quotation marks around the value– Include the closing bracket at the end of the

opening <a> tag• Various issues to troubleshoot with hyperlinks

– Text and images disappear– All successive Web page text is a hyperlink– Garbled code appears on screen– Code will not validate due to a problem <a> tag

The Anchor Tag (cont’d)

• Creating local hyperlinks• Creating external hyperlinks• Using images as hyperlinks• Creating internal links

– On a long page, a link to another point lower on the page

– Internal links require internal bookmarks• Example:

<a name="targetArea1">

target anchor text or image (or both)

</a>

… other page content here …

<a href="#targetArea1"> text/images linking to targetArea1 </a>

Accessing an External File's Internal Link

• Link to a specific point in another page without first accessing the top of that page

• To link to an internal anchor inside of another file, use the following syntax:

<a href="URL/filename.ext#AnchorName">link text/image</a>

Managing Hyperlinks

• All hyperlinks need to be verified– Verify that the URL or other reference is valid– Verify that the target page or location is accessed

• Hyperlinks also need to be managed– Over time, URLs (and content) change– “Dead” links frustrate users

• Manually check links• Automatic link-checking software:

– Linklint (www.linklint.org)– Link Controller (http://freshmeat.net/projects/linkcont)– Checkbot (http://degraaff.org/checkbot)– Link should still be reviewed manually to verify relevance

of linked content


Lesson 6:Tables

Objectives

• Create simple and complex tables in HTML and XHTML

• Add or remove table border lines• Format table rows and cells using attributes• Use tables when appropriate

Introduction to Tables

• Present data that lends itself to tabular format• In XHTML, do not use to structure entire pages• Offers many formatting options

Table Elements

Element Tag Description

Table <table>…</table> Required to create a table; contains all other table elements.

Table caption

<caption>…</caption> Optional; adds a caption or title, which appear above the table by default.

Table row <tr>…</tr> Required; contains all data for a table row.

Table header <th>…</th> Optional; typically designates the top row or left column. By default, text in a header cell will appear bold and centered. Table data <td>…</td> Required, unless <th> is being used; designates table cell contents.

<table> Tag

• Table tag creates the table structure• <table> </table> encloses all other table

elements• Attributes include:

– align– border– cellpadding– cellspacing– width– summary

<tr> Tag

• Table row tag creates a row within a table• Attributes include:

– align– valign– bgcolor– style

<td> Tag

• Table data tag designates table cell contents• Attributes include:

– align– valign– colspan– rowspan– bgcolor– height– width

Differences between HTML and XHTML Tables

• The align attribute for the <table> tag is deprecated in HTML 4.01

• The align attribute for the <table> tag is deprecated in XHTML 1.0 Transitional 1.0

• The bgcolor attribute has also been deprecated

Table and Data Alignment Options

• Defaults for table data:– Content in table header cells is aligned both

horizontally and vertically to the center of the cell

– Content in table data cells is aligned horizontally to the left and vertically to the center

• You can customize these defaults by using:

valign="top"

This will make text appear in the top of a cell or row

Working with Table Data

• Changing height and width of table elements• Column and row spanning• Formatting content in tables


Lesson 7:Web Forms

Objectives

• Identify Web form elements for HTML and XHTML

• Construct a Web form• Test Web forms using a public test engine

Introduction to Web Forms

• Forms are used to obtain information from users– Input can include the user’s name, address

or credit card number, for example– The information that a user submits in the

form is sent to a server, where it is stored and/or processed

• Forms are essential for e-commerce, as well as for gathering information

Web Forms and CGI

• To be truly functional, a form requires the use of a Common Gateway Interface (CGI) program to process and organize the user input

• A CGI script residing on a server performs two important functions:– Receives data from a Web browser– Processes and formats the data

• CGI scripts can also be used to forward data to the proper destination, where it can be processed or stored

Diagramming a CGI Session

Parsing Data

• A Web form receives submitted user input• CGI scripting (or an alternative) parses the data• The browser sends user-submitted information to

the Web server as a raw text string• The basic element of a raw text string is a

name=value pair• This raw text string consists of name=value pairs,

delimited by ampersands (&)• After the server receives this information, a CGI

script can parse and format the raw text string into a human-readable format, or enter the data into a database

Applied Example: FormMail

• FormMail details:– Written by Matt Wright– Extremely popular– Used to e-mail information gathered from

forms to a destination you specify– You install the script onto a Web server and

refer to it in your forms• Security concerns• Other versions of FormMail

The <form> Tag

• The <form> tag creates a user-input Web form • Encompassed all content and form fields• A container tag, requires closing </form> tag• Attributes include:

– method• "get": not as secure, sends unencrypted text• "post": encrypts, but can be easily broken

– action• Specifies the name and location of the CGI

script used to process the form

Web Form Fields

• User-input form fields include:– Text box– Radio button– Check box– Single-option select list– Multiple-option select list– Scrolling text area box– Password field– File upload button– Submit and Reset buttons

Forms and the name Attribute

• All form field elements share one attribute: name– Identifies information you receive from a

user and associates it with a value you specify

– Helps organize user input

Password Field

• Created using the password attribute of the <input> tag

• Specify the size of the textbox using the size attribute

• Example: <input type="password" name="Password" size="8" />

• Provides a field that allows password information to be entered and sent

• Text entered by users masked by asterisks

Text Boxes

• Used to collect a single line of data from the user, such as name, e-mail or address information

• Syntax: <input type="text" name="FieldName"/>• You can enter default text to appear in the

form:

<input type="text" name="FieldName" value="DefaultText"/>

In this example, "DefaultText" would appear in the user’s window

File Upload

• Provides a Browse button and accompanying text box

• Users click the Browse button and navigate to the file they want to upload

• The path to the file chosen by the user will appear in the text box

Choose your file here: <input type="file" name="File"/>

Submit and Reset Buttons

• Submit button – Sends completed user information from

Web form to server• Reset button

– Clears all information entered into form fields, instead of submitting information to server

• All forms need a means to submit data

<input type="submit"/>

<input type="reset"/>

Radio Buttons

• A group of two or more mutually exclusive options

• Never used as stand-alone items

• Example:

Do you know carpentry?

<input type="radio" name="Carpentry" value="yes"/>

• To present a preselected radio button, add the following attribute and value:

checked="checked"

Check Boxes

• A group of non-exclusive choices

• Syntax:

<input type="checkbox" name="groupName"/>

Select Lists

• Drop-down lists of predetermined options• Created with the <select> tag• Two types:

– Single-option select list Multiple-option select list

• To allow the user to select multiple options, add the multiple attribute in the <select> tag

Scrolling Text Area Box

• Created by the <textarea> element• Provides a scrolling text box into which a user can

enter a few sentences, an address, a letter, etc.• Used to gather more than one line of text from the

user• Attributes include:

– cols– rows– wrap

• Text between <textarea> tags will appear to users as default text within the box


Lesson 8:Image Techniques

Objectives

• Create client-side image maps• Define rectangle, circle and polygon areas as

hot spots in an image• Link defined areas to URLs• Define image transparency• Distinguish between GIF 87a and 89a formats• Define image interlacing• Identify animated GIF and PNG image formats

Graphic Types

• Vector– Graphics that use mathematical

coordinates with lines, curves, shapes to create desired images and specify colors

• Bitmap– Graphics that use small dots (usually

thousands) to create an image and specify color

– Also known as raster graphics

Image Maps

• An image that contains hyperlinked, clickable regions, sometimes called "hot spots"

• Each hot spot is defined by a set of coordinates (indicating its position on the image) and a URL reference

• Two types of image maps:– Client-side (the most common)– Server-side (rarely used)

http://www.ciwcertified.com/

Defining a Client-Side Image Map

• Define a map, assign it a name, and provide hot-spot coordinates

• Coordinates can be determined using an image-editing application such as Paint Shop Pro

• Refer to the image map by map name:<map name="mapname" id="mapname">

<area shape="shape" coords="coordinates" href="url"/>



</map>

• Associate the image file with the map:<img src="imagemap.gif" usemap="#mapname"/>

XHTML and the id Attribute

• In XHTML, the id attribute is required in the <map> tag

• Serves same purpose as the name attribute• If the id attribute is omitted, code will not

validate

Defining Hot Spots

• Three shapes for hot spots:– Rectangle– Circle– Polygon

Rectangle Hot Spot• Any two points can define a rectangle• Each point is represented by a horizontal (x)

coordinate and a vertical (y) coordinate • Rectangles are defined by four coordinates

representing the upper-left and bottom-right corners of the rectangle– Code:<area shape="rect" coords="1,52,33,96" href="hand.htm" />

Circle Hot Spot

• Circles are defined by two coordinates and a radius– Code:<area shape="circle" coords="x1,y1,radius" href="url"/>

• The pair of coordinates specifies the circle's center

• A third number specifies the desired radius, or half-width, of the circle

Polygon• Defines an irregular area (neither a circle nor a

rectangle)• Specify coordinates for each point that defines the

polygon, from three to 100 pairs of coordinates– Code:<area shape="polygon" coords="x1,y1,x2,y2,...xn,yn" href="url" />

Image Transparency

• Provides the visual effect of blending in to the background of the Web page

• Most developers use image transparency to remove the blank image background so it appears to float on the page

• Web-ready formats that support transparency:– GIF 89a– PNG

Image with No Transparency

Transparent PNG Image

Image Interlacing

• Allows an image to progressively display in a browser while downloading

• The image appears in stages during download (from top to bottom)

• The top of a non-interlaced image will appear after the browser has read 50 percent of the image

Image Interlacing (cont’d)

Animation

• Several images in a sequence, rendered in rapid succession to simulate motion

• Made possible in several ways:– Animated GIFs and PNGs

• The animated image is actually a group of separate, sequenced images

– Flash• Scripts, called macros, that manipulate

vector images• Popular, but proprietary technology (Adobe)• Requires a browser plug-in to view

Animation (cont’d)• Java

– The user agent must have Java plug-in installed– May not appear as quickly as Flash

• Scalable Vector Graphics (SVG)– Developed by various vendors, including

Adobe, Microsoft and Sun– An open standard adopted by the W3C– Supports:

• Animation• Compression• Searchable text• Zooming

– Requires a plug-in to view

Animation (cont’d)

• Identifying animation techniques– Right-click the animation in the browser and

identify its properties– View the Web page source code

• Issues with animation– Frequently overused– Can limit accessibility– Often proprietary, requiring a browser plug-in

• Using non-standard images


Lesson 9:Frames

Objectives

• Define frames and the purpose of the frameset document

• Use the <frameset> and <frame> tags• Identify the purpose of the <noframes> tag• Target links from one frame to another• Specify default targets using the <base> tag• Create borderless frames, and control margins

and scrolling in frames• Identify the purpose of inline frames

The <frameset> Tag

• A container tag, requires a closing </frameset> tag

• Determines the frame types and sizes on the page

• Two frame types:– Columns – Rows

Columns Example

• This frameset was created by the following code: <frameset cols="35%,65%"> </frameset>

Rows Example

• This frameset was created by the following code: <frameset rows="180,*"> </frameset>

The <frame> Tag

• Defines the content in each frame• Placed between the <frameset> </frameset> tags• The src attribute specifies the file that will appear

in the frame• In the following example, the page that will appear

in the top frame is the file fl-toc.html, and the page that will appear in the lower frame is fl-second.html.

<frameset rows="180,*"><frame src="fl-toc.html"/><frame src="fl-second.html"/>

</frameset>

The Frameset Document

• Contains the the <frameset>, <frame> and <noframes> elements

• The <frameset> and <frame> tags will create frames only if they are placed correctly into this document– In the frameset document, the <frameset>

element takes the place of the <body> element– The opening <frameset> tag follows the closing

</head> tag– The <frameset> tag must contain either the rows

attribute or the cols attribute, or both

Viewing Source with Framesets

• Click on the frame you want to view• Take the necessary steps to view source• The same instructions apply to printing from a

frame

The <noframes> Tag

• For user agents that cannot render frames• Displays alternative text or images

– In some ways, similar to the alt attribute for the <img> tag

• Code:<noframes>

<body> If you had a frames-capable browser, you would see frames here.

</body>

</noframes>

Targeting Frames with Hyperlinks

• Use the name attribute to name a frame, then target the frame name with hyperlinks

• The syntax for naming a frame is as follows:

<frame src="url" name="framename"/> • The following code names a frame:

<frame src="james.html" name="authors"/> • The following code targets this frame: <a href="james.html" target= "authors"> Visit James </a>

• If a user clicks the Visit James link, the James page will open in the Authors frame

Base Target

• A base target automatically sets a default target frame for all links in a page

• Created using the <base> tag• Code:

<base target="main" href="page.html"/>

• This code will cause all linked pages to open in the frame named Main

• The href attribute is optional

Borders, Margins and Scrolling

• To create borderless frames, add the frameborder attribute to the <frame> tag– frameborder= "1" causes borders to display

(the default)– frameborder= "0" hides borders

• Example: <frame src="home.html" name="main" frameborder="0"/>

Borders, Margins and Scrolling (cont’d)

• Frame margin width and height– The marginheight attribute designates the space,

in pixels, between the top and bottom margins– The marginwidth attribute designates the space,

in pixels, between the left and right margins

Borders, Margins and Scrolling (cont’d)

• Scrolling frames– The scrolling attribute to the <frame> tag controls

whether the scrollbar appears– The scrolling attribute values:

• "yes" — enables scrolling (the default)• "no" — disables scrolling• "auto" — allows the browser to decide

• Example: <frame src= "ex.html" name= "ex" frameborder="0" scrolling="no"/>

Inline Frames

• Inserts an HTML or XHTML document inside another

• Also called "floating frames"• Created with the <iframe> tag• The browser reads the <iframe> tag from the

file, then makes a separate request to the server for the embedded file

Inline Frames (cont’d)• Simple XHTML page with inline frame:

<h1>iFrame Example</h1><p><strong>This text is found in iframe.html</strong><p/>

<iframe src="embedded.html" scrolling= "yes">Your browser does not support frames.

</iframe>

<p><strong>This text is also found in iframe.html. </strong></p>

• The next slide shows the results of this code…

Inline Frames (cont’d)

Inline Frames (cont’d)

• Inline frames are useful for:– Web documents in which all content will

remain stable, except for one section (e.g., a weekly special) -- the frequently changed section can be an inline frame, which can be quickly modified when necessary without editing the entire page

– Documents that you prefer to embed in a page instead of placing on a separate page or providing as a download (such as text or a PDF)

Appropriate Use of Frames

• Frames are useful only in specific situations• Consider the following issues:

– Function – Appeal– Development challenges– Accessibility limitations– Usability with the browser Back button


Lesson 10:GUI HTML Editors

Objectives

• Identify types of GUI editors that automatically create HTML and XHTML code

• Identify specific features of GUI editors• Create a Web page using a GUI editor• Identify requirements for publishing a Web site

publishing to a Web server

Introduction to GUI HTML Editors

• Graphical user interface (GUI) HTML editor• Automatically generates HTML (or XHTML)

code• Developer inputs content as in a standard

word processor• Also known as WYSIWYG (What You See Is

What You Get) editors

Types of GUI Editors

• Page editors– Simpler– For smaller sites or non-collaborative work

• SeaMonkey Composer• Microsoft FrontPage Express

• Site management editors– Tools to manage pages and sites– Integrates with related applications– Designers and developers can collaborate to design, build

and manage Web site and Internet applications• Adobe Dreamweaver• Adobe GoLive• Microsoft FrontPage

GUI HTML Editor Functionality

• Features of GUI editors:– Templates and wizards– Text style options– Icon bars– Images– Hypertext links– HTML importing– Spelling check– Table creation– Publishing

W3C Authoring Tool Accessibility Guidelines

• The guidelines mandate:– The ability of the GUI editor to generate

proper code– The usability of the GUI editor by a disabled

person creating a Web page• Seven specific points

Creating Web Pages with a GUI Editor

• Coursebook labs use the toolbar, menus and functions of a GUI Web page editor

• SeaMonkey Composer

HTML Text Editors vs. GUI Editors

• HTML text editors (e.g., Notepad, Vi, Pico)– Easily include other code (e.g., JavaScript)– Readily modify code– Apply your HTML/XHTML knowledge and skills

• Drawbacks:– Typing code is time-consuming– People with disabilities may find manual entry

difficult or impossible– Require a higher degree of effort to create even a

simple page

GUI HTML Editors

• GUI HTML editors– Quick code creation– Facilitate collaboration– Spelling checker– Automatic publishing

• Drawbacks:– Rarely keep pace with the evolution of

HTML/XHTML standards– Code you enter manually may be ignored

Previewing Pages and Validating Code

• Most GUI editors make it easy to:– Preview pages in a browser– View source code– Validate code

• Validating HTML code – Specify the correct <!DOCTYPE> before

validating; the GUI HTML editor may not do this– Many tools provide useful validation tools– Some editors provide tools for disabled users

Web Site Publishing

• GUI HTML editors usually provide a publishing feature

• FTP is the standard protocol for Web page publishing– Stand-alone FTP clients– FTP client provided by GUI HTML editor

Publishing to a Test Web Server

• Before publishing pages to a public site, post them to a test server– Often called a staging server– Verify that pages work and render as expected– Verify that CGI script works as expected– Locate and repair dead links– Allow stakeholders to preview the site

• Test server configuration– Test server must be identical to production

server– Use the same Web server software and CGI

solution

Web Site Publishing (cont’d)

• Example settings for publishing with SeaMonkey Composer


Lesson 11:Advanced Web Technologies

Objectives

• Identify client-side and server-side scripting technologies

• Connect Web pages to databases• Use CSS to apply formatting to Web pages• Identify the benefits of Dynamic HTML (DHTML)• Define the function of the Document Object Model

(DOM) and its relationship to browsers• Compare the use of a service provider to hosting

your own Web site

Extending HTML

• Client-side and server-side scripting• Connecting to databases• Additional ways to apply Cascading Style

Sheets (CSS) • Dynamic HTML (DHTML)• Document Object Model (DOM)

Server-Side and Client-Side Languages

• Programming concepts– Not required knowledge, but essential

terminology is useful to understand• Programming statements

– if/then – if/then/else – do while– do until– break

Server-Side Languages• Attributes of server-side language:

– Code is executed by the Web server, not the Web browser

– Code executes because an interpreter has been installed and activated on the Web server

• Server-side scripts are used for various purposes: – Browser detection– Database connectivity– Cookie creation and identification– Logon scripts– Hit counters– File uploading and downloading

PHP Hypertext Preprocessor (PHP)

• An interpreted server-side scripting language for creating dynamic Web pages

• Embedded in HTML pages but usually executed on a Web server

• Example of PHP code:<?php$envVars = array("HTTP_USER_AGENT");foreach($envVars as $var){print "<html><head><title>PHP CGI Example</title></head><body><h1>Hello, World!</h1>Your user agent is:<strong>${$var}.</strong><br/></body></html>";}?>

Practical Extraction and Report Language (Perl)

• Another server-interpreted language• Older, but very popular• Example of Perl code:

#!/usr/bin/perl

use CGI qw/:all/;

$cgi_object = CGI::new();

print "Content-type: text/html\n\n";

print "<html>\n<head>\n<title>\nPerl CGI

Example\n</title>\n<body>\n<h1>Hello,

World!</h1>\nYour user agent is: <b>\n";

print $cgi_object->user_agent();

print "</b>.</html>\n";

Active Server Pages (ASP) using VBScript

• Microsoft’s original server-side scripting solution• Example of ASP code using VBScript:

<%@ LANGUAGE=vbscript %>

<html>

<head>

<title>ASP CGI Example</title>

</head>

<body>

<h1>Hello, World!</h1>

<%

path = Request.ServerVariables("PATH_INFO")

pagename = Request.ServerVariables("HTTP_HOST")

method = Request.ServerVariables("REQUEST_METHOD")

browser = Request.ServerVariables("HTTP_USER_AGENT")

user = Request.ServerVariables("REMOTE_ADDR")

C• A procedural language (relies upon subprograms to

accomplish a task in an application)• C is a time-honored language, usually used to create stand-

alone applications and operating systems (e.g., UNIX/Linux)• Can also be used for CGI• Example of C code:

#include <stdio.h>

int main()

{

printf("Hello, World!\n");

return 0;

}

• Note this code includes a reference to a library called stdio.h

C++

• Object-oriented language– A style of programming that links data to the

processes that manipulate it– May include procedural elements, but instead of

using subprograms to accomplish a task, will create an object that can then be manipulated throughout the program

– Once an object is created, it can be reused• Platform dependent:

– Must be compiled to a specific architecture (e.g, IBM-compatible, PowerPC)

Java

• Object-oriented• Compiled• Platform-independent

– Marketing: Write once, run anywhere– Reality: Write once, test everywhere

• Java can be used to write:– Stand-alone applications– Servlets– JavaServer Pages (JSP)

Visual Basic

• A compiled programming language developed by Microsoft Corporation

• Used for stand-alone applications and server-side Web applications

• Once only procedural, now has object-based elements

C#

• Object-oriented• Compiled• Platform-dependent• Used for Microsoft .NET program

Server Side Includes (SSIs)

• An instruction inside of an XHTML/HTML page that directs the Web server to perform an action

• An alternative to CGI• SSI instructions are in SGML• Can be used to:

– Place the results of a database query into a page– Execute other programs– Indicate the last time a document was modified– Insert footer text at the bottom of a page– Add the current date as a timestamp to a page

Server Side Includes (SSIs) (cont’d)

• Standard SSI file name extensions:– .shtml– .shtm

• SSI support in Web servers– Most Web servers include code that

enables SSI– However, the SSI feature may be disabled

• You may have to activate the feature• You may also have to define a MIME type

Client-Side Languages

• Issues with client-side languages– Some clients do not support JavaScript or

any other such scripting language– Users can deactivate script execution in

browsers that normally support it

JavaScript• Object-based• Adds interactivity to Web pages• Can also be used on the server side (Server-Side

JavaScript, SSJS)• On the client side, can be used to:

– Detect browsers– Create cookies– Create mouse rollovers

• JavaScript advantages– Platform-independent– Vendor-neutral– Relatively simple

JavaScript (cont’d)

• Can be placed in an HTML/XHTML document– Use the <script> tag

• Browser detection (using JavaScript or any other scripting technology) is useful for:– Presenting different versions of a site to

different browsers– Informing users in a corporate intranet to

upgrade their browsers to a supported version

– Ensuring accessibility to disabled users

JavaScript (cont’d)

• JavaScript and cookies– Cookies are stored on the hard drive– Cookies can be used to:

• Store passwords• Store user preferences• Choose which Web pages will be

displayed based on browser version

VBScript

• Microsoft’s answer to JavaScript• Can be used on the client side or the server

side• If used on the client side, only Internet

Explorer can render the script

Connecting to a Database

• For a database to work, you must:– Provide a way for the Web server and

database to recognize each other • Microsoft systems can use ODBC• Other methods include PHP scripts

– Provide permissions to the database so it can be read and/or written to

• You must also supply SQL scripts

CGI and Permissions

• Aside from improper coding, CGI scripts usually fail to execute because:– The Web server does not have the

permissions to execute files and scripts– The file or script used has incorrect

permissions, which prohibits the server from executing the file

ISPs and CGI

• If working with an Internet Service Provider (ISP), you generally need to:– Request CGI services– Request that the ISP:

• Enables execute permissions on your scripts

• Creates a directory that contains available CGI scripts

• Provides user name and passwords with enough permissions to work the system

N-Tier Applications

• When discussing databases, three elements are generally involved:– Data

• The database file or multiple database files– Business logic

• The SQL coding necessary to create relationships with the data stored in the database

– Presentation• The way that data and business logic are

presented on the user screen

N-Tier Applications (cont’d)

• In n-tier, all three database elements are separated

Styling Techniques with CSS

• Types of CSS include:– Linked style sheet

• The <style> and <font> tags in the HTML/XHTML file will override style sheets

– Inline style– Embedded style– Imported style sheet

Declaring an Inline Style

• The <span> tag– Can span multiple elements:

<span style="background: red">

CIW Associate </span>

• The style attribute– Used inside a tag:

<h1 style="color: magenta; font-family: arial"> CIW Associate </h1>

Embedded Styles

• An embedded style sheet uses the <style> tag within the <head> section:

<head>

<title>Certified Internet Webmaster</title>

<style>

h1 {color: magenta; font-family: arial; font-size: 20pt}

</style>

</head>

• The style will remain in force until overridden (e.g., by an inline style)

Imported Style Sheets

• Like a linked style sheet, refers to a separate file

• Created using the @import statement with the following syntax:

@import url(filename.css)

<head>

<title>Certified Internet Webmaster</title>

<style type="text/css">

@import url(import.css);

</style>

Style Sheets and Browser Compatibility

• Styles can cause problems with older browsers– Imported styles can especially cause

problems– Test your code in multiple browsers

• Most modern browsers are designed to support style sheets

Dynamic HTML (DHTML)

• An enhancement that provides animation, interactivity and dynamic updates in pages

• DHTML capabilities include:– Automatic adjustment of font sizes and

colors– Absolute positioning– New document content– Granular control over animation, audio and

video• Requires XHTML 1.0 or HTML 4.01, CSS, and a

way to access the Document Object Model (DOM)

The Document Object Model (DOM)

• A vendor-neutral, cross-platform application programming interface (API)

• Specifies how objects in a document can be referred to and manipulated through scripting languages

• Describes the elements, or objects, within a document rendered by a user agent (e.g., Web browser)

• A W3C standard

The Document Object Model (DOM) (cont’d)

• Accessing a browser's DOM– Use a scripting language

• JavaScript• VBScript

– DOM compliance• At one time, several DOMs, depending upon

browser manufacturers• W3C standardization

• Choosing a DOM-compliant browser• Undefined object error and the DOM• XHTML, the DOM and browser compatibility

Working with Web Service Providers

• Internet Service Provider (ISP)– Provides basic services

• Internet connectivity• Web server

– You need your own experts• Application Service Provider (ASP)

– Provides more advanced services• Messaging (i.e., e-mail)• Databases• Spam filtering• Telephony services

Costs of Using an ASP

• Often based on: – Amount of traffic– Amount of support you require

• Database connectivity• Per-service costs• Bandwidth• Customer support• Security

Co-Location, Dedicated Hosting and Virtual Servers

• Co-location• Dedicated hosting (co-hosting)• Virtual server

Comparing Options

• Configuring your own hosting solution– Benefits– Drawbacks

• Using an ISP– Benefits– Drawbacks

• Using an ASP– Benefits– Drawbacks

Communicating Needs and Negotiating Services

• Be prepared to detail your needs• Negotiate prices by providing information:

– Potential amount of traffic– Hard drive space needed– Database and CGI needs– Additional services (e.g., custom applications)

• As you work with ISP and ASP sales representatives, – Communicate your needs– Talk to the sales representative manager– Have your manager talk to the ISP/ASP manager

Information You Need from Your Service Provider

• Account information• IP addresses and DNS names of the server• Instructions about file and directory locations• The service provider’s contact information• Additional information:

– ISP/ASP security policies– ISP/ASP support procedures– Procedures for reporting problems– Average timelines for resolving problems


Lesson 12:E-Commerce Practices

Objectives

• Compare e-commerce to traditional commerce• Define e-commerce terms and concepts• Relate the concept of supply chain to e-commerce• Identify payment models used in e-commerce• Identify ways to protect private transactions• Identify issues related to working in a global

environment• Identify ways to build e-commerce relationships

using Web-based technology

Traditional Commerce vs. E-Commerce

• Similarities– Both aim to deliver a valued product or service– Both want to serve a large audience– Both strive to quickly deliver products and services

• Differences– E-commerce customers expect shorter fulfillment time– E-commerce customers must understand Web-based

technologies– E-commerce provides a global audience– E-commerce orders are processed without human

interaction or travel to a store location– E-commerce relies upon encryption for security

E-Commerce Models

• Business to consumer (B2C)– Targets consumers or end users, and sells

products and/or services• Amazon.com, small business sites

• Business to business (B2B)– Helps organizations to manage relationships

and transactions with other businesses• B2BExchange

• Consumer to consumer– Not a traditional B2C model

• eBay

Business and Internet Technologies

• Traditional businesses also use e-commerce– Not an either/or proposition– Web technologies make traditional

business more efficient• E-commerce concepts:

– Supply chain management– Enterprise resource planning (ERP)– B2B information sharing– Internet marketing

Supply Chain Management

• The ability to manage the process that generates a product and distributes it to customers– You must manage the process that begins

with raw materials and ends with a product delivered to a consumer

– Customer can be:• An end user• Another business that resells your

product after adding value to it, known as a Value Added Reseller (VAR)

Supply Chain Management (cont’d)

• Traditional supply chain management model

• Professionals running e-commerce sites increasingly need to understand this model

Supply Chain Management (cont’d)

• Supply chain management involves the following business aspects:– Product demand– Information flow– Finance management

• Essential supply chain management terms– Upstream and downstream– Capacity requirements plan– Additional terms found in coursebook

Enterprise Resource Planning (ERP)

• Use of software to create an automated plan for company operations

• ERP goal -- enhance communication among all company departments and divisions through software automation

• Accomplished through automation of tasks and reporting

• All company/organization departments involved• Common terms:

– Bolt-on system– Application programming interface (API)– Library

B2B Information Sharing with XML

• XML allows information to be indexed once, then used in many different applications and companies

• DTD limitations• XML schema

Internet Marketing

• More than technical knowledge is needed– Relationship to the business, including the

marketing department• Marketing terms

E-Commerce Information-Formatting Technologies

• When businesses need to exchange information, they must agree upon universal information-formatting methods

• The two most common ways to format information are:– Electronic Data Interchange (EDI)– Open Buying on the Internet (OBI)

Electronic Data Interchange (EDI)

• A universal method for formatting information so it can be transferred among organizations

• In place for over 20 years• Useful for exchanging:

– Invoices– Bills– Purchase orders– Inventory lists– Supply chain information

• EDI implementation and drawbacks• EDI and XML

Open Buying on the Internet (OBI)

• Designed as an alternative to EDI• Developed to target high-volume, low-cost

transactions– These account for almost 80 percent of

most companies' purchasing activities• OBI components• OBI transactions• OBI and EDI• OBI and XML

E-Commerce Payment Technologies

• Payment technologies include:– Electronic Funds Transfer (EFT)– Payment gateways– Secure Electronic Transactions (SET)– Open Trading Protocol (OTP)– Secure Sockets Layer (SSL) / Transport

Layer Security (TLS)

Electronic Funds Transfer (EFT)

• A generic term that describes the ability to transfer funds using computers rather than paper

• Also known as wire transfer• EFT systems must ensure:

– Confidentiality of payment information– Integrity of payment information– Merchant authentication– Interoperability

• Automated Clearing House (ACH)– Governed in the United States by the National

Automated Clearing House Association– Used in EFT

Payment Gateway

• Mediates between a merchant and a merchant bank

• Once the merchant receives payment from a customer, the merchant uses the payment gateway to transmit credit card information to the bank

• Responsibilities:– Forwarding information– Authenticating participants– Ensuring confidentiality– Ensuring data integrity

• Payment gateway companies

Secure Electronic Transactions (SET)

• Uses digital certificates to secure financial transactions

• Public and private keys ensure encryption, data confidentiality and non-repudiation

• Designed to allow both simple and complex transactions

• History of SET • SET example• SET vs. conventional transactions

Open Trading Protocol (OTP)

• Alternative to SET– An open standard (RFC 2802)– Used for both B2C and B2B– Often used with XML

• OTP features:– Provides trading protocol options to control the

way that the trade occurs– Provides a record of a particular trade– Supports real and virtual delivery of goods and

services (payment tracking)

Secure Sockets Layer (SSL) /Transport Layer Security (TLS)

• Not transaction methods• Used to secure transactions• Services provided:

– Authentication – Data confidentiality – Data integrity

SSL/TLS and Public Key Infrastructure (PKI)

• You need a certificate to enable host authentication before you can begin an SSL session

• Public Key Infrastructure (PKI)– A collection of individuals, networks and

machines that comprise the ability to authoritatively confirm the identity of a person, host or organization

PKI Elements

• PKI elements include:– Digital certificate– Certificate authority (CA) – Registration authority (RA) – Certificate server – Certification chain

Digital Certificates and X.509

• Digital certificates used in PKI conform to the ITU X.509 standard

• X.509 describes how to format digital certificates

PKCS Standards

• Public-Key Cryptography Standards (PKCS)– Used to store and transport certificates

• PKCS #7– Used to secure e-mail certificates

• PKCS #10– Used to generate a certificate request to a

certificate authority (CA)

Certificate Life Cycle

• Certificates usually have a limited life (e.g., 1 month, 2 years, 6 years)

• Life cycle helps reduce the likelihood of fraud• Terms include:

– Certificate policy– Certificate Practice Statement (CPS) – Certificate expiration – Certificate revocation– Certificate suspension– Certificate renewal– Certificate revocation list (CRL)– Online Certificate Status Protocol (OCSP)

Additional SSL/TLS Concepts

• The SSL/TLS handshake• Common applications• Beginning an SSL/TLS session

– Encryption begins after authentication– Issues:

• Different host name • Certificate expired • Certificate date not yet valid • Invalid certificate format • Certificate presented by the server not

signed by a recognized CA • Incompatible encryption settings

Working in a Global Environment • By placing your business on the Web, you

expand your audience to include anyone in the world with a browser and Internet access

• Consider the level to which you will accommodate potential customers from countries outside yours– Issues to consider include:

• Currency exchange rates• International shipping • Language concerns• Relationship management

Currency and Trade

• Each country (e.g., China) and economic block (e.g., European Union) uses its own currency

• Businesses and organizations must be able to:– Automatically calculate exchange rates for

the day of the transaction– Calculate taxes and tariffs on goods

• Taxes, tariffs and trade

International Shipping

• Consider the following issues:– Customs searches– Costs incurred by customs– Delays caused by customs– All tariffs

• Legal and regulatory issues

Language Concerns

• As you develop an e-commerce site, consider the following issues:– The language(s) used by the target

audience – The characters necessary (e.g.,

alphanumeric, mathematical or currency symbols)

• Character sets and languages– Computers can use different character sets– Unicode

Relationship Management

• Building trust – Quality customer service– Frequent contact

• Customer self-service– Automatic order tracking – Unattended choice – Order customization

Copyright © 2004 ProsoftTraining, All Rights Reserved. Site Development Foundations © 2007 Prosoft...

Documents

Transcript of Copyright © 2004 ProsoftTraining, All Rights Reserved. Site Development Foundations © 2007 Prosoft...