Module:
Requirements: using appropriate tools, techniques and design elements for the purpose and end users, applying appropriate data integrity and testing procedures in the development of the outcome, describing relevant implications
Relevant Implications: End user considerations
On completion of this section you will know:
As well as text, images, drawings and photographs can also be added to a web page. Although an essential component of any web page, images can take up a lot of storage space and in areas of poor internet access they can slow down the downloading of a page. For that reason the following guidelines should apply to images:
For demonstrating adding images to a page we shall use the same layout as in the previous example. We effect this by using the same cascading stylesheet as we did before but will add extra formatting commands to it, to take care of the images.
<html>
<head>
<title>Images</title>
<link href="Laying%20out%20Text.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<header>
<h1>Wellington</h1>
</header>
<main>
<h2>Remarkable Houses</h2>
<article>
<h3>House in Mt. Victoria</h3>
<img src="Mt%20Vic%20House.jpg" alt="A more modern but still imposing house in Mt. Victoria">
<span>An elegant house in Mt. Victoria</span>
<p>More functional but still imposing, this pair of semidetached houses are now part of the Apollo Motel in Majoribanks St.</p>
<p></p>
</article>
<article>
<h3>Boulcott St. Cottage</h3>
<img src="Boulcott%20St%20Cottage.jpg" alt="A colonial cottage in Boulcott St. Built in the Gothich Revival stye in the 1870's">
<span>A colonial cottage in Boulcott St</span>
<p>Plimmer House, also known as Boulcott St Bistro was built in the 1870's as a gentleman's townhouse. With it's steeply pitched roof and tower it is build in the Gothic Revival style. (Heritage New Zealand)</p>
</article>
</main>
<footer>
<p>Heritage New Zealand. (n.d.). Plimmer House. Retrieved from Heritage New Zealand Web site: https://www.heritage.org.nz/the-list/details/225</p>
</footer>
</body>
</html>
The structure of the above code is similar to that of the previous code. the <head>/</head> section contains the title of the page as well as linking to the cascading stylesheet. The <body>/</body> contains the blocks <header>/</header>, <main>/</main>, and <footer>/</footer>. The theme of the page has slightly altered. Here we are concentrating on Wellington, and especially on the picturesque buildings in that city. For the sake of brevity we have included only two buildings and a very short textual description of each.
The two article elements within the <main>/</main> tags have identical layout. The first, which spans lines 12 to 18, begins with a level 3 heading at line 13.
Line 14 defines an img element. The src attribute of this element specifies the name of the file whose image we wish to display. The alt attribute provides a verbal description of the image. This verbal description will never be seen on the web page unless the image cannot be displayed, in which case it is displayed in the position which is allocated to the image itself. It's other use, however is to give a better user expreience to visually impaired people. The screen reading software used by the visually impaired cannot interpret images and when they encounter such an element, they will search for the alt attribute and if they encounter it, they will read out its content. For this reason it is important to add detailed description of the image to the alt attribute.
At line 15 we meet a new element figcaption. This is one of a number of inline formatting elements within html. It is generally used when you want to give a special formatting to short blocks of text or to individual words. In this case we shall use it to provide footers for images.
There are no new elements or concepts introduced in this section. Also the explanation we have provided for the article's contents, also apply to the second one, and so there is no need to discuss it.
The two new elements introduced img and figcaption require formatting and thus we shall look at the attached CSS file next
Go to top
body{
background-color: beige;
}
header, main, footer{
width:800px;
display: block;
margin: auto;
padding-left: 20px;
padding-right: 20px;
padding-top: 1px;
padding-bottom: 1px
}
h1, h2{
text-align: center
}
header{
background-color:aqua;
}
main{
background-color: white;
}
footer{
background-color:darkblue;
color: white;
}
img{
width: 80%;
display: block;
margin: auto;
}
span{font-weight: bold;
font-size: small;
display: block;
margin: auto;
margin-top: 10px;
}
The first 25 lines of Listing 2 should be familiar to us already and so we shall start at line 26 where we specify the formatting of the img elements. The image is to take up 80% of the width of its container. The width of the main element is 800 pixels and since we have not specified any any width for the article elements they must also be 800 pixels wide since they are contained within the main element. The width of our img elements will be 640 pixels.
Setting the display attribute to block and the margin attribute to auto means that the image will be centered within its container.
Finally we shall look at the formatting of our figcaption element, whose definition spans lines 31 to 36. As far as the text formatting is concerned lines 31 and 32 specify that the text will be bold and small size. Lines 33 and 34 specify that figcaptionelement will be centered on the page, while line 35 specify that there will be a 10 pixel space between the figcaption element and whicheve element is directly above it.
Go to top