INTRODUCTION TO HTML

HTML

INTRODUCTION TO HTML

HTML Stand or is an acronym which stands for for Hyper Text Markup Language.

HTML is mostly used language on Web to develop web page.

HTML is a markup language which is used for creating attractive web pages with the help of styling, and which looks in a nice format on a web browser. An HTML document is made of many HTML tags and each HTML tag contains different content.

On the platform of the Internet, a distributed information system exists, which is called World Wide Web, WWW or Web in short.

Skeleton Structure of HMTL

The notion of the Web was conceived in 1991 by Tim Berners Lee.

HTML is a kind of markup language. A markup language is a set of tags that enables additional information (besides the content) on how to present the web content.

HTML is derived from of SGML (Standardized General Markup Language)

A combination of opening and closing tag along with some content between the two tags forms an element.

Opening Tag Content About any Topic Closing Tag like :- <h1>____</h1>

Tags in HTML

HTML HEADING TAG

HTML document generally begins with heading .

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading.

When you place the text within the heading tags <h1>………</h1>, it is displayed on the browser in the bold format and size of the text depends on the number of heading.

<h6> defines the least important heading.

<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

Example :-

Source Code :-

<html>
<head>
<title>Heading</title>
</head>
<body>
<h1>Hii</h1>
<h2>Hii</h2>
<h3>Hii</h3>
<h4>Hii</h4>
<h5>hii</h5>
<h6>Hii</h6>
</body>
</html>

Output :-

Try this Code :-

Paragraph tags : <p> and </p>

The <p> tag structures the content into a paragraph.

The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

Each paragraph of text should go in between an opening <p> and closing </p> tag.

Example :-

Source Code :-

<html>
<head>
<title>Heading</title>
</head>
<body>
<h1>Video </h1>
<p>Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. </p>
<h2>Themes</h2>
<p>Themes and styles also help keep your document coordinated. When you click Design and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme. </p>
<h3>Reading</h3>
<p>Reading is easier, too, in the new Reading view. You can collapse parts of the document and focus on the text you want. </p>
</body>
</html>

Output :-

Try this code :-

Line Break:-

The <br> element does not have an opening and closing tags. <br> is an abbreviated form of break.

Example <br> <br>

<br> or <br/>

Source Code :-

<html>
<head>
<title>Heading</title>
</head>
<body>
<h1>
HTML Stand for Hyper text Markup Language. <br>
P tag is used to create Paragraph.<br>
br tag is udes to create break tag.<br>
</h1>
</body>
</html>

Output :-

Try this code :-

Preformatted Text

The HTML <pre> tag is used to specify pre formatted texts. Texts within <pre>…….</pre> tag is displayed in a fixed-width font. Usually it is displayed in Courier font. It maintains both space and line break.

Many a times we want to display text with multiple white spaces and in multiple lines without wanting to be changed it by the browser. we may embed the content into pre-formatted tag set using <pre> and </pre>.

Source Code :-

<html>
<head>
<title>Heading</title>
</head>
<body>
<pre>
Hello and Welcome to HTML Tutorial.

br stand for Break tag.
Paragraph tag is create by using P.
</pre>
</body>
</html>

Output :-

Try this code :-

Bold :-

The HTML <b>element defines bold text

Syntax :-

<b> and </b>

This tag is used to display given content into bold letters.

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

Source Code :-

<html>
<head>
<title>bold</title>
</head>
<body>
<b>html stand for Hyper text markup language</b><br>
<b>P stand for paragraph tag</b><br>
<b> br tag is used for Break line</b><br>
<b>hr tag is used for Horizontal line</b><br>
</body>
</html>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Try this Code :-

Underline :

Syntax

<u> and </u>

This tag is used to display given content with underlined letters

Source Code :-

<html>
<head>
<title>bold</title>
</head>
<body>
<u>html stand for Hyper text markup language</u><br>
<u>P stand for paragraph tag</u><br>
<u> br tag is used for Break line</u><br>
<u>hr tag is used for Horizontal line</u><br>
</body>
</html>

Output :-

Try this Code:-

Strike Through

Syntax:-

<s> and </s>

Anything written within <strike>…………………..</strike> element is displayed with strikethrough. It is a thin line which cross the statement.

The content of an <s> or <strike> element is displayed with a strikethrough a thin line through the text. Here the ‘s’ is an abbreviated form of ‘strike’.

Source Code :-

<html>
<head>
<title>bold</title>
</head>
<body>
<s>html stand for Hyper text markup language</s><br>
<s>P stand for paragraph tag</s><br>
<s> br tag is used for Break line</s><br>
<s>hr tag is used for Horizontal line</s><br>
</body>
</html>

Output:-

Try this code :-

Type writer font

Syntax

<tt> and </tt>

The content of a <tt> element is written in typewriter type of fonts, which is also identified as mono spaced font (like that of a teletype machine).

Source code :-

<html>
<head>
<title>type wirter text </title>
</head>
<body>
<s>html stand for Hyper text markup language</s><br>
<s>P stand for paragraph tag</s><br>
<s> br tag is used for Break line</s><br>
<s>hr tag is used for Horizontal line</s><br>
</body>
</html>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Try this Code :-

<small> and </small>

The <small> tag defines smaller text (like copyright and other side-comments).

Description The content is displayed one font size smaller than the rest of the text surrounding it.

If you want to put your font size smaller than the rest of the text then put the content within <small>………</small>tag. It reduces one font size than the previous one.

Source Code :-

<html>
<head>
<title>Small</title>
</head>
<body>
<small>html stand for Hyper text markup language</small><br>
<small>P stand for paragraph tag</small><br>
<small> br tag is used for Break line</small><br>
<small>hr tag is used for Horizontal line</small><br>
</body>
</html>

Output :-

Try this code :-

Big tag

<big> and </big>

The content is displayed one font size bigger than the rest of the text surrounding it.

If you want to put your font size larger than the rest of the text then put the content within <big>………</big>. It increase one font size larger than the previous one.

Source Code :-

<html>
<head>
<title>Small</title>
</head>
<body>
<big>html stand for Hyper text markup language</big><br>
<big>P stand for paragraph tag</big><br>
<big> br tag is used for Break line</big><br>
<big>hr tag is used for Horizontal line</big><br>
</body>
</html>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Try this code

Superscript Text

If you put the content within <sup>…………..</sup> element, is shown in superscript; means it is displayed half a character’s height above the other characters.

<sup> and </sup>

The content is displayed in superscript.

Subscript Text

If you put the content within <sub>…………..</sub> element, is shown in subscript ; means it is displayed half a character’s height below the other characters.

<sub> and </sub>

The content is displayed in subscript.

Source code :-

<html>
<head>
<title>Small</title>
</head>
<body>
<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>
<p> 2<sup>2</sup>=4</p>
<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>
<p> H<sub>2</sub>O</p>
</body>
</html>

Output :-

Try this code :-

Anchor tag.

When text is displayed within an HTML document, besides the content and format specification, some extra information or reference to other entity is needed.

Set of such words or text that appears in different colour (generally blue and underlined) are called hyperlink.

hyperlink is created using an <a> element, where the ‘a’ stands for an anchor.

Absolute or Relative Address

Instead of giving a full address such as http://www.somedomain.com/p4.html, we have given only the file name “p4.html”.The location of the called file is relative to the calling file. Hence it is known as a relative address. While the complete address is known as an absolute address.

Align Attribute :-

The align attribute indicates whether the heading appears to the left, center, or right of the page. By default, the content is aligned to the left of the page<p align=”right”> This content will be displayed in right aligned form </p> <p align=”center”> This content will be displayed in center position of the page </p>

Description Anchors parent file to the referred file through hot text (link) :- <a href> … </a>

Source Code : –

Output :-

Try this Code :-

Summary List of tag

Defines body of the HTML document. Appears within the <html> tag pair. :- <html>…</html>

Defines line break. It is an empty singular tag. :- <br> or <br />

Defines a first level heading. :- <h1>…</h1>

Defines a second level heading. :- <h2>…</h2>

Defines a third level heading. :- <h3>…</h3>

Defines a fourth level heading. :- <h4>…</h4>

Defines a fifth level heading. :- <h5>…</h5>

Defines a sixth level heading. :- <h6>…</h6>

Defines the head section of an HTML document. Appears within <html> tag pair. :- <head>…</head>

HTML

HTML Stand or is an acronym which stands for for Hyper Text Markup Language.

HTML is mostly used language on Web to develop web page.

HTML is a markup language which is used for creating attractive web pages with the help of styling, and which looks in a nice format on a web browser. An HTML document is made of many HTML tags and each HTML tag contains different content.

On the platform of the Internet, a distributed information system exists, which is called World Wide Web, WWW or Web in short.

Skeleton Structure of HMTL

The notion of the Web was conceived in 1991 by Tim Berners Lee.

HTML is a kind of markup language. A markup language is a set of tags that enables additional information (besides the content) on how to present the web content.

HTML is derived from of SGML (Standardized General Markup Language)

A combination of opening and closing tag along with some content between the two tags forms an element.

Opening Tag Content About any Topic Closing Tag like :- <h1>____</h1>

Tags in HTML

HTML HEADING TAG

HTML document generally begins with heading .

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading.

When you place the text within the heading tags <h1>………</h1>, it is displayed on the browser in the bold format and size of the text depends on the number of heading.

<h6> defines the least important heading.

<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

Example :-

Source Code :-

Output :-

Try this Code :-

Paragraph tags : <p> and </p>

The <p> tag structures the content into a paragraph.

The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

Each paragraph of text should go in between an opening <p> and closing </p> tag.

Example :-

Source Code :-

Output :-

Try this code :-

Line Break:-

The <br> element does not have an opening and closing tags. <br> is an abbreviated form of break.

Example <br> <br>

<br> or <br/>

Source Code :-

Output :-

Try this code :-

Preformatted Text

The HTML <pre> tag is used to specify pre formatted texts. Texts within <pre>…….</pre> tag is displayed in a fixed-width font. Usually it is displayed in Courier font. It maintains both space and line break.

Many a times we want to display text with multiple white spaces and in multiple lines without wanting to be changed it by the browser. we may embed the content into pre-formatted tag set using <pre> and </pre>.

Source Code :-

Output :-

Try this code :-

Bold :-

The HTML <b>element defines bold text

Syntax :-

<b> and </b>

This tag is used to display given content into bold letters.

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

Source Code :-

<html><head><title>bold</title></head><body><b>html stand for Hyper text markup language</b><br><b>P stand for paragraph tag</b><br> <b> br tag is used for Break line</b><br><b>hr tag is used for Horizontal line</b><br></body></html>

Try this Code :-

Underline :

Syntax

<u> and </u>

This tag is used to display given content with underlined letters

Source Code :-

Output :-

Try this Code:-

Strike Through

Syntax:-

<s> and </s>

Anything written within <strike>…………………..</strike> element is displayed with strikethrough. It is a thin line which cross the statement.

The content of an <s> or <strike> element is displayed with a strikethrough a thin line through the text. Here the ‘s’ is an abbreviated form of ‘strike’.

Source Code :-

<html><head><title>bold</title></head><body><s>html stand for Hyper text markup language</s><br><s>P stand for paragraph tag</s><br> <s> br tag is used for Break line</s><br><s>hr tag is used for Horizontal line</s><br></body></html>

Output:-

Try this code :-

Type writer font

Syntax

<tt> and </tt>

The content of a <tt> element is written in typewriter type of fonts, which is also identified as mono spaced font (like that of a teletype machine).

Source code :-

Try this Code :-

<small> and </small>

The <small> tag defines smaller text (like copyright and other side-comments).

Description The content is displayed one font size smaller than the rest of the text surrounding it.

If you want to put your font size smaller than the rest of the text then put the content within <small>………</small>tag. It reduces one font size than the previous one.

<html>
<head>
<title>bold</title>
</head>
<body>
<b>html stand for Hyper text markup language</b><br>
<b>P stand for paragraph tag</b><br>
<b> br tag is used for Break line</b><br>
<b>hr tag is used for Horizontal line</b><br>
</body>
</html>

<html>
<head>
<title>bold</title>
</head>
<body>
<s>html stand for Hyper text markup language</s><br>
<s>P stand for paragraph tag</s><br>
<s> br tag is used for Break line</s><br>
<s>hr tag is used for Horizontal line</s><br>
</body>
</html>