Interactive Elements
Using the DETAILS and SUMMARY Elements
if you want to provide the additional information regarding your article or document,
the details element can be used with the summary element.
<!DOCTYPE HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Using the DETAILS and SUMMARY Elements</H1>
<DETAILS>
<SUMMARY> DETAILS and SUMMARY elements are newly introduced in HTML5.
</SUMMARY>
</DETAILS>
</BODY>
</HTML>
the details and summary elements are not proparly supported by the web browsers
Using the COMMAND Element
the command element is used to execute commands with the help of the command buttons, such as radio button,check box, simple text, on a web page.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using the COMMAND Element</TITLE>
</HEAD>
<BODY>
<H1>Using the COMMAND Element</H1>
<MENU>
<COMMAND onclick="alert('Hello, we are using the COMMAND element')" >Click Here</COMMAND>
</MENU>
</BODY>
</HTML>
the command element is not supported by any of the web browser.
you can also display the radio button on a web page to perform a perticular task.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using the COMMAND Element</TITLE>
</HEAD>
<BODY>
<H1>Using the COMMAND Element</H1>
<MENU>
<LI><COMMAND type="radio" radiogroup="bgcolor" onclick="document.bgColor='lightgreen'" >Light green</COMMAND></LI>
<LI><COMMAND type="radio" radiogroup="bgcolor" onclick="document.bgColor='blue'" >Blue</COMMAND></LI>
<LI><COMMAND type="radio" radiogroup="bgcolor" onclick="document.bgColor='yellow'" >Yellow</COMMAND></LI>
</MENU>
</BODY>
</HTML>
Using the MENU Element
the menu element defines a list or menu of commands on a web page .
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using the MENU Element</TITLE>
</HEAD>
<BODY>
<H1>Using the MENU Element</H1>
<MENU type="toolbar">
<LI>
<MENU label="New">
<BUTTON type="button" >Open</BUTTON>
<BUTTON type="button" >Save</BUTTON>
</MENU>
</LI>
<LI>
<MENU label="Edit">
<BUTTON type="button" >Undo</BUTTON>
<BUTTON type="button" >Redo</BUTTON>
</MENU>
</LI>
</MENU>
</BODY>
</HTML>
Usinng the KBD Element
The KBD element is used to display the keyboard text on a web page.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using the COMMAND Element</TITLE>
</HEAD>
<BODY>
<H1>Using the KBD Element</H1>
<P>To open the Task Manager, press <KBD>CTRL</KBD> + <KBD>ALT</KBD> + <KBD>DELETE</KBD>.</P>
</BODY>
</HTML>
Using the TIME Element
You can specify the date and time in a web page by using the time element.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using the TIME Element</TITLE>
</HEAD>
<BODY>
<H1>Using the TIME Element</H1>
<P>This example is written on <TIME datetime=”2010-12-10”>Friday</TIME> .</P>
<P>The shop close at <TIME>18:30</TIME>.</P>
<P>We reached the office at <TIME datetime="20010-06-12T09:00-07:00">9am last Monday</TIME>.</P>
</BODY>
</HTML>
you can also use the TIME element to display the publishing date of an article by using the pubdate attribute.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using the TIME Element</TITLE>
</HEAD>
<BODY>
<ARTICLE>
<H1>First Article</H1>
<FOOTER>Published <TIME pubdate>2010-12-30</TIME>.</FOOTER>
<P>This is a first example of using the pubdate attribute</P>
</ARTICLE>
<ARTICLE>
<H1>Second Article</H1>
<FOOTER>Published <TIME pubdate datetime="2010-12-30">today</TIME>.</FOOTER>
<P>This is a second example of using the pubdate attribute</P>
</ARTICLE>
</BODY>
</HTML>
Using the DETAILS and SUMMARY Elements
if you want to provide the additional information regarding your article or document,
the details element can be used with the summary element.
<!DOCTYPE HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Using the DETAILS and SUMMARY Elements</H1>
<DETAILS>
<SUMMARY> DETAILS and SUMMARY elements are newly introduced in HTML5.
</SUMMARY>
</DETAILS>
</BODY>
</HTML>
the details and summary elements are not proparly supported by the web browsers
Using the COMMAND Element
the command element is used to execute commands with the help of the command buttons, such as radio button,check box, simple text, on a web page.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using the COMMAND Element</TITLE>
</HEAD>
<BODY>
<H1>Using the COMMAND Element</H1>
<MENU>
<COMMAND onclick="alert('Hello, we are using the COMMAND element')" >Click Here</COMMAND>
</MENU>
</BODY>
</HTML>
the command element is not supported by any of the web browser.
you can also display the radio button on a web page to perform a perticular task.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using the COMMAND Element</TITLE>
</HEAD>
<BODY>
<H1>Using the COMMAND Element</H1>
<MENU>
<LI><COMMAND type="radio" radiogroup="bgcolor" onclick="document.bgColor='lightgreen'" >Light green</COMMAND></LI>
<LI><COMMAND type="radio" radiogroup="bgcolor" onclick="document.bgColor='blue'" >Blue</COMMAND></LI>
<LI><COMMAND type="radio" radiogroup="bgcolor" onclick="document.bgColor='yellow'" >Yellow</COMMAND></LI>
</MENU>
</BODY>
</HTML>
Using the MENU Element
the menu element defines a list or menu of commands on a web page .
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using the MENU Element</TITLE>
</HEAD>
<BODY>
<H1>Using the MENU Element</H1>
<MENU type="toolbar">
<LI>
<MENU label="New">
<BUTTON type="button" >Open</BUTTON>
<BUTTON type="button" >Save</BUTTON>
</MENU>
</LI>
<LI>
<MENU label="Edit">
<BUTTON type="button" >Undo</BUTTON>
<BUTTON type="button" >Redo</BUTTON>
</MENU>
</LI>
</MENU>
</BODY>
</HTML>
Usinng the KBD Element
The KBD element is used to display the keyboard text on a web page.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using the COMMAND Element</TITLE>
</HEAD>
<BODY>
<H1>Using the KBD Element</H1>
<P>To open the Task Manager, press <KBD>CTRL</KBD> + <KBD>ALT</KBD> + <KBD>DELETE</KBD>.</P>
</BODY>
</HTML>
Using the TIME Element
You can specify the date and time in a web page by using the time element.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using the TIME Element</TITLE>
</HEAD>
<BODY>
<H1>Using the TIME Element</H1>
<P>This example is written on <TIME datetime=”2010-12-10”>Friday</TIME> .</P>
<P>The shop close at <TIME>18:30</TIME>.</P>
<P>We reached the office at <TIME datetime="20010-06-12T09:00-07:00">9am last Monday</TIME>.</P>
</BODY>
</HTML>
you can also use the TIME element to display the publishing date of an article by using the pubdate attribute.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Using the TIME Element</TITLE>
</HEAD>
<BODY>
<ARTICLE>
<H1>First Article</H1>
<FOOTER>Published <TIME pubdate>2010-12-30</TIME>.</FOOTER>
<P>This is a first example of using the pubdate attribute</P>
</ARTICLE>
<ARTICLE>
<H1>Second Article</H1>
<FOOTER>Published <TIME pubdate datetime="2010-12-30">today</TIME>.</FOOTER>
<P>This is a second example of using the pubdate attribute</P>
</ARTICLE>
</BODY>
</HTML>
No comments:
Post a Comment