xhtml Flashcards by Paul Thompson

You are asked to convert an existing HTML web page into XHTML. Check the following code snippet and comment on what needs to be changed.
‹b›‹i›Sub-sub-section heading‹/b›‹/i›

The code is invalid for XHTML because the nesting of the opening and closing tags is incorrect. The correct XHTML would be: ‹b›‹i›Sub-sub-section heading‹/i›‹/b›

How well did you know this?

Not at all

Perfectly

A common problem in HTML to XHTML is proper coding of ordered lists. Check the syntax of the following XHTML code snippet and comment on its validity as HTML and XHTML.
‹ol›
    ‹li›
        ‹ol›
            ‹li›‹/li›
        ‹/ol›
    ‹li›‹/li›
‹/ol›

This code would parse and display as HTML, but is invalid XHTML because the first ‹li› does not have a matching closing ‹/li› tag.

How well did you know this?

Not at all

Perfectly

XHTML was designed to solve some problems with HTML, and XHTML code needs to be well-formed. What does this mean?

Modern HTML and SGML browsers often overlook mistakes in HTML code. However, this creates problems in code maintainability. Well-formed XHTML code requires that an XML parser be able to parse HTML code, thus all tags must be properly structured, coded, and nested in XHTML.

How well did you know this?

Not at all

Perfectly

The following code runs well on an HTML browser, but gives an error on an XHTML-compliant browser. How would you fix this?
‹img src=”interview.gif” alt=”Interview”›

By adding a self-closing tag: ‹img src=”interview.gif” alt=”Interview” /›

How well did you know this?

Not at all

Perfectly

A web page has been recently modified to XHTML but shows errors when validated by the W3C Validator. The lines of code reported are shown below. Re-write them as necessary to parse as valid XHTML.
Lorem Ipsum‹hr›
Duis vel augue felis, vitae elementum nibh.‹br› Etiam at dolor dolor.‹br›

Lorem Ipsum‹hr /›

Duis vel augue felis, vitae elementum nibh.‹br /› Etiam at dolor dolor.‹br /›

How well did you know this?

Not at all

Perfectly

Explain why the following XHTML code snippet will display correctly in a web browser but give errors in an XHTML parser.
‹BODY›
Other XHTML elements here
‹/BODY›

The code uses tag names in uppercase, which is invalid XHTML syntax. The correct way to write this would be
‹body›
Other XHTML elements here
‹/body›

How well did you know this?

Not at all

Perfectly

The following code snippet is in HTML and you are asked to re-write it in XHTML. Before re-writing it, comment on the difference in syntax between HTML and XHTML for this snippet.
‹h1›Etiam at dolor dolor.‹/h1›
‹p›Nam ante augue, posuere nec imperdiet vitae, volutpat at arcu.‹/P›
‹p›Duis vel augue felis, vitae elementum nibh.‹/p›

Things to check are proper nesting of the tags, and also that they are in the proper case. In this case, one element is not. The correct XHTML is
‹h1›Etiam at dolor dolor.‹/h1›
‹p›Nam ante augue, posuere nec imperdiet vitae, volutpat at arcu.‹/p› ‹p›Duis vel augue felis, vitae elementum nibh.‹/p›

How well did you know this?

Not at all

Perfectly

An HTML page is first converted into XHTML and then opened in an XML parser. The code for the page is given below. Comment on possible problems of opening the page in the parser.
‹!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”›
‹html›
‹head›‹title›Posuere nec imperdiet vitae‹/title›‹/head›
‹body›
‹h1›‹i›Posuere nec imperdiet vitae‹/h1›
‹p›Duis vel augue ‹i›felis‹/i›, at ‹b›dolor dolor, vitae elementum nibh‹/p›
‹/body›
‹/html›

XHTML is valid XML and will parse on an XML parser if it is correctly coded. The main problem that will be encountered is improper nesting of tags. For instance, the first ‹i› is not closed. Also, the ‹b› in the paragraph is not closed also. Once these are fixed, the document will show up as an XML tree on the parser.

How well did you know this?

Not at all

Perfectly

The W3C specification of XHTML contains sets of modules that allow interoperability on mobile devices. Comment on whether the following XHTML code for a list module is valid.
‹dl›
‹di›
‹dt›Life‹/dt›
‹dd›Currently, scientists do not have a ‹em›precise‹/em› definition of life‹/dd›
‹/di›
‹/dl›

This is valid XHTML because all tags are in proper case and properly nested. The ‹dl› tag stands for definition lists

How well did you know this?

Not at all

Perfectly

XHTML Basic is a subset of XHTML for mobile devices. Will the following code snippet be supported on a mobile browser that runs XHTML Basic?
Greetings, please click ‹a href=”somepage.html”›here to ‹/a›proceed

Yes, because ‹a› is part of the XHTML Basic modules, and this is valid XHTML code.

How well did you know this?

Not at all

Perfectly

Inspect the following HTML code snippet and comment on how to make it valid XHTML by adding additional required elements, attributes, or syntax adjustments needed.
‹html›
    ‹head›
        ‹title›Title here‹/title›
    ‹/head›
    ‹body›
        ‹h1›Header here‹/h1›
        ‹p›Text here‹/p›
    ‹/body›
    ‹/html›

The only element needed here is the !DOCTYPE definition for this page, before the ‹html› tag

How well did you know this?

Not at all

Perfectly

In XHTML, certain elements are mandatory on a standard web page. List these elements by providing the skeleton markup of a valid, empty XHTML standard page.

‹!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”›
‹html› ‹head›‹/head› ‹body›‹/body› ‹/html›

How well did you know this?

Not at all

Perfectly

The code below is taken from an HTML web page that will not parse on an XHTML web browser. What is the cause of the problem and what are possible fixes?
‹!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Loose//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd”›
‹html›
‹head›‹/head›
‹body›‹/body›
‹/html›

The problem is in the !DOCTYPE definition. Loose is not a valid type, and should be replaced with Transitional

How well did you know this?

Not at all

Perfectly

The Document Type Definition (DTD) specifies the syntax of a web page in SGML. There are three !DOCTYPE definitions in the DTD specifications. List these.

Strict, Transitional, Frameset

How well did you know this?

Not at all

Perfectly

The following XHTML code snippet is defined in the !DOCTYPE definition as Transitional. Comment on whether it is valid or not.
‹body bgcolor=”red” text=”blue”›
‹p›Text here‹/p›
‹/body›

This is valid because the Transitional type allows attributes to be added to support older browsers

How well did you know this?

Not at all

Perfectly

An XHTML web page is defined as Strict in the !DOCTYPE definition. Will the following code parse correctly?
‹body bgcolor=”red”›
‹h1›Title here‹/h1›
‹/body›

The Strict type is very restricted and is meant to separate all presentation elements from content. Therefore, no formatting with XHTML is allowed, and instead CSS needs to be used for all settings about presentation. In that case, the code will be incorrect because of the bgcolor attribute.

How well did you know this?

Not at all

Perfectly

There are three types of DTDs available in XHTML. Among these, Strict is the most restrictive, as its name implies. Comment on the pros and cons of Strict XHTML documents.

This DTD allows the markup to be free of presentation details, making maintainability easier. However, this imposes a very restrictive set of code in which no attributes can be used for formatting, only CSS. Some browsers may not render Strict pages as a result.

How well did you know this?

Not at all

Perfectly

Frames are special forms of web pages, and XHTML makes provision for these. What DTD is used to define a web page containing frames?

Frameset

How well did you know this?

Not at all

Perfectly

A web page is defined with the Frameset !DOCTYPE definition. Will the following code snippet be valid?
‹iframe src=”somepage.html”›‹/iframe›

This will not be valid, because only the ‹frameset› and ‹frame› tags are valid for the Frameset DTD.

Recently, a new acronym has surfaced in the web development area, SGML. Are you aware of this acronym, and what does it stand for?

Standard Generalized Markup Language, which is a specification for what elements, characters, attributes can appear within a specific type of document.

HTML 4 allows attribute minimization within its elements, while XHTML does not allow this feature. A typical example of attribute minimization is in the use of check box ‹input› tags. Provide a code snippet to demonstrate this.

‹input checked› is an example of attribute minimization, while the proper XHTML is ‹input checked=”checked” /›

he following code may be using attribute minimization. Will this be valid XHTML code? Give your reasoning.
‹frame noresize /›

This code is using attribute minimization and is invalid XHTML because the XHTML specification requires all attribute values to be enclosed in single or double quotes: ‹frame noresize=”noresize” /›

The following code snippet is deemed invalid XHTML after testing by your test team. The !DOCTYPE for this web page is Transitional. How will you fix it?
‹table width=100% /›

‹table width=”100%” /›

A web page contains the following HTML code. How will you convert this code into valid XHTML?
‹input TYPE=checkbox disabled›

Conversion of all tags and attributes to lowercase, followed by quoting all attribute values, and finally ensuring all tags are properly closed.
‹input type=”checkbox” disabled=”disabled” /›

A web page's content is shown as one continuous block of text without any spacing between paragraphs. List two XHTML elements that you can use to create space between paragraphs?

‹p›‹/p›, ‹br /›

The following text is from a client's XHTML web page. Phasellus molestie ornare fringilla. Aenean a felis ligula. Duis sem dolor, commodo nec volutpat ut, accumsan eu leo. Praesent vulputate venenatis eros, sed consectetur sapien luctus at. How would you add a horizontal line between the first sentence and the remaining lines?

Phasellus molestie ornare fringilla.‹hr /›

In a paragraph, sections of the text need to be given a different font size than the rest of the text. What XHTML element would you use to wrap these sections to apply the required styling?

‹span›‹/span›

On a programming website, the author wishes to show XHTML codes as examples. What XHTML element is best for wrapping these code samples?

‹code›‹/code›

Your client wishes that you control which element gets focus when the TAB key is pressed on a web page. What XHTML attribute would you use to control this?

tabindex ‹a href="http://www.w3schools.com/" tabindex="2"›W3Schools‹/a›‹br /› ‹a href="http://www.google.com/" tabindex="1"›Google‹/a›‹br /› ‹a href="http://www.microsoft.com/" tabindex="3"›Microsoft‹/a›

You are asked to build a list that contains an item and its description. A definition list is perfectly suited for this type of data. Provide the basic XHTML code for a definition list.

‹dl› | ‹dt›Item‹/dt› ‹dd›Description‹/dd› ‹/dl›

An XHTML web page is defined as Transitional DTD. What XHTML element is best suited to show other web page documents within this web page.

‹iframe›‹/iframe›

On a web page, a page is expected to load in an ‹iframe› element when the link to a page called “otherpage.html” is clicked. Write an XHTML snippet code of this.

‹a href="otherpage.html" target="frameid"›Open Other Page‹/a› ‹iframe id="frameid" src=”index.html”›‹/iframe›

An XHTML web page is of Frameset DTD. Give a skeleton code of how you would create the following layout: banner on top of page, followed 2 columns below it, left column for navigating, right column for content.

‹frameset rows="*, *" cols="*"› ‹frame src="banner.html" /› ‹frameset cols="*, *"› ‹frame src="left.html" /› ‹frame src="right.html" /› ‹/frameset› ‹/frameset›

``` An XHTML document defined as Frameset DTD is failing to display on all browsers tested on. Inspect the following code and comment on any errors that will help show the page correctly. ‹html› ‹head› ‹title›Title‹/title› ‹/head› ‹body› ‹frameset rows="*, *" cols="*"› ‹frame src="page1.html" /› ‹frame src="page2.html" /› ‹/frameset› ‹/body› ‹/html› ```

The ‹body› tag is invalid when the document is defined as Frameset. Once the ‹body› tags are removed, the page will show correctly.

Is the following code valid for aligning a ‹div› element to the right of the screen for an XHTML web page defined as Transitional DTD? ‹div align=”right”›‹/div›

Yes, this is valid for Transitional DTD. | IT IS INVALID IN HTML5

On a web page for a kids website, a ‹table› used needs to be colored white. Given that the page is XHTML Strict, comment on the following code snippet. ‹table bgcolor=”white”›‹tr›‹td›Other code‹/td›‹/tr›‹/table›

This would be invalid XHTML because bgcolor is not permitted with Strict DTD.

What is the value of the type attribute of the ‹input› element that would allow files to be uploaded?

‹input type=”file” /›

A button needs to be designed on a web page so that part of it has an image showing. What XHTML element is best suited for this?

‹button› elements can contain XHTML code within the start and close tags, so an ‹image› can be placed within it, for example, ‹button›‹img src=”img.jpg” /› Text‹/button›

How can a form be redirected to another page after the submit button has been clicked? Provide an XHTML code snippet that is DTD Strict.

form action=”nextpage.html”›‹/form›

When a large amount of text data needs to be entered into a form, including possible line breaks, what XHTML form element would be best suited for this size and type of data?

‹textarea›‹/textarea›

On a registration form, there needs to be a selection for Gender, with two options: Man, Woman. Only one of these options can be selected. Provide an XHTML code snippet of the XHTML to achieve this that is of type Strict DTD.

‹input type="radio" name="gender" value="Man" /› | ‹input type="radio" name="gender" value="Woman" /›

A form needs to redirect to a new page that should also open in a new window. Provide a valid XHTML code snippet of what attribute can be used to achieve this. Assume that the web page is DTD Transitional.

‹form action=”nextpage.html” target=”_blank”›‹/form

A web page is defined as XHTML DTD Strict, and causes an error. Inspect the following code segment and determine what the cause of the error is? ‹form target=”_top”›‹/form

The target attribute is invalid in DTD Strict. Removing it will fix the error

Forms can be used to send data such as files to the host server of a web page. Is it possible to specify the type of files that are allowed using XHTML only?

Yes, by setting the file types in the accept attribute of the form form action="form_action.asp" accept="image/gif,image/jpeg"

You come across XHTML code in which 2 forms were needed for submitting different data, but the forms are nested within each other as shown below. Comment on the functionality of these forms. ‹form› ‹form›‹/form› ‹/form›

The internal form will not behave as an independent form, as the browser will recognize only the top ‹form› due to the nesting.

There are parts of a long registration form on a website that need to be logically grouped. What XHTML element is recommended for this kind of grouping?

The ‹fieldset› XHTML element is best suited for this task.