HTML and CSS Reference
In-Depth Information
Inserting a Scrolling Message on a Web Page
Accessibility Issue
The Web Content
Accessibility Guidelines
(WCAG) 2.0 of W3.org
recommends that
scrolling messages have a
mechanism to allow the
user to stop and start the
scrolling. See Appendix C
for more information.
Stopping text in an
<input> text field has
unpredictable results.
Chapter 11, however,
shows how to stop an
image scrolling across
a page.
A simple way to provide a Web site visitor with information is to add a scrolling text
message to a Web page. Companies often use scrolling messages on their Web sites to
highlight breaking news, key products, or special promotions. A scrolling text message
can appear either in a text field within the Web page or on the status bar in the browser
window. Because visitors to a Web page often do not look at the status bar, placing the
scrolling message in a prominent place on the Web page is a better location.
A scrolling message has four basic components:
The display object (a form text field)•
•
The text message to scroll in the text field•
•
The position of the next character in the text message
•
A time delay
•
The
display object
identifies where the scrolling message is displayed, which, in
this project, is in a form text field. The scrolling
message
is a text string assigned to a
variable. The text string is what the user sees when the message is displayed. The
position
is the location of the next character in the text string. The
delay
regulates the speed in
which the characters display in the text field.
The first step in creating the scrolling message for the Shoreline State Bank Web
page is to create the object that will display the scrolling message. The most common
object to display a scrolling message is a text field. The text field must be part of a form
object. In the Shoreline State Bank Web page, you will place the form and text field below
the banner.
You must name the form using the id attribute and the text field using the name
attribute. The <form> id serves as the object and the <input> name serves as a property
to be used in the JavaScript code to assign the message string to the text field. The size
attribute of the text field indicates the display width of the text field.
To Open an Existing HTML File
As in Chapter 9, you will integrate JavaScript into an existing HTML document.
The chapter10-1.html file has an embedded CSS <style> section. The following steps
open the chapter10-1.html file included in the Data Files for Students.
1
Start Notepad++, and, if necessary, maximize the window.
2
Click View on the menu bar. If the word wrap command does not have a check mark next
to it, click word wrap.
3
With a USB flash drive plugged in to your computer, click File on the menu bar and then
click Open on the File menu.
4
Navigate to the Chapter10\ChapterFiles folder on the USB drive.
5
Double-click chapter10-1.html in the list of files to display the HTML code for the
chapter10-1.html Web page (Figure 10-2 on the next page).
