Basic HTML Tutorial

HTML is one of the most important web coding languages in the world today. Ever since the internet first became popular in the 1990s, HTML has been the primary language used to create all different types of websites.

Over the years, HTML has been tweaked and changed. Today, HTML5 is helping a new generation of web developers create dynamic and engaging websites.

In this tutorial, you’ll learn the basics of HTML and discover the best free places to learn HTML coding skills online.
Editor’s Note: I highly recommend using HostGator for your first website, and you can get started now at only $3.95/month. HostGator make it incredibly easy to get a new site up with their one-click automatic WordPress Blog installation.

The basics of HTML

The first thing you need to know about HTML is that it involves the use of beginning and ending tags.

Think of it like a dialogue conversation between characters in a book: you need one quotation mark at the beginning of the dialogue and another at the end to indicate which character said what. Different characters require new quotation marks.

Your HTML page is separated into a number of different sections that are opened and closed by HTML tags. Tags are words surrounded by square brackets. An opening tag will look like this <html>, while an ending tag will look like this </html>

Let’s say you want to italicize a word in a sentence using HTML code. You would write the following:

Who <i>are</i> you?

This would appear on your webpage as

Who are you?

<i> is the HTML tag used to indicate italicized text. Other popular tags include <b> for bold and <u> for underlining.

No matter which HTML tag you’re using, the closing tag is extremely important. In many cases, forgetting to insert a closed HTML tag will break your webpage and cause a weird error message to appear.

In other cases – like if you forget to close a bold tag – your entire webpage from the beginning of the tag onwards will be displayed in bold text!

The most popular HTML tags for font and text

Modifying text with HTML tags is an easy and effective way to make certain words stand out. There are dozens of HTML tags dedicated to modifying various aspects of font and text.

Those text and font tags include:

Bold: <b> Will convert the enclosed text in bold. The closing tag for bold is </b>

Italics: <i> Will cause the enclosed text to be italicized. The closing tag for italics is </i>

Underline: <u> This will cause all enclosed text to be underlined. The closing tag is </u>

Line break: <br> If you want to add a single space between lines of text on a page, then you’ll use this tag. You can add multiple spaces by typing <br> one after another. If you’re starting a new paragraph, you may find it easier to use the <p> tag, which creates two blank lines between the end of the last paragraph and the next paragraph. You do not need a closing tag for <br>

New paragraph: <p> This starts a new paragraph and will create a blank line between the above paragraph and your next paragraph. If you want there to be a space of white between two blocks of text, then you can either use one <p> tag or two <br> tags. The closing tag for <p> is </p>, but it’s not required.

Center text: <center> The center tag tells the webpage to display your text down the middle of the page. It’s a useful command that can make a website look neater and tidier. You can also use it to align images in the center of a blog post. Close the tag using </center> or else everything below the tag will also be centered.

Aligning text to the left and right: <p align=”left”> <p align =”right”> These two tags will align the text in a specific paragraph to the left or right. You will need to use the closing tag </p> to indicate that your aligned text section is complete.

Change text color: <font color=”pink”> or <font color=”orange”> or <font color=”#930A0A”> You can change your font to most popular colors simply by typing in the names of these colors. However, if you want to change your text to more complex colors, then you’re going to need to use hexadecimal codes, which we’ll cover down below.

Change font size: <font size=”2”> or <font size=”6”> You can change the number in this HTML tag to any number between 1 and 7. 1 is the smallest font size and 7 is the largest.

Change font face: <font face =”sans-serif”> or <font face=”monaco”> This will change the font face to the font of your choice. Today’s popular internet browsers support hundreds of fonts and most popular font names can be inserted into HTML using the above code. If you find a certain font that isn’t supported, then you shouldn’t use that on your website because most of your viewers won’t be able to see your text!

Basic HTML page structure

HTML pages all have the same basic structure. The most common type of HTML page utilizes the following structure:

<html>

<head>

<title>My Awesome Website</title>

</head>

<body>

<p>

Welcome to my awesome website where I talk about the latest innovations in the field of transportation. Visit again soon!

</center>

</p>

</body>

</html>

Does that look confusing to you? Let’s break everything down into smaller parts.

The <html> tag tells the internet browser that the page is written in HTML code. Back in the early days of the internet, this tag was generally required for your website to work. Today, times have changed and most web browsers do not require an explicit HTML tag in order to read your page.

The <head> tag refers to your site’s header. The meta information is placed inside the header.

The <title> tag is what appears at the top of your internet browser tab. It’s the title of your webpage and it’s what search engines display when your site appears in search results.

The <meta name> tag tells search engines more information about your website. This information is invisible to visitors and does not appear on your webpage (although there are easy ways for somebody to see your meta information, including checking your source code). The meta name description tag is what search engines will use when describing that page to searchers (it’s what appears under the title tag on the search engine results page). Meanwhile, the meta name keywords describe your site’s content and help search engines categorize different webpages.

Are HTML meta tags important?

There’s a considerable amount of debate about the importance of meta tags. In the early days of the internet, search engines generally placed a heavy emphasis on meta tags in order to rank and categorize websites.

Today, however, times have changed. Too many people scammed the system and used meta tag descriptions to try to trick search engines. Search engines still look at meta tags, although they take so many other rankings factors into account that meta tags likely have a limited role in ranking your site.

It’s always a good idea to fill out meta tag descriptions with accurate information. However, don’t center your SEO efforts around your meta tags. Just because you write “Make money online” in your meta description doesn’t mean you’re going to come anywhere near the front page of Google Search for that keyword.

Editor’s Note: I highly recommend using HostGator for your first website, and you can get started now at only $3.95/month. HostGator make it incredibly easy to get a new site up with their one-click automatic WordPress Blog installation.

How to create links with HTML

Creating a link in HTML is really easy. Links let you direct website visitors to an internal webpage or an external website.

To create a link using HTML code, insert the following:

<a href=”http://www.website.com”>Name of website</a>

The section after “a href” is the URL of the page you’re trying to link to. It can be any working URL on the internet from your website or from some other website. The “Name of website” section of the HTML code is where you insert the text you want your link to display.

For example, if you want someone to visit a page on your website, you might use Click here for the name of the link. This part of a link is called the “anchor text”.

As you learn more about web development and HTML, you’ll realize how important links and anchor text can be when it comes to SEO. Google takes backlinks and anchor text into account when assigning website rankings. If you’re trying to rank a website for the keyword “Work from home”, then having backlinks with anchor text like “working from home” and “make money from home” may increase your search rankings.

You can do a number of cool things with HTML code URLs, including:

Relative URLs

Relative URLs are designed to facilitate internal linking on your site. There are two types of URLs in the world: absolute URLs and relative URLs. Absolute URLs are the universal web address for a certain webpage, like http://www.website.com/page.html

Relative URLs, on the other hand, instruct browsers to direct visitors to a certain page relative to other pages on the site. The most popular relative URL command is:

<a href=”../page.html”>Home</a>
The beginning of that URL, two dots and a slash, tells the browser to go up a single level to enter the root directory of the site.

Why would you use relative URLs? The main reason is to avoid breaking links when you change filenames or the URL structure of your site. If you change your site’s homepage from page.html to page1.html, then the absolute URLs would stop working but the relative URLs would be fine.

Changing link color schemes

As you’ve probably noticed, blue is the most popular URL color on the internet today. However, you can easily change link color to anything you like.

To do that, you need to edit the body tag and include information about different types of links in the following format:

<body link=”red” vlink=”pink” alink=”blue”>

By default, all links on your page will be red. When someone clicks on the link, it will turn blue (alink stands for active link, which means someone has just clicked on the link). If someone has already visited a link, that link will be pink (vlink stands for visited link).

Creating email link shortcuts

Email shortcuts have fallen out of fashion in recent years. However, many websites still use email shortcuts to attempt to make things convenient for visitors. An email shortcut, when clicked, will automatically redirect the visitor to their email inbox where the contact name will already be filled out.

To set up an email link in HTML, use the following code:

<a href=”mailto:john@email.com”>Send me an email</a>

In this example, John@email.com is your email address and Send me an email is the anchor text that appears.

Link to a certain spot on the page using anchor links

You’ve probably clicked on a URL that has directed you to a certain location on a page. How does that work?

Use the following steps to create an anchor link on your page:

Step 1) Create an anchor spot on your page by going into the HTML source code and finding the spot you want to link. Add the following code to that section of the page: <a name=”anchor1”>The Text You Want to Link To</a> In this case, Anchor1 can be anything – it’s just the name of your anchor and you’ll need it for step 2.

Step 2) Create a URL pointing to that anchor using the following code: <a href=”#name1”>go here</a>. Please note that this URL will only work if you’re on the same page as your anchor text. If you’re trying to link to a certain section of a page from a different webpage, then you’ll need to use the following HTML code: <a href=”http://www.website.com/page.html#name1”>Go Here</a>. The only difference between that link and a regular URL is the added hashtag/pound symbol placed immediately after the standard URL.

How to create a table in HTML

HTML tables are an effective way to organize information in lines and rows. Creating an HTML table is relatively simple but requires entering a significant amount of code.

To create a standard three by three table in HTML, use the following code:

<table>

</table>

This gives you a table with six cells. The top three cells show 1 2 3 while the bottom three cells show A B C.

As you might have already guessed, the <tr> tags refer to each table row while the <td> tags refer to table data. You don’t have to indicate how many rows and cells are going to be in your table. Instead, you can just keep adding HTML <td> and <tr> tags until your table is the correct size.

The table above looks boring. You can create more colorful and interesting tables by adding different commands to the <table> tag:

<table border=”2” bordercolor=”blue”>

This will give you a table with a border thickness of ‘2’. That border will be blue. A table with a border of ‘0’ would have an invisible border, while a table with a border of ‘7’ would have a very thick border.

You can also change the spacing and padding of your table to separate cell data and make everything easier to read. To do that, edit your <table> tag using the following commands:

<table border=”2” cellspacing=”5” cellpadding=”3”>

That will add more space within your cells and increase the space between your cells and the border. If you’re displaying a lot of complex information in your tables, then you might want to space out the information to make everything easier to read for your visitors.

You can change the width of your table to make it take up more of the page. There are two ways to adjust the width of the table using the <table> tag:

<table width=”90%”>

<table width=”250”>

If you add a percentage to the <table> tag, your table will take up that percentage of the visitor’s screen. In the example above, the table will take up 90% of the screen.

If you add a number without a percentage symbol, then your table will take up that number of pixels on the screen. In the example above, the table will take up 250 pixels of space.

In either case, the table will automatically adjust itself – including cell spacing – to take up the chosen amount of space on your screen.

Here are some other table-related HTML codes that let you customize table information and cell data:

<td width=”60%”> or <td width=”50”>: These commands will increase the width of a specific table cell. This is useful if you want one cell – like the first cell – to display a long descriptive word while the other cells contain shorter numbers.

<table height=”250”>: Changes the height of a table. In this case, the table will take up 250 pixels of space on screen.

<td align=”center”> or <td align=”right”> or <td align=”left”>: This aligns the data in a specific cell to the center, left, or right of a cell.

<td valign=”top”> or <td valign=”center”> or <td valign=”bottom”>: This aligns cell data to the top, bottom, or center of a cell.

Percentage size descriptions versus pixel size descriptions

Up above, there are a number of examples where sizes are given in either percentages or pixel sizes. What are the advantages of choosing one descriptive indicator over another?

When you choose to describe the size of a table attribute using a pixel number, you’re telling the internet browser to display the table using a specific pixel size regardless of the visitor’s resolution or monitor size.

If they’re using a resolution of 1024×768, then a pixel width of 400 might look pretty good. However, that same table could look tiny on a larger resolution like 1920×1080.

When you use percentage points, you’re telling the browser to display the table as a percentage of total screen size. This is probably your best option due to the diverse range of different resolutions and browsing devices out there today.

How to add images using HTML

So far, you’ve learned how to add text and tables to your website. Your website is going to look very boring if it only includes blocks of text and some tables.

That’s why it’s a good idea to add images to your site. Before inserting an image to an HTML document, you have to have a location (URL) for that image online.

There are a few ways to get that image URL. You can use a picture from an existing website URL. You can upload a picture to an online image hosting service. Or, you can upload that image to your own site using FTP or your Content Management System (like WordPress).

Once you have an image you’re ready to use, you can add it to your HTML page using the following code:

<img src=”http://www.website.com/image.png”>

Website.com is the website hosting the image and “image.png” is the name of the image itself. If you have uploaded the image to your own web server, then you can save time and HTML code using the following image code shortcut:

<img src=”pictures/image.jpg”>

“Pictures” is the name of the pictures folder or directory on the root of your site. “image.jpg” is the name of the picture you want to add to the page.

You can add pictures from subdirectories of your site using the following code:

<img src=”pictures/animals/zebra.gif”>

Img tags do not require a close tag. However, you can modify your img tag in a number of useful ways, including:

Alt tags: Add an alt tag to your image using the following code: <img src=”images/zebra.gif” alt=”This is a dancing zebra”>. An alt tag is what you see when your mouse cursor hovers over a particular picture.

Specify Height and Width: You can stretch and change the height/width of an image using the following code: <img src=”images/zebra.gif” height=”50” width=”100”>. If you have a lot of images on your site, then adding height and width information to those images could reduce site load times. Otherwise, this tag isn’t really necessary.

Add an image boundary or border: Add a border to your image using the following simple code: <img src=”images/zebra.gif” border=”4”>. Just like with tables, putting a border value of 0 will make the border invisible, while a border value of 7 is relatively thick.

Add multiple codes to a single image: You can add as many of the above codes as you like to a single image. To do that, simply add the codes one after another in the image tag like this: <img src=”http://www.website.com/image.png” alt=”Cool Picture” height=”40” width=”85” border=”2”> You don’t have to worry about the order of these attributes. If they’re in the img tag, then they’re all going to appear on your image.

How to fix broken image icons

Most web developers will run into broken image problems from time to time. If you followed the steps listed above but aren’t seeing an image appear on your page, then troubleshoot your code using the following tips:

-Check casing: Image filenames and reference tags must match the casing. If your image is Zebra.GIF, then your code should say <img src=”Zebra.GIF”>. Casing matters when it comes to adding images to your page.

-Double check file location: Make sure the file is in the spot you’re actually referencing. You may have mistakenly placed the file somewhere different or you may have made a typo in your code.

-Double check your HTML code: Coding HTML requires an attention to detail. Forgetting a single quotation mark can cause an entire section to break. Double check your image code to make sure it’s coded exactly as follows: <img src=”http://www.website.com/picture.png”> along with any alt codes that you may have added.

How to add a link to your image

Do you want visitors to click on your image and visit another page or site? Adding a link to any image is easy. Just use the following code:

<a href=”http://www.website.com”><img src=”images/zebra.gif”></a>

The code is very similar to a default <a href> code. The only difference is that instead of inserting words between the two <a href> and </a> tags, you insert an image.

How to add a background to your website

Adding a background to your website can enhance a color scheme or share valuable information with users. Some web developers choose to add a solid color background to their websites, while others use images or gradient color schemes.

To add a background to your website, use the following HTML code in your <body> tag:

<body bgcolor=”blue”>

This will make the background of your site totally blue.

You can edit site color using hexadecimal values (hex codes), which are six digit codes which can reference specific colors and shades. Instead of using a simple color like “blue”, hex codes let you adjust the lightness and darkness of a color as well as its coloring.

If you want to insert a background image into your website, then you can use the following HTML code:
<body background=”http://www.website.com/backgroundimage.png”>

Bullets and lists

You can create bullet points and lists in HTML using the following code:

<ul>

<li> Point 1 </li>

<li> Point 2 </li>

</ul>

“UL” stands for unordered list, while “LI” stands for list item. Your points – like Point 1 and Point 2 – will automatically be converted into bullet points. You can adjust the type of bullet by typing codes like <ul type=”circle”>, which will give you a circular bullet point.