HTML and CSS Advanced
description
Transcript of HTML and CSS Advanced
![Page 2: HTML and CSS Advanced](https://reader036.fdocuments.us/reader036/viewer/2022062315/5681500c550346895dbde973/html5/thumbnails/2.jpg)
Course Road Map
Create web page layouts using CSS Manage CSS Test website validity Create navigation menus using CSS Incorporate meta content and
multimedia
![Page 3: HTML and CSS Advanced](https://reader036.fdocuments.us/reader036/viewer/2022062315/5681500c550346895dbde973/html5/thumbnails/3.jpg)
CHAPTER 4:CREATING ADVANCED NAVIGATION
![Page 4: HTML and CSS Advanced](https://reader036.fdocuments.us/reader036/viewer/2022062315/5681500c550346895dbde973/html5/thumbnails/4.jpg)
Create CSS menus from lists Use images in CSS menus Create image maps
What’s Ahead?
![Page 5: HTML and CSS Advanced](https://reader036.fdocuments.us/reader036/viewer/2022062315/5681500c550346895dbde973/html5/thumbnails/5.jpg)
Menus Are Lists of Links
<ul>
<li><a href=“index.html”>Home</a></li>
<li><a href=“catalog.html”>Catalog</a></li>
<li><a href=“about.html”>About</a></li>
</ul>
We just apply some styling to the list.
![Page 6: HTML and CSS Advanced](https://reader036.fdocuments.us/reader036/viewer/2022062315/5681500c550346895dbde973/html5/thumbnails/6.jpg)
Display Property Determines how an element is displayed on the
page
blockLine break above and below
inlineNo line breaks
noneElement is not visible
list-itemElement displayed as a list
![Page 7: HTML and CSS Advanced](https://reader036.fdocuments.us/reader036/viewer/2022062315/5681500c550346895dbde973/html5/thumbnails/7.jpg)
CSS Pseudo-class
Pseudo-classes add special effects to some selectors
Common pseudo-classes for anchor elements:link:visited:active:hover
![Page 8: HTML and CSS Advanced](https://reader036.fdocuments.us/reader036/viewer/2022062315/5681500c550346895dbde973/html5/thumbnails/8.jpg)
Practice Activity
CSS-based menus, Activity 1Create a CSS-based menu (p.84)
![Page 9: HTML and CSS Advanced](https://reader036.fdocuments.us/reader036/viewer/2022062315/5681500c550346895dbde973/html5/thumbnails/9.jpg)
Practice Activity
CSS-based submenus, Activity 2Create a CSS-based submenu (p.89)
![Page 10: HTML and CSS Advanced](https://reader036.fdocuments.us/reader036/viewer/2022062315/5681500c550346895dbde973/html5/thumbnails/10.jpg)
Create CSS menus from lists Use images in CSS menus Create image maps
What’s Ahead?
![Page 11: HTML and CSS Advanced](https://reader036.fdocuments.us/reader036/viewer/2022062315/5681500c550346895dbde973/html5/thumbnails/11.jpg)
Background Images
We’ve used the background-color style to set the color of the background
We can also use background images:background-image: url(“image.jpg”)background-repeat: no-repeat;background-position: top left;
![Page 12: HTML and CSS Advanced](https://reader036.fdocuments.us/reader036/viewer/2022062315/5681500c550346895dbde973/html5/thumbnails/12.jpg)
Practice Activity
Menu images, Activity 3Add images to CSS menus (p.98)
What if you wanted the images on the right side of the text?
![Page 13: HTML and CSS Advanced](https://reader036.fdocuments.us/reader036/viewer/2022062315/5681500c550346895dbde973/html5/thumbnails/13.jpg)
Create CSS menus from lists Use images in CSS menus Create image maps
What’s Ahead?
![Page 14: HTML and CSS Advanced](https://reader036.fdocuments.us/reader036/viewer/2022062315/5681500c550346895dbde973/html5/thumbnails/14.jpg)
What’s an Image Map?
An image map defines regions within an image that can be used as individual hyperlinks
<img src=“images/myimage.jpg” />
![Page 15: HTML and CSS Advanced](https://reader036.fdocuments.us/reader036/viewer/2022062315/5681500c550346895dbde973/html5/thumbnails/15.jpg)
What’s an Image Map?
An image map defines regions within an image that can be used as individual hyperlinks
<img src=“images/myimage.jpg”
usemap=“#mymap” />
<map id=“mymap”>…</map>
![Page 16: HTML and CSS Advanced](https://reader036.fdocuments.us/reader036/viewer/2022062315/5681500c550346895dbde973/html5/thumbnails/16.jpg)
Inside the Map
<map id=“mymap”>
<area shape=“rect”
coord=“10, 25, 60, 40”
href=“rect.html”
alt=“My Rect”/>
<area shape=“circle”
coord=“108, 94, 32”
href=“circle.html”
alt=“My Circle”/>
</map>
![Page 17: HTML and CSS Advanced](https://reader036.fdocuments.us/reader036/viewer/2022062315/5681500c550346895dbde973/html5/thumbnails/17.jpg)
About Map Areas
You can use rect, circle, or polyx1, y1, x2, y2x1, y1, radiusx1, y1, x2, y2, …, xn, yn
Coordinates are references from the upper-left corner of the image
The areas themselves are not visible, but only reference areas on the image
![Page 18: HTML and CSS Advanced](https://reader036.fdocuments.us/reader036/viewer/2022062315/5681500c550346895dbde973/html5/thumbnails/18.jpg)
Practice Activity
Images maps, Activity 4Create an image map as a “menu” (p.110)
![Page 19: HTML and CSS Advanced](https://reader036.fdocuments.us/reader036/viewer/2022062315/5681500c550346895dbde973/html5/thumbnails/19.jpg)
Create CSS menus from lists Use images in CSS menus Create image maps
What’s Behind?
![Page 20: HTML and CSS Advanced](https://reader036.fdocuments.us/reader036/viewer/2022062315/5681500c550346895dbde973/html5/thumbnails/20.jpg)
REVIEW
![Page 21: HTML and CSS Advanced](https://reader036.fdocuments.us/reader036/viewer/2022062315/5681500c550346895dbde973/html5/thumbnails/21.jpg)
Review
What shapes can be placed in an image map?
A. circle
B. ellipse
C. rectangle
D. triangle
![Page 22: HTML and CSS Advanced](https://reader036.fdocuments.us/reader036/viewer/2022062315/5681500c550346895dbde973/html5/thumbnails/22.jpg)
Review
What shapes can be placed in an image map?
A. circle
B. ellipse
C. rectangle
D. triangle