project report on html

8/8/2019 Project Report on HTML

1/60

REPORT Page 1

PROJECT REPORTON

SOFTWARE LAB

MATA GUJRI COLLEGE, FATEHGARH SAHIB

Submitted to: - Submitted by: -

Prof.NAVDEEP Singh RANWINDER SINGH

ROLL NO.:6459

CLASS:MBA2ND


2/60

Introduction:

This session provides a knowledge of the HTML language, its history

and what are the elements which make a webpage meaningful.

After going through this, the students will be able to understand the

difference between a programming language and a Markup Language.

2.0 What is HTML?

H-T-M-L are initials that stand for HyperText Markup Language. Let us

now break it down :

Hyper: is the opposite of linear. Initially the computer programs had to

move in a linear fashion. HTML does not hold to that pattern and

allows the person viewing the World Wide Web page to go anywhere,

any time they want.

Text: is what you will use i.e english letters.

Mark up: is what you will do. You will write in plain English and then

mark up what you wrote.

Language: the language is plain English.


3/60

In other words, HTML is not a programming language. Instead, HTML is

used to define and classify different parts of your webpage according

to their function in other words indicating which part is the title of the

document, which part is a subheading, which part is the name of the

author and so on.

3.0 The Components of HTML

The HTML document is composed of the following components:

Tags AttributesTags and attributes work together to identify different document parts

& tell the browser how to display them.

Tags identify document parts by specifying that a chunk of information

be displayed as a paragraph or that another chunk of information be

displayed as a heading.

Attributes are optional parts of tags and modify or more thoroughly

specify information in tags such as color, alignment, height, or width.

4.0 A short History of HTML and the World Wide Web

The evolution of HTML involved more than changes to the tags and

attributes. Youll see that its variety of uses and resulting popularity

have changed the nature of HTML from functional information resource

to a marketing tool. HTML did not evolve as an entity on its own; it

took the efforts of many people to bring the technology to what it is

today.


4/60

Physicists at CERN (Centre European pour la Recherche Nucleaire) , a

European particle physics laboratory, needed an easy way to share

information over their network. In 1980, Tim Berners-Lee developed

the initial program that allowed paes to links to one another. A decade

later, development moved into the realm of text-only hypertext

browsers, and the World wide web was born. In 1992, CERN maade the

system and he software available to the rest of the world through the

Internet.

At that time, the Internet was used primarily for academic research

and so the fledgling Web was extended to other academic research

centers and universities throughout the world, including the National

Center for Supercomputing Applications (NCSA) at the University of

Illinois at Urbana-Champaign. The World Wide Web (with a hyphen)

was named in late 1990 by Berners Lee.

5.0 Understanding Basic HTML Tools

For your first documents, you need only two basic tools: an HTML

editor and a web browser.

y An HTML editor is the program you use to create and save yourHTML documents.

y A Web Browser is the program you use to view and test your HTMLdocuments.


5/60

6.0 HTML Editors

In general, the HTML editors fall into two categories:

1. Text- or code-based, which allow you to see the HTML code asyoure creating documents.

2. WYSIWYG (What You See Is What You Get), which show the resultsof code, similar to the way it will appear in a browser, as youre

formatting your document.

6.1 Using the Text Editor to write an HTML document.

You will write the HTML document on the word processor, like

Notepad, WordPad etc. When you are finished creating the HTML

document, you'll then open the document in a browser, like Netscape

Navigator. The browser will interpret the HTML commands for you and

display the Web page.

Let's get into the programs you will use to write your HTML document.

Keep this in mind: HTML documents must be text only. When you save

an HTML document, you must save only the text, nothing else.

When you use NotePad, WordPad etc. the file is saved in text-only

format without your doing any additional work.

The Word Processor

When you write to the word processor you will need to follow a few

steps:

1. Write the page as you would any other document.

2. When you go to save the document , always choose SAVE AS.


6/60

3. When the SAVE AS box pops up, you will need to save the page in a

specific format. Look at the SAVE AS dialogue box when it pops up:

Usually at the bottom, you find where you will be able to change the

file format.

4. If you have a PC, save your document as ASCII TEXT DOS or just

TEXT. Either one will work.

NotePad, WordPad, and SimpleText already save in text-only format so

if you use one of them as your word processor, you'll get the correct

format simply by saving your document.

7.0 How To Name Your Document

What you name your document is very important. You must first give

your document a name and then add a suffix to it. That's the way

everything works in HTML. You give a name and then a suffix.

Follow this format to name your document:

1. Choose a name like abc.2. Add a suffix. For all HTML documents, you will add either ".htm"

or ".html".

".html" tells the computer that this file is an HTML document. When we

get into graphics, you'll see a different suffix. All files used on the Web

will follow the format of "name.suffix." Always.

8.0 Opening the Document in the Browser

Once you have your HTML document on the floppy disc or your hard

drive, you'll need to open it up in the browser. It's easy enough. Follow

the steps along.


7/60

1. Under the FILE menu at the very top left of this screen, you'll findOPEN..

2. Click on it. The following dialog box appears in which you musttype in the HTML filename & then click OK.


8/60

The browser will now display the file on the screen.

9.0 How to look at the source code of an HTML document

from the browser window ?

Here's how you look at an HTML document (known as the "source

code"):

1. When you find a page you like, click on VIEW at the top of the

screen.

2. Choose DOCUMENT SOURCE from the menu. Sometimes it only

reads SOURCE.

3. The HTML document will appear on the screen with the HTML

source code.


9/60

10.0 Elements of a good Web page design

A good web page must include the following four processes:

1. Planning2. Organizing3. Creating4. Testing

10.1 Planning Documents

HTML focused on making information easily available. The resulting

World Wide Web and corporate intranets were primarily used to

provide information to those who needed it. In this manner, HTML was

visitor-centered, that means authors focused on determining what

their audience wanted and then provided that information.However, as Web Technologies became popular, they evolved into a

marketing tool for millions of companies, organizations and

individuals worldwide. Rather than strictly providing information,

the purpose of many websites is now to tell the visitors what the

company wants them to know, to persuade them to purchase a

product or service, and to keep them coming back to more. As a

result, HTML development has now shifted now to being

simultaneously visitor-centered and author-centered. Now, you not

only need to consider what your visitors want to know, you alsoneed to consider what information your organization wants to

provide.

Therefore before starting to produce the HTML documents, you

need to do some planning. You need to determine what your visitors

want and what your organization wants to provide.

What Do Your Visitors Want?


10/60

Whenever a visitor visits a website, he normally has a specific

interest in that. So during the planning phase of a website, you must

think about what visitors are expecting to see at your site. To know

about this in detail, you can start with your customers needs. ForExample, they might want a general information about you, your

company, or our products and services. Or they might want

information about the contact names, troubleshooting advice, safety

information, prices, schedules, order forms and so on.

So the developer of a website must list out the vistors needs in the

planning phase.

What Do You Want to Provide?

You must figure out what you want to include. For this you musttake a look at the materials you already have in hand. For Example,

marketing materials often include information about the company,

products, and services suitable for use on a Website.

If you dont have access to marketing materials, ask yourself a few

questions:

(i) What do I want people to know about my organization? What isthe corporate mission statement? What are my companys

goals?

(ii) What are my companys products or services? How do theyhelp people use them?

(iii) How do customers order our products?(iv) Is repair history or safety information so positive that I want to

publicize it?

(v) Can I include product specifications?(vi) Do I want to include information about employees? Do their

skills and experience play a big role in how well our products

are made or sold?

(vii) Can I provide information that is more timely, useful oreffective than other marketing materials such as brochures or

pamphlets, provide?

After you answer these and any other questions that are helpful in

your situation, you should be able to develop a list of what you want to

provide.


11/60

NOTE:Getting a consensus before you start to build a website is

always a good rule to follow.

Planning for Maintenance

Although maintaining your documents after you create them and

throughout their existence on your site is a separate phase in the

lifecycle of documents, you also need to include maintenance in the

planning phase. This is particularly the case if you answer yes to any

of the following questions:

y Will more than one person be involved in developing the content?y Will more than one person play an active role in maintaining the

site?y Will your site include more than about 20 HTML documents?y Will you frequently add or modify a significant number of pages- say

more than 20-25 percent of the total number of documents.

Planning for Content Maintenance

If you depend on others for the content, you need to make

arrangements at the outset for how you will obtain updates. Will

content providers actually develop and update the Web pages, or

will they simply send you new information via e-mail? You need toplan accordingly. Planning now how you will handle content

revisions and updates will save out time and grief later.

Planning for Site Maintenance

Regardless of whether you or someone else will maintain the site

you develop, you need to carefully document the development

process and include the following information:

(a)The sites purpose and goals.(b)The process where you determined content(c)

Who provides content?

Documenting the development process will help those who maintain

the site to keep everything up-to-date.


12/60

10.2 Organizing your Documents

After you decide what information to include in your site, you need

to determine how you will arrange individual HTML documents.There are three types of Organization at your disposal:

1. Hierarchical2. Linear3. Webbed

10.3 Creating Documents

Create a Master document

A master HTML document contains the necessary structure tags aswell as general document format you want to use. When you create

a master HTML document, you establish the look of the site before

you start adding content. Include the elements that you want to

appear on every page such as the following:

The background Repeating images The corporate logo Icons Footer Information

Placing these elements in the master document will help you

develop them only once, and not every time you start a new

document.

Select Images

Determine which images or illustrations are available before you

start developing individual pages. Having an idea of what images

you want to include will help you determine page layout and you

can avoid rearranging pages later.

Create Important Pages First

Websites, by nature, are always under Construction. Youll find

that youre constantly updating content, adding new pages, or

removing pages. If you create a few of the important pages first,

test them and publish them, you can eliminate the task of polishing


13/60

many pages later. You can then add and modify pages as needed

after you create an initial few.

10.4 Testing Documents

Testing an HTML document involves viewing your documents in

multiple browsers with a variety of system settings. The purpose is

to see how your documents will appear to your visitors, to check

readability and usability and to root out any layout or formatting

problems.

Youll want to test for those issues on your local computer before you

publish your pages on the WWW or on the intranet. In doing so, you can

get the general idea of what your visitor is likely to see.

HTML BASIC PAGE STRUCTURE

1.All normal web pages consist of a head and body .2.The head is used for text and tags that do not show

directly on the page.

3.The body is used for text and tags that are showndirectly on the page.

4.All pages have an tag at the beginning at theend, telling the browser where the document start and

where it stop.

5.The most basic code :


14/60

< this section is for all that you want to show on the

page >

HTML TABLES INTRODUCTION

Tables are used on websites for many purposes:

1.The obvious purpose of arranging information in a table

2.The less obvious but more widely used purpose of

creating a page layout with the use of hidden tables.

3. dividing the page into separate section.

4.Creating menus

Typical with one color for the header and another for the

links


15/60

HTML BASIC TABLES

1.

2.To add rows to your table use the and tags.

3.you can divide rows into column with and tags

this is row one ,left side this is row one

right side.


16/60

PROGRAMS OF HTML

PROGRAME OF MY HOMEPAGE

INPUT


17/60

OUTPUT


18/60

PROGRAM TO SHOW THE USE OF FORMATING TAGS

PROGRAM

INPUT


19/60

output


20/60

PROGRAM OF DISPLAY THE USE OF HEADERS

PROGRAM

INPUT

OUTPUT


21/60

This show that h1 is the biggest font in html and ongoing is

smaller and use of headers.

PROGRAM TO SHOW USE OF ORDERED LIST

PROGRAM

INPUT


22/60

OUTPUT


23/60

PROGRAM TO SHOW USE OF UNORDERED LIST

PROGRAM

OUTPUT


24/60

PROGRAM TO SHOW THE USE OF TABLE.

PROGRAM


25/60

OUTPUT


26/60

PROGRAM TO SHOW USE OF ROW SPAN

PR0GRAM


27/60

OUTPUT


28/60

PROGRAM OF INSERT AN IMAGE INTO A DOCUMENT

PROGRAM

INPUT


29/60

OUTPUT


30/60

PROGRAM OF MARQUEE

PROGRAM

INPUT


31/60

OUTPUT

IF we apply marquee command on the document than the

heading or any line on which marquee command attempt is

scroll here and there .


32/60

PROGREM OF MY PROFILE

INPUT


33/60

OUTPUT


34/60

PROGREM OF MY STREGTH

INPUT


35/60

OUTPUT


36/60

PROGREM OF CAREER ASPIRATION

INPUT


37/60

OUTPUT


38/60

PROJECT

ON

JAVASCRIPT


39/60

INTRODUCTION ABOUT JAVASCRIPT

What is Java script

JavaScript is a simple, relatively easy to use programming

language for web pages. It gives you way to add

interactivity to your web pages. With JavaScript you can

transform your web pages from static displays to pages

that react to and process information from those who

view your pages . It does not require lot of programming

skill on your part to get started. You can pick up the

basics of JavaScript in a short time.


40/60

HISTORY OF HTML

JavaScript was released by Netscape in 1995 under the

name LiveScript. Netscapes purpose for developingLiveScript was to extend the capabilities of static HTML

pages and to offload data processing from busy web

servers onto local computers running web browsers. After

JAVA was released by Sun Microsystem and gained

recognition, the name LiveScript was changed to

JavaScript.

Microsoft recognized the importance of JavaScript and

entered the arena with two creations , Jscript and

VBScript . Jscript is roughly compatible with JavaScript .

VBScript is a subject of visual Basic .

These competing language have created problem for web

developers. Microsoft , Netscape and other finally agreed

to support a vendor-netural standard

WHY USE JAVASCRIPT

1. JavaScript offers a programming language for web

pages that most anyone can use.

2. JavaScript is becoming a standard for web page

programming. This mean you are more assured that your


41/60

work will not soon disappear. There are thousand of web

sites that use JavaScript today .

3. JavaScript makes your web pages come alive by

responding to things a user done on your page.

4.JavaScript is ideal for form validation. Sometimes may

want your users to enter a specific type of data(e.g. phone

number) into a form field. If it is important that this data

conform to a certain format, you can use JavaScript to

validate the data on the user machine before it is forward

to the server.

5. JavaScript can open and close new browser windows

and you can control the appearance of the new window

you create. You can control their size, their location and

the toolbars they have available.

6. JavaScript can perform mathematical computations.

7. JavaScript can make your web pages look fresh and up

to date.

8. JavaScript can make your page cool. It is easy to get

carried away with this one.

9. JavaScript is fun. There are lot of neat things you can

do with JavaScript which provide immediate visualfeedback.


42/60

PROGRAMS OF JAVASCRIPT

1.PROGRAM DISPLAY T ABLE OF 3

PROGRAM


43/60

OUTPUT


44/60

2.PROGRAM SHOW TABLE OF ANY NUMBER

PROGRAM

INPUT


45/60

OUTPUT


46/60

3. PROGRAM TO PRINT PYRAMID SERIES

PROGRAM

OUTPUT


47/60

4.PROGRAM TO REVERSE SERIES

PROGRAM


48/60

OUTPUT


49/60

5.PROGRAM OF Check Answer By Click

PROGRAM

Output


50/60

6.PROGRAM OF COLOUR DISPLAY

PROGRAM

OUTPUT


51/60

7.PROGRAM SHOW QUIZZ

PROGRAM


52/60

OUTPUT

8.PROGRAM OF STAR DISPLAY

PROGRAM


53/60

OUTPUT

9.PROGRAM OF DISPLAY NAME BY USER

PROGRAM


54/60

OUTPUT

PROGRAM OF BIRTH DATE:

INPUT


55/60

OUTPUT


56/60


57/60

PROGRAME OF MATCH ROUND

INPUT


58/60

OUT PUT


59/60

PROGRAME OF CALCULATOR

INPUT

OUTPUT


60/60