Webpage Development and Design



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

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

E. 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.

F. 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.

G. 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.

H. 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: .

c. With a few exceptions, tags occur in pairs with an opening and a closing tag.

i. Example: is an opening tag

ii. Example: is a closing tag.

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: Hello World!

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: , , ,

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:

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 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.

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:

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. - Identifies the beginning of the webpage to the browser.

c. - Head Section – provides identifying information about the webpage that is used by browsers and search engines.

i. - specifies the title of the webpage that will appear in the browser’s title bar and in bookmarks. The is inserted inside the section.

ii. – provides information about the page for search engines and browsers.

a) The is required and identifies the character set used by the webpage.

b) Syntax:

i) - provides a search engine with the author’s name.

ii) - provides a description of the webpage that will be displayed when a search engine shows the page’s URL in a hit list.

iii) - provides a list of words that a search engine should associate with the page.

d.

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. - inserts a ‘line break’ or a single space in the text.

ii. - inserts a paragraph and adds a blank line before and after the paragraph text.

b. Heading Sizes - through bold enclosed text and increase the text size with being the largest and being the smallest.

c. Typeface Styles

i. - bolds the text between the opening and closing tags.

ii. - italicizes the text between the opening and closing tags.

d. Lists

i. - unordered list. Creates a bulleted list. Used for items that do not need to be in a particular order.

ii. - ordered list. Creates a numbered list.

iii. - list item. Items in each type of list are keyed between the opening and closing tags.

e. Images

i. - inserts an image into a webpage.

a) Syntax:

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 .

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: Text to Click

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:

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 tag is placed inside the section of the webpage.

ii. Styles are defined between the opening and closing tags.

iii. Internal style sheets override external style sheets.

c. External style sheet – styles are defined in a separate text file saved with the .css extension.

i. A code is inserted into the 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: Text

b) To right-align text using inline styles:

Text

ii. Body Tag Attributes

a) To set the background to a solid color using inline styles:

b) To set the background to an image using inline styles:

.

iii. Font

a) To change the typeface:

b) To change the color:

c) To change the size:

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

a. Place the organization's logo in a consistent place on every page.

b. Include a title in the 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

Instructional Activities and Resources

|Instructional Activities |Resources |

| |The Purpose of a Website |3.02A Introduction to Web Development and Standards |

| |Facilitate a discussion with the class about the major purposes of websites while viewing |PowerPoint presentation. |

| |the 3.02A Introduction to Web Development and Standards PowerPoint presentation. Visit the |3.02 Purposes of Websites Graphic Organizer. |

| |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 |3.02 Web Development Standards PowerPoint Notes |

| |facilitates a discussion of the web standards section of the PowerPoint presentation, 3.02A |3.02A Introduction to Web Development and Standards |

| |Introduction to Web Development and Standards. |PowerPoint presentation |

| |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 |Websites: |

| |Visit the W3Schools website with students. Have students read the chapters on web | |

| |standards, and the W3C, | |

| |. |3.02 Web Standards and the W3C activity |

| |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 |3.02B Authoring Languages and Text Editors PowerPoint |

| |authoring languages and text editors that are available. |presentation |

| |Have students take notes on the 3.02 Authoring Languages and Text Editor Notes graphic |3.02 Authoring Languages Text Editor Notes Graphic |

| |organizer. |Organizer |

|Instructional Activities and Resources continued on next page. |

| |Authoring Languages Activity | |

| |Have students complete the matching activity, 3.02 Authoring Languages, to reinforce main |3.02 Authoring Languages activity |

| |characteristics of authoring languages. |3.02 Authoring Languages activity Key |

| |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 |3.02 Text Editors and Style Sheets Activity |

| |to visit the websites to complete the activity. |3.02 Text Editors and Style Sheets Activity Key |

| |When all students have completed the activity, facilitate a class discussion about their |Websites – refer to the activity for a list of |

| |findings. |websites to be visited. |

| |Website Organization |3.02C Website Organization PowerPoint presentation |

| |Show the PowerPoint presentation, 3.02C Website Organization and discuss the need to plan a |3.02 Website Organization PowerPoint Notes |

| |website and manage it properly. |3.02 Website Organization PowerPoint Notes KEY |

| |Have students take notes on the 3.02 Website Organization PowerPoint Notes graphic | |

| |organizer. | |

| |Information Architecture |3.02 Information Architecture activity |

| |Have students complete the 3.02 Information Architecture activity by visiting the websites |3.02 Information Architecture activity Key |

| |at the right and classifying important characteristics of the websites. |Websites |

| |When students have completed the activity, facilitate a class discussion. | |

| | | |

| | | |

| |Website Structures | |

| |Have students complete the 3.02 Website Structures activity. |3.02 Website Structures activity |

| |When students have completed the activity, facilitate a class discussion about the activity.|3.02 Website Structures activity Key |

|Instructional Activities and Resources continued on next page. |

| |HTML Overview | |

| |Show the PowerPoint presentation, 3.02D HTML Overview PowerPoint Presentation. Facilitate a|3.02D HTML Overview PowerPoint Presentation |

| |class discussion about HTML tags and how to use them. |3.02 Creating a Webpage Using HTML Notes |

| |Have students take notes on the 3.02 HTML Overview Notes graphic organizer during the | |

| |presentation and discussion. | |

| |HTML Structure, Content, and Format Tags | |

| |Have students complete the online HTML tutorial, |Online HTML tutorial |

| | (Introduction through Color Names, omitting | |

| |Tables and Forms) at W3Schools. |3.02 Basic HTML Tag Notes |

| |Teachers may want to complete the "Introduction" portion of the tutorial as a class |3.02 Basic HTML Tag Notes—KEY |

| |demonstration. |Complete HTML Reference |

| |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, | |

| |. | |

| |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 [pic] 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. |3.02 Basic HTML Codes handout |

| |Students may want to refer to these charts in all of the activities involving HTML coding in|3.02 HTML Structure and Content Tags |

| |this unit. | |

| |Handouts may be distributed electronically or given in hard-copy. | |

|Instructional Activities and Resources continued on next page. |

| |HTML Quiz | |

| |Have students complete the 3.02 HTML Tags Quiz to assess entry-level HTML coding concepts. |3.02 HTML Tags Quiz |

| |When all students have completed the quiz, facilitate a class discussion of the HTML coding |3.02 HTML Tags Quiz Key |

| |on the quiz. |Websites |

| |If students need further practice, refer them to the HTML Examples on the W3Schools website |Tutorial Examples: |

| | | |

| |Students can then assess their understanding of HTML tags by taking the HTML Quiz at the |W3C Online HTML Quiz: |

| |W3Schools website . |. |

| |Website File Management | |

| |Have students view the 3.02E Website File Management PowerPoint presentation to learn about |3.02E Website File Management PowerPoint presentation |

| |website file management. |3.02 File Management Notes graphic organizer |

| |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. |3.02 Website File Management Activity |

| |Circulate and offer assistance as needed. |3.02 Website File Management Activity Key |

| |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. |3.02 Use a Text Editor to Create a Simple Webpage |

| |Students will create a simple webpage using HTML code. |activity |

| |Have students key the HTML code using a text editor such as Notepad or WordPad. Detailed |3.02 Use a Text Editor to Create a Simple Webpage Key |

| |instructions for text editors can be found at this link on the W3Schools website: |Website Directions for Using a text editor: |

| |. |. |

| |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. | |

|Instructional Activities and Resources continued on next page. |

| |XHTML Tutorial | |

| |Have students complete the online XHTML Tutorial, |Online XHTML tutorial |

| | at W3Schools. Students should work the | |

| |tutorial through the XHTML Summary and take notes on the 3.02 XHTML Tutorial Activity. |3.02 XHTML Tutorial Activity |

| |Facilitate a class discussion about XHTML and the differences between HTML and XHTML. |3.02 XHTML Tutorial Activity Key |

| |Have students give a thumbs-up, thumbs-down, or thumbs-horizontal to show their |Online XHTML Quiz |

| |understanding of the tags. | |

| |Teachers may want to have students complete the XHTML Quiz at the W3Schools website: | |

| | | |

| |Creating an XHTML Webpage | |

| |Distribute the 3.02 Creating an XHTML Webpage activity to students. |Completed student activities 3.02 Use a Text Editor to|

| |Have students convert the HTML code that they created in the 3.02 Use a Text Editor to |Create a Simple Webpage |

| |Create a Simple Webpage activity earlier. |3.02 Creating an XHTML Webpage activity |

| |Facilitate a class discussion about the changes needed to convert the code from HTML to |3.02 Creating an XHTML Webpage activity Key |

| |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 at |Online tutorial |

| |W3Schools through font size. | |

| |Have students complete the 3.02 CSS Tutorial Notes activity as they work through the |3.02 CSS Tutorial Notes |

| |tutorial. Students may work in pairs to complete the tutorial and notes. |3.02 CSS Tutorial Notes Key |

| |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. | |

| |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. |3.02 Basic CSS Properties Notes |

| |Handout may be distributed electronically or given in hard-copy. | |

|Instructional Activities and Resources continued on next page. |

| |CSS Internal Style Sheet Activity | |

| |Distribute the 3.02 CSS Internal Style Sheet Activity to students. |3.02 CSS Internal Style Sheet Activity |

| |Have students retrieve the HTML webpage My HTML Webpage that they created earlier. |Saved file from 3.02 Creating an HTML Webpage activity|

| |Students may refer to their CSS notes and the CSS tutorial: |(My HTML Webpage) |

| |. |Completed 3.02 CSS Tutorial Notes |

| |Students will create an internal style sheet to change their webpage. |3.02 CSS Internal Style Sheet Activity—Key |

| |When students have completed the style sheet, have students exchange their code and |Website for reference: |

| |proofread it. | |

| |Facilitate a class discussion about CSS, stressing the purpose and benefits of CSS—less code|CSS Quiz: |

| |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 | |

| |. | |

| |Principles of Good Webpage Design | |

| |Have students view the 3.02F Principles of Good Webpage Design PowerPoint presentation. |3.02F Principles of Good Webpage Design PowerPoint |

| |Facilitate a class discussion. |presentation |

| |Distribute the handout 3.02 Principles of Good Webpage Design Guidelines to students for |3.02 Principles of Good Webpage Design Guidelines |

| |future reference. | |

| |Handout may be distributed electronically or given in hard-copy. | |

|Instructional Activities and Resources continued on next page. |

| |Website Design | |

| |Visit Websites That Suck, prior to completing the activity |Website |

| |below. You will find interesting commentary about the bad sites of the day under the "Daily |3.02 What’s Wrong With the Design? activity |

| |Sucker". |3.02 What’s Wrong With the Design? Key |

| |NOTE: This site may not be appropriate for your students but will provide the teacher with |Websites in activity: |

| |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, | |

| |, 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 |3.02G Website Components PowerPoint presentation |

| |the home page. Caution them about using a splash page. |3.02 Website Components Notes |

| |Have students take notes on the 3.02 Website Components Notes graphic organizer. | |

|Instructional Activities and Resources continued on next page. |

| |Website Components Activity |3.02 Website Components Activity |

| |Have students work in pairs to complete the 3.02 Website Components Activity. |3.02 Website Components Activity Key |

| |Students will need to visit the websites listed at the right to complete the activity. |Websites |

| |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, , 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 |3.02 Design a Website activity |

| |editor to design a website following good design principles. |3.02 Design a Website Rubric |

| |Students may work in pairs or teams. |Websites |

| |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 |3.02H Publishing a Website PowerPoint presentation |

| |the 3.02 Publishing a Website Notes graphic organizer. |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 |3.02 Find a Web Host and Domain Name activity |

| |compare various website. |3.02 Find a Web Host and Domain Name Key |

| |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. | |

|Instructional Activities and Resources continued on next page. |

| |Publishing a Website | |

| |Have students complete the 3.02 Publish a Website! activity. If possible, have students |3.02 Publish a Website! activity |

| |publish a previously created website to a host. |3.02 Publish a Website! Key |

| |When students have completed the activity, facilitate a class discussion about publishing | |

| |websites. | |

| |Testing a Webpage | |

| |Have students complete the 3.02 Test Your Webpage! activity. Students will validate source |3.02 Test Your Webpage! activity |

| |code and check spelling and links in a previously created webpage. |3.02 Test Your Webpage! activity Key |

| |Validate source code at , |Websites |

| | or (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. | |

Instructional Support Materials

3.02 Purposes of Websites Graphic Organizer

[pic]

3.02 Purposes of Websites Graphic Organizer Key (Answers May Vary)

[pic]

3.02 Web Development Standards PowerPoint Notes

[pic]

3.02 Web Development Standards PowerPoint Notes Key

(Answers May Vary)

[pic]

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



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:

___________________________________________

___________________________________________

___________________________________________

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

3.02 Authoring Languages and Text Editor Notes

[pic]

3.02 Authoring Languages and Text Editor Notes - Page 2

3.02 Authoring Languages and Text Editor Notes

Key (Answers May Vary)

[pic]

3.02 Authoring Languages and Text Editor Notes Key

Page 2 (Answers May Vary)

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. |

| | |

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. |

| | |

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 |Would you use this product? |

| | | | |Why or why not? |

| |

|Text Editors |

|WYM Editor | | | | |

| | | | | |

| | | | | |

| | | | | |

| | | | | |

| | | | | |

|W3Schools HTML Editor | | | | |

| | | | | |

| | | | | |

| | | | | |

| | | | | |

| | | | | |

|Notepad | | | | |

| | | | | |

| | | | | |

| | | | | |

| | | | | |

| | | | |

| | | | | |

| | | | | |

| | | | | |

| |

|Cascading Style Sheets (CSS) |

| | | | | |

| | | | | |

| | | | | |

| | | | | |

| | | | | |

| | | | | |

| | | | | |

| | | | | |

| | | | | |

| | | | | |

| | | | | |

| | | | | |

| | | | | |

| | | | | |

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 |What you see is what you mean editor |Clear and easy to learn |Still a work in process—under |Answers will vary but may include: |

| |Generates perfectly structured XHTML |Generates clean XHTML code |development |Yes. It is open source so there is no |

| |strict code |Easy to use |No technical support (community |cost to use it; it is easy to learn to |

| |Conforms to W3C specifications |Easy and quick maintenance of |support) |use and creates good XHTML code. |

| |Free. Open Source |information | | |

| | | | | |

| | | | | |

| | | | | |

| | | | | |

|W3Schools HTML Editor |Free from W3Schools |Easy to use |Used to test websites coded in |Answers will vary but may include: |

| |After editing the HTML code, you can |Trial posted on site |tutorials at the W3Schools website |Yes; it will be helpful to use when |

| |click on a button to view the result |Meets W3C standards | |going through the tutorials. |

| | |Designer can click to see the result | | |

| | |of the coding immediately | | |

| | | | | |

|Notepad |Free when you purchase Windows 2.0 |Easy to read presentation of HTML |Doesn't offer a lot of features other |Answers will vary but may include: |

| |and above |Easy to use |than coming with the operating system |Yes; it is a good text editor to use |

| |Universal file format |Small application size | |when starting to learn webpage coding; |

| | | |it is free with MS Windows |

| | | | | |

| | | | | |

| |

|Cascading Style Sheets (CSS) |

| |Define how to display HTML elements |Can save a lot of work |Not all CSS sheets are perfect—some |Answers will vary but may include: |

| |A set of rules that apply to an HTML |Supported by all major browsers |browsers have particular bugs and |Yes; using CSS will make styles used in |

| |document |Changes made to one style sheet can |limitations (newer browsers are |coding webpages easier |

| |Free—created by W3C |change the style for an entire site |better) | |

| | | | | |

| | | | | |

3.02 Website Organization PowerPoint Notes

[pic]

3.02 Website Organization PowerPoint Notes

Page 2

3.02 Website Organization PowerPoint Notes—KEY

[pic]

3.02 Website Organization PowerPoint Notes - KEY

Page 2

3.02 Information Architecture

Directions: Visit the following websites and identify elements of information architecture.

| |Element |[pic] |[pic] |[pic] |

| | | | | |

| | | | | |

|1. |Purpose | | | |

|2. |Goals | | | |

|3. |Target Audience | | | |

|4. |Competitive Site | | | |

|5. |Types of content | | | |

|6. |Site structure | | | |

3.02 Information Architecture—KEY

Directions: Visit the following websites and identify elements of information architecture.

| |Element |[pic] |[pic] |[pic] |

| | | | | |

| | | | | |

|1. |Purpose |From their Corporate Information |From the governor’s quote—“information|Give broad overview of the web and provide tips on |

| | |page…“organize the world's information |on the programs and services that make|website design. |

| | |and make it universally accessible and |North Carolina a better place to be." | |

| | |useful” | | |

|2. |Goals |Focus on the user. |Provide online access to state |Teach basic design principles and tricks of the |

| | |Do one thing well. |information via portals that link the |trade. |

| | |Fast is better than slow. |user to state sponsored websites or |Provide a broad framework for understanding the big|

| | |Democracy on the web works. |pages offering alternative forms of |picture of web design. |

| | |You don’t need to be at your desk to |communication. | |

| | |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. | | |

|3. |Target Audience |Anyone searching for information on the|NC Citizens (and potential citizens), |Website designers and/or managers of website |

| | |WWW |NC visitors, NC Employees, NC |designers. |

| | |Froogle is targeted to shoppers. |Businesses and shoppers of NC | |

| | | |sponsored state memorabilia. | |

|4. |Competitive Site | |None in this state although other | |

| | | |official sites of other states could | |

| | | |be competition in some instances. | |

|5. |Types of content |Text |Mostly text, some images. Linked |Text |

| | |Images (news) |sites contain other elements as well. |Images |

|6. |Site Structure |Webbed |Hierarchical |Linear and webbed |

3.02 Website Structures

Directions: Answer the following questions by indicating the type of site structure.

|1. | |[pic] |

| | | |

|2. | |[pic] |

| | | |

|3. | |[pic] |

| | | |

|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. |

3.02 Website Structures—KEY

Directions: Answer the following questions by indicating the type of site structure.

|1. |Linear |[pic] |

| | | |

|2. |Hierarchical |[pic] |

| | | |

|3. |Webbed |[pic] |

| | | |

|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. |

3.02 HTML Overview Notes [pic]

3.02 HTML Overview Notes Page 2

[pic]

3.02 HTML Overview Notes Key (Answers May Vary)

[pic]

3.02 HTML Overview Notes Page 2

[pic]

3.02 Basic HTML Tag Notes

Work the HTML tutorial at the W3Schools website 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 |HTML Tag |Example |Function |

|Structure |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 |

|Unordered List | | |Creates a bulleted list |

| | | |Monday |

| | | |Tuesday |

| | | |Wednesday |

|Ordered List | | |Creates a numbered list |

| | | |Monday |

| | | |Tuesday |

| | | |Wednesday |

|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. | |

| | |

| | |

| | |

| | |

| | |

| | |

| | |

| | |

| | |

3.02 Basic HTML Tag Notes—KEY

Work the HTML tutorial at the W3Schools website 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 |HTML Tag |Example (Answers will vary) |Function |

|Structure |Structure Tags – Must appear on every page!! | | |

|HTML | | |Tells WWW that this is an HTML |

| | |Text in here describes the webpage |document. |

| | | | |

|Head | | |Add info that will not appear on page|

| | |Title of the document | |

| | | | |

|Title | |Title of the document |Places title of page in (blue) |

| | | |browser bar |

|Body | | |Encloses section of page that will be|

| | | |displayed in the browser |

| | |Text in here is the visible page content | |

| | | | |

| | | | |

|Content |Add organization and interest to a webpage. | | |

|Headings | largest, through |This is a large heading |Increase/decrease text size |

| |, smallest | | |

|Paragraph (double | |This is a paragraph |Separates sections by adding a blank |

|space) | | |line |

|Line Break (single | |This is a paragraph with line breaks |Creates a new line as if using the |

|space) | | |ENTER key; no extra space |

|Unordered List | | |Creates a bulleted list |

| | |  Coffee |Monday |

| | |  Tea |Tuesday |

| | |  Milk |Wednesday |

| | | | |

|Ordered List | | |Creates a numbered list |

| | |  Coffee |Monday |

| | |  Tea |Tuesday |

| | |  Milk |Wednesday |

| | | | |

|Horizontal Rule | |This is text above the rule. |Creates horizontal lines on page |

| | | | |

| | |This is text below the rule. | |

|Bold | |This text is bold |Creates bold text |

|Italics | |This text is italic |Creates italicized text |

|Image | | |Embeds an image in an HTML page |

|Linking | | this is a link |Creates a link to another document |

|Comment | | |Inserts a comment that appears in the|

| | | |code but is not displayed in the |

| | | |browser. |

|Write the four HTML | |

|tags that are | |

|required for a |Document name goes here |

|webpage. | |

| | |

| |Visible text goes here |

| | |

| | |

3.02 Basic HTML Codes

|Basic Tags |

| Creates an HTML document |

| Sets off the title and other information that isn't displayed on the webpage itself |

| Sets off the visible portion of the document |

|Header Tags |

| Puts the name of the document in the title bar |

| Provides information about the page for search engines and browser’s. |

|The is required. |

| - provides a search engine with the author’s name. |

| - provides a description of the webpage that will be displayed when a search engine shows the page’s URL in a |

|hit list. |

| - provides a list of words that a search engine should associate with the page. |

|Text Tags |

| Creates the largest headline |

| Creates the smallest headline |

| Creates bold text |

| Creates italic text |

|Links |

| Creates a hyperlink |

| Creates a mailto link |

|Formatting |

| Creates a new paragraph |

| Inserts a line break |

| Indents text from both sides |

| Creates a numbered list |

| Precedes each list item, and adds a number |

| Creates a bulleted list |

|Graphical Elements |

| Adds an image |

| Inserts a horizontal rule |

| Inserts an embedded object such as an audio or video clip. |

| ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download