Scribd
Upload
332 views

New Web1 PDF

Uploaded by

APOORVA
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
332 views

New Web1 PDF

Uploaded by

APOORVA
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 49

Apoorva Publishers 1

1 HTML
1. What is HTML? Explain its Advantages and Disadvantages.

Markup languages are designed for the processing, definition and presentation of
text. The language specifies code for formatting, both the layout and style, within a
text file. The code used to specify the formatting are called tags. HTML is an example
of a widely known and used markup language.

HTML: HTML stands for Hyper-Text Markup Language. It allows us to create web pages.
It does not include any control structure and can produce only static content. A HTML
page consists of various tags that make a web page. The features, advantages and
disadvantages of HTML page are listed below.

Features of HTML:
 It is a formatting language for text and images.
 It allows us to read the content nonlinearly by using hyperlinks to a file.
 HTML is an application of SGML.
 HTML uses markup tags to describe web pages
 It is not case sensitive i.e. code can be written in small case or uppercase letters.
 All the HTML documents have “.html” or “.htm” extension.
 HTML documents can be edited using editors such as notepad or front page.

The advantages of HTML:


 It allows embedding scripts, to generate dynamic content
 It can incorporate images and sounds with the help of HTML tags.
 It facilitates Moving and layered text
 It allows framed documents
 It allows absolute positioning of text and image.
 Spreadsheets, video clips, pdf files can be embedded in HTML documents with the
support of third party plug-ins.

The disadvantages of HTML:


 HTML can produce only static content
 Mathematical typesetting is difficult
B- Com III – Web Programming
2 Apoorva Publishers
 Browser Dependent
 No tabs and other automatic character spacing

2. What is HTML5? What is new in HTML5?

HTML5 was first published in 2008. But it was recommended by W3C in 2014. It
has been standardized and new elements were added and some of the old
elements were deprecated.

New in HTML5:
 The DOCTYPE declaration for HTML5 is very simple:
<!DOCTYPE html>
 The character encoding (charset) declaration is also very simple:
<meta charset="UTF-8">

HTML5 Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>

New HTML5 Elements: The most interesting new HTML5 elements are:
 New semantic elements like <header>, <footer>, <article>, and <section>.
 New attributes of form elements like number, date, time, calendar, and
range.
 New graphic elements: <svg> and <canvas>.
 New multimedia elements: <audio> and <video>.

New HTML5 API's (Application Programming Interfaces): The most interesting


new API's in HTML5 are:
 HTML Geolocation
 HTML Drag and Drop
 HTML Local Storage
B- Com III - Web Programming
Apoorva Publishers 3
 HTML Application Cache

Removed Elements in HTML5: The HTML4 elements like big, center, dir, frame,
frameset, font and few more have been removed in HTML5

3. What are the main steps involved in creating a webpage and how does it get
executed? (Or) Explain the procedure to create HTML document.

The main steps involved in creating a web page or listed below.


1. Creating a web page using HTML or other web programming languages
2. Saving the file and previewing (executing) it in a browser
3. Publishing the web page

1. Creating a webpage: To create a web page, we can use simple text editors or GUI
editors like FrontPage or even MS-Word.
 If we are using an editor like note pad, we need to write the code using HTML
tags as per the requirement.
 If we are using FrontPage, we can place the required elements using drag and
drop methods or using menu options.

2. Saving the file and previewing (executing) in a Browser: When saving a HTML file,
we need to give the file extension as “.htm” or “.html”. To preview a HTML file, we
need to open a browser like Internet Explorer or Netscape navigator and type in
the file name in its location window and press enter key.

3. Publishing the webpage: Publishing becomes very easy using tools like Front Page.
This involves uploading the webpage to a hosting server and be able to access it
through www.

4. Define WWW? (Or) What is Web?

WWW stands for World Wide Web. It is an Internet service developed to incorporate
footnotes, figures and cross-references into online hypertext documents. Hypertext
documents are those in which a user can jump to another location in the same
document or any other document by clicking on some highlighted text. WWW was
created in 1989 at Geneva, Switzerland.

5. Define a Webpage. Give an Example.

 Web page is page of any website that can be accessed through WWW.

B- Com III – Web Programming


4 Apoorva Publishers
 A web page can be designed using HTML, ASP, PHP, XML and etc.
 Web pages are basically hyper-linked documents that allow non linear reading
 Web pages can be dynamic, and they can involve multimedia.
 A web page can also be an interface to a database.

Example: The home page of ‘google.com’ is a webpage.

6. What is a Tag? Explain Tag Properties.

HTML Tags: HTML uses markup tags to describe web pages. HTML markup tags are
usually called HTML tags. The properties of tags are listed below.

 HTML tags are keywords surrounded by angle brackets as in <tag-name>


 HTML tags normally come in pairs like <tag-name> and </tag-name>, such tags are
called paired tags.
 The first tag in a pair is the start tag, the second tag is the end tag
 Start and end tags are also called opening tags and closing tags.
 Some of the tags have only opening tag. These are called empty tags like <BR>,
<HR>.
 Each tag may have attributes in them as in <table id=i1>, here id is attribute and
‘i1; is its value.
 No tag in HTML is mandatory. But, a well written HTML document has <HTML>,
<HEAD> and <BODY> tags.
 Tags are not case sensitive i.e. they may be written in lower or upper case letters.
 Some tags can also be nested within other tags; for example:
<H1> This is my <B> Computer </B> Notes </H1>
 If a browser cannot interpret a tag, it will be simply ignored.
 Tags are also called elements of a HTML document.

Element

<a href="http://www.apoorvacollege.com"> Apoorva </a>

Attribute End Tag


Start Tag
Example: The following program uses two tags: <BODY> and <H1>
<BODY>
<H1> Hello </H1>
</BODY>

7. What is the structure of a HTML page?

B- Com III - Web Programming


Apoorva Publishers 5

A HTML document is basically separated in two parts: the head (HTML head tag) and
the body (HTML body tag). We also add a Document type declaration on top of it to get
the basic document structure and HTML version. The structure of a HTML document is
shown below.

Structure of HTML program:


<! DOCTYPE …> version information
<HTML>
<HEAD>
...information about document, scripts, styles….
</HEAD>
<BODY>
...visible content of document….
</BODY>
</HTML>

 The !DOCTYPE declaration: Every well written HTML document begins with a basic
declaration that defines what type of document it is. This declaration is made using
the !DOCTYPE tag and is to be written at the beginning of the document. It tells the
processing agent and HTML version. Sample is shown below.
<!DOCTYPE HTML>

 <HTML> tag: The html tag acts as a container for the whole document. Every
character in the document should be in between the html start and end tags. The
html tag can also be used to define the language of the contained document
through the "lang" attribute. The content of the html tag is divided in two parts
using the head (HTML head tag) and the body (HTML body tag).

 <HEAD> tag: This section is the document's head. All the information contained in
the document's head is loaded first, before any other thing in the document, as it's
defined before the body segment. It includes tags like title, script, style, meta and
so on.

 <BODY> tag: This is the document's body: The body is the container for the visual
part of a document. All the things written here will be shown when the document
is rendered. Most of the tags in HTML can be inserted in the body section (inside
the HTML body tag) and will take care of the visual aspects of the document.

Example:
<HTML>
<HEAD>
<TITLE> My first Page </TITLE>
B- Com III – Web Programming
6 Apoorva Publishers
</HEAD>
<BODY>
<H1> Hello HTML <H1>
</BODY>
</HTML>

8. What are Attributes? What are the Common or Standard Attributes of HTML tags?

Attributes: Attributes provide additional information about an element (tag). All the
tags can have attributes. And these attributes are always specified in the start tag. The
following are the characteristics of attributes.
 Attributes have default values
 Attributes come in name/value pairs like: attribute-name="value"
 There are some valueless attributes like ‘checked’ in <input> tag.
 Some of the attributes are required in some of the tags. For example, ‘src’
attribute of <IMG> tag is mandatory.
 Attribute names and attribute values are case-insensitive.
 Below is a list of some attributes that are standard (also known as global
attributes) for most HTML elements (i.e. except for- base, head, html, meta,
param, script, style, and title elements)

Attribute Value Description


class classname Specifies a classname for an element
id id Specifies a unique id for an element
style style_definition Specifies an inline style for an element
title tooltip_text Specifies extra information about an element
(displayed as a tool tip)

Example: The following <IMG> tag uses ‘src', 'width' and ‘height’ attributes.
<img src="img_girl.jpg" width="500" height="600">

9. What are Text (Character) formatting tags in HTML? (Or) What are Physical Tags in
HTML?

Formatting tags: Formatting tags are used to apply formatting to the text. They render
the text in different formats according to the tag used. The common formatting tags
are listed below. The listed tags are known as physical tags. Physical tags define how
the text should be displayed in the browser. They control the Physical characteristics of
the text.

Tag Description

B- Com III - Web Programming


Apoorva Publishers 7
<b> Defines bold text
<i> Defines italic text
<u> Defines text that should be stylistically different from normal text,
such as misspelled words
<small> Defines smaller text
<sub> Defines subscripted text
<sup> Defines superscripted text
<del> Strikes off the text indicating deleted text
<ins> Defines inserted text
<mark> Defines marked or highlighted text
<em> Defines emphasized text

Example:
<!DOCTYPE html>
<html> Output:
<body>
<B>Hello </B> <BR>
<I> Hello </I> <BR>
<U> Hello </U> <BR>
H<sub>2</sub>O <BR>
x<sup>2</sup>y <BR>
<del>Hello</strike></del>
<BR>
<em>Hello</em> <BR>
<mark>Hello</mark> <BR>
</body>
</html>

10. Explain Semantic/Structural elements in HTML

HTML5 offers new elements for better document structure:

Tag Description
<article> Defines an article in a document
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or
hide
<dialog> Defines a dialog box or window
<figcaption> Defines a caption for a <figure> element
<figure> Defines self-contained content

B- Com III – Web Programming


8 Apoorva Publishers
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<main> Defines the main content of a document
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range
(a gauge)
<nav> Defines navigation links
<progress> Represents the progress of a task
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
<wbr> Defines a possible line-break

11. Write about Paragraph Formatting tags.

Paragraph Formatting Text: The following tags are used to format a paragraph. When
used, they create new paragraphs by introducing new line to the text written in them.

Tag Description
<div> It defines a division in the document
<p > It defines a paragraph
<pre> Preformatted text, it writes text exactly as it is,
including spaces.
<br> forces the browser to start a new line
<blockquote> Blockquote produces text that is indented in from both
the left and right margins.
<address> This tag is used to enclose information such as
"address, signature and authorship"
<h1>, <h2>,..<h6> Generates headings in different sizes

Example: Output:
<html> New Section
<body>
<div> New Section </div>
<p> I am a paragraph </p> I am a paragraph
<pre>too many spaces</pre>
<blockquote> Note this too many spaces
point</blockquote> Note this point
<address> Ravi, 7/G, Brindavan Ravi, 7/G, Brindavan Colony
Colony </address>
<br> Text in the Next Line

B- Com III - Web Programming


Apoorva Publishers 9
Text in the Next Line
</body>
</html>

12. Explain different Formatting tags in HTML?

Note: Refer to previous two questions.

13. What are Logical Tags in HTML? Explain.

Logical Tags: Logical tag tells how the text is being used. They indicate the 'type' of
content they enclose. They do not determine the display of the text and the browser is
free to determine its display style. There are tags for emphasizing important sections of
text, for definitions and citations, computer output and other data.

Tag Description
<strong> Defines strong text
<em> Defines emphasized text
<ins> Defines inserted text
<del> Defines deleted text
<code> Defines computer code text
<kbd> Defines keyboard text
<samp> Defines sample computer code
<var> Defines a variable
<abbr> Defines an abbreviation
<bdo> Defines the text direction
<address> Defines an address element. This tag is used to enclose
information such as "address, signature and authorship"
<blockquote> Defines a long quotation. Blockquote produces text that is
indented from both the left and right margins.
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term
<mark> Intended to be highlighted

Example: Following lines of code uses some of the above tags. Output is shown.

B- Com III – Web Programming


10 Apoorva Publishers
<html>
<body>
<strong> I am Strong </strong>
<br><em> Emphasized </em>
<br><ins> Text to insert </ins>
<br><del> Deleted Text </del>
<br>
<CODE>for (i=0; i<10; i++) <br>
{printf("%d",i);}</CODE>
<br>Enter <KBD>Q</KBD> to quit
<br><SAMP>Count = 1 </SAMP>
<br><VAR>Percent</VAR>
<br><abbr> XL- Xtra Large
</abbr>
<address> 7/g, Abc Colony
</address>
<bdo> Welcome </bdo>
<blockquote> WELCOME
</blockquote>
<q> Short Quote </q>
<CITE> HTML is simple </CITE>
<br><DFN> IP is Internet
Protocol </DFN>
</body>
</html>

14. Write about different Heading tags.

Heading Tags: Headings are most common type of inclusion in any writing. It can be
used to divide the page into sections. In HTML there are six types of heading tags. <H1>
to <H6>. When we use headings, they automatically appear in new lines. The following
program uses different heading tags.

B- Com III - Web Programming


Apoorva Publishers 11

<html> Output:
<body>
<h1>Hello </h1>
<h2>Hello </h2>
<h3>Hello </h3>
<h4>Hello </h4>
<h5>Hello </h5>
<h6>Hello </h6>
</body>

15. How do you write Comments in HTML documents?

Giving comments is something like providing internal documentation. It is very useful


to include comments, inside the HTML files.

The comment tag is an empty tag in which the comment is placed. The beginning of the
tag is "<!--" and the end of the tag is "-->". Any tags placed within the comment are
ignored by the browsers.
Syntax:
<!-- text -->
Example:
<BODY>
<!-- My First Greetings -->
<H1> Hello </H1>
</BODY>

16. How do you display special characters in HTML?

& ampersand &amp;


’ apostrophe &apos;
> greater-than &gt;
< less-than &lt;
" quote &quot;
© copyright &copy;
B- Com III – Web Programming
12 Apoorva Publishers

— em dash &mdash;
– en dash &ndash;
¼ fraction-1/4 &frac14;
½ fraction-1/2 &frac12;
¾ fraction-3/4 &frac34;
... horizontal-ellipsis &hellip;
® registered-trademark &reg;
§ section &sect;
™ trademark &trade

Example:
<!DOCTYPE html>
<html>
<body>

<p>I will display &gt;</p>


<p>I will display &lt;</p>
<p>I will display &trade;</p>
<p>I will display &lt;</p>
<p>I will display &frac14;</p>
</body>
</html>
Output:
I will display >
I will display <
I will display ™
I will display <
I will display ¼

17. Write about Background animations in HTML pages. (Or) Write


about background images and sounds.

B- Com III - Web Programming


Apoorva Publishers 13
Background Animations: To a small extent, HTML allows creating background
animations. That is, by giving background color, or by setting a background image or by
playing background audio/video. But these are not valid in HTML5

 Background color: The BGCOLOR attribute of <BODY> tag establishes the


background color of the page. We can either use text based color names such as
RED, GREEN, or BLUE or we can specify colors as a hexadecimal] numbers.
Example: <BODY BGCOLOR="RED">

 Background images: BACKGROUND is an attribute of the <BODY> tag. The


BACKGROUND attribute allows the HTML browser to specify a graphics file to be
tiled in the background of the page. The image file formats allowed are: jpg, gif,
png, bmp.
Example: <BODY BACKGROUND="logo.jpg">

 Background Music: Background sound can be added using the tags <bgsound>.
The two main attributes it takes are ‘src’ and ‘loop’. The loop attributes determines
the number of times the audio file is played.
Example: <BGSOUND SRC="MySong.wav" LOOP=INFINITE >

18. Write short notes on <IMG> (Image) tag. (Or) How to add images to HTML pages?

<IMG> Tag: We use the Image tag to place images in web pages. The Image tag has no
closing tag. But, it has one required attribute (src), along with few other attributes.

 Src: identifies the URL of the image and must be enclosed in quotes. This is a
required attribute.
 Srcset: Specifies the URL of the image to use in different situations

 Alt: provides alternative text in case the image doesn't load. The alt text also
appears if the user moves the mouse cursor over the image for a few seconds.
 Width, height: They specify the width and height of the image. If we only specify
one of these, the image will maintain it's aspect ratio, so we generally need to
indicate one or the other. The number specified can represent the size in pixels or
a percentage of the original width and/or height.
 Usemap: Specifies an image as client side image map.
 Ismap: Specifies an image as a server-side image-map
 Sizes: Specifies image sizes for different page layouts
 Longdesc: Specifies a URL to a detailed description of an image

B- Com III – Web Programming


14 Apoorva Publishers
Example: The following code displays an image.
<img src=”www.smartclass.co/images/logo.jpg” alt="My Logo">

To make the image 200 x 100 pixels in size, we use the following code.
<img src="www.smartclass.co/images/logo.jpg" alt="My Logo"
width="200" height="100">

19. How do you place objects or multimedia content in HTML pages? (Or) How do you play
Audio and Video files in HTML? (OR)

To embed multimedia content or to include objects such as images, audio, videos, Java
applets, ActiveX, PDF, and Flash, we use <object> and <embed> tags.

a) Object Tag: The object tag tells browser to include a multimedia application (java
applets, PDF, Falsh). The browser retrieves the file specified in the DATA attribute.
Example: <object data=“abc.swf” height=“200” width=“200”>
</object>

b) Embed tag: The embed-tag is similar to the object tag in that it allows us to include
multimedia in an HTML document.
Example: <embed src=“pokiri.mid” height=“200” width=“200”>

c) Audio tag: The <audio> tag defines sound, such as music or other audio streams.
Currently, there are 3 supported file formats for the <audio> element: MP3, WAV,
and OGG:
Example: <audio controls>
<source src="shapeofu.mp3" type="audio/mpeg">
</audio>

d) Video tag: The <video> tag specifies video, such as a movie clip or other video
streams.
Example: <video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>

e) Source tag: Defines multiple media resources for media elements (<video> and <audio>)

20. What is Image Mapping? (Or) Write short notes on <MAP> and <AREA >tags.

Image mapping allows us to create clickable regions on a single image. These clickable
regions act like hyperlinks which on clicking open other documents or take us to other
locations. These are also known as hotspots. For this, we use <AREA> and <MAP> tags.
To create hotspots i.e. image mapping we follow the three steps listed below:

B- Com III - Web Programming


Apoorva Publishers 15

1. Create an image and set value (name of a map) to the attribute ‘usemap’.
2. Create the map identified by the name used in ‘usemap’. This includes <area>
tags to create clickable regions.
3. Create the clickable regions (rect or circle or polygon) by specifying
coordinates.

<AREA> tag: The <AREA> tag is used to divide a page in to some parts by means of
various shapes. This tag will take three attributes. The COORDS attribute gives the
value of the coordinates. The SHAPE attribute specifies the Shape of the area. Within
the area we can specify the HREF attribute. The total code under the <AREA> tag
should be enclosed within the <MAP> tag.

Example: The following program creates three hotspots (clickable regions) on the
image “planets.gif” using <IMG>, <MAP> and <AREA> tags.

<html>
<body>
<p>Click on the sun or on one of the planets </p>
<img src="planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun"
href="sun.html" />
<area shape="circle" coords="90,58,3" alt="Mercury"
href="mercury.html" />
<area shape="circle" coords="124,58,8" alt="Venus"
href="venus.html" />
</map>
</body>
</html>

Output:

B- Com III – Web Programming


16 Apoorva Publishers

21. Write about different types of Lists in HTML.

HTML allows mainly three types of lists. They can be used for giving numbers and
bullets to the lists. We can also nest the lists. The three types are:
1. Ordered List (OL)
2. Unordered List (UL)
3. Description List (DL)

1. Ordered List: This gives numbering to the list items. The numbering could be
Arabic numerals or roman numeral or alphabets depending on the value of the
‘type’ attribute of ordered list. The tag used is ‘<OL>’. We can also indicate start
value using 'start' attribute. The number order can be made to be in descending
order using reversed attribute. The different values of ‘type’ can be:

Type Description
1 The default. Uses Arabic numerals.
I Uses uppercase Roman numerals.
i Uses lowercase Roman numerals.
A Uses uppercase letters.
a Uses lowercase letters.

<html>
<body> Output:
<h1>Select a Fruit </h1>
<OL>
<LI> APPLE </LI>
<LI> MANGO </LI>
<LI> BANANA </LI>
</OL>
</body>
</html>

If we change the ‘type’ value to ‘I’ i.e. to get roman numerals, it is going to be like
this.
B- Com III - Web Programming
Apoorva Publishers 17

<ol type="I"> Output:


<li> Cats </li>
<li> Dogs </li> I. Cats
</ol> II. Dogs

2. Unordered List: This gives bullets to the list items. The bullets by default are of
type circle. The tag used is ‘<UL>’. We don’t have 'type' attribute for this tag in
HTML5.

<!DOCTYPE html> Output:


<html>
<body>
<h1>Select a Fruit </h1>
<UL>
<LI> Apple </LI>
<LI> Mango </LI>
<LI> Banana </LI>
</UL>
</body>
</html>

3. Description List: A kind of listing in which the terms using <DT> and its description
using <DD> can be taken. The following list demonstrates the description list. The
tag used for definition list is ‘<DL>’.
<!DOCTYPE html> Output:
<html>
<body>
<h1> ONLINE TUTORIAL</H1>
<DL>
<DT> HTML </DT>
<DD> Hyper Text Markup
Language </DD>
<DT> WWW</DT>
<DD> World Wide Web</DD>
<DT> CGI </DT>
<DD> Common Gateway
Interface</DD>
</DL>
</body>
</html>

22. Write about <TABLE> tag. (Or) How do you create tables in HTML?

B- Com III – Web Programming


18 Apoorva Publishers
<TABLE> tag: To produce tables in html, we use <table> tag. The entire table element is
delimited by the <TABLE> and </TABLE> tags. It requires additional tags such as <th>,
<tr> and <td>, which are explained below.

<TR>: This tag is used to define a Table Row. Each table row is delimited by the <TR>
and </TR> tags. Table rows are nested within the table element described above.

<TD>: This tag is used to define Table Data i.e. value in each cell. Each cell (or table
data) is delimited by the <TD> and </TD> tags. The cells are nested within the table row
element.

<TH>: This tag produces a row, which is normally used has header row. Each table
header is delimited by the <TH> and </TH> tags. Most browsers display the content of
a table header cell in boldface.

Example:
<html>
<html>
<body>
<h1> Marks Memo </H1>
<table>
<tr>
<th> Name </th> <th> Rno </th>
<th> Marks </th>
</tr>
<tr>
<td> Ravi </td> <td> 33 </td> Output:
<td> 500 </td>
</tr>
Marks Memo
<tr> Name Rno Marks
<td> Kiran </td> <td> 44 </td>
<td> 600 </td>
</tr> Ravi 33 500
<tr>
<td> Raju </td> <td> 55 </td>
<td> 700 </td> Kiran 44 600
</tr>
</table>
</body> Raju 55 700
</html>

23. Write about Column spanning and Row spanning in tables with an example. (Or) Explain
Spanning columns and Rows in a table with the help of an example.

B- Com III - Web Programming


Apoorva Publishers 19
In HTML, a table can have rows and columns evenly or sometimes a cell can span in
multiple columns or in multiple rows. To achieve this, we use colspan, rowspan
attributes of <TD> tag. Consider the following examples.

 Spanning Column: The following code displays a table that has a cell
which spans in two columns. For this, we used colspan=2 for the cell of the
first row.
Output:
<table>
<tr> <td colspan=2> APOORVA APOORVA
</td> </tr>
<tr> <td> Degree College </td>
<td> MBA College </td> </tr> Degree College MBA College
</table>

 Spanning Row: The following code displays a table that has a cell, which
spans in two rows. For this, we used rowspan=2 for the first cell of first row.
<table> Output:
<tr> <td rowspan=2> APOORVA Degree College
</td> <td> Degree College
</td></tr> APOORVA
<tr> <td> MBA College </td> MBA College
</tr>
</table>

24. How do you create links in HTML? (Or) Write about <A HREF> tag.

A link or hyperlink is some highlighted text which on clicking takes to other page, or
other website or another location in the same page. Hyperlinks facilitate non-linear
reading. HTML allows us to create hyperlinks using anchor tag. Anchor tag has one
mandatory attribute ‘href’ which specifies the target page or location. The text that
acts like hyperlink should be delimited by <a> and </a>. An anchor can point to any
resource on the Web: an HTML page, an image, a sound file, a movie, etc.

By default, links will appear as follows in all browsers:


 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red

The syntax of creating an anchor (link):


<a href="url"> Text to act as hyperlink </a>

Examples:
B- Com III – Web Programming
20 Apoorva Publishers
 The following link which on clicking takes to a website
<a href="www.winningbrains.com”> See More </a>
 The following link which on clicking takes to another page in the same website
<a href="../index2.html”> Learn More </a>
 The following link which on clicking takes to another location in the same page. For
this, we need to assign a name to the target location.
<a href="#advantages"> See advantages </a>
………
<a name=”advantages”> … </a> …
 The following link which on clicking opens an image
<a href=”logo.gif”> See The Logo </a>
 The following link which on clicking opens the page in a new window.
<a href="../index2.html” target=”_blank”> Do More </a>

25. What are the attributes used in Anchor (<a>) tag.

The commonly used attributes of the anchor tag are shown below.

Attribute Value Description


download filename Specifies that the target will be downloaded when
a user clicks on the hyperlink
href URL Specifies the URL of the page the link goes to
hreflang language_code Specifies the language of the linked document
media media_query Specifies what media/device the linked document
is optimized for
rel alternate, author, Specifies the relationship between the current
bookmark, document and the linked document
external,
license, etc
target _blank Specifies where to open the linked document
_parent
_self
_top
framename
type media_type Specifies the media type of the linked document

Example: The following link which on clicking opens the page in a new window. This
uses ‘target’ attribute.

B- Com III - Web Programming


Apoorva Publishers 21
<a href="../index2.html” target=”_blank”> Learn It </a>

26. Write short notes on ‘target’ attribute of anchor tag. (Or) Explain how to open
documents trough hyperlinks in different ways (targets)

A link or hyperlink is some highlighted text which on clicking takes to other page, or
other website or another location in the same page. It uses an attribute called ‘target’,
which specifies where to open the linked document.

TARGET controls where the new document will be displayed when the user follows a
link. Most of the time, clicking on a link simply loads a new document in the same
window where the link is. However, with TARGET, we can have the new document
open in a new window, or in another frame or in the same or parent window.

TARGET can have the following values.


 "_blank"
 "_parent"
 "_self"
 "_top"
 “framename”

Example: The following link, which on clicking opens the page in a new window. This
uses ‘target’ attribute.
<a href="../index2.html” target=”_blank”> Learn It </a>

27. How do you make an image as a hyperlink? (Or) How to create Graphical
Hyperlinks in HTML? Give an example.

Not only text can be made as a hyperlink, but also images can be made as hyperlinks.
Thus, when clicking on the given image, it opens the linked document or takes to a
book-marked location. This is something like creating graphical hyperlink.
This can be achieved with the same anchor tag <a>. Between the pair of an anchor
tag, we use <img> tag to make an image as hyperlink. This technique can be used to
display thumb nails which on clicking open the enlarged images or to represent
companies/sites by some images or by their logos, which is much effective than
displaying text.

Example:

B- Com III – Web Programming


22 Apoorva Publishers
 The following codes display two image, which on clicking takes to the linked
websites.
<a href="www.winningbrains.com”>
<img src=”brain.jpg”>
</a>
<a href="www.wikipedia.com”>
<img src=”wikilogo.jpg”>
</a>

28. What are Form Elements (Components)? Explain. (Or) Explain <FORM> tag in detail.
Forms: Forms are the most popular way to make web pages interactive. Like forms on
paper, a form on a web page allows the user to enter requested information and
submit it for processing.

<FORM> tag: The <form> tag is used to create an HTML form for user input. A form can
contain input elements like text fields, checkboxes, radio-buttons, submit buttons and
more. A form can also contain select menus, textarea, and label elements. Forms are
used to pass data to a server.

Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button

B- Com III - Web Programming


Apoorva Publishers 23
<datalist> Specifies a list of pre-defined options for input controls
<output> Defines the result of a calculation

<FORM> tag Attributes: The commonly used <form> tag attributes are listed below.

Attribute Value Description


action URL Specifies where to send the form-data when a
form is submitted
autocomplete on/off Specifies whether a form should have
autocomplete on or off
method get/post Specifies the HTTP method to use when sending
form-data
name text Specifies the name of a form
novalidate novalidate Specifies that the form should not be validated
when submitted
target _blank Specifies where to display the response that is
_self received after submitting the form
_parent
_top

29. Explain How to Create Different form elements with code.

Example: The following code displays text and Output:


password controls.

<FORM>
name: <INPUT TYPE=TEXT NAME=pname> <BR> name:
password: <INPUT TYPE=PASSWORD
NAME=email> <BR> password:
<INPUT TYPE=SUBMIT>
</FORM> Submit Query

B- Com III – Web Programming


24 Apoorva Publishers

Example: The following code displays textarea control. Output:


please enter your commen
<textarea cols="25" name="comments"
rows="6">please enter your
comments...
</textarea>

Example: The following code displays button, submit Output:


and reset controls.
<input type=button value="OK"> <br>
<input type=submit > <br>
<input type=reset > <br>

Example: The following code displays checkbox Output:


control.
<input type="checkbox" value="Apple">
Apple<br> Apple
<input type="checkbox" value="Banana"
>Banana<br> Banana
<input type="checkbox" value="Mango"
checked >Mango<br> Mango

Example: The following code displays radiobutton Output:


control.
<input type="radio" value="Low" >
Apple<br> Low
<input type="radio" value="High" >
Banana<br> High
<input type="radio" value="Medium"
checked> Mango<br> Medium

Example: The following code displays file control. Output:

B- Com III - Web Programming


Apoorva Publishers 25
<h2> Upload Your Files </h2>
<input type="file">

Example: The following code displays seelct control. Output:


<select name="Fruits">
<option>Apple</option>
<option>Banana</option>
<option>Mango</option>
<option selected>Cherry</option>
</select>

30. Explain <INPUT> tag in detail.

<INPUT> tag: The <input> tag is used to select user information. An input field can vary
in many ways, depending on the type attribute. An input field can be a text field, a
checkbox, a password field, a radio button, a button, and more.

This tag takes two main attributes: TYPE and NAME. TYPE indicates what kind of
element should appear on the form. NAME assigns a name to go with the input field.
The ‘type’ attribute can take any of the following values.
 Text: Provides a single line text box.
 Textarea: Provides a multiline text box.
 Password: Same as the TEXT type, but characters are displayed as asterisks.
 Button: Creates a button with which a user can initiate some action.
 Submit: Creates a button labeled "submit". This on clicking sends information from
form-elements to a server.
 Reset: Creates a button labeled "reset" in the form. Using this, a user can clear the
values of the form elements.
 Checkbox: Produces an on-screen check box for users to make multiple choices
 Radio: Creates a radio button for a range of selections from which the user may
select only one.
 File: This displays a text box along with a “browse” that allows us to select files
from local computer. The selected file appears in the text box.
 HTML5 has several new values for input's type attribute which include: color,
image, date, email, month, number, range, search, tel, time, url and week.

Some INPUT attributes are:


 CHECKED: It specifies what item should be selected by default in the case of
checkboxes and radio buttons.
 SIZE: This is used to set the number of characters that a text element can display
without scrolling.

B- Com III – Web Programming


26 Apoorva Publishers
 VALUE: The "value" supplies the corresponding value for a radio button or check
when they are selected.
 Autofocus: Specifies that an <input> element should automatically get focus when
the page loads
 Disabled: Specifies that an <input> element should be disabled

Example: The following code displays text and Output:


password controls.

<FORM>
name: <INPUT TYPE=TEXT NAME=pname> <BR> name:
password: <INPUT TYPE=PASSWORD
NAME=email> <BR> password:
<INPUT TYPE=SUBMIT>
</FORM> Submit Query

31. Write short notes on <LEGEND> and <FIELDSET> tags.

<LEGEND> is used with <FIELDSET> to give a title to each set of fields. This is very useful
to show the separation of groups with a border and title and it is more visually
appealing.
 The <fieldset> tag is used to logically group together elements in a form.
 The <fieldset> tag draws a box around the related form elements.
 The <legend> tag defines a caption for the fieldset element.

Example: Output:
<FIELDSET>
<LEGEND> Personal Details
</LEGEND>
<BR>
name: <INPUT NAME="pname">
<BR>
email: <INPUT NAME="email">
</FIELDSET>

32. Write short notes on <FRAME> tag. (Or) Explain Frames in HTML? (Or) What is a
Frameset? Explain how to create Horizontal and Vertical Frames.

B- Com III - Web Programming


Apoorva Publishers 27
HTML5 does not support frame/frameset tags. Frames enable us to present multiple
HTML documents within the same window. For example, we can have a left frame for
navigation and a right frame for the main content.

Frames are achieved by creating a frameset page, and defining each frame from within
that page. This frameset page doesn't actually contain any content - just a reference to
each frame. The HTML <frame> tag is used to specify each frame within the frameset.
All frame tags are nested with a frameset tag.

So, in other words, if we want to create a web page with 2 frames, we would need to
create 3 files - 2 files for two frames, and 1 file to specify how they fit together.

The frameset Tag Attributes: In the frameset tag, we specify either cols or rows,
depending on whether we want frames to be displayed vertically or horizontally. The
common attributes in <frameset> tag are:

Attribute Description
rows Specifies the number of rows and their height in pixels, percentages,
or relative lengths. Default is 100%
cols Specifies the number of columns and their width in either pixels,
percentages, or relative lengths. Default is 100%

The frame Tag Attributes: For each frame we want to display, we specify a frame tag.
We nest these within the frameset tag. The common attributes in <frame> tag are:

Attribute Description
name Assigns a name to a frame. This is useful for loading contents
into one frame from another.
src Location of the frame contents (for example, the HTML page to
be loaded into the frame).
noresize Specifies whether the frame is resizable or not (i.e. whether the
user can resize the frame or not).
scrolling Whether the frame should be scrollable or not (i.e. should
scrollbars appear). Possible values are : yes, no, auto
frameborder Whether the frame should have a border or not. Possible values
are : 0 or 1
marginwidth Specifies the margin, in pixels, between the frame's contents
and it's left and right margins.
marginheight Specifies the margin, in pixels, between the frame's contents
and it's top and bottom margins.

B- Com III – Web Programming


28 Apoorva Publishers
Example: Following program uses three vertical frames. Before writing this, the user
needs to create three HTML files to be displayed in each frame. Here, ‘a1.html’,
‘a2.html’ and ‘a3.html’.

<html> Output:
<frameset cols="25%,50%,25%">
<frame src='a1.html'>
<frame src='a2.html'>
<frame src='a3.html'>
</frameset>
</html>

Similarly, to create horizontal frames we use the following code.

<html>
<frameset
rows="50%,30%,20%">
<frame src='a1.html'>
<frame src='a2.html'>
<frame src='a3.html'>
</frameset>
</html>

33. What are nested Frames?

A nested frame is a frame within another frame. Here, we need to use one frameset in
another frameset. The second frameset comprising two or more other frames takes the
position of second frame in the outer frameset.

Example: Following program uses nested frames. The outer frameset uses horizontal
farming and the inner frameset uses vertical framing. Here, ‘a1.html’, ‘a2.html’ and
‘a3.html’ have to be created first.

B- Com III - Web Programming


Apoorva Publishers 29
Output:
<html>
<frameset rows="50%,50%">
<frame src='a1.html'>
<frameset cols="50%,50%">
<frame src='a2.html'>
<frame src='a3.html'>
</frameset>
</frameset>
</html>

34. What are Inline Frames?

Inline or “floating” frame is the one, which appear on a page like an ordinary element
such as tables or images. Using an inline frame, we can display a html page within
some other html page. The tag used for inline frames is <iframe>. The attributes of this
tag are listed below.

 src: This allows us to specify the URL of the document in the frame.
 width: This allows us to specify the frame’s length, in pixels.
 height: This allows us to specify the frame’s height, in pixels.
 Name: This is to set the name of the frame
 Srcdoc: Specifies the address of the document to embed in the <iframe>

Example: The following program uses an inline frame to display a previously created
html file “a1.html”.

Output:
<html>
<body bgcolor=green>
<center>
<h1> INLINE FRAMES </H1>
<iframe src='a1.html' >
</iframe>
</center>
</body>
</html>

35. Explain the <HR> tag.

B- Com III – Web Programming


30 Apoorva Publishers

<HR> tag: The <hr> tag tag defines a thematic break in an HTML page (e.g.
a shift of topic).. The hr element can be used to separate content in an
HTML page. It is an empty i.e. has no closing.

Example:
<p>HTML is a formatting language.....</p>
<hr>
<p>CSS defines how to display HTML elements.....</p>

36. Write short notes on Layouts.

 Websites often display content in multiple columns (like a magazine


or newspaper). A webpage layout is very important to give better
look to our website.
 Now-a-days, all modern websites are using CSS and JavaScript based
framework to come up with responsive and dynamic websites but
we can create a good layout using simple HTML tables or division
tags in combination with other formatting tags.

HTML Layout Techniques: There are many different ways to create


multicolumn layouts. Each way has its pros and cons:
 HTML tables (not recommended)
 HTML frames (not valid in HTML5)
 Layout tag (not valid in HTML5)
 CSS float property
 CSS flexbox
 CSS framework
 CSS grid

HTML5 offers new semantic elements that define the different parts of a
web page. We can also call them HTML Layout Elements.

B- Com III - Web Programming


Apoorva Publishers 31
 <header> - Defines a header for a
document or a section
 <nav> - Defines a container for
navigation links
 <section> - Defines a section in a
document
 <article> - Defines an independent
self-contained article
 <aside> - Defines content aside
from the content (like a sidebar)
 <footer> - Defines a footer for a
document or a section
 <details> - Defines additional
details
 <summary> - Defines a heading
for the <details> element

Example: The following program shows how to use these semantic layout
elements.
<!DOCTYPE html>
<head>
<title>My Title</title>
</head>
<body>
<header>
<nav>..navigation menu links
here…</nav>
</header>
<article>
<section>…</section>
<section>…</section>
<section>…</section>
</article>
<aside>…</aside>
<footer>…</footer>
</body>
</html>

B- Com III – Web Programming


32 Apoorva Publishers

37. Write an HTML program to demonstrate Layouts using tables.

HTML Layout - Using Tables: The simplest and most popular way of creating
layouts is using HTML <table> tag. These tables are arranged in columns and
rows, so you can utilize these rows and columns in whatever way you like. But
layouts using tables is not recommended.

Example: The following HTML layout example is achieved using a table with 3
rows and 2 columns but the header and footer column spans both columns
using the colspan attribute.

<!DOCTYPE html>
<html>
<body>
<table width = "100%" border = "0">
<tr>
<td colspan = "2" bgcolor= "cyan">
<h1>Main title</h1>
</td>
</tr>
<tr>
<td bgcolor = "green" width = "50">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td width="100" height="200">
Welcome to Apoorva group of Colleges
</td>
</tr>
<tr>
<td colspan=2 bgcolor="cyan">
<center>
Apoorva Degree College
</center>
</td>
</tr>
</table>
</body>
</html>

B- Com III - Web Programming


Apoorva Publishers 33
This will produce the following output:

38. How to create Layouts using Frames?

Refer to question on frames.

39. How to create Layouts using Layout tag? (or) Write short notes on Layout tag.

<LAYER> tag: The HTML <layer> tag (not valid in HTML5) is used to position and
animate (through scripting) elements in a page. A layer can be thought of as a separate
document that resides on top of the main one, all existing within one window. This tag
has support in Netscape browsers. The common attributes supported by this tag are:

left/ top: The LEFT and TOP parameters specify the horizontal and
vertical positions of the top-left corner of the layer.
bgcolor Specifies the background color of the layer.
width/ height The width and height parameter determine the width and
height of the layer at which the layer's contents wrap.
visibility The VISIBILITY parameter determines whether the layer is

B- Com III – Web Programming


34 Apoorva Publishers
visible or not. Possible values are: HIDE, SHOW, INHERIT
src: The SRC attribute for the <LAYER> tag specifies an external file
that contains HTML-formatted text to be displayed in this layer.

Example: <layer width=100 height=30> <img src="myimage.gif">


</layer>

40. What is DHTML? What are its Advantages and Disadvantages?

DHTML: DHTML stands for dynamic HTML. DHTML is not a programming or markup
language like HTML. It is a term that is used to describe the creation of dynamic and
interactive pages. One of the advantages of DHTML for web design and clients is that it
can combine the use of HTML, JavaScript/VBScript, XML and CSS (Cascading Style
Sheets).

HTML is capable of producing only static pages i.e. the information that it shows in a
page cannot be user-specific and it cannot facilitate user interaction. But, dynamic
content can very well facilitate user interaction or the pages can be made user-specific
and time-specific or it allows the users to set their own settings to view pages.

For example, a page may recognize the user and greet him with his name or it may ask
the user to fill in information and perform validity or calculations on it.

To design a web site with dynamic content, we need a set of technologies like HTML,
CSS, JavaScript/VBScript, XML etc. This technological integration is nothing but DHTML.

Advantages:
 DHTML is more efficient for content management purposes.
 A rich set of graphical capabilities can be implemented
 Allows for event driven programming
 DHTML results in faster and fresher content, which is more visually appealing.
 Both content and layouts can be quickly manipulated
 DHTML content loads very fast
 Support for XML
 Supports DOM (Document Object Model)

Disadvantages:
 Costly Editing tools: Although DHTML provides great functionality but the DHTML
editors available are expensive. Dreamweaver is an example of HTML editor.
 Long and Complex coding: DHTML coding is long and complex.

B- Com III - Web Programming


Apoorva Publishers 35
 Browser Support problems: DHTML suffers from browser support problems. For
example, a code written for Netscape might not work in Internet Explorer and vice-
versa.

41. Write the difference between HTML and DHTML.

HTML DHTML
HTML stands for HyperText Markup DHTML stands for Dynamic HTML
Langauge
It is an application of SGML. It is a technological integration of HTML,
VBScript, JavaScript, CSS and etc.
It is a sequential formatting language DHTML is not a language. It includes
programming through scripts and uses
DOM (Document Object Model)
This can produce only static content This can produce dynamic content
HMTL forms basis for DHTML DHTML uses HTML and depends on that.
Browse dependent Browser and Script dependent
No event handling, No validations, styles It supports event handling, validations
and styles

42. Discuss about Cascading Style Sheets (CSS) with example.

CSS: CSS stands for Cascading Style Sheets. Cascading Style Sheet (CSS) is a style sheet
language used to describe the presentation semantics (the look and formatting) of a
document written in a markup language. The common application of CSS is to style web
pages written in HTML and XHTML, but the language can also be applied to any kind of
XML document.

Syntax: CSS has a simple syntax and uses a number of English keywords to specify the
names of various style properties. A style sheet consists of a list of rules. Each rule
consists of one or more selectors and a declaration block. A declaration-block consists
of a list of declarations in braces. Each declaration itself consists of a property, a colon
(:), a value, then a semi-colon (;). The syntax is shown below.

Selector Declaration Declaration

h1 { color: blue; font-size: 12; }


Property value property value

 The selector is normally a HTML element or our own class or id we want to style.
 Each declaration consists of a property and a value.
B- Com III – Web Programming
36 Apoorva Publishers
 The property is the style attribute we want to change. Each property has a value.

Types of properties supported by CSS: The main capabilities of CSS are its support for
the following.
 Font properties such as type, size and emphasis
 Color of text, backgrounds, and other elements
 Text attributes such as spacing between words, letters, and lines of text
 Alignment of text, images, tables and other elements
 Margin, border, padding, and positioning of elements

Advantages:
 CSS can be made dynamic by using them in Scripts. With a simple change of one
line, a different style sheet can be used for the same page
 It facilitates Separation of content from presentation (styles)
 Site-wide consistency, the global style sheet can be used to affect and style
elements site-wide.
 Bandwidth, a style sheet is stored in the browser cache. Therefore, it can be used
on multiple pages without being reloaded, reducing data transfer over a network.

Disadvantages:
 Poor layout controls
 There are control limitations to place elements vertically
 We cannot use mathematical expressions in the place of values
 Lack of column declaration i.e. multiple columns are complex to implement.
 Pseudo-class (like :hover, :first-line) dynamic behavior not controllable

Example: The following program uses two HTML element selectors h1 and h2 to apply
styles on them.
<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE TYPE="text/css">
H1 { font-size: x-large; color: red }
H2 { font-size: large; color: blue }
</STYLE>
</HEAD>

<body>
<h1> Hello </h1>
<h2> Apoorva </h2>
</body>

B- Com III - Web Programming


Apoorva Publishers 37
43. How many types of style sheets are existing in DHTML? Explain with an example. (Or)
Explain about (i) Style Sheets (ii) External Style Sheets (iii) Embedded Style Sheets (iv)
Inline Style Sheets.

Style Sheet: A style sheet is used to describe the presentation semantics (the look and
formatting) of a document written in a markup language. The common application of
CSS is to style web pages written in HTML and XHTML, but the style sheets can also be
applied to any kind of XML document.

Types Style Sheets: CSS allows three types of style sheets, which are discussed below.
1. Inline styles: These are written inside the HTML document, style information on a
single element, specified using the "style" attribute
2. Embedded style: These are written as blocks of CSS information inside the HTML
using <style> tag.
3. External style sheets: These are separate “.CSS” files referenced from the
document.
4. Imported Style Sheets: These are used to import “.css” files from other servers.

Note: also, refer to the following four questions.

44. Explain Inline Style Sheets with an example.

Inline styles: These are written inside the HTML document, style information on a
single element, specified using the "style" attribute

General format for inline style sheet is shown below:

<tag style="property:value [; property:value]...">


Text
</tag>

The keyword style is followed by a quoted list of style properties and associated values,
connected with colons (:) and separated by semicolons (;). For instance, to set the font
family and font size for the text contained within a paragraph, the following inline style
sheet is coded inside the opening <p> tag.

<p style="font-family:arial; font-size:9pt">


Apoorva Degree College
</p>

B- Com III – Web Programming


38 Apoorva Publishers
An inline style sheet can appear inside any tag to directly set its style. All that is
required is to enclose the applicable style properties and values inside the style
attribute.

45. Explain Embedded Style Sheets with an example.

Embedded Style Sheets: These are written as blocks of CSS information inside the
HTML using <style> tag. When a large number of style settings are used on a Web page,
we can use style settings together in one place as an embedded style sheet. An
embedded style sheet normally is coded inside the <head> section of the document
surrounded by a <style> tag. It applies styles across the entire Web page through
simple selectors, group selectors, contextual selectors, ID selectors, class selectors,
and sub-class selector whose general formats are shown below.

<head>
<style type="text/css">
tag {property:value; ...} /* Simple selector */
tag, tag,... {property:value; ...} /* Group selectors */
tag sub-tag ... {property:value; ...} /* Contextual selector */
#id {property:value; ...} /* Id selector */
.class {property:value; ...} /* Class selector */
tag.class {property:value; ...} /* sub-class Selector */
</style>
</head>

Example: The following program uses two one simple selector ‘h1’ and a class selector
“mystyle” to apply styling. Here, we have embedded the style definitions in the HTML
program using <style> tag.

<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE TYPE="text/css">
h1 { font-size: x-large; color: red }
mystyle { font-size: large; color: blue }
</STYLE>
</HEAD>
<body>
<h1> Hello </h1>
<h2 class="mystyle"> Apoorva </h2>
</body>

46. Explain External (Linked) Style Sheets with an example.

B- Com III - Web Programming


Apoorva Publishers 39
External (Linked) Style Sheets: These are separate “.CSS” files referenced from the
document. The format for defining linked styles is the same as for an embedded style
sheet with the exception that a <style> tag does not enclose the specifications. The
style sheet document is saved as a simple text file, normally identified with the .css file
extension to differentiate it from .html documents.

For example, below is a set of style specifications contained within a text document
named “mysheet.css”

P {font-family:arial; font-size:10; color:black}


h1, h2 {color:blue; text-align:center}
.mystyle {font-family:arial; font-size:20}

Any HTML page can apply these style settings by linking to this mysheet.css document
with a <link> tag coded in the <head> section of the page. With this, the page can have
all the styles defined in that linked file.

<head>
<link href="mysheet.css" type="text/css" rel="stylesheet">
</head>

<body>
<h1> Hello </h1>
<p> Welcome to Apoorva </p>
<h2 class="mystyle"> Thankyou </h2>
<body>

47. Explain Imported Style Sheets with an example.

A style sheet may be imported with the @import statement. This statement may be
used in a CSS file or inside the STYLE element. This can be used to import .css files from
other directories or other servers. The following example shows importing .css files
from other server and other directory.

<STYLE TYPE="text/css" >


@import url("http://www.htmlhelp.com/style.css")
@import url("stylesheets/mystyles.css")
</STYLE>

48. Explain different types of Selectors used in style sheets.

A Selector is an id or tag, or a class associated with a set of style-properties. The


different types selectors used in CSS are shown below with their general formats.
B- Com III – Web Programming
40 Apoorva Publishers

<style type="text/css">
tag {property:value; ...} /* Simple selector */
tag, tag,... {property:value; ...} /* Group selectors */
tag sub-tag ... {property:value; ...} /* Contextual selector */
#id {property:value; ...} /* Id selector */
.class {property:value; ...} /* Class selector */
tag.class {property:value; ...} /* sub-class Selector */
tag:pseudo-class {property:value; ...} /* pseudo-class Selector */
</style>

Simple Selectors: Here, we associate styles with an existing HTML tag. In this, the
tag name is followed by a set of properties and values enclosed within braces { }. For
instance, to set the font family and size for all paragraphs (the tag <p>) in a document,
the following simple selector entry is written. And, wherever a <p> tag is encountered
in the Web document, the browser applies these styles to its content.

<style type="text/css">
p {font-family:arial; font-size:9pt}
</style>
<p> Welcome to Apoorva </p>

Group Selectors: In a similar manner, identical styles can be applied to multiple tags
by listing the tag names separated by commas. In the following example, all <h1>,
<h2>, and <h3> tags appearing on the page will have the same styling.

<style type="text/css">
h1, h2, h3 {font-family:arial; color:blue}
</style>
<h1> Welcome to Apoorva </h1>
<h2> Welcome to Apoorva </h2>
<h3> Welcome to Apoorva </h3>

Contextual Selectors: A contextual selector gives the combination of tags and sub-
tags (or nested tags) separated by spaces. For example, the contextual selector in the
example below is P EM. This rule says that emphasized text within a paragraph should
have a yellow background; <em> in other tags or <p> tag alone or <em> tag alone
would not affect the text in those tags.

<style type="text/css">
P EM { background: yellow }
</style>
<p> <em> Welcome </em> </p> <!-- displayed with yellow background -->

B- Com III - Web Programming


Apoorva Publishers 41
<p> Paragraph Text </p> <!-- displayed in its usual style -->
<em> Emphasized Text </em> <!-- displayed in its usual style -->

ID Selectors: It is recommended to use id selector on one tag only, because script


programs can identify individual elements using this id. The following example creates
an Id selector, which on used in a tag produces the specified style.

<style type="text/css">
#MyPar {font-family:arial; font-weight:bold}
</style>
<p id="MyPar"> Welcome to Apoorva </p>
Class Selectors: A general style that can be applied to any tag is known as a style
class and is defined by assigning a class name, preceded by a period (.), to its style
properties. In the following example, a class named “.mystyle” is created. This can be
used in any tag as the value of “class” attribute with in that.

<style type="text/css">
.mystyle{font-family:arial; font-size:10pt; color:blue}
</style>
<p class="mystyle"> Welcome to Apoorva </p>
<h1 class="mystyle"> Know More </h1>

Sub-Class Selectors: A simple selector can have different classes, thus allowing the
same element to have different styles. For example, we may wish to display <h1> in a
different color depending on the class value it uses in the corresponding tag.

<style type="text/css">
H1.style1 { color: red }
H1.style2 { color: blue }
</style>
<h1 class="style1"> Know More </h1>
<h1 class="style2"> Grow More </h1>

Pseudo-Class Selectors: A pseudo-class selector is used to add special effects to


some portion (or for special actions) of some selectors. For example, “hover” pseudo-
class applies the specified style when mouse moves over the element. Similarly, The
first-letter pseudo-element is used to create drop caps and other effects. Only, the first
letter of text within an assigned selector will be rendered according to the value
assigned.
<style type="text/css">
a:hover { color: red }
h1:first-letter {font-size:300%}
</style>

B- Com III – Web Programming


42 Apoorva Publishers
<a href="abc.html"> Know More </a>
<h1> welcome </h1> <!-- the first letter appears in a big size -->

49. Discuss Style Classes with an Example.

 A general style that can be applied to any tag is known as a style class and is
defined by assigning a class name, preceded by a period (.), to its style properties.
Style classes are also known as class selectors.
 One element (tag) can have only one class attribute, but the same class can be
used in many different tags.
 Style classes can be defined in embedded styles and external styles.
 In the following example, a class named “.mystyle” is created. This can be used in
any tag as the value of “class” attribute with in that.

<head>
<style type="text/css">
.mystyle{font-family:arial; font-size:10pt; color:blue}
</style>
</head>
<body>
<p class="mystyle"> Welcome to Apoorva </p>
<h1 class="mystyle"> Know More </h1>
</body>

50. Explain Text Properties in CSS (DHTML).


Property Description Possible Values Examples
color Declares the color of the Valid color names, div { color:green; }
text. RGB values, div { color:rgb(0,255,0); }
hexidecimal div { color:#00FF00; }
notation.
direction Declares the reading ltr = left-to-right div { direction:ltr; }
direction of the text. rtl = right-to-left div { direction:rtl; }
line-height Declares the distance Numbers, div { line-height:normal; }
between lines. percentages, div { line-height:2em; }
lengths. div { line-height:125%; }
letter-spacing Declares the amount of A length or ‘normal’ div { letter-spacing:normal; }
space between text div { letter-spacing:5px; }
characters. div { letter-spacing:-1px; }
text-align Declares the horizontal left, right, center, div { text-align:center; }
alignment of inline justify div { text-align:right; }
content.
text-decoration Declares the text none div { text-decoration:none; }
decoration. underline, overline, div { text-

B- Com III - Web Programming


Apoorva Publishers 43
line-through, blink decoration:underline; }
text-indent Declares the indentation Lengths and div { text-indent:12px; }
of the first line of text. percentages. div { text-indent:2%; }
text-shadow Declares shadow effects A list containg div { text-shadow:green 2px
on the text. values that specify: 2px 7px; }
(color, horizontal div { text-shadow:olive -3px -
space, vertical 4px 5px; }
space, blur radius)
text-transform Declares the capitalization None, capitalize, div { text-
effects on the letters in uppercase, transform:uppercase; }
the text. lowercase div { text-
transform:lowercase; }
white-space Declares how white space normal, pre, div { white-space:pre; }
is handled in an element. nowrap div { white-space:nowrap; }
word-spacing Declares the space between A length or normal div { word-spacing:normal; }
words in the text. div { word-spacing:1.5em; }

51. Explain Font Properties in CSS (DHTML).


Property Description Possible Values Examples
font-family Declares the name Valid font family names, i.e. div { font-family:Arial; }
of the font to be Arial, Verdana, sans-serif,
used. etc.
font-size Declares the size of Lengths (number and unit div { font-size:70%; }
the font. type— i.e. 1em, 12pt, 10px, div { font-size:0.85em; }
80%) or one of the following div { font-size:medium; }
predefined values:
xx-small, x-small, small,
medium, large, x-large, xx-
large, smaller, larger
font-style Declares the font Normal, italic, oblique div { font-style:italic; }
style. div { font-style:oblique; }
font-variant Declares the font normal, small-caps div { font-variant:normal; }
variant. div { font-variant:small-caps; }
font-weight Declares the font normal, bold, bolder, lighter div { font-weight:bolder; }
weight (lightness or or value in hundreds div { font-weight:200; }
boldness)
font Used to set all of Separate values by a space div { font:italic small-caps bold
the font properties in the following order 1em 1.2em Arial }
at once font-style, font-variant, font- div { font:bold 0.8em Verdana }
weight, font-size, line-
height, font-family

52. Explain Background Properties in CSS (DHTML).

B- Com III – Web Programming


44 Apoorva Publishers
Property Description Possible Values Examples
background-attachment Declares the fixed div { background-
attachment of scroll attachment:fixed; }
a background div { background-
image attachment:scroll; }
background-color Declares the Valid color names, div { background-color:green;
background RGB values, }
color. hexidecimal notation.
background-image Declares the URL values. div { background-
background image:url(images/img.jpg); }
image of an body { background-
element. image:url(img.jpg); }
background-position Declares the Lengths or div { background-
position of a percentages, or one of position:10px 50px; }
background the predefined values: div { background-
image top left, top center, position:bottom right; }
top right, center left,
center center, center
right, bottom left,
bottom center,
bottom right
background-repeat Declares how Repeat, repeat-x div { background-
and/or if a repeat-y, no-repeat repeat:repeat-x; }
background div { background-repeat:no-
image repeats. repeat; }
background Used to set all Separate values by a div { background:green
the background space in the following url(image.jpg) no-repeat fixed
properties at order (background- center center; }
once color, image, repeat, div { background:url(image.jpg)
attachment, position) fixed; }

53. Explain Border Properties in CSS (DHTML).

Property Description Possible Values Examples


border-top-width Declares the width of Length values, or div { border-top-
border-bottom- width the borders thin, medium,thick width:2px; }
border-left- width accordingly. div { border-left-
border-right- width * all the 4 border width:thin; }
border-width* widths at a time
border-top-color Declares the color of Valid color names, div { border-top-
border-bottom-color the borders RGB values, color:green; }
border-left-color accordingly hexidecimal notation, div { border-bottom-
border-right-color * all the 4 border or ‘transparent’ color:red; }
border-color* colors at a time
border-top-style Declares the style of None, hidden, dotted, div { border-right-

B- Com III - Web Programming


Apoorva Publishers 45
border-bottom- style the borders dashed, solid, double, style:solid; }
border-left- style accordingly. groove, ridge, inset, div { border-left-
border-right- style *All the 4 border outset style:inset; }
border-style * styles at a time
border-top Used to set width, Separate values by a div { border-top:2px solid
border-bottom style, color space in the following green; }
border-left properties at once to order div { border-left:thick
border-right the specified border Width, style, color double red; }
border Used to set width, Separate values by a div { border:1px double
style, color space in the following green; }
properties at once to order: width, style, div { border:thin solid
all the 4 borders color #00FF00; }

54. Explain Margin Properties in CSS (DHTML).

Property Description Possible Values Examples


margin-top Declares the top margin for Lengths, percentages, and div { margin-
the element. the predefined value auto. top:5px; }
margin-right Declares the right margin Lengths, percentages, and div { margin-
for the element. the predefined value auto. right:15%; }
margin-bottom Declares the bottom Lengths, percentages, and div { margin-
margin for the element. the predefined value auto. bottom:5px; }
margin-left Declares the left margin for Lengths, percentages, and div { margin-
the element. the predefined value auto. left:5px; }
margin used to declare all the Separate values by a space in div { margin:5px
margin properties at once. the following order: 12px 4px 7px; }
margin-top, margin-right, div { margin:5px
margin-bottom, margin-left 10px; }

55. Explain Positioning and Display Properties in CSS (DHTML).

Property Description Possible Values Examples


display Declares if/how the element displays. None, inline, div { display:none; }
block div { display:inline; }
list-item, and etc div { display:marker; }

float Declares whether a box should float left, right, none div { float:left; }
to the left or right of other content or div { float:right; }
not
visibility Declares the visibility of an element Visible, hidden, div { visibility:visible; }
collapse div { visibility:hidden; }

B- Com III – Web Programming


46 Apoorva Publishers
top Declares the distance between Lengths, div { top:15px; }
bottom content edge of the element and its percentages, and div { left:2%; }
right containing block accordingly the predefined
left (position should not be static) value auto.
Pixeltop Positioning values in pixels Only integer div { pixelleft:100; }
Pixelbottom values
Pixelleft
Pixelright
position Declares the type of positioning of an Static, relative, div { position:absolute; }
element absolute, fixed div { position:relative; }
z-index Declares the stack order of the Integer values or div { z-index:2; }
element. auto. div { z-index:auto; }

56. Explain Dimension Properties in CSS (DHTML).


Property Description Possible Values Examples
height Declares the height/max- Lengths, percentages, div { height:200px; }
max-height height/min-heigth of the and the predefined div { min-height:600px; }
min-height element. value auto
width Declares the width/max- Lengths, percentages, div { width:500px; }
max-width width/min-width of the element and the predefined div { max-width:75%; }
min-width value auto

57. Explain List Properties in CSS (DHTML).


Property Description Possible Values Examples
list-style-type Declares the type of disc, circle, square ol { list-style-type:upper-roman; }
list marker used. decimal and so on. ul { list-style-type:square; }
list-style-position Declares the position inside, outside ol { list-style-position:inside; }
of the list marker ul { list-style-position:outside; }
list-style-image Declares an image to URL values ul { list-style-
be used as the list image:url(image.jpg); }
marker.
list-style used to declare three Separate values by ul { list-style:disc inside
list properties at once. a space in the url(image.gif); }
following order: ol { list-style: upper-roman
list-style-type, outside; }
list-style-position,
list-style-image

58. Explain Table Properties in CSS (DHTML).


Property Description Possible Values Examples
border-collapse Declares the way borders collapse table { border-

B- Com III - Web Programming


Apoorva Publishers 47
are displayed. separate collapse:collapse; }
table { border-
collapse:separate; }
border-spacing Declares the distance Lengths for the table { border-spacing:5px; }
separating borders (if horizontal and table { border-spacing:5px
border-collapse is vertical spacing, 10px; }
separate). separated by a space.

caption-side Declares where the table top, bottom, left, caption { caption-side:top; }
caption is displayed in right caption { caption-side:right; }
relation to the table.
empty-cells Declares the way empty show, hide table { empty-cells:show; }
cells are displayed (if table { empty-cells:hide; }
border-collapse is
separate).
table-layout Declares the type of table auto, fixed table { table-layout:auto; }
layout table { table-layout:fixed; }

59. How to position the following elements using style sheet? Write a
program to position three images as shown in the figure below.

To position the images as shown in the above program, we use the CSS style property
‘position’ with ‘absolute’ as its value. When we use this option, the exact positioning
can be set using the properties left and top. The following program positions the three
images as required.

<html>
<body>
<img src="face.gif" width=100 height=100
style="position:absolute; left=0; top:0">
<img src="face.gif" width=100 height=100
style="position:absolute; left=100; top:100">
<img src="face.gif" width=100 height=100
style="position:absolute; left=200; top:200">
</body>

B- Com III – Web Programming


48 Apoorva Publishers
</html>

60. Explain CSS Box Model.

The CSS Box Model: All HTML elements can be considered as boxes. In CSS, the
term "box model" is used when talking about design and layout. The CSS box
model is essentially a box that wraps around every HTML element. It consists
of: margins, borders, padding, and the actual content. The image below
illustrates the box model:

Explanation of the different parts:


 Content : The content of the box, where text and images appear
 Padding : Clears an area around the content. The padding is transparent
 Border : A border that goes around the padding and content
 Margin : Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space
between elements.

Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;

B- Com III - Web Programming


Apoorva Publishers 49
margin: 25px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>


<p>The CSS box model consists of: borders, padding,
margins, and the actual content.</p>
<div>welcome to apoorva group of colleges.</div>
</body>
</html>

Output of the above program will be:

B- Com III – Web Programming

You might also like