Learning Web Design - Chapter 7 Exercise

Chapter 7 Exercises 7-1 to 7-3

Home > Chapter Review and Exercises > Chapter 7 Exercises

Exercise 7-1

Exercise 7-2

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 two exercises, and each has its own subdirectory, Exercise 07-01 and Exercise 07-02,. 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

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 (see below). 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>

bread-200.jpg

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>

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 subfolder 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.

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

Steps 8 & 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

The three website documents you will work on here, bread.html, burgers.html, and fish.html, need the following CSS markup h2 { color: #d1633c; font-size: 1em; }. The CSS in the style section will give the <h2> headings the color #d1633c (moderate orange), and they will have a font size of 1em. This CSS is shown in bold below.

<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

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 first, 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 & 16

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

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

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>

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>

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:

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 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 (i.e. Sublime). 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

In Sublime, right-click your mouse and select Open in Browser. If you are using another text editer, use File Explorer to go 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

In Sublime, right-click your mouse and select Open in Browser. If you are using another text editer, use File Explorer to go 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

In Sublime, right-click your mouse and select Open in Browser. If you are using another text editer, use File Explorer to go 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

In Sublime, right-click your mouse and select Open in Browser. If you are using another text editer, use File Explorer to go to the blackgoosebistro.html file in your web browser. The social media icons now appear correctly as shown below.

Back to the Top

Chapter 7 Exercises 7-1 to 7-3

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

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

Exercise 7-1 Walkthrough

Page 138

Adding the small thumbnail images

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

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

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

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

Exercise 7-2 Walkthrough

Page 144-145

Making the blackgoose.png image larger

Replace the blackgoose.png image with an SVG version

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

Add social media icons at the bottom of the page

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

You are done !!!