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 Google Drive for Desktop.  

If you have already installed Google Drive for Desktop, then when you open File Explorer (or Finder on MacOS), and navigate to your Class folder that is in Google Drive.  

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 file extension.  Website documents end with the .HTML file extension.  It is important to remember when editing website documents, to always save them as .HTML files.

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, Brave, Edge, 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 Google Drive folder. When you click on the folder you will see the My Drive Folder.  Open that up, and find your Class folder for this class. 

Step 3

Double left-click on the Class folder.

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.

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 Ch04, Ch05, Ch06, 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 Ch04 folder.

Step 6

You should now see the two 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".  

Step 12

The Sublime editor will then open up automatically.   While still holding down the left-mouse button, drag the bistro.txt file up 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.

NOTE: Many times when creating a new website, it helps to first put most, if not all, the text that will appear in the website before any HTML or CSS.  Then you can go in and add all the HTML and CSS wherever you need.  This isn't a requirement, just a method that works for many.

Step 14 - VERY IMPORTANT

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 Ch04 folder in Google Drive (as shown below with a red arrow).  

• If you click once on the Ch04 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 Google Drive or Ch04 folder.  Saving your work anywhere else but the Ch04 folder means it cannot be reviewed by your instructor.  It needs to be saved in the Ch04 folder.  So if Save As puts you someplace else, just navigate to the Ch04 folder that's in your Google Drive 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.  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 Ch04 folder in Google Drive.  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.  

Web browsers ignore spaces and line feeds (carriage returns), so all the text appears as shown below.

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 Google Drive folder.  From there navigate to your Class folder and then to the 1.Class text Exercise folder.  Finally, open the Ch04 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 Ch04 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 Ch04 folder in Google Drive.  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 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 Google Drive folder.  From there navigate to your Class folder and then to the 1.Class text Exercise folder.  Finally, open the Ch04 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 Ch04 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 a picture of a Black Goose to the web site.  The image element <img> is used to add pictures to a website.

Step 2

Open File Explorer and navigate to your Google Drive folder.  From there navigate to your Class folder and then to the 1.Class text Exercise folder.  Finally, open the Ch04 folder.  You will see the blackgoose.png image file there.  If you double click on the blackgoose.png file, it should open in your image viewer, and will look like this:

Step 3

Using the image element <img> insert the image at the beginning, before the first-level <h1> heading.  The src attribute provides the source and 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>

   <img src="blackgoose.png" alt="black goose logo">

   <h1>Black Goose Bistro</h1>

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

• The src attribute provides the location and also the name of the image file that is to be inserted.  

• The alt attributeprovides the text that would be displayed if the image is not available. 

• Both the src and the alt attributes are required in every <img> element in order for the document to be valid.

Step 4

To indicate that the image and the <h1> heading work together as the header of the document, you can wrap the elements in opening and closing <header> tags.  This allows us to apple CSS styles to these elements as a single unit.

<header>

  <img src="blackgoose.png" alt="black goose logo">

  <h1>Black Goose Bistro</h1>

</header>

Step 5

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

<h2>Location and Hours</h2>

<p>Seekonk, Massachusetts;<br>

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

Step 6

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 very simple embedded style sheet to the page.  For this you are going to use the <style> element.  This is one of the three ways you can add a style sheet to a website.  All of these are covered in Chapter 11, Introducing Cascading Style Sheets..

Step 2

The <style> element is placed inside the document's <head> element.    Add the <style> element to the <head> section as shown here:

<head>

  <meta charset="utf-8">

  <title>Black Goose Bistro</title>

  <style>

  </style>

</head>

Step 3

Next, type the style rules shown below within the <style> element.  We will be learning about all these style rules in a later part of this course.

<style>

    body {

        margin: 0 10%;

        font: 1.25rem/1.75rem sans-serif;

        color: floralwhite;

        background-color: darkslategray;

    }

    header {

        background-color: #faf2e4;

        text-align: center;

        padding: 12px;

        margin-bottom: 36px;

    } 

    h1 {

        color: darkslategray;

        font: bold 1.75rem sans-serif;

        text-transform: uppercase; 

        letter-spacing: 5px;

        margin: 0;

    }

    h2 {

        color: orange;

        font: bold 1.25rem sans-serif;

        text-align:center;

    }

</style>

Step 4

Save bistro.html, and then open it in a web browser.  It should look like the image below.  

The End