Skip to content

Exercises (HTML): Webmaking with HTML and CSS

Jump to bottom
Jonathan edited this page Sep 15, 2023 · 6 revisions

HTML exercises

Exercise 1: Adding content elements

Instructions

  1. Together: Review the text in the body element of index.html. Decide on its structure in terms of headings, paragraphs, and lists.
  2. Add HTML content elements h1, h2, p, ul, and li to the content, where appropriate. Try to add at least one of each element before repeating elements.

Hints

  • Elements are made using tags, which are indicated by angle brackets, i.e. < and >.
  • Element tags usually come in pairs, e.g.: <h1> and </h1>.

Code snippets

 
<h1>Level 1 heading</h1>
<h2>Level 2 heading</h2>
<p>Paragraph or other text...</p>
<ul>
  <li>First list item</li>
  <li>Second list item</li>
</ul>

Exercise 2: Emphasizing text

Instructions

Inside the HTML elements from Exercise 1, add at least 6 elements of the following content elements:

  1. <strong>
  2. <em>
  3. <mark>
  4. <small>

Try to use at each element at least once!

Hints

  • These elements will be nested within other content elements, e.g.:
<p>This is example text with <strong>some strongly emphasized words</strong>.</p>

Exercise 3: Images and links

Instructions

Scroll down to the section titled, "Adding images". Find the image URLs/addresses provided. Hint: Look for text that starts with https://picsum.photos/seed …

  1. Create at least two image img elements from the URLs provided. Note: these can go anywhere but should not be inside a <p> tag.
  2. Anywhere in your project, convert some text to a link using the anchor a element. If you're not sure where to point it, you can use https://www.canadalearningcode.ca/

Hints

  • Attribute values are usually surrounded by quotes (single ' or double "), e.g. src=" ... " or href=" ... "
  • The image element tag <img> does not have a closing tag.
  • The text between an anchor element's start <a> and end </a> tags becomes the clickable part of a link.

Code snippets
  • <img> tag
<img src="https://picsum.photos/seed/qrst/800/250" alt="Photo of a black and white city skyline">
  • anchor a element
<p>
  Visit <a href="https://canadalearningcode.ca">Canada Learning Code's website</a> 
  to find out more about upcoming experiences!
</p>

Exercise 4: Sectioning elements

Instructions

  1. Together: Examine the text (with content elements added) in the body and add header and main elements to it.
  2. Examine the newly-created main element. Using section elements, divide main into sections. Try to make at least 3 sections.

Hints

  • Look for patterns in the text.
  • Try to create sections based on the presence of a short title followed by some other, longer content.

Code snippets
  • body, header and main 
<body>
  <header>
    <!-- Some header stuff here! -->
  </header>
  <main>
    <!-- Main web page content in here -->
  </main>
</body>
  • main and section 
<main>
  <section>
    <!-- First section content -->
  </section>
  <section>
    <!-- Second section content -->
  </section>
  <section>
    <!-- Third section content -->
  </section>
</main>

Clone this wiki locally