Today’s topic is Introduction to HTML. Hi there and welcome to TheITStuff’s Tutorial series for HTML. This is the very first article in the HTML tutorial series and we will be learning what HTML is and what is the structure of an HTML document. We shall begin with the very basics and go on to master HTML.
Table of Contents
Introduction to HTML
In an introduction to HTML, if someone says that HTML is like bones in the body, he would be 100% right. Before we start talking about the actual definition of HTML and what that thing is. We should know why we should learn it.
It is important to learn HTML if you are going to get into development or if you are a blogger and do not want to hire a web developer to handle your blog. Some people might argue why learn HTML when we have WordPress or Wix? To those people, I would say if you want to keep your blood pressure at the normal level when you have a technical problem with your website. If you host your blog on WordPress or Wix-like websites, you should still know the basics of HTML to solve the small issues by yourself to understand the terminology of website development.
What is HTML?
HTML is short for Hyper-Text Markup Language. Webpages are created using HTML all over the internet. HTML is the bare-bone structure of any webpage. Even the webpage that you are looking at right now is constructed using HTML. Like other programming languages, HTML doesn’t need to be compiled, you can write HTML code and the browser will automatically generate the webpage.
That’s all you need to know as of now, We will keep discussing important concepts as the tutorial progresses.
Things you will need
- A Text Editor (I am using Notepad++).
- A Web Browser (I am using Google Chrome).
The HTML Document Structure
We write HTML in a document, it is a file that contains HTML code. Just like you have your excel and Word files that you store data in, HTML files contain data too. It can be said that the HTML document is a web page and vice versa. So here is the structure of an HTML document.
Now you might be wondering what on earth this is. So let us decode this. The first thing you see is <html>, this is a tag. HTML documents have a lot of tags in them. They have different meanings and are used for different purposes. A tag opens like this <tagname> and end like this </tagname> with a backslash.
You can see that there is an HTML tag on the first line and a similar one on the last line. The first tag is <html> and the last tag is </html>, This means that whatever comes inside of these tags is a part of the HTML tag.
Next, we see the <head> tag. So an HTML document has 2 parts. The first is a head which contains information about the web page like its name and other meta information. The elements from the head tag are not displayed on the webpage.
The <body> tag is what is displayed in your browser. Everything you see on your web page is a part of the <body> tag.
Now let us quickly dive into writing some code. Copy the following code and paste it into your text editor.
<html><head></head><body><p>Welcome to TheITStuff’s HTML tutorial</p></body><html>
And save the file as all files and name it index.html. I am saving it in the TheITStuff folder on my Desktop for convenience).
The only addition in this code you will see is that it has a <p> tag. The <p> tag is a paragraph tag, whatever you write inside it gets outputted on the webpage. Now click on the file you have created and open it with our browser(Google Chrome for me).
You can see that some text is visible on our webpage. This is a success for us. We have successfully created a webpage.
Conclusion
HTML(HyperText Markup Language) is used to make web pages. The HTML document has 2 parts, Head and Body. The head contains meta-information about the webpage and body contains the things that are displayed on the web page. Various tags are used in HTML to create and define various elements on a web page.
Once you are done with this you can move over to the next part of this tutorial. If you didn’t follow something, comment it down below.
