Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

HTML Interview questions > HTML elements > Flashcards

HTML elements Flashcards

1
Q

On a web page, the content is shown in a block of text without any spacing between paragraphs. What two HTML elements would you use from the following to create space between paragraphs?

A

‹p›, ‹br /›

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

The following text is from a client’s page
Progressing Interest by Fion Lim First a gentle hug
Next a soft peck on cheeks
Then a kiss on the lips
On three separate dates
Signaling your romantic intent
The client wants to add a horizontal line between the title and the text. How would you do this using only one HTML element?

A

Progressing Interest by Fion Lim‹hr /›

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Your client contacts you about adding a map to their website. However, they do not want to use Google Maps or Bing Maps, but to use a satellite picture of a certain area, and want the website visitors to be able to click on specific parts of the picture. How can you achieve this using only HTML elements, without any scripting?

A

In the ‹img› tag for the picture, the usemap attribute will be used to reference a ‹map› tag that can be used to make different parts of the picture clickable.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Visitors to a certain website may be using old browsers with scripting disabled. What HTML element would you use to show an appropriate message while still allowing scripting for the visitors using modern browsers?

A

‹noscript›

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

In a paragraph, sections of the text need to be colored differently than the rest. What HTML element would you use to wrap these sections to apply styling?

A

‹span›

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

The following list is provided to you by your website’s client:
Oranges Apples Grapes

Bananas
Mangoes
Your client wants you to make a bulleted list of these items. Show how you would achieve this?

A 
‹ul›
‹li›Oranges‹/li›
‹li›Apples‹/li›
‹li›Grapes‹/li›
‹li›Bananas‹/li›
‹li›Mangoes‹/li›
‹/ul›
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What HTML element is useful for creating an ordered and numbered list for the following items? One, Two, Three, Four, Five

A

‹ol›

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

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

A

‹code›

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Suppose you are developing a website for a chemistry course. How would you show the Oxygen gas symbol, O2, on a web page?

A

O‹sub›2‹/sub›

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

A mathematics instructor contacts you to find out how to code the equation given below using HTML only. What would your response be? x(squared)
f(x) = x2 – 2x + 1

A

f(x) = x‹sup›2‹/sup› - 2x + 1

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

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?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

On the contact page, an email address is shown. How would you create an email link that opens the default email client to compose a new message to someone@somesite.com?

A

‹a href=”mailto:someone@somesite.com“›

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

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?

A

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›

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

On a web page, there are various images. However, for text-based browsers, there is
a need to show alternative text-only. What HTML attribute would you use in order to display alternative text when the image is not available?

A

alt

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

A web page contains many one-line sentences followed by a “Click me” button. However, in order to assist the site user, there is need to create tooltips for each “Click me” button. What HTML attribute, when set, allows browsers to show a tooltip? Answer:

A

title

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

On a web page, whenever a key is pressed, the page would refresh. What HTML events would be useful in this scenario?

A

onkeypress, onkeydown, onkeyup

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

On a certain website, whenever the mouse is moved over an image, the image should change to another colored version. Also, when the mouse moves away from the image, it should return to its default picture. Which HTML events can be used to cause this change to happen?

A

onmouseover will be used to change the image when it gets focus, while onmouseout would be used to revert back to the default.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

On a web page, a mock image looks like a button. However, the image does not behave like a button when clicked. Which HTML event would you use to make the image button clickable?

A

onclick

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

You are contracted to create a web page that measures clicking speeds of its visitors. In the mock sketches, an image of a folder is provided, and the visitor is asked to double- click it. When the visitor double-clicks, some sequence of actions will happen. Is there an HTML event to help fire the required sequence of actions?

A

Yes, ondblclick

20
Q

Some websites are able to display a message whenever a user is leaving or closing the browser. This involves using JavaScript and an HTML event to capture the web page document closing. What is this event?

A

onunload

21
Q

Your client is worried about the speed of page loads, and asks your advice. His concern is that whenever the site visitor clicks on a navigation link, the next page will be reloading the banner, footer and navigation. However, these are the same across all the pages, and the only thing that changes from page to page is the content area. What options of HTML elements do you have to load only the content while keeping the static part of the web site on-screen?

A

The content could be moved to separate web pages, and loaded into an ‹iframe› element, in which case the static elements would remain on the main page. Another HTML element that could provide a similar effect would be ‹frame›. For both these elements, once the target
attribute is set in the link to point to them, the content pages will get loaded in the elements, and the rest of the page will stay on-screen. As a side note, dynamic scripting solutions are also possible using JavaScript/AJAX.

22
Q

The specifications for your latest web project say that the website needs to be able to show other web page documents within its pages. What HTML element is best suited use to achieve this?

A

‹iframe›

23
Q

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.

A

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

24
Q

A financial web page requires showing a table that has 2 columns, the first one showing Year and second one showing the Sales in dollars for each year. Also, the Total Sum of sales is to be shown at the last row. Give the skeleton HTML code to achieve this by making use of ‹thead›, ‹tbody›, and ‹tfoot› elements. You can assume any data values for any 2 year

A 
‹table›
    ‹thead›
        ‹tr›
            ‹th›Year‹/th›
            ‹th›Sales‹/th›
        ‹/tr›
    ‹/thead›
    ‹tfoot›
        ‹tr›
            ‹td›Sum‹/td›
            ‹td›$9,050‹/td›
        ‹/tr›
    ‹/tfoot›
    ‹tbody›
        ‹tr›
            ‹td›2009‹/td›
            ‹td›$5,000‹/td›
        ‹/tr›
        ‹tr›
            ‹td›2010‹/td›
            ‹td›$4,050‹/td›
        ‹/tr›
    ‹/tbody›
‹/table›
25
Q

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

A

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”]

26
Q

Your website’s client wants to break away from the regular look of HTML buttons and use a custom-created image. What form element can achieve both submission of data and the need for having an image without using CSS?

A

The ‹input› element can achieve this, with its type attribute set to “image” and the src attribute set to the required image.

27
Q

On a registration form, there needs to be a selection for Sex, with two options: Male, Female. Only one of these options can be selected. Your client sketches show the use of radio buttons. Give a skeleton of the HTML code to achieve this.

A

‹input type=”radio” name=”sex” value=”Male” /›Male

‹input type=”radio” name=”sex” value=”Female” /›Female

28
Q

Your client has thought of the following scenario: on the registration form, whenever the Submit button is clicked, the user is shown a message. You are asked if this is feasible. You know that the message can be shown using JavaScript via the onclick event of the Submit button. However, since the Submit button triggers its own click event, leading to possible redirect to another page, do you think the additional onclick message will be shown?

A

Yes, the onclick event is captured first by the browser.

off course you would really use addeventListener /attachEvent

29
Q

A button may be created by using the ‹input› element, as well as the ‹button› element.
What is the main difference between these two?

A

‹button› elements can contain HTML code within the start and close tags.

30
Q

On a registration, the registering user’s biography needs to be entered. What HTML form element would be best suited for this size and type of data?

A

‹textarea›

31
Q

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.

A

‹form action=”thanks.htm”›

32
Q

A beginner HTML developer is coding forms and wants to ask your opinion on if there is any difference between using GET or POST as the value of the submit action attribute. What is your advice?

A

This depends on the sensitivity of the data being submitted using forms. This is because GET submissions use the URL to encode and pass the submitted data to the next delegated page. When sensitive information like password or social security numbers are involved, GET is not good because URLs can be easily retrieved using network sniffing. In this case, POST is better because data is encoded and passed in the message body of the server-to-browser communication, making it safer.

33
Q

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 and only allow images to be uploaded

A

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

34
Q

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?

A

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

35
Q

Your client wishes to reduce the load on the hosting server for a resume sharing website. In analysis, it was discovered that a lot of time is wasted in validating user inputs and reporting back errors when the server script receives a submission. What is your suggestion?

A

Validation of user inputs can be done on the browser, before the data is sent to the server. This can be achieved by using JavaScript that is invoked using the onsubmit event for the form taking the user inputs. In this way no data would be sent back to the server until all of it is valid.

36
Q

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?

A

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

37
Q

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?

A

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”›

38
Q

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?

A

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›

39
Q

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?

A

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”›

40
Q

While looking at a legacy website’s code, you find that parts of the code are not clear. Consequently, your recommendation to your client is to have then next HTML coder to include comments. What is the general syntax for HTML comments?

A

‹!– My comment goes here –›

41
Q

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?

A

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

42
Q

A website recently decided to move all of its inline styles into external stylesheets. How will the web pages reference the stylesheet files?

A

[head]
[link rel=”stylesheet” type=”text/css” href=”theme.css”]
[/head]

43
Q

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

A

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

44
Q

An HTML page you designed is part of a script that opens as a Spreadsheet file. What basic role does HTML code play in the conversion of the web page to an Spreadsheet file?

A

Apart from formatting the data within the Spreadsheet, the http-equiv meta data is the main setting that will specify to the browser that it has received a Spreadsheet file. By setting the value of http-equiv to “content-type”, the exact MIME type of a Spreadsheet document can be specified. This allows the Spreadsheet file to be delivered correctly to the website user.

45
Q

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.

A

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

HTML Interview questions (9 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions