HTML is a markup language that is made up of tags and text. It can be used to create websites! In this example, we will look at the tags and formatting you need to create your first simple website. In class, we talked about how HTML can be thought of as a set of boxes around text that are divided into two main sections: the head and the body. When making your first website, don't be afraid to play around with these tools to see what you can create! This reference sheet was created with only the tools we have learned so far.
In your website's head, you define the title of the website. This is the name that appears at the top of your browser when you open it. A good title tells the reader what they should expect to see on your website. We use the <title> tag to define the title. Here is an example:
<title>My First Website!</title>
The body is where you create the majority of your website's content. We use headings and paragraphs to organize the information on our website.
There are 6 different types of headings, each a different size. They are meant to be used in a hierarchy to tell the reader what section and subsection they are in. For example, this paragraph is under the heading "Headings" which is size 3. We are in a subsection under both "The Body" and "Introduction to HTML" which have larger headings. Here are examples of how to create headings of each size:
<h1>This is the Largest Heading</h1>
<h2>This is the Second Largest Heading</h2>
<h3>This Heading is Reasonably Large</h3>
<h4>This Heading is Smaller</h4>
<h5>This is Almost the Smallest Heading</h5>
<h6>This is the Smallest Heading</h6>
We use paragraph tags to define bodies of text that are going to be on our website. It is good practice to use headers above any paragraph that changes topic. Here is an example:
<p>This is a paragraph of text...</p>
One more thing we can do with our websites is add breaks within or between headings and paragraphs. The two that we are going to use are the line break and horizontal line tags. These tags are unique because they do not need to be closed, unlike all the tags discussed previously.
Line breaks are used to move the next piece of text onto the next line. They are very useful for breaking up information in a paragraph by splitting it into two sections or putting text on multiple lines. Here is an example:
<p>This some text on line 1</p>
<br/>
<p>This some text on line 2</p>
Horizontal lines are similar to line breaks, but instead of putting the next text on a new line, it adds an actual horizontal line between your text to separate it. Here is an example:
<p>This some text above the horizontal line</p>
<hr/>
<p>This some text below the horizontal line</p>