Transcript sda_v2.0_slideshow - Marion County Public Schools

Site Development
Associate v2.0
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 1:
Markup Language and
Site Development Essentials
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 1 Objectives
•
•
•
•
•
•
•
•
•
Discuss Web page creation
Discuss mobile and cloud issues
Introduce text editors and markup languages
Introduce graphical user interface (GUI) editors
Discuss the history of markup languages
Introduce the HTML Web development trifecta
Discuss Web site development principles
Introduce hosting and Web service providers
Introduce the Habitat for Humanity Web site
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Creating Web Pages
• Web page authoring is becoming a standard skill set
for many careers
• You must know:
– Hypertext Markup Language (HTML)
– Cascading Style Sheets (CSS)
• Additional technologies include:
– Flash
– Java
– ActiveX
– Microsoft Silverlight
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Mobile and Cloud Issues
• Web site development has been impacted by:
– Smartphones, tablets and other mobile devices
– The cloud
• Cloud services
– Do not require knowledge of HTML to create Web
pages
– Users simply "point and click" the available Web site
tools to design a personalized page
Copyright © 2012 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 files, you must:
– Save the text as plaintext
– Save the file using either the .html or .htm file
name extension
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Graphical User Interface (GUI) Editors
• GUI HTML editors:
– Create HTML 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
– Bluefish
Copyright © 2012 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
Copyright © 2012 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)
Copyright © 2012 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 Strict – requires all container tags and does not allow
deprecated tags
– 4.01 Transitional – allows deprecated tags, not as strict
– 4.01 Frameset – for use with frames
Copyright © 2012 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
• Extensible Hypertext Markup Language (XHTML)
– Combines HTML with XML
– XHTML allows HTML to become XML-compliant
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
History of
Markup Languages (cont'd)
• HTML5
– The latest version of HTML under development by
the W3C
– Provides modern requirements for the Internet with
fewer plug-ins
Copyright © 2012 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
The HTML Web Development Trifecta:
HTML5, CSS and JavaScript
• The future of Web design lies within three technologies:
– HTML5
– Cascading Style Sheets (CSS)
– JavaScript
• These technologies used together provide Web pages
that easily adapt to smartphones, tablets, gaming
devices and smart TVs, as well as to traditional PCs
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Developing Accessible Web Pages
• 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Developing Accessible Web Pages (cont'd)
• Web Content Accessibility Guidelines (WCAG)
– Provided by the W3C Web Accessibility Initiative
(WAI)
– A product of worldwide cooperation
• Section 508 of the Rehabilitation Act
– 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Verifying Web Page Accessibility
• Many tools available, including:
– W3C Page Validator
– Total Validator
– Cynthia Says
– Vischeck
– MAGpie
• Adopt a single W3C standard and apply it
consistently throughout your site
Copyright © 2012 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
Copyright © 2012 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
• Wireframing
– The process of developing an outline for a Web
presence
• Determining audience and message
• Validating design issues
– Consider issues such as central message, fonts,
images, colors, ethnic and cultural diversity, and
common color schemes
Copyright © 2012 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
Copyright © 2012 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Communicating the Web Site Plan
• Use oral presentations and presentation aids,
including:
– Presentation software
– Overhead projection
– Whiteboards
– Easel and poster paper
– Charts
– Published handouts
Copyright © 2012 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
Copyright © 2012 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
Copyright © 2012 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
Copyright © 2012 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
Copyright © 2012 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
Copyright © 2012 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
Copyright © 2012 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
Copyright © 2012 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
Copyright © 2012 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
• Cloud service provider
– Provides more advanced services
• Software-as-a-service (SaaS)
• Backup services and nearly unlimited hard drive space
• Advanced Web and database connectivity
• Enterprise resource planning (ERP)
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Co-Location, Dedicated Hosting
and Virtual Servers
• Co-location
• Dedicated hosting (co-hosting)
• Virtual server
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Costs of Using a Cloud Service
• Costs associated with a cloud service include:
– Database connectivity
– Per-service costs
– Bandwidth
– Customer support
– Security
– Application development
Copyright © 2012 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)
Copyright © 2012 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
The 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 1 Summary









Discuss Web page creation
Discuss mobile and cloud issues
Introduce text editors and markup languages
Introduce graphical user interface (GUI) editors
Discuss the history of markup languages
Introduce the HTML Web development trifecta
Discuss Web site development principles
Introduce hosting and Web service providers
Introduce the Habitat for Humanity Web site
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 2:
HTML5 Coding
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 2 Objectives
•
•
•
•
•
Define elements and markup tags
Identify HTML5 document structure tags
Define Web site file structures
Prepare your development environment
Use paragraph formatting and block-level
elements
• Use text-level elements
• Use ordered and unordered lists
• Use comments and good coding practices
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Elements and Markup Tags
• Markup tags are element names enclosed in
angle brackets, or wickets
– Tags embed the 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 elements, markup tags and
standard text is loosely referred to as either
"code" or "markup"
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Container Tags
• Container tags contain page text between an opening
and a closing tag, as shown
• Container tags are also known as non-empty tags
• HTML encourages the use of container or non-empty
tags
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Empty Tags
• An empty tag does not use a closing tag
• An empty tag does not directly format a specified block
of text, and therefore one tag can execute the
instruction
• An empty tag can be written with a slash after the
element to become a stand-alone non-empty tag
(e.g., <br/>)
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
What Constitutes a Tag?
• An element – provides the main instruction of the
tag
• An attribute – specifies a quality or describes a
certain aspect of the element
• A value – gives value to the element and its
attribute
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Document Structure Tags
• HTML5 documents usually contain most of the
following document structure components:
– A <!DOCTYPE> declaration
– 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Are HTML Tags
Case-Sensitive?
• HTML tags are not case-sensitive, but older
XHTML tags are case-sensitive
• It is recommended that you write code in
lowercase letters to ensure consistency,
compatibility and conformance
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Document Type Declaration
(<!DOCTYPE>)
• Describes the markup language and version of
your code
• Placed at the top of the document
• If you do not specify a <!DOCTYPE> declaration,
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> declaration
• <!DOCTYPE html> is used for HTML5 files
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
The <html> and <head> Tags
• The <html> </html> tags encompass all other
HTML elements in the document
• 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
Copyright © 2012 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 no longer has attributes with
HTML5
• The previous formatting attributes have been
replaced by CSS and the inline CSS style
attribute
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Web Site File Structure
• When creating a Web
page, you must consider
the site’s file structure
• Your HTML and image
files will be uploaded to
a server eventually, so
it is always good practice
to organize your files
as you create them
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Preparing Your
Development Environment
• Obtain a text editor
• Install multiple browsers
• Set file preferences
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Paragraph Formatting
and Block-Level Elements
• Block-level elements
– Elements that can affect entire paragraphs or
multiple paragraphs
• The <p> tag
• The <br/> tag
• Text-level elements
– Elements that can affect as little as a single
character or word
• <strong> or <em>
Copyright © 2012 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>
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Tag Nesting in Markup
• Placing one pair of tags between another
– Proper: <h1> <em> ... </em> </h1>
– Improper: <h1> <em> ... </h1> </em>
• Improper: The <em> 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
Copyright © 2012 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Indenting and Centering Text
• Use an inline CSS style attribute in the paragraph
tag to:
– Center text
– Justify items to the right or left on a page
• The <blockquote> tag also centers and indents a
block of text
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Text-Level Elements
• Bold and italic text
– <strong> for bold text
– <em> for italic text
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Phrase Elements and
Font Style 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
The <code>,
<kbd> and <samp> Tags
• All make text appear in a fixed-width font in an
HTML-compliant browser window
• Text-level phrase elements, their usage and their
appearances:
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
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>
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lists (cont'd)
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Good Coding Practice
• Write code for forward-compatibility:
– Close all tags
– Use lowercase letters within tags
– Surround attribute values with quotation marks
• Create universal markup that applies W3C standards
consistently and thus renders consistently across most
or all browsers
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Good Coding Practice (cont’d)
• 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 2 Summary








Define elements and markup tags
Identify HTML5 document structure tags
Define Web site file structures
Prepare your development environment
Use paragraph formatting and block-level elements
Use text-level elements
Use ordered and unordered lists
Use comments and good coding practices
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 3:
Cascading Style Sheets (CSS)
and Graphical Elements
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 3 Objectives
•
•
•
•
•
•
•
•
Discuss Cascading Style Sheets
Separate content in HTML
Incorporate images in Web pages
Discuss HTML entities
Use the browser-safe color palette
Use colors and images for page backgrounds
Specify font information
Consider Web design issues, including color
combinations and page layout
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Cascading 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Cascading Style Sheets (cont’d)
• CSS benefits include:
– Consistency
– Easy change management
• Currently, three standards exist for style sheets:
– Cascading Style Sheets (CSS1)
– Cascading Style Sheets 2 (CSS2)
– Cascading Style Sheets 3 (CSS3)
• HTML5 adopts CSS as the preferred way to format a
page
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Cascading Style Sheets (cont’d)
• CSS terminology:
– Selector – element to which designated styles are
applied
– Property – changes the way a selector renders in a
browser
– Value – defines a property
– Declaration – consists of a property and value
– Rule – consists of a selector, property and value
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Cascading Style Sheets (cont’d)
• Proper CSS structure – place the opening and closing
curly braces and each declaration on separate lines
• Inheritance – the style you define will flow, or cascade,
throughout the documents, unless another style
defined inside of a page specifically overrides it
• To apply CSS styles to HTML documents, you can:
– Declare an inline CSS style attribute
– Link to an external style sheet
– Create an internal style sheet
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Separating Content in HTML
• Create a horizontal rule using the <hr> tag:
– <h1> Horizontal Rules </h1>
<hr/>
Horizontal rules: Lines used to make visual divisions in your document.
• Use CSS to stylize horizontal rules
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Images in Web Pages
• Use the <img> tag to insert an image file
• The key attributes that are required in this tag are:
– src (abbreviation for source)
– alt (alternative text for the image if it cannot be
seen)
• Image file formats
– Graphics Interchange Format (GIF)
– Joint Photographic Experts Group (JPEG)
– Portable Network Graphics (PNG)
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Comparing Image File Formats
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Using the alt Attribute with Images
• The alt attribute specifies alternative text to
appear while the graphic is loading, or in place of
the graphic in non-graphical browsers
• Every image used in HTML5 is required to contain
the alt attribute with a corresponding value
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Combining Background
Images and Background Colors
• If you use a style sheet and specify both image
and color as a background, then the background
image will always render first
• If the image cannot be found, a background color
will then appear
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Aligning Images
Relative to Text
• Use CSS to align images to text
• Alignment options include:
– bottom
– middle
– top
– left
– right
Copyright © 2012 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
HTML Entities
• Uses code with ampersand (&) and semicolon (;)
• HTML entities 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;
• Non-breaking space: &nbsp;
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Specifying Colors
• Colors can be specified by name or by
Hexadecimal "Red Green Blue (RGB)" value
Copyright © 2012 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Page Colors and Backgrounds
• Specifying color for a page background:
– add the background-color property to the body selector in
an external CSS file
• Specifying an image for a page background:
– add the background-image property to the body selector
• Specifying the color of text:
– Add the color property to the body selector
• Specifying the color of unvisited links:
– Use the <a:link> element
• Specifying the color of visited links:
– Use the <a:visited> element
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Specifying Font Information
• CSS allows you to change the size, color and
typeface of the text
• CSS supports many font-related selectors and
properties, including:
– font-family
– font-size
– color
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Web Design Issues
• Color combinations impose tone and mood
• Consider cultural and audience concerns
• Page layout guidelines:
– Be succinct
– Make sure that each page focuses on one topic
– Divide the page into three sections
– Include navigation aids
– Place comments in each section of code
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Web Design Issues (cont’d)
• Basic HTML5 structural elements of a Web page:
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Web Design Issues (cont’d)
• Page-layout methods to control the placement of Web
page elements when rendered in the browser:
– Fixed-width layout
– Liquid layout
• Relative path names
• White space, the <img> tag and HTML
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 3 Summary








Discuss Cascading Style Sheets
Separate content in HTML
Incorporate images in Web pages
Discuss HTML entities
Use the browser-safe color palette
Use colors and images for page backgrounds
Specify font information
Consider Web design issues, including color
combinations and page layout
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 4:
Hyperlinks
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 4 Objectives
•
•
•
•
•
•
Define and use the anchor element
Create local hyperlinks
Create external hyperlinks
Use images as hyperlinks
Create internal hyperlinks
Manage hyperlinks
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
The Anchor Element
• The <a> element creates a hyperlink
• The href attribute is used to specify the link's
hypertext reference, or the target of the link
• The syntax for using the anchor element to create a
link is as follows:
<a href="URL"> linked text or image (or both) </a>
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
The Anchor Element (cont'd)
• Examples of values for the URL when referencing external links:
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
The Anchor Element (cont'd)
• Various protocols you can specify in a hyperlink URL:
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
The Anchor Element (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 include:
– Text and images that disappear
– Successive Web page text that appears as a hyperlink
– Garbled code that appears on screen
– Code that will not validate due to a problem <a> tag
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Hyperlinks
• Types of hyperlinks include:
– Local hyperlink – a link you create from one file on
your local system to another file on your local
system
– External hyperlink – a link you create from a file on
your system to a separate file on the Internet
– Internal link – a link you create to target other areas
within the same page
• You can create a hyperlink from an image by
surrounding the image tag with opening and closing
anchor tags
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Creating Internal Links
• Creating an internal link requires two steps:
– Use the anchor element, <a>, with the id attribute
to define an area as a target (the bookmark or
anchor)
– In another portion of the page, create the link that
points to the bookmark using the anchor element
with the hypertext reference (href) attribute
Copyright © 2012 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 accessible
• Hyperlinks need to be managed
– Over time, URLs (and content) change
– "Dead" links frustrate users
• Use automated link-checking software to validate
hyperlinks
• Manually check links to verify relevance of linked
content
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 4 Summary






Define and use the anchor element
Create local hyperlinks
Create external hyperlinks
Use images as hyperlinks
Create internal hyperlinks
Manage hyperlinks
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 5:
HTML Tables
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 5 Objectives
•
•
•
•
•
•
Describe HTML table elements and attributes
Describe CSS properties for tables
Use table and data alignment options
Change the height and width of table elements
Specify column and row spanning
Compare HTML tables with CSS page structure
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Introduction to HTML Tables
• Present data that lends itself to tabular format
• In HTML, do not use tables to structure entire pages
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Table Element Tags
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
CSS Properties
for All Table Elements
Copyright © 2012 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 change the alignment for an individual cell or
for an entire row by using CSS properties:
– text-align to specify horizontal alignment
– vertical-align for vertical alignment
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Height and Width
of Table Elements
• You can change the height or width of the table
and individual cells by using the height property of
the CSS table rule
• You can specify:
– Pixel values
– Percentage values
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Column and Row Spanning
• You can specify that a column or row span two or more
cells using the following attributes:
– colspan to specify that a column span across
multiple cells
– rowspan to specify that a row span across multiple
cells
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
HTML Tables vs. CSS Page Structure
• HTML tables were formerly used to create content structure for
entire Web pages
• The W3C recommends using HTML5 with CSS to structure a Web
page
• HTML5 structural elements of Web page:
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 5 Summary






Describe HTML table elements and attributes
Describe CSS properties for tables
Use table and data alignment options
Change the height and width of table elements
Specify column and row spanning
Compare HTML tables with CSS page structure
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 6:
Web Forms
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 6 Objectives
•
•
•
•
Discuss the importance of CGI to Web forms
Discuss HTML5 and Web forms
Identify basic Web form tags
Construct a Web form using Web form fields
Copyright © 2012 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
Copyright © 2012 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Diagramming a CGI Session
Copyright © 2012 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 humanreadable format, or enter the data into a database
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Applied Example: FormMail
• FormMail is popular because:
– It is available free of charge from Matt's Script
Archive (MSA)
– It is written in Perl, which allows developers to use a
free CGI interpreter
– It is easy to customize
• You install the script onto a Web server and refer to it
in your forms
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
HTML5 and Forms
• The main differences in form creation in HTML5 vs.
HTML 4.01 are:
– Cascading Style Sheets (CSS) are used for all form
styles
– Advanced features are now available, such as new
<form> elements and attributes, and <input> types
for better control of validation and input control
• Many of the new elements and attributes are not
supported by most browsers, even the ones that
support HTML5
Copyright © 2012 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
Copyright © 2012 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Forms and the name Attribute
• All form field elements share an attribute: name
– Identifies information you receive from a user
and associates it with a value you specify
– Helps organize user input
Copyright © 2012 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
Copyright © 2012 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"/>
Copyright © 2012 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"/>
Copyright © 2012 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"
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Check Boxes
• A group of non-exclusive choices
• Syntax:
<input type="checkbox" name="groupName"/>
Copyright © 2012 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
Copyright © 2012 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
Copyright © 2012 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 6 Summary




Discuss the importance of CGI to Web forms
Discuss HTML5 and Web forms
Identify basic Web form tags
Construct a Web form using Web form fields
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 7:
Video, Audio and
Image Techniques
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 7 Objectives
•
•
•
•
•
•
•
•
•
Use the <video> element to embed video in Web pages
Use the <audio> element to embed audio in Web pages
Define graphic types
Create client-side image maps
Define image transparency
Define image interlacing
Use Web-based technologies to create animation
Explore mobile device issues with animation and plug-ins
Create and manage images
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
The <video> Element
• Video elements and attributes:
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
The <video> Element (cont’d)
• HTML5-compliant browser support for HTML5 video
formats and codecs:
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
The <audio> Element
• The <audio> element allows developers a standard
method to embed audio into Web pages
• The controls attribute identifies the default audio
controls: play, pause, volume, etc.
• Multiple sources can be identified with the <source>
element to ensure various audio formats are supported
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
The <audio> Element (cont’d)
• HTML5-compliant browser support for HTML5 audio formats:
• Additional <audio> and <video> attributes:
Copyright © 2012 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
Copyright © 2012 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)
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Defining a
Client-Side Image Map
• Define a map, assign it a name, and provide
hot-spot coordinates
• Refer to the image map by map name:
<map name="mapname">
<area shape="shape" coords="coordinates" href="url" alt="description"/>
<area shape="shape" coords="coordinates" href="url" alt="description"/>
<area shape="shape" coords="coordinates" href="url" alt="description"/>
</map>
• Associate the image file with the map:
<img src="imagemap.gif" usemap="#mapname"/>
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Defining a 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
<area shape="rect" coords="x1,y1,x2,y2" href="url" alt="description"/>
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Defining a Circle Hot Spot
• Circles are defined by two coordinates and a radius
<area shape="circle" coords="x1,y1,radius" href="url " alt="description"/>
• The pair of coordinates specifies
the circle's center
• A third number specifies the
desired radius, or half-width,
of the circle
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Defining a Polygon Hot Spot
• 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
<area shape="poly" coords="x1,y1,x2,y2,...xn,yn" href="url " alt="description"/>
Copyright © 2012 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Image with No Transparency
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Transparent PNG Image
Copyright © 2012 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Image Interlacing (cont'd)
Copyright © 2012 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
– Java applets – requires a Java interpreter to view
– Scalable Vector Graphics (SVG) – an open standard
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Mobile Device Issues
with Animation and Plug-Ins
• As you create animated images, remember the
following issues:
– Animation techniques are often proprietary
– Plug-ins drain system resources
– Animation may seem useful and interesting, but it is
frequently overused
– Animated images can limit accessibility
Copyright © 2012 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 image-creation
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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 7 Summary
•
•
•
•
•
•
•
•
•
Use the <video> element to embed video in Web pages
Use the <audio> element to embed audio in Web pages
Define graphic types
Create client-side image maps
Define image transparency
Define image interlacing
Use Web-based technologies to create animation
Explore mobile device issues with animation and plug-ins
Create and manage images
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 8:
Extending HTML
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 8 Objectives
•
•
•
•
•
•
•
•
•
•
Identify client-side and server-side scripting technologies
Identify the benefits of Dynamic HTML (DHTML)
Define the function of the Document Object Model (DOM)
Define HTML5 APIs
Use the HTML5 canvas API
Use the HTML5 offline Web application API
Use the HTML5 geolocation API
Use the HTML5 drag-and-drop API
Define Web application frameworks
Connect Web pages to databases
Copyright © 2012 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
Copyright © 2012 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
Copyright © 2012 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>
";
}
?>
Copyright © 2012 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";
Copyright © 2012 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")
Copyright © 2012 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 stand-alone
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 that this code includes a reference to a library called stdio.h
Copyright © 2012 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 computer type (e.g.,
IBM-compatible machines that run Windows)
Copyright © 2012 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)
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Visual Basic
• A compiled programming language developed by
Microsoft Corporation
• Used for stand-alone applications and server-side
Web applications
• Once only procedural, now has object-based
elements
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
C#
•
•
•
•
Pronounced "C sharp"
Object-oriented programming language
Compiled
Platform-dependent
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Server Side Includes (SSIs)
• An instruction inside of an 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
Copyright © 2012 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
Copyright © 2012 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
Copyright © 2012 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
JavaScript (cont'd)
• Can be placed in an HTML 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
Copyright © 2012 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
Copyright © 2012 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
Copyright © 2012 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
Copyright © 2012 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
Copyright © 2012 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
• The W3C has created a standard DOM
• Choosing a DOM-compliant browser
• Undefined object error and the DOM
• HTML, the DOM and browser compatibility
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
HTML5 APIs
• HTML5 APIs are the best examples of DHTML
• HTML5 APIs utilize multiple technologies to extend the
functionality of HTML :
– HTML5
– Cascading Style Sheets (CSS)
– JavaScript access to the Document Object Model
(DOM)
• HTML5 APIs are used to create apps for mobile
devices, not just Web pages
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Canvas
• Provides a place on a Web page (a "canvas") where
developers can display graphics, animation, video and
games "on the fly" without the need for a plug-in
• Draw objects on a canvas using JavaScript
• The canvas element is defined in HTML with the
<canvas></canvas> tag
• The canvas element has only two attributes: height and
width
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Offline Web Application
• Allows users to interact with Web sites when a network
connection is unavailable
• Web pages will store data locally within the user’s
browser, utilizing the application cache
• Utilizing a manifest, which tells the browser which files
to store locally, is what allows the user to continue
working without the connection
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Geolocation
• Used to locate a user’s geographical position
• Geolocation can:
– Determine a user’s current position
– Monitor the user’s location
– Update any changes to that location
• Geolocation displays the user’s information in a
localized map
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Drag-and-Drop Functionality
• Allows a user to move an item from one place on the
page to another by dragging it across the screen and
dropping it in a different location
• The drop zone is the place where dragged items can
be placed
• There are two kinds of drag-and-drop functionality:
– Dragging files from the user’s computer onto a Web
page
– Dragging items to a different location within the
same page
Copyright © 2012 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
Copyright © 2012 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
– Provide permissions to the database so it can be
read and/or written to
Copyright © 2012 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
Copyright © 2012 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 names and passwords with
enough permissions to work the system
Copyright © 2012 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
N-Tier Applications (cont'd)
• In n-tier, all three database elements are separated
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 8 Summary
•
•
•
•
•
•
•
•
•
•
Identify client-side and server-side scripting technologies
Identify the benefits of Dynamic HTML (DHTML)
Define the function of the Document Object Model (DOM)
Define HTML5 APIs
Use the HTML5 canvas API
Use the HTML5 offline Web application API
Use the HTML5 geolocation API
Use the HTML5 drag-and-drop API
Define Web application frameworks
Connect Web pages to databases
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 9:
GUI HTML Editors and
Mobile Web Sites
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 9 Objectives
•
•
•
•
•
•
•
•
•
•
Identify types of GUI editors
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
Develop Web pages for mobile devices
Compare mobile apps with mobile Web sites
Convert a Web site for mobile users
Use "Web 2.0" technologies to create Web pages
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Introduction to GUI HTML Editors
• Graphical user interface (GUI) HTML editor
• Automatically generates HTML code
• Developer inputs content as in a standard word
processor
• Also known as WYSIWYG (What You See Is
What You Get) editors
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Types of GUI Editors
• Page editors
– Allow you to create Web pages using your mouse and a
toolbar
– Page editor software include:
• Virtual Mechanics WebDwarf
• Mozilla SeaMonkey
• Site management editors
– Allow you to create Web pages and to manage sites
– Site management editor software include:
• Adobe Dreamweaver
• Microsoft Expression Web
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
GUI HTML Editor Functionality
• Features of GUI editors:
– Templates and wizards
– Text style options
– Icon bars
– Image insertion
– Hypertext link creation
– HTML importing
– Table creation
– Spelling check
– Publishing
Copyright © 2012 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Creating Web Pages
with a GUI Editor
• Coursebook labs 9-1 through 9-7 will familiarize
you with the toolbar, menus and functions of a
GUI Web page editor, KompoZer
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
HTML Text Editors
vs. GUI Editors
• HTML text editors (e.g., Notepad, WordPad, Vi, Emacs)
– Easily include other code (e.g., JavaScript)
– Readily modify code
– Apply your HTML 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
HTML Text Editors
vs. GUI Editors (cont’d)
• GUI HTML editors
– Place code into files for you
– Allow you to modify your code manually
• Drawbacks:
– May alter or ignore any code you enter
manually
– Rarely keep pace with the evolution of HTML
standards
– At the time of this writing, HTML5 was not
supported by any open-source GUI editors
Copyright © 2012 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
Copyright © 2012 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
Copyright © 2012 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
– 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:
• Operating system version
• Type and version of Web server software
• CGI interpreter software
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Developing Web Pages
for Mobile Devices
• 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Mobile Apps
vs. Mobile Web Sites
• Mobile apps – stand-alone applications that are
downloaded from a vendor's software repository onto a
mobile device
– Mobile apps are designed and built for specific
mobile operating systems
• Mobile Web sites – usually stripped-down versions of
traditional Web sites
– Mobile Web sites offer cross-platform usability;
mobile apps do not
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Converting a Web site
for Mobile Users
• Many services are available to convert traditional sites
to mobile sites
• Most services support the major types of mobile
operating systems used in smartphones and tablets
• Ensure the service provides support for whatever
mobile devices your customers will be using to access
your site
• Test your mobile Web site on as many mobile devices
as possible
• Validate your markup code to HTML5
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Working with Web 2.0
• Web 2.0 – changing trends in the use of WWW
technology and Web design that 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
Copyright © 2012 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Browsers as Application
Delivery Platforms (cont'd)
• Advantages
– Flexibility
– Scalability
– Cost reduction
• Disadvantages
– Connectivity
– Speed
– Lockout
Copyright © 2012 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: Google Gadgets
Copyright © 2012 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Podcasts
• Podcast – the use of audio or video digital-media
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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 9 Summary
•
•
•
•
•
•
•
•
•
•
Identify types of GUI editors
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
Develop Web pages for mobile devices
Compare mobile apps with mobile Web sites
Convert a Web site for mobile users
Use advanced "Web 2.0" technologies to create Web pages
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 10:
Web Site Development
for Business
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 10 Objectives
• Develop a business Web site
• Discuss the three e-commerce models
• Identify the relationship between Internet marketing and search
engine optimization (SEO)
• Identify payment models used in e-commerce
• Identify issues related to working in a global environment
• Explore the relationship between databases and Web pages
• Discuss ways to optimize the impact of the Web page
• Identify Web page front-end design issues
• Identify file formats for use in Web pages
• Identify Web page back-end resource issues
• Calculate bandwidth and download time
• Name Web page files
Copyright © 2012 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Developing a Business Web Site (cont’d)
• Customers do not read Web pages; they scan them
• Effectively designed pages:
– Feature crisp, concise text
– Include one idea per paragraph
– Include search engine keywords in the main
portions of text
– Convey the central message using the invertedpyramid writing style
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
E-Commerce Considerations
• There are three major e-commerce models that are
widely implemented:
– Business to consumer (B2C)
– Business to business (B2B)
– Consumer to consumer (C2C)
Copyright © 2012 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
Copyright © 2012 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
Copyright © 2012 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Web Analytics
• Web analytic types:
– On-site analytics
• Study visitor behavior once that visitor has
accessed your site
– Off-site analytics
• Identify the size of your market
• Identify competitors
• Determine your market penetration
• Conduct surveys
• Consult market research sources
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
E-Commerce
Payment Technologies
• Payment technologies include:
– Electronic Funds Transfer (EFT)
– Payment gateways
– 3-D Secure
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Secure Sockets Layer (SSL) /
Transport Layer Security (TLS)
• Not transaction methods
• Used to secure transactions through encryption
• Services provided:
– Authentication
– Data confidentiality
– Data integrity
Copyright © 2012 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 computers that
comprise the ability to authoritatively confirm the
identity of a person, host or organization
• PKI involves two elements:
– Digital certificate
– Certificate authority (CA)
Copyright © 2012 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Databases and Web Pages
• Databases can store information about company
inventory
• Databases can store customer information
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Web Pages and CGI
• CGI can be used to help Web pages pass information to and from
databases
• Examples of CGI technology include:
– Perl
– PHP Hypertext Preprocessor (PHP)
– Active Server Pages (ASP) and .NET
– JavaServer Pages (JSP)
– ColdFusion
– Python
– Django
– Ajax
– Ruby
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Optimizing the Impact
of the Web Page
• SEO techniques are designed to get Web pages to conform to the
expectations of search engine applications
• Search engine companies consider:
– How many hyperlinks from other sites point to a page
– How informative a page is
– How well a page's code is structured
– How often the content on the page is updated
• As you optimize pages for SEO, you should:
– Use properly validated HTML code
– Apply Cascading Style Sheets (CSS)
– Structure pages correctly
Copyright © 2012 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 for the
page
– Use images sparingly
– Be easily navigable and without dead ends
– Include alternative navigation links
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Site Maps
• Allow visitors to view a summary of your Web site's
structure
• A useful site map is the product of proper site planning
• Useful site maps include:
– Topical hierarchy
– Aptly named site sections
– Search capability
Copyright © 2012 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Creative Design
and Branding Standards (cont'd)
• Design and branding standards meetings focus on
the following:
– Target markets
– Market messages
– Media choices
– Color combinations
– Sales strategies
– Technologies to use
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Creative Design
and Branding Standards (cont'd)
• Audience development techniques include:
– Flash, Java
– Unique Web site features
– Company logos
– Strategies developed by sales and marketing
– Push and pull technologies
– Visitor tracking
Copyright © 2012 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
Copyright © 2012 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
• Most wiki pages are written in a simplified markup language
called LaTeX (www.latex-project.org) that accommodates the
fast-paced nature of a wiki site
• The word wiki is coined from the Hawaiian phrase "wiki wiki,"
which means "very quick"
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Documenting Changes
• Keep a written record of all changes to your Web site
• Documenting change allows you to:
– Remember which changes have been made to the
HTML code and/or pages on the site
– Ensure that you publish all security updates to the
Web server
– Provide evidence of good-faith efforts to ensure
accessibility
– Verify that you have fulfilled requests from
departments in your organization
Copyright © 2012 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Back-End Issues
• Database connectivity
– Databases provide the ability to:
• Present stored information to customers, and allow them to
search and retrieve
• Receive information from customers and save it for later
retrieval
– Types of databases
• Flat file
• Non-relational
• Relational
• Object-oriented
– Web servers use relational databases to store data
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Back-End Issues (cont’d)
• Relational databases
– Store information in tables
– Can consist of a single file or can be distributed among
several database servers
• Structured Query Language (SQL)
– Used to create and maintain professional, highperformance corporate databases
• Database connection methods
– Open Database Connectivity (ODBC)
– Java Database Connectivity (JDBC)
• Indexing and cataloging
Copyright © 2012 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
Copyright © 2012 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
Copyright © 2012 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
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Lesson 10 Summary
• Develop a business Web site
• Discuss the three e-commerce models
• Identify the relationship between Internet marketing and search
engine optimization (SEO)
• Identify payment models used in e-commerce
• Identify issues related to working in a global environment
• Explore the relationship between databases and Web pages
• Discuss ways to optimize the impact of the Web page
• Identify Web page front-end design issues
• Identify file formats for use in Web pages
• Identify Web page back-end resource issues
• Calculate bandwidth and download time
• Name Web page files
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved
Site Development Associate v2.0










Markup Language and Site Development Essentials
HTML5 Coding
Cascading Style Sheets (CSS) and Graphical Elements
Hyperlinks
HTML Tables
Web Forms
Video, Audio and Image Techniques
Extending HTML
GUI HTML Editors and Mobile Web Sites
Web Site Development for Business
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved