Displaying Plain Text
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HTML document</TITLE>
</HEAD>
<BODY>
Here we are displaying just plain text in HTML document. As you can see, we have not used any element in the code to organize this text.
</BODY>
</HTML>
Displaying Bold Text
the B element is useful in article abstracts to display the beginning of an article in bold text
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
Using the B Element
</TITLE>
</HEAD>
<BODY>
Here we use <B> the B element </B> to display the text as <B> bold</B>.
</BODY>
</HTML>
Displaying Italic Text
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
Using the I Element
</TITLE>
</HEAD>
<BODY>
Here we use <I> the I element </I> to display the text as <I> italic </I>.
</BODY>
</HTML>
Displaying Small Text
HTML uses the SMALL element to decrese the size of text.
The Small element renders text in one size smaller than the normal text size.
If the text enclosed within the small element is already of the smallest size, then the small element has no effect.
The small element is related to the font or basefont size.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>The SMALL Element</TITLE>
</HEAD>
<BODY>
This is plain text. <BR/>
<SMALL> This is a small text with only one SMALL element.</SMALL> <BR/>
<SMALL><SMALL> This is a small text with two nested SMALL elements.</SMALL></SMALL>
</BODY>
</HTML>
Displaying Subscripted text
the text between the starting and ending tags of the SUB element appears below the base line.
it is mainly used for writing chemical formulae and mathematical expression.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
SUBSCRIPTED TEXT
</TITLE>
</HEAD>
<BODY>
<P>Displaying <SUB>subscripted </SUB> Text.</P>
</BODY>
</HTML>
Displaying Superscripted text
text present in above the base line
the sup element is mainly used in footnotes and also for adding exponential values in equation.
when you use the sup element with the a element, you can generate hyperlinked footnotes.
<a href = "superscript.html#note47"><sup><small>47</small></sup></a>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>SUPERSCRIPTED TEXT</TITLE>
</HEAD>
<BODY>
<P>Displaying <SUP> superscripted </SUP> Text. </P>
</BODY>
</HTML>
Displaying Abbreviations
Abbreviation is the shortened for of a word or phrase
IE - Internet Explorer
The abbr element uses the title attrivute to explain the meaning of an abbreviation
<!DOCTYPE HTML>
<HTML>
<TITLE>
The ABBR Element
</TITLE>
<BODY>
<ABBR title="Internet Explorer">IE</ABBR> abbreviation of Internet Explorer
</BODY>
</HTML>
Displaying Program Code
code element to display the text that represents the computer source code or other machine readable content.
the code element is used to display the enclosed text in a mono-spaaced font, such as courier.
if you want to display the programming in multiple lines, then place thecode element within the pre element.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>CODE</TITLE>
</HEAD>
<BODY>
Following is the basic structure of HTML:<BR/>
<code>
<!DOCTYPE HTML><BR/>
<HTML><BR/>
<HEAD><BR/>
<TITLE></TITLE><BR/>
</HEAD><BR/>
<BODY><BR/>
</BODY><BR/>
</HTML><BR/>
</code>
</BODY>
</HTML>
Displaying sample program output
the samp element specifies that the enclosed text is a sample ouput from a program, and the browser displays the enclosed text in the monospaced font, such as courier.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>The SAMP Element</TITLE>
</HEAD>
<BODY>
The <SAMP> substring() </SAMP> method returns a new String instance
</BODY>
</HTML>
Displaying Keyboard Text
the kbd element is commonly used in computer - related documentation and manuals.
depending on browser the enclosed text changes, and the font is monospaced font.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>The KBD Element</TITLE>
</HEAD>
<BODY>
Press the <KBD>ENTER</KBD> key to execute the application.
</BODY>
</HTML>
Emphasizing text with the Em element
text is more importence than rest of the content.
the emphasized text is displayed in the weeb browser in italic style formate.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>The EM Element</TITLE>
</HEAD>
<BODY>
In this example we are using <EM>the EM element </EM> for <EM>emphasizing text</EM>.
</BODY>
</HTML>
Emphasizing text with the STRONG element
the strong element makes the enclosed text thicker and slightly bigger than the surrounding text.
the text written in strong element slightly similar to the text written in B element.
the strong element is used to provide emphasis aurally for visually impaired or illiterate people who surf the web using screen readers, while the b element is used to provide emphasis visually.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
The STRONG Element
</TITLE>
</HEAD>
<BODY>
<P> The ABC phone service has been around for a while, with even access to the marketplace. The XYZ fans, on the other hand, were left in the lurch with no equivalent service made available. <STRONG>However, that is all set to change with the launch of more ABC phones. </STRONG></P>
</BODY>
</HTML>
Defining new terms
HTML uses the DFN element to provide a definition for terms in a document.
by adding the title attribute and corresponding value to the DFN element, a tool tip appears.
the tooltip displays the values of the title attribute when the user hovers themouse over the enclosed text.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>The DFN Element</TITLE>
</HEAD>
<BODY>
<DFN title=”HTML”> HTML </DFN> is an acronym for Hypertext Markup Language, which is a markup language for Web pages
</BODY>
</HTML>
Displaying the short quotations
this element applies the quotes on the in-line content, which means that text displayed in the single paragraph.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>SHORT QUOTATION </TITLE>
</HEAD>
<BODY>
There are two types of errors in Java <Q>compile time and run-time errors</Q>
</BODY>
</HTML>
Displaying the long quotation
the text enclosed within the blockquotte element is displayed in a separate paragraph and slightly changes the indentation of the text to the right.
blockquote element placess white space both before and after the quotation.
the blockquote element has optional attribute i.e., cite. the cite attribute is used to specify the source of the quotation in the document.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>LONG QUOTATION </TITLE>
</HEAD>
<BODY>
Artificial intelligence (AI) is the intelligence of machines and the branch of computer science which aims to create it. <BLOCKQUOTE>Textbooks define the field as the study and design of intelligent agents, where an intelligent agent is a system that perceives its environment and takes actions which maximize its chances of success. John McCarthy, who coined the term in 1956, defines it as the science and engineering of making intelligent machines. </BLOCKQUOTE>
</BODY>
</HTML>
Displaying Inserted text
the ins elementis used to provide information about changes or updates made to a document.
the ins element renders the enclosed text to be displayed with an underline.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>The INS Element </TITLE>
</HEAD>
<BODY>
HTML, CSS, <INS>SGML</INS>, XHTML
</BODY>
</HTML>
Displaying Deleted text
the del element is also used to provide information about changes and updates made to a document.
the web browser renders the enclosed text as strike through.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>The DEL Element </TITLE>
</HEAD>
<BODY>
HTML, CSS, SGML, <DEL>XHTML</DEL>
</BODY>
</HTML>
the problem with ins and del is that browsersthat do not support these elements display the enclosed text in a normal font style, giving an incorrect representation of the intended meaning.
Displaying variables and arguments using the VAR element
the variable can be a part of an application or mathematical expression.
the web browser displays the enclosed text in italic style.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>The VAR Element</TITLE>
</HEAD>
<BODY>
The perl <VAR> $input </VAR> argument will hold 10.
</BODY>
</HTML>
Overriding text direction using the bdo element
html uses the bdo element to change the default direction of text.
BDO stands for Bi-Dirctional Override.
BDO element is mainly used to display a variety of languages, such as Arabic and Hebrew, which are read from right to left
<bdo dir="RTL/LTR">smile</bdo>
you can also specify the language in which the web pagewill be displayed by using the language attribute, which is a string from the RFC1766 standerd.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>BDO</TITLE>
</HEAD>
<BODY>
<BDO dir="ltr">This sentence appears left to right.</BDO><br />
<BDO dir="rtl">This sentence appears right to left.</BDO><br />
</BODY>
</HTML>
Using the Mark element
sometimes you need to mark or highlight the importent text.
you can also change the color of the highlighter by using the style attribute of the MARK element.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>The MARK Element </TITLE>
</HEAD>
<BODY>
<P> The MARK element is used to <MARK style="background-color:yellow;"> mark or highlight the text </MARK> in an HTML document. </P>
</BODY>
</HTML>
Creating Keyboard shortcut
you can use accesskey attribute when defining the element to provide the keyboard shortcut to that element or control.
<!DOCTYPE HTML>
<HEAD>
<TITLE>Assigning Keyboard Shortcut</TITLE>
</HEAD>
<BODY>
<H1>Use the Shortcut Keys to access the Content</H1>
<P>Press the <KBD>ALT+W</KBD> keys to navigate the following link:</P>
<A href="keyboard.html" accesskey=w target=>Open keyboard.html file.</A>
<P>Press the <KBD>ALT+Z</KBD> keys to focus on the following text field:</P>
Enter your name: <INPUT type="text" name="name" accesskey=z>
<P>Press the <KBD>ALT+S</KBD> keys to click the Button to submit the form:</P>
<INPUT type="submit" accesskey=s onclick="alert('Form Submitted Successfully.')">
</BODY>
</HTML>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>HTML document</TITLE>
</HEAD>
<BODY>
Here we are displaying just plain text in HTML document. As you can see, we have not used any element in the code to organize this text.
</BODY>
</HTML>
Displaying Bold Text
the B element is useful in article abstracts to display the beginning of an article in bold text
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
Using the B Element
</TITLE>
</HEAD>
<BODY>
Here we use <B> the B element </B> to display the text as <B> bold</B>.
</BODY>
</HTML>
Displaying Italic Text
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
Using the I Element
</TITLE>
</HEAD>
<BODY>
Here we use <I> the I element </I> to display the text as <I> italic </I>.
</BODY>
</HTML>
Displaying Small Text
HTML uses the SMALL element to decrese the size of text.
The Small element renders text in one size smaller than the normal text size.
If the text enclosed within the small element is already of the smallest size, then the small element has no effect.
The small element is related to the font or basefont size.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>The SMALL Element</TITLE>
</HEAD>
<BODY>
This is plain text. <BR/>
<SMALL> This is a small text with only one SMALL element.</SMALL> <BR/>
<SMALL><SMALL> This is a small text with two nested SMALL elements.</SMALL></SMALL>
</BODY>
</HTML>
Displaying Subscripted text
the text between the starting and ending tags of the SUB element appears below the base line.
it is mainly used for writing chemical formulae and mathematical expression.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
SUBSCRIPTED TEXT
</TITLE>
</HEAD>
<BODY>
<P>Displaying <SUB>subscripted </SUB> Text.</P>
</BODY>
</HTML>
Displaying Superscripted text
text present in above the base line
the sup element is mainly used in footnotes and also for adding exponential values in equation.
when you use the sup element with the a element, you can generate hyperlinked footnotes.
<a href = "superscript.html#note47"><sup><small>47</small></sup></a>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>SUPERSCRIPTED TEXT</TITLE>
</HEAD>
<BODY>
<P>Displaying <SUP> superscripted </SUP> Text. </P>
</BODY>
</HTML>
Displaying Abbreviations
Abbreviation is the shortened for of a word or phrase
IE - Internet Explorer
The abbr element uses the title attrivute to explain the meaning of an abbreviation
<!DOCTYPE HTML>
<HTML>
<TITLE>
The ABBR Element
</TITLE>
<BODY>
<ABBR title="Internet Explorer">IE</ABBR> abbreviation of Internet Explorer
</BODY>
</HTML>
Displaying Program Code
code element to display the text that represents the computer source code or other machine readable content.
the code element is used to display the enclosed text in a mono-spaaced font, such as courier.
if you want to display the programming in multiple lines, then place thecode element within the pre element.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>CODE</TITLE>
</HEAD>
<BODY>
Following is the basic structure of HTML:<BR/>
<code>
<!DOCTYPE HTML><BR/>
<HTML><BR/>
<HEAD><BR/>
<TITLE></TITLE><BR/>
</HEAD><BR/>
<BODY><BR/>
</BODY><BR/>
</HTML><BR/>
</code>
</BODY>
</HTML>
Displaying sample program output
the samp element specifies that the enclosed text is a sample ouput from a program, and the browser displays the enclosed text in the monospaced font, such as courier.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>The SAMP Element</TITLE>
</HEAD>
<BODY>
The <SAMP> substring() </SAMP> method returns a new String instance
</BODY>
</HTML>
Displaying Keyboard Text
the kbd element is commonly used in computer - related documentation and manuals.
depending on browser the enclosed text changes, and the font is monospaced font.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>The KBD Element</TITLE>
</HEAD>
<BODY>
Press the <KBD>ENTER</KBD> key to execute the application.
</BODY>
</HTML>
Emphasizing text with the Em element
text is more importence than rest of the content.
the emphasized text is displayed in the weeb browser in italic style formate.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>The EM Element</TITLE>
</HEAD>
<BODY>
In this example we are using <EM>the EM element </EM> for <EM>emphasizing text</EM>.
</BODY>
</HTML>
Emphasizing text with the STRONG element
the strong element makes the enclosed text thicker and slightly bigger than the surrounding text.
the text written in strong element slightly similar to the text written in B element.
the strong element is used to provide emphasis aurally for visually impaired or illiterate people who surf the web using screen readers, while the b element is used to provide emphasis visually.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
The STRONG Element
</TITLE>
</HEAD>
<BODY>
<P> The ABC phone service has been around for a while, with even access to the marketplace. The XYZ fans, on the other hand, were left in the lurch with no equivalent service made available. <STRONG>However, that is all set to change with the launch of more ABC phones. </STRONG></P>
</BODY>
</HTML>
Defining new terms
HTML uses the DFN element to provide a definition for terms in a document.
by adding the title attribute and corresponding value to the DFN element, a tool tip appears.
the tooltip displays the values of the title attribute when the user hovers themouse over the enclosed text.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>The DFN Element</TITLE>
</HEAD>
<BODY>
<DFN title=”HTML”> HTML </DFN> is an acronym for Hypertext Markup Language, which is a markup language for Web pages
</BODY>
</HTML>
Displaying the short quotations
this element applies the quotes on the in-line content, which means that text displayed in the single paragraph.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>SHORT QUOTATION </TITLE>
</HEAD>
<BODY>
There are two types of errors in Java <Q>compile time and run-time errors</Q>
</BODY>
</HTML>
Displaying the long quotation
the text enclosed within the blockquotte element is displayed in a separate paragraph and slightly changes the indentation of the text to the right.
blockquote element placess white space both before and after the quotation.
the blockquote element has optional attribute i.e., cite. the cite attribute is used to specify the source of the quotation in the document.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>LONG QUOTATION </TITLE>
</HEAD>
<BODY>
Artificial intelligence (AI) is the intelligence of machines and the branch of computer science which aims to create it. <BLOCKQUOTE>Textbooks define the field as the study and design of intelligent agents, where an intelligent agent is a system that perceives its environment and takes actions which maximize its chances of success. John McCarthy, who coined the term in 1956, defines it as the science and engineering of making intelligent machines. </BLOCKQUOTE>
</BODY>
</HTML>
Displaying Inserted text
the ins elementis used to provide information about changes or updates made to a document.
the ins element renders the enclosed text to be displayed with an underline.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>The INS Element </TITLE>
</HEAD>
<BODY>
HTML, CSS, <INS>SGML</INS>, XHTML
</BODY>
</HTML>
Displaying Deleted text
the del element is also used to provide information about changes and updates made to a document.
the web browser renders the enclosed text as strike through.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>The DEL Element </TITLE>
</HEAD>
<BODY>
HTML, CSS, SGML, <DEL>XHTML</DEL>
</BODY>
</HTML>
the problem with ins and del is that browsersthat do not support these elements display the enclosed text in a normal font style, giving an incorrect representation of the intended meaning.
Displaying variables and arguments using the VAR element
the variable can be a part of an application or mathematical expression.
the web browser displays the enclosed text in italic style.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>The VAR Element</TITLE>
</HEAD>
<BODY>
The perl <VAR> $input </VAR> argument will hold 10.
</BODY>
</HTML>
Overriding text direction using the bdo element
html uses the bdo element to change the default direction of text.
BDO stands for Bi-Dirctional Override.
BDO element is mainly used to display a variety of languages, such as Arabic and Hebrew, which are read from right to left
<bdo dir="RTL/LTR">smile</bdo>
you can also specify the language in which the web pagewill be displayed by using the language attribute, which is a string from the RFC1766 standerd.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>BDO</TITLE>
</HEAD>
<BODY>
<BDO dir="ltr">This sentence appears left to right.</BDO><br />
<BDO dir="rtl">This sentence appears right to left.</BDO><br />
</BODY>
</HTML>
Using the Mark element
sometimes you need to mark or highlight the importent text.
you can also change the color of the highlighter by using the style attribute of the MARK element.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>The MARK Element </TITLE>
</HEAD>
<BODY>
<P> The MARK element is used to <MARK style="background-color:yellow;"> mark or highlight the text </MARK> in an HTML document. </P>
</BODY>
</HTML>
Creating Keyboard shortcut
you can use accesskey attribute when defining the element to provide the keyboard shortcut to that element or control.
<!DOCTYPE HTML>
<HEAD>
<TITLE>Assigning Keyboard Shortcut</TITLE>
</HEAD>
<BODY>
<H1>Use the Shortcut Keys to access the Content</H1>
<P>Press the <KBD>ALT+W</KBD> keys to navigate the following link:</P>
<A href="keyboard.html" accesskey=w target=>Open keyboard.html file.</A>
<P>Press the <KBD>ALT+Z</KBD> keys to focus on the following text field:</P>
Enter your name: <INPUT type="text" name="name" accesskey=z>
<P>Press the <KBD>ALT+S</KBD> keys to click the Button to submit the form:</P>
<INPUT type="submit" accesskey=s onclick="alert('Form Submitted Successfully.')">
</BODY>
</HTML>
No comments:
Post a Comment