Practice Review: Creating a Simple Webpage

Try this practice exercise to see how well you understood this unit. 

Read this article to review the concepts of elements, tags, links, and images. Then, follow the instructions to create an idex.html webpage.

You can copy the HTML code for each section and paste it into Notepad (Windows), TextEdit (Mac), or an editor of your choice. Be sure to create a folder structure on your computer modeling the Working with Files section, and you can use your own image. 

Your completed index.html file contains:

  • a document header;
  • an image tag;
  • heading tags;
  • a list; and
  • a link.

This exercise does not count towards your grade. It is just for practice!

Make sure you complete all parts of this example before you continue to the next section, "Introduction to CSS".

Marking up text

This section will cover some of the essential HTML elements you'll use for marking up the text.


Headings

Heading elements allow you to specify that certain parts of your content are headings – or subheadings. In the same way that a book has the main title, chapter titles, and subtitles, an HTML document can too. HTML contains 6 heading levels, <h1>–<h6>, although you'll commonly only use 3 to 4 at most:

<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>

Now try adding a suitable title to your HTML page just above your <img> element.

Note: You'll see that your heading level 1 has an implicit style. Don't use heading elements to make text bigger or bold, because they are used for accessibility and other reasons such as SEO. Try to create a meaningful sequence of headings on your pages, without skipping levels.


Paragraphs

As explained above, <p> elements are for containing paragraphs of text; you'll use these frequently when marking up regular text content:

<p>This is a single paragraph</p>

Add your sample text (you should have it from What will your website look like?) into one or a few paragraphs, placed directly below your <img> element.


Lists

A lot of the web's content is lists and HTML has special elements for these. Marking up lists always consists of at least 2 elements. The most common list types are ordered and unordered lists:

  1. Unordered lists are for lists where the order of the items doesn't matter, such as a shopping list. These are wrapped in a <ul> element.
  2. Ordered lists are for lists where the order of the items does matter, such as a recipe. These are wrapped in an <ol> element.

Each item inside the lists is put inside an <li> (list item) element.

For example, if we wanted to turn the part of the following paragraph fragment into a list

<p>At Mozilla, we're a global community of technologists, thinkers, and builders working together ... </p>

We could modify the markup to this

<p>At Mozilla, we're a global community of</p>

<ul>
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together ... </p>

Try adding an ordered or unordered list to your example page.