Education of Computer Science: HTML : Formatting Tags - Physical and Logical, BLOCKQUOTE, PRE, SPAN, DIV

Text Formatting with HTML Tags:

There are two types of formatting styles:

i) Physical styles

ii) Logical styles

i) Physical styles: They specify exactly how the text should be displayed in the browser. They control the Physical characteristics of the text. The physical tags represent specific visual effects to the text.

Example: , , , <TT>, <BIG>, , <S> or <~~STRIKE~~>, , , etc.

ii) Logical styles: They leave the actual styling upto the browser. Logical tags are structural tags that describe the nature and 'type' of the content they enclose. Logical tags represent the text’s function on the webpage. They do not determine how the text will appear. The Web browser is free to set the presentation. The advantage of using the logical rather than the physical tags is that your meaning is more precisely conveyed.

Example: , , <ADDRESS>, <CITE>, <CODE>, <VAR>, <KBD>, <SAMP>, <DFN>, etc.

NOTE: All the Physical & Logical tags are container tags and required both Start & End tags.

PHYSICAL FORMATTING TAGS
*Formatting Tag*	*Description*
<B>	This is used to make text as BOLD.
<I>	This is used to make text as ITALIC.
<U>	This is used to make text as UNDERLINE.
<S> or <STRIKE>	It displays text in ~~STRIKE THROUGH~~ style.
<TT>	It displays text in a mono-space Tally Type font (Monospace: where each character has same width)
<BIG>	It applies text in a BIGGER FORM then the current default text, it often used for emphasis the text.
<SMALL>	It applies text in a SMALLER FORM than the current default text.
<SUP>	It creates SUPER SCRIPT style text. à x³
<SUB>	It creates SUBSCRIPT style text. à H₂O

Example: 4x³ + 5 à 4x 3 + 5

H₂O à H 2 O

Example:

<! PFORMAT.HTML>

<HTML>

<HEAD>

<TITLE> Physical Style Tags for formatting </TITLE>

</HEAD>

<H1 ALIGN=“CENTER”> Physical Style Tags </H1>

I study in class PGDCA

My favorite subject is DBMS

We are College not <S> School </S> Students

<BIG> M </BIG> ATHS

P HYSIC S

H 2 SO 4

(a+b) 2 =a2 + b2 + 2ab

My full name is <TT> Amit Kumar Singh </TT>

Underline tag is used to underline the text.

</BODY>

</HTML>

~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~

LOGICAL FORMATTING TAGS
*Formatting Tag*	*Description*
<EM>	It emphasizes the text, it usually rendered or applied (represented) as ITALIC.
<STRONG>	It emphasizes the text strongly, usually rendered in BOLD.
<CODE>	It displays text as program code in a MONOSPACE FONT (Tally Type).
<VAR>	It displays text as a program variable or argument, usually rendered in ITALICS.
<KBD>	It displays text that user is supposed to enter. Usually rendered in standard MONOSPACE FONT (Tally Type).
<SAMP>	It displays text as sample program output, usually rendered in a MONOSPACE FONT (Tally Type).
<DFN>	It is used to indicate that you are defining a term, usually rendered as ITALICS.
<CITE>	It creates the text as a citation, usually rendered in ITALICS.
<ADDRESS>	It displays the text as an address, it renders as ITALIC text, start and end tags both required and supported by all the browsers.
<INS>	It displays the text as an inserted text, it is used to track document edit or changes. It renders as UNDERLINE text, Start and end tags both are required.
<DEL>	It displays the text as deleted text, it renders the text as ~~STRIKE THROUGH~~ text, start and end tags both are required.
<Q>	It displays a short quotation (double quote), Start and End tags both are required and supported by some specific browsers only. (Not supported by IE) => “HELLO”

Example:

<! LOGY_TAG.HTML>

<HTML>

<HEAD>

<TITLE> An example of web page for Logical Styles Tags </TITLE>

</HEAD>

<H1 ALIGN=“CENTER”> Logical Style Tags </H1>

My friend is COOL in personality.

He is very Strong Person and also a good student.

Program code is given below -

<CODE>

void main()

{

printf(“Input a Number =“);

scanf(“%d”,&N);

printf(“Square of given number = %d”, N*N);

}

</CODE>

Keyboard Input- <KBD> Input a number = 5 </KBD>

Sample output - <SAMP> Square of given number = 25 </SAMP>

Definition of website - <DFN> It is a collection of web documents or web pages. </DFN>

Some one is said, <Q> <CITE> Honesty is the Best Policy. </CITE> </Q>

Address of University:

Pt. Sundar Lal Sharma Open University

Bilaspur

Chhattisgarh

</ADDRESS>

<INS> This is an Inserted Text </INS>

<DEL> This is a Deleted Text </DEL>

<Q> This is a Short Quotation Text </Q>

π=180 degree.

</BODY>

</HTML>

~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~

Note: We can create SPECIAL CHARACTERS or symbol, like a, b, g, etc. using its entity (sign) code.

Syntax: &#sign-code;

Symbol	Entity (sign) code
a (Alfa)	α
b (Beta)	946
γ (Gamma)	947
θ (Theta)	952
Σ (Sigma)	931
π (Pie)	960
Ω (Omega)	937
^ (logical AND)	8743
∩ (Intersection)	8745
∪(Union)	8746
⊂ (Superset)	8834
⊃ (Subset)	8835
Δ (Delta)	916
ε (Epsilon)	949
η (Eta)	951
€ (Euro Sign)	8364
ω	969
σ	963
τ (Tao)	964
ζ (Zeta)	950

~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~

 Tag: This is a text formatting tag. We can specify text size, colour and font-face (font-family) using this tag. Start and end tags both are required and supported by all the browsers.

*Attribute*	*Specification and Value*
COLOR	Colour of text
FACE	Font family like Time New Roman, Comic Sans MS, Arial, etc.
SIZE	Size of the text ranging from 1 to 7
STYLE	Inline styling is used to apply a unique style (or formatting) to a single HTML element/tag.
TITLE	Title of the tag (like “ToolTipText” in VB)

<BASEFONT> Tag: It sets the basefont for specified web page / web document. Start tag is required but end tag is optional and supported by all the browsers.

*Attribute*	*Specification and Value*
COLOR	Colour of text
FACE	Font family like Time New Roman, Comic Sans MS, Arial, etc.
SIZE	Size of the text ranging from 1 to 7
STYLE	Inline styling is used to apply a unique style (or formatting) to a single HTML element.
TITLE	Title of the tag (like “ToolTipText” in VB)

Example:

<! MyFONTS.HTML>

<HTML>

<HEAD>

<TITLE> An example web page for FONT </TITLE>

</HEAD>

<H1> Working with Fonts </H1>

Hi, I am applying Font Tag

This is an example of FONT where size of text is 6.

Welcome in default text of the Web Document !!!

</BODY>

</HTML>

~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~

Example:

<! MyALLFONTS.HTML>

<HTML>

<HEAD>

<TITLE> An example web page for FONT & BASEFONT </TITLE>

</HEAD>

<H1> Working with Fonts </H1>

Hi, I am applying Font Tag

This is an example of Base font <HR>

This is an example of FONT where size of text is 4.

<HR>

We are again in Base-Font. <HR>

This is another example of FONT where size of text is 2.

<HR>

Now we are again in Base-Font. <HR>

</BASEFONT>

Welcome in default text of the Web Document !!!

</BODY>

</HTML>

~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~

 Tag: It is used to insert a line break into a web page (like a new line). This is an empty tag and only start tag is required. It is supported by all the browsers.

 Tag: It tells the browser not to break the text into separate lines. This is a container tag. Start and end tags both are required and supported by all the browsers. All the text appears (displays) in single line and we can see the entire text using horizontal scroll bar which is automatically appears in the browser (bottom side).

 (Word Break): It indicates that word breaks are allowed. This is an empty tag and only start tag is required.

~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~

<HR> (Horizontal Ruler): This tag is used to draw (create) a horizontal ruler line in webpage. This is an empty tag. Only start tag is required and supported by all the browsers.

*Attribute*	*Specification and Value*
WIDTH	%, Point (Width/Length of Horizontal Ruler)
SIZE	Thickness of Horizontal Ruler
ALIGN	Left, CENTER (default), Right
COLOR	Colour of the Horizontal Ruler
NOSHADE	(No Value)
STYLE	Inline styling is used to apply a unique style (or formatting) to a single HTML element.
TITLE	Title of the tag (like “ToolTipText” in VB)

~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~

<CENTER> Tag: It centers enclosed text, image or table. Start and end tags both are required and supported by all the browsers.

~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~

<BLOCKQUOTE> Tag: It is used for indent and styles the text as a quotation. Start and end tags both are required. Mainly used for applying styles (formats) to the contents.

*Attribute*	*Specification and Value*
STYLE	Inline styling is used to apply a unique style (or formatting) to a single HTML element.
TITLE	Title of the tag (like “ToolTipText” in VB)

~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~

<PRE> Tag: This tells to the browser that the enclosed text is preformatted and should not be reformatted. Start and end tags both are required and supported by all the browsers.

Example:

<! BREAKDEMO.HTML>

<HTML>

<HEAD>

<TITLE> Working with Line Breaks </TITLE>

</HEAD>

Example of line break

This is new line text

Example of NOBR

Hi I am Shivaji Rao. I am studying B.Sc. II Year in CS from Science College, Raipur. Science College is one of the best college of Raipur for studies in SCIENCE stream. In college I have many friends. But my best friend is APPU.

<HR>

Example of centered aligned text

We can apply styles using different tags

</CENTER>

Example of centered aligned text

We can apply styles using SINGLE tag

</CENTER>

</BODY>

</HTML>

~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~

Example:

<! BLOCK-PRE.HTML>

<HTML>

<HEAD>

<TITLE> An example of web page </TITLE>

</HEAD>

<CENTER> Example of BLOCKQUOTE and PRE </CENTER>

<HR>

Statement of students!

We are the student of Computer Science of the Best College of Raipur. We want to become a good Software Developer and we will get a good package very soon.

</BLOCKQUOTE> <HR>

<PRE>

RollNo Name Class

1001 Rashmi B.Sc. - CS

1002 Bhavika B.Sc. - IT

1003 Monika B.Sc. - CS

1004 Abhilasha B.Sc. - CS

1005 Kamna B.Sc. - IT

<HR>

</PRE>

We are in Default Text again.

</BODY>

</HTML>

~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~

<DIV> Tag: It is used to create a block of text that we can apply styles. Start and end tags both are required and supported by all the browsers.

*Attribute*	*Specification and Value*
ALIGN	LEFT, CENTER, RIGHT
STYLE	Inline styling is used to apply a unique style (or formatting) to a single HTML element.
TITLE	Title of the tag (like “ToolTipText” in VB)

~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~

 Tag: It is used to create a block of text that we can apply styles. Mainly used for applying style and formatting to the text. Start & end tags both are required and supported by all the browsers.

*Attribute*	*Specification and Value*
STYLE	Inline styling is used to apply a unique style (or formatting) to a single HTML element.
TITLE	Title of the tag (like “ToolTipText” in VB)

~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~

Example:

<! DivSpan.HTML>

<HTML>

<HEAD>

<TITLE> An example of web page </TITLE>

</HEAD>

<CENTER> Example of DIV and SPAN </CENTER>

<HR>

Example of Division

The Principal

Science College,

Raipur (C.G.)

</DIV> <HR>

Example of SPAN Tag

Wish You Best of Luck !!!

<HR>

We are in Default Text again.

Roll number = 1001

Name = ABC

Phone no. = 9827198271

Roll number = 1001

Name       =ABC

Phone no.     = 9827198271

</BODY>

</HTML>

~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~

Note:   => Single Blank Space

Example: Roll number = 1001

Name       =ABC

Phone no.     = 9827198271

~ ~ ~ ~ ~ ~ ~ * ~ ~ ~ ~ ~ ~ ~

Education of Computer Science

MyProPages

Friday, February 21, 2020

HTML : Formatting Tags - Physical and Logical, BLOCKQUOTE, PRE, SPAN, DIV

No comments:

Post a Comment

Blog Archive