Create the outline of a webpage

Now you've learnt about the parts of an HTML page you can create the outline of a page that you can use later on when you create your website.

Open with your text editor the empty 'content' HTML document you created in Lesson 2.
Copy the HTML in the box below and paste it into the HTML document. Save.

	
<!DOCTYPE html>		
<html lang="en">
 <head>		
  <title>Content</title>
  <link rel="stylesheet" href="../mystylesheet.css">
  <meta charset="UTF-8">
  <meta name="description" content="a general content page">
  <meta name="keywords" content="html, css">
  <meta name="author" content="My Name">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">	
 </head>
 <body>
			

			
 </body>	
</html>

Head section

In the 'head' section, note the file path to the stylesheet (../mystylesheet.css). The stylesheet is a level up from the content page (in the 'pages' directory), so the file path includes ../ before the file name of the stylesheet. Whenever you create a new webpage you need to check the filepath to the stylesheet to ensure it is correct.

You should enter the page title, content description and the author's name. The other settings may be left as they are.

Body section

Have a close look at the code. Note the pairs of 'html', 'head' and 'body' opening and closing tags. The space between the body tags is for the visible content you'll be adding.

Enter some content

Enter some visible content. You will enter three headings (a heading 1, a heading 2 and a heading 3), and a paragraph with some dummy text. Copy the HTML below and paste it into the HTML document between the <body> opening and closing tags. Save.

															
<h1> Heading </h1>		
<h2> Heading </h2>
<h3> Heading </h3>
<p> The quick brown fox jumps over the lazy dog. </p>

View the page in a browser

Open this page in your browser to see how it looks. That's right, your browser doesn't just display web sites – it will display any HTML file, whether it be on the web, your hard drive or even a USB.

Select Ctrl + o and navigate to the ‘content’ HTML page.

Alternatively, view the webpage this way:

Navigate to your HTML file with the file browser.
Right click – 'open with Google Chrome' (or Firefox, Safari, Opera).

Click here to see how your page should look at this stage. You should see the content in the top left corner. It looks the way it does because you have not yet applied any styling; what you see is the result of the browser default styling.

Keep the browser open when working

Whenever you're working on an HTML file, keep it open in the browser and refresh the display each time you change something – you'll need to check that all is ok as you go along.

Remember: Your changes will not show until you save the changes in your HTML file and refresh the browser.

Close the content page

You may close the content page now as you have finished with it for the time being.

<Previous lesson

Next lesson>