Introduction to HTML and HTML Tags | Full HTML Basics

Introduction to HTML

You will learn about:

1. HTML

2. History of HTML

3. HTML Editor

4. Viewing HTML

5. HTML Tags

6. Attributes

7. HTML Elements

8. Structure of an HTML Document 

9. Different tags in HTML Document using a Web Browser

Earlier, it was a very time consuming and typical process to get information about anything, but nowadays, it has become very easy to get information on the Internet. everything we request is possible on the click of a such as searching text, preparing for the test, taking admission, finding information, finding images, paying bills, etc. but, do you know how the Internet works or provides as everything on the click of a mouse? These things are possible through the website. the different pages comprising a website are called web pages. web pages are usually created using HTML.

HTML stands for hypertext mark-up language. it is a predominant mark-up language for web pages. it is a simple text formatting language used to create hypertext document. it is the basic building block of web pages.

 To work with HTML documents, two basic tools are needed:

  Ø An HTML Editor to create and save the document.

  Ø A browser to view the document.

 HISTORY OF HTML

In 1980, physicist Tim Berners-Lee, then a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. in 1989, Berners-Lee wrote a memo proposing the internet-based hypertext system. specified HTML and the browser and server software in November 1990. in that year, Berners-Lee and CERN data system engineer Robert Killian Collaborated on a joint request for funding, But the project was not formally adopted by CERN. in his personal notes from 1990, he listed “Some of the many areas in which hypertext is used.” and put an encyclopedia first.

HTML EDITORS

There are two main types of HTML editors:

WYSIWYG editors 

WYSIWYG stands for what you see is what you get. it let us create web pages for HTML pages without knowing HTML tags for commands. provide a graphical interface and have various tools that help in developing web pages.

 some of the popular WYSIWYG HTML editors are Microsoft frontpage and Adobe Dreamweaver.

Text editors

A text editor is a program that is used to create or compose HTML documents. for example, Notepad WordPad, MS Word, etc.

To create and save an HTML document using Notepad, follow the steps:

  Ø Click on Start ➤ All apps ➤ Windows Accessories ➤ Notepad. The Notepad window will appear.

  Ø Click on File ➤ New.

  Ø Type the HTML document.

  Ø click on File ➤ Save As.

  Ø in the Save As dialogue box, choose the the location where you want to save the document.

  Ø Enter the File name with an extension .htm or .html.

  Ø click on the Save button.

VIEWING HTML DOCUMENT USING A WEB BROWSER

We can use any web browser, say, Microsoft edge Google Chrome for Netscape navigator to view an HTML document.

To view and HTML document using Google Chrome, follow the given steps:

 Ø Open the Google Chrome browser.

 Ø Press Ctrl+O key combination. The Open dialogue the box will appear.

 Ø Select the path where the desired file is located. Select the file and click on Open button. The web page will be displayed on Google Chrome.

HTML TAGS

A tag is basically a coded HTML command or an object that is used to arrange the text or image in an HTML document. HTML tags normally come in pairs like <h1> and </h1>. The first tag in pair is the start tag, the second tag is the end tag. they are also called opening tags and closing tags. These tags determine the way, the browser would display. placing them within the angle bracket helps to identify them from the actual text.

For example, the tag used to underline the text is written as <U>. This tag is written before the text we want to underline.

 The HTML tag is two types:

Container Tags

Container tags are also known as paired tags. this text requires and opening or ON tag and closing or OFF tag. ON and OFF tag is written within the angular brackets, but OFF tags are written using a slash before the command.

Examples: <head>……</head>, <body>……. </body>

Empty tags

Empty tags are also known as unpaired tags. These tags have only an opening or ON tag. they do not have a closing tag.

Examples: <br>, <hr>

ATTRIBUTES

Attributes are special words used inside a tag to specify additional information to the tag. they provide extra information to the web browser about how to apply the tag. attributes are always placed in the opening tag. they can have values.

Examples:<font face = “arial” size = “2” color = “green”>

     Attribute Value Attribute Value Attribute Value

HTML ELEMENTS

An element in HTML represents some kind of structure or semantics and generally consists of a start tag, content, and an end tag.

The general form of an HTML element is therefore:

       <tag attribute 1 = “value 1” attributes 2 = “value 2”> content </tag>

HTML elements can be considered under two heads:

Container Elements

The container elements include both ON and OFF tags. 

Examples: <u> this text is underlined. </u>

Empty Element

Empty elements have only an ON tag. they do not have an OFF tag. empty elements May includes no content.

Examples: <hr>

STRUCTURE OF AN HTML DOCUMENT

Each HTML document begins with <HTML> tag and ends with </html> tag. These are called the markers for the browser to identify the spots from where the document starts and ends. An HTML document is divided into two broad categories:

1. <HEAD> Section: It is used for text and tags that show directly on the page.

2. <BODY> Section:  It is used for text and tags that are shown directly on the page.

Hence, the basic structure of HTML document is as follows:

<html>

<head>

<title>

</title>

</head>

<body>

<p>......</p>

</body>

</html>

1. HTML Tag: All HTML pages are contained with the <html>.... </html> tags. HTML tag tells the browser that the pages have been formatted in HTML.

2. HEAD Tag: The <head> tag is a container tag. all of the heading information is written between the opening <head> and closing </head> tags. This section contains the introduction to the contents of the page.

3. TITLE Tag: The <title> and </title> tags encapsulate the title of the page. the title that we give to our site is placed between these <title> tags and it appears in the title bar of the browser window.

4. BODY Tag: The <body> tag appears just after the closing </head> tag. the body of the document contains all that can be seen when the user loads the page. it is the second and the largest part of the document.

DIFFERENT TAGS IN HTML

Various types of tags are used in HTML to implement different things on the web page. let us discuss some of the tags.

Heading in HTML

There are six types of heading used in an HTML document. they are represented through <h1> to <h6>. font size decrease from <h1> to <h6>. <h1> has 24 pt. size and it is used for the main heading. subsequent headings are used for subheadings and less important things Police Stop you can use any level of adding on your web page. these heading tags are used in the body section.

Paragraph in HTML

You can write more than one line in the content and this is treated as a paragraph. the paragraph should start from <p> tag and it should be closed with </p> tag. you can also align paragraph in left-right or Centre alignment besides making it justified. if you want to align the paragraph in the left side then you should write the following statement:

                           <p align=left>.... </p>

Adding comments in coding

You may use the comment for the readability of the HTML code. This is useful when coding is intended to be read by other persons also. you can insert the date of making code, source of information, etc. in comments. you can insert a comment in the following ways:

                < !-- comment information -->

You can write multiple lines in one comment tag.

Showing Horizontal Line

<hr> tag is used to show the horizontal line across the page to divide the page in a different section and to improve the look of the page. you can also specify it's thickness by size attribute.

Text Formatting Tags

 you can also use some tags by which you can change the appearance of text.

Bold Text

You can make text bold for emphasizing it. <b> tag is used for the purpose. you have to type </b>To close it because it is container tag. for example,

                            <b> My school </b>

Italicized Text

Italic letters are good to make the different look of text. the text should be enclosed within <i> and </i>. for example,

                  <i> Honesty is the best policy. </i>

Underlined Text

You can underline the text using <u> and </u>. for example,

                   <u> Think before you leap. </u>

Strikethrough Text

You can show that text struck using <strike> tag. Erroneous part can also be shown using this tag. For example,

                  <strike> Maybe it is not valid. </strike>

Superscript Text

In superscript, the data appears half a character above the normal line with smaller font-size. consider the following formula:

          ax2 + bx + c = 0

2 will be used here in superscript. <sup> tag to make text superscript. The text must be enclosed between ^and. For example,

                  ax ² + bx + c =0

Subscript Text

            In subscript, data appears half a character below the normal line with smaller font size. <sub> tag is used to make the text subscript. You come across subscript in formulas of different gases. For example, carbon dioxide (CO2) will be written in the following way:

                            CO ₂