Wednesday, June 28, 2017

Html-Phrase Tags

Hello guys good morning and welcome to this new tutorial.In this tutorial am gonna be talking about the HTML phrase tags,i hope you guys has learnt alot from my previous tutorials,without wasting much time lets get started.
The phrase tags are meant for specific purposes,although they are displayed in similar way as other basic tags like <b>,<i>,<pre> and <tt> you have seen in the previous tutorials,this tutorial will talk about the important phrase tags so lets start by taking them one after the other.

Emphasized Text
when working on a HTML project,any thing that comes in between the <em>....</em>  element is displayed as an emphasized teext,let take a look at the example below.


Example
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text</title>
</head>
<body>
<p>the following is an <em>emphasized</em>text example</p>
</body>
</html>
You can try the above code out using your text editor for better understanding and feel free to drop your questions in the comment box,they will be attended to.

Marked Text
when working with HTML,any thing that appears within <mark>.....</mark> element is displayed as marked with yellow ink,an example of what am talking about is giving below.



Example
<!DOCTYPE html>
<html>
<head>
<title>Marked Text</title>
</head>
<body>
<p>the following words has a <marked>marked</marked>text with yellow ink</p>
</body>
</html>
You can try the above code out using your text editor for better understanding and feel free to drop your questions in the comment box,they will be attended to.

Strong Text 
when working with HTML,any thing that fall in between the <strong>......</strong> element is displayed as bold or important text,example goes below.



Example
<!DOCTYPE html>
<html>
<head>
<title>Strong Text</title>
</head>
<body>
<p>the following words has a <strong>Strong</strong>text</p>
</body>
</html>
You can try the above code out using your text editor for better understanding and feel free to drop your questions in the comment box,they will be attended to.

Text Abbreviation
when working with HTML you can abbreviate a text by placing the text inside the opening <abbr> and closing </abbr> tags.The title attribute must contain this full description and nothing else,example goes below.



Example
<!DOCTYPE html>
<html>
<head>
<title>Text Abbreviation Example</title>
</head>
<body>
<p>The name of my class teacher is <abbr title="kennedy">Kenny</abbr></p>
</body>
</html>
You can try the above code out using your text editor for better understanding and feel free to drop your questions in the comment box,they will be attended to.

Acronym Element 
The <acronym> element allows one to indecate that the text between the <acronym> and </acronym> tag is an acronym.
Currently the major browsers do not change the appearance of the content of the <acronym> element.

Example
<!DOCTYPE html>
<html>
<head>
<title>Acronym Element</title>
</head>
<body>
<p>This tutorial covers marking up text in <acronym>HTML</acronym>.</p>
</body>
</html>
You can try the above code out using your text editor for better understanding and feel free to drop your questions in the comment box,they will be attended to.

Text Direction 
The <bdo>......</bdo> element stands for Bi-Directional Override and it is used to override the current text direction,an example goes below.



Example
<!DOCTYPE html>
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
<p>This text will go left to right which is the default direction</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>
</body>
</html>
You can try the above code out using your text editor for better understanding and feel free to drop your questions in the comment box,they will be attended to.

Special Terms 
The <dfn>......</dfn> element (or HTML Definition Element) allows you to specify that you are introducing a special term into the HTML document. Its usage is similar to italic word in the midst of a paragraph.
Typically,you use use a <dfn> element the first time you introduce a key term,most recent browsers render the content of <dfn> element in an italic font.

Example
<!DOCTYPE html>
<html>
<head>
<title>Special Terms Example</title>
</head>
<body>
<p>The following is a <dfn>Special</dfn>term.</p>
</body>
</html>
You can try the above code out using your text editor for better understanding and feel free to drop your questions in the comment box,they will be attended to.

Quoting Text 
when working with HTML and you wanna quote a passage from another source,you should put it inside the <blockquote>........</blockquote> element.
The text inside the <blockquote> element is usually indented from left to right edges of the surrounding text, and some times uses and italiced font,here is an example below.

Example
<!DOCTYPE html>
<html>
<head>
<title>Quoting Text Example</title>
</head>
<body>
<p>The following description of XHTM is taken from the w3c school website:</p>
<blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML, following on from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
</body>
</html>
You can try the above code out using your text editor for better understanding and feel free to drop your questions in the comment box,they will be attended to.
Thats it for this tutorial,the rest of the HTML phrase tags will be treated in the next tutorial,bye for now and goodluck!!!

Links to previous tutorials on HTML : Html IntroductionHtml TagsHtml Document StructureThe Doctype Declaration , Html Basic Tags , Html Basic Tags2 , Html Elements , Html Attributes , Html Attribute 2 , Html Formating , Html Formatting[CONTINUATION] , Grouping Content
Share:

0 comments:

Post a Comment