HOME WORK - 4 CAP-209: GRAPHIC TOOLS

Bhaskar Mandal 10808835 R1813A15

1. You have been asked to make a simple webpage of a management firm which you have
joined as a trainee. You are allowed to use only the head elements to make that web page.
What do you mean by head elements in HTML? Explain briefly about their syntax.

Ans- The HEAD element

<! -- %head.misc; defined earlier on as "SCRIPT|STYLE|META|LINK|OBJECT" -->

<! ENTITY % head. content "TITLE & BASE?">

<! ELEMENT HEAD O O (%head. content;) +(%head.misc;) -- document head -->

<! ATTLIST HEAD
%i18n; -- lang, dir --
profile %URI; #IMPLIED -- named dictionary of meta info -->
Start tag: optional, End tag: optional

Attribute definitions profile = uri [CT]

The attribute specifies the location of one or more meta data profiles, separated by white space. For
future extensions, user agents should consider the value to be a list even though this specification only
considers the first URI to be significant.

Attributes defined elsewhere

• lang (language information), dir (text direction)

The HEAD element contains information about the current document, such as its title, keywords that
may be useful to search engines, and other data that is not considered document content. User agents
don’t generally render elements that appear in the HEAD as content. They may, however, make
information in the HEAD available to users through other mechanisms.

2. What do you mean by the URL? What are the various types of the URL? Explain and give
some examples for the same.

Ans- URL stands for Uniform Resource Locator, which means it is a uniform way to
locate a resource (file or document) on the Internet. The URL specifies the address of
a file and every file on the Internet has a unique address. Web software, such as
browser, uses the URL to retrieve a file from the computer on which it resides.

The actual URL is a set of four numbers separated by periods. An example of this
would be 202.147.23.8 but as these are difficult for humans to use, addresses are
represented in alphanumeric form that is more descriptive and easy to remember. The
Internet Domain Name System translates the alphanumerical address to numeric.

URL Types

Each URL is a combination of these types. Some of the same URLs are used in multiple examples are
below.
Static URL

Definition: A URL that connects to a destination without calling a script.

Example: http://muse.jhu.edu/journals/american_literature/

Discussion A static URL is a persistent, durable URL. No programming scripts are generated when a
static URL is selected. Therefore the destination URL is identical to the starting point URL. A static
URL is always a starting point URL.

Dynamic URL

Definition: A URL that processes a script to connect to a destination.

Example: http://www.springerlink.com/link.asp?id=100408

Dynamic URLs are becoming increasingly common with vendors and should be analyzed carefully.
Most become transformed at the destination.

Directory URL

Definition: A URL without a filename that points to a directory's default file.

Example: http://muse.jhu.edu/journals/american_literature/

A directory URL may be either static or dynamic. A dynamic directory URL calls a script from a file
given the Web server's default file name, e.g., default.asp. The script may be a simple redirect or
something more complex.

Formula URL

Definition: A required structure that adheres to a specific format and must be used to connect to a
destination.

Example: http://www.bioone.org/bioone/?request=get-journals-list&issn=0002-8444**

A formula URL may be either static or dynamic. If dynamic, the URL may be either unchanged or
transformed at the destination, for example:

3. Name and explain the various types of workspaces available in Dreamweaver? Which
workspace you will prefer to use if you don’t know much about the coding in HTML?
Explain the reasons for your choice.

Ans- The Dreamweaver workspace lets you view documents and object properties. The
workspace also places many of the most common operations in toolbars so that you can
quickly make changes to your documents. In Windows®, Dreamweaver provides an all
in one-window integrated layout. In the integrated workspace, all windows and panels
are integrated into a single larger application window.

The workspace includes the following elements:

The Welcome screen

Lets you open a recent document or create a new document. From the Welcome screen,
you can also learn more about Dreamweaver by taking a product tour or a tutorial.

The Application bar

Across the top of the application window contains a workspace switcher, menus
(Windows only), and other application controls.

The Document toolbar

It Contains buttons that provide options for different views of the Document window
(such as Design view and Code view), various viewing options, and some common
operations such as previewing in a browser.

The Standard toolbar

It Contains buttons for common operations from the File and Edit menus: New, Open,
Browse in Bridge, Save, Save All, Print Code, Cut, Copy, Paste, Undo, and Redo. To
display the standard toolbar select View > Toolbars > Standard.

The Coding toolbar

It contains buttons that let you perform many standard coding operations.

The Style rendering toolbar

It contains buttons that let you see how your design would look in different media
types if you use media-dependent style sheets. It also contains a button that lets you
enable or disable Cascading Style Sheets (CSS) styles.

The Document window

It displays the current document as you create and edit it.

The Property inspector

It lets you view and change a variety of properties for the selected object or text. Each
object has different properties. The Property inspector is not expanded by default in the
Coder workspace layout.

The Tag selector

It is located in the Status bar at the bottom of the Document window. It shows the
hierarchy of tags surrounding the current selection. Click any tag in the hierarchy to
select that tag and all its contents.

Panels

Help you monitor and modify your work. Examples include the Insert panel, the CSS
Styles panel, and the Files panel. To expand a panel, double-click its tab.

The Insert panel

Contains buttons for inserting various types of objects, such as images, tables, and
media elements, into a document. Each object is a piece of HTML code that lets you set
various attributes as you insert it. For example, you can insert a table by clicking the
Table button in the Insert panel. If you prefer, you can insert objects using the Insert
menu instead of the Insert panel.
The Files panel

Lets you manage your files and folders, whether they are part of a Dreamweaver site or
on a remote server. The Files panel also lets you access all the files on your local disk,
much like Windows Explorer (Windows) or the Finder (Macintosh).

The most common workspaces and that would be the designer workspace, the coder workspace, or the
dual screen workspace. The designer workspace is an integrated workspace using something that
Adobe calls MDI, Multiple Document Interface, in which all document windows and panels are
integrated into one larger application window. Notice that the panel groups are over to the right;
you've got your Property Inspector on the bottom and then your document window in the middle. This
is probably, as the name would suggest the ideal workspace. If you're doing a lot of design work, if
you're doing more coding work, there's also a workspace layout entitled Coder. This uses the same
integrated workspace as designer, but with the panel groups docked on the left.

4. Why we need to define a website in Dreamweaver? Write the steps to define a website in
Dreamweaver.

Ans- well after finished building our website, we need to upload them to the domain
space, and we got for our website. For that, we need everything organized inside a
directory / folder, so that the overall hierarchy of the web pages and files, we created
for our website remains clean, without getting much complicated. Also defining the site
later help to upload our entire website to the domain space assigned to it from
Dreamweaver itself through FTP (File Transfer Protocol). It also helps to update
changes we make to our website then and there, through Dreamweaver.

Defining a website is extremely a simple process in Dreamweaver.

a. Steps1: Create a folder with the name of your website you planned to build in any
convenient location of your hard disk, you prefer. This is where you goanna store
all the files of your website.

b. Steps2: Open your Dreamweaver application and on the menu bar at top, click on
Site->New Site. You will get a Site Definition Dialogue box. Give the name of
your website you planned to develop. Here, I am giving the site name as webway.
Then give the complete URL of your website on the HTTP address Text Box.
Here, I am giving http://www.webway.0fees.net and click next.

c. Steps3: On the next step we get two options. If we plan to use server technologies
(i.e. Scripting languages such as php, asp, jsp etc) you need to select the option,
Yes, I want to use a server technology, if not select No, I don’t want to use a
server technology.

d. Steps4: Now Select Edit Local Copies on my Machine, then upload to server
when ready, which is a recommended and simple process. If you want to edit
directly in the web server itself where your website resides, select the second
option, Edit directly on server using Local Network, which is actually done by
Dreamweaver via FTP. Also you need to browse and point the folder location to
the folder in your PC which you created on Step 1 and click Next.

e. Steps5: Then select Local Network to connect to your remote server browse and
select the folder created in step 1 to store your files for website in local hard disk.
 f. Steps6: On the next step, if your site is built and maintained by many people at
same time, you need to select the option Yes, enable check in check out as this
option allows only one person to work on a file at a time, to prevent team
members from overwriting each other's changes. If you are the only one person
going to maintain the website select the option, No, do not enable check in and
check out and click next.

g. Steps7: You will get a summary of all the configurations you had made so far to
define your site, click done. Now you will notice the name of your website on the
file dialogue box on the right bottom end of your Dreamweaver application.

5. How we can make the ordered and unordered lists in a webpage using HTML. Write the
HTML code for the same without using Dreamweaver.

Ans- Ordered lists allow you to quickly and easily display information that is easy for your visitors
to read quickly. An ordered list creates a list, which is indented, numbering the list items, starting at
one. This section will explain how to make an ordered list.

Main Tags
To specify an ordered list, you need to put in the tag for the ordered list. The tag looks like <OL>. The
starting tag is <OL> and the closing tag is </OL>. You will learn how to add list items in the next
section.
....<BODY>

<OL>
</OL>

</BODY>....

List Items
Now, you can add the actual text that will show up in list form. This goes between the two <OL> tags.
To put a list item in, you need to use the list tags, which are necessary for each item. The starting tag
is <LI> and the closing tag is </LI>. The text between the tags is what the list item is. These <LI>
tags go between the <OL> tags. Here is an example using the ordered list.
....<BODY>

<OL>

<LI> Get an idea </LI>

<LI> Create a web page </LI>
<LI> Advertise it </LI>

</OL>

</BODY>....

1. Get an idea
2. Create a web page
3. Advertise it

List Type
List type defines how the list items are labeled. The default is numerals, starting at 1, and going up.
You are able to change this to letters, roman numerals, and variations of these options.

The type tag looks like TYPE="list_type". This adds onto the <OL> tag so the final result looks like
<OL TYPE="list_type">. The text list_type can be replaced by any of the following:

TYPE="1" - Displays list items in numerals

TYPE="A" - Displays list items in uppercase letters
TYPE="a" - Displays list items in lowercase letters
TYPE="I" - Displays list items in uppercase roman numerals
TYPE="i" - Displays list items in lowercase roman numerals

....<BODY>

<OL TYPE="A">

<LI> Get an idea </LI>

<LI> Create a web page </LI>
<LI> Advertise it </LI>

</OL>

</BODY>....

Unordered lists allow you to quickly and easily display information that is easy for your visitors to
read quickly. An unordered list creates a list, which is indented, and each item has a bullet. This
section will explain how to make an unordered list.
Main Tags
To specify an unordered list, you need to put in the tag for the unordered list. The tag looks like
<UL>. The starting tag is <UL> and the closing tag is </UL>. You will learn how to add list items in
the next section.
....<BODY>

<UL>
</UL>

</BODY>....

List Items
Now, you can add the actual text that will show up in list form. This goes between the two <UL> tags.
To put a list item in, you need to use the list tags, which are necessary for each item. The starting tag
is <LI> and the closing tag is </LI>. The text between the tags is what the list item is. These <LI>
tags go between the <UL> tags. Here is an example using the unordered list.
....<BODY>

<UL>

<LI> Get an idea </LI>

<LI> Create a web page </LI>
<LI> Advertise it </LI>
</UL>

</BODY>....

• Get an idea
• Create a web page
• Advertise it

List Type
List type defines how the list items are labeled. The default type is bullets, but you are able to change
this to circles and to squares.

The type tag looks like TYPE="list_type". This adds onto the <UL> tag so the final result looks like
<UL TYPE="list_type">. The text list_type can be replaced by any of the following:

TYPE="disc" - Displays list items in bullets

TYPE="circle" - Displays list items in circles
TYPE="square" - Displays list items in squares

....<BODY>

<UL TYPE="square">

<LI> Get an idea </LI>

<LI> Create a web page </LI>
<LI> Advertise it </LI>

</UL>

</BODY>....

 Get an idea
 Create a web page
 Advertise it

Item Type
Item type defines how each individual list item is labeled. This is similar to list type but allows you to
select the type for each item, instead of the whole list.

The type tag looks like TYPE="list_ type". This adds onto the <LI> tag so the final result looks like
<LI TYPE="list_type">. The text list_type can be replaced by any of the following:

TYPE="disc" - Displays list items in bullets

TYPE="circle" - Displays list items in circles
TYPE="square" - Displays list items in squares
....<BODY>

<UL>

<LI TYPE="disc"> Get an idea </LI>

<LI TYPE="circle"> Create a web page </LI>
<LI TYPE="square"> Advertise it </LI>

</UL>

</BODY>....

6. What is the use of a Web Browser? Name any three popular Web Browsers available in the
market.

Ans-A browser is an application that provides a way to look at and interact with all the
information on the World Wide Web. Technically, a web browser uses HTTP to make
requests of web servers throughout the Internet on behalf of the browser user. In other
words, a web browser is a software application that allows one to view pages on the
World Wide Web.

Few of the popular Web Browsers available in the market are:

 InternetExplorer (www.microsoft.com/windows/ products/winfamily/ie/default.mspx)

 Mozilla Firefox (www.mozilla.com/firefox/)
 Opera (www.opera.com)
 Netscape (browser.netscape.com)
 SeaMonkey
 Avant (www.avantbrowser.com)
 Safari (www.apple.com/safari)
 Maxthon (www.maxthon.com)
 Bitty (www.bitty.com)
 Slim (www.flashpeak.com/sbrowser/)