chapter 3 class power point
DESCRIPTION
Chapter 3 WDDTRANSCRIPT
![Page 1: Chapter 3 class power point](https://reader037.vdocuments.mx/reader037/viewer/2022102922/54bb10324a7959e8198b45e8/html5/thumbnails/1.jpg)
CHAPTER 3: UNIQUE HTML FEATURES
WEB DESIGN & DEVELOPMENT
L A S T U P D AT E : 2 / 2 7 / 1 2
![Page 2: Chapter 3 class power point](https://reader037.vdocuments.mx/reader037/viewer/2022102922/54bb10324a7959e8198b45e8/html5/thumbnails/2.jpg)
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.
![Page 3: Chapter 3 class power point](https://reader037.vdocuments.mx/reader037/viewer/2022102922/54bb10324a7959e8198b45e8/html5/thumbnails/3.jpg)
SCROLLING MARQUES / BANNERS
o Scrolling texto Use discretiono Not all websites should have
scrolling banner
![Page 4: Chapter 3 class power point](https://reader037.vdocuments.mx/reader037/viewer/2022102922/54bb10324a7959e8198b45e8/html5/thumbnails/4.jpg)
SCROLLING MARQUES / BANNERS ELEMENT
o <marque></marque>o Paired element
![Page 5: Chapter 3 class power point](https://reader037.vdocuments.mx/reader037/viewer/2022102922/54bb10324a7959e8198b45e8/html5/thumbnails/5.jpg)
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)
![Page 6: Chapter 3 class power point](https://reader037.vdocuments.mx/reader037/viewer/2022102922/54bb10324a7959e8198b45e8/html5/thumbnails/6.jpg)
VARIOUS TYPES OF SCROLLING BANNERS
o Scrolling Marque from Left
o Slide in Texto Bouncing Texto Upward Scroll
![Page 7: Chapter 3 class power point](https://reader037.vdocuments.mx/reader037/viewer/2022102922/54bb10324a7959e8198b45e8/html5/thumbnails/7.jpg)
SLIDE IN TEXT
<marque behavior=“slide” direction=“left”>scroll text here</marque>
![Page 8: Chapter 3 class power point](https://reader037.vdocuments.mx/reader037/viewer/2022102922/54bb10324a7959e8198b45e8/html5/thumbnails/8.jpg)
BOUNCING TEXT
<marque behavior=“alternate”>scroll text here</marque>
![Page 9: Chapter 3 class power point](https://reader037.vdocuments.mx/reader037/viewer/2022102922/54bb10324a7959e8198b45e8/html5/thumbnails/9.jpg)
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)
![Page 10: Chapter 3 class power point](https://reader037.vdocuments.mx/reader037/viewer/2022102922/54bb10324a7959e8198b45e8/html5/thumbnails/10.jpg)
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.)
![Page 11: Chapter 3 class power point](https://reader037.vdocuments.mx/reader037/viewer/2022102922/54bb10324a7959e8198b45e8/html5/thumbnails/11.jpg)
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;
![Page 12: Chapter 3 class power point](https://reader037.vdocuments.mx/reader037/viewer/2022102922/54bb10324a7959e8198b45e8/html5/thumbnails/12.jpg)
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>
![Page 13: Chapter 3 class power point](https://reader037.vdocuments.mx/reader037/viewer/2022102922/54bb10324a7959e8198b45e8/html5/thumbnails/13.jpg)
ROUNDING TABLES
• In web design, no rounded tables• All images are rectangles
• Rounding tables: means that you round the corner edges of the table
![Page 14: Chapter 3 class power point](https://reader037.vdocuments.mx/reader037/viewer/2022102922/54bb10324a7959e8198b45e8/html5/thumbnails/14.jpg)
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
![Page 15: Chapter 3 class power point](https://reader037.vdocuments.mx/reader037/viewer/2022102922/54bb10324a7959e8198b45e8/html5/thumbnails/15.jpg)
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>
![Page 16: Chapter 3 class power point](https://reader037.vdocuments.mx/reader037/viewer/2022102922/54bb10324a7959e8198b45e8/html5/thumbnails/16.jpg)
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>
![Page 17: Chapter 3 class power point](https://reader037.vdocuments.mx/reader037/viewer/2022102922/54bb10324a7959e8198b45e8/html5/thumbnails/17.jpg)
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”
![Page 18: Chapter 3 class power point](https://reader037.vdocuments.mx/reader037/viewer/2022102922/54bb10324a7959e8198b45e8/html5/thumbnails/18.jpg)
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
![Page 19: Chapter 3 class power point](https://reader037.vdocuments.mx/reader037/viewer/2022102922/54bb10324a7959e8198b45e8/html5/thumbnails/19.jpg)
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
![Page 20: Chapter 3 class power point](https://reader037.vdocuments.mx/reader037/viewer/2022102922/54bb10324a7959e8198b45e8/html5/thumbnails/20.jpg)
WEB DESIGN & DEVELOPMENT
L A S T U P D AT E : 2 / 2 7 / 1 2