Explore model answers categorized by subjects like Java, HTML, DBMS, and more.
Using CSS with JavaScript we can change the style of HTML elements.
Like
document.getElementById(id).style.property=new style
HTML DOM is an Document Object Model for HTML. HTML DOM is an standard set of objects and way to access and manipulate HTML document.
Using HTML DOM we can view whole HTML document as tree structure.Using this DOM tree we can access and manipulate all elements with their text and attributes.
Some important points about HTML DOM are given below:
- It is an standard object model and standard programming interface for HTML.
- HTML DOM is an platform and language dependent.
- It is an W3C standard to get,change,add or delete HTML element.
Definition of DHTML according to W3c(World Wide Web Consortium) is:
Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated.
DHTML stands for Dynamic HTML.DHTML is not an language. Using DHTML we can use DOM, CSS , JavaScript and HTML together.
We use DHTML to make the web pages dynamic and interactive.
Some technologies that we used in DHTMl are given below:
- JavaScript
- HTML DOM
- HTML EVENT
- CSS
JavaScript: It is an standard of scripting for HTML. Using JavaScript DHTML can control,access and manipulate HTML element.
HTML DOM: It is an Document Object Model which is an W3C Standard for HTML.Using HTML DOM is used to define standard to set of objects and to access and manipulate them for HTML.Using HTML DOM, DHTML can access and manipulate HTML elements.
HTML Events: It is an part of HTML DOM and used to handle HTML elements.We use DHTML with HTML Events to make web pages those perform action when event occour.
CSS: It is an W3C standard style and layout model made only for HTML. DHTML use JavaScript and DOM to change position and style of HTML elements.
Using JavaScript we can made dynamic HTML content.
We can use document.write() to show dynamic content on your web page.Below I have given you HTML page which made dynamic after using JavaScript.This example will show current date.
Example:<html>
<body>
<script type=\"text/javascript\">
document.write(Date());
</script>
</body>
</html>
In HTML4, We use them to dynamically change the inner content and attributes of HTML elements.
I have you example which shows you how to change the content of HTML element.
document.getElementById(id).innerHTML=new HTML
We can change the attribute of an HTML element like that,
document.getElementById(id).attribute=new value
In HTML4, We use them to dynamically change the inner content and attributes of HTML elements. I have you example which shows you how to change the content of HTML element.
document.getElementById(id).innerHTML=new HTML We can change the attribute of an HTML element like that,document.getElementById(id).attribute=new value
In HTML4, we use HTML event to trigger the events than they perform their action.We can do like that when we click on event it will JavaScript.
Example:
onclick=JavaScript
Here,I have given you example to change an HTML element using HTML DOM.<html>
<body>
<h1 id=\"header\">This is your Old Header</h1><script type=\"text/javascript\">
document.getElementById(\"header\").innerHTML=\"This is your New Header\";
</script>
</body>
</html>
Output: This is your New Header
In the above example it will store header with an id=\"header\". And get the element with id=\"header\" by using DOM.We used JavaScript to change the content of HTML.
I have given you example to change HTML Attribute by using HTML DOM.
Example:<html>
<body>
<img id=\"image\" src=\"oldimage.gif\">
<script type=\"text/javascript\">
document.getElementById(\"image\").src=\"newimage.jpg\";
</script>
</body>
</html>
In the above example we load an image on HTML document by using id=\"image\".Using DOM we get the element with id=\"image\".JavaScript that we used in example to changes the src attribute from oldimage.gif to newimage.jpg
Event is use to trigger actions in the browser. When client click on the element, associated action will started.Like: an JavaScript will started when client click on element.
Using Event Handler we can do like that,When an event occur it will execute code associated with that element.
Example:
In this example header will changes when client clicks.<h1 onclick=\"this.innerHTML=\'abc!\'\">Click on this text</h1>
We can add a script in the head section and then we call the function from the event handler.
Example:<html>
<head>
<script type=\"text/javascript\">
function changetext(id)
{
id.innerHTML=\"abc!\";
}
</script>
</head>
<body>
<h1 onclick=\"changetext(this)\">Click on this text</h1>
</body>
</html>
Some main difference between DHTML(Dynamic HTML) and HTML(Hyper Text Markup Language)are given below.
- Using DHTML we can use JavaScript and style sheets in our HTML page.
- Using DHTML we can insert small animations and dynamic menus into our HTML page.
- If use want that your web page display your DHTML effects(object or word can highlighted, larger,a different color etc) than you have to save your web page with .dhtml extension except .html or .htm .
font size is an attribute that we used in font tag.Where as font-size is an style property.
<font size=\"5\"> use in font tag.
p{font-size:\"5\"} use in CSS.
Some most important features of DHTML are given below:
Using DHTML we can change the tags and their properties.
It is use for Real-time positioning.
It is used to generate dynamic fonts (Netscape Communicator).
Used for Data binding (Internet Explorer).
I have display the list of some tags that we used in HTML table.These tags are:
<table> This is started tag of table.All other table tags works inside this tag.
<th> This is used to write header on table.
<tr> This is used to create row on table.
<td> This is used to create table cells.
<caption>This is specifies the table caption.
<colgroup>Specifies the group of columns in table.
<col> Using then we can set the attribute value
for one or more columns in table.
<thead> This is used to set table head.
<tbody> This is used to set table body.
<tfoot> This is used to set table border.
Using HTML Frames we can show more than one HTML document on the same browser.Where as each HTML document is called Frame. We use Frames using <frameset> tag.
It is used to divide windows into frames. Using frame tag we put HTML document into the each frame.
Example:<frameset cols=\"25%,75%\">
<frame src=\"frame_first.htm\">
<frame src=\"frame_second.htm\">
</frameset>
25% and 75% specifies the width of the page.Above frame told that frame_first aquire the 25% area on the web browser and frame_second aquire the 75% area on the same same web browser.
Yes,HTML provide us facility to write comments on HTML file.Comments that we write on HTML file are ignored by the browser so it will not display on browser.Syntax:Example:
<!-- Here write your comment -->
<html>
<body>
<!--Which you here not will displayed on browser-->
<p>R4R Welcomes You!</p>
</body>
</html>
Output:
R4R Welcomes You!
HTML stands for Hyper Text Markup Language.It is a markup language which is use to develop web pages. Using them we can describe our document into the form of text based information.For achieving that goals it has many tags like title,head,paragraph, table etc.
In HTML we write tags surrounded with angle brackets.We can you some scripting language like JavaScript to display HTML doc in more attractive way.
Some main features of HTML are given below:
1.It is markup language.
2.It has provided pre-defined tags.
3.We save HTML file by using one of two extensions .htm or .html.
4.It uses markup tags to display on web page
HTML tags decided how HTML file is look like on web page.I have given you some basic information about HTML tags.
1.In HTML,every keyword should be surrounded with open and closed with angled brackets.
Example:<html>,<body>,<title>,<head> etc.
2.HTML tags are not case sensitive means that suppose if we open <html> tags than we can closed this tag with <html>.
3.When we open an HTML tag it should we have to closed tag.Like: <a>....</a>
4.In the above point tag (<a>) is called the open tag.where as tag</a> is called the end tag.
Example:<head>
<body>
.....
.....
</body>
</head>
I have shown you some basic HTML tags with their example:
1.Heading<h1...h6>:Range of HTML headings is from h1 to h6.When we go h1 to h6 its headings become larger and bold.
Example:<h1>Write HTML heading between those tags</h1>
<h2>Write HTML heading between those tags</h2>
........
........
<h6>Write HTML heading between those tags</h6>
2.Paragraph<p>...</p>:We write paragraph in HTML by using <p>.....</p> tag.
Example:<p>Write here a paragraph</p>
3.Link Using this we can link our HTML file with some other files.
Example:<a href=\"http://www.R4R.co.in\"></a>
4.Image It is used to describe the image in HTML.
Example:<img src=\"welcome.gif\" width=\"200\" height=\"75\" />
Basically HTML element are those who define the structure of HTML document.It is used to arrange the content of HTML is an appropriate manner. Element may be of headings, links, paragraphs and structures etc.
When you want to create any HTML element than keep these points in mind.
1.Element should open with the start tag.
2.After that can include attributes with their values.Like: name=\"Abhi\"
3.Than you write content.Like:This is our first HTML page.
4.and close with end tag.(but is optional when you want to create an empty element than their is no need to close your open tag)In HTML your content may be empty.
Example:<p name=\"Abhi\">My first HTML page</p>
Open Attribute(name) Content End
When HTML element does not have any content.Than those element are called as Empty element.Empty element does not have any end tag.
Example:
<br /> (It is an empty element which is used to break line.)
Because it is an empty element than their is no need to close them.
To use empty element is only on HTML.Because in XHTML,XML and new versions of HTML does have provided this types of element.
In HTML we can create ordered,unordered and definition list.
Ordered List: Ordered list define as list of items and they are fully numbered.Our ordered list start with
Example:
<ol>
<li>Abhi</li>
<li> Vivek</li><li>
<li> John</li>
</ol>
Unordered list define as list of items and they are write with small black circles.Our ordered list start with
Example:
<ul>
<li>Abhi</li>
<li>Vivek</li>
<li>John</li>
</ul>
Definition List: It is not only a list of items. In create list of item with their description. Description list start with <ud> tag and end with </ud></li>
I have given you syntax how to set images on HTML document.Syntax:
<html>
<body>
<p>
An image:<img src=\"r4rlogo.gif\"width=\"140\" height=\"40\">
</p>
<p>
Using this link you can see the logo of r4r.</p>
</body>
</html>
We use src Attribute and Alt Attribute with the image tag(<img>). Image tag is an empty tag.So, their is no need to close img tag. we use src(stands for source) for load the image on the HTML page.Syntax: <img src=\"write here the address or location of image\" />
We use Alt Attribute to define the image which you loaded with src AttributeSyntax:<img src=\"image.gif\" alt=\"Description of image\"/>Example:<img src=\"logo.gif\" alt=\"R4R logo\"/>
Some image tags are given below:
<map> It is used to define image map.
<img> It is used to define an image.
<area>Using this we can create the area.Those area we want show as click-able.
We use <table> tag to create the table in HTML. After creating an table we use <tr> tag to create the rows.And use <td> to create data cell on each row.These cell can store images,text,tables,list etc.
Basic syntax to create an Table are given below:<table border=\"1\">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
</tr>
</table>
Any thing that we write b/w <th>.....</th> tag are display as table heading.
Example<table border=\"1\">
<tr><th>Heading of column 1</th>
<th>Heading of column 2</th>
<th>Heading of column 3</th>
</tr>
<tr><td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
</tr>
</table>
Than table will generated on web browser looks like,Heading of column 1 Heading of column 2row 1, cell 1
row 1, cell 2, cell 3.
We can create an empty cell with in table like that:-<table border=\"1\">
<tr><td>row 1, cell 1</td>
<td>row 1, cell 2</td></tr>
<tr><td>row 2, cell 1</td><td></td></tr>
<tr><td></td><td>row 3, cell 2</td></tr>
</table>
Now, than our HTML table looks like,row 1, cell 1 row 1, cell 2row 2, cell 1 row 3, cell 2 .If your does not show the border line around empty cell than you can write (called space) between the tags of empty cells.
Like:<td> </td>
Using the HTML link we can addressed the page, document or file on the web browser.I have given you example how to link the HTML page.Example:
<html>
<body>
<p>
R4R Welcomes You!
You are on the right place.Definitely your queries will gone when you proper visit that site.
</p>
</body>
</html>
save this page with welcome.htm<html>
<body>
<p>
<a href=\"welcome.htm\">Home</a>
</p>
</body>
</html>
Using Hyperlink we can address the page or file on the web browser.These are may be of image, sound or movie file etc.
Using Anchors we can define the hyperlink destination inside a document.We use <a> tag to define the hyperlinks and anchors.
href Attribute is used to address the page and document on the web page.Syntax:
<a href=\"http://www.r4r.co.in/\">see R4R</a>
target Attributes are used to told about that where the document will open those linked.<a href=\"http://www.r4r.co.in/\" target=\"_blank\">see R4R</a>
name Attribute is used to set the anchor name in the HTMl document.
We named Anchor like that<a name=\"label\">Write content here</a>
We can linked the named anchor like that<a href=\"#label\">Write content here</a>
I have given you some Attribute with their description.These are.
style :This attribute use to style inline,rules to an element.Syntax:<a style=\"value>.......</a>
bgcolor:This is use to set background color.Syntax:<a bgcolor=\"value\">....</a>
we use color values in Hexadecimal code.
href :This is used for the linking.Syntax:<a href=\"home.html\">.......</a>
size:This is used to set the font size.Syntax:<a size=\"value\">.......</a>
title:Those I wrote on this display on tooltip.Syntax:<a title=\"value\">.......</a>
We use Style Attribute in HTML how the text look like in HTML.Using Style we can implement the CSS in HTML.
I have given you some examples which show use of Style in HTML.
1.style=\"background-color:red\"
2.style=\"font-size:15px\"
3.style=\"font-family:verdana\"
4.style=\"text-align:left\"Example:
<html>
<body style=\"background-color:yellow;\">
<h1>Style Attribue</h1>
<p style=\"font-family:verdana;color:green\">
This is my first HTML page where I use style attribute</p>
</body>
</html>
Basically Depreciated Tags and Attributes are those that are only used in HTML.Means they are old Tags and Attributes that are not supported in the new versions of HTML,Like:XHTML.Because those are not used in future than we should have to avoid the use of them.
I have given you list of these Depreciated Tags and Attributes are given below:
List of Deprecated Attributes are:
color This is used to set the text color.
align This is used for Horizontal alignment of the table and frames with the value center,left and right.
bgcolor This is used to set background color.
List of Deprecated Tags are:
<u> This is used to underlined the text.
<font> This is used to set HTML font.
<strikeout>This is used to strikeout the text.
<center> This is used to centered the content.
Using Attributes we can give us more information about HTML elements.Many times in HTML we use Attributes with their associated value. For assigning the value to attributes we use\'=\'operator.
In an one HTML element can have many attributes.We use Attributes with in start tag of HTML.
Below I have given you some attributes with their values.
style=\"color:red;\"
border=\"1\"
href=\"http://www.r4r.co.in\"
title=\"This is our first HTML page.\"
I have given a example.How to use above three attributes together.Example:
<p border=\"1\" href=\"http://www.r4r.co.in\" style=\"color:red;\" title = \"This is our first HTML page.\"></p>
In HTML we use <br /> to break the line without started any new paragraph.
Syntax:
<br />
In HTML <br /> has no end tag.
Example:<p>Hello<br />client<br />R4R Welcomes You!</p>
Output:
Hello
client
R4R Welcomes You!
For creating horizontal line we use <hr /> in HTML.
Syntax:
<hr />Example:
<p>This is upper level</p>
<hr />
<p>This is middle level</p>
<hr />
<p>This is bottom level</p>
Both <br /> and <hr /> called as empty tags. Because their is no end tag for them.
Using Text formatting we can change the over all view of the sentence.like that:
Example:
<b> This is bold text
<i> This is a italic text
I have given you some basic formatted tags.
<b> Used to create bold text
<big> Used to create big text
<em> Used to emphasized text
<i> Used to made italic text
<small> Used to create small text
<strong> Used to made strong text
<sub> Used to subscripted text
<sup> Used to superscripted text
<ins> Used to inserted text
<del> Used to deleted text
<s> Deprecated. Use <del> instead
<strike> Deprecated. Use <del> instead
<u> Deprecated. Use styles instead
HTML provide some output tags that are given below:
<code> Used for computer code text
<kbd> Used for keyboard text
<samp> Used for sample computer code
<tt> Used for teletype text
<var> Describe a variable
<pre> Describe preformed text
<listing> Deprecated. Use <pre> instead
<plaintext> Deprecated. Use <pre> instead
<xmp> Deprecated. Use <pre> instead
In HTML we create nested element mostly.
Example:<html>
<body>
<title>This is my first HTML page.</title>
<p>HTML is used to create static pages.</p>
</body>
</html>
In the above example we have given you four HTML element.First HTML element start with <html> and end with</html>. Second HTML element start with <body> and end with</body>.Third HTML element start with <title> and end with </title> Fourth HTML element start with <p> and end with </p>.
No, HTML is not a case sensitive language.In this we can use an uppercase HTML tags or lowercase HTML tag both.Means in the case of HTML both tags <title> and <TITLE> are same.But we have try to use lowercase tags.Because new versions of HTML support only lowercase tags.Like: HTML 4
WeC is stands for a World Wide Web Consortium. The international body that governs Internet standards.
Using Forms in HTML we can select client input in different manner. In form is use to contain form elements.Using Form elements we can allow the user to enter information (like: text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.
We start form by using<form>
<input type=\"text\" name=\"username\" value=\"2\" />
<input type=\"hidden\" name=\"id\" value=\"3\" /> tag.
<input type=\"hidden\" name=\"fname\" value=\"1\" />
<input type=\"button\" name=\"OK\" value=\"OK\" />
</form>
We use above in the <input> tag of the form.
Text Field: We used Text fields when we want that user entered like letters, numbers etc. in a form.Example:
<form>
<input type=\"hidden\" name=\"fname\" value=\"1\" />
User name: <input type=\"text\" name=\"username\">
Password: <input type=\"password\" name=\"password\">
</form>
Radio Buttons: We use Radio Buttons when we want that user select one of a limited number of choices.Example:
<form>
<input type=\"radio\" name=\"Gender\" value=\"male\"> Male
<input type=\"radio\" name=\"Gender\" value=\"female\"> Female
</form>
Checkboxes: We use Checkboxes When we want that user can select one or more options of a limited number of choices.
Example:<form>
I have a computer:<input type=\"checkbox\" name=\"electronicdevice\" value=\"Computer\">
I have a TV: <input type=\"checkbox\" name=\"electronicdevice\" value=\"TV\">
I have a AC: <input type=\"checkbox\" name=\"electronicdevice\" value=\"AC\">
</form>
Using Submit Button we can sends the form to the server and Action Attribute is specified that which file we send.<form name=\"input\" action=\"submit_form.php\" method=\"get\">
<input type=\"hidden\" name=\"id\" value=\"1\" />
Formname: <input type=\"text\" name=\"username\">
<input type=\"submit\" value=\"Submit\">
</form>
When we click the sumbit button web page than the submit_form is send to the server.
We use scripts on HTML page for making HTML page Dynamic. To use scripts on HTML page we use <script> tag.
Example:output:
<html>
<head>
</head>
<body>
<script type=\"text/javascript\">
document.write(\"R4R Welcomes You!\")
</script>
</body>
</html>
R4R Welcomes You!
Content that we write b/w the <blink> tag will blink on HTML page.Syntax:
<blink>text want to blink</blink>
There are many differences b/w width=\"200\" and width=\"200%\".
I have given you main difference.If you want create a table set width=\"200\". Means that width of table is 200 which is fixed.But
When we write width=\"200%\" then 200% table will display in its full view and can changed according the resolution and browser.
I have given two reasons of use Semantic HTML.
1.Always avoid the use of markup that present you HTML document.Like: element, attribute etc.
2.Try to use available markup to differentiate the meanings of phrases and structure in the document.Example:
<cite class=\"booktitle\">The Grapes of Wrath</cite>
Above,the <cite> element is used because it most closely matches the meaning of this phrase in the text.
We can display an picture in background of HTML page using that code.Syntax:
<body style=\"background-image:url(image path)\">
Body in HTML specifies the all contents of the document.Means that it contain the text,images, colors,graphics etc.
We use SPAN by using <SPAN> tag in HTML.Syntax:<SPAN>............</SPAN>
Used to highlight any color text, for adding colored text, for adding background image to text. SPAN not a cause of line break. It delimits text and using them we can use style to the \'elemental\' region without any break in Text.Example:
<p>
<span style=\"color:#FF0000;\">
In this page we use span.
</span>
</p>
Head is placed before the body in the HTML.It is use to display only the general information or unordered collection to information about the HTML document.
Many times we have require index.htm / document because it is a standard for the host-server to look for the document and deploy it.Default document to be displayed in the web.
I have given you how cell padding is differ from cell spacing given below:
Cell Padding: Cell Padding in HTML: is used to define the how much space need b/n cell content and cell edges.
Syntax:
< table width=\"200\" border=\"1\" cellpadding=\"3\">
means that it takes 3 pixels of padding inside the each cell.
Cell Spacing: It is also used to format the table.but it differ than cell padding because in cell padding we can set an extra space to separate the cell content with cell edges.Where as we use cell spacing to set the space b/w the cells.Syntax:
< table width=\"200\" border=\"1\" cellspacing=\"10\">
We can use cell padding and cell spacing together like that,< table width=\"200\" border=\"1\" cellpadding=\"3\" cellspacing =\"10\">
DOCTYPE is stands for Document Type Declaration.In an HTML every HTML document is started with DOCTYPE declaration.It may be differ for different versions of HTML.DOCTYPE is used only bySGML tools like as HTML validator.
Example of Document Type Declaration in HTML 4 are,<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">
Yes,Attributes and their values are case-sensitive. Both should be write on lowercase letters.In new versions of HTML W3C(World Wide Web Consortium) strongly said to use lowercase letters.Like: HTML 4,XHTML etc are use lowercase attributes with values should be write on lowercase letters.
XHTML stands for eXtensible HyperText Markup Language.It is more formal and more Hard and fast version of HTML.We can define XHTML with XML dtd which make easy to handle XHTML.
Some information about XHTML are given below:
1.Target of XHTML is to replace HTML.
2.We can say that HTML4.01 and XHTML are almost same.
3.It is an more Hard and Fast version of HTML.
4.XHTML has a W3C recommendation.
5.We can say that XHTML is an Transition/combination of HTML and XML.
6.It has got official recommendation from W3C on 26th Jan 2000.
7.Using XHTML we can easily validate our document.
We use XHTML because of some important reasons those are given below:
1.XHTML can run on all new browsers.
2.It is an combination of HTML and XML so,it support many important features of them.
3.XHTML also give us facility to write well formed document.
4.XHTML has facility to extend.We perform this task with use of extra modules to do things without pages.Where as this facility not provided by HTML.
I have given you a HTML example in that example can on browsers successfully but it is not support all rules of HTML.<html>
<head>
<title>This is wrong HTML code</title>
<body>
<h1>Wrong HTML code
</body>
In above example both html and head tags are not close.According to HTML rule it should not run.But it run successfully.So, It is an example of wrong html code.
XHTML is an more formal,Hard and Fast version of HTML.Some main difference b/w XHTML and HTML are given below:
1.In XHTML element should be properly nested.
2.In XHTML when we started an element it must have closed tag.
3.XHTML support only lowercase element.
4.In an XHTML document one root element is necessary.
But we can say that their is no much difference b/w HTML4.01 and XHTML.
In HTML we can improperly nested some element each other like that,
<b><i>Gives text as bold and italic</b></i>
Where as In XHTML, all elements must be properly nested within each other like that,
<b><i>Gives text as bold and italic</i></b>
When you create nested lists keep one thing in mind list must be within <li> and </li> tags.<ul>
<li>Coca cola</li>
<li>Pepsi
<ul>
<li>black</li>
<li>blue</li>
</ul>
</li>
</ul>
XHTML said an Empty and Non-Empty Elements must be closed.
Example shows the case of Non-Empty Element.<p>Write here paragraph</p>
<p>>Write here another paragraph</p>
Example shows the case of Empty Element.
1.Use to break <br />
2.Use to horizontal rule <hr />
3.<img src=\"r4r.gif\" alt=\"r4r logo\" />
In XHTML Your Element must be Written in Lower Case.
Example:<body>
<p>Here write a paragraph</p>
</body>
In XHTML all elements should be nested in the <html> root element.Elements inside the <html> root element can have their child or elements an so on.
I have given you basic structure of XHTML document.<html>
<head>Write here heading</head>
<body>Write here some code</body>
</html>
I have given you rules keep in mind when you want to create an XHTML document.
Rule1:Write attribute names only in lower case letters.
Rule2:Assigned attribute values must be quoted.
Rule3:Attribute minimization must be prohibited.
Rule4:In XHTML name attribute is replaced by id attribute.
Rule5:In XHTML DTD must set mandatory elements.
Example of Rule1:Write attribute names only in lower case letters.<table width=\"200%\">
Example of Rule2:Assigned attribute values must be quoted.<table width=\"100%\">
Example of Rule3:Attribute minimization must be prohibited.<input checked=\"checked\" />
<input readonly=\"readonly\" />
<input disabled=\"disabled\" />
<option selected=\"selected\" />
<frame noresize=\"noresize\" />
Example of Rule4:In XHTML id attribute is replaced by name attribute.
HTML 4.01 defines a name attribute for the elements a, applet, frame, iframe, img, and map.<img src=\"r4r.gif\" id=\"r4r\" />
I have add a extra space before \'/\' to make our XHTML document with current browsers.
Using lang attribute we can specify the language of content.<div lang=\"no\" xml:lang=\"no\">Arial</div>
Example of Rule5:In XHTML DTD must set mandatory elements.
DOCTYPE declaration is essential for each XHTML document. The html, head and body elements must be present.Write title element inside the head.<!DOCTYPE Doctype write here>DOCTYPE declaration is not an XHTML element.So, Their is no need to closed DOCTYPE declaration.
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<title>Write here title</title>
</head>
<body>
</body>
</html>
Before I given use of DTD. I want to remember what is DTD.
DTD: Its stand for Document Type Declaration. It specify the syntax of web page in SGML. We use DTD on SGML applications like: HTML,XML etc.In XHTML we can say that DTD is an computer readable language which is used to allow syntax of XHTML.
In XHTML we use These three DTD\'s,
1.STRICT
2.TRANSITIONAL
3.FRAMESET
1.Strict DTD: We use strict DOCTYPE if we want really clean markup, free of presentational clutter.And also use together with CSS.<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
2.Transitional DTD: We use transitional DOCTYPE if we want to still use HTML\'s presentational features.<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
3.Frameset DTD:We use frameset DOCTYPE if we want to use HTML Frames to split our web page into two or more frames.<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Frameset//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd\">
To print \"Hello World!\" you have to write following code.<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xml:lang=\"en\" lang=\"en\" xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<title>Hello World!</title>
</head>
<body>
<p>This is first XHTML coded web page.</p>
</body>
</html>
</p>
I have given you solution of how to use img and hr tag in XHTML.Now,the solution for given problem is that,Add only hte forward slash in element.<img src=\"r4r.gif\" />
Write text <hr />
Keep in mind when use forward slash you should add an extra slash before forward slash.
Using modularity it easier to deploy new developments. An application may wish to support only a subset of XHTML. For example a mobile phone, an Internet TV or even a Web-aware cooker may only require a subset of XHTML.
We can Validate our XHTML document by using W3C\'s validator.
Here, I given you example which is validate our XHTML document with DTD.
Example In which I validate our XHTML document using strict DTD.<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html>
<head>
<title>title of the document</title>
</head>
<body>
<p>Here write a paragraph</p>
</body>
</html>
Some main advantage of XHTML are given below:
1.In XHTML we can use mixed namespaces.
2.work on XHTML is much simple than HTML.
3.When your document is not well formed than it will immediately informed to you due to an error from your UA in XHTML.
If we want to convert HTML pages into XHTML than you have to insert some lines at the starting of document.
<?xml version=\"1.0\" encoding=\"UTF-8\"?>
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\">
Using example I will show you in XHTML every attribute must have a value.
Example in HTML:<ol compact>
<input type=\"radio\" name=\"title\" value=\"decline\" checked>decline</input>
Below, I write a same example in XHTML.<ol compact=\"compact\" >
<input type=\"radio\" name=\"title\" value=\"decline\" checked=\"checked\">decline</input>
In this we assign value compact, checked to element compact and checked.
In XHTML tags may not be overlapped.
Example:<em> emphasized text and <b>bold </em>text</b>
We can use above example in XHTML like that,<em>emphasized text </em> is <b>bold text</b>
Yes, In XHTML we can insert only certain tags inside other tags.
Example:In the above example we insert the paragraph between <li> tag.It\'s wrong.
<ol>
Some my favorite flowers are:
<li>lotus</li>
<li>lilly</li>
<li>sunflower</li>
and my most favorite flower is:
<li>red rose</li>
</ol>
In case of XHTML our example looks like that, becomes
<p>Some my favorite flowers are:</p>
<ol>
<li>lotus</li>
<li>lilly</li>
<li>sunflower</li>
<li>red rose</li>
</ol>