HTML Tutorial - Part 1 - HTML Guideline for Beginners
HTML Tutorial - Part 1 - HTML Guideline for Beginners
...Now, it is time for technology. In present days, even a very common man also has a website and the person having a website must know at least the basics of HTML. This tutorial is for the people who want to learn html code to create a web page, need basic idea on html basic structure, and looking for knowledge on html code for website. I have tried to present this tutorial very simply so that people can easily learn the entire HTML and develop their own website themselves without hiring a developer. It is very easy to learn HTML I hope you will enjoy this tutorial.
Topic Covers:
- What is HTML?
- HTML versions
- HTML editor
- HTML Tags
- HTML Elements
- HTML Attributes
- Create your first web page using HTML
Let's look into details.
What is HTML?
HTML is a computer language which gave us opportunity to display the world’s massive information through internet. HTML is not a programming language; it stands for “Hyper Text Mark Up Language”. Mark up Language refers to a set of Mark up tags. By using Mark up tags, HTML shows how the different parts of a web page will be displayed into the browser. Generally browsers use HTML tags to render the content of the web page. HTML describes the web page structure. It is mainly used for creating websites and web applications.
Examples:
<!DOCTYPE html>
<html>
<head>
<title>MONEY TECH</title>
</head>
<body>
<h1>HTML Tutorial Part 1</h1>
<p>Hello Friends! Let's learn HTML. I already started! What about you?</p>
</body>
</html>
Explanation:
<!DOCTYPE html>
This code indicates that this is HTML5. If you like to use HTML5, you need to write this code on top of each html documents.
<html> and </html>
This is the core of any HTML page. Every HTML documents starts with <html> code and ends with </html> code. What we write between these two describe the HTML document.
<head> and </head>
Texts between <head> and </head> supplies additional information for the HTML document.
<title> and </title>
Texts between <title> and </title> set the name or title of the document.
<body> and </body>
The contents between these two are displayed in the Web page.
<h1> and </h1>
It creates the heading of the document. Moreover it describes the importance of the document.
<!DOCTYPE html>
This code indicates that this is HTML5. If you like to use HTML5, you need to write this code on top of each html documents.
<html> and </html>
This is the core of any HTML page. Every HTML documents starts with <html> code and ends with </html> code. What we write between these two describe the HTML document.
<head> and </head>
Texts between <head> and </head> supplies additional information for the HTML document.
<title> and </title>
Texts between <title> and </title> set the name or title of the document.
<body> and </body>
The contents between these two are displayed in the Web page.
<h1> and </h1>
It creates the heading of the document. Moreover it describes the importance of the document.
HTML Versions
HTML was introduced in 1990 by a British physicist Tim Berners-Lee. Decades have passed and we have seen so many versions of HTML by this time. The recent version of HTML can accomplish far more than the first version was developed for. Let’s have a quick look on the versions of HTML have invented since today:
HTML was introduced in 1990 by a British physicist Tim Berners-Lee. Decades have passed and we have seen so many versions of HTML by this time. The recent version of HTML can accomplish far more than the first version was developed for. Let’s have a quick look on the versions of HTML have invented since today:
HTML 1.0
This is the very first version of HTML. In 1991 the world was first introduced with such type of language with HTML 1.0. At that time only a very few people were involved with website development and the language had a lot of limitations also. People could not do much using it but put some simple text into the web. Though the language has limitations, it has changed the world.
HTML 2.0
In 1995, the new version HTML 2.0 was released. Some new features were added in this version like form-based file upload, tables, client-side image maps and internationalization etc. It made the website design easier.
HTML 3.0
The next version is HTML 3.0 which released in 1997; this version introduced the world with HTML Tags. This version was compatible with all browsers and became the standard website design language.
HTML 4.0/4.1
HTML 4.0 was released in late 1997 by W3C (World Wide Web Consortium) adding many browser element and attributes. This version brought the largest evolution in HTML development. All the specifications of version 3.0 was ungraded with new functionality with this version. With some modifications it is reissued in 1998. Later on the final version 4.1 is released in 1999.
This is the very first version of HTML. In 1991 the world was first introduced with such type of language with HTML 1.0. At that time only a very few people were involved with website development and the language had a lot of limitations also. People could not do much using it but put some simple text into the web. Though the language has limitations, it has changed the world.
HTML 2.0
In 1995, the new version HTML 2.0 was released. Some new features were added in this version like form-based file upload, tables, client-side image maps and internationalization etc. It made the website design easier.
HTML 3.0
The next version is HTML 3.0 which released in 1997; this version introduced the world with HTML Tags. This version was compatible with all browsers and became the standard website design language.
HTML 4.0/4.1
HTML 4.0 was released in late 1997 by W3C (World Wide Web Consortium) adding many browser element and attributes. This version brought the largest evolution in HTML development. All the specifications of version 3.0 was ungraded with new functionality with this version. With some modifications it is reissued in 1998. Later on the final version 4.1 is released in 1999.
XHTML 1.0
This version was introduced in 2000. It was used as the joint-standard with HTML 4.01 and incorporated with XML so that the there is no interchangeability between programming languages and the code is precisely written.
HTML 5
The latest version is HTML5 which is specially designed for the web and its specifications are so precisely designed that it will be compatible at least for the next decades. This is the ultimate version of HTML published by W3C in 2014 and HTML 5.1 released in November 2016. The latest version HTML 5.2 was released in December 14, 2017.
This version was introduced in 2000. It was used as the joint-standard with HTML 4.01 and incorporated with XML so that the there is no interchangeability between programming languages and the code is precisely written.
HTML 5
The latest version is HTML5 which is specially designed for the web and its specifications are so precisely designed that it will be compatible at least for the next decades. This is the ultimate version of HTML published by W3C in 2014 and HTML 5.1 released in November 2016. The latest version HTML 5.2 was released in December 14, 2017.
HTML Editor
To create web pages in HTML, you need an HTML editor to write the codes on it. There are several free and paid editors you can use. Moreover you can use ‘notepad’ which is a default program of Windows operating system.
But I suggest you to use a HTML editor which will give you some extra benefits during web page design. It will help your keep your code clean and structured. There are many free and paid HTML editors over internet, we can choose anyone of them:
- KomopoZer
- HTML-Kit
- Komodo Edit
- Notepad++
- Bluefish
I recommend you to use Notepad++ in the beginning stage because it is easy to use and understand.
HTML Tags
HTML Tags are the first thing you need to understand to learn HTML. Basically, normal texts are separated from HTML code by Tags. That means Tags make the differences that in which format the document will be appears in the web page; in ‘normal text’ or ‘transformed text’. It instructs what to display. Let’s have an example with the sentence “HTML Tutorial Part 1”
- In normal text format : HTML Tutorial Part 1
- In bold text format : HTML Tutorial Part 1
To make the sentence “HTML Tutorial Part 1” display in transformed format from normal text we need to use tags. Tag looks like an alphabet or term or phrase which stays inside the “<>” symbol. So, if we want to display the sentence in bold format, we have to use <b> tag. That means, when we write <b>HTML Tutorial Part 1<b> in editor, browser will display as HTML Tutorial Part 1.
Similarly, if we want to display the sentence in italic format, we have to use <i> tag.
There are many HTML tags which we need to know for HTML coding. One of the important tags is the “<href>” hyperlink tag. Let’s see an example of using hyperlink tag.
In HTML code : <a herf="https//newmoneytech.blogspot.com">View my blog</a>
In web page display : View my blog
In HTML code : <a herf="https//newmoneytech.blogspot.com">View my blog</a>
In web page display : View my blog
Below are some guidelines you need to keep in mind while using HTML tags:
- Tags are the structural elements of HTML. Without Tags HTML coding is not possible. So, you must know the right tags for specific purposes. Some most important tags are given below which will help you to choose the right tags.
- Generally, HTML tags are always used in pairs. For example <p> and </p>. The first tag of the pair is called Opening Tag and the second one is called Closing Tag. Closing Tag is almost same like the Opening Tag, but a little difference is that a forwarding slash (/) is placed just before the Closing tag name. However, there are exceptions for some certain tags which have no closing option. The tags which do not have any closing called “empty tags”. For example:
line break tag “<br>”
- Every HTML document starts with opening tag <html> and ends with closing tag </html>. The data which is placed only placed between <body> and </body> is displayed in the browser.
- In the first line of the HTML code you will find that HTML pages starts with “<DOCTYPE html>”. Basically the first line of HTML file declares the type or version of HTML is being used in this coding. “<DOCTYPE html> indicates HTML5 and it is the latest version of HTML. Every time you start writing a new HTML code, you have to mention it on the first line.
HTML Elements
The contents between the opening and closing tags are called HTML Elements. For example:
<b>HTML Tutorial Part 1</b>
Here, <b> and </b> are HTML tags, and the content between the tags 'HTML Tutorial Part 1' is the element.
One thing we need to keep in mind that an element can be either in a basic for or in a complex form. As I mentioned any content between the tags are elements, so we may have elements within an elements.
HTML Attributes
Now we know the use of HTML elements. Tags are used for everything in HTML. But sometimes we need to put some values inside an element. For example, if we write '<h1>HTML Tutorial Part 1</h1>', the text 'HTML Tutorial Part 1' will be displayed as Heading and left aligned. Now if we want to align the text in 'center', what will we do? Here comes the HTML attributes. Attributes allow us to add a value with the element i.e. attributes is a combination of name and value. Generally attributes are used like:
<tag attribute="value">Your Text</tag>
Following the above structure let's make code for 'HTML Tutorial Part 1'
<h1 align="center">HTML Tutorial Part 1</h1>
Here 'align' is attribute and 'center' is value.
Create your first web page using HTML
We already completed the introductory part of HTML. Now we know what is HTML, what is HTML editor, HTML tags, HTML elements and HTML attributes. Now, let's make a web page using these leaning:
Open Notepad++ and write down the below codes below same as it is:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1 align="center">HTML Tutorial Part 1</h1>
<p>
Hello Friends! Let's learn HTML. I already started! What about You? For more tutorial, please
<a href="https//techonomoney.blogspot.com">View My blog</a>
</p>
<br>
<br>
<p>
<b>
<center>Besides you can check my facebook page MONEY TECH</center>
</b>
</p>
</body>
</html>
Now save the file to your desired location using ‘.html’ file extension.
Thank You
We already completed the introductory part of HTML. Now we know what is HTML, what is HTML editor, HTML tags, HTML elements and HTML attributes. Now, let's make a web page using these leaning:
Before starting practically, first download Notepad++ from the below link and install to your desktop/laptop.
Open Notepad++ and write down the below codes below same as it is:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1 align="center">HTML Tutorial Part 1</h1>
<p>
Hello Friends! Let's learn HTML. I already started! What about You? For more tutorial, please
<a href="https//techonomoney.blogspot.com">View My blog</a>
</p>
<br>
<br>
<p>
<b>
<center>Besides you can check my facebook page MONEY TECH</center>
</b>
</p>
</body>
</html>
 |
| HTML coding for My First Web Page |
Now save the file to your desired location using ‘.html’ file extension.
File Menu => Save as => Select Location => File name: My First Web Page.html => Save type as: All types > Save.
Now open the file (My First Web Page.html) using any browser. If we open the file using Mozilla Firefox or any other browsers, it will be displayed like below:
 |
| My First Web Page |
Friend! this is all for today. If you have any question, you can ask me in the comments. It will be my pleasure to answer you.
Today, It was just an introduction to HTML. Our next episodes will be on details of each and every elements of HTML including HTML Tags, HTML Elements, and HTML Attributes. Up to then, please stay with us.
Thank You
No comments