Learning Web Design

Chapter 7 Exercises 7-1 to 7-3

Home > Chapter Review and Exercises > Chapter 7 Exercises

Exercise 7-1

Exercise 7-2

Exercise 7-3

Read pages 131-137 before starting Exercise 7-1.

Exercise 7-1 What you need to know for this exercise

Images on web pages are either bitmapped (also called raster images) and vector images.
Bitmapped images are made up of a grid of colored pixels.
Vector images contain paths that are defined mathematically.
Check out this comparison explained here:
The file formats for bitmapped images are PNG, JPEG (or just JPG), GIF, and WebP.
The file format for vector images is SVG (more about this later).
The <img> element is used to display images on websites. It's an Inline element (verses a Block element).
The <img> element has two required attributes: src and alt.
The src (source) attribute provides the location of the image file (its URL). This can be an absolute or relative URL (see Chapter 6).
The alt attribute provides alternative text that displays if the image is not available.
For those visually impaired, a screen reader will read aloud the alt text: <img src="happy.jpg" alt="happy">
If there is no need for that, an empty value can be used: <img src="flowers.svg" alt="">
By default, the bottom edge of an image aligns with the baseline of the surrounding text and does not cause a line break.
The width and height attributes set the dimensions of the image on the page in number of pixels.

Exercise 7-1 Walkthrough

Page 138

NOTE: a few of the steps in the this exercise were already done for you by the author to demonstrate how the HTML should be written.

Step 1

Chapter 7 has three exercises, and each has its own subdirectory, Exercise 07-01, Exercise 07-02, and Exercise 07-03. For Exercise 7-1 you will navigate to the gallery subdirectory in the Exercise 07-01 folder.

There is a main page (index.html) and three other separate HTML documents located here. In addition, there are images stored in the two subfolders, photos and thumbnails.
We want to add thumbnail images to the index.html home page and use them as links to the larger images.
Open your text editor, navigate to the gallery subfolder (green arrow below) in the Exercise 07-01 folder and open the index.html file (red arrow) into your text editor.

Adding the small thumbnail images

Step 2 (this step has already been done for you, but do complete Step 3 below)

We want to first add the small thumbnail images in the thumbnails subdirectory to the home page. We want the thumbnails at the beginning of the paragraph, just after the opening <p> tag. The first one, bread-200.jpg, is already done for you in the index.html document. The bread-200.jpg thumbnail image is shown on the right.

<h2>Our Baked Goods</h2>

We start our day at the crack of dawn to bake our own muffins, bread, and dinner rolls. Loaves not used that day are donated to the local food shelter. </p>

Step 3

Each image is 200 pixels by 200 pixels. Add the width and height attribute settings to the bread-200.jpg <img> element, that's in the Our Baked Goods paragraph, as shown in bold text here:

<h2>Our Baked Goods</h2>

We start our day at the crack of dawn to bake our own muffins, bread, and dinner rolls. Loaves not used that day are donated to the local food shelter. </p>

bread-200.jpg

Step 4

Add the burgers-200.jpg thumbnail from the thumbnails subdirectory to the Our Burgers paragraph. Use "juicy burgers on a cutting board" as the alternate text <alt> for burger-200.jpg. Don't forget the break tag <br> at the end:

<h2>Our Burgers</h2>

People come from all over to enjoy our lovingly made burgers. We grind our own locally-sourced organic beef and turkey so you know it's fresh and free from fillers and other nonsense. Go for one of our creative topping combos or stick with the classics. </p>

burger-200.jpg

Step 5

Add the fish-200.jpg thumbnail from the thumbnails subdirectory to the Catch of the Day paragraph. Use "baked fish with potatoes and cherry tomatoes" as the alternate text for the fish-200.jpg image. Don't forget the <br> at the end, and place this new <img> element immediately after the <p> tag, as shown here:

<h2>Catch of the Day</h2>

Our chef works with local fisherman to pick the freshest the sea has to offer for our daily seafood special. Our Roast Cod Caponata with Roasted Potatoes is an old favorite with our regulars.</p>

fish-200.jpg

Step 6

Save the index.html file back into the gallery folder that's in the Exercise 07-01 folder.

NOTE: Do not save the index.html file in the Exercise 07-01 folder. Save it in the gallery subfolder.

Step 7

In Sublime, right-click and select Open in Browser, or if you are using File Explorer, navigate to the index.html file in the gallery folder. Double left-click on it to open it in your web browser. Check to see if the three images are visible and appear the right size, as thumbnail images. It should look like the image below.

Step 8 (optional)

The original index.html document (on the left) and the finished index.html document (on the right) are shown below.

The added text is highlighted in red letters on an orange background, and as blue text on a purple background.
The added lines are shown in red and purple text on a green background.
To conserve space, I am only showing the lower half of the index.html document.

Adding full-sized images to the bread.html, burgers.html, and fish.html documents

Step 9

Open your text editor, navigate to the gallery subfolder in the Exercise 07-01 folder and open the bread.html file into your text editor. You won't be making any changes to this document. Its purpose is to show you how the img element is used to show the image of the bread (bread-800.jpg image).

Step 10 (optional)

The three website documents you will work on here, bread.html, burgers.html, and fish.html, are missing the following CSS markup h2 { color: #d1633c; font-size: 1em; } that appears in the finished versions of these three documents that the author provided. This was inadvertently left out, so it will not count against you if you do not use it. I show it here just for your information only.

The CSS in the style sections need to give the h2 headings the color #d1633c (moderate orange), and they need to have a font size of 1em. This missing CSS is shown in bold below. This CSS was mistakenly left out of the original bread.html, burgers.html, and fish.html documents.

<style>

body {

background-color: #faf2e4;

margin: 0 10%;

font-family: sans-serif;

text-align: center;

}

h1 {

text-align: center;

font-family: serif;

font-weight: normal;

text-transform: uppercase;

border-bottom: 1px solid #57b1dc;

margin-top: 30px;

}

h2 {

color: #d1633c;

font-size: 1em;

}

</style>

Step 11 (this has already been done for you)

Next, we need to add the three full-sized images to their separate individual HTML documents. Each of these images will be 800 by 800 pixels. In the bread.html document, the full-size bread-800.jpg image, that is located in the photos subdirectory, is already added for you as shown here in bold text.

NOTE: Since the bread-800.jpg image is not located in the same directory as the bread.html document (the bread.html document is the one you are editing now), you have to list its subdirectory name, i.e. photos, before the bread-800.jpg, like this in the img element: src="photos/bread-800.jpg"

<body>

<h1>Gallery: Baked Goods</h1>

<p><a href="index.html">[Back to Gallery]</a></p>

</body>

Once you are finished looking at the bread.html document, close it from your text editor.

Step 12

Navigate to the gallery subfolder in the Exercise 07-01 folder and open the burgers.html file into your text editor.

In the burgers.html document, use an img element to add the burgers-800.jpg image that is located in the photos subdirectory as shown here in bold text here:

<h1>Gallery: The Best Burgers</h1>

<p><a href="index.html">[Back to Gallery]</a></p>

</body>

</html>

Step 13

Save the burgers.html file back into the gallery folder that's in the Exercise 07-01 folder.

Step 14

Navigate to the gallery subfolder in the Exercise 07-01 folder and open the fish.html file into your text editor.

In the fish.html document, add the fish-800.jpg image that is located in the photos subdirectory.

<h1>Gallery: Catch of the Day</h1>

<p><a href="index.html">[Back to Gallery]</a></p>

</body>

</html>

Step 15

Save the fish.html file back into the gallery folder that's in the Exercise 07-01 folder.

Step 16 (optional)

The following images show what the original and the finished documents, burgers.html and fish.html, from this exercise should look like. The original document is on the left and the finished document is on the right.

On the right-hand side, the HTML markup you added is shown in purple and red text on a green background.
The location where the added text was placed is shown is highlighted in pink on the original documents (on the left-hand side).
To conserve space, I am only showing the lower half of these two website documents.
Note: bread.html was already done for you so no changes were needed.

Add a link from the thumbnails in index.html to their respective files

Step 17

Navigate to the gallery subfolder in Exercise 07-01 folder and open the index.html file into your text editor.

Step 18 (this has already been done for you)

In the index.html document, we can now link the thumbnail images to their respective files (i.e. bread.html, burgers.html, and fish.html). In the index.html document, the <a> element has already been added for you as shown here in bold text.

Important: Notice how the anchor element <a> surrounds the img element, making the image a link to the bread.html document. No text is needed for this link.

<h2>Our Baked Goods</h2>

We start our day at the crack of dawn to bake our own muffins, bread, and dinner rolls. Loaves not used that day are donated to the local food shelter. </p>

Step 19

In the index.html document link the burgers thumbnail to the burgers.html document as shown here. Remember to surround the img element with the anchor element by putting the opening anchor tag <a> at the beginning of the img element, and putting the closing anchor tag </a> at the end of the img element.

<h2>Our Burgers</h2>

Step 20

In the index.html document, link the fish thumbnail to the fish.html document.

<h2>Catch of the Day</h2>

Our chef works with local fisherman to pick the freshest the sea has to offer for our daily seafood special. Our Roast Cod Caponata with Roasted Potatoes is an old favorite with our regulars.</p>

Step 21

Save the index.html file back into the gallery folder that's in the Exercise 07-01 folder.

Notice that in the index.html document, the URL value for the href attribute in the anchor elements for the burgers.html and fish.html documents is relative to the current document index.html, i.e., they are in the same directory as the index.html document, and not relative to the location of the images (which are located down in the thumbnails subdirectory).

Step 22

If all the images should now be visible and you are able to link to each page (bread.html, burgers.html, and fish.html) and then link back to the home page index.html again, then congratulations, you’re done with Exercise 7-1! The final result should look like this:

Step 23 (optional)

The original index.html document and the finished index.html document are shown below. The original document is on the left and the finished document is on the right.

On the right-hand side, the HTML markup you added is highlighted in red and purple letters on an orange background.
To conserve space, I am only showing the lower half of the website documents.

Back to the Top

Read pages 139-147 before starting Exercise 7-2.

Exercise 7-2 What you need to know for this exercise

SVG (Scalable Vector Graphics) are an appropriate format for storing vector images.
SVG images have many features, including they can be resized without loss of quality.
They require less data than an image saved in a bitmapped format, they can be animated, and they can be modified with CSS (Cascading Style Sheets).
The SVG image can be used three different ways:
- In the <img> element, just like the other image formats.
- SVG images can be specified by instructions written out in a text file. <SVG> has its own set of elements that define shapes like rectangle <rect>, circle <circle>, and paths <path>.
- SVG images can be embedded in the object element (covered later in Chapter 10).

NOTE: A great place to learn about SVG images is here:

https://www.w3schools.com/html/html5_svg.asp

5. All the image formats, SVG included, can be used as background images. For example, this CSS style rule example puts a decorative image in the background of a header:

header {

background-image: url(/images/decorative.svg);

}

NOTE: Some excellent examples of using images as background images are here:

https://www.w3schools.com/cssref/pr_background-image.asp

Exercise 7-2 Walkthrough

Page 144-145

Step 1

This time you will be navigating to the svg subdirectory in the Exercise 07-02 folder (not the Exercise 07-01 folder).
We need to add SVG images to the Black Goose Bistro page that you worked on previously in the Chapter 4 Exercise (but don't go there, the files are all here).
Open File Explorer, and navigate to the svg subdirectory in the Exercise 07-02 folder, open the blackgoosebistro.html document in a web browser. It should look like it was in Chapter 4, as shown here. The Black Goose image is 175 pixels by 175 pixels. A pixel is generally thought of as the smallest single component of a digital image .

Making the blackgoose.png image larger

Step 2

Navigate to the svg subfolder in the Exercise 07-02 folder and open the blackgoosebistro.html file into your text editor.

The logo, blackgoose.png, needs to be enlarged. In the blackgoosebistro.html document add these attributes and values, width="500" height="500", to the img tag as shown here in bold text:

</style>

</head>

<body>

<h1><img src="blackgoose.png" alt="Black Goose logo" width="500" height="500"><br>Black Goose Bistro</h1>

Step 3

Save the blackgoosebistro.html file back into the svg folder that's in the Exercise 07-02 folder.

Step 4

Open the blackgoosebistro.html document in a browser. The final result should look like the image below. The blackgoose.png image has become very blurry, and is of no use.

Replace the blackgoose.png image with an SVG version

Step 5

To fix this we can replace the blackgoose.png image with an SVG version of the same logo by using the Inline SVG method. In the same svg directory is the blackgoose-logo.svg file. In File Explorer navigate to the blackgoose-logo.svg file in the svg subfolder in the Exercise 07-02 folder, and double left-click on it. This will open it in your web browser. Notice that despite it being huge, it looks perfect, with no blurriness.

Step 6

Now open the same blackgoose-logo.svg file in your text editor. Its an image, but it's composed of just text, so you can open it in a text editor. We will need to copy the entire document. This is how you do that.

The easiest way to do this is to left-click once on the document in your text editor.
Then while holding down the CTRL key, press the letter A (select all).
This selects the entire document.
Then hold down the CTRL key and press the letter C (copy).
This copies all that you have selected to the Windows clipboard.
Or simply copy the entire svg element shown here below by highlighting all the text with your mouse, and then hold down the CTRL key and press the letter C. That will copy all of this text into the Windows clipboard.

</radialGradient>

</svg>

Step 7

Navigate in File Explorer to the svg subfolder in the Exercise 07-02 folder and open the blackgoosebistro.html file into your text editor.

Step 8

We will now delete the entire img element. Delete the bolded text shown below:

<h1><img src="blackgoose.png" alt="Black Goose logo" width="500" height="500"><br>Black Goose Bistro</h1>

Once you have deleted the entire img element, the <h1> element will look like this. The blurry blackgoose.png image is gone.

<h1> <br>Black Goose Bistro</h1>

Step 9

Paste the SVG text you copied from the blackgoose-logo.svg file in its place, i.e. place it right after the <h1> tag and before the <br> tag as shown here in bold text:

</style>

</head>

<body>

<h1>

</radialGradient>

</svg>

<br>Black Goose Bistro</h1>

Step 10

We want the Black Goose image to now be 200 by 200 pixels (an increase from 175 by 175 pixels). In the first part of the svg tag, add the width and height attributes and give them each values of 200px, like this: <svg width="200px" height="200px".

<h1>

Step 11

Save the blackgoosebistro.html file file back into the svg folder that's in the Exercise 07-02 folder.

Step 12

Navigate in File Explorer to the svg folder that's in the Exercise 07-02 folder, and open the the blackgoosebistro.html file in your web browser. You should see the SVG logo in place, looking as sharp as the old one, only slightly larger:

Make the SVG image larger so as to compare it to the blackgoose.png image that was blurry

Step 13

Go back to your text editor, and in the blackgoosebistro.html file, change both the width and height of the blackgoose-logo.svg image to 500 pixels (or more) as shown here in bold text:

<h1>

Step 14

Save the blackgoosebistro.html file file back into the svg folder that's in the Exercise 07-02 folder.

Step 15

Navigate in File Explorer to the svg folder that's in the Exercise 07-02 folder, and open the the blackgoosebistro.html file in your web browser.

The larger SVG image should be big and sharp! No blurry edges like the blackgoose.png image:

Step 16 (important)

Before proceeding to the next step, put the size of the SVG image back to 200 × 200 in the blackgoosebistro.html file as shown here in bold text:

<h1>

Add social media icons at the bottom of the page

Step 17

We need to add social media icons to the blackgoosebistro.html file at the bottom of the page in a footer. Below the <h2>Location and Hours</h2> section, add the following as shown in bold text. Note that the empty paragraph, <p> </p>, is where you will later add the logos.

<h2>Location and Hours</h2>

<p>Seekonk, Massachusetts;<br>

Monday through Thursday 11am to 9pm; <br>Friday and Saturday, 11am to midnight</p>

<p>Please visit our social media pages</p>

</footer>

</body>

</html>

Step 18

Use the <img> element to place the three SVG icons: twitter.svg, facebook.svg, and instagram.svg there. The icons are located in the icons subdirectory. This is shown below in bold text:

<h2>Location and Hours</h2>

<p>Seekonk, Massachusetts;<br>

Monday through Thursday 11am to 9pm; <br>Friday and Saturday, 11am to midnight</p>

<p>Please visit our social media pages</p>

<p>

</p>

</footer>

</body>

</html>

Step 19

Save the blackgoosebistro.html file file back into the svg folder that's in the Exercise 07-02 folder.

Step 20

Navigate in File Explorer to the svg folder that's in the Exercise 07-02 folder, and open the the blackgoosebistro.html file in your web browser.

The social media icons appear, but they are too large.

Use Cascading Style Sheets (CSS) to make the social media icons smaller

Step 21

Using CSS, we can use a couple of style rules to make the footer look nice.

NOTE: CSS has not yet been covered in the text, so just copy the text and place it inside the style element in the head of the document as shown here in bold text before the </style> closing tag.

<head>

<title>Black Goose Bistro</title>

<style>

body {

background-color: #faf2e4;

margin: 0 10%;

font-family: sans-serif;

}

h1 {

text-align: center;

font-family: serif;

font-weight: normal;

text-transform: uppercase;

border-bottom: 1px solid #57b1dc;

margin-top: 30px;

}

h2 {

color: #d1633c;

font-size: 1em;

}

footer {

border-top: 1px solid #57b1dc;

text-align: center;

padding-top: 1em;

}

footer img {

width: 40px;

height: 40px;

margin-left: .5em;

margin-right: .5em;

}

</style>

</head>

Step 22

Save the blackgoosebistro.html file file back into the svg folder that's in the Exercise 07-02 folder.

Step 23

Navigate in File Explorer to the svg folder that's in the Exercise 07-02 folder, and open the the blackgoosebistro.html file in your web browser. The social media icons now appear correctly as shown below.

Back to the Top

Read pages 146-156 before starting Exercise 7-3.

Exercise 7-3 What you need to know for this exercise

1. The large images that are displayed on computer screens are overkill for the smaller screens on smartphones and tablets. And the larger file sizes of these images means it will take longer than it needs to be to display them on smartphones and tablets.

2. The solution: Responsive web design. Responsive means a website will look just as good on small screen like a smartphone as it does on a much larger screen.

3. The srcset attribute used with the <img> element allows you to specify a list of image source options for the browser to choose from, depending on the size of the screen.

4. Its basic syntax is <img src="image-URL" alt="" srcset="image-URL #x, image-URL #x">

5. The sizes attribute allows you to limit unnecessary data downloads by providing appropriately sized images. Smaller sized images for smaller screens. Larger sized images for larger screens.

NOTE: Pages 147 to 152 in the text can be a bit confusing, so I have these additional resources that help to explain it.

6. On a mobile device, the viewport fills the whole screen. On a desktop browser, the viewport is the area where the page displays, not including the scrollbars.

7. The <picture>…</picture> element has no attributes; it is just a wrapper for some number of source elements and an img element.

8. The <source>…</source> element specifies alternate image sources. It has the srcset attribute and either the media or type attributes.

NOTE: A great place to learn about the picture element is here:

https://www.w3schools.com/html/html_images_picture.asp

NOTE: A great place to learn about the source element and srcset attribute is here:

https://www.w3schools.com/tags/att_source_srcset.asp

8. Each source element includes a media attribute and a srcset attribute. It can also use the sizes attribute

9. For the newer image-format-based selections (i.e. the WebP, JPEG 2000, and JPEG XR image formats) , each source element has two attributes: the srcset attribute that we’ve seen before, and the type attribute for specifying the type of image file.

Exercise 7-3 Walkthrough

Pages 156-158

Step 1

We’re going to give the Black Goose Bistro Gallery page a makeover using responsive images.
Instead of the user clicking a thumbnail and going to a separate page (as we did in Exercise 07-02), the large images will appear right on the page and resize to fill the available space. Pretty cool.

Making the large images appear right on the home page Instead of a separate page

Step 2

Open File Explorer, and navigate to the Exercise 07-03 subfolder in the Ch7 folder. Open the responsivegallery subdirectory, and then open the index.html file in your text editor.

NOTE: The index.html file mistakenly has as its title, Blackstone Bistro Gallery when in fact it should be the Black Goose Bistro Gallery. This is just a mistake in the materials for this exercise and can be ignored.

Step 3 (this has already been done for you)

The meta element is used to set the viewport to the same size as the device width, which is required to make this page responsive. This element is already provided for you as shown below in bold text:

<!doctype html>

<html>

<head>

<title>Black Goose Bistro Gallery</title>

<style>

Step 4 (this has already been done for you)

In the <style> section the CSS that sets the maximum width to 100% of the available space for the img elements is likewise already provided for you. Here, img is the selector, max-width is the property, and 100% is the value.

img {

max-width: 100%;

}

Step 5

These images illustrate what these responsive images will look like when you are finished with this exercise.

Adding the picture element to the Our Baked Goods paragraph

Step 6

To change between horizontal and square versions of the image on this page, we need to use the picture element in the first paragraph after “Our Baked Goods,” including the picture wrapper and its required img element. The img element points to the default small (400 pixels by 400 pixels) square version of the image (bread-400.jpg).

Add a line break element <br> after the picture element to start the text on the next line as shown here in bold text:

<h2>Our Baked Goods</h2>

<p>

</picture>

<br>We start our day at the crack of dawn to bake our own muffins, bread, and dinner rolls. Loaves not used that day are donated to the local food shelter. </p>

This bread-400.jpg image will be used for devices with small screens.

Step 7

Adding a source element inside the picture element will tell the browser to use a 1200-pixel-wide landscape version of the image when the viewport is larger than 480 pixels. This source element is shown below in bold text. Notice it goes after the opening picture tag <picture> and before the img element.

<h2>Our Baked Goods</h2>

<p>

</picture>

<br>We start our day at the crack of dawn to bake our own muffins, bread, and dinner rolls. Loaves not used that day are donated to the local food shelter. </p>

Because there is only one image specified in the source, you could have used a simple src attribute instead of the source element.

Step 8

The bread-1200.jpg image is rather large, so a 800 pixel version of that image could also be used.

The srcset attribute specifies a comma-separated list of images and their respective pixel widths with w-descriptors.

Before we add the 800 pixel version of the image, we need to add the 1200w descriptor to the bread-1200.jpg image like this:

srcset="images/bread-1200.jpg 1200w (Don't type in anything just yet)

Now you can add the 800-pixel bread-800.jpg image to the srcset attribute with the 800w descriptor :

srcset="images/bread-1200.jpg 1200w, images/bread-800.jpg 800w" (don't type in anything just yet)

Step 9

Finally, use the sizes attribute to let the browser know that the image will occupy 80% of the viewport width by giving it a value of 80vw. Here is how it will all look, with this new added text markup shown in bold text here:

<p>

<source media="(min-width: 480px)"

srcset="images/bread-800.jpg 800w,

images/bread-1200.jpg 1200w"

sizes="80vw">

</picture>

<br>We start our day at the crack of dawn to bake our own muffins, bread, and dinner rolls. Loaves not used that day are donated to the local food shelter. </p>

Step 10

Save the index.html file back into the responsivegallery folder that's in the Exercise 07-03 folder.

Step 11

Navigate in File Explorer to the responsivegallery folder that's in the Exercise 07-03 folder, and open the the index.html file in your web browser.

Try changing the width of the browser to resize the window. When the browser width is narrow, the 400 pixel version of the bread photo should appear as shown below. When the width of the browser is larger, it will switch to either the 800 pixel or the 1200 pixel version of the photo.

Finish by adding these same settings to the last two images on this page

Step 12

Go back to your text editor, and in the responsivegallery folder, add the two remaining images, burgers and fish, to the index.html page. The entire picture element for each is shown below in bold text.

<h1>Black Goose Bistro Gallery</h1>

<p>Not is our food good, it's also good-looking! Our patrons often stop to admire our fare with a quick Instagram before digging in. We've collected a few of our favorite shots here.</p>

<h2>Our Baked Goods</h2>

<p>

</picture>

<br>We start our day at the crack of dawn to bake our own muffins, bread, and dinner rolls. Loaves not used that day are donated to the local food shelter. </p>

<h2>Our Burgers</h2>

<p>

</picture><br>

<h2>Catch of the Day</h2>

<p>

</picture><br>

Our chef works with local fisherman to pick the freshest the sea has to offer for our daily seafood special. Our Roast Cod Caponata with Roasted Potatoes is an old favorite with our regulars.</p>

</body>

</html>

Step 13

Save the index.html file back into the responsivegallery folder that's in the Exercise 07-03 folder.

Step 14

Navigate in File Explorer to the responsivegallery folder that's in the Exercise 07-03 folder, and open the the index.html file in your web browser. It should now appear as shown below:

Back to the Top

You are done !!!

Report abuse