Professional Documents
Culture Documents
PROJECT
Submitted to: by:-
Submitted
Miss.Alka
Parminder Kaur
Roll No:-4001
Harjit Kaur
Roll No:-4007
P.G.D.C.A
INDEX
ACKNOWLEDGEMENT
INTRODUCTION SECTION
ABOUT PROJECT
CODING SECTION AND
PRESENTING PROJECT
ACKNOWLEDGEMENT
It is our pride to express our heart felt gratitude to our venerate
guides MISS.ALKA, whose guidance the project is carried out
successfully. We are grateful to them carried out successfully. We are
grateful to them for their regular encouragement, suggestions and time to
time consolation at every stage of our Endeavour.
We are indebted to the principal of our college MRS.NEENA
GARG for her hexavalent co-operation and help at each step during
project.
Finally, how can we forget to acknowledgement our parents for
their love and moral support without which we could not have been able
to fight out all the odds during the project.
Parminder Kaur
Harjit Kaur
PRINCIPAL OF WEB
DESIGNING
The principal of web Design help you plan and develop well-designed web sites that
combine navigation with the balanced use of graphics, text, and color . You will learn how to
create web sites that let users easily and quickly access your information, regardless of browser
type, connection speed, or computing platform. Whether you will be able to build sites from
scratch or redesigning an existing site.
The web design is intended first the individual that has knowledge of HTML and wants to
apply those skills to the task of designing attractive, information Web pages. You should able to
build a simple Web page that include text. Hyperlinks and graphics. Additionally you should be
comfortable working with computers and know your way around your operating system, whether
Windows, Macintosh or UNIX.
1. In Web designing us can used (gif,jpg) file multiple images along with timing
information about
build animations
3. The 216 color shared by pc and Macintoshes. These color display properly across
both platform without dithering.
4. The storage area for Web page and images is Cache & drive Cache.
5. We can use Cascading Style Sheet.
6. In Web design we can used complete URL color (Uniform Resource Locator)
7. To access browser uses to access the file, server or domain name, the relative,
path and the file name.
8. In web design we can used SGML(Standard Generalized Markup Languages).
9. The web provides an instantaneous communication system.
10. The Adobe Acrobat portable Document Format (PDF) platform independent
means to exchange document among Macintosh, windows & UNIX systems if
you need to put document on your Web sites that will printed on your visitors
printers, your needs are best served by Adobe Acrobat. This will be installed on
the Web browser event.
11. The Web short for World Wide Web. Sometimes called the www or (incorrectly)
the Net, the web is a global-spanning hypertext network consisting of tens of
million of WebPages.
HARDWARE REQUIRMENTS
A) Hardware Requirements
An Pentium bases pc
16 MB-RAM
Color Monitor
CD-ROM
Scroll mouse
Generic Keyboard
FRONTPAGE
NOTEPAD
MS-PAINT
MS-WORD
INTERNET EXPLORER
INTRODUCTION TO HTML
HYPERTEXT MARKUP LANGUAGE
Basic Concept: If the information has to be stored up on a central computer, it must be created
first. Information can be stored in the form of files on a computer using special software program
or programming environments.
An HTML document is simply a text file that contains the information you want to
public. It also contains embedded instructions called elements that indicate how a web browser
should prevent the documents.
e.g.
<html>
<head><title> ..</title></head>
<body>.</body>
</html>
Text which are underline are known as elements. HTML elements generally consist of a
pair of angle bracket surroundings some text that is called tags. The end tag (</tag>), except that
it has a slash(/) in it, as shown here:
<tag>
start tag
..
..
</tag>
end tag
a) Singular Tags
b) Paired Tags
Features of HTML:
HTML is a Hyper Text Markup Language.
HTML is a structured language, we can say this from a preceding discussion, HTML tags
have a well defined syntax and HTML document have a formal structure.
HTML is not a WYSIWYG design language.
HTML is not a programming language.
HTML is not extensible.
HTML is not complete.
HTML is not all you need to know to create good web pages.
Example:
<html>
<head>
<title>My First Page</title>
</head>
<body bgcolor = burlywood text = red >
<center> <h2> HTML</h2></center>
<hr align=center size=4 width=100 color=black>
<b><i><u> Hyper Text Markup Language</b></i></u>
<br>
<font face= lucida handwriting size=4 color=blue>
USED FOR BUILDING WEB PAGES</font>
</body>
</html>
Output
LISTS
TYPE OF LISTS:
There are three types of lists :
A. Unordered Lists
B. Ordered Lists
1. Unordered Lists:
An unordered list starts with the tag <ul> and ends with </ul> reach list item starts with the
tag <li> and ends with </li> tag we can use type attributes.
e.g.
<ul type=fillround>
<li>.
<li>.
</ul>
Type has two values:
Fillround and Square
2. Ordered Lists:
An ordered lists starts with <ol> tag and ends with </ol> tags reach list item start <li> tag.
Type, Start and Values we can use this as attributes with <ol> tag.
e.g.
<ol type=1>
<li>.
<li>.
</ol>
DEFINITION LISTS:
Definition list values appear within tags <dl and </dl>. Definition lists consists of two parts:
Definition term: appears after tag <dt>
Definition description: appear after tag <dd>
For e.g.
<html>
<head>
<title>Definiton Lists</title>
</head
<body>
<dl>
<dt>Keyboard
<dd>An input device
<dt>Printer
<dd>An output device
</dl>
</body>
</html>
Output:
e.g.
<html>
<head>
<title>Lists</title>
</head>
<body bgcolor=red>
<h2>Unordered Lists</h2>
<ul type=square>
Some of these products include
<li>Monitor
<li>Floppies
<li>Hard disk
</ul>
<h2>Ordered list</h2>
<ol type=1>
Some of these products include
<li>Monitor
<li>Floppies
<li>Hard disk
</ol>
<h2>Definition list</h2>
<dl>
<dt>Keyboard<dd>An input device
<dt>Printer<dd>An input device
</dl>
</body>
</html>
Output:
Various Attributes:
The <img> tag takes following attributes:
ALIGN: Controls alignment of the text.
VALUES: Top, Left, Middle, Center, Bottom, right
BORDER: Specifies the size of the border.
WIDTH: Specifies width of the image.
HEIGHT: Specifies the height of the image.
e.g.
<html>
<head>
</title> Working with images</title>
</head>
<body> bgcolor=burlywood>
<center>
<img border=3 src=window98.jpg width=200 height=200 align=center>
</center>
</body>
</html>
Output:
TABLES
A table is a two dimensional matrix, consisting of rows columns. Tables are intended for
displaying data in columns on a web page. All table related tags are included between the
<table> and </table> tags. Each row of table is described between <tr> and </tr> tags. Each
column of table is described between <td> and </td> tags. Table rows can be of two types:
HEADER ROWS: A row that spans across columns of table and is defined using <th> and
</th> tags.
DATA ROWS: Individual data cells placed in horizontal plane creates a data row.
Various Attributes:
Various attributes that can be included in TABLE are:
ALIGN: Horizontal alignment.
VALLIGN: Vertical alignment.
BORDER: Controls the border thickness in pixels.
CELL PADING: Control the distance between data and boundaries of the cells.
e.g.
<html>
<head>
<title>Tables</title>
</head>
<body bgcolor=burlywood>
<center>
<table border=5 width=50% cellpadding=10 cellspacing=10>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr align=center>
<td>Ram</td>
<td>22</td>
</tr>
<tr align=center>
<td>Sham</td>
<td>23</td>
</tr>
</table>
</center>
</body>
</html>
Output:
</body>
</html>
LINKING
HTML allows linking to other HTML documents as well as images clicking on section of text or
and image in one web page will open entire page or an image. The text or an image that provide
such linkage is called hyperlink of Hotspot. Browser distinguishes hyperlink from normal text.
Links are created in a web page by using <a> and </a> tags. The document to be navigated to
needs to be specified by using the href attribute of <a> tag.
Various Attributes:
By default color of hyperlink text is blue. It can be over by using following attribute with
<body> tag.
LINK: Changes color of hyperlink.
ALINK: Changes color of hyperlink that is activated.
VLINK: Changes the default color of hyperlinks that are already visited.
EXTERNAL LINKS:
Sometimes, a jump is read to a different document. Since the jump has to be targeted to a
specific location, we need to give its address and then jump to that address.
Syntax:
<a href=fileaddress ></a>
Sometimes a jump is read to a different location in a different document.
Syntax:
<a name=locationname ><a>
<a href=fileaddress#locationname ></a>
INTERNAL LINKS:
Sometimes a jump is red to different location in the same document. Since the jump has to be
targeted to a specific location, we need to identify a location with a name and then jump to
that location using the name.
We identify the location name by using NAME attribute of <a> tag.
Syntax:
<a name=locationname></a>
<a href=#locationname></a>
IMAGES AS A HYPERLINK:
Just as text can act a hyperlink. Image can be made hyperlink by enclosing an <img> tag
with in <a> and </a> tag.
Syntax:
<a href=path>
<img src=path>
</a>
FRAMES
Frames are defined as the portion of a web page into a number of images is known as frame.
We can create a number of images in a web page.
e.g.
<html>
<head>
<title>Frame</title>
</head>
<frameset rows=30%,70%>
<frame src=d:\html\table.html>
<frame src=d:\html\table.html>
</frameset>
</html>
Output:
Attributes of frames:
Noresize, Scrolling, Margin, Width, Margin
CODING
SECTION
AND
PRESENTING
PROJECT
<html>
<head>
</HEAD>
<li>FOR a poet,flower is a source of imagination and he explains his feelings by using flower as
a symbol.
<li>A flower also acts as a bridge for lover to define his emotions tp his beloved.
<li>A flower is a message of friendship in situation of quarrel.
<li>A flower is the best gift to someone by someone on any occassion.<br> </ul> </p>
<p align=center>
IF we pore over the flowers,we have to know that there are uncountable varieties of flowers
present on the earth.<br>some important are:
<ul>
<li><A HREF="amaryllis.htm">Amaryllis</A>
<LI><A HREF="aster.HTM">Aster</A>
<LI><A HREF="dahlia.HTM">Dahlia</A>
<LI><A HREF="foxgloves.HTM">Foxgloves</A>
<LI><A HREF="gladiolus.HTM">Gladiolus</A>
<LI><A HREF="hollyhock.HTM">Hollyhock</A>
<LI><A HREF="jasmine.HTM">Jasmine</A>
<LI><A HREF="lotus.HTM">Lotus</A>
<LI><A HREF="merigold.HTM">Merigold</A>
<LI><A HREF="ROSE_HTML.htm">Rose</A>
<LI><A HREF="sun flower.HTM">Sun Flower</A>
</UL> </font> <BODY> </HTML>