Tutorialsvenue: HTML Text Formatting

This text is bold

This text is italic

This is computer output

This is_subscript and ^superscript

HTML Formatting Tags:

HTML uses tags like and for formatting output, like bold or italic text.

These HTML tags are called formatting tags (look at the bottom of this page for a complete reference).

Often renders as , and renders as .

However, there is a difference in the meaning of these tags:

 or defines bold or italic text only.

 or means that you want the text to be rendered in a way that the user understands as "important". Today, all major browsers render strong as bold and em as italics. However, if a browser one day wants to make a text highlighted with the strong feature, it might be cursive for example and not bold!

HTML Text Formatting Tags:

Tag	Description
<b>	Defines bold text
<em>	Defines emphasized text
<i>	Defines a part of text in an alternate voice or mood
<small>	Defines smaller text
<strong>	Defines important text
<sub>	Defines subscripted text
<sup>	Defines superscripted text
<ins>	Defines inserted text
<del>	Defines inserted text
<del>	Defines deleted text
<mark>	Defines marked/highlighted text

HTML "Computer Output" Tags:

Tag	Description
<code>	Defines computer code text
<kbd>	Defines keyboard text
<samp>	Defines sample computer code
<var>	Defines a variable
<pre>	Defines preformatted text

HTML Citations, Quotations, and Definition Tags:

Tag	Description
<abbr>	Defines an abbreviation or acronym
<address>	Defines contact information for the author/owner of a document
<bdo>	Defines the text direction
<blockquote>	Defines a section that is quoted from another source
<q>	Defines an inline (short) quotation
<cite>	Defines the title of a work
<dfn>	Defines a definition term

Example:1

<html>

<head>

<title>

Here is a several html Elements.

</title>

</head>

<body>

This is normal. This is bold. 

This is normal. This is Italic. 

This is normal. This is bold. 

This is normal. <big>This is bold.</big> 

This is normal. This is bold. 

This is normal h2o. this is subscript. H2o 

This is normal.a2+b2.This is superscript a2+b2 

This is normal. This is Emphasis. 

This is normal. <del>This is strike through.</del> 

This is normal. <ins>This is underlined.</ins> 

</body>

</html>

Result:

This is normal. This is bold.
This is normal. This is Italic.
This is normal. This is bold.
This is normal. This is bold.
This is normal. This is bold.
This is normal h2o. this is subscript. H₂o
This is normal.a2+b2.This is superscript a²+b²
This is normal. This is Emphasis.
This is normal.
This is normal. This is underlined.

Code Element:

<body>

This is normal.<code>This is code style.</code>

</body>

Result:

This is normal.This is code style.

Variables Element:

<body>

This is normal.<var>This is VARIABLE STYLE.</var>

</body>

Result:

This is normal.This is VARIABLE STYLE.

tt/kbd/samp Element:

<body>

This is normal. <tt>This is typewriter style. </tt> 

This is normal. <kbd>This is computer keyboard style. </kbd> 

This is normal. <samp> This is computer sample code. </samp>

</body>

Result:

This is normal. This is typewriter style.
This is normal. This is computer keyboard style.
This is normal. This is computer sample code.

Pre Element:

<body>

 Position & Salary of Asha staffs

<pre>

 Name Title Salary 

Belal Director 20000

Ashad officer 12000

Nurul Faculty 10000

</pre>

</body>

Result:

Position & Salary of Asha staffs

 Name      Title       Salary

Belal       Director  20000

Ashad       officer   12000

Nurul       Faculty   10000

Ciation, Quotations and Definitation tag:

This tag format: <cite>……………..</cite>

<body>

A bibliographic citation is a reference to <cite>

book, article, web page, </cite> or other published item.

Citations should supply sufficient detail to identify the

item uniquely Different citation systems and styles are used

in <cite> scientific citation, legal citation, prior art,

</cite> and <cite> the arts and the humanities. </cite>

</body>

Result:

A bibliographic citation is a reference to book, article, web page, or other published item. Citations should supply sufficient detail to identify the item uniquely Different citation systems and styles are used in scientific citation, legal citation, prior art, and the arts and the humanities.

Text formatting Source code:

<!DOCTYPE html>

<html>

<body>

This text is bold

This text is strong

This text is emphasized

This text is italic

This text is small

This is subscript and superscript

</body>

</html>

Result:

This text is bold
This text is strong
This text is emphasized
This text is italic
This text is small
This is_subscript and ^superscript

Blockquote/Q Element:

This tag format: <q>…………….</q>

<body>

Whenever you are a seasoned HTML user or a first time, this

book meats you at your current level and helps you grow from

there.

<blockquote>

If you are already familiar with HTML'sfunctionality, you'll

find plenty of help to streamline and enhance your work.

</blockquote>

<q> you canget help about HTML 5 and CSS3 </q>

</body>

Result:

Whenever you are a seasoned HTML user or a first time, this book meats you at your current level and helps you grow from there.

If you are already familiar with HTML'sfunctionality, you'll find plenty of help to streamline and enhance your work.

you canget help about HTML 5 and CSS3

Definition Element:

Format: <dfn>……………….</dfn>

<body>

A website, also written as web site, web site, or simply site

<dfn> Is a set of related web pages containing content such

as text, images, video, audio, etc.</dfn> A web site is

hosted on at least one web server, accessible via a network

such as the Internet or a private local area network through

an Internet address known as a Uniform Resource Locator.

</body>

Result:

A website, also written as web site, web site, or simply site Is a set of related web pages containing content such as text, images, video, audio, etc. A web site is hosted on at least one web server, accessible via a network such as the Internet or a private local area network through an Internet address known as a Uniform Resource Locator.

Preformatted text source:

<!DOCTYPE html>

<html>

<body>

<pre>

This is

preformatted text.

It preserves both spaces

and line breaks.

</pre>

The pre tag is good for displaying computer code:

<pre>

for i = 1 to 10

print i

next i

</pre>

</body>

</html>

Result:

This is

preformatted text.

It preserves      both spaces

and line breaks.

The pre tag is good for displaying computer code:

for i = 1 to 10

     print i

next i

Computer output tags source:

<!DOCTYPE html>

<html>

<body>

<code>Computer code</code>

 

<kbd>Keyboard input</kbd>

 

<samp>Sample text</samp>

 

<var>Computer variable</var>

 

Note: These tags are often used to display computer/programming code.

</body>

</html>

Computer output tags result:

Computer code
Keyboard input
Sample text
Computer variable

Note: These tags are often used to display computer/programming code.

Address source:

<!DOCTYPE html>
<html>
<body>

<address>
Written by Belal hossain 
<a href="mailto:mbelalhossain91@gmail.com">Email us</a> 
Address: 1212, Kazi nazrul islam avenue Dhaka Bangladesh Phone:

01728876754
</address>
</body>
</html>

Address result:

Written by Belal hossain
Email us
Address: 1212, Kazi nazrul islam avenue
Dhaka
Bangladesh
Phone: 01728876754

Abbreviations and acronyms source:

<!DOCTYPE html>

<html>

<body>

The <abbr title="World Wide Web Consortium">W3c</abbr> was

is the main international standards organization for the

<acronym title ="World Wide Web">www</acronym>

</body>

</html>

result:

The W3c was is the main international standards organization for the www

Bi-Directional Override(BDO) Element:

Format: <bdo>………………</bdo>

<!DOCTYPE html>

<html>

<body>

This is normal. 

<bdo dir ="rtl"> !<rtl=right to left>

This is not normal. This is bi-directional

</bdo>

</body>

</html>

Result:

This is normal.
! This is not normal. This is bi-directional

Blinking Element:

Format: <blink>……………….</blink>

<!DOCTYPE html>

<html>

<body>

This is normal.<blink> This is blinking. </blink>

</body>

</html>

Result:

This is normal. This is blinking.

Text directions source:

<!DOCTYPE html>

<html>

<body>

If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):

<bdo dir="rtl">

Here is some Hebrew text

</bdo>

</body>

</html>

Text directions result:

If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl):

Here is some Hebrew text

Quotations source:

<!DOCTYPE html>

<html>

<body>

<h2>The blockquote Element</h2>

The blockquote element specifies a section that is quoted from another source.

Here is a quote from WWF's website:

<blockquote cite="http://www.worldwildlife.org/who/index.html">

For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

</blockquote>

Note: Browsers usually indent blockquote elements.

<h2>The q Element</h2>

The q element defines a short quotation.

WWF's goal is to:

<q>Build a future where people live in harmony with nature.</q>

We hope they succeed.

Note: Browsers insert quotation marks around the q element.

</body>

</html>

result:

The blockquote Element

The blockquote element specifies a section that is quoted from another source.
Here is a quote from WWF's website:

Note: Browsers usually indent blockquote elements.

The q Element

The q element defines a short quotation.
WWF's goal is to: Build a future where people live in harmony with nature. We hope they succeed.
Note: Browsers insert quotation marks around the q element.

Deleted and inserted text source:

<!DOCTYPE html>

<html>

<body>

My favorite color is <del>blue</del> <ins>red</ins>!

Notice that browsers will strikethrough deleted text and underline inserted text.

</body>

</html>

Deleted and inserted text result:

My favorite color is red!
Notice that browsers will strikethrough deleted text and underline inserted text.

Highlighted text source:

<!DOCTYPE html>

<html>

<body>

Do not forget to buy milk today.

</body>

</html>

Pages

Tuesday, May 6, 2014

HTML Text Formatting

HTML Formatting Tags:

HTML Text Formatting Tags:

HTML "Computer Output" Tags:

HTML Citations, Quotations, and Definition Tags:

Code Element:

tt/kbd/samp Element:

Pre Element:

Ciation, Quotations and Definitation tag:

Text formatting Source code:

Blockquote/Q Element:

Definition Element:

Preformatted text source:

Computer output tags source:

Address source:

Abbreviations and acronyms source:

Blinking Element:

Text directions source:

Quotations source:

The blockquote Element

The q Element

Deleted and inserted text source:

Highlighted text source:

No comments:

Post a Comment