CHAPTER 3: UNIQUE HTML FEATURES

WEB DESIGN & DEVELOPMENT

L A S T U P D AT E : 2 / 2 7 / 1 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.

SCROLLING MARQUES / BANNERS

o Scrolling texto Use discretiono Not all websites should have

scrolling banner

SCROLLING MARQUES / BANNERS ELEMENT

o <marque></marque>o Paired element

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)

VARIOUS TYPES OF SCROLLING BANNERS

o Scrolling Marque from Left

o Slide in Texto Bouncing Texto Upward Scroll

SLIDE IN TEXT

<marque behavior=“slide” direction=“left”>scroll text here</marque>

BOUNCING TEXT

<marque behavior=“alternate”>scroll text here</marque>

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)

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

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;

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>

</p>

ROUNDING TABLES

• In web design, no rounded tables• All images are rectangles

• Rounding tables: means that you round the corner edges of the table

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 images2. In Photoshop, create a circle

Our

starting

image

Top-left

corner

Top-right

corner

Bottom-

left corner

Bottom-

right

corner

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>

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>

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”

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

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

WEB DESIGN & DEVELOPMENT

L A S T U P D AT E : 2 / 2 7 / 1 2