HTML Basics – Tutorial for Beginners

Learn how to use HTML

HTML Tutorial for beginners

HTML stands for “HyperText Markup Language”. It’s basically a markup language used to create webpages. When you are browsing the internet your web browser interprets HTML to display human readable content such as pictures, videos and text.

HTML is the most basic building block of any simple website. If you want to make any kind of website then you need to use HTML at the minimum. If you want to add colors and create cool layouts you will have to become familiar with some basic CSS (Cascading Style Sheets). I will show you some very basic CSS examples at the end of this tutorial just so you can start becoming familiar with all the tools that you need to build professional looking websites. When you become good at these you can start creating websites that are only limited by your imagination. In today’s very fast growing and lucrative field of web development that's a really good skill to have.

I’m going to show you examples with code that you can freely copy and use on your own website. You can modify the code as you like so it fits your site.

How to Get a FREE DOMAIN NAME

If you want to launch your website on the internet (you don’t have to for this tutorial) you will need to spend about $3 - $5 a month on a web hosting account. If you sign up for hosting with BlueHost you can get a FREE domain name. I use and recommend this webhost because they are very reliable and have great customer service.


Creating your first HTML file

I will be working on a Windows Laptop but you can use a MAC also - it doesn't matter what computer you use to make a websites. HTML works on all browsers and all computers.

Before we create our first HTML file:

  • Create a “new directory” on your computer that will contain your website and call it something like “MyNewWebsite” – do not use spaces in the directory name. This also goes for all the files you create – never use spaces when creating file names. If you want to use a space, use a dash ( – )instead like “My-New-Website”
  • Next create a “new file” in that directory and call it “index.html” – you can call it whatever you want actually, but we’ll call it index for now.
  • IMPORTANT: Make sure the file extension is set to “.html” and your file doesn’t look like “index.txt” or “index.doc”. Rename the file so it says “index.html”. If the file extension is not showing you need to turn on file extensions. See below to find out how. If you don’t create the file with an .html extension, your webpage will not display properly.
create a folder for your website

Turn on File Extensions

To build websites you need to know what type of files you are working with. You need to be able to tell an image file from a text file by looking at the file extension at the end of the file name. This option may be turned off by default on your computer. To turn it on Windows or a Mac follow the steps below.

Windows
To edit the file extension on Windows do the following:

  • Go to “Folder Option” and click on the “View” tab
  • Next uncheck “Hide extensions for known file types”
  • Click “Ok” when finished
  • Your file should now be visible as “index.html”
File Extensions on Windows

Mac
To turn on file extensions on a Mac do the following:

  • Go to Finder -> Preferences and click Advanced
  • Select “Show all filename extensions”
  • Your file should now be visible as “index.html”
File Extensions on a Mac

Working inside your HTML file

Open the blank file you just created in your favorite text editor. On windows you can use a free editor called Notepad. On a Mac you can use TextEdit. In this tutorial I will be using Notepad.

By the way, please help my website by sharing this post with your friends. It means a lot to me.

When you get more experienced working with code (when you start writing hundreds of lines of code) you will find that using a simple text editor is no longer enough. A professional code editor makes it much easier to work with code. It will make your code nicely organized, color coded, and easy to read. Some really good free code editors to use are Adobe Brackets, and Notepad++. The examples I will be covering here are simple enough that your simple text editor will do the job.

1. Open your newly created html file:
To do this, “Right Click” your html file and click on “Open With”. Select a simple text editor (Notepad or TextEdit) from the list of programs that shows up. You have to open the file in a text editor to edit the code, and open it in a web browser to see the changes. A fast way to work on your html files is to have both the text editor and the browser open at the same time. This way when you make changes to your html file and save it, you can simply refresh the browser window to see how your website looks.

2. Paste the following code into your html file – this is the same code you saw at the top of the page in the illustration.

<!DOCTYPE html>
<html>
<head>
<title>My New Website</title>
</head>
<body>
<center>
<h1>My New Website</h1>
<img src="my-image.jpg" width="376" height="249">
<p>Sample Image</p>
<a href="page2.html">Click to Continue</a>
</center>
</body>
</html>
html website

3. Save the file and go back to the folder where you created that file.

4. Preview the website in a browser
Double click the file you made to open it in the web browser. If the file doesn't automatically open in the browser window do the following: Right Click on your html file and click on “Open With”. Then select a web browser from the list of programs that shows up.

5. Everything should be working now EXCEPT the image
After the file is open in your web browser you should see a simple web page with a Heading, a Broken Image, a Subheading and a Link. The image is not there because we haven’t created one yet, and the website is pointing at an empty image right now. In the next part I will show you how images work.


Adding a Custom Image to your website

Let’s work on the image for now and later on I will explain what the other code means. You will be better able to understand what I am talking about after we work on the image.

By the way, if you haven’t shared this post with anyone yet, please do so. It really means a lot to me if you do.

As you have probably noticed, the image does not show up when you load your webpage in the browser. Why does this happen? It’s because the new webpage you have made is pointing to an image file that doesn’t exist.

Here’s the chunk of code from above that makes the image appear on the page.

<img src="my-image.jpg" width="376" height="249">

Adding a Custom Image to your website

Upon closer inspection this code is probably starting to make some sense to you already, but I will explain it anyways.

  1. First we define that we want an image to be inserted in you website with the image tag <img>.
  2. Next we specify the source of where the image file is located with the source attribute “src”.
  3. Then we set the width and height of the image using the “width” and “height” attributes. You can leave these out and the image will show up in its original size.
  4. Let’s create our own image now
    • First we need an image. You can use any of your own images or just download one from Google.
    • Save this image in the same directory where you created your html file. This is your website directory and it should have 2 files now, the html file and the image file.
    • Remember the image file extension. EXAMPLE: my-image.jpg or my-image.gif . You should be able to see all the file extensions if you followed the steps above to create your first html file. If not, go back to the beginning of this tutorial where we create an html file and turn on file extensions.
    • Now we will need to edit the code to show your new image. To do this, change the “src” of the image to the name of your image. Make sure the file extension is correct.
      Before: <img src="my-image.jpg" width="376" height="249">
      After: <img src="your-new-image.jpg" width="376" height="249">

      If your image has a gif extension, make it: <img src="your-new-image.gif" width="376" height="249">
    • Change the height and the width of the image to whatever you like. Leave blank for the image to be its original size like this: <img src="your-new-image.gif">
    • Save your file and load it in the web browser. Your image should now be visible with the rest of the text on the page.

Adding a custom Header to your website

The header text is defined by <h1> My New Website</h1>

Adding a custom Header to your website

All the text that goes between the opening <h1> tag and the closing </h1> tag, will make a nice big header on your page.

It is very important to use <h1> tags for your header, as this is one of the things that search engines look for to determine what your site is about before ranking it in the search results. They look at the header and then the content to determine the topic of your page.

You can also create sub heading using the <h2>, <h3>, <h4>, <h5> or <h6>. The size of the header will get smaller and smaller as you go up to <h6>.

So for example you can have a heading like <h1> My Main Heading</h1> and on the next line you can have a subheading like <h2>Sub Heading </h2>


Add a paragraph below the image.

The paragraph tag <p> is very similar to the header <h1> tag.

You simply write the text you want to appear between the <p> tag like so: <p> My first paragraph </p>

You can also add a line break to the paragraph by using <br>.

Here is an example of a long paragraph that will start on a new line where the <br> tag is inserted.

<p> This is a long paragraph. I want it to go to the next line after this point here. <br>
This is the next line that the paragraph will continue on.</p>

Adding a paragraph

Adding a link to your website

At the bottom of our example you should see a link that says “Click to Continue”.

This link is created using the following code: <a href="page2.html">Click to Continue</a>

Adding a link to your website

As you can see we are using the <a> tag to create the link and the “href” attribute to set the location that the browser will go to when that link is clicked. This can be another page on your website or an external website such as Google.

You can customize your link however you want. For example let’s make another link that goes to google.com when you click it.
<a href="www.google.com"> Click here to go to Google.com</a>

If you want the link to go to another page on your website, create another page (call it page2.html) and save it in the same directory as your first html file.
Then edit your link as follows: <a href="page2.html">Click here to go to Page2 of my site</a>


Opening a new window when a link is clicked.

You can use the “target” attribute to open the link in a new window when then user clicks on it. Let’s set the target attribute to “_blank” to see what I mean.
Here’s an example: <a href="page2.html" target=”_blank”>Click here to go to Page 2 of my site</a>.
When you click this link, a new window should open that displays “page2.html”.
To change the color of the link I have put together a short CSS example at the end of this tutorial.


What does the rest of the code mean ?

Basically the above code is very simple. It’s just a bunch of tags that create a layout for your website – and that’s exactly what HTML is. It’s a markup language that uses tags to create different elements on a web page. For example the <img> tag creates an image, the <h1> tag creates a header, the <p> tag creates a paragraph and so on.

You can further edit these tags by using attributes. For example we used the “src” attribute for the image to define the source of the file where the image is located. We used the width and height attributes to set the width and height of the image. We used the “target” attribute to open a link in a new window when it’s clicked.

In the beginning of this tutorial I have asked you to copy and paste a bunch of code into the first html page you created. Let’s go over all the different tags that I haven’t covered yet.

The <!DOCTYPE html> tag is simply there to let the web browser know that this is a website and the browser should read it as a website and not some other file like a .pdf for example.

The <html> tag basically tells the browser that everything in between this tag will be the structure of your website.

The <head> tag is used to store additional information about your page that helps the web browser and the search engines understand your site better. You will notice that the <title> is inside the head tag. This is used to tell the search engines what the title of your page is. This should be the same title as the one you created with the <h1> tag earlier. Other things that usually go in the <head> are things like styles and scripts. You don’t need to know this for now as this is a beginner level tutorial, but I will mention that if you want to add some colors or programming functionality to your website, this is where it will go. I will show you a simple example at the end where we change the link color using a style in the <head> tag.

The <title> tag is extremely important. This is how search engines see your website. They look at the title and then the body of your website to determine what it’s about. Notice how the title tag is within the <head> tag. This is what I was talking about before - we are putting things in the header for the search engines to see. This title will not be displayed anywhere on the page and will only show up in the search results and the top of your browser window.

search engine optimization

The <body> tag. This is where all the content for your website will go. You may have noticed that all the things we worked on in this tutorial (image, title, paragraph and link) happened inside the body tag. This tag begins with <body> and ends with </body>. Everything in between will be your website.

The <center> tag. Everything that is within this tag will be centered. So if you want to center a paragraph you would create the paragraph tag inside the <center> tag like this: <center><p> This paragraph will be in the center of the page. </p></center>


How to change colors – basic CSS introduction

In the beginning of this guide I promised to show you how to style your website with colors using CSS (Cascading Style Sheets). It’s impossible to create a great looking page using HTML alone. You can only use HTML as the basic building block to add some structure to your page. Then, once you are happy with the general layout you have to use CSS to add some life to your website.

Here I will briefly show you how to quickly change the color of the “Click to Continue” link using CSS.

To find more colors go to: http://www.w3schools.com/html/html_colornames.asp

Changing the Link Color

  • Add the highlighted code to the header of your page so it looks like this. Remember the opening <style> and the closing </style> tag.

<!DOCTYPE html>
<html>
<head>
<title>My New Website</title>
<style>
a {
color: #ff0000;
}
</style>

</head>
<body>
<center>
<h1>My New Website</h1>
<img src="example1.jpg" width="376" height="249">
<p>Sample Image</p>
<a href="page2.html">Click to Continue</a>
</center>
</body>

What this code does, is it says that all the links which are defined by the <a> tag need to be a red color or #ff0000 (which is another way to say “red” in computer speak).

Changing the Paragraph color

  • Let’s make the paragraph "red" also. Copy and paste the highlited code between the <style> tags as follows:

<style>
a {
color: #ff0000;
}
p {
color: #ff0000;
}

</style>

If you have done everything correctly, the paragraph should now be color Red.

That’s it for now - I really hope you’ve learned something today. If you have questions please join the community.


Make a website with WordPress

Wordpress is the #1 website builder in the world. Rarely anyone builds websites from scratch anymore - most developers use existing frameworks that have allready been built for you. With wordpress you can have a professional looking website up and running in 30 minutes.

3 Steps to Making a Website

wordpress tutorial