Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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