Learn how to create a structured webpage using HTML and CSS, with detailed guidelines on organizing content into semantic sections, adding and tagging images, and laying out a complete website.
This exercise is excerpted from Noble Desktop’s past front-end web development training materials and is compatible with updates through 2022. To learn current skills in web development, check out our coding bootcamps in NYC and live online.
Note: These materials are provided to give prospective students a sense of how we structure our class exercises and supplementary materials. During the course, you will get access to the accompanying class files, live instructor demonstrations, and hands-on instruction.
Topics covered in this HTML & CSS tutorial:
Organizing content into semantic sections, Adding images, Tagging headings
Exercise Preview
Exercise Overview
This is the first in a series of exercises in which you’ll lay out a complete website. In this exercise, you’ll begin by laying out the basics of a single page. You will build the structure of the page and place content inside each section.
Getting Started
We’ll be using a new folder of provided files for this exercise. This website folder contains images, some partially made webpages for you to finish, and a couple of code snippets, one of which contains tagged HTML content for you to copy and paste. Close any files you may have open in your code editor to avoid confusion.
-
We’ll be working with files in a folder named Revolution Travel located in Class Files > Web Dev Class.
TIP: It’s helpful to see the entire website folder as you work. If you’re working in Visual Studio Code, you can:
- Go to File > Open (Mac) or File > Open Folder (Windows).
- Navigate to Class Files > Web Dev Class > Revolution Travel and hit Open (Mac) or Select Folder (Windows).
- If you get a message about trusting the author, check on Trust the authors of all files in the parent folder and click Yes, I trust the authors.
- In your code editor, open sanfran.html from the Revolution Travel folder.
-
Change the title of the document to the following, shown below in bold:
<head> <meta charset="UTF-8"> <title>Travel Info for San Francisco, CA - Revolution Travel</title> </head> Save the file.
Coding Up the Sections
- To see a finished version of the page you’ll be building, navigate to the Desktop and go into the Class Files folder, then Web Dev Class folder, then Revolution Travel Done.
- Ctrl–click (Mac) or Right–click (Windows) on sanfran.html, go to Open with and select your favorite browser.
- Notice that the page is composed of four main sections: a header (the logo), navigation, main content, and a footer (the copyright) on the bottom. Let’s code up each of these sections.
- Return to sanfran.html in your code editor.
-
Add the following sectioning tags (highlighted in bold) inside the body tag:
<body> <header></header> <nav></nav> <main></main> <footer></footer> </body> If you were to preview the file in a browser, you wouldn’t see a thing. By default, section elements have no border, no background, and are only as tall as the content inside of them. Browsers will render these sections as block-level elements.
Block-level Elements
Block-level elements stack on top of one another like a child’s building blocks. Each one begins on a new line and takes up 100% of the width of their parent container. These sectioning elements (header, nav, main, etc.) are block-level elements. Paragraphs, headings, divs, and lists are some other block-level elements that we’ve already covered.
Adding Content to the Header
-
The header should feature the company’s logo. Add the following bold code:
<body> <header><img src="images/revolution-logo.png"></header> <nav></nav> <main></main> <footer></footer> </body> -
While you’re here, don’t forget to add the alt text:
<img src="images/revolution-logo.png" alt="Revolution Travel"> - Save the file.
Preview the page in a browser to see the logo.
Adding the Main Content
- To save you some time, we’ve tagged up most of the main content for the page and saved it into a file. In your code editor, open page-content.html from the snippets folder (in the Revolution Travel folder).
- Select all the code (Cmd–A (Mac) or Ctrl–A (Windows)).
- Copy it (Cmd–C (Mac) or Ctrl–C (Windows)).
- Close the file.
- You should be back in sanfran.html.
- Place the cursor between the
<main>opening and closing tags. -
To make the code more legible, hit Return (Mac) or Enter (Windows) to place the closing
</main>tag on its own line like so:<main> </main> Paste (Cmd–V (Mac) or Ctrl–V (Windows)) the code into the main section.
Save the file.
Adding the Nav Content
The first five lines of the content you just pasted into the main section is actually the text for our navigation links. Let’s move them to the appropriate section.
-
Place your cursor between the
<nav>opening and closing tags and hit Return (Mac) or Enter (Windows) to place the closing tag on its own line like so:<nav> </nav> In the main section, select the first five lines, starting with Featured Location and ending with Contact.
Cut the text (Cmd–X (Mac) or Ctrl–X (Windows)).
-
Now paste it into the nav like so:
<nav> Featured Location Tour Packages Travel Tips About Us Contact </nav> - To clean up the code, delete any leftover whitespace (empty lines) at the start of the main section.
-
Let’s also mark up the nav element with the additional semantic value of an unordered list. Wrap a
<ul>tag around all the nav content as well as an<li>tag around each nav item, as follows:<nav> <ul> <li> Featured Location</li> <li> Tour Packages</li> <li> Travel Tips</li> <li> About Us</li> <li> Contact</li> </ul> </nav> Save the file.
Adding the Footer Content
-
Scroll down to the code at the bottom of the page. Place your cursor between the
<footer>opening and closing tags and hit Return (Mac) or Enter (Windows) to place the closing tag on its own line like so:<footer> </footer> - Select the last paragraph of the main content (the copyright paragraph) and cut it (Cmd–X (Mac) or Ctrl–X (Windows)).
-
Paste it into the footer like so:
<footer> <p>© Revolution Travel</p> </footer> - To clean up the code, delete any leftover whitespace (empty lines) at the end of the main section.
- Save the file.
Return to the browser, and reload the page. Nothing has been styled yet, so each section of content stacks on top of each other, and wraps to the edge of the browser window.
Marking Up the Headings
Let’s mark up the text to give more structure to the topics on the page.
- Return to your code, and near the top find the first paragraph in the main section.
-
As shown below, change the p tags to h1 tags:
<main> <h1> Featured Location: San Francisco, California</h1> -
A couple paragraphs down, find Things to Do and change the p tags to h2 tags:
<h2> Things to Do</h2> <p>San Francisco is filled with culture, fine eating, nightlife and more. From beaches and parks, museums, bike riding, cable cars, to street performers, there is always something to do. The hard part is deciding how you’ll spend your time! Here are a few recommendations:</p> -
Several paragraphs below that, find Local Travel Tips and again change the p tags to h2 tags:
<h2> Local Travel Tips</h2> <p>San Francisco has pretty mild temperatures all year long. While that means you won’t be too freezing or too hot, don’t be fooled by the lore of “sunny California.” San Fran does tend to be on the chilly side, especially at night or when the wind gets blowing. Bring some extra layers in case you need them. Most people are surprised to find it’s colder than they expected.</p> -
Save the file, return to the browser, and reload to see the improved markup.
The page doesn’t have much going on yet, but you now have most of the HTML structure needed to start styling the elements. You can keep sanfran.html open in the browser and the code editor as you’ll continue them in the next exercise.
How to Create a Brand New HTML File
In this exercise we provided a starter HTML file with the basic tags. If you don’t have that, here’s how to create a new HTML file in Visual Studio Code (and most code editors that have Emmet installed):
- Go to File > New File.
- Save the file as some-file-name.html
- To quickly create all the basic HTML tags, type an exclamation point (!) and hit Tab. (This step requires Emmet which Visual Studio Code has.)
NOTE: Visual Studio Code adds a line of code that’s old and no longer needed, so delete this line of code:<meta http-equiv="X-UA-Compatible" content="IE=edge">