Masterclass

Question 1

For the sake of easy maintenance, your website’s styles are in a .css file, so that it can be used in multiple pages. What HTML element and attribute are used to specify an external stylesheet?

Answer 1

‹link rel=”stylesheet” type=”text/css” href=”theme.css”›

Question 2

A lengthy web page “mypage.htm” contains various headings. How would you create a link to this web page so that a specific heading at the bottom of the page, “Credits”, comes into view when your link is clicked?

Answer 2

First, create a bookmark the bottom heading, ‹a name=”credits”›Credits‹/a›. Then, the link will be constructed as ‹a href=”mypage.htm#credits”›Open Credits page‹/a›

Question 3

On a web page, when the link to a page called “somepage.htm” is clicked, the page is expected to load in an ‹iframe› element. Give the skeleton HTML code of how this can be done.

Answer 3

‹a href=”somepage.htm” target=”myiframe”›Open Some Page‹/a› ‹iframe id=”myiframe”›‹/iframe›

Question 4

How would you make content contained within a ‹table› element available to a screen reader that is meant to assist the visually impaired?

Answer 4

By adding a summary of the table using the summary attribute. The summary attribute’s value is available to screen readers.

[table summary=”Monthly savings for the Flintstones family”]

Question 5

On a contact information web page, the users need to be redirected to a separate confirmation and “Thank you” page called “thanks.htm”. Give a skeleton of the HTML code that would achieve the redirection.

Answer 5

‹form action=”thanks.htm”›

Question 6

An online dating site requires users to submit their picture as part of the registration process. Give a skeleton of the HTML code showing how you would implement a web page interface so that a file can be uploaded. You may assume that a server-side script called “ihandleuploads.php” is going to process the data.

Answer 6

‹form action=”ihandleuploads.php” enctype=”multipart/form-data” method=”post”› ‹input type=”file” /›
‹input type=”submit” /›
‹/form›

Question 7

On a legacy system created by a client who wanted to try out their hand at HTML, you find that the tag that takes the password on the user registration page is showing the password text as it is being typed. How would you fix this?

Answer 7

By changing the type attribute to “password” instead of “text”

Question 8

Your client has moved to a new domain name “newfoo.com”, but still retains the old name “oldfoo.com”. However, the client wishes to redirect users to the new site automatically. But the old site’s hosts do not have any server-side scripts enabled, so the
redirection has to be done using HTML only. How would you do this?

Answer 8

‹meta http-equiv=”refresh” content=”0;url=http://www.newfoo.com”›

Question 9

When you search for your name using Bing or Google, your site comes on the first page of results. However, you would like to show a description of your site below its URL on these search results. What HTML element and attribute can achieve this?

Answer 9

The ‹meta› element placed in the ‹head› section would allow this, given that the “name” attribute is set to “description” and the required description itself is given in the “content” attribute of the element. For instance, ‹meta name=”description” content = “My description here”›

Question 10

All links on an archives web page are pointing to a previous version of the current website. The old version was at a different domain name “oldfoothatwassuchalongname.com”. Given that all links contain “http://oldfoothatwassuchalongname.com/” before the name of the page, what HTML- only method is available to save code space by not repeating this common URL and still make the old links work?

Answer 10

In the ‹head› area, the ‹base› element can be used to set the target URL of all the links on this page:
‹head›
‹base href=”http://oldfoothatwassuchalongname.com/” /›
‹/head›

Question 11

There are some web pages that you do not wish for search engines like Google to crawl or index. What meta tag is useful to stop these search engines?

Answer 11

The robots tag type can achieve this, but has to be placed at the head of each of the pages. ‹meta name=”robots” content=”noindex, nofollow”›

Question 12

You wish to avoid your HTML code being rendered incorrectly by newer browsers that can interpret HTML as XML by default. How would you specify the markup language version to avoid any problems?

Answer 12

Using the ‹!DOCTYPE› declaration, before the ‹html› tag.

Question 13

You wish to make search engines be aware of the date your web page was last updated. How would you achieve this?

Answer 13

‹meta http-equiv=”last-modified” content=”date time here”›

Question 14

Cookies are useful in saving data to the client browser securely. Give a code skeleton of how you would initialize this process using HTML by setting a cookie.

Answer 14

‹meta http-equiv=”set-cookie” content=”feedme=1;expires=Expiry date time here; path=/”›

Question 15

You are maintaining legacy CSS code, you notice that the visibility attribute for an image has been set to visibility: collapse. Is this an error, and what effects would this have?

Answer 15

This is a valid value for the visibility attribute. However, it is only valid for tables. For the image, this value will produce the same effect as visibility: hidden

Question 16

There are a wide array of browsers available today, and most have different implementations of CSS standards. In particular, Internet Explorer has been reported as being particularly quirky. In this case, what mechanism is available to provide CSS code that is suited for Internet Explorer and the other browsers?

Answer 16

‹!–[if IE]›
IE supported code here
‹![endif]–›

Question 17

You have handled the peculiarities of Internet Explorer by using conditional CSS. However, you also need to provide alternatives for all other browsers. What syntax does conditional CSS support to check non-Internet Explorer browsers?

Answer 17

‹!–[if !IE]>

Question 18

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.

Answer 18

Strict, Transitional, Frameset

Question 19

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.

Answer 19

‹dl›

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

Question 20

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.

Answer 20

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

Question 21

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.

Answer 21

‹input type=”radio” name=”gender” value=”Man” /›

‹input type=”radio” name=”gender” value=”Woman” /›

Question 22

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.

Answer 22

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

Question 23

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?

Answer 23

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

Question 24

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?

Answer 24

[form]
 [fieldset]
  [legend]Personalia:[/legend]
  Name: [input type="text"][br]
  Email: [input type="text"][br]
  Date of birth: [input type="text"]
 [/fieldset]
[/form]