Basic HTML Tags: June 2017

HTML

Introduction about HTML :

Tim Berners Lee

HTML Stands for Hypertext Markup Language. it was created by Tim Berners Lee in 1992. this is a language used to develop webpages. it is interpreted by browsers. it's definition is composed of following elements...

Hypertext: Hypertexts or hyperlinks. It's a method by which we can move around on the web by clicking on special text called hyperlinks, which bring us to the next webpage .

Markup: It refers to the symbol or sequence of characters added to the simple text to define the structure of the text. the symbols used for markup tell the browser how to display text on the screen.

Language: It refers to the syntax. It is similar to any other language. A Markup language is not a programming language.

HTML Version 5

Introduction to HTML Tags

Tags are instructions that are embedded directly into the text of document. An HTML tag is a signal to a browser that it should do something on the text. All HTML tags begins with open angle bracket (<) and ends with close angle bracket (>)

HTML Tags are of two types:

Container Tags: The tags that include both ON and OFF tags are called container tags or container elements. These tags need both an opening tag < > and the closing tag < / >. The only difference between an opening tag and closing tag is the forward slash ' / '. For example : <HTML> tag has its closing tag , which is </HTML>

Empty Tags: Empty tags contain only ON tags, they do not have OFF tags. these tags do not enclose any data. Instead they function on their own. These tags need only opening tag < > , there is no need of closing tag . For example : <BR> tag is an empty tag which breaks the line and displays the text from the next line .

sequence to use tags

ATTRIBUTES

INTRODUCTION

HTML elements can have attributes. An attribute is a property that provides additional information about an HTML element. Attributes are always specified in the opening tag. All attributes consist of two parts: a name and a value , separated by "=". The name is the property you want to set, and the value is what you want for the respective property. It is always put within quotation marks.

Syntax :

< Tag attribute_name 1 = " value 1" attribute_name_n = " value n " >

Examples :

< HR width = "0.4 "color = "black" size = "50%">

<P> tag attributes

<FONT> tag attributes

Structure of an HTML Document

The standard structure of an HTML document has two sections: Head and Body as follows....

Structure of an HTML document

The HTML documents starts with <HTML> tag and ends with </HTML> Tag. Everything is written in these tags. If the commands are not enclosed in tags, then a web browser will assume the commands as simple text

The <HEAD> is the first element contained inside the <HTML> element. it contains no text in itself. the header is where you put information that is important about the web page, but you cannot see it in the browser window.

The <TITLE> tag has to be given within the <HEAD> tags. it contains the title of the document. the <TITLE> tag displays the text that appears on top of the browser, but not in the actual viewing pane. it should be less than 64 characters.

The <BODY> tag contains the text, which gets displayed on the web page along with other tags and attributes. In the <BODY> tag. we use formatting elements, images, heading, list, etc.to enhance the appearance of a web page.

Some HTML tags

< P > tag : Any text containing more than a few lines should be given inside the paragraph tag. each paragraph of text should be given between opening <P> and closing <P> tags. it structures the text into different paragraphs. Syntax: <P Align="Center"> THOUGHT OF THE DAY </P>

<BR> tag : It is a line break tag. this tag breaks the line and displays the text on the next line , without giving any space between two lines. it should be given at the end of the line after which a new line is required. Syntax : <BR>

<HR> tag : The <HR> tag draws a horizontal line across the page and acts as separator. type <HR> tag where you want to insert a horizontal line. we can also specify the size attribute in <HR> tag to define the thickness of line   Syntax : <HR width="0.4" color="black">

<H> tag : Documents could have headings and subheadings. To implement this in our document we use heading levels. This is called heading tag.<H1>, <H2>, <H3>, <H4>, <H5>, <H6>. <H1> is the highest header level and <H6> is the lowest header level. Syntax : <H1> SUBJECT </H1> <H2> SCIENCE </H2>   <H3> PHYSICS</H3> <H3> CHEMISTRY </H3>

5. <FONT> : It allows us to specify how to format font on a webpage. It always start with <FONT> opening tag and ends with </FONT> closing tag. It is used to set type face, size and color.
Syntax :
<FONT FACE="Andica" SIZE="4" COLOR= "RED">
Hardwork is the key to Success. </FONT>

6. <UL> : The Unordered list indents each item in the list and adds a bullet against each item. This list is used when the items are not to be displayed in any particular sequence. It starts with <UL> and ends with </UL>. It also includes <LI> tag for list items.
Syntax :
<UL> 3 D's for Success
<LI> Dedication
<LI> Devotion
<LI> Discipline </UL>

7. <OL> : The Ordered list indents each item in the list and gives number to each item. This list is used when the items are to be displayed in any particular sequence. By default, numbers are displayed in a web browser when ordered list is used. We can change the style using Type attribute. It starts with <OL> and ends with </OL>. It also includes <LI> tag for list items.
Syntax :
<B> Qualities of a good student </B>
<OL Type ="I">
<LI> Attitude <LI> Ability <LI> Academic skills </OL>

Example

PROGRAM :

<html>
<head>
<title> 1st Program of HTML </title>
</head>
<body>
HELLO EVERYONE
<hr color="red" size = "3" width = "50%" align="left">
<p> My name is Jashanpreet. This is my first blog. <br>
It is based on the html tags. Its name is Basic HTML tags.<br>
It contains 7 posts. </p>
<hr color="green" size = "3" width = "50%" align="left">
<ol type="I">
<b> References </b>
<li> Wikipedia
<li> IT Book of 8th standard
<li> www.tutorialspoint.com
<li> www.simplehtmlguide.com </ol>
</body>
</html>
OUTPUT :