Nextgenweb: Basic HTML Interview question and answers for beginners

What is HTML
HTML is an abbreviation that stands for HyperText Markup Language. It is the language of web pages—the markup language that browsers read to render web pages.

HTML refers to a markup language that has several versions. And web browsers and other user agents have varying levels of support for these versions. In general, the earlier a version is, the more browser support there is for that version.

HTML is made up of elements (often called tags) that build the contents of a web page. The differences between HTML and other programming languages include:

HTML is not compiled. It is written and used without any changes being done to it. I starts out a text file, and is still a text file when a browser or user agent interprets it.
HTML is human readable. While some other programing languages can be read by people (and not just machines), many times you have to learn the language to really understand it. In comparison, most HTML beginners can at least guess what an <img /> tag does, for example.

Define URL?

Uniform Resource Locator; an address that specifies the location of a file on the Internet

Explain the general layout HTML documents ?

Following is how the basic HTML layout:
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>

What are various list tags in HTML?

<li>
Defines a list item
<ol>
Defines an ordered list
<select>
Defines a selectable list
<ul>
Defines an unordered list
</ul></select></ol></li>

What are the different way in which website layout can be made?

Website layout describes how the webpage of the website will look. It describes the content that has to be placed in columns i.e. it can be either one or many columns. There are two ways in which different layout can be created and these are called as using table method or using div method. There are basically two tags that are used <table> and <div>.
<table>: using this is the simplest way to create a layout.
The example code is given as:
<html>
<body>
<table width=”500″ border=”0″>
<tr>
<td colspan=”2″ style=”background-color:#FFA500;”>
<h1>Main Title</h1>
</td>
</tr>
<tr>
<td colspan=”2″ style=”background-color:#FFA500;text-align:center;”>
This is my page: it is used as a block element and is defined to group HTML elements together in one. The <div> tag is used to create multiple layouts. The sample code is given as:
<html>
<body>
<div id=”container” style=”width:500px”>
<h1 style=”margin-bottom:0;”>Main Title of Web Page</h1></div>
<b>Menu</b><br />
</body>
</html></div>

</div></table></table>

What are the various text formatting tag in HTML?

</b>Defines bold text
<br />
Inserts a single line break
<center>
Deprecated. Defines centered text
<em>
Defines emphasized text
<hr />
Defines a horizontal rule
<i>
Defines italic text
<p>
Defines a paragraph
<u>
Deprecated. Defines underlined text
</ul></p></i></em></center></b>

Explain anchor tag in HTML ?

The <a> tag defines an anchor. It can be used to create a link to another document by using the href attribute or to create a bookmark inside a document, by using the name or id attribute. </a>

What is image mapping in HTML?

The <a> tag defines an anchor. It can be used to create a link to another document by using the href attribute or to create a bookmark inside a document, by using the name or id attribute. </a>

Explain meta tag in HTML ?

Metadata is data (information) about data.

The tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

The tag always goes inside the element.

The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

What is the importance of Doctype in HTML?

Doctype tag is not a HTML tag, it is just an instruction that is passed to the web browser to check for the information that is being provided by the markup language in which the page is written. Doctype is sometimes referred as Document type definition (DTD) that describes some rules that has to be followed while writing the markup language so to make the web browser understand the language and the content correctly. Doctype is very important to be placed in the beginning of the HTML and before the <html> tag to allow easy rendering of the pages that are used.</html>

Differentiate different types of Doctypes from one another?

Doctype helps the web browser to correctly render the web pages. There are different types of Doctype that are available and they are as follows:
Strict Doctype: it consists of all the HTML elements and it is also known as DTD (Document type definition) but it doesn’t include the presentational and deprecated elements i.e. font, center, etc. Framesets related elements are also not allowed in this. For example:
< !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
Transitional Doctype: it consists of all the HTML elements and attributes. It is also known as DTD (Document type definition). It includes the presentational and deprecated elements i.e. font, center, etc. Framesets related elements are also not allowed in this. For example:
< !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
Frameset Doctype: it consists of all the HTML elements and attributes. It is also known as DTD (Document type definition). It includes the presentational and deprecated elements i.e. font, center, etc. Framesets related elements are also allowed in this. For example:
< !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>

Why it is important to set the meta information?

Metadata is the data about the data or the information about the data. There is a tag that is being provided for the HTML document. This information won’t be displayed anywhere and will not be visible to the user. It will be parsable by the machine which will parse it according to the requirement. It consists of the elements that are related to the page description, keywords, document related element. The tag that is being used resides in the section in HTML. The meta information is being used by the web browser or by the search engines to rank and let the user find the pages easily. The meta information is being written as:

What are the different types of entities in HTML?

The different types of entities that are present in HTML are < (less than) or > (greater then). It allows the special or the reserved characters are matched with the source code and then it is saved. The sample code is being given by:
&entity_name;
OR
&#entity_number;
There is always a concept associated with it that will create more simpler provision to avoid the spaces that are being coming in between the characters or the text.

What does the elements mean in syntax given for URL in HTML?

URL stands for Uniform Resource locater. This helps just like the Internet pooling concept where the people recognize themselves and others people connected together with each other. URL allows a document to be located on World Wide Web (www). The example of the URL is as follows with the complete element:
scheme://host.domain:port/path/filename
This code has got with no meaning but there are some elements that are defined:
• scheme- is the type of internet service. In this HTTP can be used which has to most common type.
• Host – it is used to control the host name and fetch the information from other templates as well.
• Domain – it defines the internet domain that is google.com.
• :port – it defines the port number on the Host where the default port that is being used is 80.
• path – this defines the path of the server that consists of a hierarchical directory structure.
• filename- it defines the unique name for the file or the document that saves it.

How to add helper plug-ins on the webpage using HTML?

A helper application is a program that is used in the browser to help the users with lots of information that is not being provided with the applications. These helper application is known as Plug-ins. Helper application includes audio, video, etc. The tag that is used to embed is

What is the purpose of canvas in HTML?

Canvas is an element that is used for the graphics for the web page. It uses JavaScript to bring the graphics functionality live. It allows easy way to draw the graphics and use different types of tools to create drawing on the web page. Canvas is just a rectangular area that controls the pixel of every element that is used in the web page. Canvas uses methods like paths, circles, etc. The canvas element will be used as follows:
<canvas id=”can” width=”200″ height=”100″></canvas>
The canvas element includes id, width and height settings and with the javascript it gets used like:

What is the purpose of iframe in HTML?

Iframe is called as inline frame that places one HTML document in a frame. It is different from the object element as the inline frame can be made in the target frame. The target frame consists of the links that is defined by other elements used in the web page. Iframe is used to focus on printing or viewing of the source. Iframe can be used by the user in those browser that supports it. If they have used iframe also then the incompatible browser won’t display the actual but display of the alternative text will take place. The content of the iframe is being written in between <iframe>…… </iframe>. The sample example is given below:
<iframe src=”http://www.w3schools.com”></iframe>

What are the different types of frames tags used in HTML?

Frames allow the display of the document visually. It allows the window to be split into segments that can contain multiple different documents. It can utilize many resources and repeat some parts of the layout that can be used in a frame. Frames consists of different types of tags and they are as follows:
<frameset>…</frameset>: it consists of the frames that includes the layout using the attributes of rows and cols.
<frame> or <frame />: it conists of a single frame and gets included within the frameset. It is always come up with a src attribute that provides the source that has to be shown in a particular frame.
<noframes>…</noframes>: it consists of the normal HTML content that is used to show no frames.
<iframe>…</iframe>: it consists of internal frame that will contain the src attribute to include the frame that is internal to a particular region
</frame>

Write a code to change the color of the background or text? Explain the elements involved in it.

To change the color of the background of the body or the text there is a tag that has to be included where there are some elements that has to be used to set the properties of it. The code is as follows:
<html><head>
</head>
<body BGCOLOR=”#ffffff” TEXT=”#000000″ LINK=”#000000″ VLINK=”#000000″ ALINK=”#ffff00″>
</body>
</html>
The elements that are used in this tag is as follows:
BGCOLOR: represents the background color which will be applied totally on the body if there is no other bgcolor used with any other tag internally.
TEXT: represents the color of the text that will be applied to the complete text present in the body.
LINK: represents the color of all the text links that are present inside the body.
VLINK: represents the color of the links that has already been visited.
ALINK: represents the color of the text links that will change when the page accessed will be active.

What is the main function of <pre> tag in HTML?

<pre>tag defines the pre-formatted text that is used to display the text with the fixed width and uses a predefined fonts and it keeps both spaces and line breaks separate and show the text as it is. The code that can be used to display the text that can be written in whatever way the user wants is as follows:</pre>
<pre>Text in a pre element —-//
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks</pre>

How can tables be made nested in HTML?

Tables can be made nested by making it come in another table. This consists of many attributes and tags that can be used in nesting the tables. The tags that are used for the table is as follows:
<tr>: This is the tag that has to be written after the

tag and before any other tags. This makes a table row that store the data elements.
<td>: This tag can be used anywhere and it consists of the data that has to come on the website.
<th>: This tag consists of the table heading.
The sample code will explain the above explanation much better:
<table>
<tr>
<td>this is the first cell</td>
<td>this is the second cell
<table> <!–Starting of the table that is embedded inside another table–>
<tr>
<td>this is the first cell second table</td>
<td>this is the second cell of second table</td>
</tr>
<table>
</td>
</tr>
</table>
</th></td></table></tr>

How can tables be used inside a form? Explain with an example.

A form can consist of the table and its properties to display it on the web page. The form is placed with the <td> tag that includes the data of the table. This can also be used to position the form in relation to the other content. The table will be added within the form. The code is given as:

<form ACTION=”[URL]“>
<table>
<tr>
<th>This is the table heading</th>
<td><input TYPE=”text” NAME=”account”/></td>
</tr>
<tr>
<th>This is another heading for a button</th>
<td><input TYPE=”password” NAME=”password”/></td>
</tr>
<tr>
<td></td>
<td><input TYPE=”submit” NAME=”Log On”/></td>
</tr>
</table>
</form>
In this the form elements are getting used inside the table tags like <input type/>, <text area>, etc. The form input will be given using the <td> tag that displays the table data and related information accordingly.
</td></text></td>

What are the different ways to use different colors for different links or same link?

The presentation is being done by CSS that is used with the HTML, to give the style to the HTML content. This is called as style sheet. The links can be specified in different colors by the following way:

a:link {color: blue; background: white}
a:visited {color: purple; background: white}
a:active {color: red; background: white}

This is the CSS properties that is being defined to set the color for the links that are active, visited and normal link. User can use the class attribute in the tags like <a> to use it and see the change in the link color. It is shown as:

</a><a class=”exp” href=”[URL]“>example of the link</a>

The style sheet can be modified according to the code that is being written. The coding will include:

a.exp:link {color: yellow; background: black}
a.exp:visited {color: white; background: black}
a.exp:active {color: red; background: black}

How to upload files using HTML to website?

The uploading of files requires some necessary configuration like:
An HTTP server that acts as a transaction between the user and the server.
Access to the directory of cgi-bin that consists of the receiving script. There are some scripts that are already available.
Form for the implementation and the coding of it will be like:
<form method=”post” enctype=”multipart/form-data” action=”up.cgi”>
The form that has to be uploaded will be done by the following given code:
<input type=file name=upload/><br />
This tag will contain the file name that has to be uploaded on the website.
Any remarks about the file will be written like:
<input type=text name=remark/><br />
<input type=submit value=Press/> This form will allow user to upload their own file in an easy way.
</form>

There is a module named as Perl CGI.pm that supports the file upload.

Write a program to include the custom button with the form

Custom button can be given just by putting the image with the button or by using any other button then normal. Usually the button is being made by the <input /> tag like:
<input type= “submit” value= submit/>
An image can be used for the custom button as an input type like:
<input type =”image” value = submit/>
The input in the image format defines the graphical button that has to be placed in the form of submit on the web site. Image input type return the x-y coordinates rather than the normal text as a value. The attributes of Value and Alt will be used to set the name value attribute. The example for the same will be given as:
<input type=”image” name=”submit” alt=”submit” value=”submit” src=”submit.jpg”/>

How to prevent the display of “Getting framed in HTML?

Getting framed refers to the document that is being displayed in someone else’s frameset in your HTML. This will be password protected and the permissions has to be taken before inserting the frameset. The framing of the document can be avoided by using TARGET=_top applied to all the links that will lead to the document that are outside the scope of a particular user without permission. A javaScript can be used that will automatically handle the request to remove the existing framesets. This can be given as:

How to include a frameset inside another frameset?

One frameset can be defined inside another frameset if the accessing permission are provided directly. The frameset can be stored by using the JavaScript in the document that is being written by the user and the script is as follows:

How to update two frames at the same time using HTML?

To update the two frames at the same time there is a requirement for the HTML based techniques that links the documents with a new frameset document. It specifies a new frames that can be combined with other frames. There is a JavaScript that will be used to link the updated frame and the method that will be used is onClick(). HTML based technique allow the new frameset document with the attribute of TARGET=_top. In this the first frameset document uses a secondary frameset document that will be defined as the nested frameset. The following code explains it further:

<frameset cols=”*,3*”>
<frame src=”first.html” name=”first_frameset”></frame>
<frame src=”second.html” name=”sec_frameset”><noframes>
</noframes>
</frame></frameset>
The link that is given in the TARGET= “sec_frameset” attribute it replaces all the frames that is defined as second.html.

Why do we use HTML?

• compact and efficient language
• extensible to encompass new media formats
• standardised
The web is merely another type of medium, just like television, newspapers or radio, for transmitting information. The HTML language was designed to be an efficient way of achieving this transfer of data, and was designed to be evolve as new media formats were created, whilst remaining predictable to use.

What is the World Wide Web?

20, 2012

• web servers, which store the web pages
• web documents, the pages themselves
• web clients, browsers of many types
The Web consists of many millions of internet-connected computers, each with information on them that their owner has decided to share. These documents can be formed of anything from plain text to multimedia or even 3D objects. These computers, called servers, deliver this information over the Internet to client computers (such as your PC at home) using a protocol called HTTP (HyperText Transfer Protocol). The HTTP protocol is very simple; essentially it just provides a mechanism that allows a client to request a document, and a server to send that document.
As the web has become more and more popular, its capabilities have increased to include such things as graphics, animations, scripts and even complete computer programs, all embedded into the pages of the documents. Essentially, the web is the easiest to use of all the internet toolkit—this is partly why it has become so popular. Various mechanisms allow the viewer to move around (navigate) the document easily. Clicking on a hyperlink moves you to another part of the document, or to another document altogether.
Introductory viewing
For a little historical background, take a look at the following video, available on YouTube:
• The Invention of the World Wide Web, an excerpt from: “A History of Modern Britain” (2007) Television programme, BBC1, 19 June.

What are the Web’s unique features?

• universal readership
• hyperlinks/hypertext/hypermedia
• authoring for computers and humans
• availability of information
• felxibility to adapt to new forms of media
The web has become the most predominant of the new digital media, and has provided the mechanism for many new forms of publishing.

What are Hypertext and Hypermedia?

• linked documents create a “web of information”
• choice allows reader to choose path through text
• not a new idea – footnotes, bibliographies!
• technology has given links new power
One of the most powerful features of the web is the ability to link documents together using hyperlinks. On clicking a hyperlink (usually underlined), the browser tries to access the linked document, providing an almost instantaneous cross-referencing system. This creates a non-linear form of text, known as hypertext. Web pages can also contain multimedia content that can also be hyperlinked, termedhypermedia. Many theorists believe that hyperlinks change the way we view and read texts, and certainly the element of choice that hyperlinks give the reader create a very different reading experience. The idea of hypertext has been around at least as long as books have contained footnotes or external references/bibliographies, but the computer and the Internet make following hyperlinks instantaneous (well, almost).
Hypertext Markup Language is designed to be:
o easy for humans to use to present information
o quick to author
o viewable on many computer devices and “platforms”

Availability of information
• Information available 24/7
• Information often updated in real time
• Access for all on an equal basis
Surface and deep web
• Only a small part of the web is publicly accessible (the Surface Web)
• Much of the web is hidden inside intranets and commercial sites
• This “Deep Web” is often not searchable
• Deep web is possibly many times the size of surface web

How does the web work?

• Web servers and web browsers communicate via HTTP
• HTTP ensures that all parts of the web page are delivered
• Web browser decides how these items are displayed
The backbone of the web is the network of webservers across the world. These are really just computers that have a particular type of software running on them – software that knows how to speak the HTTP protocol and knows which information stored on the computer should be made accessible through the web.
It’s possible to turn almost any computer into a webserver by downloading and installing server software (the most popular is Apache, seehttp://www.apache.org/), though it’s not recommended unless you know what you’re doing!
Figure 2.1. How HTTP works: retrieving a web page

[Source: http://www.ic.unicamp.br/~921234/IntroZope/slide-04.html]

The HyperText Transfer Protocol (HTTP) is actually quite simple. The web browser (or client) makes a request of a webpage to the server, and the webserver passes the page back to the browser (see Figure 2.1, “How HTTP works: retrieving a web page”. More cleverly, it also passes back any images, sounds or other media items back to the browser too.
The web browser is also particularly clever in the way it displays what it retrieves. Web pages are written in HTML, and the browser knows how to display these correctly, whether you have a huge flat screen or a tiny screen on a handheld device or phone. The HTML language gives the browser hints on how to display things, and the browser decides the final layout itself.

How do web addresses work?

• URIs and URLs
• breaking down a URL
• aliases and redirects
The key to accessing all this information is the URI – the Uniform Resource Identifier. Each web page has a unique address, specified by its URL, which tells the client/browser how to access the page. See the Wikipedia entry for URI.
Take, for example: http://piglet.exeter.ac.uk/pallas/index.html
Example 2.1. The parts of a URL
http:
the method of “delivery” (ftp, file, etc.) Secure sites use https, an encrypted form on HTTP. The :// is important to distinguish this from the server name that follows
piglet.ex.ac.uk:
the server computer the document is stored on. This could also be referred to by its “dotted-quad” IP number, e.g.144.173.116.100. Breaking this down further:
piglet
the “hostname” — the name of the individual computer/server. These are usually decided upon by the organisation concerned, and can seem quite random!
exeter
the “organisation” – exeter or ex (domain name = exeter.ac.uk)
ac
the “organisation type” – ac or edu for academic sites, co or com for commercial, gov for government-related sites, org for non-profits, net for network infrastructure. net
uk
the “country code” – uk, fr, de, etc. (there’s no code for USA) – for more details see the Country Codes FAQ
pallas:
the directory/folder
index.html:
the file itself

The slashes (/) are used to separate the parts of the address, in the same way as file locations use backslashes on your own PC. So, for example,
C:\Documents and Settings\gbstring\My Documents\website\hello.html

is equivalent to
file:///c:/Documents%20and%20Settings/gbstring/My%20Documents/↵
website/hello.html

where %20 represents a space character. Note that spaces in filenames work well in Microsoft Windows, but don’t work at all well with many webservers.
Avoid spaces in filenames
You can see from this example that spaces in filenames may work well in Microsoft Windows, but don’t work at all well with many webservers. It’s usually best to avoid anything except alphanumeric characters to name you files, though the hyphen(-) and underscore (_) are usually OK.
There’re a couple of other features of this address that you may come across elsewhere on the web. The “hostname” here ispiglet.ex.ac.uk, but I’ve also set up an ALIAS which points the name pallas to this server, so that we can use

http://pallas.ex.ac.uk/pallas/index.html

to refer to the same page. An alias is defined by your ISP in the DNS (Domain Name System) records, so has to be set up by them.
There’s also a REDIRECT for the default page, i.e. if no page is given in the address, then the webserver will automatically add the pallas/index.html file path to the page. Try typing

http://pallas.ex.ac.uk/

and see what happens.

Why do we use HTML?

Who is making the Web standard?

• HTML language is well-defined by web standards
• W3C organises and ratifies these standards
• HTML is evolving into XHTML (eXtensible HTML)
• XHTML has stricter rules, but greater flexibility
HTML is a standard language, which should mean that all web browsers interpret it in exactly the same way. The standard is decided upon by a large body of volunteers and experts, who oversee its progress and guide its development. This body is managed by the World Wide Web Consortium (the W3C, http://www.w3.org/), and currently recommends the use of HTML 4.01, its latest standard).
One of the reasons that the web is so widely used is that the standardisation of HTML has allowed many developers to produce browser software, for many types of computer. The original definition of HTML was written in a language called SGML (Standard Generalised Markup Language), designed to allow computers to read language definitions easily. This means that HTML is defined very precisely, which is why you need to be equally precise when writing your web pages. If a web page is written in such a way that it conforms to the SGML definition, then it should be readable by all browsers conforming to that definition. Checking that your document conforms to the definition of, say, the HTML 4.01 standard, is called validation, of which more below!
The next generation of HTML, called XHTML, is defined in a cut-down version of SGML called XML (eXtensible Markup Language). XHTML is stricter in its definition of tags (you can’t get away with lazy marking-up, such as missing off closing tags), but it is much more flexible, in that it is much easier for computers to interpret. When a computer reads any kind of document, it must follow a strict pattern or syntax, and the stricter this is, the easier the computer finds the interpretation, even though we as humans may find it difficult to write so accurately. Tools such as Dreamweaver and dedicated XML editors make writing this stricter form of HTML much easier.

Nextgenweb

Pages

Sunday, September 29, 2013

Basic HTML Interview question and answers for beginners

1 comment:

Total Pageviews