HTMLQuestionAnd Answer
HTMLQuestionAnd Answer
H
WEB TECHNOLOGY TRAINER AT JSPIDERS
No, not all HTMLS tags come in pair. For e.g. <img>, <br>
What are some of the common lists that can be used when designing a page?
a) Ordered list
b) Unordered list
c) Definition list
d) Menu list
e) Directory list
- No. The hyperlinks can be applied to both text as well as the images.
- It means that even the images can become clickable links with a capability to take the visitor
to the next page.
- This can be done simply by using <a href> tag.
3.What hierarchy is being followed when in style sheets?
- Here the property will be ignored without having any effect on the paragraph.
5.What is the advantage of using frames?
- No. you can’t hide your source as it is required by the browser to display your document.
7.How will you align a table to the right or left?
- To align the table to the right, you can use <TABLE ALIGN="right">
- To align the table to the left, you can use <TABLE ALIGN="left">
SATHISH.H
WEB TECHNOLOGY TRAINER AT JSPIDERS
- This is because the graphical browser is designed to leave a margin between the display area
and actual content.
- The navigator also leaves some space for the scroll bar on the right side of the display area.
Though, if the page is not long enough, the scroll bar doesn’t appear.
9.You want only a vertical scrollbar and no horizontal scrollbar on your page. How would you
do it?
- This can be done by defining the frame with SCROLLING = auto and having content to just
fit into this frame.
- SCROLLING="yes" gets the scroll bar on both the sides, even when not needed.
- SCROLLING="no" doesn’t get the scrollbars at all, even when they are needed.
10.How do you refer to the .css file in the web page?
- .css file in the web page can be referred with the use of <link> tag.
- It should be kept between <head></head> tag.
Example
- The better way to design the layout of the webpage is by using the <div> tag.
- The <table> tag is used to present the data in tabular format.
13.What is a <dl> tag in HTML?
<table>
<tr>
<td>first cell of the outer table</td>
<td>second cell of the outer table, creating second table inside the first table
<table>
<tr>
<td>first cell of the second table</td>
<td>second cell of the second table</td>
</tr>
</table>
</td>
</tr>
</table>
16.Explain Non Breaking space in HTML.
When we add many spaces in the content then HTML remove all space except one space this is
Non Breaking Space. To overcome this problem we use '& nbsp;'(without space between & and
nbsp;). Suppose we want to add 3 space between two words then we have to use & nbsp; three
time.
Example:
We can link to a location in the middle of an HTML document. Using Following steps:
1. Label the destination of the link : There are two ways of labeling destination using Anchor:
- NAME attribute:
Example:
- ID attribute:
Example:
SATHISH.H
WEB TECHNOLOGY TRAINER AT JSPIDERS
2. Link to the labeled destination : We can link with the destination in the same URL page and
with Different URL page.
Example:
- Cell Padding : It refers to the gap or space between the cell content and cell border or cell
wall.
- Cell Spacing : It refers to the gap between the two cells of same tables.
In HTML cell spacing and padding both are used with Table Border layout.
Example:
3. HTML allows programmer to perform changes in the tags and use attribute minimization
whereas XHTML when user need a new markup tag then user can define it in this.
4. HTML is about displaying information whereas XHTML is about describing the
information.
21.How many types CSS can be include in HTML?
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
3. Internal Style Sheet : Is used when a single document has a unique style.
- Internal styles sheet needs to put in the head section of an HTML page, by using the <style>
tag, like this:
<head>
<style type="text/css">
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}
</style>
</head>
22.What are logical and physical tags in HTML?
- Logical tags are used to tell the meaning of the enclosed text. The example of the logical tag is
<strong> </strong> tag. When we enclosed text in strong tag then it tell the browser that
enclosed text is more important than other text.
- Physical text are used to tell the browser that how to display the text enclosed in the physical
tag.
Some example of the physical tags are: <b>, <big>, <i>
23.Does HTML support Javascripts?
Yes, HTML supports JavaScripts. We can use JavaScript anywhere in the HTML Coding.
Mainly there are four sections where we can add JavaScript in HTML.
SATHISH.H
WEB TECHNOLOGY TRAINER AT JSPIDERS
<ol>
<li> first item </li>
<li>second item </li></ol>
Display as:
1. First item
2. Second item.
<ul>
<li> first item</li>
<li>second item </li></ul>
Display as:
- First item
- Second item.
With HTML5, it is possible for the web pages to store the data locally in the user's browser.
This web storage is much faster and secured than the cookies. Also, a larger amount of data can
be stored without causing any adverse effect to the performance of the website.
The data here is not included with every server request. It is used ONLY when it is asked for. It
is only that particular web page that can access the data stored by itself.
Differentiate between localStorage and sessionStorage objects.
- localStorage object stores the data without an expiry date while sessionStorage object stores
the data only for one session.
- With localStorage object, data will not be deleted when the browser window is closed while the
data is deleted when the browser window closes with sessionStorage objects.
What are the new attributes provided in HTML5 for <form>?
1) autocomplete
– It specifies if a form or input field should have autocomplete as on or off.
– If autocomplete is on, the browser is able to fill the values based on the values filled by the
user earlier.
– autocomplete works for following input types: text, search, url, tel, email, password,
datepickers, range, and color.
2) novalidate
- This is a boolean attribute.
- When present, it signifies that the form-data should not be validated when submitted.
What are the new attributes provided in HTML5 for <input>?
1) autofocus:
- This is a Boolean attribute.
- When present, it means that an <input> element should automatically get focus when the page
SATHISH.H
WEB TECHNOLOGY TRAINER AT JSPIDERS
is loaded.
2) form:
- This attribute specifies one or more forms an <input> element belongs to.
3) formaction:
- This attribute specifies the URL of a file that will process the input control when the form is
submitted.
- This attribute is used with type="submit" and type="image".
- It overrides the action attribute of the <form> element.
4) formenctype:
- This attribute specifies how the form-data should be encoded when submitting it to the server.
- It is used with type="submit" and type="image".
- It overrides the enctype attribute of the <form> element.
5) formmethod:
- It defines the HTTP method for sending form-data to the action URL.
- It is used with type="submit" and type="image".
- It overrides the method attribute of the <form> element.
6) formnovalidate:
- It is a boolean attribute.
- It specifies that the <input> element should not be validated when submitted.
- It is used with type="submit".
- It overrides the novalidate attribute of the <form> element.
7) formtarget:
- It specifies a name or a keyword that indicates where to display the response that is received
after submitting the form.
- It is used with type="submit" and type="image".
9) list:
- It refers to a <datalist> element which contains pre-defined options for an <input> element.
11) Multiple:
SATHISH.H
WEB TECHNOLOGY TRAINER AT JSPIDERS
- It is a boolean attribute.
- It specifies that the user is allowed to enter more than one value in the <input> element.
- It works with the following input types: email and file.
12) pattern:
- It specifies a regular expression that the <input> element's value is checked against.
- It works with the following input types: text, search, url, tel, email, and password.
13) placeholder:
- It specifies a short hint that describes the expected value of an input field.
- It works with the following input types: text, search, url, tel, email, and password.
14) required:
- It is a boolean attribute.
- It specifies that an input field must be filled out before submitting the form.
15) step:
- It specifies the legal number intervals for an <input> element.
- It works with the following input types: number, range, date, datetime, datetime-local, month,
time and week.
Explain HTML background.
The value of the bgcolor can be set in three ways by hexadecimal number, an RGB value and
Color name.
Example:
2. Image Background : In this we set the background of the website by an image. Syntax used
for this is :
<body background=”study.gif”>
SATHISH.H
WEB TECHNOLOGY TRAINER AT JSPIDERS
What is CSS?
CSS stands for Cascading Style Sheets. By using CSS with HTML we can change the look of the
web page by changing the font size and color of the font. CSS plays an important role in
building the website. Well written CSS file can be used to change the presentation of each web
page. By including only one CSS file. It gives web site developer and user more control over the
web pages.
What is difference between HTML and HTML5?
We can insert JavaScript in HTML using <Script tag>. JavaScript can be enclosed in <script
type = text/javascript> and ending with </script>.
Example:
<html>
<body>
<script type="text/javascript">
...JavaScript….
</script>
</body>
</html>
What is the Use of SPAN in HTML and give one example?
Example:
SATHISH.H
WEB TECHNOLOGY TRAINER AT JSPIDERS
<p>
<span style="color:#000000;">
In this page we use span.
</span>
</p>
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.
<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</td>
</tr>
</table>
</body>
</html>
<div> : 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.
<html>
<body>
<div id="container" style="width:500px">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<b>Menu</b><br />
</div>
SATHISH.H
WEB TECHNOLOGY TRAINER AT JSPIDERS
</body>
</html>
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.
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:
1. 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:
2. 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:
3. 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:
Metadata is the data about the data or the information about the data. There is a tag <meta>
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
<head> 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:
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 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.abc.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.
1. <frameset>...</frameset> : It consists of the frames that includes the layout using the
attributes of rows and cols.
2. <frame> or <frame/> : It consists 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.
3. <noframes>...</noframes> : It consists of the normal HTML content that is used to show no
frames.
4. <iframe>...</iframe> : It consists of internal frame that will contain the src attribute to
include the frame that is internal to a particular region.
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 <body> 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>
1. 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.
2. TEXT : Represents the color of the text that will be applied to the complete text present in
the body.
3. LINK : Represents the color of all the text links that are present inside the body.
4. VLINK : Represents the color of the links that has already been visited.
5. 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>
Text in a pre element ----//
is displayed in a fixed-width
SATHISH.H
WEB TECHNOLOGY TRAINER AT JSPIDERS
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.
<TR> : This is the tag that has to be written after the <table> 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>
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.
<FORM ACTION="[URL]">
<TABLE>
<TR>
<TH>This is the table heading</TH>
<TD><INPUT TYPE="text" NAME="account"></TD>
SATHISH.H
WEB TECHNOLOGY TRAINER AT JSPIDERS
</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.
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:
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:
The style sheet can be modified according to the code that is being written. The coding will
include:
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
SATHISH.H
WEB TECHNOLOGY TRAINER AT JSPIDERS
There are some scripts that are already available. Form for the implementation and the coding
of it will be like:
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:
An image can be used for the custom button as an input type like:
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: