Introduction to HTML

HTML is web-based Client-side scripting language used to develop different webpages and websites. It stands for Hyper Text Markup Language. It was created by Berners-Lee in 1991 A.D.

Why to Learn HTML?

HTML is used to design static web pages and websites. It can simply be used by beginners and it is very popular web-based client-side scripting language. It is very much useful for students and professional web developers. The basic features of HTML are explained below

· Create Web site – HTML code is used to create a website and design web template.

· Web designer – It is a basic and useful for beginners. It is simple to learn and understand. It helps a learner to be a professional web designer. HTML and CSS designing is a must skill for starter too.

1. To understand web - If you want to optimize your website, to boost its speed and performance, it is good to know HTML to yield best results.

· Base of other Language - Once you understands the basic of HTML then, you can easily works and use other language like javascript, php, java, and others.

My first program using HTML.

<!DOCTYPE html>

<html>

<head>

<title>Title of the document</title>

</head>

<body>

<h1>This is the first level of heading</h1>

<p>My first Program</p>

</body>

</html>

Applications of HTML

· Web pages/sites development - HTML is web based language and use to develop the web pages and websites. HTML provides tags which help to design attractive and eye-catching web pages.

· Internet Navigation – We can store the HTML sites in web server and can be navigate the information using internet.

· Responsive User Interface (UI) - HTML pages works on all platform like smart phone, Tablets, Laptops and desktop computer owing to responsive design strategy.

· Offline support Once loaded, HTML pages can be made available offline on the machine without the need of internet.

· Game development- HTML5 has native support for rich experience and is now useful in gaming development .

HTML Tags

HTML is a markup language which uses markup tags to format the web content and information. The tags in HTML is enclosed by angle braces <”html elements here” >. It has its opening and closing tag called paired or container tag. Only few tags have its opening tags called empty tags. For example, <html> has its closing tag </html>.

S.N	HTML Tags & its Description
1	<!DOCTYPE...> This tag is used to defines the document type and the version of HTML.
2	<html> This tag encloses the complete HTML document and tell the browser the document is created using html languages.
3	<head> This tag represents as a document's header Other HTML tags like <title>, <meta>, <script>, <style>,<link> etc. are nested inside <head> and </head> tag.
4	<title> The <title> tag is used give the title of html document. The title will display in the tab of web browser as a title heading. It is nested inside the <head> tag.
5	<body> This tag represents the entire contents of document's body which keeps other HTML tags like character formatting tag, Heading tag, paragraph tags, form, iframe etc.
6	Heading tag: <Hn>……</Hn> This tag represents the heading. There are six level of heading in html. <h1> is the largest and <h6> is the smallest heading.
7	<p> This tag is used to represent a paragraph in HTML.

HTML Document Structure

A typical HTML document will have the following structure −

<html>

   <head>

      Document header here. (it contain the header related tags)

   </head>

   <body>

      It contains the document related tags

   </body>

</html>

We will study all the header and body tags in subsequent chapters, but for now let's see what is document declaration tag.

The <!DOCTYPE> Declaration

The <!DOCTYPE> is a declaration tag. It is used by the web browser to understand the version of the HTML used in the document. The current version of HTML is 5 i.e HTML %

Syntax: <!DOCTYPE html>

Note: There are many other declaration types which can be used in HTML document depending on what version of HTML is being used.

Heading Tags

<Hn> tag is used to represent the heading in html. There are six level of heading i.e. <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. <h1> is the highest level and <h6> is the lowest level of html document

Syntax: <Hn align = “left/right/center/justify”> text here……… <Hn> where n is the level of heading.

Example

<!DOCTYPE html>

<html>

   <head>

      <title>Examples of heading</title>

   </head>

   <body>

      <h1>This is First level heading</h1>

      <h2>This is second level heading</h2>

      <h3>This is the third level heading</h3>

      <h4>This is the fourth level heading</h4>

      <h5>This is the fifth level heading 5</h5>

      <h6>This is the sixth level heading 6</h6>

   </body>

</html>

Output of above HTML document:

Paragraph Tag

The <p> tag is used to define a paragraph in html. Each paragraph of text should go in between an opening <p> and a closing </p> tag.

Syntax: <p align = “left/right/center/justify”> text here…………..</p>

Example

<!DOCTYPE html>

<html>

   <head>

      <title>Example of paragraph</title>

   </head>

   <body>

      <p>this is a first paragraph.</p>

      <p align = “justify”>this is a second paragraph.</p>

   </body>

</html>

This will produce the following result –

Example of paragraph tag with its attribute

<!DOCTYPE html>

<html>

<head>

<title>attribute of paragraph tag</title>

</head>

<body>

<p align = "left">This is left aligned</p>

<p align = "center">This is center aligned</p>

<p align = "right">This is right aligned</p>

</body>

</html>

The output will be:

Line Break Tag

<br/> tag is used to break the line in HTML document, anything following it starts from the next line. It is an empty tag, where you do not need opening and closing tags.

Example

<!DOCTYPE html>

<html>

    <head>

      <title>Line break tag in html</title>

   </head>

    <body>

      <p>Hello<br />

         Students how are you doing?<br />

         Are you enjoying<br />

         Keep it up</p>

   </body>

</html>

This will produce the following result –

Center tag

<center> tag is to put any content in the center of the page or any table cell.

Example

<!DOCTYPE html>

<html>

   <head>

      <title>Use of center tag</title>

   </head>

   <body>

      <p>This content is not in center.</p>

      <center>

         <p>This content is in the center.</p>

      </center>

   </body>

</html>

This will produce following result –

Horizontal Lines

The <hr> tag is used to creates a horizontal line in HTML. It creates a line from the current position in the document to the right margin and breaks the line accordingly. It is a empty tag.

Example

<!DOCTYPE html>

<html>

   <head>

      <title>Example of <hr> tag</title>

   </head>

   <body>

      <p>Computer Science Grade 11</p>

      <hr />

      <p>Computer Science grade 9</p>

   </body>

</html>

This will produce the following result –

Font element:

<font> tag is used to specify size of font, font type and color of font in html document.

Syntax: <font attribute = “value”> text …………..</font>

Eg: <html>

<head>

<title>Example of font tag</title>

</head>

<body>

<font size = 4 color = red face = Chiller> hello student I am using font tag </font>

</body>

</html>

Preserve Formatting tag

<pre> tag is used to preserve the formatting of source document, it will put the document text in exact format of how it is written in the HTML document.

The text written in between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the source document.

Example

<!DOCTYPE html>

<html>

   <head>

      <title>Example of preserve formatting</title>

   </head>

   <body>

      <pre>

         Types of computer on the basis of

Working principle

·         Analog

·         Digital

·         Hybrid

      </pre>

   </body>

</html>

This will produce the following result –

HTML character Formatting tags

HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra importance.

Example

Output

<strong> tag

The HTML <strong> element defines text with strong importance. The content inside is typically displayed in bold.

Output

HTML <i> and <em> Elements

The HTML <i> element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.

Output of the above program is:

The HTML <em> element defines emphasized text. The content inside is typically displayed in italic.

Output will be:

HTML notes Grade 11 (Part I)

My first program using HTML.

HTML Document Structure

The <!DOCTYPE> Declaration

Heading Tags

Example

Paragraph Tag

Example

Line Break Tag

Example

Center tag

Example

Example

Example

HTML <b> and <strong> Elements

Example

Output

HTML <i> and <em> Elements

2 Comments

Contact Form