HTML Interview Questions and Answers
What is HTML?
HTML, or HyperText Markup Language, is a Universal language which allows an individual using special code to create web pages to be viewed on the Internet.
HTML ( H yper T ext M arkup L anguage) is the language used to write Web pages. You are looking at a Web page right now.
You can view HTML pages in two ways:
* One view is their appearance on a Web browser, just like this page -- colors, different text sizes, graphics.
* The other view is called "HTML Code" -- this is the code that tells the browser what to do.
What is a tag?
In HTML, a tag tells the browser what to do. When you write an HTML page, you enter tags for many reasons -- to change the appearance of text, to show a graphic, or to make a link to another page.
In HTML, a tag tells the browser what to do. When you write an HTML page, you enter tags for many reasons -- to change the appearance of text, to show a graphic, or to make a link to another page.
What is the simplest HTML page?
<HTML>
<HEAD>
<TITLE>This is my page title! </TITLE>
</HEAD>
<BODY>
This is my message to the world!
</BODY>
</HTML>
Browser Display:
This is my message to the world!
<HTML>
<HEAD>
<TITLE>This is my page title! </TITLE>
</HEAD>
<BODY>
This is my message to the world!
</BODY>
</HTML>
Browser Display:
This is my message to the world!
Can I nest tables within tables?
Yes, a table can be embedded inside a cell in another table. Here's a simple example:
<table>
<tr>
<td>this is the first cell of the outer table</td>
<td>this is the second cell of the outer table,
with the inner table embedded in it
<table>
<tr>
<td>this is the first cell of the inner table</td>
<td>this is the second cell of the inner table</td>
</tr>
</table>
</td>
</tr>
</table>
Yes, a table can be embedded inside a cell in another table. Here's a simple example:
<table>
<tr>
<td>this is the first cell of the outer table</td>
<td>this is the second cell of the outer table,
with the inner table embedded in it
<table>
<tr>
<td>this is the first cell of the inner table</td>
<td>this is the second cell of the inner table</td>
</tr>
</table>
</td>
</tr>
</table>
How do I eliminate the blue border around linked images?
In your HTML, you can specify the BORDER attribute for the image:
<a href=...><img src=... alt=... border="0"></a>
However, note that removing the border that indicates an image is a link makes it harder for users to distinguish quickly and easily which images on a web page are clickable.
How do I eliminate the space around/between my images?
If your images are inside a table, be sure to set the BORDER, CELLSPACING, and CELLPADDING attributes to 0.
Extra space between images is often created by whitespace around the <IMG> tag in the markup. It is safe to use newlines inside a tag (between attributes), but not between two tags. For example, replace this:
<td ...>
<img src=... alt=...>
<img src=... alt=...>
</td>
with this:
<td ...><img src=... alt=...><img src=... alt=...></td>
According to the latest specifications, the two should be equivalent. However, common browsers do not comply with the specifications in this situation.
If your images are inside a table, be sure to set the BORDER, CELLSPACING, and CELLPADDING attributes to 0.
Extra space between images is often created by whitespace around the <IMG> tag in the markup. It is safe to use newlines inside a tag (between attributes), but not between two tags. For example, replace this:
<td ...>
<img src=... alt=...>
<img src=... alt=...>
</td>
with this:
<td ...><img src=... alt=...><img src=... alt=...></td>
According to the latest specifications, the two should be equivalent. However, common browsers do not comply with the specifications in this situation.
How do I create a link?
Use an anchor element. The HREF attribute specifies the URL of the document that you want to link to. The following example links the text "Web Authoring FAQ" to <URL:http://www.htmlhelp.com/faq/html/>:
<A HREF="http://www.yoursite.com/faq/html/">Web Authoring FAQ</A>
Use an anchor element. The HREF attribute specifies the URL of the document that you want to link to. The following example links the text "Web Authoring FAQ" to <URL:http://www.htmlhelp.com/faq/html/>:
<A HREF="http://www.yoursite.com/faq/html/">Web Authoring FAQ</A>
How do I create a link that opens a new window?
<a target="_blank" href=...> opens a new, unnamed window.
<a target="example" href=...> opens a new window named "example", provided that a window or frame by that name does not already exist.
Note that the TARGET attribute is not part of HTML 4 Strict. In HTML 4 Strict, new windows can be created only with JavaScript. links that open new windows can be annoying to your readers if there is not a good reason for them.
<a target="_blank" href=...> opens a new, unnamed window.
<a target="example" href=...> opens a new window named "example", provided that a window or frame by that name does not already exist.
Note that the TARGET attribute is not part of HTML 4 Strict. In HTML 4 Strict, new windows can be created only with JavaScript. links that open new windows can be annoying to your readers if there is not a good reason for them.
How do I let people download a file from my page?
Once the file is uploaded to the server, you need only use an anchor reference tag to link to it. An example would be:
<a href="../files/foo.zip">Download Foo Now! (100kb ZIP)</a>
Once the file is uploaded to the server, you need only use an anchor reference tag to link to it. An example would be:
<a href="../files/foo.zip">Download Foo Now! (100kb ZIP)</a>
How do I create a button which acts like a link?
This is best done with a small form:
<FORM ACTION="[URL]" METHOD=GET>
<INPUT TYPE=submit VALUE="Text on button">
</FORM>
If you want to line up buttons next to each other, you will have to put them in a one-row table, with each button in a separate cell.
Note that search engines might not find the target document unless there is a normal link somewhere else on the page.
A go-to-other-page button can also be coded in JavaScript, but the above is standard HTML and works for more readers.
This is best done with a small form:
<FORM ACTION="[URL]" METHOD=GET>
<INPUT TYPE=submit VALUE="Text on button">
</FORM>
If you want to line up buttons next to each other, you will have to put them in a one-row table, with each button in a separate cell.
Note that search engines might not find the target document unless there is a normal link somewhere else on the page.
A go-to-other-page button can also be coded in JavaScript, but the above is standard HTML and works for more readers.
How to transferring user to new web page automatically?
You will need to use the below meta tag.
<META HTTP-EQUIV="Refresh" CONTENT="2"; URL="http://www.yourname.com">
Placing the above tag in your <HEAD></HEAD> will load yousite.com in 2 seconds.
Changing the 2 value on CONTENT="2" to another value will increase or decrease the delay until loading the new page.
You will need to use the below meta tag.
<META HTTP-EQUIV="Refresh" CONTENT="2"; URL="http://www.yourname.com">
Placing the above tag in your <HEAD></HEAD> will load yousite.com in 2 seconds.
Changing the 2 value on CONTENT="2" to another value will increase or decrease the delay until loading the new page.
How can I use tables to structure forms?
Small forms are sometimes placed within a TD element within a table. This can be a useful for positioning a form relative to other content, but it doesn't help position the form-related elements relative to each other.
To position form-related elements relative to each other, the entire table must be within the form. You cannot start a form in one TH or TD element and end in another. You cannot place the form within the table without placing it inside a TH or TD element. You can put the table inside the form, and then use the table to position the INPUT, TEXTAREA, SELECT, and other form-related elements, as shown in the following example.
<FORM ACTION="[URL]">
<TABLE BORDER="0">
<TR>
<TH>Account:</TH>
<TD><INPUT TYPE="text" NAME="account"></TD>
</TR>
<TR>
<TH>Password:</TH>
<TD><INPUT TYPE="password" NAME="password"></TD>
</TR>
<TR>
<TD> </TD>
<TD><INPUT TYPE="submit" NAME="Log On"></TD>
</TR>
</TABLE>
</FORM>
Small forms are sometimes placed within a TD element within a table. This can be a useful for positioning a form relative to other content, but it doesn't help position the form-related elements relative to each other.
To position form-related elements relative to each other, the entire table must be within the form. You cannot start a form in one TH or TD element and end in another. You cannot place the form within the table without placing it inside a TH or TD element. You can put the table inside the form, and then use the table to position the INPUT, TEXTAREA, SELECT, and other form-related elements, as shown in the following example.
<FORM ACTION="[URL]">
<TABLE BORDER="0">
<TR>
<TH>Account:</TH>
<TD><INPUT TYPE="text" NAME="account"></TD>
</TR>
<TR>
<TH>Password:</TH>
<TD><INPUT TYPE="password" NAME="password"></TD>
</TR>
<TR>
<TD> </TD>
<TD><INPUT TYPE="submit" NAME="Log On"></TD>
</TR>
</TABLE>
</FORM>
How do I center a table?
In your HTML, use
<div class="center">
<table>...</table>
</div>
In your CSS, use
div.center {
text-align: center;}
div.center table {
margin-left: auto;
margin-right: auto;
text-align: left;}
In your HTML, use
<div class="center">
<table>...</table>
</div>
In your CSS, use
div.center {
text-align: center;}
div.center table {
margin-left: auto;
margin-right: auto;
text-align: left;}
How do I use forms?
The basic syntax for a form is: <FORM ACTION="[URL]">...</FORM>
When the form is submitted, the form data is sent to the URL specified in the ACTION attribute. This URL should refer to a server-side (e.g., CGI) program that will process the form data. The form itself should contain
* at least one submit button (i.e., an <INPUT TYPE="submit" ...> element),
* form data elements (e.g., <INPUT>, <TEXTAREA>, and <SELECT>) as needed, and
* additional markup (e.g., identifying data elements, presenting instructions) as needed.
The basic syntax for a form is: <FORM ACTION="[URL]">...</FORM>
When the form is submitted, the form data is sent to the URL specified in the ACTION attribute. This URL should refer to a server-side (e.g., CGI) program that will process the form data. The form itself should contain
* at least one submit button (i.e., an <INPUT TYPE="submit" ...> element),
* form data elements (e.g., <INPUT>, <TEXTAREA>, and <SELECT>) as needed, and
* additional markup (e.g., identifying data elements, presenting instructions) as needed.
How do I set the focus to the first form field?
You cannot do this with HTML. However, you can include a script after the form that sets the focus to the appropriate field, like this:
<form id="myform" name="myform" action=...>
<input type="text" id="myinput" name="myinput" ...>
</form>
<script type="text/javascript">
document.myform.myinput.focus();
</script>
A similar approach uses <body onload=...> to set the focus, but some browsers seem to process the ONLOAD event before the entire document (i.e., the part with the form) has been loaded.
You cannot do this with HTML. However, you can include a script after the form that sets the focus to the appropriate field, like this:
<form id="myform" name="myform" action=...>
<input type="text" id="myinput" name="myinput" ...>
</form>
<script type="text/javascript">
document.myform.myinput.focus();
</script>
A similar approach uses <body onload=...> to set the focus, but some browsers seem to process the ONLOAD event before the entire document (i.e., the part with the form) has been loaded.
How can I eliminate the extra space after a </form> tag?
HTML has no mechanism to control this. However, with CSS, you can set the margin-bottom of the form to 0. For example:
<form style="margin-bottom:0;" action=...>
You can also use a CSS style sheet to affect all the forms on a page:
form { margin-bottom: 0 ; }
HTML has no mechanism to control this. However, with CSS, you can set the margin-bottom of the form to 0. For example:
<form style="margin-bottom:0;" action=...>
You can also use a CSS style sheet to affect all the forms on a page:
form { margin-bottom: 0 ; }
How can I use tables to structure forms?
Small forms are sometimes placed within a TD element within a table. This can be a useful for positioning a form relative to other content, but it doesn't help position the form-related elements relative to each other.
To position form-related elements relative to each other, the entire table must be within the form. You cannot start a form in one TH or TD element and end in another. You cannot place the form within the table without placing it inside a TH or TD element. You can put the table inside the form, and then use the table to position the INPUT, TEXTAREA, SELECT, and other form-related elements, as shown in the following example.
<form action="[URL]">
<table border="0">
<tr><th scope="row">
<label for="account">Account:</label>
</th>
<td>
<input type="text" name="account" id="account">
</td>
</tr>
<tr><th scope="row">
<label for="password">Password:
</th>
<td>
<input type="password" name="password" id="password">
</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Log On"></td>
</tr>
</table>
</form>
Small forms are sometimes placed within a TD element within a table. This can be a useful for positioning a form relative to other content, but it doesn't help position the form-related elements relative to each other.
To position form-related elements relative to each other, the entire table must be within the form. You cannot start a form in one TH or TD element and end in another. You cannot place the form within the table without placing it inside a TH or TD element. You can put the table inside the form, and then use the table to position the INPUT, TEXTAREA, SELECT, and other form-related elements, as shown in the following example.
<form action="[URL]">
<table border="0">
<tr><th scope="row">
<label for="account">Account:</label>
</th>
<td>
<input type="text" name="account" id="account">
</td>
</tr>
<tr><th scope="row">
<label for="password">Password:
</th>
<td>
<input type="password" name="password" id="password">
</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Log On"></td>
</tr>
</table>
</form>
Do all HTML tags come in pair?
No, there are single HTML tags that does not need a closing tag. Examples are the <img> tag and <br> tags.
What are some of the common lists that can be used when designing a page?
You can insert any or a combination of the following list types:
– ordered list
– unordered list
– definition list
– menu list
– directory list
Each of this list types makes use of a different tag set to compose
– ordered list
– unordered list
– definition list
– menu list
– directory list
Each of this list types makes use of a different tag set to compose
How do you insert a comment in html?
Comments in html begins with “<!–“nd ends with “–>”. For example:
<!-- A SAMPLE COMMENT -->
|
Do all character entities display properly on all systems?
No, there are some character entities that cannot be displayed when the operating system that the browser is running on does not support the characters. When that happens, these characters are displayed as boxes.
What is image map?
Image map lets you link to many different web pages using a single image. You can define shapes in images that you want to make part of an image mapping.
What is the advantage of collapsing white space?
White spaces are blank sequence of space characters, which is actually treated as a single space character in html. Because the browser collapses multiple space into a single space, you can indent lines of text without worrying about multiple spaces. This enables you to organize the html code into a much more readable format.
Can attribute values be set to anything or are there specific values that they accept?
Some attribute values can be set to only predefined values. Other attributes can accept any numerical value that represents the number of pixels for a size.
How do you insert a copyright symbol on a browser page?
To insert the copyright symbol, you need to type © or & #169; in an HTML file.
How do you create links to sections within the same page?
Links can be created using the <a> tag, with referencing through the use of the number (#) symbol. For example, you can have one line as <a href=”#topmost”>BACK TO TOP</a>, which would result in the words “BACK TO TOP” appearing on the webpage and links to a bookmark named topmost. You then create a separate tag command like <a name=”topmost”> somewhere on the top of the same webpage so that the user will be linked to that spot when he clicked on “BACK TO TOP”.
Is there any way to keep list elements straight in an html file?
Is there any way to keep list elements straight in an html file?
By using indents, you can keep the list elements straight. If you indent each subnested list in further than the parent list that contains it, you can at a glance determine the various lists and the elements that it contains.
If you see a web address on a magazine, to which web page does it point?
Every web page on the web can have a separate web address. Most of these addresses are relative to the top-most web page. The published web address that appears within magazines typically points this top-most page. From this top level page, you can access all other pages within the web site.
What is the use of using alternative text in image mapping?
When you use image maps, it can easily become confusing and difficult to determine which hotspots corresponds with which links. Using alternative text lets you put a descriptive text on each hotspot link.
Do older html files work on newer browsers?
Yes, older html files are compliant to the HTML standard. Most older files work on the newer browsers, though some features may not work.
Does a hyperlink apply to text only?
No, hyperlinks can be used on text as well as images. That means you can convert an image into a link that will allow user to link to another page when clicked. Just surround the image within the <a href=” “>…</a> tag combinations.
If the user’s operating system does not support the needed character, how can the symbol be represented?
In cases wherein their operating system does not support a particular character, it is still possible to display that character by showing it as an image instead.
How do you change the number type in the middle of a list?
The <li> tag includes two attributes – type and value. The type attribute can be used to change the numbering type for any list item. The value attribute can change the number index.
What are style sheets?
Style sheets enable you to build consistent, transportable, and well-defined style templates. These templates can be linked to several different web pages, making it easy to maintain and change the look and feel of all the web pages within a site.
What bullet types are available?
With ordered lists, you can select to use a number of different list types including alphabetical and Roman numerals. The type attribute for unordered lists can be set to disc, square, or circle.
How do you create multicolored text in a webpage?
To create text with different colors, use the <font color=”color”>…</font> tags for every character that you want to apply a color. You can use this tag combination as many times as needed, surrounding a single character or an entire word.
Why are there both numerical and named character entity values?
The numerical values are taken from the ASCII values for the various characters, but these can be difficult to remember. Because of this, named character entity values were created to make it easier for web page designers to use.
Write a HTML table tag sequence that outputs the following:
50 pcs 100 500
10 pcs 5 50
50 pcs 100 500
10 pcs 5 50
Answer:
1
2
3
4
5
6
7
8
9
10
11
12
|
<table>
<tr>
<td>50 pcs</td>
<td>100</td>
<td>500</td>
</tr>
<tr>
<td>10 pcs</td>
<td>5</td>
<td>50</td>
</tr>
</table>
|
What is the advantage of grouping several checkboxes together?
Although checkboxes don’t affect one another, grouping checkboxes together helps to organize them. Checkbox buttons can have their own name and do not need to belong to a group. A single web page can have many different groups of checkboxes.
25) What will happen if you overlap sets of tags?
If two sets of html tags are overlapped, only the first tag will be recognized. You will recognize this problem when the text does not display properly on the browser screen.
What are applets?
Applets are small programs that can be embedded within web pages to perform some specific functionality, such as computations, animations, and information processing. Applets are written using the Java language.
What if there is no text between the tags or if a text was omitted by mistake? Will it affect the display of the html file?
If there is no text between the tags, then there is nothing to format, so no formatting will appear. Some tags, especially tags without a closing tag like the <img> tag, do not require any text between them.
Is it possible to set specific colors for table borders?
You can specify a border color using style sheets, but the colors for a table that does not use style sheets will be the same as the text color.
How do you create a link that will connect to another web page when clicked?
To create hyperlinks, or links that connect to another web page, use the href tag. The general format for this is: <a href=”site”>text</a>
Replace “site” with the actual page url that is supposed to be linked to when the text is clicked.
Replace “site” with the actual page url that is supposed to be linked to when the text is clicked.
What other ways can be used to align images and wrap text?
Tables can be used to position text and images. Another useful way to wrap text around an image is to use style sheets.
Can a single text link point to two different web pages?
No. The <a> tag can accept only a single href attribute, and it can point to only a single web page.
What is the difference between the directory and menu lists and the unordered list?
The key differences is that the directory and menu lists do not include attributes for changing the bullet style.
Can you change the color of bullets?
The bullet color is always the same as that of the first character in the list litem. If you surround the <li> and the first character with a set of <font> tags with the color attribute set, the bullet color and the first character will be a different color from the text.
What are the limits of the text field size?
The default size for a text field is around 13 characters, but if you include the size attribute, you can set the size value to be as low as 1. The maximum size value will be determined by the browser width. If the size attribute is set to 0, the size will be set to the default size of 13 characters.
Do <th> tags always need to come at the start of a row or column?
Any <tr> tag can be changed to a <th> tag. This causes the text contained within the <th> tag to be displayed as bold in the browser. Although <th> tags are mainly used for headings, they do not need to be used exclusively for headings.
What is the relationship between the border and rule attributes?
Default cell borders, with a thickness of 1 pixel, are automatically added between cells if the border attribute is set to a nonzero value. Likewise, If the border attribute is not included, a default 1-pixel border appears if the rules attribute is added to the <table> tag.
What is a marquee?
A marquee allows you to put a scrolling text in a web page. To do this, place whatever text you want to appear scrolling within the <marquee> and </marquee> tags.
How do you create a text on a webpage that will allow you to send an email when clicked?
To change a text into a clickable link to send email, use the mailto command within the href tag. The format is as follows:
<A HREF=”mailto:youremailaddress”>text to be clicked</A>
|
Are <br> tags the only way to separate sections of text?
No. The <br> tag is only one way to separate lines of text. Other tags, like the <p> tag and <blockquote> tag, also separate sections of text.
Are there instances where text will appear outside of the browser?
By default, the text is wrapped to appear within the browser window. However, if the text is part of a table cell with a defined width, the text could extend beyond the browser window.
How are active links different from normal links?
The default color for normal and active links is blue. Some browsers recognize an active link when the mouse cursor is placed over that link; others recognize active links when the link has the focus. Those that don’t have a mouse cursor over that link is considered a normal link.
Do style sheets limit the number of new style definitions that can be included within the brackets?
Style sheets do not limit the number of style definitions that can be included within the brackets for a given selector. Every new style definition, however, must be separated from the others by a semicolon symbol.
Can I specify fractional weight values such as 670 or 973 for font weight?
Implementation largely depends on the browser, but the standard does not support fractional weight values. Acceptable values must end with two zeroes.
What is the hierarchy that is being followed when it comes to style sheets?
If a single selector includes three different style definitions, the definition that is closest to the actual tag takes precedence. Inline style takes priority over embedded style sheets, which takes priority over external style sheets.
Can several selectors with class names be grouped together?
You can define several selectors with the same style definition by separating them with commas. This same technique also works for selectors with class names.
What happens if you open the external CSS file in a browser?
If you try to open the external CSS file in a browser, the browser cannot open the file, because the file has a different extension. The only way to use an external CSS file is to reference it using <link/> tag within another html document.
How do you make a picture into a background image of a web page?
To do this, place a tag code after the </head> tag as follows:
1
|
<body background = “image.gif”>
|
Replace image.gif with the name of your image file. This will take the picture and make it the background image of your web page.
What happens if the list-style-type property is used on a non-list element like a paragraph?
What happens if the list-style-type property is used on a non-list element like a paragraph?
If the list-style-type property is used on a non-list element like a paragraph, the property will be ignored and have no effect on the paragraph.
When is it appropriate to use frames?
Frames can make navigating a site much easier. If the main links to the site are located in a frame that appears at the top or along the edge of the browser, the content for those links can be displayed in the remainder of the browser window.
What happens if the number of values in the rows or cols attribute doesn’t add up to 100 percent?
The browser sizes the frames relative to the total sum of the values. If the cols attribute is set to 100%, 200%, the browser displays two vertical frames with the second being twice as big as the first.
No comments:
Post a Comment