Scribd
Upload
67 views

Section 1 HTML (Hypertext Markup Language)

The document discusses the basics and advanced topics of HTML. It covers HTML structure, tags, elements and attributes. It also discusses creating HTML documents, forms and frames. The document contains exercises for practicing HTML in lab sessions covering topics like lists, tables, images and styling.

Uploaded by

Sushma Shivkar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
67 views

Section 1 HTML (Hypertext Markup Language)

The document discusses the basics and advanced topics of HTML. It covers HTML structure, tags, elements and attributes. It also discusses creating HTML documents, forms and frames. The document contains exercises for practicing HTML in lab sessions covering topics like lists, tables, images and styling.

Uploaded by

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

HTML (Hypertext

SECTION 1 HTML (HYPERTEXT MARKUP Markup Language)

LANGUAGE)
Structure
1.0 Basics of HTML
1.1 How to Create HTML Document?
1.2 Steps for Creating a Simple HTML Program
1.3 Exercises for Practice in Lab Sessions

1.0 BASICS OF HTML


Web pages or materials in the form of hypermedia documents accessed through the
Internet can be located anywhere in the world.

No matter where they originated, most Web documents are created using Hypertext
Markup Language (HTML). HTML is a powerful authoring language and has
different versions like HTML 4.2, HTML 4.0, HTML 3.2, HTML 3.0 and HTML 2.

HTML is used to define document structure and format, with the help of a single tag
or a pair of tags. A tag is a string in the language surrounded by a less than (<) and a
greater than (>) sign. An opening tag does not begin with a slash (/). An ending or
closing tag is a string that begins with a slash (/).

HTML documents format textual information with embedded markup tags that
provide style and structure information. A whole document in HTML begins with
<HTML> and ends with </HTML>.

1.1 HOW TO CREATE AN HTML DOCUMENT?


An HTML document can be created using any HTML editor or text editor like
notepad etc.

1.2 STEPS FOR CREATING A SIMPLE HTML


PROGRAM

1. Go to Start -> Programs->Accessories->Notepad.

5
Lab Manual 2. Begin with a document type tag and an <HTML> opening tag. Enter the
following line in your doc.
<HTML>

3. Indicate that you are beginning the head element of a document by issuing the
<HEAD> opening tag. If a <HEAD> element is included, it must appear within
an <HTML> element. The following line should appear next in your document:
<HEAD>

4. The <TITLE> element is used to indicate the title of an HTML document.


<TITLE> tags are placed within the head component of a document and the title
is placed between the opening and the closing <TITLE> tags. Add the
following <TITLE> element to your document.
<TITLE>My First Page</TITLE>

5. To end the head area issue a <HEAD> closing tag.


</HEAD>

Thus the <HEAD> element is nested within the <HTML> element.

6. At this point the body of the document is developed. A <BODY> opening tag
indicates that this point has been reached. Enter the following line.
<BODY>

7. In the following example, the body of the document contains a simple text
statement which you can now enter in your file:
Hello World !

8. A </BODY> closing tag marks the end of the <BODY> element. Similar to the
Head element, the <BODY> element is also completely nested within the
<HTML> element. To end the <BODY> element, issue the closing
corresponding tag in your document.
</BODY>

9. Finally, terminate the <HTML> tag with </HTML> as shown below:

10. Save your document as mypage.html

6
HTML (Hypertext
Markup Language)

11. To view the document open the .html document in the browser.

1.3 EXERCISES FOR PRACTICE IN LAB SESSION


SESSION 1
Exercises
1. Write HTML code to develop a Web page having the background in red and
title “My First Page” in any other colour.

2. Create an HTML document giving details of your name, age, telephone number,
address, TLC code & enrolment number aligned in proper order.

3. Write an HTML code to design a page containing text, in form of paragraphs


giving suitable heading style.

SESSION 2
Exercises
1. Create a page to show different attributes of Font tag.

2. Create a page to show different attributes: italics, bold, underline.

3. Design a page having background colour yellow, giving text colour red and
using all the attributes of font tab.

SESSION 3
Exercises
1. Write an HTML code to create a Web page of blue color and display links in
red colour.

2. Write an HTML code to create a Web page that contains an image at its center.

3. Create a Web page with appropriate content and insert an image towards the left
hand side of the page. When user clicks on the image, it should open another
Web page.

7
Lab Manual SESSION 4
Exercises
1. Create a Web page using href attribute of anchor tag & the attribute: alink, vlink
etc.

2. Create a Web page, wherein when the user clicks on the link it should go to the
bottom of the page.

3. Write HTML code to create a Web page of pink colour and display a moving
message in red colour.

SESSION 5
Exercises
1. Create a Web page, showing an ordered list of the names of five of your friends.

2. Create an HTML document containing a nested list showing the content page of
any book

3. Create a web page, showing an unordered list of names of five of your friends.

SESSION 6
Exercises
1. Create a Web page, which should contain a table having two rows and two
columns.

2. Fill in some dummy data in the table created by you in question 1 of this session.

3. Create the following table in HTML with Dummy Data

Name of Place Destination Train No. Time Fair


train Arrival Departure

SESSION 7
Exercises
1. Create the following table

Colour (White)
RED GREEN BLACK

2. Design an HTML Page having 3 images placed in the following format.

Image 1

Image 2

Image 3

(Hint: Table can be used to align images)


8
3. Write HTML code to generate the following output: HTML (Hypertext
Markup Language)

Weather DELHI MUMBAI


40 35

SESSION 8
Exercises
1. What are HTML Physical style tags and Logical style tags?

2. Which HTML tag allows you to scroll text on the Web page?

3. What is the comment tag in HTML?

4. Design an HTML Page for the “Block Introduction” of this book: The page
should allow scrolling and the code should contain a comment header with your
name and enrolment number.

SESSION 9
Exercises
1. What difference does it make if we express the width of a table in percentage or
in pixel value? And how do we set the width of a particular column or cell in a
table?

2. Write HTML code to generate the following output:

1 2 3 4
5 6
Image
7 8
9 10 11 12

3. Create a Web page that should contain a table having seven rows and four
columns, along with the attributes – colspan & rowspan.

SESSION 10
Exercises
1. What are the different versions of HTML?

2. List 5 different HTML Editors.

3. What is the different image formats?

9
Lab Manual
SECTION 2 ADVANCED HTML
Structure
2.0 Advanced Topics of HTML
2.1 Exercises for Practice in Lab Sessions

2.0 ADVANCED TOPICS OF HTML


HTML is made up of many elements, a lot of which are overlooked. Although you can
develop a Website with the basic knowledge of HTML, to take advantage of many of
the advanced features, and to make pages fully compatible, it is useful to learn some
of the advanced topics of HTML, like:
1. Frames
2. Forms

Frame pages are basically an HTML file which break the browser window up into
separate parts or frames. In each frame a different HTML file can be loaded.

The basic idea of an HTML form is the same as that of a paper form. HTML deals
with forms exactly the same way you would with a paper form. There are groups of
items and single items all gathered together in one large form, like a paper form.

2.1 EXERCISES FOR PRACTICE IN LAB SESSION


SESSION 1
Exercises
1. How do you handle the situation when the browser doesn’t support frames?

2. What are inline frames?

3. Which tag is used to define frames in HTML?

SESSION 2
Exercises
1. Write an HTML code to develop a Web page having two frames that divide the
Web page into two equal rows.

2. Write an HTML code to develop a Web page having two frames that divide the
Web page into two equal rows and then divide the second row into two equal
columns.

3. Write an HTML code to develop a Web page having frames as described in the
above question and then fill each frame with a different background colour.

SESSION 3
Exercises
1. What are the tags used to display information for browsers that do not support
frames?

2. Write the various attributes of frameset tag and frame tag.

3. Write a code in HTML to design a page with two frames. The frame should
10 remain proportionate even when page is resized.
SESSION 4 Advanced HTML

Exercises
1. Write the code to develop a Web page, as shown below, using frames:

2. Write the code to make the background colour of each frame in the above
question different.

3. Create a Web page divided into two equal frames.

SESSION 5
Exercises
1. Create a Web page having two frames, one containing links and the containing
content of the links. When link is clicked, appropriate contents should be
displayed in Frame 2.

2. Create a home page for a TLC in following format:

TLC Information

Links Appropriate Information

3. Create a Web page using all the attributes of the frame and other tags.

SESSION 6
Exercises
1. Design a page with a text box called ‘name’ and a button with label ‘Enter.
When you click on the button another page should open, with the message
“Welcome <name>”, where name should be equal to the name entered in the
first page.

2. What are the values of method attribute of the form tag?

3. Set default value of ‘name’ text box of question 1 of this session to Victoria.
Add another button called Reset on click of this button name ‘text box’ should
be set to 100 default value.

SESSION 7
Exercises
1. Design a form using all input types. 11
Lab Manual 2. Create a simple form accepting:
Name
Enrolment Number
And Submit button

SESSION 8
Exercises
1. Design a Web Page, which is like ‘compose’ page of e-mail
To

Copy

Message:

Send

2. Which element is used to accept large text inputs from user?

3. Write a code to create a Web page having radio buttons labeled as name of
colours. Clicking on each radio button should change the colour of the Web
page.

SESSION 9
Exercises
1. What is the purpose of hidden field?

2. Create a form accepting the values:


Name
Address
Marks in 10 + 2, Graduation & Post Graduation

3. Which element is used to display a drop down list box?

SESSION 10
Exercises
1. Design a series of three HTML Pages for ABC. COM each called from the
previous one. Accept Name on the first page. When the user clicks on the enter
button, second page should open. The second page should not display the name
but a ‘Welcome screen with some information about ABC.COM. When the user
will click on the ‘next’ button it should display the name accepted in page 1 on
page 3.
(Hint: you may use hidden fields)

2. Create a Web page; divide that page into two frames. In one frame create two
links that will display different HTML forms in the other frame.

12
JavaScript
SECTION 3 JAVASCRIPT
Structure
3.0 Script Basics
3.1 Incorporating JavaScript into a Web Page
3.2 Exercises for Practice in Lab Sessions.

3.0 JAVASCRIPT BASICS


The World Wide Web (WWW) began as a text-only medium. The first version does
not even have the capability to include graphics on a page.

Today’s Web sites include graphics, sound animation, video and sometimes even
useful content! Web scripting languages, such as JavaScript, are one of the easiest
ways to spice up the Web page and to interact with users in new ways, HTML, unlike
which is a simple text markup language, which can’t respond to the user, make
decisions, or automate repetitive tasks. Web scripting languages allow you to
combine scripting with HTML to create interactive Web pages.

A script in JavaScript can range from a single line to a full-scale application.


JavaScript was developed by Netscape Communications Corporation, the makers of
the popular Netscape Navigator Web browser. JavaScript was the first Web scripting
language to be introduced, and it is by far the most popular. Here are a few things you
can do with JavaScript:

• Add scrolling or changing messages to the browser’s status line.


• Validate the contents of a form and make calculations.
• Display messages to the user, either as part of a Web page or in alert boxes.
• Animate images or create images that change when you move the mouse over
them.
• Detect the browser in use and display different content for different browsers.
• Detect installed plug-ins and notify the user if a plug-in is required.

3.1 INCORPORATING JAVASCRIPT INTO A WEB


PAGE
As you, hopefully, already know, HTML (Hypertext Markup Language) is the
language you use to create Web documents. You must have created “Hello World!”
as given below:
<HTML>
<HEAD><TITLE>My First Page</TITLE></HEAD>
<BODY>
Hello World!
</BODY>
</HTML>

To add JavaScript to a page, you’ll use a similar tag: <SCRIPT>.

The <SCRIPT> tag tells the browser to start treating the text as a script, and the
</SCRIPT> tag returns to the regularly scheduled HTML as given below. Note that
the file will be stored as .html or .htm.

13
Lab Manual

The output of the above program will be

In this example, we placed the script within the body of the HTML document. There
are actually four different places where you can use scripts:

• In the body of the page. In this case, the output of the script is displayed, as part
of the HTML document, when the browser loads the page.
• In the header of the page, between the <HEAD> tags. Scripts in the header
aren’t executed immediately, but can be referred to by other scripts. The header
is often used for functions.

14
• Within an HTML tag. This is called an event handler and allows the script to JavaScript
work with HTML elements. Event handlers are one type of script where you
don’t need to use the <SCRIPT> tag.
• In a separate file entirely JavaScript supports the use of files with the .js
extension containing scripts; these can be included by specifying a file in the
<SCRIPT> tag. This feature works only in Netscape Navigator 3.0 or later and
Internet Explorer 4.0 or later.

3.2 EXERCISES FOR PRACTICE IN LAB SESSION


SESSION 1
Exercises
1. How would you write any statement using only one write() or writeln()
command?

2. Embed JavaScript in HTML document asking user’s name and then printing
Hello <User_Name>

3. Create a dialogue box with “Welcome to my Website” message.

SESSION 2
Exercises
1. Evaluate the expression:
a. 7+5
b. “7” + “5”
c. 7*5
d. 7/5
e. 7%5

2. Write the segment of Script that would ask the user if he wants a greeting
message and if he does, display a Gif file called Welcome .gif and display
“Welcome to Netscape Navigator!” in the document window following the Gif

3. Write the object definition for an object called car with four properties model,
make, year & price.

SESSION 3
Exercises
1. Write a program to display a multiplication table.

2. Write a code to create a scrolling text in a text box.

3. Write a JavaScript code to create a pull down menu box.

SESSION 4
Exercises
1. Write a program to move a text with mouse pointer.

2. Write a program to change colour of text randomly.

15
Lab Manual 3. Create a Web page using two image files, which switch b/w one another as the
mouse pointer moves over the image. Use the On Mouse over and On Mouse
out event handler

SESSION 5
Exercises
1. Write a JavaScript code to accept radius & display the area of the circle.

2. Use the date function get Date & set Date to prompt the user for an integer b/w
1 – 31 & return day of the week it represents.

3. Display time and print message accordingly e.g., ‘Good Morning’ in Morning
etc.

SESSION 6
Exercises
1. Using JavaScript create a digital clock.

SESSION 7
Exercises
1. Using JavaScript create a calculator.

SESSION 8
Exercises
1. Create an HTML form that has a number of text boxes. The user fills the
textboxes with data. Write a script that verifies that all textboxes have been
filled. If a text box has been left empty pop up an alert message indicating the
box that has been left empty. When OK button is clicked, set focus to that
specific textbox. If all the textboxes are filled, display thank you.

SESSION 9
Exercises
1. Create an HTML form that inputs employee details and display the same on the
HTML page.

2. Write a program, which prompts the user to enter a sum of two numbers and
display whether the answer is correct or incorrect.

SESSION 10
Exercises
1. Illustrate how the reset button on form functions.

2. Create a program to check for null or empty string.

SESSION 11
Exercises
1. Create a program to generate a hit counter.
16
2. Create a program to verify whether email address provided by the user is valid JavaScript
or invalid.

SESSION 12
Exercises
1. Write a program to scroll the text on status bar.

2. Write a program to create a small window in main window.

SESSION 13
Exercises
1. The form consists of two multiple choice lists and one single choice list

a. The first multiple choice list displays the major dishes available.
b. The second multiple choice list displays the stocks available.
c. The single choice list displays the miscellaneous (Milkshakes, soft drinks,
softy etc. available)

SESSION 14
Exercises
1. Create a Web page with two forms, one office copy and one customer copy
when user enters date in customer copy it gets updated in office copy.

SESSION 15
Exercises
1. Use JavaScript for authentication and verification of the textboxes in the static
site developed by the student in the HTML exercise.

17
Lab Manual
SECTION 4 VBSCRIPT
Structure
4.0 VBScript Basics
4.1 Incorporating VBScript into HTML Page
4.2 Exercises for Practice in Lab Sessions

4.0 VBSCRIPT BASICS


VBScript is a powerful and easy to learn tool that can be used to add interaction to
your Web pages.

The Web browser receives scripts along with the rest of the Web document. The
browser parses and processes the scripts. HTML was extended to include a tag that is
used to incorporate scripts into HTML-the <SCRIPT> tag.

4.1 INCORPORATING VBSCRIPT INTO HTML PAGE


To add scripts into your Web pages <SCRIPT> tag is used. The <SCRIPT> tag
signifies the start of the script section, while </SCRIPT> marks the end. An example
of this is shown below:
<HTML>
<HEAD>
<TITLE>Working With VBScript</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!--
MsgBox "Welcome to my Web page!"
-->
</SCRIPT>

The LANGUAGE attribute of SCRIPT tag specifies the language used for scripting.
Scripts are usually placed at the top of the Web document, in the HEAD. There are
four different places where you can use scripts:

• In the body of the page. In this case, the output of the script is displayed, as part
of the HTML document, when the browser loads the page.
• In the header of the page, between the <HEAD> tags. Scripts in the header
aren’t executed immediately, but can be referred to by other scripts. The header
is often used for functions-groups of VBScript statements that can be used as a
group.
• Within an HTML tag. This is called an event handler and allows the script to
work with HTML elements. Event handlers are the one type of script where you
don’t need to use the <SCRIPT> tag.
• In a separate file entirely.

Not all browsers support scripting languages. To handle such browsers you can
enclose your script in comment tags (<!-- and -->).

4.2 EXERCISES FOR PRACTICE IN LAB SESSION


SESSION 1
Exercises

18 1. Write a programme to display the following on a Web page:


Hello <User_Name> VBScript

2. Create a Web page that displays a message box with the message:

“Welcome to my Website”

3. Write code to change colour of text randomly.

SESSION 2
Exercises
1. Write a VBScript code that accepts the length, breadth and height and displays
the area of a rectangle.

2. Create a programme to generate a hit counter.

SESSION 3
Exercises
1. Write a programme, which prompts, the user to enter the sum of two numbers
and display whether the answer is correct or incorrect.

2. Using VBScript, create a calculator.

SESSION 4
Exercises
1. Create a programme to check for null or empty string.

2. Create a form that has an e-mail field. Now write VBScript code for validation
of the email address.

SESSION 5
Exercises
1. List the Mouse and Keyboard events in VBScript.

2. How do you generate a random number in VBScript?

SESSION 6
Exercises
1. Create a form in HTML containing the following fields and then perform the
validation of each field using VBScript.

Name - textbox
Address - textbox
Date of Birth - a combo box (one for each, day, month and
year)
Email - textbox

2. How do you declare variables in VBScript and enlist the various variables-
naming rules.

19
Lab Manual SESSION 7
Exercises
1. What is the purpose of Option Explicit in VBScript code?

2. Using an HTML form accept the Principal, Rate of Interest and Time from the
user, validate the three fields and then display the Simple Interest to the user.

SESSION 8
Exercises
1. Create a programme that accepts the time from the system clock and
accordingly displays a Good Morning, Good Afternoon or Good Evening
message to the user. Use If – Then – Else statement.

2. Create the above programme using Select Case.

SESSION 9
Exercises
1. Write a programme in VBScript that uses For..Next looping statement to create
a Fibonacci series.

2. Using Do..While loop display the factorial of a number.

SESSION 10
Exercises
1. Write a programme that displays the multiplication of two matrices.

2. Write a programme that displays the transposition of a matrix.

3. Write a programme that accepts a number from the user and displays its
factorial only if it is a prime number.

20
Dreamweaver

SECTION 5 DREAMWEAVER
Structure
5.0 How to Work in Dreamweaver?
5.1 How to Save your File?
5.2 Menu
5.3 Adding Layers to the Timeline and Giving Motion to the Layer.
5.4 Inserting Scripts
5.5 Inserting External Media in the Web Page
5.6 Adding SSI (Server-side include to the Page)
5.7 Adding CSS Style to your Page
5.8 Adding XML Files to your Page
5.9 To Export a Dreamweaver Document as XML File
5.10 Exercises for Practice in Lab Sessions.

5.0 HOW TO WORK IN DREAMWEAVER?


Where and how to open Dreamweaver?
Step 1: Click on Start
Step 2: Select Program
Step 3: Select Macromedia Dreamweaver
Step 4: Click on Dreamweaver

You will get the screen as given below:

21
Lab Manual

On opening Dreamweaver you will see 3 main windows, (1) Object; which contains
Character, Common, Forms, Frames, Head and Invisible. Many options are available
under these, like under common where you will get, insertion of image, rollover
image, layer, tabular data, horizontal bar, line break, email link, date, flash movie,
fireworks object, shockwave file, generator, plug-ins, active x controls, SSI etc.
under character in which you will find some special character/symbols like ©, ®, £,
¥, ™ etc; under frames where you will find different type/style of frames; under
forms where you will find all the elements of forms, like text box, password box,
radio button, check box, selection box, jump menu, submit & reset button etc. (2)
Properties; which provides the properties of the selected object/item, page properties
etc; (3) Launcher; which contains: Site, Library, HTML Style, CSS Style,
Behaviours, History, HTML Source; On clicking any of the items on the Launcher
the subsequent window opens up.

Before creating your Web page you have to create a Root directory in which all of
your work will be saved. Then in Dreamweaver create a Site and Provide the Root
Directory (which you have created). To do this:
Step 1: Select Site from Launcher window
Step 2: Click on Define Site
Step 3: Click on NEW
Step 4: Give a name under “Site Name”
Step 5: Select the folder by browsing under “Local root folder”
Step 6: Click on OK
Step 7: Click on DONE

Now start working on Dreamweaver


Write your text, format the text, insert picture through Object window or by INSERT
-> IMAGE. The Insert Menu provides you all the features available under the Object
window. The modify menu provides you scope to modify the selection properties,
page properties, link, table, frames etc. The Text menu helps to do all the formatting
for the text, like selecting font, font-size, colour, alignment etc.

5.1 HOW TO SAVE YOUR FILE?


Step 1: Click on FILE
Step 2: Click on SAVE
Step 3: Choose the folder in which you want to save
Step 4: Provide a name to the file (with .htm / .html extension)
Step 5: Click on SAVE

5.2 MENU
File Menu: Under it we have New, Save, Save as, Save as template, Import, Export,
Preview in browser etc. options.

Edit Menu: In this menu we have Cut, Copy, Paste, Undo, Redo, Select all, Find,
Replace, Preference etc. options which help us in editing the document.

View Menu: Rulers, Grids, Plugins etc. are available under this.

Insert Menu: It contains almost all the things, which are there, in the Object tool bar.

Modify Menu: Under this we have Page properties, selection properties, Make link,
remove link, link target, table, layer, frameset, library, template, timeline, translate
etc. This menu helps to modify the page by choosing the option as per requirement.

Text Menu: It helps to format the text written in the page by providing details, such
as indent, outdent, list (ol, ul, dl), alignment, font, style, size, size increase, size

22
Dreamweaver

decrease, HTML style, CSS style, colour etc. It also provides the facility to check the
spellings in the page.

Site Menu: This menu contains site files, site map, new site, open site, define site
options.

Window Menu: It contains all the different windows, like object, properties,
launcher, site file, site map, CSS, timeline, history, behaviour, layer, frame, library,
template etc.

5.3 ADDING LAYERS TO THE TIMELINE AND GIVING


MOTION TO THE LAYER
Step 1: Choose Layer from Common toolbar and draw a layer.
Step 2: Write the text inside the Layer.
Step 3: Click on Modify (when the layer is selected)
Step 4: Click on Timeline
Step 5: Click on Add layer to timeline.
Step 6: Modify -> Timeline -> Select Record path to Layer
Step 7: Drag the layer as per your wish, to define a path.
Step 8: Tick on Auto Play & Loop (if required)
Step 9: Open it in the Browser to see the effect.

5.4 INSERTING SCRIPTS


Step 1: Click on Insert
Step 2: Click on Script
Step 3: Choose the type of Script
Step 4: Write the code in “Content”
Step 5: To finish, click on OK

5.5 INSERTING EXTERNAL MEDIA IN THE WEB PAGE


Step 1: Click on the icon in the object tool bar
Or
Insert -> Media -> Choose the media type to be inserted
Step 2: Find and select the file required (browse)
Step 3: Click on OK

5.6 ADDING SSI (SERVER-SIDE INCLUDE) TO THE


PAGE
Step 1: Click on the icon in the object tool bar
Or
Insert -> SSI
Step 2: Select the file
Step 3: Add the file
Step 4: Provide the URL (where to be attached)
Step 5: Provide information on Relative to the document or to the “Site Root”
Step 6: Click on OK.

To Show/Hide The SSI Document In The Page


Step 1: Click on Edit
Step 2: Select reference

23
Lab Manual

Step 3: Select Translation


Step 4: Click on SSI
Step 5: For showing the SSI file; choose one of the following options:
a) in all files
b) in no files
c) in files with extension (stm, htm, html, shtm, shtml)
d) in files matching one of these expressions “<!-- #include”

Example : <!--#include virtual="/virtual campus/bitmain/result.html" -->


Step 6: Click on OK

5.7 ADDING CSS STYLE TO YOUR PAGE


Step 1: Click on Window Menu
Step 2: Select CSS Styles
Or Click on CSS Styles in the “Launcher”
Step 3: Click on New to create a new CSS style
Step 4: Choose the Type
a) Make custom style
b) Redefine HTML
c) Use CSS Selection
Step 5: Give a name
Step 6: Click OK

On choosing (a) of step 4 you will get a new screen in which you have to provide the
following details in Category:
i. Type: Provide the Font, Size, Style, Weight, Decoration, then click OK
ii. Background: provide a Colour or insert an image, then click OK
iii. Block: Give the alignment style, then click OK
iv. Box: Provide the margin setup of Top, Left, Right & Bottom, then click OK
v. Border: Provide the width & colour, then click OK
vi. List: Select the list type (OL, UL, DL), then click OK
vii. Positioning: Provide the style, Visibility, Z-index, Placement (Top, Left, Right
& Bottom), click OK.

After providing the details, select the style from the CSS style window. Choose
where to apply this style (body, p, layer etc.), by clicking on Apply button in the CSS
style window.

5.8 ADDING XML FILES TO YOUR PAGE


Step 1: Choose File -> Import XML into Template
Step 2: Select the XML file & click Open

When an XML file is imported, Dreamweaver merges the XML content into the
Template, which is being specified in the XML file and shows the result in the
document window of Dreamweaver. If that specified Template is not found, then
Dreamweaver prompts you to select another Template for use.

The XML file should contain the name of the Template and editable region as XML
tags.

Example:
<doctitle>
<![CDATA[<title>newTemplate</title>]]>
</doctitle>
<Edit-Region>

24
Dreamweaver

<![CDATA[{Edit-Region}]]>
</Edit-Region>

Here doctitle identifies the title of the Template and edit-region identifies the editable
region.

But in a standard Dreamweaver file XML tags use the “item name”. The above
example (XML tags) is given below in standard Dreamweaver file:
<item name="doctitle">
<![CDATA[ <title>newTemplate</title>]]>
</item>
<item name="Edit-Region">
<![CDATA[{Edit-Region}]]></item>
</item>

Here “item name=doctitle” identifies the title of the Template and “item name=edit
region” identifies the editable region.

5.9 TO EXPORT A DREAMWEAVER DOCUMENT AS


XML FILE
Step 1: Choose File -> Open,
Step 2: Select the document that uses a template (and has editable regions)
Step 3: Click Open
Step 4: Choose File -> Export -> Export Editable Regions as XML.
Step 5: In the XML dialog box, choose a tag notation
Step 6: Click OK.
Step 7: Enter a name for the XML file
Step 8: Click Save.

When the document is exported, the generated XML file contains the name of the
Template the document is using and all editable region names.

5.10 EXERCISES FOR PRACTICE IN LAB SESSIONS


SESSION 1
Exercises
1. Design a Home page of your TLC.

2. Design a Home page for a Toy Company. The page has an image as the
background. Do some attractive text formatting to the text written in the page.

3. Insert an image in your page. Give a zigzag motion to the image in your page.
(Hint: Using timeline)

SESSION 2
Exercises
1. Insert an image in a page. In the browser, when you take cursor over it, another
image emerges under it and when you click on the second image, it takes you
to exercise 2 of session 1.
2. Design a Web page which contains details about your TLC. Give links to a few
options. Also make a link “Mail Us”. On clicking this, it will open the
compose box for mailing to “[email protected]”.

25
Lab Manual

SESSION 3
Exercises
1. Show the course contents of HND in a table.

2. Design the table as given below and enter some data:

Table 1 Table 2 Table 3


Name Age Phno. Name Address Name M-1 M-2 Total

Personal Table Address Table Marks Table

3. Include .css file to one of your Web page created earlier.

SESSION 4
Exercises
1. Design a form as shown below:

2. a. Include an SSI file in your document. Show the SSI file in this document.
b. Include an SSI file in your document. Don’t show the SSI file in this
document.

SESSION 5
Exercises
1. Show the course contents of HND in a table using XML and not HTML.

2. Create a Website that has a questionnaire (any), on submitting, it displays the


inputted data on the other page. You are supposed to use CSS and SSI
(wherever necessary).

26
Dreamweaver

SESSION 6
Exercises
1. Create a website that divides the Web page into two unequal frames. In Frame
One, there are two links to two different forms. The forms are validated on
submitting and the result is shown at the bottom of the same page. Use CSS for
formatting.

2. Design the homepage for IGNOU BIT using XML.

3. Write “Indira Gandhi National Open University”, “Bachelor of


Information Technology”, “Name of your TLC”, “Your Name” and “Your
Enrollment Number” in a Web page. The above written text will overlap each
other. The texts written have different coloured backgrounds. (Hint: Use Z-
index)

SESSION 7
Exercises
1. Design a form, which has a list menu. On selecting any item from that menu it
jumps to the related page. Insert a “GO” button alongside the list menu.

2. Using CSS, remake the Website given in Question 2 of Session 1.

SESSION 8
Exercises
1. Make a Web page to include:
1) a background image,
2) set the text colour to blue,
3) make 2 logos, link them to the IGNOU home page,
4) set the colour of all other text links black. (Use Hexadecimal
colour values rather than named colours).
Use Cascading Style Sheets to develop the above Web page

2. Explain the effect of the following HTML Code:


<html>
<head>
<title> Question 2: Session 8</title>
</head>
<body marginwidth="0" marginheigth ="0" topmargin ="0" leftmargin ="0">
<table>
<tr>
<td bgcolor ="#6BA2CC" >
<img src ="image_1.gif">
</td>
<td bgColor ="#6BA2CC" width ='500'> <center>
<b>THE TITLE OF THE WEBSITE </b></center>
</td>
<td bgcolor ="#6BA2CC" align ="right" width ='230' valign ='top'>
<a href="index.asp" style="color:'#134A81'">Home</a> |
<a href="contact_us.asp" style="color:'#134A81'">Contact Us</a> |
<a href="feedback.asp" style="color:'#134A81'">Feedback</a>
<a href="help.asp" style="color:'#134A81'">Help</a>
<input type="text" size ="16" class ="input_box">
<input type="button" value="Search" class ="button">
</td>
</tr>

27
Lab Manual

</table>
<table>
<tr>
<td>
<input type="Button" value="Home">
<input type="Button" value="Contact Us">
<input type="Button" value="Feedback">
<input type="Button" value="Email">
<input type="Button" value="Help">
</td>
</tr>
</table>
</body>
</html>

3. In the above question use gif images instead of buttons.

SESSION 9
Exercises
1. Develop a Web page with the following enhancements:

• A rollover effect, where an image changes if the user places the mouse
over it.
• An animation that occurs in response to the user clicking on an image.
• A pull-down menu with each option linking to a specific page.

2. Design a Web page. Integrate images, audio, video and animation all in one
page.

3. Develop the Question 1: Session 8 using XML

SESSION 10
Exercises
1. Design a website about yourself (minimum 5-7 pages).

2. Design the home page using Frames. The top frame will contain a Flash
animation file (showing pictures of you from childhood to till date), the left
frame will contain all the links and the right page will contain “Welcome to
My Home Page”. When clicked on the links the related page will open in the
right frame.

28

You might also like