Web Programming with html5, css, and JavaScript



Download 18,68 Mb.
Pdf ko'rish
bet60/98
Sana28.10.2022
Hajmi18,68 Mb.
#857632
1   ...   56   57   58   59   60   61   62   63   ...   98
Bog'liq
Web Programming with HTML5, CSS, and JavaScript

268
CHAPTER 6
 
Links and Images 


© StationaryTraveller/Getty Images
CHAPTER OBJECTIVES

Position an image at the left or right with 
text displayed at its other border.

Learn how to display a shortcut icon in a 
browser’s tab area.

Implement an 
iframe
element with the 
ability to display a web page or an image 
in it.

Create an image sprite file and use it in a 
web page.

Implement an audio player using the 
audio
element.

Handle different audio file formats.

Cover a web page’s background with an 
image.

Understand how to use web fonts.

Implement a video player using the 
video
element.

Center a web page’s content.

Cover a web page’s background with a 
color gradient.
Image Manipulations, 
Audio, and Video
269
CHAPTER 
7


CHAPTER OUTLINE
7.1 
Introduction
7.2 
Positioning Images
7.3 
Shortcut Icon
7.4 
iframe
Element
7.5 
CSS Image Sprites
7.6 
Audio
7.7 
Background Images
7.8 
Web Fonts
7.9 
Video
7.10 
Centering Content Within the Viewport
Color Gradients
7.11 
Case Study: Using an Image Map for 
a Small City’s Core Area and Website 
Navigation with a Generic Home Page
7.1 
Introduction
In the previous chapter, you learned about images, but only the basics. Specifically, you learned 
about their formats and how to display them. In this chapter, you’ll learn how to do additional things 
with images, such as position them. By default, images are displayed inline, which means that they 
are positioned in the normal left-to-right, top-down flow of their web page host. As an alternative, 
you can position them at the left or the right of the web page. If you want an icon image to appear in 
the tab at the top of the browser window, you can do that. Or, if you want to display an image within 
a frame within the browser window—yep, you can do that too. In this chapter, you’ll learn how to 
do those things, plus you’ll learn about more advanced image-related topics, such as implementing 
a rollover with an image sprite and implementing a clickable image map with multiple hotspots.
In addition to learning about images, you’ll also learn about other media types—audio and 
video. We start with an introduction to the different audio and video file formats. Then we dig 
into the details of how to implement audio and video players with the 
audio
and 
video
elements 
and their attributes. Along the way, in presenting the audio and video web page example, you’ll 
be introduced to several CSS properties that enable you to spruce things up. With CSS, you can 
import and use customized fonts that are not part of the W3C’s standards, you can use an image 
file as the background for your web page, and you can create a color gradient (a smooth transition 
between two or more colors) and use it as the background for your web page.

Download 18,68 Mb.

Do'stlaringiz bilan baham:
1   ...   56   57   58   59   60   61   62   63   ...   98




Ma'lumotlar bazasi mualliflik huquqi bilan himoyalangan ©hozir.org 2024
ma'muriyatiga murojaat qiling

kiriting | ro'yxatdan o'tish
    Bosh sahifa
юртда тантана
Боғда битган
Бугун юртда
Эшитганлар жилманглар
Эшитмадим деманглар
битган бодомлар
Yangiariq tumani
qitish marakazi
Raqamli texnologiyalar
ilishida muhokamadan
tasdiqqa tavsiya
tavsiya etilgan
iqtisodiyot kafedrasi
steiermarkischen landesregierung
asarlaringizni yuboring
o'zingizning asarlaringizni
Iltimos faqat
faqat o'zingizning
steierm rkischen
landesregierung fachabteilung
rkischen landesregierung
hamshira loyihasi
loyihasi mavsum
faolyatining oqibatlari
asosiy adabiyotlar
fakulteti ahborot
ahborot havfsizligi
havfsizligi kafedrasi
fanidan bo’yicha
fakulteti iqtisodiyot
boshqaruv fakulteti
chiqarishda boshqaruv
ishlab chiqarishda
iqtisodiyot fakultet
multiservis tarmoqlari
fanidan asosiy
Uzbek fanidan
mavzulari potok
asosidagi multiservis
'aliyyil a'ziym
billahil 'aliyyil
illaa billahil
quvvata illaa
falah' deganida
Kompyuter savodxonligi
bo’yicha mustaqil
'alal falah'
Hayya 'alal
'alas soloh
Hayya 'alas
mavsum boyicha


yuklab olish