HTML Interview Questions and Answers
HTML Interview Questions and Answers
What is HTML?
Answer1: 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. Answer2: 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.
Very. I dont usually use WYSIWYG. The only occasions when I do use Dreamweaver are when I want to draw something to see what it looks like, and then Ill usually either take that design and hand-modify it or build it all over again from scratch in code. I have actually written my own desktop HTML IDE for Windows (its called Less Than Slash) with the intention of deploying it for use in web development training. If has built-in reference features, and will autocomplete code by parsing the DTD you specify in the file. That is to say, the program doesnt know anything about HTML until after it parses the HTML DTD you specified. This should give you some idea of my skill level with HTML.
}
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 short answer is that the form should just have one <INPUT TYPE=TEXT> and no TEXTAREA, though it can have other form elements like checkboxes and radio buttons.
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.
refer to <URL:http://www.yoursite.com/faq/html/all.html> ./ refers to <URL:http://www.yoursite.com/faq/html/> ../ refers to <URL:http://www.yoursite.com/faq/> ../cgifaq.html refers to <URL:http://www.yoursite.com/faq/cgifaq.html> ../../reference/ refers to <URL:http://www.yoursite.com/reference/> Please note that the browser resolves relative URLs, not the server. The server sees only the resulting absolute URL. Also, relative URLs navigate the URL hierarchy. The relationship (if any) between the URL hierarchy and the server's filesystem hierarchy is irrelevant.
a:link {color: blue; background: white} a:visited {color: purple; background: white} a:active {color: red; background: white} Next, identify the links that you want to have different colors. You can use the CLASS attribute in your HTML, like this: <a class="example1" href="[URL]">[link text]</a> Then, in your style sheet, use a selector for links with this CLASS attribute, like this: a.example1:link {color: yellow; background: black} a.example1:visited {color: white; background: black} a.example1:active {color: red; background: black} Alternatively, you can identify an element that contains the links that you want to have different colors, like this: <div class="example2">... <a href="[URL]">[link text]</a>... <a href="[URL]">[link text]</a>... <a href="[URL]">[link text]</a>... </div> Then, in your style sheet, use a selector for links in this containing element, like this: .example2 a:link {color: yellow; background: black} .example2 a:visited {color: white; background: black} .example2 a:active {color: red; background: black} Page Numbers : 1 2 3 4 5 6 7 8 9 10
How can I show HTML examples without them being interpreted as part of my document?
Within the HTML example, first replace the "&" character with "&" everywhere it occurs. Then replace the "<" character with "<" and the ">" character with ">" in the same way. Note that it may be appropriate to use the CODE and/or PRE elements when displaying HTML examples.
7-bit code), expressing characters from the upper half of the 8-bit code by using HTML entities. Working with 8-bit characters can also be successful in many practical situations: Unix and MS-Windows (using Latin-1), and also Macs (with some reservations). Latin-1 (ISO-8859-1) is intended for English, French, German, Spanish, Portuguese, and various other western European languages. (It is inadequate for many languages of central and eastern Europe and elsewhere, let alone for languages not written in the Roman alphabet.) On the Web, these are the only characters reliably supported. In particular, characters 128 through 159 as used in MS-Windows are not part of the ISO-8859-1 code set and will not be displayed as Windows users expect. These characters include the em dash, en dash, curly quotes, bullet, and trademark symbol; neither the actual character (the single byte) nor its nnn; decimal equivalent is correct in HTML. Also, ISO-8859-1 does not include the Euro currency character. (See the last paragraph of this answer for more about such characters.) On platforms whose own character code isn't ISO-8859-1, such as MS-DOS and Mac OS, there may be problems: you have to use text transfer methods that convert between the platform's own code and ISO-8859-1 (e.g., Fetch for the Mac), or convert separately (e.g., GNU recode). Using 7-bit ASCII with entities avoids those problems, but this FAQ is too small to cover other possibilities in detail. If you run a web server (httpd) on a platform whose own character code isn't ISO8859-1, such as a Mac or an IBM mainframe, then it's the job of the server to convert text documents into ISO-8859-1 code when sending them to the network. If you want to use characters not in ISO-8859-1, you must use HTML 4 or XHTML rather than HTML 3.2, choose an appropriate alternative character set (and for certain character sets, choose the encoding system too), and use one method or other of specifying this.
document often contains many navigation links that appear before than actual content. Many versions of Navigator have problems linking to named anchors when they are inside a table that uses the ALIGN attribute. These browsers seem to associate the named anchor with the top of the table, rather than with the content of the anchor. You can avoid this problem by not using the ALIGN attribute on your tables. If you use tables for layout, you can still minimize the related problems with careful markup. Avoid placing wide images, PRE elements with long lines, long URLs, or other wide content inside tables. Rather than a single full-page layout table, use several independent tables. For example, you could use a table to lay out a navigation bar at the top/bottom of the page, and leave the main content completely outside any layout tables.
segments of the URL are similar to the subdirectories and folders in a filesystem. When resolving relative URLs (see the answer to the previous question), the browser's first step is to strip everything after the last slash in the URL of the current document. If the current document's URL ends with a slash, then the final segment (the "file") of the URL is null. If you remove the final slash, then the final segment of the URL is no longer null; it is whatever follows the final remaining slash in the URL. Removing the slash changes the URL; the modified URL refers to a different document and relative URLs will resolve differently. For example, the final segment of the URL http://www.mysite.com/faq/html/ is empty; there is nothing after the final slash. In this document, the relative URL all.html resolves to http://www.mysite.com/faq/html/all.html (an existing document). If the final slash is omitted, then the final segment of the modified URL http://www.mysite.com/faq/html is "html". In this (nonexistent) document, the relative URL all.html would resolve to http://www.mysite.com/faq/all.html (another nonexistent document). When they receive a request that is missing its final slash, web servers cannot ignore the missing slash and just send the document anyway. Doing so would break any relative URLs in the document. Normally, servers are configured to send a redirection message when they receive such a request. In response to the redirection message, the browser requests the correct URL, and then the server sends the requested document. (By the way, the browser does not and cannot correct the URL on its own; only the server can determine whether the URL is missing its final slash.) This error-correction process means that URLs without their final slash will still work. However, this process wastes time and network resources. If you include the final slash when it is appropriate, then browsers won't need to send a second request to the server. The exception is when you refer to a URL with just a hostname (e.g., http://www.mysite.com). In this case, the browser will assume that you want the main index ("/") from the server, and you do not have to include the final slash. However, many regard it as good style to include it anyway. Page Numbers : 1 2 3 4 5 6 7 8 9 10
document will always specify the combination of frames being displayed, which allows links, bookmarks, etc. to function normally.
A go-to-other-page button can also be coded in JavaScript, but the above is standard HTML and works for more readers.
reference of the desired character. We recommend using decimal references; hexadecimal references are less widely supported. In theory these representations are equally valid. In practice, authoring convenience and limited support by browsers complicate the issue. HTTP being a guaranteed "8-bit clean" protocol, you can safely send out 8-bit or multibyte coded characters, in the various codings that are supported by browsers. A. HTML 2.0/3.2 (Latin-1) By now there seems no convincing reason to choose &entityname; versus &#number;, so use whichever is convenient. If you can confidently handle 8-bit-coded characters this is fine too, probably preferred for writing heavily-accented languages. Take care if authoring on nonISO-8859-based platforms such as Mac, Psion, IBM mainframes etc., that your upload technique delivers a correctly coded document to the server. Using &-representations avoids such problems. B. A single repertoire other than Latin-1 In such codings as ISO-8859-7 Greek, koi8-r Russian Cyrillic, and Chinese, Japanese and Korean (CJK) codings, use of coded characters is the most widely supported and used technique. Although not covered by HTML 3.2, browsers have supported this quite widely for some time now; it is a valid option within the HTML 4 specifications--use a validator such as the WDG HTML Validator or the W3C HTML Validation Service which supports HTML 4 and understands different character encodings. Browser support for coded characters may depend on configuration and font resources. In some cases, additional programs called "helpers" or "add-ins" supply virtual fonts to browsers. "Add-in" programs have in the past been used to support numeric references to 15-bit or 16-bit code protocols such as Chinese Big5 or Chinese GB2312. In theory you should be able to include not only coded characters but also Unicode numeric character references, but browser support is generally poor. Numeric references to the "charset-specified" encoding may appear to produce the desired characters on some browsers, but this is wrong behavior and should not be used. Character entities are also problematical, aside from the HTMLsignificant characters <, & etc. C. Internationalization per HTML 4 Recent versions of the popular browsers have support for some of these features, but at time of writing it seems unwise to rely on this when authoring for a general audience.
frameset author forgot to use TARGET="_top" when linking to your document) or intentionally (the frameset author wanted to display your content with his/her own navigation or banner frames). To avoid "framing" other people's documents, you must add TARGET="_top" to all links that lead to documents outside your intended scope. Unfortunately, there is no reliable way to specify that a particular document should be displayed in the full browser window, rather than in the current frame. One workaround is to use <BASE TARGET="_top"> in the document, but this only specifies the default target frame for links in the current document, not for the document itself. If the reader's browser has JavaScript enabled, the following script will automatically remove any existing framesets: <script type="text/javascript"> if (top.frames.length!=0) { if (window.location.href.replace) top.location.replace(self.location.href); else top.location.href=self.document.href;
}
</script> An alternative script is <script type="text/javascript"> function breakOut() { if (self != top) window.open("my URL","_top","");
}
</script> </HEAD> <BODY onLoad="breakOut()">
<body background="imagefile.gif" bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#000080"> If you specify a background image, you should also specify text, link, and background colors since the reader's default colors may not provide adequate contrast against your background image. The background color may be used by those not using your background image. Authors should not rely on the specified background image since browsers allow their users to disable image loading or to override document-specified backgrounds.
What is the difference between the HTML form methods GET and POST?
The method parameter specifies which method the client is using to send information to the WEB server. The method determines which parameter you will find the CGI request data in: * POST - post_args * GET - httpargs
How do I rename all the files from .htm to .html after copying them from a PC to a UNIX machine?
UNIX's mv (`move') command won't handle wildcard filenames. However, there's a program called htmaddl (for `HTM-add-"L"'), so you can login and type htmaddl. This will rename all .htm files to .html
If you haven't got this program on your UNIX machine, you can type it into a file called htmaddl: #! /bin/sh for f in *.htm; do base=`basename $f .htm` mv $f $base.html done After saving it and exiting your editor, make it executable by typing the command chmod ugo+x htmaddl Best of all, move it into your ~/bin directory, or ask your WebMeister to put it in /usr/local/bin so everyone can use it.
I'm trying to `include' a HTML document in another document...Is there a way to do this?
Yes, there are several ways to do this. But remember, HTML is not a programming language - it doesn't have `directives': it's a markup language, so trying to compare it to C or Pascal is not going to be very meaningful. SGML already provides the standard way to do this, using an entry in the DocType Declaration for a file: <!doctype html public "-//IETF//DTD HTML 3.0//EN" [ <!entity foo system "bar.html"> ]> ... and then later when you want to include the file ... &foo;
This is the General Entity mechanism used universally in normal SGML work and does exactly what is wanted, with the added benefit that you can have multiple occurrences of &foo; if you need to include some text at more than one place. Unfortunately none of the browsers except Panorama support it, basically because very few of the programmers who write browsers bothered to read up on what can be done. * The second way is to use the facilities of your server. This has to be enabled by someone with access to the server configuration files (ask your WebMeister). For example, the NCSA server lets you embed a command inside an SGML comment: <!--#exec cmd="cat myfile.html"--> Provided this occurs in a file with a special file type (eg .shtml, and this is what has to be specified in the server configuration), the server will parse the file and send out the result of the command embedded in the document. * There is in fact a vastly easier way to do this. SGML provides a PI mechanism (Processing Instruction) in the form: <?cat myfile> SGML/HTML couldn't care what you put inside (except it must not, for obvious reasons, contain the `>' character!). This would be a great way to specify a page break, for example: suppose you were processing an SGML file using PostScript, you could say <?showpage>...but again, none of the browsers except Panorama support this, again because they guys who write them have never bothered to actually read up on how SGML works.
The colors on my page look different when viewed on a Mac and a PC.
The Mac and the PC use slightly different color palettes. There is a 216 "browser safe" color palette that both platforms support; the Microsoft color picker page has some good information and links to other resources about this. In addition, the two platforms use different gamma (brightness) values, so a graphic that looks fine on the Mac may look too dark on the PC. The only way to address this problem is to tweak the brightness of your image so that it looks acceptable on both platforms.
browser and the draft specification has now expired. You can simulate a tab or indent in various ways, including using a transparent GIF, but none are quite as satisfactory or widely supported as an official tag would be.
How do I make sure my framed documents are displayed inside their frameset?
When the sub-documents of a frameset state are accessed directly, they appear without the context of the surrounding frameset. If the reader's browser has JavaScript support enabled, the following script will restore the frameset: <SCRIPT TYPE="text/javascript"> if (parent.location.href == self.location.href) { if (window.location.href.replace) window.location.replace('frameset.html'); else // causes problems with back button, but works window.location.href = 'frameset.html';
}
</SCRIPT> A more universal approach is a "restore frames" link: <A HREF="frameset.html" TARGET="_top">Restore Frames Note that in either case, you must have a separate frameset document for every content document. If you link to the default frameset document, then your reader will get the default content document, rather than the content document he/she was trying to access. These frameset documents should be generated automatically, to avoid the tedium and inaccuracy of creating them by hand. Note that you can work around the problem with bookmarking frameset states by linking to these separate frameset documents using TARGET="_top", rather than linking to the individual content documents.
<frame src="frameset2.html" name="Display"> <noframes> <!-- Alternative non-framed version --> </body></noframes> </frameset> A link can now use the TARGET="Display" attribute to replace simultaneously all the frames defined by the frameset2.html document. The JavaScript-based solution uses the onClick attribute of the link to perform the secondary update. For example: <a href="URL1" target="Frame1" onClick="top.Frame2.location='URL2';">Update frames The link will update Frame1 with URL1 normally. If the reader's browser supports JavaScript (and has it enabled), then Frame2 will also be updated (with URL2).
frame should be used to display the link. (The value of the TARGET attribute should match the value of the target frame's NAME attribute.) For example: <a target="content" href=...> To target a form submission, use the TARGET attribute of the FORM element, like this: <form target="content" action=...> Note that when forms are processed entirely by JavaScript, the target frame must be specified in the JavaScript. The value of the TARGET attribute is irrelevant. Normally, the default target frame is the current frame ("_self"). To change the default target for every link/form on the page, use the TARGET attribute of the BASE element, like this: <base target="content">
When I try to upload my site, all my images are X's. How do I get them to load correctly?
They are a few reasons that this could happen. The most common are: 1. You're attempting to use a .bmp or .tif or other non-supported file format. You can only use .gif and .jpg on the web. You must convert files that are not .gif or .jpg into a .gif or .jpg with your image/graphics program. 2. You've forgotten to upload the graphic files. Double-Check. 3. You've incorrectly linked to the images. When you are starting out, try just using the file name in the <img> tag. If you have cat.jpg, use img src="cat.jpg">. 4. Image file names are case-sensitive. If your file is called CaT.JpG, you cannot type cat.jpg, you must type CaT.JpG exactly in the src. 5. If all of the above fail, re-upload the image in BINARY mode. You may have accidentally uploaded the image in ASCII mode.
browsers display your plain HTML source, then most likely your web server is sending the document with the MIME type "text/plain". Your web server needs to be configured to send that filename with the MIME type "text/html". Often, using the filename extension ".html" or ".htm" is all that is necessary. If you are seeing this behavior while viewing your HTML documents on your local Windows filesystem, then your text editor may have added a ".txt" filename extension automatically. You should rename filename.html.txt to filename.html so that Windows will treat the file as an HTML document.
Why do my links open new windows rather than update an existing frame?
If there is no existing frame with the name you used for the TARGET attribute, then a new browser window will be opened, and this window will be assigned the name you used. Furthermore, TARGET="_blank" will open a new, unnamed browser window. In HTML 4, the TARGET attribute value is case-insensitive, so that abc and ABC both refer to the same frame/window, and _top and _TOP both have the same meaning. However, most browsers treat the TARGET attribute value as casesensitive and do not recognize ABC as being the same as abc, or _TOP as having the special meaning of _top. Also, some browsers include a security feature that prevents documents from being hijacked by third-party framesets. In these browsers, if a document's link targets a frame defined by a frameset document that is located on a different server than the document itself, then the link opens in a new window instead.
How do I make a frame with a vertical scrollbar but without a horizontal scrollbar?
The only way to have a frame with a vertical scrollbar but without a horizontal scrollbar is to define the frame with SCROLLING="auto" (the default), and to have content that does not require horizontal scrolling. There is no way to specify that a frame should have one scrollbar but not the other. Using SCROLLING="yes" will force scrollbars in both directions (even when they aren't needed), and using SCROLLING="no" will inhibit all scrollbars (even when scrolling is necessary to access the frame's content). There are no other values for the SCROLLING attribute.