HTML Tutorial

The body tag and some of its contents

For this page I am bringing back the styling because is makes some things clearer but I am not covering it yet. This page will cover some of the tags that go in the body. Enough for you to make an early 90's style webpage when everything was black and white.

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
  </style>
   <link rel="stylesheet" href="file path">
   <base href="URL">  
 </head>
 <body>
  <!-- this is a comment -->
  <h1></h1>
  <p> 
   &nbsp;
   <br>
   <img src="">
  </p>
  <hr>
  <a href=""> </a> &lt; &gt;
 </body>
</html>

Body tags

The <body>   </body> tags contain everything for browsers to display except what is in comment tags.

Comments

Comment tags hide content from the browser. They are useful to notes to yourself or, if you are working on a group project, partners: <-- This is a comment -->. Comment tags can hide one or more line of content:
<-- This is a
multi-line comment -->

Heading

The heading tag <h> (not to be confused with the head tag or the header tag) define a heading like the heading in a newspaper. They come in six sizes, <h1> to <h6> with <h1> being the biggest and most important.
<h1>   </h1>
<h2>   </h2>
<h3>   </h3>
<h4>   </h4>
<h5>   </h5>
<h6>   </h6>
Think <h1>Breaking News! Trump Declares War On Canada!</h1> as being the most important headline on a newspaper. There should only be one <h1> on a page and you shouldn't skip them as you go down. <h1>, <h2>, <h3> etc. The <h> tags, especially <h1> lets search engines know what the page is about.

Paragraphs

<p>   </p> defines a paragraph. By default, paragraphs have no margins or indentation. This page adds them with CSS

Line Breaks, Spaces and Rules

Earlier I mentioned that browsers ignore linebreaks and more than one space in a row. You can see in the paragraph above about heading tags that there are line breaks within the paragraph and that there are more than one spaces between the tags. That is done with the break tag <br> and the HTML escape entity &nbsp;:
<h1> &nbsp;&nbsp; </h1>
<br>
<h2> &nbsp;&nbsp; </h2>
Escape entities display charactors that has meaning in HTML without it having the effect that the actual charactor would have. If you are observant you will have noticed that in the example above the the heading tags didn't actually make headers. That is because replaced the less than signs with its escape entity: &lt;. Entities can be used to display letters that are not in the English alphabet, symbols in math, logic and more. Unless you are making a tutorial on HTMP or programming you probably won't have much need to use escape entities other than &nbsp;

Horizontal Rules

A horizontal rule is a line that you can use to mark a division between sections of a web page. <hr>


You now know enough to make a simple web page. It will be colorless and bland but you can make a page about a recipe or a story about a pet. To make a website you need to connect the pages with links.