Introduction of HTML
HTML stands for Hyper Text Markup Language. which is used for structuring the web pages and its content.
HTML is not a programming language. It is a Markup language that defines the structure of your content.
Hmm, so what is the difference between programming language and a markup language ?
The simple answer of this question is -
- Markup language are those language which are used to control the presentation of data.
- and, Programming languages are those which are used to transform data.
Suppose we display ‘ The sum of Two and Two is Four ‘ on the webpage. Then by using HTML Markup language, we only need to write -
<p> The Sum of Two and Two is Four </p>
Don’t worry about the code. We will discuss everything in just a few minutes.
BASIC OF HTML -
All HTML Documents must start with a document type declaration-
- if you are using HTML 5 then the document type is- <!DOCTYPE HTML>
- if you are using HTML 4.01 then the document type is — <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd">
Confuse? Don’t Worry, only remember one thing that you start every HTML file with <!DOCTYPE HTML> document type.
After that, We use [ HTML Tag ] that contain all HTML code. The HTML tag start with <HTML> and ends with </HTML>
NOTE — Don’t forget the backward slash [ / ] sign in the ending of HTML tag.
Now the time comes to understand the two main tags of HTML briefly. The first one is <HEAD> and the another one is <BODY>
<HEAD> TAG
The Head tag starts with <HEAD> and ends with </HEAD>
The Head tag is a container of different HTML elements such as — [ ‘TITLE’, ‘META DATA’, ‘STYLE’, ‘SCRIPT’, etc ]
The main use of HEAD tag is containing the META DATA.
A Meta Data is a data about data. It means it contains short information of your HTML page.
<BODY> TAG
The Body tag start with <BODY> and ends with </BODY>
The Body tag contains all the elements of a HTML document. such as — [ ‘text’, ‘images’, ‘hyperlinks’, etc ]
The elements under the Body tag are only seen on the webpages.
EXAMPLE
<!DOCTYPE html>
<html>
<body><h1>My First Heading</h1>
<p>My first paragraph.</p></body>
</html>
When you execute this code. The Result will be something like that-
Start with Tags, Elements, and Attributes…
If someone asks me what HTML is? Then I will tell him — HTML is only the group of Tags, Elements, and Attributes.
Now the question is — what are the Tags, Elements, and Attributes?
Let’s understand this through a picture-
Tags and Elements
In this picture you can see the four different parts-
Opening Tag — This consist an element that is wrapped between opening and closing angle brackets. This is the starting part of an element.
Closing Tag — This also consist an element but it is wrapped with a forward slash and angular brackets. This is the ending part of an element.
Content — Content is nothing but just a data of your HTML page.
Element — The opening tag, the closing tag, and the content together comprise the elements.
In easy words we can say that -
<p> — -> This is a Tags
<p> I am an Indian </p> — -> This is an Element
What is Attribute?
Attribute is an extra information about the element that you do not want to appear in the actual content.
For Example -
<h1 class =’main-heading’> This is main Heading </h1>
Here, [ class = ‘main-heading’ ] is an Attribute.
If you didn’t understand, there is nothing to worry about because we just started. There is a lot about attributes in upcoming lectures.
Nested HTML Elements
The elements of HTML can be Nested. It means elements can contain other elements.
If you remember the previous lecture example where we used four different types of elements that are — [ <html>, <body>, <h1> and <p> ]
SEE THE EXAMPLE-
Example of HTML
Here you can see how we nested the elements. The < HTML > element is the root element and it defines the whole HTML documents.
All the rest elements are written under the starting tag of HTML i.e. < HTML > and ending tag of HTML i.e. </ HTML >
After HTML, there is a < BODY > elements that also consists two different elements that are — [ < h1 > and < p > ]
<BODY> Element
All HTML documents consists of nested HTML elements.
Where to write HTML code?
Well, there are lots of free text editors available in the market. Where you can write and test your HTML code. some of them are -
But, I will suggest you start with your pre-installed text editor. Such as Notepad for Window users and TextEditor for Mac Users.
How to execute HTML code through Notepad?
STEP 1 — Open the Notepad or Text Editor
STEP 2 — Write the HTML code in it
HTML Code in NotePad
STEP 3 — Save this code with [ .html ] extension
SAVE HTML CODE
STEP 4 — Open the File using Google Chrome
If you want to learn more about HTML then join with us → https://www.mdigipreneur.in
