Project Report on HTML
-
Upload
mrankushsharma -
Category
Documents
-
view
229 -
download
0
Transcript of 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
-
8/8/2019 Project Report on HTML
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.
-
8/8/2019 Project Report on HTML
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.
-
8/8/2019 Project Report on HTML
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.
-
8/8/2019 Project Report on HTML
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.
-
8/8/2019 Project Report on HTML
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.
-
8/8/2019 Project Report on HTML
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/8/2019 Project Report on HTML
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.
-
8/8/2019 Project Report on HTML
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?
-
8/8/2019 Project Report on HTML
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.
-
8/8/2019 Project Report on HTML
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.
-
8/8/2019 Project Report on HTML
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
-
8/8/2019 Project Report on HTML
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 :
-
8/8/2019 Project Report on HTML
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
-
8/8/2019 Project Report on HTML
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.
-
8/8/2019 Project Report on HTML
16/60
PROGRAMS OF HTML
PROGRAME OF MY HOMEPAGE
INPUT
-
8/8/2019 Project Report on HTML
17/60
OUTPUT
-
8/8/2019 Project Report on HTML
18/60
PROGRAM TO SHOW THE USE OF FORMATING TAGS
PROGRAM
INPUT
-
8/8/2019 Project Report on HTML
19/60
output
-
8/8/2019 Project Report on HTML
20/60
PROGRAM OF DISPLAY THE USE OF HEADERS
PROGRAM
INPUT
OUTPUT
-
8/8/2019 Project Report on HTML
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
-
8/8/2019 Project Report on HTML
22/60
OUTPUT
-
8/8/2019 Project Report on HTML
23/60
PROGRAM TO SHOW USE OF UNORDERED LIST
PROGRAM
OUTPUT
-
8/8/2019 Project Report on HTML
24/60
PROGRAM TO SHOW THE USE OF TABLE.
PROGRAM
-
8/8/2019 Project Report on HTML
25/60
OUTPUT
-
8/8/2019 Project Report on HTML
26/60
PROGRAM TO SHOW USE OF ROW SPAN
PR0GRAM
-
8/8/2019 Project Report on HTML
27/60
OUTPUT
-
8/8/2019 Project Report on HTML
28/60
PROGRAM OF INSERT AN IMAGE INTO A DOCUMENT
PROGRAM
INPUT
-
8/8/2019 Project Report on HTML
29/60
OUTPUT
-
8/8/2019 Project Report on HTML
30/60
PROGRAM OF MARQUEE
PROGRAM
INPUT
-
8/8/2019 Project Report on HTML
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 .
-
8/8/2019 Project Report on HTML
32/60
PROGREM OF MY PROFILE
INPUT
-
8/8/2019 Project Report on HTML
33/60
OUTPUT
-
8/8/2019 Project Report on HTML
34/60
PROGREM OF MY STREGTH
INPUT
-
8/8/2019 Project Report on HTML
35/60
OUTPUT
-
8/8/2019 Project Report on HTML
36/60
PROGREM OF CAREER ASPIRATION
INPUT
-
8/8/2019 Project Report on HTML
37/60
OUTPUT
-
8/8/2019 Project Report on HTML
38/60
PROJECT
ON
JAVASCRIPT
-
8/8/2019 Project Report on HTML
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.
-
8/8/2019 Project Report on HTML
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
-
8/8/2019 Project Report on HTML
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.
-
8/8/2019 Project Report on HTML
42/60
PROGRAMS OF JAVASCRIPT
1.PROGRAM DISPLAY T ABLE OF 3
PROGRAM
-
8/8/2019 Project Report on HTML
43/60
OUTPUT
-
8/8/2019 Project Report on HTML
44/60
2.PROGRAM SHOW TABLE OF ANY NUMBER
PROGRAM
INPUT
-
8/8/2019 Project Report on HTML
45/60
OUTPUT
-
8/8/2019 Project Report on HTML
46/60
3. PROGRAM TO PRINT PYRAMID SERIES
PROGRAM
OUTPUT
-
8/8/2019 Project Report on HTML
47/60
4.PROGRAM TO REVERSE SERIES
PROGRAM
-
8/8/2019 Project Report on HTML
48/60
OUTPUT
-
8/8/2019 Project Report on HTML
49/60
5.PROGRAM OF Check Answer By Click
PROGRAM
Output
-
8/8/2019 Project Report on HTML
50/60
6.PROGRAM OF COLOUR DISPLAY
PROGRAM
OUTPUT
-
8/8/2019 Project Report on HTML
51/60
7.PROGRAM SHOW QUIZZ
PROGRAM
-
8/8/2019 Project Report on HTML
52/60
OUTPUT
8.PROGRAM OF STAR DISPLAY
PROGRAM
-
8/8/2019 Project Report on HTML
53/60
OUTPUT
9.PROGRAM OF DISPLAY NAME BY USER
PROGRAM
-
8/8/2019 Project Report on HTML
54/60
OUTPUT
PROGRAM OF BIRTH DATE:
INPUT
-
8/8/2019 Project Report on HTML
55/60
OUTPUT
-
8/8/2019 Project Report on HTML
56/60
-
8/8/2019 Project Report on HTML
57/60
PROGRAME OF MATCH ROUND
INPUT
-
8/8/2019 Project Report on HTML
58/60
OUT PUT
-
8/8/2019 Project Report on HTML
59/60
PROGRAME OF CALCULATOR
INPUT
OUTPUT
-
8/8/2019 Project Report on HTML
60/60