Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Webpage Development and Design
Document related concepts
Transcript
Essential Standard 3.00 (52%) – Understand multimedia production and webpage
design (B2).
Indicator 3.02 (27%) – Develop webpages.
Teacher Note: For this objective, students should NOT use deprecated tags in webpages,
they should use style sheets instead.
Unpacked Content
A. Introduction
1. Webpage – a document stored on a web server which can be accessed and viewed
using a web browser on a computer or mobile device.
a. Can contain graphics, audio and video.
b. Can include hyperlinks to other documents on the World Wide Web.
2. Website – a collection of related webpages.
3. A website is developed to build a relationship with a target audience and is created for
the following reasons:
a. Sell – sells products or services:
i. Advertises, demonstrates, and describes the features of a product or service
ii. Provides customer support
iii. Often includes a database (or catalog) of products and services
b. Inform – provides information about a cause, event, or organization
i. May sell products, but not for profit
ii. May provide online tutorials and demonstrations
c. Entertain – provides information or links to movies, music, magazines, etc.
d. Social Networking - provides a network where people can interact online.
e. Hybrid - may be a combination of any of the four purposes listed above.
B. Webpage Development Standards
1. Standards - basic set of guidelines for authoring languages used to make webpages.
2. They are enacted to make websites accessible to everyone regardless of:
a. Culture
b. Education
c. Ability
d. Resources
e. Physical Limitations
3. The World Wide Web Consortium (W3C) develops webpage development standards.
4. Advantages of Web Standards
a. Helps ensure webpages display consistently in all browsers.
b. Results in faster website development.
c. Results in faster downloading of websites.
d. Provides equal access to information regardless of browser, operating system or
hardware.
C. United States Website Accessibility Legislation
1. Section 508 Amendment to the Rehabilitation Act requires US Federal Agencies to
make information and data equally accessible to individuals and employees with
disabilities.
2. Applies only to US government agencies.
D. Authoring Languages
1. HTML - Hypertext Markup Language
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 218
E.
F.
G.
H.
a. The first authoring language used to create files that can be viewed on the World
Wide Web.
b. Embedded tags define the layout and appearance of the webpage.
c. HTML is platform independent.
d. HTML 4.01 is the current version.
2. XML - Extensible Markup Language
a. Designed to carry data, not to display it.
b. Uses author-defined tags to identify data so that the data can be easily imported
into other applications.
3. XHTML - Extensible Hypertext Markup Language – uses XML code along with the
HTML programming language to develop webpages.
a. Results in cleaner code
b. Tags are more descriptive of the data they contain
Style Sheets
1. Describe how browsers should present or display information on a webpage.
2. Give web developers more control over layout and page formatting.
3. CSS – Cascading Style Sheets is a popular style sheet language.
4. Advantages
a. One style sheet can control the formatting for multiple webpages. An entire
website can be reformatted by editing one file.
b. Styles can also be set internally.
5. Disadvantage - may alter the ability of some devices to accurately read and display
information.
Text Editors – allow developers to write code in plain text.
1. Examples – Notepad, Notepad 2 and WordPad
2. Microsoft Word should not be used to create webpages.
Website Organization
1. Storyboard the website and determine the best website structure for the purpose and
content of the site.
2. Website Structures
a. Linear - Use for pages that users need to read in order
i. Topics arranged in chronological, alphabetical, or series order
ii. Include links to next page and back to previous and index page
b. Hierarchical – Use to organize complex bodies of information
i. Looks like a family tree or a chain of command
ii. Pages are organized and linked by categories and subcategories
c. Webbed - Use when the order in which the user views the pages does not matter
i. Allows users to jump to any page from any page on the website
ii. Navigation bars or menus are included on all pages.
HTML Overview
1. HTML Tags
a. Define text, graphics, hypertext links, and other multimedia elements found on
webpages.
b. Tell the browser how to display the document
2. Rules for using HTML tags
a. HTML tags are enclosed inside angle brackets: < >.
b. The tag name is keyed between the two angle brackets. Example: <body>.
c. With a few exceptions, tags occur in pairs with an opening and a closing tag.
i. Example: <html> is an opening tag
ii. Example: </html> is a closing tag.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 219
iii. The forward slash ( / ) is used in the closing tag.
iv. Text between the opening and closing tags is affected by the tag.
(a) Example: <b>Hello World!</b>
(b) Makes Hello World appear in bold.
v. Exceptions
(a) Some tags are empty tags, meaning they do not have a closing tag, they
only have an opening tag.
(b) Examples of empty tags: <br>, <hr>, <img>, <meta>
d. Attributes - provide additional information about tags and control how the tag will be
interpreted by the browser.
i. Some tags have multiple attributes.
ii. Rules for using attributes:
(a) Attributes are entered inside the opening tag but not in the closing tag.
(b) Attributes are keyed in name/value pairs. Syntax: name=”value”
(c) The attribute should have an equal symbol followed by the value or setting
for the attribute.
(d) Attribute values should be enclosed inside quotation marks.
3. Requirements of XHTML
a. All tags must be in lowercase.
b. All tags must have a closing tag. Empty tags should be closed in the opening tag
by placing a space and forward slash before the closing angle bracket. Example:
<br />
c. All tags must be properly nested.
i. Nesting refers to the order in which tags are opened and closed.
ii. The closing tags are entered in the reverse order from the opening tags to
achieve proper nesting.
d. The <html> tag must be the root tag for every document.
e. These requirements also work in HTML 4.01, but are not required. However,
students should follow these guidelines when creating their webpages.
4. Saving and Testing (X)HTML files
a. Save the file with an .html extension.
b. This identifies the file as a webpage to the browser.
c. Open the page in a web browser to view it and check for errors.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 220
I.
Website File Management
1. The files for a website should be saved in one folder called the root folder
a. The home page of a website is named index.html
b. Use lowercase letters for all folder and filenames.
c. Files can be organized into different subfolders within the root directory if the
website is very large.
2. Use relative hyperlinks to point to other files within the website: news.html.
3. Use absolute hyperlinks to point to other websites: http://www.citizentimes.com
J. Creating a Webpage Using HTML
1. Structure Tags
a. The doctype declaration refers the browser to a Document Type Definition (DTD)
which contains the rules for the markup language so the browser can display the
page correctly.
i. Strict – does not allow the use of deprecated tags or frames.
ii. Transitional – allows the use of deprecated tags but not frames.
iii. Frameset – allows the use of deprecated tags and frames.
iv. Deprecated tags are tags that are marked for deletion in future releases of the
markup language. Style sheets should be used instead of those tags.
b. <html> - Identifies the beginning of the webpage to the browser.
c. <head> - Head Section – provides identifying information about the webpage that
is used by browsers and search engines.
i. <title> - specifies the title of the webpage that will appear in the browser’s title
bar and in bookmarks. The <title> is inserted inside the <head> section.
ii. <meta> – provides information about the page for search engines and
browsers.
(a) The <meta http-equiv="Content-Type" content="text/html; charset=ISO8859-1" /> is required and identifies the character set used by the webpage.
(b) Syntax: <meta name=”name” content=”contents” />
(i) <meta name=”author” content=”author’s name” /> - provides a search
engine with the author’s name.
(ii) <meta name=”description” content=”Description” /> - provides a
description of the webpage that will be displayed when a search engine
shows the page’s URL in a hit list.
(iii) <meta name=”keywords” content=”list of keywords” /> - provides a list of
words that a search engine should associate with the page.
d. <body>
i. Contains the majority of the data for the webpage.
ii. Contains all the content that will appear in the browser’s window.
2. HTML Tag List
a. Spacing tags:
i. <br /> - inserts a ‘line break’ or a single space in the text.
ii. <p> - inserts a paragraph and adds a blank line before and after the paragraph
text.
b. Heading Sizes - <h1> through <h6> bold enclosed text and increase the text size
with <h1> being the largest and <h6> being the smallest.
c. Typeface Styles
i. <b> - bolds the text between the opening and closing <b> tags.
ii. <i> - italicizes the text between the opening and closing <i> tags.
d. Lists
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 221
i.
<ul> - unordered list. Creates a bulleted list. Used for items that do not need to
be in a particular order.
ii. <ol> - ordered list. Creates a numbered list.
iii. <li> - list item. Items in each type of list are keyed between the opening and
closing <li> tags.
e. Images
i. <img> - inserts an image into a webpage.
(a) Syntax: <img src=”image location” alt=”text describing the image” />
(b) The source attribute (src) identifies the location of the image file.
(i) The image filename is case sensitive and must be keyed exactly as it is
saved.
(ii) Images should be saved in the same location as the webpage.
(c) The alt attribute should always be used in case the image does not load
properly in the browser window.
(d) Width and height attributes can be used to control the display size of image
in the browser window. The value is stated in pixels.
f. Navigation (linking) Tags
i. Hypertext links are inserted by using anchor tags <a>.
ii. Hyperlinks can link to spots inside the same webpage or to pages outside the
webpage.
iii. Hyperlinks can be used to automatically open the browser’s default email client
and insert an email address in the To: section.
iv. Syntax: <a href=”URL”>Text to Click</a>
(a) The href attribute is short for hypertext reference and identifies the URL for
the link to be opened in the browser.
(b) Text or an image tag MUST appear between opening and closing anchor
tags to provide a place for the viewer to click in order to visit the link.
3. Cascading Style Sheets
a. Inline Styles – the code for the style is inserted inside the opening html tag.
i. Syntax: <p style=”color:red”>
ii. Affects only the information between the opening and closing tag.
iii. Overrides internal and external style sheets.
b. Internal style sheet – used to control the appearance of one webpage.
i. The <style> tag is placed inside the <head> section of the webpage.
ii. Styles are defined between the opening and closing <style> tags.
iii. Internal style sheets override external style sheets.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 222
c. External style sheet – styles are defined in a separate text file saved with the .css
extension.
i. A code is inserted into the <head> section giving the location of the style sheet
to be used.
ii. All webpages in a website can be linked to one external style sheet which helps
keep all webpages in a website consistent in appearance
d. Several tags and attributes have been deprecated in favor of using style sheets.
(Examples below are shown as inline styles.)
i. Alignment
(a) To center text using inline styles: <p style="text-align:center">Text</p>
(b) To right-align text using inline styles:
<p style=”text-align:right”>Text</p>
ii. Body Tag Attributes
(a) To set the background to a solid color using inline styles:
<body style="background-color:yellow">
(b) To set the background to an image using inline styles:
<body style="background-image:url('paper.gif')"> .
iii. Font
(a) To change the typeface: <p style=”font-family:arial”>
(b) To change the color: <p style=”color:red”>
(c) To change the size: <p style=”font-size:16px”>
K. Website Design Guidelines
1. Body text
a. Sans serif typefaces are easier to read on computer screens.
b. If the typeface chosen is not supported by the browser, the browser will display the
text in its default font so it is best to choose a typeface that is common to many
computers.
c. Left justified text is easier to read for webpages.
d. Do not use underlining—it implies a hyperlink.
e. Let users know if a link will move them to a page on a different website.
f. Use headings that are descriptive and unique from one another to divide page
content into short sections.
g. Use descriptive headings for lists.
h. Use abbreviations sparingly and define acronyms and abbreviations.
i. Avoid jargon.
j. Consider the target audience when selecting typefaces, text size, etc.
k. Use contrasting colors for background and text to make text easy to read.
2. Multimedia
a. Use images, video, animation, and audio only when they help convey or support
the website's message.
b. Ensure that images load quickly.
c. If large images are used, use thumbnails that link to the larger images.
d. If plug-ins or players are required, include a link to a website where the plug-in or
player can be downloaded.
i. Provide controls so that users can stop, start, play, and adjust volume.
ii. Be aware that embedded media can dramatically increase the download time.
iii. Provide text descriptions or captions for images and video to make information
accessible to viewers with disabilities.
3. Miscellaneous Guidelines
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 223
a. Place the organization's logo in a consistent place on every page.
b. Include a title in the <head> section to be used if a viewer bookmarks the page
(adds your page to their favorites)
c. Include a link back to the home page from every page.
d. Place the most important information near the top of the page.
e. Be consistent in all design elements (fonts, colors, graphic size and location,
alignment, and backgrounds) throughout the website.
L. Website Components
1. The Home/Index Page
a. Creates a positive first impression of the website.
b. Communicates the purpose of the website.
c. Should contain navigational links or menus to provide viewers with the links they
will need to navigate the website.
2. A business website should contain the following:
a. About Us – a page defining the website’s purpose and goals.
b. Contact Us – page containing contact information to make it easy for viewers to
communicate with the business.
c. Privacy Policy- page that informs viewers how their private information will be
handled.
3. The website may contain the following pages:
a. Splash page - an introduction page that appears while the website is loading. Many
readers do NOT like waiting for splash pages to load. They can be used to:
i. Show a progress bar indicating the website is loading.
ii. Tell the user what kind of browser or software they need to view the site.
iii. Allow users to choose their language or country’s version of the website.
b. Site Map – a basic skeleton of the website intended to help users quickly locate
information on the website.
M. Publishing Websites
1. Before Publishing
a. Check the site in multiple browsers.
b. Validate source code.
c. Check spelling and relative and absolute links.
2. Choose a Web Host.
a. A host computer is also called a web server and is a computer that stores
webpages.
b. Sends webpages to viewers over the Internet upon request.
3. Obtain a Domain Name.
a. Use assigned name provided by web hosting service.
b. Register and purchase a unique name for a fixed period of time.
4. Publish - upload files to the web host/server
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 224
Instructional Activities and Resources
Instructional Activities
1.
2.
3.
4.
The Purpose of a Website
• Facilitate a discussion with the class about the major
purposes of websites while viewing the 3.02A
Introduction to Web Development and Standards
PowerPoint presentation. Visit the examples listed
on the slides and in the Teacher Notes Section of
each slide. Discuss the features of each website
while students record the characteristics of each
using the 3.02 Purposes of Websites Graphic
Organizer.
Web Development Standards
• Have students take notes on the 3.02 Web
Development Standards PowerPoint Notes as
teacher facilitates a discussion of the web standards
section of the PowerPoint presentation, 3.02A
Introduction to Web Development and Standards.
• During discussion, compare web development
standards to standards in other areas such as
behavior in school, participation on sports teams,
graduation requirements, teaching, etc.
Web Standards and the W3C
• Visit the W3Schools website with students. Have
students read the chapters on web standards,
http://www.w3schools.com/site/site_standards.asp
and the W3C,
http://www.w3schools.com/w3c/w3c_intro.asp.
• Have students complete the 3.02 Web Standards
and the W3C activity while reading at the site.
Authoring Languages and Text Editors
• Use the PowerPoint presentation 3.02B Authoring
Languages and Text Editors to discuss authoring
languages and text editors that are available.
• Have students take notes on the 3.02 Authoring
Languages and Text Editor Notes graphic
organizer.
Resources
•
•
•
•
•
•
•
•
3.02A Introduction to Web
Development and Standards
PowerPoint presentation.
3.02 Purposes of Websites
Graphic Organizer.
3.02 Web Development
Standards PowerPoint Notes
3.02A Introduction to Web
Development and Standards
PowerPoint presentation
Websites:
http://www.w3schools.com/sit
e/site_standards.asp
http://www.w3schools.com/w
3c/w3c_intro.asp
3.02 Web Standards and the
W3C activity
3.02B Authoring Languages
and Text Editors PowerPoint
presentation
3.02 Authoring Languages
Text Editor Notes Graphic
Organizer
Instructional Activities and Resources continued on next page.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 225
5.
6.
7.
8.
9.
Authoring Languages Activity
• Have students complete the matching activity, 3.02
Authoring Languages, to reinforce main
characteristics of authoring languages.
• When all students have completed the activity,
facilitate a class discussion.
Text Editors and Style Sheets Activity
• Have students complete the 3.02 Text Editors and
Style Sheets Activity. Students will need to visit the
websites to complete the activity.
• When all students have completed the activity,
facilitate a class discussion about their findings.
•
•
•
•
•
Website Organization
• Show the PowerPoint presentation, 3.02C Website
Organization and discuss the need to plan a
website and manage it properly.
• Have students take notes on the 3.02 Website
Organization PowerPoint Notes graphic organizer.
•
Information Architecture
• Have students complete the 3.02 Information
Architecture activity by visiting the websites at the
right and classifying important characteristics of the
websites.
• When students have completed the activity, facilitate
a class discussion.
•
Website Structures
• Have students complete the 3.02 Website
Structures activity.
• When students have completed the activity, facilitate
a class discussion about the activity.
•
•
•
•
•
•
3.02 Authoring Languages
activity
3.02 Authoring Languages
activity Key
3.02 Text Editors and Style
Sheets Activity
3.02 Text Editors and Style
Sheets Activity Key
Websites – refer to the
activity for a list of websites
to be visited.
3.02C Website Organization
PowerPoint presentation
3.02 Website Organization
PowerPoint Notes
3.02 Website Organization
PowerPoint Notes KEY
3.02 Information Architecture
activity
3.02 Information Architecture
activity Key
Websites
http://www.google.com/
http://www.ncgov.com/
http://webstyleguide.com/
3.02 Website Structures
activity
3.02 Website Structures
activity Key
Instructional Activities and Resources continued on next page.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 226
10.
HTML Overview
• Show the PowerPoint presentation, 3.02D HTML
Overview PowerPoint Presentation. Facilitate a
class discussion about HTML tags and how to use
them.
• Have students take notes on the 3.02 HTML
Overview Notes graphic organizer during the
presentation and discussion.
•
•
3.02D HTML Overview
PowerPoint Presentation
3.02 Creating a Webpage
Using HTML Notes
11. HTML Structure, Content, and Format Tags
•
•
•
•
•
•
•
•
12.
Have students complete the online HTML tutorial,
http://www.w3schools.com/html/html_intro.asp
(Introduction through Color Names, omitting
Tables and Forms) at W3Schools.
Teachers may want to complete the "Introduction"
portion of the tutorial as a class demonstration.
Demonstrate how to copy the HTML code, paste into
a text editor, save in student folder and open in
browser as shown in the "Do You Want to Try It"
section of the website,
http://www.w3schools.com/html/html_intro.asp.
Have students complete the 3.02 Basic HTML Tag
Notes activity as they complete the tutorial.
Students may have to visit the Complete HTML
Reference (link given in the tutorial) for some of the
tags.
Students should be encouraged to try the tags by
clicking on the
buttons in the tutorial.
Teachers should circulate and check for student
understanding, assisting as necessary.
When students have completed the activity, pair
students in order to review each other's responses.
Facilitate a class discussion of the basic HTML tags.
Have students give a thumbs-up, thumbs-down, or
thumbs-horizontal to show their understanding of the
tags.
Distribute the handouts 3.02 Basic HTML Codes
and 3.02 HTML Structure and Content Tags to the
class to review.
Students may want to refer to these charts in all of
the activities involving HTML coding in this unit.
•
•
•
•
•
•
Online HTML tutorial
http://www.w3schools.com/ht
ml/html_intro.asp
3.02 Basic HTML Tag Notes
3.02 Basic HTML Tag
Notes—KEY
Complete HTML Reference
http://www.w3schools.com/ta
gs/default.asp
3.02 Basic HTML Codes
handout
3.02 HTML Structure and
Content Tags
Handouts may be distributed electronically or given
in hard-copy.
Instructional Activities and Resources continued on next page.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 227
13.
14.
15.
16.
HTML Quiz
• Have students complete the 3.02 HTML Tags Quiz
to assess entry-level HTML coding concepts.
• When all students have completed the quiz, facilitate
a class discussion of the HTML coding on the quiz.
• If students need further practice, refer them to the
HTML Examples on the W3Schools website
http://www.w3schools.com/html/html_examples.asp
• Students can then assess their understanding of
HTML tags by taking the HTML Quiz at the
W3Schools website
http://www.w3schools.com/html/html_quiz.asp.
Website File Management
• Have students view the 3.02E Website File
Management PowerPoint presentation to learn
about website file management.
• Have students complete the 3.02 File Management
Notes graphic organizer as they view the
presentation.
• Demonstrate website file management to students
using a digital projector. This demonstration will lead
in to the next activity.
Website File Management Activity
• Have students complete the 3.02 Website File
Management Activity.
• Circulate and offer assistance as needed.
• Facilitate a class discussion about the importance of
file management to website development.
Creating an HTML Webpage
• Have students complete the 3.02 Use a Text Editor
to Create a Simple Webpage activity. Students will
create a simple webpage using HTML code.
• Have students key the HTML code using a text editor
such as Notepad or WordPad. Detailed instructions
for text editors can be found at this link on the
W3Schools website:
http://www.w3schools.com/Web/web_html.asp.
• Review how to save and view websites in a browser.
• Teachers should circulate as students work on their
webpage. Offer assistance as needed.
• Facilitate a class discussion and have some students
demonstrate their code to the entire class.
•
•
•
•
•
•
•
•
•
•
3.02 HTML Tags Quiz
3.02 HTML Tags Quiz Key
Websites
Tutorial Examples:
http://www.w3schools.com/ht
ml/html_examples.asp
W3C Online HTML Quiz:
http://www.w3schools.com/ht
ml/html_quiz.asp.
3.02E Website File
Management PowerPoint
presentation
3.02 File Management Notes
graphic organizer
3.02 Website File
Management Activity
3.02 Website File
Management Activity Key
3.02 Use a Text Editor to
Create a Simple Webpage
activity
3.02 Use a Text Editor to
Create a Simple Webpage
Key
Website Directions for Using
a text editor:
http://www.w3schools.com/W
eb/web_html.asp.
Instructional Activities and Resources continued on next page.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 228
17.
18.
19.
XHTML Tutorial
• Have students complete the online XHTML Tutorial,
http://www.w3schools.com/xhtml/xhtml_intro.asp at
W3Schools. Students should work the tutorial
through the XHTML Summary and take notes on
the 3.02 XHTML Tutorial Activity.
• Facilitate a class discussion about XHTML and the
differences between HTML and XHTML.
• Have students give a thumbs-up, thumbs-down, or
thumbs-horizontal to show their understanding of the
tags.
• Teachers may want to have students complete the
XHTML Quiz at the W3Schools website:
http://www.w3schools.com/xhtml/xhtml_quiz.asp
Creating an XHTML Webpage
• Distribute the 3.02 Creating an XHTML Webpage
activity to students.
• Have students convert the HTML code that they
created in the 3.02 Use a Text Editor to Create a
Simple Webpage activity earlier.
• Facilitate a class discussion about the changes
needed to convert the code from HTML to XHTML.
Ask students why the conversion was so easy for
them. Review the advantages and disadvantages of
coding in XHTML with the students.
CSS Tutorial
• Have students complete the online CSS Tutorial
http://www.w3schools.com/css/default.asp at
W3Schools through font size.
• Have students complete the 3.02 CSS Tutorial
Notes activity as they work through the tutorial.
Students may work in pairs to complete the tutorial
and notes.
• Facilitate a class discussion, stressing the
advantages of using CSS.
• Remind students that the W3Schools website has
numerous HTML, XHTML, and CSS reference charts
for use when coding their websites.
20.
Distribute the handout 3.02 Basic CSS Properties
Notes to the class to review. Students may want to
refer to these notes in all of the CSS activities.
Handout may be distributed electronically or given in
hard-copy.
•
•
•
•
•
•
•
•
•
•
•
Online XHTML tutorial
http://www.w3schools.com/x
html/xhtml_intro.asp
3.02 XHTML Tutorial Activity
3.02 XHTML Tutorial Activity
Key
Online XHTML Quiz
http://www.w3schools.com/x
html/xhtml_quiz.asp
Completed student activities
3.02 Use a Text Editor to
Create a Simple Webpage
3.02 Creating an XHTML
Webpage activity
3.02 Creating an XHTML
Webpage activity Key
Online tutorial
http://www.w3schools.com/cs
s/default.asp
3.02 CSS Tutorial Notes
3.02 CSS Tutorial Notes Key
3.02 Basic CSS Properties
Notes
Instructional Activities and Resources continued on next page.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 229
21.
22.
CSS Internal Style Sheet Activity
• Distribute the 3.02 CSS Internal Style Sheet
Activity to students.
• Have students retrieve the HTML webpage My HTML
Webpage that they created earlier.
• Students may refer to their CSS notes and the CSS
tutorial: http://www.w3schools.com/css/default.asp.
• Students will create an internal style sheet to change
their webpage.
• When students have completed the style sheet, have
students exchange their code and proofread it.
• Facilitate a class discussion about CSS, stressing
the purpose and benefits of CSS—less code to be
keyed, consistent appearance of the website, editing
and updating is faster and more efficient.
• Ask students to give a thumbs-up, thumbs-down, or
thumbs-horizontal to indicate their understanding of
CSS.
• Teachers may want students to take the CSS Quiz at
the W3Schools website
http://www.w3schools.com/css/css_quiz.asp.
Principles of Good Webpage Design
• Have students view the 3.02F Principles of Good
Webpage Design PowerPoint presentation.
• Facilitate a class discussion.
• Distribute the handout 3.02 Principles of Good
Webpage Design Guidelines to students for future
reference.
• Handout may be distributed electronically or given in
hard-copy.
•
•
•
•
•
•
•
•
3.02 CSS Internal Style
Sheet Activity
Saved file from 3.02 Creating
an HTML Webpage activity
(My HTML Webpage)
Completed 3.02 CSS Tutorial
Notes
3.02 CSS Internal Style
Sheet Activity—Key
Website for reference:
http://www.w3schools.com/c
ss/default.asp
CSS Quiz:
http://www.w3schools.com/cs
s/css_quiz.asp
3.02F Principles of Good
Webpage Design PowerPoint
presentation
3.02 Principles of Good
Webpage Design Guidelines
Instructional Activities and Resources continued on next page.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 230
23.
24.
Website Design
• Visit Websites That Suck,
http://www.websitesthatsuck.com/ prior to completing
the activity below. You will find interesting
commentary about the bad sites of the day under the
"Daily Sucker".
• NOTE: This site may not be appropriate for your
students but will provide the teacher with analytical
examples that could be used for demonstration and
discussion. After viewing the site, share the site with
students as appropriate.
• Facilitate a class discussion of good website design
and pitfalls to avoid when designing a website.
• Have students complete the activity 3.02 What’s
Wrong With the Design? You may wish to display
the websites with digital projector as students work.
• Facilitate a class discussion about the activity and
design principles for websites. Have students share
their responses.
• TEACHER NOTE: Because the Internet is so
dynamic, it is possible that one of the websites on
the activity will be changed or removed from the web.
If any of the links on the activity become inactive or
broken, search the Websites That Suck website,
http://www.websitesthatsuck.com/, to select a site to
replace it. The answer key will have to be adjusted
accordingly.
Website Components
• Show the PowerPoint presentation, 3.02G Website
Components, and discuss the importance of the
home page. Caution them about using a splash
page.
• Have students take notes on the 3.02 Website
Components Notes graphic organizer.
•
•
•
•
•
•
Website
http://www.websitesthatsuck.
com/
3.02 What’s Wrong With the
Design? activity
3.02 What’s Wrong With the
Design? Key
Websites in activity:
http://www.alternativetranspo
rtservices.co.uk/
http://www.tracyskarate.com/
http://www.freemap.com/
http://www.disabilityresource
s.org/
3.02G Website Components
PowerPoint presentation
3.02 Website Components
Notes
Instructional Activities and Resources continued on next page.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 231
25.
26.
27.
28.
Website Components Activity
• Have students work in pairs to complete the 3.02
Website Components Activity.
• Students will need to visit the websites listed at the
right to complete the activity.
• Facilitate a discussion about the use of splash pages
and home pages.
• TEACHER NOTE: If any of the links on the activity
become inactive or broken, search the Favorite
Website Award website, http://www.thefwa.com/, to
select a site to replace it. The answer key will have
to be adjusted accordingly. Be sure to include sites
that have flash pages, and those that do not.
Designing a Website
• Have students complete the 3.02 Design a Website
activity. Students will use a text or web editor to
design a website following good design principles.
• Students may work in pairs or teams.
• As students work, teachers should monitor student
progress and assist as needed.
• Have students review each other’s websites using
the 3.02 Design a Website Rubric. Select students
to share their website with the class.
Publishing Websites
• Have students view the 3.02H Publishing a Website
PowerPoint presentation and take notes on the 3.02
Publishing a Website Notes graphic organizer.
Finding a Web Host and Domain Name
• Have students complete the 3.02 Find a Web Host
and Domain Name activity. Students will compare
various website.
• Have students work in pairs to discuss and assess
their findings.
• Facilitate a class discussion about web hosts and
domain names. Question students about options for
hosting and good choices for domain names.
•
•
•
•
•
•
3.02 Website Components
Activity
3.02 Website Components
Activity Key
Websites
http://www.blastgetcreative.c
o.uk/
http://www.intel.com/tomorro
w/
http://www.ncsu.edu/
http://pixelcase.com.au/vr/20
09/newyork/
http://disney.go.com/disneypi
ctures/up/
http://www.whitehouse.gov/
3.02 Design a Website
activity
3.02 Design a Website
Rubric
Websites
http://www.webmonkey.com/r
eference/Color_Charts
http://www.w3schools.com/ht
ml/html_colors.asp
•
•
•
•
3.02H Publishing a Website
PowerPoint presentation
3.02 Publishing a Website
Notes graphic organizer
3.02 Find a Web Host and
Domain Name activity
3.02 Find a Web Host and
Domain Name Key
Instructional Activities and Resources continued on next page.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 232
29.
Publishing a Website
• Have students complete the 3.02 Publish a
Website! activity. If possible, have students publish
a previously created website to a host.
• When students have completed the activity, facilitate
a class discussion about publishing websites.
30. Testing a Webpage
• Have students complete the 3.02 Test Your
Webpage! activity. Students will validate source
code and check spelling and links in a previously
created webpage.
• Validate source code at
http://www.w3schools.com/site/site_validate.asp,
http://validator.w3.org/ or
http://webxact.watchfire.com/ (also checks links).
• NOTE: Website does not have to be published in
order for students to validate the source code or to
check links. The website files must be stored as
taught in the 3.02E Website File Management
PowerPoint presentation and activity. Students must
have Internet access to validate the source code.
• If not using a web editor, page can be spell checked
by opening in browser, copying the content for the
entire page and pasting in a word processor and
then using the word processor’s spell checking utility.
Students should note errors and correct in the HTML
file.
6414 Multimedia and Webpage Design
Summer 2011
•
•
•
•
•
3.02 Publish a Website!
activity
3.02 Publish a Website! Key
3.02 Test Your Webpage!
activity
3.02 Test Your Webpage!
activity Key
Websites
http://www.w3schools.com/sit
e/site_validate.asp
http://validator.w3.org/
http://webxact.watchfire.com/
Unit B
Page 233
Instructional Support
Materials
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 234
3.02 Purposes of Websites Graphic Organizer
Social
Sell
Inform
Entertain
Characteristics
Characteristics
Characteristics
Characteristics
Examples
Examples
Examples
Examples
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 235
3.02 Purposes of Websites Graphic Organizer Key (Answers May Vary)
Sell
Inform
Entertain
Characteristics
Characteristics
Characteristics
Advertizes and/or
demonstrates a
product or service.
Provides customer
support.
Provides information
about a cause, event
or organization and
may provide tutorials
or demonstrations.
Provides information or
links to movies, music,
magazines, etc.
Social
Characteristics
Provides a network
where people can
interact online.
Often includes a
database (or catalog)
of products and
services.
Examples
Examples
Examples
Examples
Microsoft
NC Public Schools
iTunes
eBay
Nike
Northwest Guildford
High School
Internet Movie
Database
NetFinder
CNN
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 236
3.02 Web Development Standards PowerPoint Notes
Web Development
Standards
What are they?
What is the W3C?
Advantages
Section 508 Amendment to
Rehabilitation Act
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 237
3.02 Web Development Standards PowerPoint Notes Key
(Answers May Vary)
Web Development
Standards
What are they?
What is the W3C?
Basic set of guidelines for
authoring languages used
to make web pages
The World Wide Web
Consortium. The
organization that develops
the standards for web
development.
Advantages
Helps ensure web pages
display consistently in all
browsers.
Faster website development.
Faster downloading of
websites.
Equal access of information.
Website is accessible
regardless of browser,
operating system or
hardware.
Section 508 Amendment to Rehabilitation Act
Requires US Federal Agencies to make information and data equally
accessible to individuals and employees with disabilities.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 238
3.02 Web Standards and the W3C
Directions: Fill in the blanks as you read the chapters on Web Standards and the W3C on the
W3Schools website http://www.w3schools.com/site/site_standards.asp
http://www.w3schools.com/w3c/w3c_intro.asp
1. Web standards ensure that everyone has access to
___________________________________________________________________.
2. Future use of the web will not be possible without _________________________.
3. Standard web documents are easier for ______________________________________
and easier to
________________________________________________________________.
4. _______________________________ is an important part of the HTML standard.
5. W3C stands for ____________________________________________________.
6. W3C was created in _____________________ by ________________________.
7. W3C is working to make the web accessible to all users despite differences in
_________________________________________________________________.
8. W3C is hosted by three universities:
___________________________________________
___________________________________________
___________________________________________
9. Some well known members of the W3C are:
___________________________________________
___________________________________________
___________________________________________
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 239
3.02 Web Standards and the W3C—KEY
Directions: Fill in the blanks as you read the chapters on Web Standards and the W3C on the
W3Schools website.
1. Web standards ensure that everyone has access to the same information.
2. Future use of the web will not be possible without standards.
3. Standard web documents are easier for search engines to index and easier to index
more accurately.
4. Accessibility is an important part of the HTML standard.
5. W3C stands for World Wide Web Consortium.
6. W3C was created in 1994 by Tim Berners Lee.
7. W3C is working to make the web accessible to all users despite differences in culture,
education, ability, resources and physical limitations.
8. W3C is hosted by three universities:
Massachusetts Institute of Technology in the U.S.
The French National Institute in Europe
Keio University in Japan
9. Some well known members of the W3C are:
IBM
Microsoft
America Online
Apple
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 240
3.02 Authoring Languages and Text Editor Notes
Authoring
Languages
HTML
XML
XHTML
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 241
3.02 Authoring Languages and Text Editor Notes - Page 2
Style Sheets and Text Editors
Style Sheets
Advantages
Disadvantages
Text Editors
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 242
3.02 Authoring Languages and Text Editor Notes
Key (Answers May Vary)
Authoring
Languages
HTML
XML
The first and still
primary language
for creating web
pages/sites
Uses codes, or
tags, to instruct
the browser how
to display text and
images
Describes data
types to facilitate
data processing.
Designed to carry
data, not display
it.
Allows the author
to define tags to
identify each
data entry so
that the data can
be easily
imported into
other
applications
Contains
metadata—data
about data
6414 Multimedia and Webpage Design
Summer 2011
XHTML
Unit B
Combination of
HTML and XML
Originally
intended to
replace HTML.
Places
restrictions on
HTML tags so
code is cleaner
and the page will
display as the
author intended.
Developed
because many
devices cannot
interpret bad
HTML code. (cell
phones, pdas,
etc.)
Page 243
3.02 Authoring Languages and Text Editor Notes Key
Page 2 (Answers May Vary)
Style Sheets and Text Editors
Style Sheets
Describe how browsers should
present or display information on a
web page.
Give web developers more control
over layout and page formatting.
Advantages
One style sheet can control the
formatting for multiple web pages.
An entire website can be
reformatted by editing one file.
Disadvantages
Some devices may not be able to
read and display information
correctly.
Text Editors
Text Editors – allow developers to write code in plain text.
Examples: Notepad, Notepad2, WordPad
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 244
3.02 Authoring Languages
Directions: Match the language with the appropriate characteristic. You may use each
language more than once.
Word Bank: HTML, XML, XHTML, CSS
Language
Characteristic
______________
1. Gives web developers more control over layout and page
formatting.
______________
2. First and primary language for webpage development.
______________
3. Can alter the ability of some devices to display pages.
______________
4. Allows the author to define the tags that will be used.
______________
5. Combination of HTML and XML.
______________
6. Uses author-defined tags to identify data so it can be
easily imported into other applications.
______________
7. Uses embedded tags to define the layout and appearance
of the webpage.
______________
8. Uses stricter and cleaner code.
______________
9. Can control formatting for an entire site.
______________
10. Designed to carry data, not display it.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 245
3.02 Authoring Languages—KEY
Directions: Match the language with the appropriate characteristic. You may use each
language more than once.
Word Bank: HTML, XML, XHTML, CSS
Language
Characteristic
CSS
1. Gives web developers more control over layout and page
formatting.
HTML
2. First and primary language for webpage development.
CSS
3. Can alter the ability of some devices to display pages.
XML
4. Allows the author to define the tags that will be used.
XHTML
5. Combination of HTML and XML.
XML
6. Uses author-defined tags to identify data so it can be
easily imported into other applications.
HTML
7. Uses embedded tags to define the layout and appearance
of the webpage.
XHTML
8. Uses stricter and cleaner code.
CSS
9. Can control formatting for an entire site.
XML
10. Designed to carry data, not display it.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 246
3.02 Text Editors and Style Sheets Activity
Use the Internet to visit the sites given below. Complete the chart as indicated.
Product/Website
Features
(including Costs)
Advantages
Disadvantages
Text Editors
WYM Editor
http://www.wymeditor.org/
W3Schools HTML Editor
http://www.w3schools.com/ht
ml/default.asp
Notepad
http://www.notepad.org/
http://webdesign.about.com/o
d/notepad/p/notepad.htm
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 247
Would you use
this product?
Why or why not?
Product/Website
Features
(including Costs)
Advantages
Disadvantages
Cascading Style Sheets (CSS)
http://www.w3schools.com/W
eb/web_css.asp
http://www.w3.org/Style/LieBo
s2e/enter/
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 248
Would you use
this product?
Why or why not?
3.02 Text Editors and Style Sheets Activity Key (Answers May Vary)
Product/Website
Features
(including Costs)
Advantages
Disadvantages
Would you use
this product?
Why or why not?
HTML/XHTML Editors
WYM Editor
http://www.wymeditor.org/
What you see is
what you mean
editor
Generates
perfectly structured
XHTML strict code
Conforms to W3C
specifications
Free. Open
Source
Clear and easy to
learn
Generates clean
XHTML code
Easy to use
Easy and quick
maintenance of
information
Still a work in
process—under
development
No technical
support (community
support)
Answers will vary but
may include:
Yes. It is open source
so there is no cost to
use it; it is easy to learn
to use and creates
good XHTML code.
W3Schools HTML Editor
http://www.w3schools.com/ht
ml/default.asp
Free from
W3Schools
After editing the
HTML code, you
can click on a
button to view the
result
Used to test
websites coded in
tutorials at the
W3Schools website
Answers will vary but
may include:
Yes; it will be helpful to
use when going
through the tutorials.
Notepad
http://www.notepad.org/
Free when you
purchase Windows
2.0 and above
Universal file
format
Easy to use
Trial posted on site
Meets W3C
standards
Designer can click
to see the result of
the coding
immediately
Easy to read
presentation of
HTML
Easy to use
Small application
size
Doesn't offer a lot of
features other than
coming with the
operating system
Answers will vary but
may include:
Yes; it is a good text
editor to use when
starting to learn
webpage coding; it is
free with MS Windows
http://webdesign.about.com/o
d/notepad/p/notepad.htm
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 249
Product/Website
Features
(including Costs)
Disadvantages
Would you use
this product?
Why or why not?
Not all CSS sheets
are perfect—some
browsers have
particular bugs and
limitations (newer
browsers are better)
Answers will vary but
may include:
Yes; using CSS will
make styles used in
coding webpages
easier
Advantages
Cascading Style Sheets (CSS)
http://www.w3schools.com/W
eb/web_css.asp
http://www.w3.org/Style/LieBo
s2e/enter/
6414 Multimedia and Webpage Design
Define how to
display HTML
elements
A set of rules that
apply to an HTML
document
Free—created by
W3C
Summer 2011
Can save a lot of
work
Supported by all
major browsers
Changes made to
one style sheet can
change the style for
an entire site
Unit B
Page 250
3.02 Website Organization PowerPoint Notes
Information Architecture
Mission or Purpose of the Site:
Goals:
Define:
Examine:
Content:
Determine:
Continued on next page
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 251
3.02 Website Organization PowerPoint Notes
Page 2
Website Structure and Navigation
Linear
6414 Multimedia and Webpage Design
Webbed
Summer 2011
Hierarchical
Unit B
Page 252
3.02 Website Organization PowerPoint Notes—KEY
Information Architecture
Mission or Purpose of the Site: Determine purpose
Inform
Sell
Social
Entertain
Goals: Define Goals of the site
Short term
Long term
Define: Target audience
Examine: Competitive sites
Content: Identify the content of the site
Text
Graphics
Video,
Audio,
Animation
Forms
Determine: Website Structure
Continued on next page
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 253
3.02 Website Organization PowerPoint Notes - KEY
Page 2
Website Structure and Navigation
Linear
Users view pages
one at a time.
Arrange topics in
chronological,
alphabetical, or
series specific order.
Include links to next
page and back to
previous or index
page only.
Use of pages that
users need to read in
order (step by step
learning)
6414 Multimedia and Webpage Design
Webbed
Hierarchical
Allows users to jump to
any page on the
website
Looks like a family
tree with parents and
children or like a
chain of command
Use for sites with a few
inter-related pages
when the order of the
viewing doesn't matter.
Must be consistent or
user will get confused.
Use navigation bar or
menu on all pages.
Summer 2011
Use to organize large
amounts of
information with
categories and
subcategories
Best way to organize
complex bodies of
information
Unit B
Page 254
3.02 Information Architecture
Directions: Visit the following websites and identify elements of information architecture.
Element
http://www.google.com/ http://www.ncgov.com/ http://www.webstyleguide.com/
1. Purpose
2. Goals
3.
Target
Audience
4.
Competitive
Site
5.
Types of
content
6.
Site
structure
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 255
3.02 Information Architecture—KEY
Directions: Visit the following websites and identify elements of information architecture.
Element
http://www.google.com/ http://www.ncgov.com/ http://www.webstyleguide.com/
1. Purpose
2. Goals
3.
4.
Target
Audience
Competitive
Site
Types of
5.
content
6.
Site
Structure
From their Corporate
Information
page…“organize the
world's information and
make it universally
accessible and useful”
Focus on the user.
Do one thing well.
Fast is better than
slow.
Democracy on the
web works.
You don’t need to be
at your desk to need
an answer.
You can make
money without doing
evil.
There’s always more
info out there.
The need for info
crosses all borders.
You can be serious
without a suit.
Great isn’t good
enough.
Anyone searching for
information on the WWW
Froogle is targeted to
shoppers.
www.yahoo.com
www.msn.com
Text
Images (news)
Webbed
6414 Multimedia and Webpage Design
From the governor’s
quote—“information on
the programs and
services that make North
Carolina a better place to
be."
Provide online access to
state information via
portals that link the user
to state sponsored
websites or pages
offering alternative forms
of communication.
Give broad overview of the web
and provide tips on website
design.
NC Citizens (and
potential citizens), NC
visitors, NC Employees,
NC Businesses and
shoppers of NC
sponsored state
memorabilia.
None in this state
although other official
sites of other states
could be competition in
some instances.
Mostly text, some
images. Linked sites
contain other elements
as well.
Hierarchical
Website designers and/or
managers of website designers.
Summer 2011
Teach basic design principles and
tricks of the trade.
Provide a broad framework for
understanding the big picture of
web design.
www.webmonkey.com
www.w3schools.org
Text
Images
Linear and webbed
Unit B
Page 256
3.02 Website Structures
Directions: Answer the following questions by indicating the type of site structure.
1.
2.
3.
4.
Contains many categories and subcategories.
5.
Links to next page and back to previous page only.
6.
Use with a few interrelated pages where viewing order is not
important.
7.
Allows users to jump to any page on site from any page.
8.
Best way to organize complex bodies of information.
9.
Looks like a family tree.
10.
Use for step-by-step learning.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 257
3.02 Website Structures—KEY
Directions: Answer the following questions by indicating the type of site structure.
1. Linear
2. Hierarchical
3. Webbed
4. Hierarchical
Contains many of categories and subcategories.
5. Linear
Links to next page and back to previous page only.
6. Webbed
Use with a few interrelated pages where viewing order is not
important.
7. Webbed
Allows users to jump to any page on site from any page.
8. Hierarchical
Best way to organize complex bodies of information.
9. Hierarchical
Looks like a family tree.
10. Linear
Use for step-by-step learning.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 258
3.02 HTML Overview Notes
HTML Tags
Purpose
Using
HTML Tags
HTML vs.
XHTML
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 259
3.02 HTML Overview Notes Page 2
Nesting HTML
Tags
Adding Attributes
to tags
Multiple Attributes
Creating
and
Saving
HTML
Files
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 260
3.02 HTML Overview Notes Key (Answers May Vary)
HTML Tags
Purpose
Define and describe text, graphics, hypertext links, and other
multimedia elements found on webpages. Tell the browser
how to display the document.
Using
HTML Tags
HTML vs.
XHTML
6414 Multimedia and Webpage Design
An HTML tag begins with a < character and
ends with a > character.
Between these characters is the actual tag
name, such as body or head. <body> is an
example of a correct tag.
Tags should appear in pairs, with an opening
tag <html> and a closing tag </html>.
The only difference between the opening and
closing tag is the / used in the closing tag.
Text entered between the HTML tags is
formatted with the code specified by those tags.
W3C created XHTML as an extended version of
HTML.
The new standard requires some modification of
the old HTML standard.
- All tags must be in lowercase.
- All tags must have a closing tag.
- All tags must be properly nested.
- The <html> tag must be the root tag for every
document.
While many old browsers can display “old” HTML,
newer ones rely on the current standard.
-
Summer 2011
Unit B
Page 261
3.02 HTML Overview Notes Page 2
Nesting HTML
Tags
Adding Attributes
to tags
Multiple Attributes
Space once between
multiple attributes.
Creating
and
Saving
HTML
Files
Nesting refers to the order in
which tags are opened and
closed.
Enter the closing tags in the
reverse order from the opening
tags.
Closing tags in a different order
than they were opened may
keep the browser from
displaying the page as intended
by the author.
Attributes provide additional
information about tags and control
how the tag will be interpreted by the
browser.
Attributes are entered inside the
opening tag but not in the closing tag.
Attributes are keyed in name/value
pairs. Syntax: name=”value”
The attribute should have an equal
symbol followed by the value or setting
for the attribute.
Attribute values should be enclosed
inside quotation marks.
Use any text editor to enter HTML code and create a
webpage.
Save the file as an HTML file using .html as the extension.
Launch a web browser and open the file to display the page.
(Check the page out with several different browsers to see
how each browser displays the HTML file.)
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 262
3.02 Basic HTML Tag Notes
Work the HTML tutorial at the W3Schools website http://www.w3schools.com/html/html_intro.asp
to find the correct HTML tag and an example (including closing tags) for each tag in the chart
below. Complete the tutorial through the HTML Quick List, omitting Tables and Forms.
Type of Tag
Structure
HTML Tag
Example
Function
Structure Tags – Must appear on every page!!
HTML
Tells WWW that this is
an HTML document.
Head
Add info that will not
appear on page
Title
Places title of page in
(blue) browser bar
Body
Encloses section of
page that will be
displayed in the
browser
Content
Add organization and interest to a webpage.
Headings
Increase/decrease text
size
Paragraph
(double space)
Separates sections by
adding a blank line
Line Break
(single space)
Creates a new line as
if using the ENTER
key; no extra space
Creates a bulleted list
Unordered List
Monday
Tuesday
Wednesday
Creates a numbered
list
Ordered List
6414 Multimedia and Webpage Design
1. Monday
2. Tuesday
3. Wednesday
Summer 2011
Unit B
Page 263
Type of Tag
HTML Tag
Example
Function
Horizontal Rule
Creates horizontal
lines on page
Bold
Creates bold text
Italics
Creates italicized text
Image
Embeds an image in
an HTML page
Linking
Creates a link to
another document
Comment
Inserts a comment
that appears in the
HTML code but is not
displayed in the
browser.
Write the four
HTML tags that
are required for
a webpage.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 264
3.02 Basic HTML Tag Notes—KEY
Work the HTML tutorial at the W3Schools website http://www.w3schools.com/html/html_intro.asp
to find the correct HTML tag and an example (including closing tags) for each tag in the chart
below. Complete the tutorial through the HTML Quick List, omitting Tables and Forms.
Type of
Tag
Structure
HTML Tag
Example (Answers will vary)
Function
Structure Tags – Must appear on every page!!
<html>
<html>
Text in here describes the webpage
</html>
Tells WWW that this
is an HTML
document.
Head
<head>
<head>
<title>Title of the document</title>
</head>
Add info that will not
appear on page
Title
<title>
<title>Title of the document</title>
Places title of page in
(blue) browser bar
<html>
<body>
Text in here is the visible page
content
</body>
</html>
Encloses section of
page that will be
displayed in the
browser
HTML
Body
<body>
Content
Add organization and interest to a webpage.
Headings
<h1> largest,
through
<h6>, smallest
Paragraph
(double
space)
<p>
Line Break
(single
space)
<br />
Unordered
List
<ul>
<h1>This is a large heading</h1>
Increase/decrease
text size
<p>This is a paragraph</p>
Separates sections
by adding a blank line
<p>This is a paragraph with<br /> line
breaks</p>
Creates a new line as
if using the ENTER
key; no extra space
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
6414 Multimedia and Webpage Design
Summer 2011
Creates a bulleted list
Unit B
Monday
Tuesday
Wednesday
Page 265
Ordered
List
Horizontal
Rule
<ol>
<hr />
Creates a numbered
list
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
1. Monday
2. Tuesday
3. Wednesday
<p>This is text above the rule.</p>
<hr />
<p>This is text below the rule.</p>
Creates horizontal
lines on page
Bold
<b>
<p><b>This text is bold</b></p>
Creates bold text
Italics
<i>
<p><i>This text is italic</i></p>
Creates italicized text
Image
<img>
<img src="image.jpg" width="104"
height="142" />
Embeds an image in
an HTML page
Linking
<a href>
Comment
Write the
four HTML
tags that
are
required for
a webpage.
<!-- text here-->
<a href=”http://www.w3schools.com”> Creates a link to
this is a link</a>
another document
<!--This is a comment. Comments are
not displayed in the browser-->
Inserts a comment
that appears in the
code but is not
displayed in the
browser.
<html>
<head>
<title>Document name goes here</title>
</head>
<body>
Visible text goes here
</body>
</html>
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 266
3.02 Basic HTML Codes
Basic Tags
<html> </html> Creates an HTML document
<head> </head> Sets off the title and other information that isn't displayed on the webpage itself
<body> </body> Sets off the visible portion of the document
Header Tags
<title></title> Puts the name of the document in the title bar
<meta /> Provides information about the page for search engines and browser’s.
The <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> is required.
<meta name=”author” content=”author’s name” /> - provides a search engine with the author’s
name.
<meta name=”description” content=”Description” /> - provides a description of the webpage
that will be displayed when a search engine shows the page’s URL in a hit list.
<meta name=”keywords” content=”list of keywords” /> - provides a list of words that a search
engine should associate with the page.
Text Tags
<h1> </h1> Creates the largest headline
<h6> </h6> Creates the smallest headline
<b> </b> Creates bold text
<i> </i> Creates italic text
Links
<a href="URL"></a> Creates a hyperlink
<a href="mailto:EMAIL"></a> Creates a mailto link
Formatting
<p> </p> Creates a new paragraph
<br /> Inserts a line break
<blockquote> </blockquote> Indents text from both sides
<ol> </ol> Creates a numbered list
<li> </li> Precedes each list item, and adds a number
<ul> </ul> Creates a bulleted list
Graphical Elements
<img src="filename" alt="alternate text" height="number" width="number" /> Adds an image
<hr /> Inserts a horizontal rule
<object> </object> Inserts an embedded object such as an audio or video clip.
<object width="320" height="260> </object> Sets size of object.
A list of W3C HTML tags can be found online at http://www.w3schools.com/tags/default.asp
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 267
3.02 HTML Structure and Content Tags
Basic Page Structure Tags
Code
Identify document type (DTD) for HTML
4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Beginning of HTML webpage
<html>Everything except the DTD must be between
these two tags</html>
Designate the head section of webpage
<head></head>
Title appears in browser bar—should
only appear within the head tags.
<title> Graphic Design, Inc. </title>
Mandatory meta tag—identifies
character set; should only appear within
the head tags
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
Optional meta tag—provides keyword
association for search engines; should
only appear within the head tags
<meta name="description" content ="Custom
computer graphics" />
Identify main portion of page (body)
viewed in browser window
<body>The visible webpage itself goes in between
these two tags</body>
Formatting:
Page Content Tags
Code
Display
Text Style
Create bold text
<b> Hello! </b>
Hello!
Create italicized text
<i> Hello! </i>
Hello!
*Combine enhancements
<b><i> Hello! </b></i>
Hello!
Begin a new line (singlespaced)
Hello!<br />My name is Sam.
Hello!
My name us Sam.
New paragraph (doublespaced)
Hello! <p>My name is Sam. </p>
Hello!
Line and Paragraph Spacing
My name is Sam.
Images
Insert image
6414 Multimedia and Webpage Design
<img src="flower.gif" />
Summer 2011
Places image on webpage
Unit B
Page 268
3.02 HTML Tags Quiz
Name: _______________________
Directions: In the right column, write the HTML code to display the item in the left column.
Use both opening and closing tags.
Item
HTML Code
1. HTML document.
2. Bold text.
3. Body of webpage.
4. The largest heading size.
5. The smallest heading size.
6. Paragraph.
7. Line break.
8. Italicized text.
9. Page title: "My Website".
10. Text: "Microsoft" hyperlinked
to www.microsoft.com.
11. Insert image file: mypic.jpg
12. Image (mypic.jpg)
hyperlinked to
www.microsoft.com.
13. Email link to
[email protected] on
the text "Email".
14. An unordered list of 3 items:
apples, bananas, oranges.
15. An ordered list of 3 items:
President, Vice President,
Secretary.
16. Horizontal rule.
17. The paragraph: The World
Wide Web Consortium
(W3C) recommends
lowercase tags in their HTML
4.01 recommendation, and
XHTML (the next generation
HTML) demands lowercase
tags.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 269
3.02 HTML Tags Quiz—KEY
Directions: In the right column, write the HTML code to display the item in the left column.
Use both opening and closing tags.
Item
1. HTML document.
2. Bold text.
3. Body of a webpage.
4. The largest heading size.
5. The smallest heading size.
6. Paragraph.
7. Line break.
8. Italicized text.
9. Page title: "My Website".
10. Text: "Microsoft" hyperlinked
to www.microsoft.com.
11. Insert image file: mypic.jpg
12. Image (mypic.jpg)
hyperlinked to
www.microsoft.com.
13. Email link to
[email protected] on
the text "Email".
14. An unordered list of 3 items:
apples, bananas, oranges.
15. An ordered list of 3 items:
President, Vice President,
Secretary.
16. Horizontal rule.
17. The paragraph: The World
Wide Web Consortium (W3C)
recommends lowercase tags
in their HTML 4.01
recommendation, and
XHTML (the next generation
HTML) demands lowercase
tags.
6414 Multimedia and Webpage Design
HTML Code
<html> </html>
<b> </b>
<body> </body>
<h1> </h1>
</h6> </h6>
<p> </p>
<br />
<i> </i>
<title>My Website</title>
<a href=”http://www.microsoft.com”>
Microsoft</a>
<img src="mypic.jpg" />
<a href="http://www.microsoft.com"><img
src="mypic.jpg" /></a>
<a
href="mailto:[email protected]">Email</
a>
<ul>
<li>apples</li>
<li>bananas</li>
<li>oranges</li>
</ul>
<ol>
<li>President</li>
<li>Vice President</li>
<li>Secretary</li>
</ol>
<hr />
<p>The World Wide Web Consortium (W3C)
recommends lowercase tags in their HTML 4.01
recommendation, and XHTML (the next generation
HTML) demands lowercase tags.</p>
Summer 2011
Unit B
Page 270
3.02 Website File Management Notes
The Root Folder
Index File
Subfolders
(Home Page)
Folder Names and
Filenames
Hyperlinks within
the site
Hyperlinks to
other websites
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 271
3.02 Website File Management Notes Key (Answers May Vary)
The Root Folder
The main folder in which all files and subfolders of a website are saved.
Index File
Subfolders
(Home Page)
Subfolders can be used
to organize content
within the root folder.
The home page of the
website.
Folder Names and
Filenames
Use lowercase
letters for all folder
and filenames.
Hyperlinks within
the site
Use relative
hyperlinks to point
to other files within
the website.
Hyperlinks to
other websites
Use absolute
hyperlinks to point
to other websites.
Ex: news.html
Ex:
http://www.citizentimes.com
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 272
3.02 Website File Management Activity
Directions: Create the following in a storage location designated by your teacher.
Element
Folder/File Name
Path to folder/file from
root folder
1. Make a Root Folder for the
website.
2. Make an Images Folder inside
the root folder.
3. Make a Pages Folder inside the
root folder.
4. Inside the Root Folder, create an
index/home page with the page
title and heading "Website File
Management".
5. Inside the Pages Folder, create
two pages:
1. File Management for one
page title and heading
2. Root Directory for the other
page title and heading
6. Inside the Images Folder, save an
image that represents file
management or site design.
Directions: Use a text editor to enter the HTML code for the index and other two webpages
listed in the table below.
Element
7. Image on index page.
8. Relative links on index page to the other two pages.
9. Relative links on the other two pages to the index page.
10. Absolute links on index page to three website design companies in NC.
11. 1 absolute link on each of the other two pages: On one page link to the definition for
“file management” at www.webopedia.com and on the other page link to the definition
for “root directory”. Visit the site to search for each term’s address.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 273
3.02 Website File Management Activity—Key
Directions: Create the following in a storage location designated by your teacher.
Element
Folder/File Name
Path to folder/file
from root folder
Answers will vary.
1.
Make a Root Folder for the website.
2.
Make an Images Folder inside the root
folder.
Answers will
vary.
Answers will
vary.
3.
Make a Pages Folder inside the root
folder.
Answers will
vary.
Answers will vary.
4.
Inside the Root Folder, create an
index/home page with the page title and
heading "Website File Management".
Inside the Pages Folder, create two
pages:
1. File Management for one page title
and heading
2. Root Directory for the other page
title and heading
Inside the Images Folder, save an image
that represents file management or site
design.
Answers will
vary.
Answers will vary.
Answers will
vary.
Answers will vary.
5.
6.
Answers will vary.
Directions: Use a text editor to enter the HTML code for the index and other two webpages
listed in the table below.
Element
7. Image on index page.
8. Relative links on index
page to the other two
pages.
9. Relative links on the other
two pages to the index
page.
10. Absolute links on index
page to three website
design companies in NC.
<img src="images/sitemgt.jpg" />
<a href="pages/fileman.html">File Management</a>
<a href="pages/rootdir.html">Root Directory</a>
<a href="../index.html">Home</a>
<ul>
<li><a href="http://www.richswebdesign.com/">Rich's Web
Design</a></li>
<li><a href="http://www.tvlala.com/">TVLaLa
Consulting</a></li>
<li><a
href="http://www.atlanticbt.com/">AtlanticBT</a></li>
</ul>
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 274
11. 1 absolute link on each of
the other two pages: On
one page link to the
definition for “file
management” at
www.webopedia.com and
on the other page link to
the definition for “root
directory”. Visit the site to
search for each term’s
address.
<a href="http://www.webopedia.com/TERM/f/file_manage
ment_system.html">Webopedia's definition of file
management.</a>
<a
href="http://www.webopedia.com/TERM/r/root_directory.ht
ml">Webopedia's definition of root directory.</a>
Your pages will
look something
like this!
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 275
Name: _______________________
3.02 Use a Text Editor to Create a Simple Webpage
Directions: Open a text editor and enter the HTML code to create a webpage with the
following content elements. Be sure to save your file as My First Webpage with an .html
extension. Open the file in your browser to check for correct display. Keep the text editor and
the browser open. Each time you save changes in the text editor, refresh the browser window
to see the results. Make sure tags are nested properly.
Element
1.
DOCTYPE Declaration—
Required for HTML 4.01
HTML Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
2. Define the page as HTML.
3. Open the head section.
4. Meta tag—required
5.
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
Page title: Autobiography of
Student Name
6. Close head section.
Largest heading size for text:
7. Student Name’s
Autobiography
8.
Insert digital picture of
student.
9. Horizontal rule.
Second largest heading size
10. for italicized text: Birth
Statistics
Bulleted list for the following
(add personal data)
Date:
11.
Place
Time
Weight
12. Blank line.
Two brief paragraphs
describing your life.
Second largest heading size
14. for italicized text: My
Favorite Websites
13.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 276
Numbered list for the
following: (add personal
data)
1. Site Name with
15.
hyperlink to site.
2. Site Name with
hyperlink to site.
3. Site Name with
hyperlink to site.
16. Blank line
Text: Email Me! with email
17. hyperlink to student’s email
address.
18. Closing tags for document.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 277
3.02 Use a Text Editor to Create a Simple Webpage—KEY
Directions: Open a text editor and enter the HTML code to create a webpage with the
following content elements. Be sure to save your file as My First Webpage with an .html
extension. Open the file in your browser to check for correct display. Keep the text editor and
the browser open. Each time you save changes in the text editor, refresh the browser window
to see the results. Make sure tags are nested properly.
Element
1.
DOCTYPE Declaration—
Required for HTML 4.01
HTML Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
2. Define the page as HTML.
<html>
3. Open the head section.
<head>
4. Meta tag—required
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
5.
Page title: Autobiography of
Student Name
6. Close head section.
<title>Autobiography of Student Name</title>
</head>
Largest heading size for text:
7. Student Name’s
<h1>Student Name’s Autobiography</h1>
Autobiography
Insert digital picture of
8.
<img src="imagefile.jpg" />
student.
9. Horizontal rule.
Second largest heading size
10. for italicized text: Birth
Statistics
Bulleted list for the following
(add personal data)
Date:
11.
Place
Time
Weight
<hr />
<h2><i>Birth Statistics</i></h2>
<ul>
<li>Date: Student adds personal data here.</li>
<li>Place: Student adds personal data here.</li>
<li>Time: Student adds personal data here.</li>
<li>Weight: Student adds personal data here.</li>
</ul>
12. Blank line.
<br />
Two brief paragraphs
describing your life.
Second largest heading size
14. for italicized text: My
Favorite Websites
<p>Student adds personal data here.</p>
<p>Student adds personal data here.</p>
<h2><i>My Favorite Websites.</i></h2>
13.
6414 Multimedia and Webpage Design
Note to Teacher: Check for proper nesting here.
Summer 2011
Unit B
Page 278
Numbered list for the
following: (add personal
data)
1. Site Name with
15.
hyperlink to site.
2. Site Name with
hyperlink to site.
3. Site Name with
hyperlink to site.
<ol>
<li><a href=”http://urlofsite1.ext”>Site
Name</a></li>
<li><a href=”http://urlofsite2.ext”>Site
Name</a></li>
<li><a href=”http://urlofsite3.ext”>Site
Name</a></li>
</ol>
Note to Teacher: Check for proper nesting here.
16. Blank line
<br />
Text: Email Me! with email
17. hyperlink to student’s email
address.
<a href="mailto:[email protected]">Email
Me!</a>
18. Closing tags for document.
</body>
</html>
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 279
3.02 XHTML Tutorial Activity
Visit the W3Schools XHTML Tutorial, http://www.w3schools.com/xhtml/xhtml_intro.asp, to
complete the questions below.
1. XHTML is almost identical to HTML ______________.
2. XHTML is HTML defined as an _____________________ application.
3. XHTML is a _______________ recommendation.
4. XHTML is a ___________________ and ____________________ version of HTML.
5. XHTML 1.0 became a W3C recommendation in _____________.
6. Why would a web designer code in XHTML?
7. In looking at the HTML 4.01 Reference Chart, what tags have been deprecated?
8. What does deprecated mean?
9. List the four most important differences between HTML and XHTML and give an
example of each.
1)
2)
3)
4)
10. What is the basic XHTML document structure?
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 280
3.02 XHTML Tutorial Activity
Page 2
11. List five XHTML Syntax Rules and give an example of each
1)
2)
3)
4)
5)
12. What is the most common DOCTYPE Declaration? ________________________
13. What are the three XHTML DTDs?
1)
2)
3)
14. Which DOCTYPE should be used for really clean markup, free of presentational clutter?
_____________________________________
15. What are the five steps to convert an HTML document to XHTML?
1)
2)
3)
4)
5)
16. How can an XHTML document be validated?
17. What must be input in order to validate an XHTML document with the W3C Validator?
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 281
3.02 XHTML Tutorial Activity—KEY
Visit the W3Schools XHTML Tutorial, http://www.w3schools.com/xhtml/xhtml_intro.asp, to
complete the questions below.
1. XHTML is almost identical to HTML __4.01____________.
2. XHTML is HTML defined as an ____XML_________________ application.
3. XHTML is a ___W3C____________ recommendation.
4. XHTML is a _stricter__________ and __cleaner__________ version of HTML.
5. XHTML 1.0 became a W3C recommendation in __2000_________.
6. Why would a web designer code in XHTML?
XHTML combines the strengths of HTML and XML—well-formed documents and
well-displayed data. XHTML is useful now and in the future.
7. In looking at the HTML 4.01 Reference Chart, what tags have been deprecated?
<applet>
<basefont />
<center> (centered text)
<dir> (directory list)
<font>
<isindex> (searchable index)
<menu> (menu list)
<s> (strikethrough text)
<strike> (strikethrough text)
<u> (underlined text)
<xmp> (preformatted text)
8. What does deprecated mean?
Deprecated tags are superceded and should not be used. These tags have been
made invalid or obsolete.
9. List the four most important differences between HTML and XHTML and give an
example of each. Examples may vary.
1) XHTML elements must be properly nested.
<b><i>This text is bold and italic</i></b>
2) XHTML elements must always be closed.
<p>This is a paragraph</p>
3) XHTML elements must be in lowercase.
<body> </body>
4) XHTML documents must have one root element (all XHTML elements
nested within the <html> tag).
<html>
<head> ... </head>
<body> ... </body>
</html>
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 282
3.02 XHTML Tutorial Activity—KEY
Page 2
10. What is the basic XHTML document structure?
<html>
<head> ... </head>
<body> ... </body>
</html>
11. List five XHTML Syntax Rules and give an example of each. (Examples may vary.)
1) Attribute names must be in lower case. <table width="100%">
2) Attribute values must be quoted. <table width="100%">
3) Attribute minimization is forbidden. <input checked="checked" />
4) The id attribute replaces the name attribute. <img src="picture.gif" id="pic1"
/>
5) The XHTML DTD defines mandatory elements. All XHTML documents must
have an XHTML DOCTYPE declaration. The html, head, title, and body
elements must be present.
12. What is the most common DOCTYPE Declaration? _XHTML Transitional__________
13. What are the three XHTML DTDs?
1) STRICT
2) TRANSITIONAL
3) FRAMESET
14. Which DOCTYPE should be used for really clean markup, free of presentational clutter?
______STRICT_____________________________
15. What are the five steps to convert an HTML document to XHTML?
1) Add an XHTML DOCTYPE declaration.
2) Change all attribute values and tags to lowercase.
3) Put all attribute values in quotes.
4) Replace empty tags--<hr>, <br>, and <img> with <hr />, <br /> and <img />
5) Validate with the W3C DTD Validator. Edit errors manually.
16. How can an XHTML document be validated?
By using the W3C Validator http://validator.w3.org/check/referer
17. What must be input in order to validate an XHTML document with the W3C Validator?
A web address (URL) must be input in order to validate an XHTML document.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 283
3.02 Creating an XHTML Webpage
Retrieve the HTML webpage that you created in the 3.02 Use a Text Editor to Create a
Simple Webpage (My First Webpage.html) activity. Make the changes that are necessary to
convert the HTML document into an XHTML document. Save the webpage as My XHTML
Page. List the changes that you made below.
How many changes did you need to make?
Was it difficult to make the changes? Why or why not?
How would you check the accuracy of your XHTML coding?
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 284
3.02 Creating an XHTML Webpage—KEY
Retrieve the HTML webpage that you created in the 3.02 Use a Text Editor to Create a
Simple Webpage (My First Webpage.html) activity. Make the changes that are necessary to
convert the HTML document into an XHTML document. Save the webpage as My XHTML
Page. List the changes that you made below.
The DOCTYPE Declaration must be changed in the first line of code (before the <html> tag>).
This is the correct XHTML DTD:
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
NOTE
If students' coding on the original assignment was correct, all other coding should have already
been XHTML compliant because the students have learned strict coding guidelines:
1) properly nested.
2) XHTML elements must always be closed
3) XHTML elements must be in lowercase.
4) XHTML documents must have one root element (all XHTML elements
nested within the <html> tag).
How many changes did you need to make? One—XHTML DOCTYPE declaration
Was it difficult to make the changes? Why or why not? Easy—students have
already learned "clean" HTML coding techniques.
How would you check the accuracy of your XHTML coding? Use the W3C XHTML
Validator
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 285
3.02 CSS Tutorial Notes
Name _________________________________
Work through the W3Schools CSS Tutorial http://www.w3schools.com/css/default.asp to complete the chart.
Rules for Cascading—Lowest to highest priority
Cascading
1.
2.
3.
4.
Order
Three Parts of Syntax—
name and description
CSS Syntax
Example
Rule
If value is more
than one word
Example
Rule
If more than
one property is
specified
Example
Rule
Grouping
Selectors
Example
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 286
3.02 CSS Tutorial Notes
Name _________________________________
Work through the W3Schools CSS Tutorial http://www.w3schools.com/css/default.asp to complete the chart.
Use and Rule
CSS Comments
Example
Inserting Style
Sheets
Type of Sheet
Description/Use
Example
External
Internal
Inline Styles
CSS Text
Text Color
Set by:
Description/Use
Example
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 287
3.02 CSS Tutorial Notes
Name _________________________________
Work through the W3Schools CSS Tutorial http://www.w3schools.com/css/default.asp to complete the chart.
Description/Use:
Example:
Example:
Text Alignment
Text
Indentation
Description/Use:
Example:
CSS Font
Font Family
Font Size
Description/Use
Example
Description:
Example:
Setting Font Family
Set Using Pixels
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 288
3.02 CSS Tutorial Notes—KEY (Answers May Vary)
Work through the W3Schools CSS Tutorial http://www.w3schools.com/css/default.asp to complete the chart.
Rules for Cascading—Lowest to highest priority
1.
2.
3.
4.
Cascading
Order
Browser default
External style sheet
Internal style sheet (in Inline style (inside an
the head section)
HTML element)
Three Parts of Syntax—
name and description
CSS Syntax
Example
Rule
If value is more
than one word
Example
Rule
If more than
one property is
specified
Example
Rule
Grouping
Selectors
Example
6414 Multimedia and Webpage Design
Selector—HTML tag
you wish to define
Property—attribute
you wish to change
Value—each property
can take a value
selector {property:value;}
body {color:black;}
Put quotes around the value
p {font-family:"sans serif";}
You must separate each property with a semicolon.
p {text-align:center;color:red;} is a center aligned paragraph with red text
color
Separate each selector with a comma.
h1,h2,h3,h4,h5,h6
{color:green;} header elements are grouped together; all text will be
green
Summer 2011
Unit B
Page 289
3.02 CSS Tutorial Notes—KEY (Answers May Vary)
Work through the W3Schools CSS Tutorial http://www.w3schools.com/css/default.asp to complete the chart.
Comments are used to explain the HTML code—helps when code is
Use and Rule
edited later. Comments are ignored by browsers. A CSS comment
CSS Comments
begins with a "/*" and ends with a "*/"
Example
/*This is a comment*/
Inserting Style
Type of Sheet
Description/Use
Example
Sheets
Ideal when style is applied to
hr {color:sienna;}
External
many pages. Each page must
p {margin-left:20px;}
link to the style sheet. CSS file
body {backgrounddoes not contain html tags.
image:url("images/back40.gif");}
Used when a single document
<head>
has a unique style. Define
<style type="text/css">
internal style in head section by
hr {color:sienna;}
using the <style> tag.
p {margin-left:20px;}
Internal
body {backgroundimage:url("images/back40.gif");}
</style>
</head>
Use sparingly. Loses many of
<p style="color:sienna;marginthe advantages of style sheets.
left:20px">This is a paragraph.</p>
Inline Styles
Use the style attribute in the
changes the color and left margin
relevant tag.
CSS Text
Text Color
Set by:
Description/Use
Example
specify a color
Name
name, like "red"
body {color:blue;}
RGB
Hex
6414 Multimedia and Webpage Design
specify an RGB
value like
"rgb(255,0,0)"
specify a hex value
like "#ff000"
Summer 2011
Unit B
h2 {color:rgb(255,0,0);}
h1 {color:#00ff00;}
Page 290
3.02 CSS Tutorial Notes—KEY (Answers May Vary)
Work through the W3Schools CSS Tutorial http://www.w3schools.com/css/default.asp to complete the chart.
Description/Use:
Example:
Example:
Text Alignment Used to set horizontal
h1 {text-align:center;}
p.main {text-align:justify;}
alignment of text.
p.date {text-align:right;}
Description/Use:
Example:
Text
Used to specify
p {text-indent:50px;}
Indentation
indentation of first line of
text.
CSS Font
Description/Use
Example
Set with the font-family property. If
font family is more than one word, use p{font-family:"Times New
Font Family
quotation marks. Specify several font Roman",Georgia,Serif;}
Setting Font Family
names in case browser does not
support first font; separate with
commas.
Description:
Example:
Gives full control over the text
h1 {font-size:40px;}
Font Size
Set Using Pixels
size
h2 {font-size:30px;}
p {font-size:14px;}
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 291
3.02 Basic CSS Properties Notes
Basic Tags
Inline Style Creates an inline style. Code is placed inside the opening tag of the desired tag.
style=”property: value”
Example: <p style=”color:red”>
Internal Style Sheet Creates an internal style sheet. Code is placed in the <head> section.
<style type=”text/css”>
hr {color: red;}
</style>
External Style Sheet Links the webpage to an external style sheet.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
Body Styles
background-color:yellow; Sets the background color.
background-image:url('paper.gif'); Sets the background to an image.
Text Styles
color:red; Changes the text color. Values: name, hexadecimal (#ff0000), rgb(255,0,0).
text-align:center; Aligns the text horizontally. Values: left, right, center, justify.
text-decoration:underline; Underlines text..
text-indent:50px; Indents text from the left.
text-transform:uppercase; Controls capitalization. Values: none, capitalize, uppercase, lowercase.
Font Styles
font-family:arial; Sets the typeface for text. Typefaces with multiple words in their name should be
enclosed inside quotes. Values: font name, generic name (serif, sans-serif, cursive, fantasy,
monospaced)
font-size:100%; Sets the font size. Values: xx-small, x-small, small, medium, large, x-large, xx-large,
smaller, larger, %
font-style:normal; Sets the font style for paragraphs. Values: normal, italic, oblique.
Link Styles
a:link {color:#FF0000;} Sets color for an unvisited link.
a:visited {color:#FF0000;} Sets color for an visited link.
a:hover {color:#FF0000;} Sets color for a mouse over link.
a:active {color:#FF0000;} Sets color for the selected link.
List Styles
list-style-image:url(“image.gif”); Sets list item marker to an image.
list-style-type: Sets the item marker type. Values: none, circle, disc, square, decimal, lower-alpha,
lower-greek, lower-lating, lower-roman, upper-alpha, upper-latin, upper-roman
A list of CSS properties can be found online at:
http://www.w3schools.com/css/css_reference.asp
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 292
3.02 CSS Internal Style Sheet Activity
Name _____________________
Retrieve the HTML webpage that you created in 3.02 Creating an HTML Webpage (My HTML
Webpage). Create a CSS internal style sheet that will apply the features in the chart below to
the entire page. As needed, refer to the 3.02 CSS Tutorial Notes that you completed, or the
W3Schools CSS Tutorial http://www.w3schools.com/css/default.asp and CSS reference charts
posted on the site. Complete the individual steps below and then show the coding for the
entire style sheet in the last cell.
Style
Code
Define Internal Style
Sheet (within head
section)
Text color green
Text alignment center
Font-family Verdana
Text size 16 pixels
Show Complete Internal
Style Sheet Coding
When you have completed the internal style sheet coding, exchange your code with another
student. Each student should evaluate the other student's code, checking for correct coding
for each item in the checklist above. Give the other student constructive feedback about
his/her CSS style sheet coding.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 293
3.02 CSS Internal Style Sheet Activity—Key
Retrieve the HTML webpage that you created in 3.02 Creating an HTML Webpage (My HTML
Webpage). Create a CSS internal style sheet that will apply the features in the chart below to
the entire page. As needed, refer to the 3.02 CSS Tutorial Notes that you completed, or the
W3Schools CSS Tutorial http://www.w3schools.com/css/default.asp and CSS reference charts
posted on the site. Complete the individual steps below and then show the coding for the
entire style sheet in the last cell.
Style
Code
Define Internal Style
Sheet
<head>
<style type="text/css"> …(insert coding below)
</style>
</head>
Text color green
body {color:green;}
Text alignment center
p {text-align:center;}
Font-family Lucida
Console
p {font-family:"Lucida Console";}
Text size 16 pixels
p {font-size:16px;}
Show Complete Internal
Style Sheet Coding
<head>
<style type="text/css">
body {color:green;text-align:center;fontfamily:"Lucida Console";font-size:16px;}
</style>
</head>
When you have completed the internal style sheet coding, exchange your code with another
student. Each student should evaluate the other student's code, checking for correct coding
for each item in the checklist above. Students should give each other constructive feedback
about their CSS style sheet coding.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 294
3.02 Principles of Good Webpage Design Guidelines
Topic
Design Guidelines
Webpage
Design vs Print
Document
Design
Use clear titles to capture the reader’s attention.
Include a title in the <head> section in case viewers bookmark
your page.
Place a link to the “home” URL on at least the main pages of the
site.
Provides connection back to where a page originated.
Overall Page
Layout
Place the most important items or information near the top!
Be consistent in all design elements used on all pages —fonts,
colors, graphic size and location, alignment, and backgrounds.
Use white space to divide the page into “chunks” of information
that readers can quickly scan.
Home/Index
Page
Creates positive first impression of site
Communicates purpose of the website
Place the company’s logo on the page and use it in a consistent
location throughout the website.
Include navigational links or menus.
Limit to one screen of information.
Limit amount of prose text on home page.
Show all major options on home page. Enable access to home
page from any other page on the website.
Announce changes to the website on home page.
Cascading Style
Sheets
Intent of the site
and Target
audience
Help ensure consistency throughout the website.
Increase editing speed
Change settings of the style once to update all
documents using that style
Similar to styles in word processor
Consider the intent of the site and the target audience when
selecting:
Typefaces
Size
Alignment
Line length
Paragraphs
Type as a graphic
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 295
Topic
Text—Typefaces
Design Guidelines
Use typefaces designed for on-screen viewing
Sans serif typefaces are easier to read on computer screens.
Use “font-family” property in styles to specify typeface.
Display resolutions and operating systems vary.
12 point on one machine may display as 14 point on
another.
Windows web browsers typically display type that is 2 to 3
points larger than a Macintosh.
Text—Size
Text—Alignment
Left justified text is the most legible option for webpages.
Use indents or a blank line to indicate a new paragraph.
Use paragraph tag <p> in html to leave a blank line.
Use non-breaking spaces ( ) to indent.
Use initial caps for headlines and headings.
Use sentence case for body text.
All caps are difficult to read.
Use italics to stress foreign words or phrases or to list book and
periodical titles.
Use bold to emphasize headings.
Don’t overuse a—it will lose the effect of adding
emphasis.
Do not use underlining—it implies a hyperlink.
Use contrasting colors for background and text.
Indicate to users when a link will move them to a page on a
different website.
Add URL below the link
Add an exit disclaimer
Add an interim page warning the user that they are
leaving your site and requiring them to click an additional
link to leave your site.
Text—
Paragraphs
Text Issues—
General
Guidelines
Text as a
Graphic
Use for banners and navigational graphics.
Avoid using text as a graphic for headings, subheadings and
body text in case the graphic does not load properly on the
viewer’s browser.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 296
Topic
Design Guidelines
Headings and
Titles
Lists
Graphics on the
Web
Multimedia—
Overall
Considerations
Use headings that are unique from one another, descriptive and
relate to the content they introduce.
Use headings in the appropriate HTML order.
Helps users get a sense of hierarchy of information on
the page
Also helps users of assistive technologies understand the
level of importance of information
Use a descriptive, unique, concise, and meaningful title for each
webpage in the website.
Titles display in the browser’s title bar.
Titles are used by search engines to identify pages and
are listed on the results page.
Display a series of related items in a list.
Provide a descriptive heading for the list.
Make lists easy to scan and understand
Use meaningful labels, effective colors, borders, and
white space
Capitalize first letter and first word in lists.
Bullets/Unordered List <ul> for items of equal status or value
Place important or most commonly used items at top.
Numbered/Ordered List <ol> for items where a particular order
exists
Organize alphabetically or numerically.
Start numbered items at 1 rather than 0.
Use video, animation, and audio only when they help convey or
support the website’s content.
Place the organization’s logo in a consistent place on every
page.
Use images that add value and increase the clarity of the
information on the site.
Provide controls so that users can stop, start, play, and adjust
volume.
Be aware that embedded media can make total page file size
very large and slow the download process.
Use object or embedded tags to include multimedia elements in
page.
Use anchor tags and href attributes to link to video.
Use combinations of anchor and image tags to link to video.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 297
Topic
Design Guidelines
Multimedia—
Tags
Multimedia—
Audio
Multimedia—
Slide Shows
Effective, low bandwidth way to enhance content.
File sizes are smaller than video.
Do not use as much bandwidth as video.
Use when image quality is a top priority.
Uses a smaller file size than most video so storage and
bandwidth are optimized.
Combine with audio for additional emphasis.
GIF format
Doesn’t require special plug-in
Has no interface control.
Flash becoming dominant animation format.
Use video sparingly, video files tend to be large.
They slow the download speed of the webpage.
Define acronyms and abbreviations.
Use abbreviations sparingly and avoid jargon.
Make first sentences descriptive.
Use active voice.
Minimize the number of words in sentences and the number of
sentences in paragraphs.
Provide text equivalent for non-text elements.
Ensure that all information conveyed in color is also available
without color.
Provide text only pages that are useful for screen readers.
Do not require style sheets.
Multimedia—
Animation
Multimedia—
Video
Writing Web
Content
Accessibility
Issues
Use object or embed tags to include multimedia elements in
page.
Use anchor tags and href attributes to link to video.
Use combinations of anchor and image tags to link to video.
Also consider the including:
Audio
Slide shows
Animation
Video
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 298
3.02 What’s Wrong With the Design?
Directions: Visit the following websites and/or pages. Identify problems in design.
1.
Webpage
http://www.alternativetransportservices.co.uk/
2.
http://www.tracyskarate.com/
3.
http://www.freemap.com/
4.
http://www.disabilityresources.org/
Design Problems
Find another website with bad design features. Give the URL and list the problems with the
design.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 299
3.02 What’s Wrong With the Design?—KEY
Directions: Visit the following websites and/or pages. Identify problems in design.
1.
Webpage
http://www.alternativetransportservices.co.uk/
2.
http://www.tracyskarate.com/
3.
http://www.freemap.com/
4.
http://www.disabilityresources.org/
Design Problems
Home page is several screens
long
Navigation links are difficult to find
graphics distract from links and
information
Too much information on page
Graphics are not consistent—
some photos, some animated gifs
Color is used to emphasize text
and similar colors to show links
Home page is several screens
long
Color is used to emphasize text
and blue links on black
background are difficult to find
Too much text on page
Easy to miss the Click Here for
Simple Navigation Page
Unattractive, distracting colors
Trailing cursor is very distracting—
it is difficult to tell where the links
to further information are
Home page is too wide and too
long
Background does not add to site
Navigation bar only at the bottom
of the site
Colors are not well-suited for
visually impaired visitors (on a
disability resources page)!
Too much text and too many links
on home page—should be multiple
pages with hierarchical structure
Text is very small
Site is difficult to navigate—
information is difficult to find
Find another website with bad design features. Give the URL and list the problems with the
design. Answers will vary. Check to be sure that student understands good and bad design
principles.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 300
3.02 Website Components Notes
Website Components
Website Components
Navigational Links or Menus
Must Contain
Should Contain
About Us Page
Contact Us Page
May Contain
Privacy Policy Page
Home Page (Index Page)
Uses
Splash Page
Site Map
Should be Named
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 301
3.02 Website Components Notes Key (Answers May Vary)
Website Components
Website Components
Must Contain
Home Page
Should Contain
About Us Page
Contact Us Page
Privacy Policy Page
May Contain
Splash Page
Site Map
Navigational Links or Menus
Provide viewers with the links
they will need to navigate the
website.
About Us Page
Defines the website’s purpose
and goals
Contact Us Page
Contains contact information to
make it easy for viewers to
communicate with the business
Privacy Policy Page
Home Page (Index Page)
Uses
Introduces the website and
communicates the purpose of
the website.
Serves as an index for the
website.
Should create a positive first
impression of the website.
Navigational links or menus
Should be Named
index.html
6414 Multimedia and Webpage Design
Informs viewers how their private
information will be handled.
Splash Page
An introduction page that
appears while the site is loading.
Site Map
A basic skeleton of the website
intended to help users quickly
locate information on the website
Summer 2011
Unit B
Page 302
3.02 Website Components Activity
Visit each website listed below. Complete the chart by answering the questions in the heading row.
Website/URL
Is there a
If so, is the splash
splash Page? page effective and/or
necessary? Why?
What is the URL of
the home page?
BBC Blast
http://www.blastgetcreative.co.uk/
Intel Sponsors of Tomorrow
http://www.intel.com/tomorrow/
NC State University
http://www.ncsu.edu/
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 303
Does this site
encourage visitors
to return? Why or
why not?
Website/URL
Is there a
If so, is the splash
splash Page? page effective and/or
necessary? Why?
What is the URL of
the home page?
New York City Virtual Tour
http://pixelcase.com.au/vr/2009/newyork/
Walt Disney Up
http://disney.go.com/disneypictures/up/
The White House
http://www.whitehouse.gov/
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 304
Does this site
encourage visitors
to return? Why or
why not?
3.02 Website Components Activity—KEY
Visit each website listed below. Complete the chart by answering the questions in the heading row.
Website/URL
BBC Blast
http://www.blastgetcreati
ve.co.uk/
Intel Sponsors of
Tomorrow
http://www.intel.com/tom
orrow/
Is there a splash
Page?
If so, is the splash
page effective and/or
necessary? Why?
Yes. The splash page
details the purpose of
and the background
behind the site.
Answers will vary but
may include:
The splash
page is helpful
Viewers can
decide whether or not
they want to enter the
site
The video is
interesting
Answers will vary but
may include:
The splash
page is very eyecatching and futuristic
The splash
page invites visitors to
enter the site
It's interesting
and informative
Yes. The splash page
displays graphic
images and tells
visitors that "In a
moment you will be
able to see how Intel is
creating technology of
the future."
What is the URL of
the home page?
Does this site
encourage visitors
to return? Why or
why not?
Answers will vary
but may include:
Yes. Visitors will want
http://www.bbc.co.uk/b to check back to see
last/
the latest in "young
people's creativity."
http://www.intel.com/c
onsumer/index.htm
Answers will vary
but may include:
Yes. Visitors are
asked for their input.
Previous viewer input
scrolls across the
screen. Visitors will
want to read the
responses.
NC State University
No.
N/A
Answers will vary
http://www.ncsu.edu/
New York City Virtual
Tour
http://www.ncsu.edu/
No. The entire website
6414 Multimedia and Webpage Design
N/A
Summer 2011
http://pixelcase.com.a
Unit B
Page 305
Answers will vary
Website/URL
Is there a splash
Page?
If so, is the splash
page effective and/or
necessary? Why?
is a virtual aerial tour of
New York City. There
http://pixelcase.com.au/v is a link to tour
r/2009/newyork/
information on the left
side of the page.
Walt Disney Up
http://disney.go.com/dis
neypictures/up/
Yes. There is a
preview of the movie
"Up" and a button to
click to enter the site.
What is the URL of
the home page?
Does this site
encourage visitors
to return? Why or
why not?
u/vr/2009/newyork/
Answers will vary but
may include:
The splash
page is very
entertaining
The splash
page invites visitors to
enter the site
http://disney.go.com/di
sneypictures/up/main.
html
Answers will vary
but may include: Yes,
the site displays
various clips from the
movie and gives
additional information
about the movie to the
viewers.
The White House
http://www.whitehouse.g
ov/
No. Various photos are N/A
displayed, but there is
no splash page.
6414 Multimedia and Webpage Design
Summer 2011
http://www.whitehouse
.gov/
Unit B
Page 306
Answers will vary
3.02 Design a Website
Design a website following the steps listed below using a text editor.
1) Design Website Structure—storyboard your website.
2) Create Website
a) Develop linked webpages with multimedia elements using HTML code in a text editor.
b) Format and Link Webpages Using HTML Code
i) Code structural tags
(1) HTML Doctype Declaration—Required for HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
(2) Head
(a) Meta tags in the Head Section give general information about the website.
This meta tag is required:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-88591">
Other meta tags are optional.
(b) Title
(3) Body
ii) Code CSS—Internal style sheet
(1) Code page styles
(a) Background
(b) Horizontal lines
(2) Code text and paragraph styles
(a) Font and enhancements
(b) Lists
(c) Alignment
iii) Code to insert multimedia elements
(1) jpg, gif, png
(2) wav, mp3
(3) avi, mov
3) Publish website to off-site storage and/or portable media.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 307
3.02 Design a Website Page 2
Directions: Using a text editor design a website that follows good design principles. Use the
checklist below as you build your site.
Overall Page Layout—Storyboard
Most important info at top.
Consistency
Headers/Footers
White Space
Appropriate page dimensions.
Text only pages available for screen readers.
Home/Index Page
Positive first impression.
Communicates purpose.
Masthead, site map, etc.
One screen in length.
Limited prose text.
Color
Contrasting background and text colors.
Color scheme evident.
Text
Typeface, Size, and Alignment
Line length
Indents, blank lines, new paragraphs as needed.
Enhancements such as italics, all caps, bold, etc. used appropriately.
Headings, subheadings and body text are not graphics.
Headings and Titles
Unique.
Titles on every page.
Headings used in hierarchical order.
Lists
Style
Descriptive heading for list.
Capitalize first word in each list item.
Graphics
Images add value to site.
Images do not slow download.
Images have height and weight attributes.
Text alternatives available.
Multimedia
Plug-in requirements.
Add value to site and enhance message.
Text alternatives available.
Web Content
Use active voice.
Avoid jargon, abbreviations.
Appropriate sentence and paragraph length
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 308
3.02 Design a Website Rubric
Directions: Using a text editor design a website that follows good design principles. Use the
checklist below as you build your site.
20
Points
15
10
10
5
0
Overall Page Layout—Storyboard
Most important info at top
Consistency
Headers/Footers
White Space
Appropriate page dimensions
Text only pages available for screen
readers
Home/Index Page
Positive first impression
Communicates purpose
Masthead, site map, etc.
One screen in length
Limited prose text
Color
Contrasting background and text
colors
Color scheme evident
Text
Typeface, Size, and Alignment
Line length
Indents, blank lines, new paragraphs
as needed
Enhancements such as italics, all
caps, bold, etc. used appropriately
Headings, subheadings and body text
are not graphics
Headings and Titles
Unique
Titles on every page
Headings used in hierarchical order
Lists
Style
Descriptive heading for list
Capitalize first word in each list item
Graphics
Images add value to site
Images do not slow download
Images have height and weight
attributes
Text alternatives available
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 309
Multimedia
Plug-in requirements
Add value to site and enhance
message
Text alternatives available
Web Content
Use active voice
Avoid jargon, abbreviations
Appropriate sentence and paragraph
length
Total
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 310
3.02 Publishing a Website Notes
Before Publishing
Check site in
multiple browsers.
Validate source
code.
Check Spelling.
Check relative and
absolute links.
Choose a Web Host
Free
Advantages
Disadvantages
6414 Multimedia and Webpage Design
Shared/Virtual
Web Hosts
Advantages
Disadvantages
Summer 2011
Dedicated Web
Hosts
Advantages
Disadvantages
Unit B
Page 311
3.02 Publishing a Website Notes
Page 2
Comparing Web Hosts
Cost
Storage
Reliability
Traffic
File transfer
technology
Obtain a Domain Name
Use an assigned name
Register a unique name
Publish!
Web Host
6414 Multimedia and Webpage Design
Site too large?
Summer 2011
Unit B
Page 312
3.02 Publishing a Website Notes Key (Answers May Vary)
Before Publishing
Check site in
multiple browsers.
Validate source
code.
Check site in
Internet Explorer,
Opera, Firefox, etc.
Validating checks
for errors in HTML
code such as:
Notice differences
and adjust as
necessary.
-Tags spelled
incorrectly
-Tags left open
Check Spelling.
Check relative and
absolute links.
Spelling errors
can turn visitors
away from site.
Make sure they work
properly.
Use web editor’s
spell checking
utility or copy text
to a word
processor to
check for spelling
errors.
Choose a Web Host
Shared/Virtual
Web Hosts
Free
Advantages
No cost
May include free
email account
May include online
web editor with GUI
Disadvantages
No domain names;
usually combines
the free site’s URL
with the path to
specific site
Limited storage
space
Limited technical
support
Pop-up advertising
6414 Multimedia and Webpage Design
Dedicated Web
Hosts
Advantages
Low cost is shared
with others.
Own domain name
Better technical
support
Disadvantages
Restrictions on traffic
volume (more traffic
costs more money!)
Many options such
as email, database
support and multiple
web editor
compatibility
Summer 2011
Advantages
Hosted on its own
server—not shared
with others.
Very powerful—can
accommodate any
kind of software
Disadvantages
Unit B
Very expensive
Requires high
level skills
Page 313
3.02 Publishing a Website Notes Key (Answers May Vary)
Page 2
Comparing Web Hosts
Cost - What can the customer afford?
Storage - How much can the customer afford? What size is the site?
Reliability - Are backup servers in place to host site when main server is offline?
Traffic - Does the host have a maximum number of “hits” per billing cycle?
What is the fee for exceeding the traffic allowance if the site becomes popular?
File transfer technology - Some hosts do not support some web editors and may require
the use of their ftp program.
Obtain a Domain Name
Use assigned name
Difficult for users to remember if
name is unrelated to site purpose and
content
Register a unique name
ICANN (Internet Corporation for Assigned
Names and Numbers) maintains a list of
accredited registrars.
Publish!
Web Host
Upload the files to the
web server.
6414 Multimedia and Webpage Design
Site too large?
Reduce the number and/or size of
multimedia files and images.
Edit pages and remove links to files that
have been deleted.
Remove unnecessary files from the
host server.
Pay for additional storage.
Summer 2011
Unit B
Page 314
3.02 Find a Web Host and Domain Name
Directions: Using a previously created website, research web hosting alternatives and domain
name opportunities.
1.
2.
What is the size of your website?
What is the purpose of the website?
3.
Find three web hosts that could host your
site.
4.
Compare the services and prices of the
three hosts.
5.
Which host would you choose?
6.
List three domain names that you would
like to use for your site.
7.
8.
Research the domain names you listed to
see if they are already in use. (Visit
http://www.internic.org).
Which domain name would you like to
use most?
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 315
3.02 Find a Web Host and Domain Name
Directions: Using a previously created website, research web hosting alternatives and domain
name opportunities.
1.
What is the size of your website?
2.
What is the purpose of the website?
Answers will vary.
Answers will vary. Check to see that
purpose is accurate.
Answers will vary.
3.
Find three web hosts that could host
your site.
4.
Compare the services and prices of
the three hosts.
5.
Which host would you choose?
Check to
see that
Remind students to host can
visit
accept
http://www.icann.org sites of that
to find web hosts.
purpose.
Check to
see that
students
are
comparing
Answers will vary.
based on
cost,
storage,
reliability,
traffic and
file transfer
technology.
Answers will vary. Check to see that student
made a reasonable choice.
Answers will vary.
6.
7.
8.
List three domain names that you
would like to use for your site.
Research the domain names you
listed to see if they are already in
use.
Which domain name would you like
to use most?
6414 Multimedia and Webpage Design
Check for appropriateness. Is it something
that site users would easily remember?
Remind students to visit
http://www.internic.org to research domain
names.
Answers will vary.
Summer 2011
Unit B
Page 316
3.02 Publish a Website!
Directions: Publish a previously created website to a CD or a web host.
Published to:
File transfer
technology used:
Issues with site:
1.
2.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 317
3.02 Publish a Website!—KEY
Directions: Publish a previously created website to a CD or a web host
Published to:
File transfer
technology used:
1.
CD
Drag/drop, Copy/Paste.
Answers will vary. Students
should open index page from
published location and view
site, noting any problems.
FTP, WebDav
Answers will vary. Students
should open browser, type in
URL and browse site, noting
any problems.
2.
Web host
Issues with site:
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 318
3.02 Test Your Webpage!
Directions: Using a previously created webpage, test the webpage by completing the following
tasks:
File name of page_________________________
Item
1.
Validate source code.
http://validator.w3.org/ OR
http://webxact.watchfire.com/
2.
Spell check.
You may have to copy code
and paste it into a word
processor to spell check.
3.
Check all links.
You will need to use a web
browser to check the links.
http://webxact.watchfire.com/
will also check links
6414 Multimedia and Webpage Design
Note Errors Found and Fixed
Summer 2011
Unit B
Page 319
3.02 Test Your Webpage!—KEY
Directions: Using a previously created webpage, complete the following in a web editor, word
processor, or online utility program.
File name of page Answers will vary
Item
Note Errors Found and Fixed
Validate source code.
http://www.w3schools.com/site/site_validate.asp
1.
Answers will vary.
http://validator.w3.org/ OR
http://webxact.watchfire.com/
Spell check.
2. You may have to copy code into a word
processor to spell check.
Answers will vary.
Check all links.
You will need to use a web browser to check
3. the links.
http://webxact.watchfire.com/ will also check
links
Answers will vary.
6414 Multimedia and Webpage Design
Summer 2011
Unit B
Page 320
