Sunday 6 March 2016

Commonly Used HTML Tags

You Only Need
10 HTML Tags

This tutorial is an introduction to the 10 most common HTML tags. HTML is a very simple markup language. Even though there are close to 100 tags in HTML5, you usually only end up using a handful 99% of the time. I am going to teach you 10 HTML tags you need to markup almost all content and anything else you can think of when creating a web page.

10 HTML Tags

The 10 HTML tags in the list below are for formatting content. Here are the 10 HTML tags I am going to teach you:
<h1> - <h6>Heading
<p>Paragraph
<i>Italic
<b>Bold
<a>Anchor
<ul> & <li>Unordered List & List Item
<blockquote>Blockquote
<hr>Horizontal Rule
<img>Image
<div>Division

Heading

The next step is learning a new HTML tag, the heading tag. In HTML there are 6 sizes of HTML heading tags. The biggest is the <h1> tag and the smallest is the <h6> tag. Here is a list of all the HTML heading tags.
  1. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
You can use heading tags to create… well…. headings in HTML. Just like in our example document, we need different sized headings in our web page to show the formatting and hierarchy of our content.
Let’s add some HTML tags to our content. First we are going to use the <h1> heading tag for our page title. We are going to use the <h2>tag for our smaller headings. And finally, we are going to use paragraph tags for our paragraphs. You can type this right in your content document just like the example below.
example2

Paragraph

HTML is used to describe the content in the document (or web page) you are creating. The purpose of HTML is to describe the content and provide structure. You can think of HTML tags like extra information about the content you have created – extra information that the computer can use so that it knows how to display your content on the web page.
Suppose you have a paragraph that you would like to use on a website. We can use the HTML paragraph tag to tell the computer that your content is a paragraph. Here is an example of a web page paragraph:
  1. <p>This is a great paragraph. I really like writing content that I can use in my websites. I hope that you enjoy this as much as I do. </p>
That’s it! You just created an HTML paragraph. No trouble at all. I told you this would be easy. Now that you know how to wrap content in HTML tags – you can start creating web pages. I am going to show you a few HTML tags that you can use to get started. But first, let’s create an example of a document in Microsoft Word with headings and paragraphs and let’s see how we can use our new powers to turn that into an HTML web page.

Creating Bold & Italic Words

Let's start with something very common. Creating bold and italicwords. Open the example document from the first tutorial - example1.doc in your favorite word processor (Microsoft Word or other). Go ahead and make a couple bold words in your paragraphs and make a few italic words too. You already know how to do this. Your document should look something like the example below:
example1
As you can see, I have created 3 bold words and 2 italic words in our document. the HTML tags for bold and italic are very easy to remember. Use the <b></b> tag for bold, and use the <i></i> tag for italic. The next step is to add our HTML tags to the document around the bold and italic words. Your document should look like the example below:
example2
Open your webpage.html file from the last tutorial in your favorite text editor (Notepad for Windows & TextEdit if you are using a Mac). Copy all the content from your example1.doc document and replace the content in your webpage.html file. Save this file and open it in your web browser by double clicking it. It should look something like the example below:
example3

Creating Links

Links are one of the most important part of any web page. You have probably visited thousands and thousands of links as you have browsed the internet. Links are easier to create than you think. We can create links (hyperlinks or "anchors") by using the HTML <a></a>tag. Let's add a line to our webpage.html file like line #9 in the example below:
  1. <h1>My First Web Page</h1>
  2. <h2>Headings Are Great Fun</h2>
  3. <p>This is my first <b>paragraph</b> in my new <i>webpage</i>. This is going to be great. I am so excited I can hardly contain <b>myself</b>. Don't you just love paragraphs? I find them very useful. </p>
  4. <h2>Web Pages Are Exciting Too</h2>
  5. <p>Yes, that's right - web pages can be a lot of fun. Learning how to create web pages is easy and <b>entertaining</b>. This is my second <i>paragraph</i>. I hope you like it.</p>
  6. <a>Link to Google</a>
Once you have added the link HTML to your webpage.html file, save your file.
To view the changes that you just made to your webpage, you can click the "refresh" button on your web browser. Or you can press CONTROL + R(Windows) or CMND + R (Mac). This will "refresh" the view of your web page in the browser and you will be able to see the new changes. You will be doing this a lot as you make changes to your web page.
Even though we added <a></a> tags around the words "Link to Google", we didn't actually tell our link where to go. So, the link in our example will do nothing. Don't worry, we can fix that by adding a little bit more information to our <a></a> tag. We can customize HTML tags and provide them with more information by using attributes. To make our link to google work, we need to add an attribute with the address of the web page we want our link to go to. View the example below:
  1. <a href="http://www.google.com">Link to Google</a>
Add the attribute to your tag in your webpage.html file like the example above. Save your file and refresh your web browser. You should see a link to google at the bottom of the page. Go ahead and click it! Congratulations, you now know how to make links! You can wrap any word in your web page in "anchor" tags and create a link. You can make links to any webpage on the internet. You can add as many links as you like. Experiment and have fun. You are well on your way to becoming an expert at working with HTML.
example4

Creating Lists

We are going to learn how to create a list. We are going to create a bulleted list. You are probably very familiar with bulleted lists like the example below:
  • Apples
  • Bananas
  • Pears
  • Oranges
  • Grapes
In your webpage.html file, type a list of fruits like the example above. Next we are going to turn our plain text list of fruits into a real HTML list. The HTML <li> tag is for creating "list items". We are going to surround each item on our list in <li></li> tags. The next step is to surround our list of items with the HTML <ul></ul> tag. The "Unordered List" tag groups all our list items together in a single list. Follow the example below:
  1. <ul>
  2. <li>Apples</li>
  3. <li>Bananas</li>
  4. <li>Pears</li>
  5. <li>Oranges</li>
  6. <li>Grapes</li>
  7. </ul>
Save your webpage.html file and refresh your web browser. You should be seeing something like the image below:
example5

Creating Blockquotes

The HTML <blockquote></blockquote> tag is really straight forward. It's for creating quotes on the page – nothing more. Why is this important? Well, it's great to use in an article when you have to quote someone else or someone's writing or and excerpt or for client testimonials or just plain old quotes in general. You already know how to wrap content with HTML tags and these are no different. See the example blow:
“A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.”
Saint Exupery
  1. <blockquote>“A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.” - Saint Exupery</blockquote>
Create a blockquote in your webpage.html file and save it. Refresh your web browser – that's it! You have just mastered the HTML blockquote tag. (pretty easy stuff isn't it.)

Creating Horizontal Rules

The HTML horizontal rule <hr /> tag is a way to create a break in your web page content and draw a line across the page. Unlike the other tags you have learned, the horizontal tag does not have an open an closing tag and does not wrap around content. You may have noticed that this tag has a / forward slash in it just before the closing angled bracket. This is called a self–closing tag. View the example below:

  1. <hr />
Horizontal rules are a great way to divide a web page. Go ahead and add an <hr /> tag to your webpage.html file, save it and refresh your web browser to view the results.

Using Images

Most web pages on the internet have some type of image content on the page. Images in HTML are easy to use. Just like the <hr /> tag, the HTML image tag is self-closing and does not have a closing tag. View the example below:
  1. <img />
Just like the <a></a> tag (for creating links), the HTML <img /> tag needs an attribute to tell it what image to show on your web page. View the example below:
  1. <img src="myimage.jpg" />
src="myimage.jpg" This part of the image tag – the attribute, says that this image tag has a source (src) of myimage.jpg. So now we need a JPEG image named myimage.jpg. You can make an image with that name, or you will see a myimage.jpg image included in the example files for this tutorial.
Place the myimage.jpg file in the same folder/directory on your computer as your webpage.html file. Add the HTML <img /> tag to your web page like the example above. Save it, refresh your web browser and view the results. You should be seeing something like the example below:
example6
Congratulations! You just learned how to add images to your web page. There is a lot you can do with images, like wrapping text around them, resizing them, adding borders to them, etc. Don't worry, I am going to show you how to do all that in a later tutorial. For now, all we needed to learn was how to put an image in our web page – and you have learned that. Great job!
You only have one more tag to learn and you will know all the most important HTML tags there are to know. You are well on your way to becoming an HTML expert. Way to go!

HTML Divisions

I saved this last HTML tag for last for a reason. This tag is a lot like the other HTML tags you have just learned. In a lot of ways, it's just like a<p></p> paragraph tag. The difference with this HTML <div></div> tag is that it is not for a specific type of content. This tag is for creating structure in your web page. You can think of it like a container or a building block. View the example code below: 
<div>This is a DIV container</div>
Add an HTML <div></div> tag like the example above to your web page, save it, and refresh your browser.
DIV is short form for 'division' and that is exactly what this tag is for. It is for dividing your web page content into containers. You have probably seen a lot of websites with "boxes" of content on the screen. This is a very common style of web design. That is what the <div></div> tag is for – creating sections or blocks of content. They are the building blocks of the web.
You can put any type of content in a <div></div> tag even other HTML tags! View the example below:
  1. <div>
  2.     <h2>A Title</h2>
  3.     <a href="http://www.google.com">A link</a>
  4.     <p>Some example text</p>
  5. </div>
The example above is just to illustrate that I can place anything in an HTML<div></div> tag. 


No comments:

Post a Comment