Activity 1 - Familiarize with online editor

Activity 1 - Creating a basic website

It’s now time to start building a basic website. To complete this activity, you will need to complete the following steps:

  1. Open the web editor (click the “Try it yourself!” button below)
  2. Use the header tags to add a title, and the paragraph tags to write a paragraph about Benji
  3. If you have time: write a list of Benji’s favorite treats: turkey, peanut butter, and string cheese

Try it yourself!

Use this reference chart to try some HTML tags on your own.

TagDescriptionExample
<html></html>Describes an HTML Document. Any website must start with theopening tag and end with theclosing tag.See the Code Pen example above.
<!-- -->Describes a comment. Comments are meant for other coders to see but they are not displayed on the website.<!-- This line will not show in the browser -->
<head></head>Contains all the HTML elements that give information to the browser to display the website correctly. The HTML elements betweenandtag are not displayed.See the Code Pen example above
<title></title>Contains the title of the website to be used for naming the browser tab.<head>
<title> My Website </title>
</head>
<body></body>Contains all the HTML elements that are displayed in the page like text and pictures.See the Code Pen example above.
<h1></h1>

<h6></h6>
Defines a heading/title. <h1> defines the most important (largest) heading/title, while <h6> defines the least important (smallest) heading.<h1>This will be a big title</h1>
<h4>This will be a smaller title</h4>
<p></p>Describes a paragraph.<p>Dogs evolved to love humans. In conclusion, dogs are a human’s best friend.</p>
<div></div>Defines a division or section on the site.<div>
<h1>All about me</h1>
</div>
<img>An image. It’s a self-closing tag but you must specify the source of the image for the browser to know where to get the image from.<img src=“aka.ms/Benji-the-dog”>
<hr>Draws a horizontal line. Another self-closing tag that’s useful if you want to break up the page’s content.
<hr>
<ul>
<li>
</li>
</ul>
A list. To start the list, use a <ul> tag. For each item to be added to the list, surround the item with the <li> and </li>tags. Finish the list with the </ul> tag.<ul>
<li>This is a list item.</li>
</ul>