Marquees and Standards LESSON 9 Module 2: XHTML Basics Marquees and Standards
Lesson Overview In this lesson, you will learn to: Create a marquee using HTML code. Apply W3C standards to tags commonly used in Web design. Lesson 9 Overview Point out to students that a marquee can’t be created using XHTML as the marquee tags have been deprecated.
Guiding Questions for Lesson 9 The tags <u>…</> (underlined text) and <s>…</s> (strikethrough text) are no longer accepted as code by the World Wide Web Consortium (W3C). Why do you think these tags have been dropped from the standards? What is the purpose of an <alt> tag? Post one or more of these questions in an area where students can read them and allow time for students to respond to the questions. Discuss the student answers these questions.
Marquees Allow text or images to “slide” across a Web page. Can add interest to a Web page. Not all browsers may be able to render the effect. Can be used to scroll information across the screen. Modern techniques have been created to generate this effect. The marquee tag allows for the sliding of text or an image across a Web page. While this effect can really make a Web page interesting, you should realize that this may not be able to be render everywhere by all browsers. Marquees are often used for information to be scrolled across the screen.
Simple Marquee Code The following code causes the words “Hi there!” to scroll across the screen from right to left. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <marquee>Hi there!</marquee> </head> </html> Marquee code can be very simple. The following code is all that is need to have the words “Hi there!” to scroll across the screen from right to left. Point out the use of the Transitional Doctype. This is because a marquee is supported by earlier HTML code but not in XHTML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <marquee>Hi there!</marquee> </head> </html>
Marquee Attributes Below are a few of the attributes that can be added to the <marquee> tag: width=“xx%” defines how wide the marquee is on the screen height=“xx” defines how tall the marquee is on the screen direction= defines which direction the text or image travels; can be up, down, left or right behavior= defines the type of scrolling; can be scroll, slide or alternate (bounces from one side to the other) loop=“xx” defines how many times to complete the behavior bgcolor= defines the color behind the text or image As with other tags, attributes can be added to the marquee tag to change the effect of the tag. Below is a partial list of attributes that can be added to the <marquee> tag. width=“xx%” defines how wide the marquee is on the screen height=“xx” defines how tall the marquee is on the screen direction= defines which direction the text or image travels; can be up, down, left or right behavior= defines the type of scrolling; can be scroll, slide or alternate (bounces from one side to the other) loop=“xx” defines how many times to complete the behavior bgcolor= defines the color behind the text or image
Scrolling Images Marquees can be used to scroll images Similar code to inserting an image in a Web page <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <marquee direction=“right”><img src=“S.2.9.WS_Smiley.jpg" height=“50” width=“50” /></marquee> </head> </html> Instead of scrolling text, a marquee can be used to scroll an image. The HTML code for this is very similar to that of placing an image on a Web page. Below is the code to have an image “Smiley” scroll from left to right across the screen: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <marquee direction=“right”><img src=“S.2.9.WS_Smiley.jpg" height=“50” width=“50” /></marquee> </head> </html>
Time to create your own marquee
Marquees have been deprecated The W3C considers marquees as deprecated or obsolete. Can’t be read by “reading” browsers used by sight impaired persons Can’t be displayed on mobile devices Technique does not follow the W3C’s Guideline 2.2 “Allow users to control time limits on their reading or interaction.” See: http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-20050211/#time-limits-pause Marquees are considered by the W3C to be a deprecated (a term for items that are to be avoided because the technique is obsolescent or has been replaced by another technique). Some of reasons for the deprecation are browsers used by sight impaired persons can’t translate the information and mobile devices cannot display marquees. Marquees do not follow the W3C’s Guideline 2.2 which requires Web sites “Allow users to control time limits on their reading or interaction.”
Web Accessibility Initiative Use the link below to access the “10 Quick Tips” recommended by the W3C for creating an accessible Web page http://www.w3.org/WAI/quicktips/Overview.php Use the W3C’s Web Accessibility Initiative Web site (http://www.w3.org/WAI/quicktips/Overview.php) to have students look at the “10 Quick Tips.” These tips should be used to check the accessibility of a Web site.
W3C’s Priority Checklist Jig Saw activity http://www.w3.org/TR/WCAG10/full-checklist.html Divide students into three groups. Assigned each group one of the priority checkpoints found on the W3C Web site at http://www.w3.org/TR/WCAG10/full-checklist.html. After sufficient time to understand the level of priority assigned to them, regroup students into groups of three with each person from a different priority level group (Jig Saw Activity). Each person summarizes for the others in the smaller group what was learned about their assigned priority level.