programminghead Logo

HTML Introduction:

WHat is HTML:

HTML (Hyper Text Markup Language) is a Markup Language for creating Web-pages. Using HTML we write code using Text Editors and run in the Browser, Browser Takes The HTML File From Local Storage and gave output in the format of Multimedia. Each HTML document/File have .HTML extensions, Using those Extensions browser can Detect the Language used in the file and gave us output According to Used Language (HTML).

what is HTML used for:

HTML is a Markup Language for creating Web-pages and for Creating Online Documents. Using HTML We can Create a Fully Working Website with Menu Bar, Form, Paragraphs, Headlines, Images, Footer, Divisions, Input Boxes, And Buttons ETC. By Using CSS (CassCading Style Sheet) we can Style our HTML data and Create a Very Attractive Look With Responsiveness (So Website Behave Differently in Pc/Big Screens And Mobile/Small Screens). HTML is Very flexible also. You Can Use HTML code inside PHP file or Inside HTML Document you can USe JavaScript. But there is several role Played by HTML in the Other Programming Languages.

Like :
Interface Creation
Popular Programming Like PHP still use HTML for creating User Interface, And For Submit or Get Data from using Users. Like if you Sign-up with Facebook. Your Name, Mail Address, Password ETC are Submitted by using HTML.
Not only Facebook. if You use Google or Anything Over INTERNET, The Area where you type you Keyword, that Text-box is created using HTML.

Text Editor For HTML:

Text Editors are the Applications, Who can Edit text Documents like .html (HTML Extension), .txt (Normal text Extension) ETC.To write HTML Code we have to use A Text Editor, WHo can Create or Modify HTML Document/Web-Pages.

Best Text Editor For HTML:

1. Sublime Text Editor :

Sublime Text Editor is a Free Open Source Text Editor For Windows,Linux And Mac OS.

2. Notepad++ Text Editor :

Notepad++ Text Editor is Also a Free Open Source Text Editor For Windows And Mac OS (Not For Linux).

3. Notepad :

If you Don't want to Download Any Text Editor from Internet, Then Your OS got you Covered. In every OS (Windows,Linux and Mac OS) there is Pre Installed Text Editor.

notepad (on Windows OS).
GEdit (on Linux OS).
TextEdit (on Mac OS).



You Just need to search for these in the app Section.
(Please Note) If you use simple text Editors like notepad or GEdit or TextEdit you have to struggle Little bit. Because Text Editors like Subline and Notepad++ they comes with some features like :tags Detection,unclosed tags Detection, one click Syntax, tags and typing Suggestions ETC.

HTML basics

In HTML Basics we will cover some Basic HTML things like HTML Tags, Types of HTML Tags, HTML Syntax and More HTML Basics.

HTML Tags:

Tags are the Most Impotent part of HTML. Tags controls ALmost the Complete Web-page. In HTML, HTML itself is a Tag (<HTML>). There are Several Impotent Tags in HTML Like :
head Tag,
title Tag, body Tag ETC.

How To Write Tags :

We know that the tags are the Most impotent Part of the HTML. To control Web-page Output Data we use tags, But there is a Question :
how to write tags

Writing Tags In HTML is Very Simple, You just have to write your tag name Between These (< >) angle brackets without any Spaces, Just like This :

<HTML>
<head>
<title>
<body>

Got it?, Wait We Aren't Done Yet.

There is Two Types of tags in HTML :
1) Starting tags.
2) Closing Tags

Starting Tags and Closing Tags :

starting tags and closing tags are Defines Starting point and closing point of tags in the HTML Document. Just like Sun, Sun Always rise in the East and set in the West. Like the sun we can assume HTML tags, East is the starting tag of Sun and West is the Closing Tag of Sun.
In simple language Starting tags and closing tags shows where the tag starts and closes and where the Starting tags starts applying Effect on the Document and where the effect going to be end.

How To Write Starting Tags :

To Write a HTML Starting tag We just Write our tag name between these (< >) Angle Brackets without any Spaces,

Just Like This :
<HTML>
<head>
<title>
<body>
These all tags are The starting tags of HTML.

How To Write Closing Tags :

To Write a HTML Closing tag We just Write our tag name between these (< >) Angle Brackets without any Spaces,Just Like Starting Tag,
BUT with the slash (/). We need to add the slash (/) before the Tag Name to close the tag.

Just Like This :
</HTML>
</head>
</title>
</body>
These all tags are The starting tags of HTML.

How To Identify Which One Is The Starting and The Closing Tag :

Defenestrating Starting tag and Closing Tag is Very Simple. You Just need to find the Slash (/) in the tag,

With the slash (</html>), Tag is The Closing Tag.
WithOut the slash (<html>), Tag is The Starting Tag.

Exception : Tags WithOut The Closing Tags :

In HTML you might See tag without The Closing Tag Or Written As (<img/>) slash at after the tag name.

There are Some Tags Like :
<img/>
<br/>
<input/>
This tags are written as ( <img/>
<br/>) slash added or Written after the Tag Name. Because For these kind of tags we don't have to close the tag. Like <img/> tag is used to insert and display Images in HTML web-pages. So image Will Start According to the Tag Placement But Ends According to Image Size or Given Size. So there is no use of Closing Tag. Thats Why We Don't Close These Tags Or We Add Slash <img/> After The Tag name.

HTML Syntax :

Syntax Is the Set Of Rules To write HTML Code/Tags. Like How And Where To Write which Tag. Simple Structure Of HTML Codding Regarding Tags Declaration: Where and which tag will Starts or Closes

HTML Syntax


<html>
  <head>
    <title>   </title>
  </head>
  <body>
  </body>
</html>

Tags And Its Uses :

HTML tag (<html>.....</html>) :

HTML tag is the main tag of HTML. Inside The HTML tag's Starting and Closing Tags we write all the Other Tags Like : Head,Title,Body ETC.

Controls
HTML tag Controls All The Area of the Web-page. From Title (Header) to Footer.

HEAD tag (<head>.....</head>) :

HEAD tag is the Head Of the HTML Web-page. Like The Syntax We don't just Write Title Inside the HEAD Tag. We also Declare our External Style Sheet/javaScript File ETC. Because when browser Render or Loads Our Web-page Data it will always gives First Priority to the Header Data.

Controls
HEAD tag Controls the header or Upper Part of Web-page Like Web-page Title and Web-page Icon.

TITLE tag (<title>.....</title>) :

TITLE tag is the Title Of the HTML Web-page. Like our Web-Page Name. Most of the Time we write our Web-page's Name or Title inside the TITLE tag.

Controls
TITLE tag Controls the header or Upper Part of Web-page Like Web-page Title..

BODY tag (<body>.....</body>) :

BODY tag Control The Rest of the part of the Web-page. most of the HTML tags Written Between the BODY tag.

Controls
Whole body/Display After the Web-page Title/Head.

HTML Introduction - HTML Syntax

HTML Example :

Now we all know about the Basic HTML tags Controls and HTML Syntax. But you need to know about, how we can run our HTML document on Browser to see the Output.
But Before that we have to know :

How to save HTML Document :

We have to save our HTML Document with .html Extension So our Browse can Detect the Used language to code the Document and Show Output According to used Language.

Step 1 : Open your TextEditor and create/open a new blank file. And save the Blank file using (ctrl+s) button or Goto file option on the top Left Corner and select save Option. Now select any folder or Directory an save your file with a name and Extension (Example : myfile.html). and Click Save.

Step 2: Goto your Computer's file Manager/file Explorer and Locate your saved file. Dubble Click on your file, it will open in Your Browser (if not, then right click on that .html file and select open with and select your browser).
You will see a blank browser window. Because your .html file is blank.
Lets Write our First HTML Document.

Example : Creating First HTML Document/Web-page


<html>
  <head>
    <title> First Web-Page </title>
  </head>
  <body>
    My First HTML Document
  </body>
</html>

Result/Output

HTML Introduction - Image

After writing these codes save your file again (This Time it will Automaticaly save the file on the same destination), if it asks location gave the location and save with a filename and .html extension. After saving the HTML Document open the Directory where you did you saved your HTML documnet and run by clicking on the file (you also can Drag and Drop the File to Your browser order to run the file). Your Result Will Displayed like shown Bellow :

More

we just created our First HTML document. But as Show above (Writing Text Inside Body Tag) isn't right. There is Several Tags Like p tag (for paragraph text) and h2-h6 tags (for headlines) ETC, for writing Text In HTML Document in a Meaningful Way.

Order to learn More Click The Button Bellow

Comments

Write to Us

Captcha