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>
We can emphasize the text on our website by making it appear bold and in italics. These styles can be used to draw attention to specific words and phrases that are important to your main idea. Here are examples:
<strong>This phrase is in bold</strong>
<em>This phrase is in italics</em>
When making our websites, it's important that we cite where we got our information from. When it comes from another website, it's easy to link directly to the website you read!
We can add links directly to our paragraphs that are disguised as normal text. This is helpful to the reader because some links can be really long and ugly! To add a link to a line, we need to use this tag:
<a href="www.link-to-website.com">Text on Website</a>
The link in quotes is the webpage that the link will direct the reader to and the text is what will be clickable within the paragraph.
When you find a website that has information you use on your website, it's important to credit the original author by citing their work. On our websites, we will include a link to the website or original work and the author's name. For example:
According to the HTML Reference Sheet by Mr. Rua, headings should go above paragraphs to organize your website.
What is a website without images? We can use different photos, art pieces, and animations to spice up our website and make it more interesting to look at. When including an image, there are 4 factors you need to include / consider in the tags:
src: The image source is the name of the image in your file system. To be included properly, it must be in the same folder as your HTML document file!
alt: When your website has difficulty loading (due to internet connection issues or something else), this text will appear in place of your image telling the reader what is supposed to be there.
width: This is the width of your image in pixels.
height: This is the height of your image in pixels.
<img src="image.jpg" alt="Description" width=500 height=500/>
Note that if you set both a width and height, the image will be stretched to meet those requirements. Consider starting with just one. Make sure you cite your images with the author / source and a link to where you found it!