This document discusses unique HTML features including scrolling marquees, rollovers, and rounding table edges. It provides code examples for different types of scrolling marquees like sliding text and bouncing text. Rollovers are created using two images and mouseover/mouseout events. Rounded table edges are simulated using corner images. The document also mentions securing a website by disabling right-click, copy-paste, and image copying using JavaScript code.

1. CHAPTER 3: UNIQUE HTML FEATURES
WEB DESIGN &
DEVELOPMENT
L A S T U P D AT E : 2 / 2 7 / 1 2

2. ESSENTIAL OUTCOMES
3. You will analyze and create unique features in
HTML by:
 Writing and using scrolling marquees and
rollovers
 Scrolling marque to left
 Slide in Text
 Bouncing Text
 Upward Scroll
 Rollovers
 Inserting rounded edges in tables
 Copying and pasting codes that secure a
website
 No right click
 Disable copy and paste
 Define key words presented in this chapter.

3. SCROLLING MARQUES / BANNERS
o Scrolling text
o Use discretion
o Not all websites should have
scrolling banner

4. SCROLLING MARQUES / BANNERS ELEMENT
o <marque></marque>
o Paired element

5. SCROLLING MARQUES / BANNERS ATTRIBUTE
o bgcolor=“green” (sets background
color)
o width=“100%” (sets width)
o direction=“Left” (sets direction)
o scrollamount=“1” (sets speed of
banner)

6. VARIOUS TYPES OF SCROLLING BANNERS
o Scrolling Marque from
Left
o Slide in Text
o Bouncing Text
o Upward Scroll

7. SLIDE IN TEXT
<marque behavior=“slide”
direction=“left”>scroll text
here</marque>

8. BOUNCING TEXT
<marque behavior=“alternate”>scroll
text here</marque>

9. UPWARD SCROLL
<p align=“center”>
<marque bgcolor=“#000080”
scrollamount=“2” direction=“up”
loop=“true” width=“25%”><font
color=“#ffffff”><strong>scroll text
here</strong></font</marque>
</p> (click here)

10. SCROLLING IMAGE WITH TEXT
<p align=“center”>
<marque bgcolor=“#000080”
behavior=“scroll” direction=“left”><font
size=“10 color=“#ffffff”
scrollamount=“2”>>Go Vikings<img
scroll text
here</strong></font</marque>
</p> (click here for ex.)

11. ROLLOVERS
• Displays separate images or text to
user once button or image has been
rolled over with mouse
• Need two images:
1. One image as button;
2. One image as rollover;

12. CREATING THE ROLLOVER
• Save your two images to your image
folder
• Go to where you want your rollover to
appear
• Write the following code:
<p align="center">
<a href="http://www.google.com"><img
src="Graphics/bugs-01.gif"
onmouseover="this.src='Graphics/bart-
09.gif'"
onmouseout="this.src='Graphics/bugs-
01.gif'" alt="Click Me"></a>

13. ROUNDING TABLES
• In web design, no rounded tables
• All images are rectangles
• Rounding tables: means that you
round the corner edges of the table

14. ROUNDING TABLES
• To create a semblance of rounded
tables:
• Need circle & the # of corners you
need (in this case 4 since we are rounding all
four corners)
1. Need 4 different images
2. In Photoshop, create a circle
Our starting Top-left Top-right Bottom-left Bottom-right
image corner corner corner corner

15. ROUNDING TABLES
Top Corners
<td width="14"><img src="Graphics/LC.jpg"
width="14"
height="14" border="0" alt="..." /></td>
<td width="14"><img src="Graphics/RC.jpg"
width="14"
height="14" border="0" alt="..." /></td>

16. ROUNDING TABLES
Bottom Corners
<td><img src="Graphics/BLC.jpg"
width="14" height="14"
border="0" alt="..." /></td>
<td><img src="Graphics/BRC.jpg"
width="14" height="14"
border="0" alt="..." /></td>

17. IMPORTANT NOTES IN ROUNDING TABLES
• When rounding corners, make
sure cellpadding, cellspacing &
border attributes have 0 value
• Background color for corners
must be same color as table
• Use the “alt” tag for images
(required)
• Do not use “bgcolor”; rather use
the following:
style=“background-color: #9c084A”

18. IMPORTANT NOTES IN ROUNDING TABLES
• Height of a table is controlled by
the actual content
• Roundness of a table depends
on curves created in image;
• Circle is small, curves will be
tighter;
• Circle is larger, curves will be
looser

19. SECURING YOUR WEBSITE
• For this, you may just copy and
paste codes since these include
JavaScript
• 3 codes:
 No copy & paste of images
 No right click
 No copy & paste of information
• Codes are saved in Notepad++
for you to copy under Security

20. WEB DESIGN &
DEVELOPMENT
L A S T U P D AT E : 2 / 2 7 / 1 2