HTML and CSS questions for Computer Science and MCA students

Write a code in HTML that displays the HTML form as shown in below figure.

Code:

<!DOCTYPE html>
<html>
<body>
<form action="abc.html" method="POST">
<fieldset>
<font size = "5"><b>Send e-mail to someone@example.com:</b></font><br><br>
Name: <br>
<input type="text" name="Name" value="your name" size="10"><br><br>
E-mail: <br>
<input type="text" name="email" value="your email" size="10"><br><br>
Comment: <br>
<input type="text" name="comment" value="your comment" size="30"><br><br><br>
<button type="button"><u>S</u>end</button>
<button type="reset"><u>R</u>eset</button>
</fieldset>
</form>
</body>
</html>

Output:

HTML output

Explain types of Style sheets.

What is Style Sheet?

It is a definition of a document's appearance in terms of elements such as the default typeface, size, color for headings and body text etc.
The Style Sheet definitions created with a CSS file can be inserted into HTML documents.
A Cascading Style Sheet is Style Sheet which is used for describing the presentation of a document written in a markup language.

Types of Style Sheet

There are three types of Style Sheet:
1. Internal
2. External
3. Inline

1. Internal

It can be placed inside the <head> tag.
It defines the Style Sheet rules using <style> tag.
It can be used only for the web page in which they are embedded.

Example:

<html>
<head>
<style>
h2 {color: blue;}
</style>
</head>
<body>
<h2>CareerRide Info</h2>
</body>
</html>

Output:

CareerRide Info

2. External

It is declared in an external file with a .css extension.
The external Style Sheets are called using the <link> tag.
The <link> tag takes three attributes:

1. rel:

2. type:

3. href:

This <link> tag should be placed in <head> tag.

Example:

3. Inline

It can be directly placed in the HTML element.
In Inline Style Sheet, we cannot use the Style Builder to make an Inline Style Sheet.
It can be declared within individual tags and affected on those tags only.
This Style Sheet is declared with a “style” attribute in a <style> tag.

Example:
<h2 style = “color:blue;”>CareerRide Info</h2>

CareerRide Info

Which type of CSS is good for developer & Why?

Web developers always need some CSS tools to simplify their job.
Now a day, there are various tools which act as time savers for the developers and aid the developers with modern designs and functionality.
There are a number of CSS tools and generators available for the web developers to help them in working smoothly.
External CSS is good for the developer to develop the CSS. Because it takes only link of that particular CSS where you can write all the designing part which is going to be used in your web page.

Style Sheet properties:

CSS Style Sheet properties retrieves an interface pointer.
It provides access to the Style Sheet object's properties and methods.

Following are the Style Sheet properties:

Property	Description
CSS Background	A shorthand property for setting all the background properties in one declaration.
CSS Text-align	Specifies the horizontal alignment of text.
CSS Font	Sets all the font properties in one declaration.
CSS Border	Sets all the border properties in one declaration.
CSS Outline	Sets all the outline properties in one declaration.
CSS Margin-bottom	Set the bottom margin for a <p> element.
CSS Padding-bottom	Set the bottom padding for a <p> element.
CSS List-style	Specify all the list properties in one declaration.
CSS Table-layout	Sets the layout algorithm to be used for a table.

Explain the two tags : <DIV> and <SPAN>.

Sr. No.	<DIV>	<SPAN>
1.	It defines a division in a web page.	It makes no visual difference in the page, unless customized with the style attribute.
2.	It is a block element. The default value is “block”.	It is an in-line element.
3.	It is used while creating CSS based layouts in HTML.	It is used to stylize text. The in-line feature makes it easy to use custom styles without changing the layout.
4.	By default, a line break is placed before and after this element.	No line breaks by default, but this can be achieved if we change its in-line nature by specifying in the style attribute to “display:block”.
5.	It is used for defining a section of your document.	It is used for grouping and applying styles to in-line elements.
6.	Example: <DIV class= “code”>CareerRide Info Pvt. Ltd.</DIV>	Example: <SPAN style= “color:#FF0000;”>CareerRide Info Pvt. Ltd.</SPAN>
7.	It is the generic container for flow content, which does not represent anything.	It is a generic in-line container for phrasing content, which does not represent anything.

Explain how & when to use the following HTML elements / tags in a web page for design. Illustrate with suitable example.
i) Frame
ii) Heading
iii) Table

What is HTML?

HTML stands for Hyper Text Markup Language.
It is a language for publishing web pages on the World Wide Web (WWW).
It is a document markup language.
It is not a programming language like C, C++, Java etc.
It is a text document and human readable.

The following HTML tags are used for designing the web pages such as:
i) Frame
ii) Heading
iii) Table

HTML documents can be created by a wide range of tools, from simple plain text editors (such as Windows' NotePad, Mac's TextEdit) to sophisticated WYSIWYG (What You See Is What You Get) authoring tools (e.g., DreamWeaver).

i) Frame

It is an HTML element.
It defines a particular area in which another HTML document can be displayed.
A frame should be used within a <FRAMESET> tag.

<FRAME> Tag Attributes:

Attribute	Description
src	It is used to give the file name that should be located in the frame. Its value can be any URL. For example: src= “/html/abc.html”.
name	It allows you to give a name to a frame. This attribute is used to indicate that a document should be loaded into a frame.
frameborder	It specifies whether or not the borders of that frame are shown. This attribute overrides the value given in the frameborder attribute on the <frameset> tag if one is given. This can take values either 1 (Yes) or 0 (No).
marginwidth	It allows you to specify the width of the space between the left and right of the frame's border and the content. The value is given in pixels. For example: marginwidth = “10”.
marginheigth	It allows you to specify the height of the space between the top and bottom of the frame's borders and its contents. The value is given in pixels. For example: marginheight = “10”.
noresize	By default, you can resize any frame by clicking and dragging on the borders of a frame. It prevents a user from being able to resize the frame. For example: noresize = “noresize”.
scrolling	It controls the appearance of the scrollbars that appear on the frame. It takes values either “Yes”, “No” or “Auto”. For example: scrolling = “no” means it should not have scroll bars.
longdesc	It allows you to provide a link to another page which contains a long description of the contents of the frame. For example: longdesc = “framedescription.html”

<FRAMESET> Tag Attributes:

Attribute	Description
cols (Columns)	It specifies how many columns are contained in the frameset and the size of each column.
rows	It works like the 'cols' attribute and takes the same values, but it is used to specify the rows in the frameset.
border	It specifies the width of the border of each frame in pixels. For example: border = “5”. A value of zero means no border.
frame	It specifies whether a three-dimensional border should be displayed between frames. It takes value either 1 (Yes) or 0 (No). For example: frameborder = “0” specifies no border.
framespacing	It specifies the amount of space between frames in a frameset. It can take any integer value. For example: framespacing = “10” means there should be 10 pixels spacing between each frame

Example:

Output:
frameset tag

ii) Heading

It is used to define the HTML headings.
It represents different sections of a web page content.
The most important heading tag is the <h1> tag and least important is the <h6> tag.
Heading tags are mostly used to differentiate the headings and sub-headings of a page from the rest of the content.
These tags are also known to webmasters as HTML header tags, head tags and SEO header tags.

Things that should not be done with the heading tags:

Do not use heading tags as hidden text. Any hidden text can result in penalties for your site, especially if the hidden part is a component that affects SEO.
Do not repeat heading tags on different pages of your site. It is a good practice to have unique heading tags throughout your site.
Avoid using identical content for both web page's <h1> tag and meta title tag.
Do not use heading tags for styling text, but use them for presenting organized and structured content on pages. Use CSS Style Sheets for the purpose of styling.
Do not stuff your heading tags with keywords.
Do not use more than one <h1> tag on a page.

There are six header tags

<h1> tag defines the most important heading and <h6> tag defines the least important heading.
h1 headings should be main headings, followed by h2 headings, then the less important h3, and so on.

Example

<html>
<body>
<h1>CareerRide Info</h1>
<h2>CareerRide Info</h2>
<h3>CareerRide Info</h3>
<h4>CareerRide Info</h4>
<h5>CareerRide Info</h5>
<h6>CareerRide Info</h6>
</body>
</html>

Output:
header tag

Importance of Heading tags:

Don't use headings to make text BIG or BOLD.
Search Engine Optimization (SEO) that means search engine uses the headings to index the structure and content of the web pages.
It is important to show the document structure.

iii) Table

It represents tabular data or information in rows and columns.
It defines an HTML table.
The <table> tag is used to define the tables.
It is divided into a table row, which is used with the <tr> tag.
The table rows are divided into table data <td> tag and table heading <th> tag.
The table data are the data containers of the table which contains all the HTML elements like text, images, lists etc.

Table Tags:

Tag	Description
<table>	It defines table.
<th>	It defines a header cell in a table.
<tr>	It defines a row in a table.
<td>	It defines a cell in a table.
<caption>	It defines a table caption.
<colgroup>	It specifies a group of one of more columns in a table formatting.
<col>	It specifies a column properties.
<thead>	It specifies a header content in a table.
<tbody>	It specifies a body content in a table.
<tfoot>	It specifies a footer content in a table.

Example:

<html>
<body>
<h1>Result</h1>
<table style="width:100%" border="1">
<tr>
     <td><b>Student Name</b></td>
     <td><b>Subject</b></td>
     <td><b>Marks</b></td>
</tr>

<tr>
     <td>ABC</td>
     <td>Java</td>
     <td>94</td>
</tr>

<tr>
     <td>XYZ</td>
     <td>C++</td>
     <td>80</td>
</tr>

<tr>
     <td>PQR</td>
     <td>VB</td>
     <td>50</td>
</tr>

</table>
</body>
</html>

Output:
table tag

<table> Tag Attributes:

Attribute	Value	Description
border	1 0	It specifies whether or not the table is being used for layout purpose.
align	left center right	It specifies the alignment of a table.
cellpadding	pixels	It specifies that the space between the cell wall and the cell content.
cellspacing	pixels	It specifies that the space between cells.
Width	pixels percentage(%)	It specifies that the width of a table.
bgcolor	rgb(x,x,x) #xxxxxx colorname	It specifies that the background color of a table.
sortable	sortable	It specifies that the table should be sortable.

Multiple Columns:

The colspan attribute is used to make a cell span more than one column.
This attribute specifies the number of columns a cell should span.

Syntax

The “number” specifies the number of columns a cell should span.

Example:

<table border="1">
<tr>
     <td colspan="2" align=center>Department Name</td>
</tr>

<tr>
     <td>Production</td>
     <td>Sales</td>
</tr>
</table>

Output:
multiple column

Multiple Rows:

The rowspan attribute is used to make a cell span more than one row.
This attribute specifies the number of rows a cell should span.

Syntax

The “number” specifies the number of rows a cell should span.

Example:

<table border=1>
<tr><td><b>Department Name</b></td><td><b>Employee Name</b></td></tr>
<tr>
     <td rowspan=2>Production</td>
     <td>ABC</td>
</tr>
<tr>
     <td>XYZ</td>
</tr>
<tr>
     <td rowspan=2>Sales</td>
     <td>PQR</td>
</tr>
<tr>
     <td>LMN</td>
</tr>
</table>

Output:
multiple rows

Explain Cascading Style Sheet and their use.

What is Cascading Style Sheet (CSS)?

It is a style sheet language which is used for describing the presentation of a web page written in a markup language.
It was developed by the World Wide Consortium (W3C).
It describes how HTML elements are to be displayed on screen, paper or in other media.
It specifies the possible style sheets that determine how a given element is presented in a web page.

Why is it important to use Cascading Style Sheet (CSS)?

It is mostly used to define styles for your web pages, including design, layout and variations in display for different devices and screen sizes.
It is created to describe the content of a web page.
It is used to set the visual style of web pages and user interfaces.
It can be applied to any XML document, including plain XML, SVG and XUL.
It removes the style formatting from the HTML page.

Advantages of Cascading Style Sheet (CSS)

It saves a lot of repeated work.
It controls the layout of multiple web pages all at once.
External style sheets are stored in .css files. The look of an entire website can change using with an external style sheet file.
It reduces complexity and repetition in the structural content.
It provides a list of formatting instructions.

Write a short note on HTML text formatting tags with example.

What is HTML?

HTML stands for Hyper Text Markup Language.
It is a language for publishing web pages on the World Wide Web (WWW).
It is a document markup language.
It is not a programming language like C, C++, Java etc.
It is a text document and human readable.

Text Formatting Tags:

Tag	Description	Example and Output
Heading	There are six header tags: h1, h2, h3, h4, h5, h6. <h1> tag defines the most important heading and <h6> tag defines the least important heading.	Example: <h1>CareerRide Info</h1> Output: CareerRide Info Example: <h6>CareerRide Info</h6> Output: CareerRide Info
Bold	It defines bold text.	Example:<b>CareerRide Info</b> Output: CareeRide Info
Italic	It defines italic text.	Example: <i>CareerRide Info</i> Output: CareerRide Info
Underline	It underlines the text.	Example: <u>CareerRide Info</u> Output: CareerRide Info
Strike-out	It puts a line right through the center of the text, crossing it out. It shows that the text is old and no longer relevant.	Example: <strike>ABC Coperation</strike> Output: ~~ABC Coperation~~
Small	It defines small text.	Example: <h2>CareerRide <small>Info</small></h2> Output: CareerRide Info
Font Color	It changes the text color.	Example: <font color=“#000fff”>CareerRide Info</font> Output: CareerRide Info
Emphasis	It is used to emphasize text, usually it appears in italics but can vary according to your browser.	Example: <em>CareerRide Info</em> Output: CareerRide Info
Mark	It defines marked or highlighted text.	Example: <mark>CareerRide Info</mark> Output: CareerRide Info
Subscript	It defines subscripted text.	Example: Career<sub>Ride</sub> Info Output: Career_Ride Info
Superscipt	It defines superscripted text.	Example: Career<sup>Ride</sup> Info Output: Career^Ride Info
Strong	It defines strong text, usually it appears in bold but can vary according to your browser.	Example: <strong>CareerRide Info</strong> Output:CareerRide Info

Explain DHTML with their advantages.

What is DHTML?

DHTML stands for Dynamic Hypertext Markup Language.
It is an umbrella term for a collection of technologies which used together to create interactive and animated web sites.
It is a collective term for a combination of Hypertext Markup Language (HTML) tags and options that can make web pages more attractive.
It allows web documents to look and act like desktop applications or multimedia productions.
It is a combination of web development technologies that are used to create dynamically changing websites.
The first thing that we need to clear about DHTML is that it is neither a language like HTML, JavaScript etc. nor a web standard. It is just a combination of HTML, JavaScript and CSS.
It just uses these languages (HTML, JavaScript, CSS) features to build the dynamic web pages.
DHTML is a feature of Netscape Communicator 4.0, Microsoft Internet Explorer 4.0 and 5.0 and it is entirely a "client-side" technology.

Advantages of DHTML

Dynamic Content: It allows user to change web page content dynamically.
Dynamic Positioning: It provides dynamic positioning of web page elements.
Dynamic Style: It allows user to change the web page's color, font, size or content.
It is a simple feature of making the page dynamic.
It can be used to create animations, games, applications.
It provides a new ways of navigating through the websites.
DHTML use low-bandwidth effect which enhance web page functionality.
Dynamic building of web pages is simple as no plug-in is required.
It facilitates the usage of events, methods, properties and code reuse.

Problems in DHTML

Dynamic HTML can be difficult to develop and debug because of lack of web browser and technological support.
Its scripts may not work correctly with various web browsers.
The web page layout may not display correctly when it is developed to display in different screen size combinations and in different browsers.

HTML and CSS questions for Computer Science and MCA students

Write a code in HTML that displays the HTML form as shown in below figure.

Explain types of Style sheets.

CareerRide Info

CareerRide Info

Which type of CSS is good for developer & Why?

Explain the two tags : <DIV> and <SPAN>.

Explain how & when to use the following HTML elements / tags in a web page for design. Illustrate with suitable example. i) Frame ii) Heading iii) Table

Explain Cascading Style Sheet and their use.

Write a short note on HTML text formatting tags with example.

CareerRide Info

CareerRide Info

CareerRide Info

Explain DHTML with their advantages.

Related Content

Explain how & when to use the following HTML elements / tags in a web page for design. Illustrate with suitable example.
i) Frame
ii) Heading
iii) Table