In this tutorial, we are going to learn how to do some basic HTML tags that are commonly used.
What You’ll Need:
1) Notepad or a similar text editing program, such as TextEdit
OR
2) Dreamweaver
If you use Dreamweaver, the auto-complete and suggestion feature will help you create well-formed documents. As you type a tag, it will make suggestions on what tag you might be typing, and when you begin to close a tag, it will automatically close the most recent one that is open. I focus on using a simple program like Notepad or TextEdit because almost everyone has it, while not everyone has Dreamweaver.
If you followed along in my previous tutorial, you would have already created a basic HTML document. Here is the layout we began with:
<html>
<head>
<title>Lesson 1: HTML Introduction</title>
</head>
<body>
<p>This is our first web page!</p>
<p>This is a second paragraph!</p>
</body>
</html>
If you didn’t read the previous article, you may copy and paste the above code in your favorite text editor and follow along. If any of this is confusing to you, you should go back and read the previous article.
Paragraphs:
We have already discussed the paragraph tag, but just for reference:
- Paragraphs begin with the <p> tag and end with the </p> tag.
- Paragraphs automatically create an empty line above and below the paragraph
- Example: <p>This is a paragraph.</p>
Next, we will look a a few more common tags that are often used.
Headings:
Heading tags are very commonly used as well. The heading tags are:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
These are often used as headings for sections of text, such as the heading to a paragraph about a specific topic. The headings range from 1 to 6, with 1 being the largest and 6 being the smallest. Headings should only be used as headings and not just to make text larger or bold. Search engines use headings to help index the structure and content of your website. Many users also scan through headings to find topics of interest, so it is important to use headings appropriately and effectively. <h1> should be used for the main headings, followed by <h2>, and so on, with <h6> being the least important heading. Browsers will add an empty space before and after each heading as well, so please keep this in mind.
Hyperlinks:
The next important tag to discuss is the hyperlink. Everyone uses these! A hyperlink takes the viewer from one page to another, or from one part of the page to another part of the page, etc. There are many uses for hyperlinks. Hyperlinks are generally underlined and colored blue by default, although you can change these features if you want to using CSS, which we will discuss in a later tutorial. For now, we’ll discuss the basics.
The tag for a hyperlink is fairly simple:
<a href="http://url.html">Link text</a>
I like to remember that the a href part means that this is an anchor tag (a) and the the address is the hyperlink reference (href), meaning the address you want the hyperlink to be linked to. Links do not have to be text, and can be an image or any other HTML element. The closing tag for the hyperlink element is </a>. We will discuss the many attributes of hyperlinks in a later tutorial.
Images:
Images are used pretty often as well, so knowing how to insert them is pretty helpful. The image tag is written like this:
<img src="image.jpg" />
This tag is a self-closing tag, and therefore does not have a separate closing tag, as was the case in previous releases of HTML versions. The tag is pretty easy to under stand. img means image, which lets the browsers know you are wanting to display and image. src is the source of the image, or the address to where the image exists. Then you close the tag off with the slash (/).
The height and width of the image can also be set using the height and width attributes. If you just type the numbers, it will automatically use pixels. If you just set either the width or the height of the image, the one you didn’t set will automatically constrain its proportions based on the attribute you did set. Here is an example of setting the size of an image:
<img src="sample.png" width="50" height="50" />
The address or path to the image can be relative or absolute. A relative path means that the image in question is in the same directory or folder as the page it’s being called from. An absolute path means that the image could be in another folder or sub-folder, or even on another website altogether. These paths apply to hyperlinks as well. Examples are:
Relative:
Image – <img src="image.jpg" />
Hyperlink – <a href="about.html" >
Absolute:
Image – <img src="http://www.website.com/images/image.jpg" />
Hyperlink – <a href="http://www.website.com/aboutus.html">About Us</a>
Remember the difference when typing out these addresses. We will go further into detail on the attributes of images in later tutorials as well, but for now, at least you know the basics.
Line Breaks:
Another helpful tag in the line break tag, <br />. This is also a self-closing tag. This tag creates a line break, also known as a soft return. A line break is pretty self-explanatory, but if you don’t know, it means some text can be on one line, then the next text after the line break will be on the immediate next line. When compared to the paragraph tag, you can see that a line break does not create that additional between the sets of text.
Horizontal Rule:
One more tag I will discuss in this tutorial is the horizontal rule, <hr />. This tag is also self-closing, and is used to create a horizontal line across the page. Later, we will discuss other options and attributes that can affect this element, but for now, you can use it to create a generic horizontal line to separate text or whatever else you can think to use it for.
Here is an example of what a webpage using all of the examples might look like:
<html>
<head>
<title>Lesson 2: Basic Tags</title>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<h1>This is a heading 1 tag.</h1>
<h2>This is a heading 2 tag.</h2>
<h3>This is a heading 3 tag.</h3>
<h4>This is a heading 4 tag.</h4>
<h5>This is a heading 5 tag.</h5>
<h6>This is a heading 6 tag.</h6>
<p>This is a <a href="#">hyperlink</a> tag, but the link doesn’t go anywhere.</p>
<p>This is an image tag.</p>
<img src="http://www.webdesignsbyliz.com/wdbl_wordpress/wp-content
/themes/twentyten_2/images/sample.png" width="50" height="50" /><br />
<p>This is a paragraph using a line break tag.<br />
Here is the next line, after the line break.</p>
<p>Below is the horizonal rule tag in use.</p>
<hr />
</body>
</html>
And here is an image of what you’d see in your browser:
If you’d like to try it yourself, you can copy the code above and save it in your favorite text editor. Be sure to save it with the .html extension, and then double-click it to view it in your web browser, or right-click on it and select “Open With” and then select your favorite web browser.
This concludes this tutorial. Hope this one was helpful!
Facebook
Twitter
LinkedIn
Myspace
Youtube
