Have you Ever Wanted to Learn HTML?
I have been designing websites since I received my certification in web design in 2004. Much has changed in regarding to since I completed my schooling 11 years ago in web design. The historical evolution of web design began with Tim Berners Lee inventing the web as a way to make information readily available and accessible. He was a man of extraordinary vision and a mission to develop a computer language that allowed everyone to be able to access information no matter where they were or what kind of disability they had, a community of based on web accessibility principles.
The computer language for which all websites are built off of is called Hypertext Markup Language, or HTML for short. Every website, no matter how big or small or its type, uses HTML as the foundation for which it was designed from. When I first learned web design, you had to know and understand HTML in order to build a website. That is no longer the case today. Today, you can use WordPress, which is the most common web
building platform or Weebly or a similar software. However, there are times in which you still need to know at least the fundamental aspects of how HTML works and what some of the tags (lines of code) do.
In this quick and easy tutorial on HTML, I am going to show you the basic structure of HTML so you can get a grasp of what you are looking at when you view the code. For this tutorial, you do not need WordPress or anything else like that. All you need is a program which is on almost every computer and is most likely on your computer – Notepad.
Today I will walk you through how to build a webpage without using any software. In about 20 minutes, you will have designed a webpage using only HTML code.
Find Notepad on Your Computer
Click on your computer’s start menu which is located at the left-hand bottom of the screen. It will look different with different computers andoperating systems depending whether you use Windows with your PC or you are using a MAC. Once in your start menu, search for Notepad. It may look like the icon seen here depending on your computer and operating system. Once you find it, open it up to reveal the following screen:
You will next build a simple HTML framework. There are six basic HTML tags that need to be in every single webpage. As long as you have the following HTML tags in your document and save it as an HTML file, the rest is just creating content into it. With each tag you must the same opening and closing tag with your content in between the two of them. The following tags are what is essential with opening and closing tags:
The tags are not case sensitive, so you either make them uppercase or lowercase depending on your preference. I made the primary ones such as the head, title and body tag all caps to denote their importance as they provide the framework. The heading and paragraph tags are more secondary and where your content will live. You also do not need to worry about the indenting. I did that to demonstrate the levels of functionality. Each tag is broken down as such:
- You have an opening and closing HTML tag <HTML> …. </HTML>
- You have an opening and closing HEAD tag which denotes the heading of your website
- You have an opening and closing TITLE tag which provides the the title of your website. This content will be listed in the tab of your website which appears above the browser bar as seen below.
- You have an opening and closing BODY tag. Everything between these two tags is what will be visible on your webpage.
- Within the opening and closing BODY Tag, you will have the <h1>, <h2>, h3>….<h6> heading level tags which denote the specific heading level fo your paragraph. <H1> or <H2> is typically the main heading, following by subheadings which are <H2> or <H3>……<H6>.
- You will have the Paragraph <p> tags within each section.
This is the basic framework of any HTML document. There are many other tags and elements you can use to increase functionality, add navigation, imagery, and additional colors, but this framework is what every webpage contains regardless of it’s complexities.
Create the HTML page
You will next copy and paste the framework into your open notepad file. Your notepad will look like this:
Next you will save your file as an .html file. Click on File > Save and enter your file name making sure to give it the extension of .html. Below you will see how to save a file as a webpage (an HTML file).
When you save your file, pay close attention to where it is saving to. You can always change the location of where you are saving it. You can create a new folder, for instance, called My Website and store all of your .html files (webpages) in that folder which is recommended. Keep your notepad file open and do not close it, because you will be making needed changes to it in the next task. You can keep it open and available within your taskbar.
Next, navigate to where your newly created webpage is and notice the icon. It has an internet explorer icon. This tells you it is a webpage. Click on it. It will open up to be an empty webpage which is what you want at this point.
Creating Content into Your Webpage
Your next step is going to be building content into your website by entering text between the following two HTML tags:
- <H1> </H1>
- <p> </p>
Close your browser which had your webpage and return to your notepad file which you should still have open in your task bar.
You will label a heading for a block of text between the opening <H1> tag and the closing </H1> tag. It will look something like what is seen below, replacing the words “My Heading” for whatever you want your heading label to be:
<H1> My Heading </H1>
You will do the same thing with the paragraph tag, entering a paragraph of text between the opening <p> tag and the closing </p> tag.
<p> This where you will type a block of text that you want to appear on your webpage </p>
Your notepad should look like the below screen shot:
Next, you will click File > Save and your changes will be updated. Navigate to where your webpage was saved. If you followed the recommendation above, it will be in a folder called “My Website” in your My Documents folder or a similar place. Click on the internet explorer icon labeled ‘My Webpage” and you should see the following:
It is important to note that although it may look like your webpage is “live” it is not. Your webpage right now only exists in your “local” drive. In order to have a webpage that is “live” and stored on the actual internet, you would need to sign up with a hosting company which will allow your website to be viewed by anyone browsing the internet. There are a number of different options to pursue should you want to sign up with a hosting company. Most of them will charge you anywhere from $10-$40 per month to host your website. Some companies include:
FREE Option for Hosting Your Site
If you do not want to put forth a monthly fee for hosting, you do have one option for acquiring FREE hosting. This is a great choice for someone who is just learning how to build a website and cannot justify spending in upwards of $40 or more a month to host a single website. You can build a website for free on the SiteRubix.com domain.
Using the Siterubix.com domain as a FREE member you can have two free websites. Plus, you will receive training and videos on how to build a website and learn how to even make money with your website, all for FREE! Wealthy Affiliate Open Education Project is a platform where you can join for FREE and learn the skills needed to build a website using search engine optimization which is the process of getting your website ranked in Google and how to monetize your website through affiliate marketing. Review the following chart to see all that you receive for FREE! You are under no obligation to go premium. No credit card required as long as you remain a FREE Starter Member.
In addition to this tutorial, you have also view another FREE tutorial on HTML Basics that I created for you.
Please feel free to leave comments or questions below and I will respond shortly. Have a wonderful day!