Formating tag or elements in HTML


We used format text in our web page to make.it look more attractive.HTML uses a number of elements(tags) to format the webpage with the help of this tag.We can change the heading styles,make paragraphs, add lists,change font color ,and size etc.These tags are classified into following categories:-

(1.)Inline element     

(2.)Block-level element.

Inline element :-This types of element are used to format single word,some words or even a single character in a sentence on a webpage.They donot have line break.It is also called character formatting.This type of element can appear only within block level elements.It has two categories:-

  • Physical Inline element
  • Logical Inline element

1.Physical Inline element :-This type of element describe how the text is to be formatted or how the text should look like.The various physical inline elements are:-

(1.)Italic<i>….</i> :-This is used to show the italicize(italic) text.

<HTML>

<Head>

<Title>ii </Title>

</Head>

<Body>

<i>welcome to html</i>

</Body>

</HTML>

 

 

 

 

 

 

 

 

 

(2.)Bold<B>….</B>   :-This is used to show the bold text.

<HTML>

<Head>

<Title>ii </Title>

</Head>

<Body>

<B>welcome to html</B>

</Body>

</HTML>

output:-

 

 

 

 

 

(3.)Underline<U>….</U> :-This is used to show the underline text.

<HTML>

<Head>

<Title>ii </Title>

</Head>

<Body>

<u>welcome to html</u>

</Body>

</HTML>

 

 

 

output:-

 

 

 

 

 

(4.)Subscript<SUB>….</SUB> :-This is used to show the subscript text.eg:-lower text on a line with decreased font size.Used in Mathematics and Chemistry.e.g

<HTML>

<Head>

<Title>ii </Title>

</Head>

<Body>

H<SUB>2</sub>0

</Body>

</HTML>

 

 

 

Output:

 


 

 

 

(5.)Superscript<SUP>….</SUP> :-This is used to show the  superscript text.eg:-Raise text on a line with decreased font size.Used for Footnotes and equations.e.g

<HTML>

<Head>

<Title>ii </Title>

</Head>

<Body>

y=x<SUP>2</SUP>

</Body>

</HTML>

 

 

 

Output:

 

 

 

 

 

(6.)Strike<STRIKE>….</STRIKE> :-This is used to show the strike through text,used to show corrections.e.g

<HTML>

<Head>

<Title>ii </Title>

</Head>

<Body>

<STRIKE>welcome to html</STRIKE>

</Body>

</HTML>

 

 

 

Output:

 

 

 

 

 

(7.)Type<TT>….</TT> :-This is used to show the type writer font.eg:-fixed width fonte.g

<HTML>

<Head>

<Title>ii </Title>

</Head>

<Body>

<TT>Fixed Width Text</TT>

</Body>

</HTML>

 

 

 

Output:

 

 

 

 

 

(8.)Smaller<SMALL>….</SMALL> :-This is used to show the smaller font (1font size smaller than the surroundingtext).e.g

<HTML>

<Head>

<Title>ii </Title>

</Head>

<Body>

Text in<small>small size</small>

</Body>

</HTML>

 

 

 

Output:

 

 

 

 

 

(9.)Bigger<big>….</big> :-This is used to show the bigger font(1 font size bigger than the surrounding text).e.g

<HTML>

<Head>

<Title>ii </Title>

</Head>

<Body>

Text in<big>bigger size</big>

</Body>

</HTML>

 

 

 

Output:

 

 

 

 

 

Logical Inline Element:-

This type of elements describe the text according to its meaning.They tell the browser that text contained is different from ordinary text but it is only the browser how to show the text .They display differently by the different browsers.This types of elements are known as Phrase elements.These elements areuseful then the physical inline elements.Following are the list of inline elements are:-

(1.)  Definition<def>….</def> :-   This is used to show the definition of words,typically displayed in itaclics.used for online groceries.e.g

<HTML>

<Head>

<Title>ll </Title>

</Head>

<Body>

<def>VISUL BASIC</def>

</Body>

</HTML>

 

 

 

Output:

 

 

 

 

 

(2.)  Emphasis<em>….</em> :– This is used for emphasizing important parts of documents displayed in italics.e.g

<HTML>

<Head>

<Title>ll</Title>

</Head>

<Body>

<em>deadline is 25.10.08</em>

</Body>

</HTML>

 

 

 

Output:

 

 

 

 

 

(3.) Citation<cite>….</cite> :-     This is used to citation,typically displayed in italics.used for quotation in papers,titles for books etc.e.g

<HTML>

<Head>

<Title>ll</Title>

</Head>

<Body>

<cite>Internet in a day</cite>

</Body>

</HTML>

 

 

 

Output:

 

 

 

 

 

(4.) coding <code>….</code> :–   This is used for coding displayed in courier fixed width font and used for display of computer code.e.g

<HTML>

<Head>

<Title>ll </Title>

</Head>

<Body>

<code> while(k<10)

{

cout<<k;

k++;

}</code>

</Body>

</HTML>

 

 

 

 

 

Output:

 

 

 

 

 

(5.)  Sample<samp>….</samp> :– This is used for sample text.Displayed in fixed width font.e.g

<HTML>

<Head>

<Title>ll</Title>

</Head>

<Body>

<samp>Text</samp>

</Body>

</HTML>

 

 

 

Output:

 

 

 

 

 

(6.)Strong<strong>….</strong> :-  This is used for strong emphasis.Typically displayed in bold.e.g

<HTML>

<Head>

<Title>ll</Title>

</Head>

<Body>

<strong>Import data</strong>

</Body>

</HTML>

 

 

 

Output:

 

 

 

 

 

(7.)  Keyboard<KBD>….</KBD>:-  This is used for text as keyboard input.Typically displayed in plain fixed width font.e.g

<HTML>

<Head>

<Title>ll</Title>

</Head>

<Body>

To clear the screen use<KBD>cls</KBD>

</Body>

</HTML>

 

Output:

 

 

 

 

 

(8.) Variable<var>….</var>:-  This is used for indicating variable as an computer language codes.e.g

<HTML>

<Head>

<Title>ll</Title>

</Head>

<Body>

<var>int a;</var>

</Body>

</HTML>

 

 

 

Output:

 

 

 

 

 

(9.)  Acononyms<acronym>….</acronym> :-This is used for specifying text as acronyms.e.g

<HTML>

<Head>

<Title>ll</Title>

</Head>

<Body>

<acronymn>W>A</acronymn>

</Body>

</HTML>

 

 

 

Output:

 

 

 

 

 

Block level elememt :

When we work with physical inline elements.we see that they donot insert line break.So we can use block level elements which is used any applicable formatting and insert an addition line break.The block level elements are:- <H1>,<H2>,<H3>,<H4>,<H5>,<H5>,<H6>,<P>,<BR>,<HR>,<PRE>,<OL>,<UL>,<DL>

Heading Tags(<H1>,<H2>……<H6>):-Heading tags are used to create headlines in the documents like title of the page.HTML supports <H1>,<H2>,<H3>,<H4>,<H5>and<H6>.

<H1> Tag:-This is consider the header and is rendered in large font than other five header tags.Headings are usually in bold type and large size than the regular size.

For example:-<H1>Heading one</H1>

<H2>Heading two</H2>

Heading tags has attriute alignment.

For example:-<H1 align=”right”>Heading one

<H2 align=”center”

alignment have three types:-

left,right,center.e.g

<html>
<head>
<title>web page</title>
</head>
<body>
<h1 align=”left”||”center”||”right”>first generation</h1>
<h1 align=”left”>first heading</h1>
<h2 align=”center”>second heading</h2>
<h3 align=”right”>third heading</h3>
<h4 align=”left”>fourth heading</h4>
<h5 align=”center”>fifth heading</h5>
<h6>sixth heading</h6>
</body>
</html>

Output:

 

 

 

 

 

 

 

 

 

 

another example:

<HTML>
<head>
<Title>Appling heading</Title>
</Head>
<Body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</Body>
</HTML>

 

 

 

 

 

 

 

 

 

 

 

 

Paragraph Tag:-In HTML paragraph tag is used for creating a paragraph.The text enclosed in <p> tag and </p> tag act as a single unit.A blank line is inserted before and after the paragraph automatically by the browser.

For example:-<p>paragraph</p>

Paragraph tag has attribute alignment which is used for set the alignment of paragraph.e.g

<HTML>

<Head>

<Title>About paragraph </Title>

</Head>

<Body>

<p>Dreams and hopes are what drive us on in life.</p>

<p align =”right”> Dreams and hopes are what drive us on in life.</p>

<p align =”Centre”>Dreams and hopes are what drive us on in life.</p>

</Body>

</HTML>

 

 

 

 

 

 

 

Output:

 

 

 

 

 

 

 

 

Line Break Tag(<BR>):-When we create HTML document.We want we viewed the document in the web browser’s window wraps at the end of the line automatically. For example:-We can force a line breakusing <BR>.For this we can use </BR> tag.e.g

<HTML>

<Head>

<Title> About Break</Title>

</Head>

<Body>

MCA students are–<br>

Harjeet Kure<br>

Ramandeep kaur<br>

Beant Kaur <br>

Prabhjot Kaur <br>

Kiran Kumar <br>

Neha Rani <br>

</Body>

</HTML>

 

 

 

 

 

 

 

 

 

Output:

 

 

 

 

 

 

 

 

 

 

Comments are closed.