Transcript Document

Site Development
Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 1:
Introduction to
Web Site Development
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 1 Objectives
• Develop a business Web site
• Distinguish between using a text editor and
using a GUI markup language editor
• Identify Web page front-end design issues
• Identify Web page back-end resource issues
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Developing a Business Web Site
• Web sites can serve as a business's primary
means of advertising and marketing
• Brand – a concept or collection of symbols
associated with a product, service or person
– Should be simple
– Should be different
– Should be safe
– Should make a promise
– Should reflect the company's attributes
– Should reflect the company's personality
– Should appeal to the intended audience
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Creating Web Pages
• Web page authoring is becoming a standard skill
set for many careers
• You must know at least the following markup
languages:
– Hypertext Markup Language (HTML)
– Extensible HTML (XHTML)
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Additional Web Page Elements
• Web pages use more than HTML or XHTML -additional technologies include:
– Flash
– Java
– ActiveX
– Microsoft Silverlight
• You must also understand how Web pages
use:
– Databases
– Common Gateway Interface (CGI)
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Databases and Web Pages
• Databases can store information about
company inventory
• Databases can store customer information
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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)
– ColdFusion
– Python
– Django
– Ajax
– Ruby
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Graphical User Interface (GUI) 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 Expression Web
– Mozilla SeaMonkey
– Adobe GoLive
– KompoZer
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Front-End Issues
A Web page is an interface that should:
– 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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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 governmentimposed fines
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Disabilities Acts
• 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 Standards for the
Internet
– The Australian Government’s Guide to Minimum Web
Site Standards – Accessibility
– India’s Maharashtra Right to Information Act
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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 original statute
www.copacommission.org/commission/
original.shtml
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Verifying Web Page Accessibility
• Many tools available, including:
– W3C Page Validator
– Total Validator
– Cynthia Says
– STEP508
– Vischeck
– MAGpie
• One way you can help improve accessibility
is by adhering to the XHTML 1.0 standard
when you write Web page code
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Creative Design
and Branding Standards (cont'd)
• Design and branding standards – topics
for meetings include:
– Target markets
– Market messages
– Media choices
– Color combinations
– Sales strategies
– Technologies to use
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Creative Design
and Branding Standards (cont'd)
• Audience development techniques
include:
– Flash, Java
– Company logos
– Strategies developed by sales and
marketing
– Push and pull technologies
– Visitor tracking
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Portals
• A Web site that acts as a centralized access
point for additional Web sites
– Portal types:
• Vertical
• Horizontal
• Portal benefits:
– Directs users to the best sites
– Attracts users to products
– Improves brand name
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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)
– JSPWiki (www.jspwiki.org)
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Relational Database Manipulation
Terminology (cont’d)
• 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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
• GROUP – organizes results by a parameter
• SUM – adds numerical information within records
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 1 Summary
 Develop a business Web site
 Distinguish between using a text editor and
using a GUI markup language editor
 Identify Web page front-end design issues
 Identify Web page back-end resource issues
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 2:
Markup Language and
Site Development Essentials
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 2 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 Web site
development principles
• Plan Web site development
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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)
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
History of
Markup Languages (cont'd)
• Hypertext Markup Language (HTML)
– 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.01 flavors include:
– 4.01 Transitional – allows deprecated tags, not as strict
– 4.01 Strict – requires all container tags and does not
allow deprecated tags
– 4.01 Frameset – for use with frames
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
History of
Markup Languages (cont'd)
• Extensible Markup Language (XML)
– A subset of SGML, also a metalanguage
– XML describes data instead of formatting
– HTML or XHTML provides formatting and
document structure
• 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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
History of
Markup Languages (cont'd)
• Extensible Hypertext Markup Language
(XHTML)
– Combines HTML with XML
• XHTML 1.0 flavors include:
– Transitional – allows deprecated tags, not
as strict
– Strict – requires the exclusive use of CSS for
all formatting elements and does not allow
deprecated tags
– Frameset – for use with frames
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Communicating the Plan
• Use oral presentations and presentation aids,
including:
– Presentation software
– Overhead projection
– Whiteboards
– Easel and poster paper
– Charts
– Published handouts
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Considering Technical and
Non-Technical Concerns
• 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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Testing Pages in
Multiple Browsers
• As you develop Web pages, test them using
multiple Web browsers
• Different generations of the same browser may
interpret HTML somewhat differently
• Browser vendors also implement standards
differently
• Browser types include:
– Microsoft Internet Explorer
– Mozilla Firefox
– Google Chrome
– Opera
– Lynx
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
– Internet Service Providers (ISPs)
– Application Service Providers (ASPs)
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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 and plagiarism
• Avoid copyright infringement, trademark infringement
and plagiarism by:
– Reviewing content
– Obtaining express, written consent
– Creating reasonable deadlines
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 2 Summary
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 Web site
development principles
 Plan Web site development





Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 3:
XHTML Coding
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 3 Objectives
•
•
•
•
•
Define markup tags
Identify XHTML document structure tags
Prepare your development environment
Define and use style sheets
Use paragraph formatting and block-level
elements
• Use text-level elements
• Use ordered and unordered lists
• Use comments and good coding practices
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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"
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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)
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
What Constitutes a Tag?
• An element
• An attribute
• A value
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Document Structure Tags
• Every XHTML document must have the following
document structure components to render as
expected and validate:
– A <!DOCTYPE> tag
– The <html> </html> tag
– The <head> </head> tag
– Any <meta/> tags
– A <link/> tag reference to a style sheet
(recommended)
– The <title> </title> tag
– The <body> </body> tag
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Document Structure Tags (cont'd)
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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> </title> tags
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
The <body> tag
• All content to be displayed on the page
through the user agent must be enclosed
between the <body> </body> tags
– The <body> tag takes many attributes,
including:
• bgcolor
• background
• link
– Values accompany attributes, and must
be enclosed in quotation marks in XHTML
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Preparing Your
Development Environment
• Obtain a text editor
• Install multiple browsers
• Set file preferences
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Style Sheets
• 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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
CSS Terminology
•
•
•
•
•
Proper CSS structure
Inheritance
CSS and XHTML
Benefits of using CSS
Style sheets and compatibility
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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>
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Heading Levels
• Block-level element
• Heading levels 1
through 6
– <h1> </h1>
– <h2> </h2>
– <h3> </h3>
– <h4> </h4>
– <h5> </h5>
– <h6> </h6>
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Primitive Formatting with
the <pre> Tag
• The <pre> tag retains formatting on
preformatted text
• Can be used to retain tabular format,
spacing
• All text between <pre> </pre> tags will render
as formatted in the HTML file
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Text-Level Elements
• Bold, italic and underlined text
• Bold:
– <b> and <strong>
• Italic:
– <i> and <em>
• Underlined text:
– <u>
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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>
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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>
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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:
<!-- Text inside these brackets will not appear -->
• Use comments to annotate code or document
changes
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 3 Summary
Define markup tags
Identify XHTML document structure tags
Prepare your development environment
Define and use style sheets
Use paragraph formatting and block-level
elements
 Use text-level elements
 Use ordered and unordered lists
 Use comments and good coding practices





Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 4:
Horizontal Rules and
Graphical Elements
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 4 Objectives
• Add horizontal rules to your pages
• Incorporate image files as stand-alone
graphics
• Add special characters to XHTML pages
• Use the browser-safe color palette
• Use colors and tiled images for page
backgrounds
• Use the <font> tag to specify font information
• Consider Web design issues, including color
combinations and page layout
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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: align, size, width and noshade
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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)
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Comparing Image File Formats
Format
Transparency
Interlacing
Compression
Animation
GIF 89a
Yes
Yes
Yes
Yes
JPEG
(standard)
No
No
Yes
No
PNG
Yes
Yes
Yes
Yes
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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"/>
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Special Characters
• Uses code with ampersand (&) and semicolon (;)
• Special characters include:
– The "less than" symbol <
• Code: &lt;
– The "greater than" symbol >
• Code: &gt;
– The copyright sign ©
• Code: &copy; or &#169;
– The registered trademark sign ®
• Code: &reg; or &#174;
– The United Kingdom pound sterling sign: £
• Code: &#163;
• Non-breaking space: &nbsp;
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Specifying Colors
• Colors can be specified by name or by
Hexadecimal "Red Green Blue (RGB)" value
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Browser-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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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 link="colorNameOrCode">
• Specifying color of visited links:
– <body vlink="colorNameOrCode">
• Providing a background image:
– <body background="image.png">
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Web Design Issues
• Color combinations
– Popular color combinations
• Consider existing sites
– W3Schools (www.w3schools.com)
– Habitat for Humanity (www.habitat.org)
– Linux (www.linux.org)
• 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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 4 Summary
 Add horizontal rules to your pages
 Incorporate image files as stand-alone
graphics
 Add special characters to XHTML pages
 Use the browser-safe color palette
 Use colors and tiled images for page
backgrounds
 Use the <font> tag to specify font information
 Consider Web design issues, including color
combinations and page layout
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 5:
Hyperlinks
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 5 Objectives
•
•
•
•
•
•
•
Define and use the anchor tag
Reference full and partial URLs
Create local hyperlinks
Create external hyperlinks
Use images as hyperlinks
Create internal hyperlinks
Manage hyperlinks
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
The Anchor Tag
• The <a> tag creates a hyperlink
• 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>
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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:\inetpub\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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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:cals.evergreen.edu">Telnet
server.</a>
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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>
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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 ref="URL/filename.ext#AnchorName">
link text/image
</a>
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 5 Summary







Define and use the anchor tag
Reference full and partial URLs
Create local hyperlinks
Create external hyperlinks
Use images as hyperlinks
Create internal hyperlinks
Manage hyperlinks
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 6:
HTML Tables
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 6 Objectives
• Describe HTML table tags and attributes
• Use table and data alignment options
• Change the height and width of table
elements
• Specify column and row spanning
• Format content in tables
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Introduction to HTML Tables
• Present data that lends itself to tabular format
• In XHTML, do not use to structure entire pages
• Offers many formatting options
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Table Element Tags
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>
Table data
<td>…</td>
Optional; typically designates
the top row or left column. By
default, text in a header cell
will appear bold and
centered.
Required, unless <th> is being
used; designates table cell
contents.
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
The <table> Tag
• Table tag creates the table structure
• <table> </table> encloses all other table
elements
• Attributes include:
– align
– border
– cellpadding
– cellspacing
– width
– summary
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
The <tr> Tag
• Table row tag creates a row within a table
• Attributes include:
– align
– valign
– bgcolor
– style
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
The <td> Tag
• Table data tag designates table cell contents
• Attributes include:
– align
– valign
– colspan
– rowspan
– bgcolor
– height
– width
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Differences between
HTML and XHTML Tables
• The align and bgcolor attributes for the
<table> tag are deprecated in HTML 4.01
• Both attributes for the <table> tag can be
used in XHTML 1.0 Transitional, but not in
XHTML 1.0 Strict
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Working with Table Data
• Changing height and width of table elements
• Configuring table cells to span multiple
columns or rows
• Formatting content in tables
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 6 Summary
 Describe HTML table tags and attributes
 Use table and data alignment options
 Change the height and width of table
elements
 Specify column and row spanning
 Format content in tables
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 7:
Web Forms
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 7 Objectives
• Discuss the importance of CGI to Web forms
• Identify basic Web form tags
• Identify Web form elements for HTML and
XHTML
• Construct a Web form
• Test Web forms using a public test engine
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Diagramming a CGI Session
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Basic Tags for Creating Web Forms
• The <form> tag creates a user-input Web form
• 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
• Place the <input>, <select> and <textarea> tags
between <form> </form> tags to create form
fields
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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"/>
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
• Every form needs a means to submit data
<input type="submit"/>
<input type="reset"/>
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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"
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Check Boxes
• A group of non-exclusive choices
• Syntax:
<input type="checkbox" name="groupName"/>
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Web Forms, CAPTCHA and SEO
• Use CAPTCHA to reduce spam submissions
sent to your forms
• Consider search engine optimization (SEO)
issues when developing Web forms
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 7 Summary
 Discuss the importance of CGI to Web forms
 Identify basic Web form tags
 Identify Web form elements for HTML and
XHTML
 Construct a Web form
 Test Web forms using a public test engine
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 8:
Image Techniques
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 8 Objectives
• Create client-side image maps
• Define rectangle, circle and polygon areas as
hot spots in an image
• Define image transparency
• Define image interlacing
• Use Web-based technologies to create
animation
• Create and manage images
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Graphic Types
• Vector
– Graphics that use mathematical
coordinates with lines, curves and 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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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)
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Defining a
Client-Side Image Map
• Define a map, assign it a name, and provide
hot-spot coordinates
• Coordinates can be determined using an imageediting 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"/>
<area shape="shape" coords="coordinates" href="url"/>
<area shape="shape" coords="coordinates" href="url"/>
</map>
• Associate the image file with the map:
<img src="imagemap.gif" usemap="#mapname"/>
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Defining Hot Spots
• Three shapes for hot spots:
– Rectangle
– Circle
– Polygon
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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" />
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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" />
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Image with No Transparency
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Transparent PNG Image
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Image Interlacing (cont'd)
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
– Silverlight – Microsoft's answer to Flash
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Creating and Managing Images
• There are several options you can use to
obtain and manage images for use on your
Web pages:
– Create original images using imagecreation software
– Scan hard-copy images
– Use stock photographs
– Obtain photos from photo-sharing Web
sites
– Use photo management software to
organize, edit and share your images
• Consider search engine optimization (SEO)
issues when creating and using images
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 8 Summary
 Create client-side image maps
 Define rectangle, circle and polygon areas as
hot spots in an image
 Define image transparency
 Define image interlacing
 Use Web-based technologies to create
animation
 Create and manage images
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 9:
HTML Frames
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 9 Objectives
• Define frames and the purpose of the frameset
document
• Use the <frameset> and <frame> tags
• Create a frameset document
• 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
• Discuss the appropriate use of frames
• Consider search engine optimization (SEO) issues
when using frames
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Columns Example
• This frameset was created by the following
code: <frameset cols="35%,65%"> </frameset>
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Rows Example
• This frameset was created by the following
code: <frameset rows="180,*"> </frameset>
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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 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>
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Viewing Source with Framesets
• Click on the frame you want to view
• Take the necessary steps to view the source
code
• The same instructions apply to printing from a
frame
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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>
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Specifying a 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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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"/>
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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"/>
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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…
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Inline Frames (cont'd)
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Inline Frames (cont'd)
• Inline frames are useful for:
– Web documents in which all content will
remain static, 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)
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Frames and
Search Engine Optimization
• In general, using frames will lower your page's
rank in a search engine
• Many search engine spiders do not follow the
frame sources from the frameset page
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 9 Summary
 Define frames and the purpose of the frameset
document
 Use the <frameset> and <frame> tags
 Create a frameset document
 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
 Discuss the appropriate use of frames
 Consider search engine optimization (SEO) issues
when using frames
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 10:
GUI HTML Editors
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 10 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
• Compare HTML text editors with GUI editors
• Preview and validate code for pages created
with a GUI editor
• Identify requirements for publishing a Web site to
a Web server
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Types of GUI Editors
• Page editors
– Simpler
– For smaller sites or non-collaborative work
• KompoZer
• Mozilla SeaMonkey Composer
• 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 Expression Web
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
GUI HTML Editor Functionality
• Features of GUI editors:
– Templates and wizards
– Text style options
– Icon bars
– Images
– Hypertext links
– HTML importing
– Table creation
– Spelling check
– Publishing
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Creating Web Pages
with a GUI Editor
• Coursebook labs use the toolbar, menus and
functions of a GUI Web page editor
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Text Editors vs.
GUI HTML Editors
• HTML text editors (e.g., Notepad, WordPad, Vi,
Emacs)
– 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
– Requires a higher degree of effort to create
even a simple page
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Text Editors vs.
GUI HTML Editors (cont’d)
• 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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Web Site Publishing (cont'd)
• Example settings for publishing with KompoZer
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 10 Summary
 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
 Compare HTML text editors with GUI editors
 Preview and validate code for pages
created with a GUI editor
 Identify requirements for publishing a Web site
to a Web server
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 11:
Advanced Web Technologies
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 11 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
Discuss how to develop Web pages for PDAs and smart
clients
Define Web application frameworks
Create aliases with TinyURL
Use advanced "Web 2.0" technologies to create Web
pages
Compare the use of a service provider to hosting your
own Web site
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Extending HTML
• Client-side and server-side scripting
• Additional ways to apply Cascading Style
Sheets (CSS)
• Dynamic HTML (DHTML)
• Web pages for PDAs and smart clients
• Web application frameworks
• Aliases with TinyURL
• Advanced Web technologies made possible
through Web 2.0 and Ajax
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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>
";
}
?>
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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";
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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")
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
The C Language
• A procedural programming language (relies upon
subprograms to accomplish a task in an application)
• C is a time-honored language, usually used to create standalone applications and operating systems (e.g., Linux/UNIX)
• 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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
C++
• Object-oriented programming 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)
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Java
• Object-oriented programming language
• 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)
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Visual Basic
• A compiled programming language
developed by Microsoft Corporation
• Used for stand-alone applications and serverside Web applications
• Once only procedural, now has object-based
elements
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
C#
•
•
•
•
Object-oriented programming language
Compiled
Platform-dependent
Used for Microsoft .NET program
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
JavaScript
• Object-based scripting language
• 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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
N-Tier Applications (cont'd)
• In n-tier, all three database elements are
separated
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Declaring an Inline Style
• The <span> tag
– Can span multiple elements:
<span style="background: red">
CIW Web Foundations Associate </span>
• The style attribute
– Used inside a tag:
<h1 style="color: magenta; font-family: arial">
CIW Web Foundations Associate </h1>
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Embedded Styles
• An embedded style sheet uses the
<style> tag within the <head> section:
<head>
<title> CIW Web Foundations Associate </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)
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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> CIW Web Foundations Associate </title>
<style type="text/css">
@import url(import.css);
</style>
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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)
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Developing Web Pages
for PDAs and Smart Clients
• When you develop a Web site for viewing on
mobile devices:
– Keep your Web pages simple and
uncluttered
– Prioritize your content
– Optimize your site to a smaller screen size
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Web Application Frameworks
• Web application framework – a set of
software tools or code that is commonly used
in the creation and management of online
applications
• Popular Web application frameworks:
– Django
– Ruby on Rails
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Creating Aliases with TinyURL
• TinyURL – a free Web service that generates
short aliases for long URLs
• Short URL aliases are useful because they are
easier to remember and type
• Short URL aliases are subject to linkrot
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Working with
Advanced Web Technologies
• Web 2.0 – changing trends in the use of WWW
technology and Web design that have led to
the development of information-sharing and
collaboration capabilities
• Ajax – enables Web applications to interact
with users in much the same way they do with
desktop applications
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Browsers as Application
Delivery Platforms
• Access to hosted applications and services on Web
sites that enable you to perform computing tasks
without the need to download and install any software
• Cloud computing – a computing paradigm in which
users are able to access software and services over
the Internet instead of from their desktops
• Software as a Service (SaaS):
– Another term for cloud computing
– The software cannot be downloaded or owned by
the end user
– The software becomes available as a service either
for free or for a fee
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Browsers as Application
Delivery Platforms (cont'd)
• Advantages
– Flexibility
– Scalability
– Cost reduction
• Disadvantages
– Connectivity
– Speed
– Lockout
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Personalizing a Web Page
with Third-Party Applications
• The functionality and usability of your Web
page can dramatically increase without the
need for you to create programs
• Adding such applications may slow page
rendering speeds and can easily be overused
• Example: iGoogle Gadgets
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Web Feeds
• Web feed – a data format for delivering Web
content that is updated frequently
• Content syndication
– RSS (Really Simple Syndication, RDF Site
Summary or Rich Site Summary)
– Atom
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Podcasts
• Podcast – the use of audio or video digitalmedia files that are distributed through Web
feeds to subscribed users
– Similar to an RSS feed
– Podcast files can be syndicated, subscribed
to and downloaded automatically
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Typosquatting
• Typosquatting – an unethical practice in
which a typosquatter capitalizes on typing
mistakes that users make when entering the
URL of a Web site
• Also known as URL hijacking
• Typosquatters frequently use their alternative
sites to distribute adware, spyware, viruses or
other types of malware
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Hosting and 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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Comparing Options
• Configuring your own hosting solution
– Benefits
– Drawbacks
• Using an ISP
– Benefits
– Drawbacks
• Using an ASP
– Benefits
– Drawbacks
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Co-Location, Dedicated Hosting and
Virtual Servers
• Co-location
• Dedicated hosting (co-hosting)
• Virtual server
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
• Application development
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Negotiating Web Services and
Communicating Needs
• 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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Information You Need from
Your Service Provider
•
•
•
•
•
Account information
IP addresses and DNS names of the server
Instructions about file and directory locations
Service provider's contact information
Additional information:
– ISP/ASP security policies
– ISP/ASP support procedures
– Procedures for reporting problems
– Average timelines for resolving problems
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 11 Summary
 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
 Discuss how to develop Web pages for PDAs and
smart clients
 Define Web application frameworks
 Create aliases with TinyURL
 Use advanced "Web 2.0" technologies to create Web
pages
 Compare the use of a service provider to hosting your
own Web site
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 12:
E-Commerce Practices
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 12 Objectives
• Compare e-commerce to traditional commerce
• Discuss the three e-commerce models
• Discuss common business operations that use Web
technologies
• Identify the relationship between Internet marketing
and search engine optimization (SEO)
• Discuss e-commerce information-formatting
technologies
• 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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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 Webbased 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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
• B2Bxchange
• Consumer to consumer (C2C)
– Consumers buy and sell products or services
to other consumers
• eBay, Craigslist
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Supply Chain Management (SCM)
• 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)
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Supply Chain Management (SCM) (cont'd)
• Traditional supply chain management model
• Professionals running e-commerce sites
increasingly need to understand this model
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Supply Chain Management (SCM) (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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
B2B Information Sharing
with XML
• XML allows information to be indexed once,
then used in many different applications and
companies
• DTD limitations
• XML schema
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Internet Marketing and
Search Engine Optimization (SEO)
• Marketing terms
• Internet marketing consists of:
– Search engine optimization (SEO)
– Pay per click (PPC)
– Web analytics
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Search Engine Optimization (SEO)
• SEO improves the volume and quality of
traffic to a Web site by structuring content to
improve search engine ranking
• An SEO expert must:
– Learn about and consider the factors that
search engines take into account as they
rank sites
– Try to create and edit Web pages
accordingly
• Common SEO tactics
• Writing quality Web copy
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Pay Per Click (PPC)
• PPC – list your site high in search engine
rankings by advertising on keywords that
describe your product or service
• You simply pay to have your page listed as
highly as possible
• Most Internet marketing campaigns combine
SEO and PPC strategies
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Web Analytics
• Web analytic types:
– On-site analytics
• Use trend analysis software to analyze
server logs
• Tag pages
– Off-site analytics
• Identify the size of your market
• Identify competitors
• Determine your market penetration
• Conduct surveys
• Consult market research sources
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Complete Internet Marketing
• A successful marketing campaign involves:
– A competent leader
– A team effort
– Continued effort
– Follow-up
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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)
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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)
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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)
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Secure Sockets Layer (SSL) /
Transport Layer Security (TLS)
• Not transaction methods
• Used to secure transactions
• Services provided:
– Authentication
– Data confidentiality
– Data integrity
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
PKI Elements
• PKI elements include:
– Digital certificate
– Certificate authority (CA)
– Registration authority (RA)
– Certificate server
– Certification chain
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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)
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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 destruction
– Certificate revocation list (CRL)
– Online Certificate Status Protocol (OCSP)
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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 differences
• International shipping
• Language concerns
• Relationship management
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
International Shipping
• Consider the following issues:
– Customs searches
– Costs incurred by customs
– Delays caused by customs
– All tariffs
• Legal and regulatory issues:
– A product you sell legally in one country
may be illegal in another
– A product you sell may be heavily
regulated
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Relationship Management
• Building trust
– Quality customer service
– Frequent contact
• Customer self-service
– Automatic order tracking
– Unattended choice
– Order customization
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Lesson 12 Summary
 Compare e-commerce to traditional commerce
 Discuss the three e-commerce models
 Discuss common business operations that use Web
technologies
 Identify the relationship between Internet marketing
and search engine optimization (SEO)
 Discuss e-commerce information-formatting
technologies
 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
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved
Site Development Associate












Introduction to Web Site Development
Markup Language and Site Development Essentials
XHTML Coding
Horizontal Rules and Graphical Elements
Hyperlinks
HTML Tables
Web Forms
Image Techniques
HTML Frames
GUI HTML Editors
Advanced Web Technologies
E-Commerce Practices
Site Development Associate
Copyright © 2010 Certification Partners, LLC -- All Rights Reserved