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:
- Open the web editor (click the “Try it yourself!” button below)
- Use the header tags to add a title, and the paragraph tags to write a paragraph about Benji
- If you have time: write a list of Benji’s favorite treats: turkey, peanut butter, and string cheese
Use this reference chart to try some HTML tags on your own.
| Tag | Description | Example |
|---|---|---|
<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> |