Beta Logo

Chapter Two: Building a Webpage Template with HTML 5

Let's Learn How to Make Creating WebPages Easier!

Roadmap

  1. Explain how to manage website files
  2. Describe and use HTML 5 semantic
  3. Determine the elements to use when setting the structure of a webpage
  4. Design and build a semantic wireframe

Step 1 of webpage template

step 1 image

First, go to your code editer, and make the usual starting template by putting Shift+1 and selecting the one "!" sign. Then make a title for your webpage.

Step 2 of webpage template

step 2 image

Next, you create a header in the body section of your code. Your header will apper on the top of your webpage. Make sure to start the header with "header" and close the header with "/header"

Step 3 of webpage template

step 3 image

Next, make "main", then a "div" so that you can put a title for your header. Use the "paragraph (p)" tool to put down your webpages information. Make sure to close the div before you make another one.

Step 4 of webpage template

step 4 image

Next, you make another div for your images. Your going to need to make multiple divs, depending on how many images you're going to put in. After putting in the div, you should use the "img" tool, put down the image source in the "src" section, and the alternate name for the image in the "alt" section. In order for the image to show, you need to put in the height and width of the image. It's advised to mess with the width and height until the image looks good and easy to see.