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

Links

Links are very important – they are what makes the web a web! To add a link, we need to use a simple element – <a> – "a" being the short form for "anchor". To make text within your paragraph into a link, follow these steps:

  • Choose some text. We chose the text "Mozilla Manifesto".
  • Wrap the text in an <a> element, as shown below: 
    <a>Mozilla Manifesto</a>
Give the <a> element an href attribute, as shown below: 
<a href="">Mozilla Manifesto</a>
Fill in the value of this attribute with the web address that you want the link to link to: 
<a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>

You might get unexpected results if you omit the https:// or http:// part, called the protocol, at the beginning of the web address. After making a link, click it to make sure it is sending you where you wanted it to.

href might appear like a rather obscure choice for an attribute name at first. If you are having trouble remembering it, remember that it stands for hypertext reference.

Add a link to your page now, if you haven't already done so.