1 / 11

Understanding HTML Marquees and W3C Standards in Web Design

In this lesson, you'll explore the basics of creating a marquee using HTML code while adhering to W3C standards. Learn why certain HTML tags like `<b>` and `<i>` are no longer accepted standards, and understand the importance of the `<alt>` tag. Discover how marquees allow text and images to slide across web pages, adding interest, and the best practices for implementing them. We will also discuss the accessibility issues surrounding marquees and how modern techniques can enhance user experience while following established web design guidelines.

emmy
Télécharger la présentation

Understanding HTML Marquees and W3C Standards in Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Marquees and Standards LESSON 9 Module 2: HTML Basics

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

  3. Guiding Questions for Lesson 9 • The tags <b>…</b> and <i>…</i> 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?

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

  5. Simple Marquee Code The following code causes the words “Hi there!” to scroll across the screen from right to left. <html> <head> <marquee>Hi there!</marquee> </head> </html>

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

  7. Scrolling Images • Marquees can be used to scroll images • Similar code to inserting an image in a Web page • <html> • <head> • <marquee direction=right><imgsrc=“S.2.9.WS_Smiley.jpg" height=50 width=50></marquee> • </head> • </html>

  8. Time to create your own marquee

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

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

  11. W3C’s Priority Checklist • Jig Saw activity • http://www.w3.org/TR/WCAG10/full-checklist.html

More Related