Chapter 3 WDD

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