Home > Chapter Review and Exercises > Chapter 4 - Creating a simple page > Chapter 4 Exercises

Before you begin this exercise

It is important that you have followed the directions for setting up your Dropbox.  

If you have already installed Dropbox, then when you open File Explorer, and navigate to your Class folder that is in Dropbox, it should look like the following.  

If there is anything else in your Dropbox, you will need to remove it.

Read pages 49-53 before starting Exercise 4-1.

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

1. Chapter 4 introduces you to HTML documents.  

2. Before you can begin these exercises you will need to install a text editor.  Instructions for installing a text editor are here:

Text Editors used in class

3. Text documents end with the .TXT extension.  Website documents end with the .HTML extension.  It is important to remember when editing websites, to always save it as an .HTML file.

4. Once a website document is saved with a .HTML file extension, you will see that its icon in File Explorer is now that of your default web browser (Chrome, Firefox, Opera, etc.).

5. If you are not seeing the file extensions, click the View tab in File Explorer.  In the Show/Hide section at top, put a check mark in the box next to File name extensions.

Exercise 4-1 Walkthrough

Page 53

Step 1

For your first exercise, you will save a text file as a website document.

Step 2

Open File Explorer and navigate to your Dropbox folder.  This is indicated below with a red arrow.  When you click on the Dropbox folder you will see the Class folder you created on the right-hand side of File Explorer.

Step 3

Double left-click on the Class folder (indicated with a red arrow below).

Step 4

You will now see the 1.Class text Exercises folder on the right-hand side of File Explorer.   Double left-click on the 1. Class text Exercises folder (red arrow below).

Notice that all of the files you will be using in this class have been placed in a folder called "1. Class text Exercises".   In that folder will be several subfolders entitled Ch4, Ch5, Ch6, etc., for those Chapters in the Class text.  If this is not what you see, then please let me know.  

Step 5

Once you have double left-clicked on the 1. Class text Exercises folder, you will now see the various Chapter exercise folders on the right-hand side of File Explorer.  Double left-click on the Ch4 folder (red arrow).

Step 6

You should now see the three files you will be using for these Chapter 4 exercises (green arrow).  It is very important to remember that as you work on these files, that you then save them right back here (more about this later).  

Step 7

You will now launch your text editor.  In this example the Sublime text editor is being used. Go to your Start menu, and click on Sublime.

Step 8

Once Sublime is started, click the minimize icon (red arrow) to send it to your Taskbar.

Step 9

When you do that, the Sublime icon will appear on your Taskbar (green arrow).

Step 10

You will now move the bistro.txt file into Sublime from File Explorer so that you can edit it.  

• Point your mouse on the bistro.txt file.

• Hold down the left-mouse button and drag the bistro.txt file down to the Sublime icon that is on your Taskbar.  

• As you are moving the bistro.txt file, all the while holding down the left-mouse button, you will see a file icon following you down to the Taskbar (red arrow).

Step 11

 Drag the bistro.txt file down to the Sublime icon that is on the Taskbar.  Hold it there a second while still holding down the left-mouse button.  You will see a notification telling you Windows is going to "Pin to Sublime Text 3".  

Step 12

The Sublime editor will then open up automatically.   While still holding down the left-mouse button, drag the bistro.txt file into Sublime.  When it is in Sublime, let go of the left-mouse button.

Step 13

You will now see the bistro.txt file in Sublime.  You are now ready to work on it.

Step 14

The first thing you need to do is to save bistro.txt as bistro.html.  You can also rename bistro.txt as index.html.  Either is fine.  The important thing is that the filename needs to end with the .html file extension in order to be recognized by web browsers as a web document.

To do this, select the File pull-down menu (green arrow) with a left-click, and then select Save As.. (red arrow).  The Save As window will appear.

Step 15

In the Save As window, navigate back to your Ch4 folder in Dropbox (as shown below with a red arrow).  

• If you click once on the Ch4 folder as it appears on the left-hand side of File Explorer, its contents will display on the right-hand side.

• Or, if you double left-click on the Ch4 folder if it appears on the right-hand side, its contents will also be displayed on the right-hand side.

You should see two files on the right-hand side, your bistro.txt files and a style.txt file.

This is VERY important.  The first place you will likely see in the Save As window will most likely not be your Dropbox or Ch4 folder.  Saving your work anywhere else but the Ch4 folder means it cannot be reviewed by your instructor.  It needs to be saved in the Ch4 folder.  So if Save As puts you someplace else, just navigate to the Ch4 folder that's in your Dropbox folder.  The path is shown below.

Step 16

At the bottom of the Save As window, is the File name: box.  Change the file name bistro.txt to bistro.html (as shown below with the red arrow) or index.html.  Again, the important thing here is to make sure you remove the .TXT file extension and replace it with the .HTML file extension.

Step 17

Once you have done that, left-click once the Save button (red arrow).  You have now saved bistro.html, your first website document.

Step 18

Go back to File Explorer, by clicking on its icon on the Taskbar.  If File Explorer is not already there, navigate to your Ch4 folder in Dropbox.  You will now see your bistro.html file, and the bistro.txt file.  Notice that the icon next to the bistro.html file is that of your web browser, in this case Chrome.  This is now  a website document.

Step 19

Double left-click the bistro.html document and you will see that it opens in your web browser.  It should look like the following.

Read pages 55-57 before starting Exercise 4-2.

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

1. While the browser can display the text from the file, we haven’t indicated the structure of the content. That’s where HTML comes in.

2. The parts of an HTML element are shown here:

3. The figure below shows the recommend minimal structure of an HTML document.

Exercise 4-2 Walkthrough

Page 58

Step 1

For this exercise, you will be adding the minimal structure needed for a website.

Step 2

Open File Explorer and navigate to your Dropbox folder.  From there navigate to your Class folder and then to the 1.Class text Exercise folder.  Finally, open the Ch4 folder.  You will see the bistro.html file you created in Exercise 4-1.

Step 3

Make sure your Sublime text editor is running.  If not start it.  Now head back to File Explorer, and using the same method from Exercise 4-1, drag the bistro.html file down to the Sublime text editor icon on your taskbar, all the while holding down the left-mouse button. Then, as Sublime opens up, drag the bistro.html file up into Sublime, and let go of the left-mouse button.  Bistro.html will now appear in Sublime as a file containing only text, and not as a website. 

Step 4

 The first line of all HTML documents is the <!Doctype> element.  This tells your browser that this is an HTML 5 (the latest version) document.  This goes at the very beginning of the document.

<!Doctype html>

Black Goose Bistro

The Restaurant

The Black Goose Bistro offers casual lunch and dinner fare in a relaxed atmosphere. The menu changes regularly to highlight the freshest local ingredients.

Step 5

Put the entire document in an HTML root element by adding an <html> start tag after the DOCTYPE and an </html> end tag at the very end of the text.

<!Doctype html>

<html>

Black Goose Bistro

The Restaurant

The Black Goose Bistro offers casual lunch and dinner fare in a relaxed atmosphere. The menu changes regularly to highlight the freshest local ingredients.

Catering

You have fun. We'll handle the cooking. Black Goose Catering can handle events from snacks for a meetup to elegant corporate fundraisers.

Location and Hours

Seekonk, Massachusetts;

Monday through Thursday 11am to 9pm; Friday and Saturday, 11am to midnight

</html>

Step 6

The document head contains the title for the page. Insert <head> and </head> tags before the content.

<!Doctype html>

<html>

<head>

Black Goose Bistro

</head>

The Restaurant

The Black Goose Bistro offers casual lunch and dinner fare in a relaxed atmosphere. The menu changes regularly to highlight the freshest local ingredients.

Step 7

In the head section is information about the character encoding <meta charset="utf-8">, and the title, "Black Goose Bistro" using the opening and closing <title> tags.

<!Doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>Black Goose Bistro</title>

</head>

The Restaurant

The Black Goose Bistro offers casual lunch and dinner fare in a relaxed atmosphere. The menu changes regularly to highlight the freshest local ingredients.

Step 8

The body of the document is defined by wrapping the text content in <body> and </body> tags.

<!Doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>Black Goose Bistro</title>

</head>

<body>

The Restaurant

The Black Goose Bistro offers casual lunch and dinner fare in a relaxed atmosphere. The menu changes regularly to highlight the freshest local ingredients.

Catering

You have fun. We'll handle the cooking. Black Goose Catering can handle events from snacks for a meetup to elegant corporate fundraisers.

Location and Hours

Seekonk, Massachusetts;

Monday through Thursday 11am to 9pm; Friday and Saturday, 11am to midnight

</body>

</html>

Step 9

You will now save the bistro.html document into the Ch4 directory.  Unlike Exercise 4-1, this time you will not use the Save As option but rather the Save option.  Left-click once on the File pull-down menu (green arrow below) in Sublime, and select Save (red arrow).

Step 10

This time the Save As window will not appear, and the bistrol.html file will get saved right where it came from, in this case it's the Ch4 folder in Dropbox.  This is done automatically for you.

Note: A keyboard shortcut when saving files is to hold down the CTRL key (CMD on MacOS) and press the letter S (for save).

Step 11

To see what the web document looks like in your browser, double left-click on the bistrol.html file while you are here in File Explorer.

Step 12

Did you see a difference from before?  The answer is no, because HTML markup doesn't get displayed in a web browser.  It's sort of like a secret code.

Read page 59 before starting Exercise 4-3.

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

1. The purpose of HTML is to add meaning and structure to the content.  It is not intended to describe how the content should look (its presentation).  The next topic in the class text is Cascading Style Sheets (CSS), and its purpose is to describe how you want the HTML content to look like.

2. In this exercise you will be using the heading elements, <h1>, <h2>,... <h6>, and the paragraph <p> element.  Finally, you will use the italic element <em>.

Exercise 4-3 Walkthrough

Page 60

Step 1

For this exercise, you will be adding some basic text elements.

Step 2

Open File Explorer and navigate to your Dropbox folder.  From there navigate to your Class folder and then to the 1.Class text Exercise folder.  Finally, open the Ch4 folder.  You will see the bistro.html file you last worked on in Exercise 4-2.

Step 3

The main heading for the page will be the same as its title, "Black Goose Bistro".  The <h1> element is the largest of the six heading elements.

<!Doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>Black Goose Bistro</title>

</head>

<body>

<h1>Black Goose Bistro</h1>

The Restaurant

The Black Goose Bistro offers casual lunch and dinner fare in a relaxed atmosphere. The menu changes regularly to highlight the freshest local ingredients.

Step 4

The three subheadings, The Restaurant, Catering, and Location and Hours,  will use the next smaller heading element, <h2>.  The entire document is shown below.

<!Doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>Black Goose Bistro</title>

</head>

<body>

<h1>Black Goose Bistro</h1>

<h2>The Restaurant</h2>

The Black Goose Bistro offers casual lunch and dinner fare in a relaxed atmosphere. The menu changes regularly to highlight the freshest local ingredients

<h2>Catering</h2>

You have fun. We'll handle the cooking. Black Goose Catering can handle events from snacks for a meetup to elegant corporate fundraisers.

<h2>Location and Hours</h2>

Seekonk, Massachusetts;

Monday through Thursday 11am to 9pm; Friday and Saturday, 11am to midnight

</body>

</html>

Step 5

The three paragraphs of text will use the paragraph <p> element.

<!Doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>Black Goose Bistro</title>

</head>

<body>

<h1>Black Goose Bistro</h1>

<h2>The Restaurant</h2>

<p>The Black Goose Bistro offers casual lunch and dinner fare in a relaxed atmosphere. The menu changes regularly to highlight the freshest local ingredients.</p>

<h2>Catering</h2>

<p>You have fun. We'll handle the cooking. Black Goose Catering can handle events from snacks for a meetup to elegant corporate fundraisers.</p>

<h2>Location and Hours</h2>

<p>Seekonk, Massachusetts;

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

</body>

</html>

Step 6

The final change is to use the emphasize <em> element to emphasize that visitors should just leave the cooking to them.

<!Doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>Black Goose Bistro</title>

</head>

<body>

<h1>Black Goose Bistro</h1>

<h2>The Restaurant</h2>

<p>The Black Goose Bistro offers casual lunch and dinner fare in a relaxed atmosphere. The menu changes regularly to highlight the freshest local ingredients.</p>

<h2>Catering</h2>

<p>You have fun. <em>We'll handle the cooking.</em> Black Goose Catering can handle events from snacks for a meetup to elegant corporate fundraisers.</p>

<h2>Location and Hours</h2>

<p>Seekonk, Massachusetts;

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

</body>

</html>

Step 7

You will now save the bistro.html document into the Ch4 directory.  Unlike Exercise 4-1, this time you will not use the Save As option but rather the Save option.  Left-click once on the File pull-down menu (green arrow below) in Sublime, and select Save (red arrow).

Step 8

To see what the web document looks like in your browser, open File Explorer, navigate to the Ch4 directory, and and find the bistrol.html file.

Step 9

Double left-click the bistro.html document and you will see that it opens in your web browser.

Step 10

The bistro.html document should look like the following:

Read pages 61-64 before starting Exercise 4-4.

Exercise 4-4 What you need to know for this exercise

1. HTML elements fall into two categories: block and inline.  

2. Browsers treat block elements as though they are in little rectangular boxes, stacked up in the page. Each block element begins on a new line, and some space is also usually added above and below the entire element by default.

3. An inline element (also called a text-level semantic element or phrasing element) does not start a new line, but rather stays in the flow of the paragraph.

4. All browsers have their own built-in style sheets that determine what the various text elements will look like. 

5. The break element <br> causes the browser to move to the next line.

6. The horizontal rule element <hr> makes a nice line across the page.

7. The image element <img> tells the browser to get an image file from the server and insert it at that spot in the flow of the text.  Its basic structure is shown here:

Exercise 4-4 Walkthrough

Pages 64-65

Step 1

For this exercise, you will be adding the image element <img> and a few breaks <br>.

Step 2

Open File Explorer and navigate to your Dropbox folder.  From there navigate to your Class folder and then to the 1.Class text Exercise folder.  Finally, open the Ch4 folder.  You will see the bistro.html file you last worked on in Exercise 4-3.

Step 3

In the same Ch4 folder is an image file named blackgoose.png.  Using the image element <img> insert the image at the beginning of the first-level heading.  The src attribute provides the name of the image file that should be inserted, and the alt attribute provides text that should be displayed if the image is not available. Both of these attributes are required in every <img> element.

<!Doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>Black Goose Bistro</title>

</head>

<body>

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

<h1>The Restaurant</h2>

<p>The Black Goose Bistro offers casual lunch and dinner fare in a relaxed atmosphere. The menu changes regularly to highlight the freshest local ingredients.</p>

Step 4

Let’s break up the last paragraph into three lines for better clarity.  Place a <br> tag at the two spots needed.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Black Goose Bistro</title>

</head>

<body>

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

<h2>The Restaurant</h2>

<p>The Black Goose Bistro offers casual lunch and dinner fare in a relaxed atmosphere. The menu changes regularly to highlight the freshest local ingredients.</p>

<h2>Catering</h2>

<p>You have fun. <em>We'll handle the cooking.</em> Black Goose Catering can handle events from snacks for a meetup to elegant corporate fundraisers.</p>

<h2>Location and Hours</h2>

<p>Seekonk, Massachusetts;<br>

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

</body>

</html>

Step 5

And now the most important step.  Save bistro.html, and then open it in a web browser.  It should look like this:

Read page 66 before starting Exercise 4-5.

Exercise 4-5 What you need to know for this exercise

1. Cascading Style Sheets (CSS) allow you to change how a website is presented.  Before CSS was created, change the appearance of a website used to be done in HTML, but with CSS, it is more convenient to make changes across your entire website.  

2. There are three ways to use CSS.  

• First, you can have it as an attribute in an element.  

• Second, you can place it inside the <style> element in the <head> section.  

• Third, you can have it refer to a stylesheet stored as a separate document.

Exercise 4-5 Walkthrough

Page 66

Step 1

For this exercise, you will be adding a <style> element to this website.

Step 2

Rather than have you type in the entire <style> element, it is stored in a file in your Ch4 folder called style.txt.

Step 3

Open File Explorer and navigate to your Dropbox folder.  From there navigate to your Class folder and then to the 1.Class text Exercise folder.  Finally, open the Ch4 folder.  You will see the bistro.html file you last worked on in Exercise 4-4 and the style.txt stylesheet. 

Step 4

Open the style.txt file into your text editor by dragging it into it.

Step 5

In your text editor, copy the entire style.txt into your clipboard.  The easiest way to do this is to,

• Click your mouse once anywhere on the style.txt file as it is open in your text editor.

• Hold down the CTRL key and press the letter A to select all of it.

• Then hold down the CTRL key and press the letter C to copy it.

The contents of the style.txt file is as follows:

<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;

}

</style>

Step 6

Return to the bistro.html file in your text editor.  Paste the CSS <style> element into the <head> section.  Do this by placing the cursor just after <title>Black Goose Bistro</title>.  Then while holding down the CTRL key, press the letter V to paste the text you copied from style.txt into bistro.html as shown here:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<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;

}

</style>

</head>

<body>

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

<h2>The Restaurant</h2>

<p>The Black Goose Bistro offers casual lunch and dinner fare in a relaxed atmosphere. The menu changes regularly to highlight the freshest local ingredients.</p>

<h2>Catering</h2>

<p>You have fun. <em>We'll handle the cooking.</em> Black Goose Catering can handle events from snacks for a meetup to elegant corporate fundraisers.</p>

<h2>Location and Hours</h2>

<p>Seekonk, Massachusetts;<br>

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

</body>

</html>

Step 7

Save bistro.html, and then open it in a web browser.  It should look like this: