Download ACT102 Introduction to Web Page Development Exercise 2 Figure 1

ACT102 Introduction to Web Page Development
Exercise 2
Images with captions
Create an html page named EX2.html create a simple
webpage which uses what you learn in this exercise.
HTML doesn't have an element that allows to insert an
image with a caption. But there are many ways to
realize such effect, and the following is just one of
them.
Figure 1 A more steady-state view of nature
<div id="captioned_image">
<p><img src="images/Hopetoun_falls.jpg" width="180"
height="135" alt="Hopetoun falls" /></p>
<p>A more steady-state view of nature</p>
</div>
The CSS stylesheet for formatting:
#captioned_image {
float: right;
width: 28%;
border: 1px silver solid;
margin: 0.5em;
padding: 0.5em;
}
#captioned_image p {
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
padding: 0;
}
There is one problem here, and that is that the image may be too wide. In this case, the image is
180 px wide and the div is 28% of the surrounding text. So if you make the window narrower, it
may be that the image overflows the div (try it!).
Couple of ways to fix the problem:



add a minimum width to the div
add a width to the img
edit the size of every image before inserting into your web page (not so welcomed).
Add a minimum width
If you know the width of all images in the document, you can add a minimum width to the div,
like min-width: 150px; (in this case we know the minimum width of all images) to the rule
div.captioned_image.
ACT102 Introduction to Web Page Development
Exercise 2
Add a image width
Another way is to scale the image itself. Add the following rule:
#captioned_image img {
width: 100%;
}
Display the caption on top
#captioned_image p {
display: table-cell;
width: 100%;
}
#captioned_image p + p {
display: table-caption;
caption-side: top;
}
Image Replacement
You have the following HTML:
<div>
<span>Welcome</span>
</div>
Or you have this:
<h1>Welcome</h1>
And you want to show an image instead of showing the text "Welcome", let's say an image of the
text "Welcome" written in a fancy font face. For example:
There are several ways of doing this. Here is one way:
div#welcomeImg {
background: url("cssimages/welcome.gif") no-repeat;
height:42px;
}
#welcomeImg span {display:none;}
Then your HTML code should be modified as:
ACT102 Introduction to Web Page Development
Exercise 2
<div id="welcomeImg"><span>Welcome</span></div>
The declaration block display:none; inside the span rule makes anything placed inside span
disappear.
Exercise: I have 3 different <h1> headers,
<h1>Home</h1>
<h1>Demo</h1>
<h1>Tour</h1>
and I want to specify different images for different headers using image replacement technique. I
have the part of the image replacement CSS as following:
h1.imgReplace {
height:<YOU SPECIFY THE HEIGHT>;
background-repeat:no-repeat;}
h1.imgReplace span {
display:none;}
I have images home_icon.gif, demo_icon.gif, and tour_icon.gif. I want to replace the text
"Home" with home_icon.gif, and so on so forth. I need to both change my XHTML code little
bit (may be add id or class attributes to <h1> tag) and write rest of my CSS. Please help me
write rest of CSS for implementing the image replacement, and the necessary modification to
current XHTML code to implement the image replacement effect.
Think about it, why do we need image replacement. Give a few example of possible usage for
image replacement.
Other image replacement techniques
The following method eliminates the span by setting height of the parent element to 0 and
overflow to hidden, which hides the text. Then it uses top padding to force the element to the
height of the image in the background.
#ID_OF_ELEMENT {
padding: HEIGHT_OF_IMAGEpx 0 0 0;
overflow: hidden;
background-image: url("URL_OF_THE_IMAGE");
background-repeat: no-repeat;
height: 0px !important; /* for most browsers */
height /**/:HEIGHT_OF_IMAGEpx; /* for IE5.5's bad box model */
}
Replace the ID_OF_ELEMENT, HEIGHT_OF_IMAGE, and URL_OF_THE_IMAGE with
corresponding id, height value of image, and image url in your case.
The following method uses the CSS text-indent property to shift contained text outside the
visible element window.
ACT102 Introduction to Web Page Development
Exercise 2
#ID_OF_ELEMENT {
text-indent: -9999px;
overflow: hidden;
}
Replace the ID_OF_ELEMENT with the id of the element you want to apply this image
replacement techniuqe for.
Controlled Drop Caps
In the following example the first letter "N" of the word "Nature" is replaced by an image of "N"
in a nice font face and bigger font-size.
ature, in the broadest sense, is equivalent to the natural world, physical
universe, material world or material universe. "Nature" refers to the
phenomena of the physical world, and also to life in general. The term generally does
not include manufactured objects and human interaction unless qualified in ways such
as, e.g., "human nature" or "the whole of nature". Nature is also generally distinguished
from the supernatural. It ranges in scale from the subatomic to the galactic.
The technique we use here is the same we used for the image replacement. See the following
example code:
#dropcap_n {
display:block;
float:left;
width: 62px;
height:56px;
margin-right:5px;
background-image:url("cssimages/dropcap_n.gif");
background-repeat:no-repeat;
}
#dropcap_n span {display:none;}
The HTML code looks like:
<p><span id="dropcap_n"><span>N</span></span>ature, ....</p>
Submission
You should submit your EX2.html page and any images you used in the exercise. Submit your
answer for a grade in your P: drive folder. \act102\ch2\exers\