chapter 4 class power point
DESCRIPTION
Web Design & DevelopmentTRANSCRIPT
![Page 1: Chapter 4 class power point](https://reader033.vdocuments.mx/reader033/viewer/2022061220/54bb101e4a7959082b8b45a9/html5/thumbnails/1.jpg)
Chapter 4: iframes & Image Maps
Web Design & Development
![Page 2: Chapter 4 class power point](https://reader033.vdocuments.mx/reader033/viewer/2022061220/54bb101e4a7959082b8b45a9/html5/thumbnails/2.jpg)
4. Students will analyze and create unique features in HTML by:
• Inserting iframes into a website by using its elements and attributes
• Creating at least one type of image map on a website
• Writing coding for at least one type of image map on a website using its elements and attributes
• Using Microsoft Paint to determine coordinates for at least one type of image map shape
• Defining key terms used in the chapter.
![Page 3: Chapter 4 class power point](https://reader033.vdocuments.mx/reader033/viewer/2022061220/54bb101e4a7959082b8b45a9/html5/thumbnails/3.jpg)
Iframes
Used to display a website within a webpage
![Page 4: Chapter 4 class power point](https://reader033.vdocuments.mx/reader033/viewer/2022061220/54bb101e4a7959082b8b45a9/html5/thumbnails/4.jpg)
• <iframe></iframe• Paired element• Attribute: src• URL of website
<iframe src=“http:google.com” width=“600” hieght=“600” frameborder=“3” frame></iframe>
(see example on next page with banners…
![Page 5: Chapter 4 class power point](https://reader033.vdocuments.mx/reader033/viewer/2022061220/54bb101e4a7959082b8b45a9/html5/thumbnails/5.jpg)
![Page 6: Chapter 4 class power point](https://reader033.vdocuments.mx/reader033/viewer/2022061220/54bb101e4a7959082b8b45a9/html5/thumbnails/6.jpg)
Image Maps (Hot Spots)
One image with multiple “clickable areas”
![Page 7: Chapter 4 class power point](https://reader033.vdocuments.mx/reader033/viewer/2022061220/54bb101e4a7959082b8b45a9/html5/thumbnails/7.jpg)
Image Maps (Hot Spots)
• Need two objects:1. An image with distinct areas to
click on
2. Markup to map the different regions to the urls
![Page 8: Chapter 4 class power point](https://reader033.vdocuments.mx/reader033/viewer/2022061220/54bb101e4a7959082b8b45a9/html5/thumbnails/8.jpg)
Image Maps elements
• <map></map>: holds the map information
• <area />: links specific parts of map to URLs
• <img />: sets the picture
![Page 9: Chapter 4 class power point](https://reader033.vdocuments.mx/reader033/viewer/2022061220/54bb101e4a7959082b8b45a9/html5/thumbnails/9.jpg)
Map Attributes
• name: identifies the map• value of name should match value
of usemap in <img /> element
![Page 10: Chapter 4 class power point](https://reader033.vdocuments.mx/reader033/viewer/2022061220/54bb101e4a7959082b8b45a9/html5/thumbnails/10.jpg)
Area Attributes
• shape: specifies the shape of region (rect, circle, poly [triange or polygon])
• coords: defines the region’s coordinates
![Page 11: Chapter 4 class power point](https://reader033.vdocuments.mx/reader033/viewer/2022061220/54bb101e4a7959082b8b45a9/html5/thumbnails/11.jpg)
Break down of Coords:
• Rect: left, right, top & bottom points
• Circle: x and y point on circle as well as radius
• Poly: x and y coordinates for every vertex in the polygon
![Page 12: Chapter 4 class power point](https://reader033.vdocuments.mx/reader033/viewer/2022061220/54bb101e4a7959082b8b45a9/html5/thumbnails/12.jpg)
Area Attributes
• href: specifies the URL• alt: must be used to identify image• title: provides a screen tip
![Page 13: Chapter 4 class power point](https://reader033.vdocuments.mx/reader033/viewer/2022061220/54bb101e4a7959082b8b45a9/html5/thumbnails/13.jpg)
<img src="Pics/park.jpg" width="300" height="200" usemap="#park" border="0"/><map name="park" />
<area shape="rect" coords="190,67,197,195" href="http://www.stillmanvalley.org" title="SVSHS" alt="SwingSet Website" target="_blank" />
<area shape="rect" coords="56,108,45,0" href="http://www.google.com" title="Google" alt="Horses" target="_blank" />
<area shape="rect" coords="258,136,256,4" href="http://www.yahoo.com" title="Yahoo" alt="Horses" target="_blank" /></map>
![Page 14: Chapter 4 class power point](https://reader033.vdocuments.mx/reader033/viewer/2022061220/54bb101e4a7959082b8b45a9/html5/thumbnails/14.jpg)
Determining Coords in Paint
Place your cursor on the spot on the
picture:
• X1—190• Y1—(60)
![Page 15: Chapter 4 class power point](https://reader033.vdocuments.mx/reader033/viewer/2022061220/54bb101e4a7959082b8b45a9/html5/thumbnails/15.jpg)
Determining Coords in Paint
To determine the bottom X2 & Y2, move your cursor straight down from the picture to the bottom line. These will be your coords for:
• X2—199• Y2—198
![Page 16: Chapter 4 class power point](https://reader033.vdocuments.mx/reader033/viewer/2022061220/54bb101e4a7959082b8b45a9/html5/thumbnails/16.jpg)
Chapter 4: iframes & Image Maps
Web Design & Development