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
Go to topOn 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>Boulcott St. Cottage</h3>
<figure>
<img src="Boulcott%20St%20Cottage.jpg" >
<figcaption>A colonial cottage in Boulcott St</figcaption>
</figure>
<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 one buildings and a very short textual description of the same building.
The single article elements within the <main>/</main> tags is our only article block. It spans lines 12 to 19, begins with a level 3 heading at line 13.
Line 14 defines a <figure></figure> element which contains an image and a caption for the same image. 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 experience 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 captions for images.
There are no new elements or concepts introduced in this section but the three new elements introduced: figure 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, h3{
text-align: center
}
header{
background-color:aqua;
}
main{
background-color: white;
}
footer{
background-color:darkblue;
color: white;
}
img{
width: 40%;
display: block;
margin: auto;
}
figcaption{
text-align: center;
font-weight: bold;
}
The first 26 lines of Listing 2 should be familiar to us already and so we shall start at line 27 where we specify the formatting of the img element. The image is to take up 40% 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 as they are contained within the main element. The width of our img elements will therefore be 320 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 32 to 35. As far as the text formatting is concerned lines 33 and 34 specify that the text will be centered within its container and that it will be bold.
The document, titled "Building Web Pages | Images," provides a comprehensive guide to integrating images into web pages, aimed at an educational context, particularly aligned with New Zealand's NCEA standards. It begins with a navigation menu offering links to related topics such as text layout, tables, hyperlinks, and meta tags. This modular structure encourages easy exploration of the material.
The main content starts with learning outcomes, focusing on how to add, center, and format images on a web page. The introduction emphasizes the importance of images for web design while cautioning about their file size and accessibility implications. Clear guidelines are provided, including keeping image sizes below 1MB and using descriptive alt attributes to enhance accessibility for visually impaired users.
A step-by-step example explains how to add images using HTML. A code snippet demonstrates embedding an image with a caption in a web page, formatted with accompanying CSS for centering and text styling. The example features a "Wellington" themed page highlighting a colonial building, which serves as a case study for illustrating the discussed principles. Attention is given to the structural elements, such as headers, articles, and footers, with detailed explanations of their roles in layout and functionality.
The CSS section elaborates on formatting specifics, including the use of block display, auto margins for centering, and bold text for captions. This section reinforces the connection between HTML and CSS by explaining how styling choices impact the layout and appearance of images and captions. An example image with its CSS-styled caption provides a visual reference to the discussed concepts.
Overall, the document offers a comprehensive guide to integrating images into web pages, emphasizing best practices for design, accessibility, and user experience. The modular structure, clear explanations, and practical examples make it a valuable resource for educators and students learning web development.
Go to topFor this assignment you are to create a web page about a place of interest in your area. The page should contain at least one image and a caption for that image. The image should be centered on the page and the caption should be bold and centered. The image should be no more than 500KB in size and should have a detailed description in the alt attribute. The page should be styled using a cascading stylesheet and should contain a header, main and footer block. The main block should contain at least one article block. The page should be titled "Places of Interest" and the image should be of a building or structure of historical or architectural interest.
Here you will extend the assignment you did for the previous section. In this case you will add appropriate images to your file. You must enclose each image in a figure construct and have a descriptive figcaption to explain the image. Also have an appropriate alt property
Go to top