PART - A
1. What are the features of Dynamic HTML.
DHTML stands for Dynamic HTML. It is just a combination of HTML, JavaScript and CSS. It just
uses these languages features to build dynamic web pages.
- Simplest feature is making the page dynamic.
- Can be used to create animations, games, applications, provide new ways of navigating through
web sites.
- DHTML use low-bandwidth effect which enhance web page functionality.
- Dynamic building of web pages is simple as no plug-in is required.
- Facilitates the usage of events, methods and properties and code reuse.
2. Mention the components of DHTML.
HTML
It is the core of DHTML. You have to understand the basics before you ever even
consider making your plain HTML dynamic. Check your HTML code for errors with
NetMechanic's HTML Toolbox and correct them before they cause problems in your
DHTML code.
Cascading Style Sheets (CSS)
Plain HTML defines a document's structure, while CSS give you precise control over a
document's presentation. They define the font, color, size, and display attributes of
elements on the page. With DHTML, you use the CSS properties of a page element to
change the element's display.
Document Object Model (DOM)
It takes the individual components of the HTML document and organizes them into a
hierarchal structure of named objects. You must structure your HTML code to meet the
DOM requirements before you can implement DHTML effects.
JavaScript
It is the most commonly used scripting language for creating DHTML effects. Since
Netscape and Explorer implement DHTML differently, the first component of any DHTML
application is usually a JavaScript browser detection script. JavaScript creates effects by
accessing the components of the DOM and changing them on the Web page.
3. How to change the properties of body tag in CSS?
<STYLE> BODY { background-color: black; color: red; font: 24pt verdana; }
</style>
Set the background color for a page:
body {background-color: coral;}
Set a background-image for the <body> element:
body {
background-image: url("paper.gif");
background-color: #cccccc;
}
The background-position property sets the starting position of a background image.
Tip: By default, a background-image is placed at the top-left corner of an element, and
repeated both vertically and horizontally.
4. Write the syntax for linking to a style sheet.
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
The <link> tag defines a link between a document and an external resource.
The <link> tag is used to link to external style sheets.
5. Define CSS. What are the different types of Style sheets available?
CSS Stands for "Cascading Style Sheet." Cascading style sheets are used to format the layout of
Web pages. They can be used to define text styles, table sizes, and other aspects of Web pages
that previously could only be defined in a page's HTML.
CSS helps Web developers create a uniform look across several pages of a Web site. Instead of
defining the style of each table and each block of text within a page's HTML, commonly used
styles need to be defined only once in a CSS document. Once the style is defined in cascading
style sheet, it can be used by any page that references the CSS file.
There are the following three types of CSS:
1. Inline CSS.
2. Internal CSS.
3. External CSS.
PART - B
9. Give a brief note on @import CSS.
Import the "navigation.css" style sheet into the current style sheet:
@import "navigation.css"; /* Using a string */
or
@import url("navigation.css"); /* Using a url */
The @import rule allows you to import a style sheet into another style sheet.
The @import rule must be at the top of the document (but after any @charset declaration).
The @import rule also supports media queries, so you can allow the import to be media-
dependent.
These rules must precede all other types of rules, except @charset rules; as it is not a nested
statement, @import cannot be used inside conditional group at-rules.
So that user agents can avoid retrieving resources for unsupported media types, authors may
specify media-dependent @import rules. These conditional imports specify comma-separated
media queries after the URL. In the absence of any media query, the import is unconditional.
Specifying all for the medium has the same effect.
@import url;
@import url list-of-media-queries;
where:
url : is a <string> or a <url> representing the location of the resource to import. The
URL may be absolute or relative. Note that the URL for a Mozilla package need not
actually specify a file; it can just specify the package name and part, and the appropriate
file is chosen automatically
list-of-media-queries:is a comma-separated list of media queries conditioning the
application of the CSS rules defined in the linked URL. If the browser does not support
any these queries, it does not load the linked resource.
10.Write down any six properties and its values of CSS.
Font Family
The font-family property allows us to change the particular font we are using. You may
select any font which is installed on the clients computer with this property. Some of the
more commonly used fonts include:
Times New Roman
Arial
Verdana
It is possible to specify and include non standard fonts but this is a little more complex.
style.css
h1 {
font-family: Times New Roman;
}
p{
font-family: Verdana;
}
Font Size
Font-size may be specified using a few different types but the easiest to work with is
pixels (px).
style.css
h1 {
font-size: 30px;
}
p{
font-size: 16px;
}
Font Weight
The font-weight css property allows us to specify how thick the lines of the characters are.
It may be one of the following values:
lighter
normal
bold
bolder
Some font families only have normal and bold weights. In this case if you specify lighter
it will default back to normal and if you specify bolder it will default back to bold.
style.css
h1 {
font-weight: normal;
}
p{
font-weight: bold;
}
Colour
The color property allows us to specify the colour of the text.
style.css
h1 {
color: #9ACA42;
}
p{
color: #357180;
}
A colour is specified by a hash ( # ) followed by 6 hexadeximal numbers. The first 2 are
the amount of red, the second 2 the amount of green and the final 2 the amount of blue.
Background Colour
The background-color property allows us to specify the background colour for the
element.
style.css
h1 {
background-color: #9ACA42;
}
p{
background-color: #A0D2DC;
}
Margin
margin is similar to padding in that is affects the spacing around the content. It is a second
area outside the padding however. Compare the example below to the one above for
padding and note where the background colour ends.
Similar to padding, you may specify a single value, or two or four.
style.css
h1 {
margin: 10px;
background-color: #9ACA42;
}
p{
margin: 5px 10px 8px 30px;
background-color: #A0D2DC;
}
Border
The border is in between the padding and margin. I'll outline basic usage here but there
are various properties available to control the look of the border with greater detail so I
would recommend having a look at the Border Properties in the CSS specification.
The various aspects of the border which you may control are:
It's width.
It's colour.
It's style (none, dotted, dashed, solid, double, groove, ridge, inset, outset).
style.css
h1 {
border: 2px solid #E9B82B;
}
p{
border: 1px dashed #4D8353;
}
h1 {
font-family: Arial;
font-size: 24px;
font-weight: normal;
color: #efefef;
background-color: #9ACA42;
margin: 2px 0px 20px 0px;
padding: 5px;
border-bottom: 2px solid #4D8353;
}
p{
margin: 10px 0px 10px 30px;
color: #357180;
font-size: 16px;
}
11.How to set properties of a hyperlink using CSS and also write the syntax for
setting the color of visited link.
<html>
<body vlink="red">
<p><a href="https://www.w3schools.com">W3Schools.com</a></p>
<p><a href="https://www.w3schools.com/html/">HTML Tutorial</a></p>
</body>
</html>
The vlink attribute specifies the color of visited links in a document.
Syntax
<body vlink="color_name|hex_number|rgb_number">
The <body> vlink attribute is not supported in HTML5. Use CSS instead.
CSS syntax (in the <head> section): <style>a:visited {color: #FF0000}</style>
CSS Example: Set the color of a visited link
Specify Anchor Text Color
One color can be used for the hyperlink anchor text and a different color for the
underline. This is handy if you don't want the standard default colors for link and visited
link.
Code - Change Anchor Text Color
<a href="change-underline-color.php" style="text-decoration: none; border-bottom: 1px
solid #ff0000; color: #000000;">Change Underline Color and Anchor Text Color</a>
12.Where to insert Style attribute in inline CSS? Explain.
Inline styles directly affect the tag they are written in, without the use of selectors.
<!DOCTYPE html>
<html>
<head>
<title>Playing with Inline Styles</title>
</head>
<body>
<p style="color:blue;font-size:46px;">
I'm a big, blue, <strong>strong</strong> paragraph
</p>
</body>
</html>
The p tag with the inline style attribute is the focus here:
<p style="color: blue; font-size: 46px;">
The style attribute is just like any other HTML attribute. It goes inside the element's
beginning tag, right after the tag name. The attribute starts with style, followed by an
equals sign, =, and then finally uses double quotes, "", which contain the value of the
attribute.
In our case, the value of the style attribute will be CSS property-value pairs: "property:
value;". You can have as many property value pairs as you want. Unlike normal CSS
syntax, inline styling does not use selectors or curly braces. Don't forget to include the
semicolon ; after each pair!
Inline styles are not so different from the other ways you can write CSS. For example, the
inline style above is almost like the following CSS rule:
p{
color: blue;
font-size: 46px;
}
This rule will affect every p on the page, whereas the inline style will affect only the <p>
it's written in.
The <strong> element inside the <p> will be blue with big text regardless of whether you
decide to use inline styling or CSS rules.
When to Use Inline Styles
Professional web developers do not use inline styles often, but there are times when they
are important to understand or necessary to use. Here are a few places you may see inline
styles:
HTML e-mail
Older websites
CMS content (e.g. WordPress, Drupal)
Dynamic content (i.e. HTML created or changed by JavaScript)
Emails often include HTML content. When you receive a fancy looking e-mail, it is either
one big image file or it is an HTML e-mail. You can craft HTML e-mails yourself, but
they can be tricky. The HTML viewers in email clients are not standardized, and most of
them do not allow <style> tags. For this reason, HTML e-mail often contain lots of inline
styles. Some of the styles included may be archaic, to support older e-mail-viewing
clients.
Another time you will see inline styles is on dynamic websites that use JavaScript. Often,
JavaScript scripts will add inline styles to HTML. For example, a common way to hide a
dialog box is to add the inline style display: none;.
When Not to Use Inline Styles
As mentioned before, web developers do not often use inline styles when creating web
pages,
13.How do you insert Style attribute in internal CSS? Explain.
An internal style sheet should be used when a single document has a unique style. You
define internal styles in the head section of an HTML page, by using the
<head>
<style>
hr { color:sienna; }
p { margin-left:20px; }
body { background-image:url("images/background.gif"); }
</style>
</head>
Internal style sheets are great for websites that have different styling requirements for
each page, or for styling a particular element within a page.
PART – C
14.Discuss in detail about Internal Style sheets. Give an example.
An internal style sheet may be used if one single page has a unique style.
Internal styles are defined within the <style> element, inside the <head> section of an
HTML page:
Example
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
15.Discuss in detail about external or linked Style sheets. Give an example.
With an external style sheet, you can change the look of an entire website by changing
just one file!
Each page must include a reference to the external style sheet file inside the <link>
element. The <link> element goes inside the <head> section:
Example
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
An external style sheet can be written in any text editor. The file should not contain any
html tags. The style sheet file must be saved with a .css extension.
Here is how the "mystyle.css" looks:
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
16.Discuss in detail about inline style sheets. Give an example.
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can
contain any CSS property.
The example below shows how to change the color and the left margin of a <h1> element:
Example
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
You can apply style sheet rules directly to any HTML element using style attribute of the
relevant tag. This should be done only when you are interested to make a particular
change in any HTML element only.
Rules defined inline with the element overrides the rules defined in an external CSS file
as well as the rules defined in <style> element.
Example
Let's re-write above example once again, but here we will write style sheet rules along
with the HTML elements using style attribute of those elements.
<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style = "color:red;">This is red</p>
<p style = "font-size:20px;">This is thick</p>
<p style = "color:green;">This is green</p>
<p style = "color:green;font-size:20px;">This is thick and green</p>
</body>
</html>
17.How do you create CSS file? Where do you implement it? Explain with an example.
Let’s begin by opening a text editing program.
Start with a simple web page with a heading, and we want the heading to be orange and
center aligned. Add the following code into your new blank text document:
1 h1 {
2 color: orange;
3 text-align: center;
4}
save CSS file and link it to an HTML page.
Step 1: Saving The CSS File
Create a new folder on your desktop (or another location you prefer) and name it CSS-
Test. Now, back in your text editing program save your document as “style.css”.
Linking CSS File to an HTML Page
Our new CSS file is worthless if we don’t apply it to a web page. Let’s create a quick
HTML page for this lesson. Create a new blank file in Notepad (or TextEdit) and add the
following code:
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5 <meta charset="utf-8">
6 <title>CSS-Test</title>
7 </head>
8 <body>
9
10 <h1>CSS-Test</h1>
11
12 <div id="box-one">
13 <p>This is box one.</p>
14 </div>
15
16 <div id="box-two">
17 <p>This is box two.</p>
18 </div>
19
20 </body>
21 </html>
save this document in our “CSS-Test” folder and name it “index.htm”.
Linking the Two Files Together
We still need to tell the web browser to load our “style.css” file when the “index.htm” page is
viewed. Add the following code to “index.htm” directly above our </head> closing tag:
1 <link rel="stylesheet" href="style.css">
This line of code tells our browser that we want to link a Style Sheet, that it’s located in the same
folder as our HTML page, and that it’s named “style.css”.
Now, when you view “index.htm” page in a web browser you should see a centered, orange
heading:
18.List out the advantages and disadvantages of DHTML.
Advantages of DHTML
DHTML is fairly fast when loading depending on your PC, It enables the web-page to look
up-to-date & interactive, It enables the web-page to look more professional by having the roll-
over buttons, the drop-down bars, etc, The people will trust you and they will enjoy being on
your website.
DHTML is very fast, It loads content on the fly, The whole page loads with the content part
which needs to be altered, so, It helps to save the time for the users and give the superb look
to the website.
The dynamic features possessed by DHTML are helping the web designers to create the web
pages that posses compact looks, downloads fast, have graphic effects, It provides greater
functionality and it can hold much more text or content all at the same time.
XML DHTML is more efficient for content management purposes, By using more dynamic
XML to create the pages, you will be able to import high volumes of text and other
information (with the templates use) without spending the time coding pages individually.
The result of this saves the web designers time because there are few files to maintain, XML
offers a lot of compatibility and it can work with the other Internet capable devices such as
the cell phones and PDAs, It works well in the other formats including PDF, the plain text and
multiple Internet browsers.
The clients like this type of website because it allows them to make the changes to their data
(such as the inventory list) and they do not interfere with the coding and design of the
website, There are new features and capabilities that are easier for the web designers to
develop with DHTML style pages.
Disadvantages of DHTML
DHTML offers the great deal of different utilities and tools to use but these come with the
price and can be costly, Creating and editing your website involves lots of detailed coding, If
you are not familiar with coding, CSS, HTML, you will find it very difficult to create the nice
looking, working website.
DHTML provides great functionality but the DHTML editors’ available in market are very
expensive, DHTML editors such as Dreamweaver and Fusion, There are long and complex
coding in DHTML, But only the expert JavaScript and HTML programmers can write them
and edit them with good degree of functionality.
DHTML suffers from the browser support problems for different browsers, the code that is
written for Netscape can not work in Internet Explorer and Vice-Versa, The problem arises
due to the various features of the browsers, When writing the code, if you don’t check what is
compatible with different browsers, It will not work and you will waste your time.
Between the users using the internet explorer and Netscape navigator, DHTML has become
less popular in the recent times and the features of DHTML are now created in CSS languages
by themselves, the features can be made in Flash, so, The flash websites are becoming more
popular.
The dynamic websites (DHTML) are easier to manage and maintain content but they have a
higher initial cost than the static HTML websites, If the business change their HTML site to
DHTML, they should consider the time involved to train their staff (or hire more experienced
IT personnel).
DHTML (dynamic HTML) is used to create the animation on the web page like the rollover
buttons or the drop down menus, as well as being used to make the browser-based games,
There are platform problems with DHTML due to different web languages.
