seminar report on web desinging

7/29/2019 Seminar Report on Web desinging

1/23

A

SEMINAR REPORT

ON

WEB DESIGNING

SUBMITTED IN PARTIAL FULFILLMENT OF THE

REQUIREMENT FOR THE AWARD OF THE DEGREE

OF

BACHELOR OF TECHNOLOGY

IN

Computer Science & Engineering

Submitted to: - Submitted by: -

Mr. Mohammad Faisal Shubham Hada

Asst. Professor Final year (CSE)

Enroll no. 9E1LDCSM30P112

DEPARTMENT OF COMPUTER SCIENCE & ENGG.

LAXMI DEVI INSTITUTE OF ENGG. &TECHNOLOGY, ALWAR

RAJASTHAN TECHNICAL UNIVERSITY2012-2013

Page 1 of 23


2/23

CANDIDATES DECLARATION

This is to certify that work, which is being presented in the seminar entitled Web

Designing submitted by undersigned student of final year B. Tech. in

Computer Science & Engineering in partial fulfillment for award of

degree ofBachelor of Technology is a record of my own work carried

out by me under guidance and supervision of Mr. Shriram Sharma

guide/supervisor.

This work has not submitted elsewhere for award of any other degree.

Date: Name & Signature of student

Place: LIET, Alwar _________________________

Page 2 of 23


3/23

LAXMI DEVI INSTITUTE OF ENGG. &

TECHNOLOGY, ALWAR

CERTIFICATE

This is to certify that the work, which is being presented in the

SEMINAR, entitled Web Designing submitted by Mr.

Shubham Hada final year B.Tech. ( VII Sem) in

Computer Science & Engineering in partial fulfillment

for award of degree of Bachelor of Technology is a

record of students work carried out by him/her under

our guidance and supervision.

This work has not been submitted elsewhere for the award of anyother degree.

Date:Place: liet, Alwar

Page 3 of 23

Year: 2012-2013


4/23


5/23

DATE: Shubham Hada

PLACE: LIET, ALWAR FINAL YEAR, CSE

Page 5 of 23


6/23

ABSTRACT

Web Designing

The main purpose of the study is to understand the very basics of web designing and knowing

the components of a web page. It deals with the basic study of HTML (Hyper Text markup

Language), CSS (Cascade Style Sheets), and Javascripts.

In the latest trends Web Designing is the very rapidly developing field in present market and has

attracted many new developers.

The report covers DOM (Document Object Model) to use HTML and embedding CSS style

sheets to it. It also covers the usage of Javascripts for event handling and making the website

pages look more attractive. In the future, Web Designing will be playing a more vital role as

Internet is being used for marketing, banking, examining, almost everything.

Page 6 of 23


7/23

CONTENTS

CHAPTER 1 History and Development 1

1. 1.1 WHAT IS WORLD WIDE WEB?

1.2 EVOLUTION OF WWW

1.3 ABOUT W3C

CHAPTER 2 Introduction

2. 2.1 What is Web Designing

2.2 Basic Principles

2.3 Document Object Model

CHAPTER 3 Creating Web Pages

3. 3.1 HTML

3.1.1 Structure and syntax

3.1.2 HTML Tags3.2 CSS


3.2.2 CSS Usage and Properties

3.3 Javascripts


3.3.2 Difference between Javascripts and Java

CHAPTER 4 ADVANTAGES AND DISADVANTAGES

CHAPTER 5 CONCLUSIONS & FUTURE SCOPE

REFERENCES

Page 7 of 23


8/23

Chapter-1

History and Development

1.1WHAT IS WORLD WIDE WEB?o The World Wide Web (also called WWW, or W3, or simply the Web) is an Internet-basedglobal information system that makes available multimedia information form over millions of

computers around the world.

o The Web is the second most popular Internet service next to e-mail, but it accesses a larger

quantity and greater variety of data than any other service in the Internet.

o The WWW is a network of interactive documents and the software to access them.

o It provides more information than you could ever digest in a lifetime, linked together in various

ways, available for you to browse whenever you want.

1.2EVOLUTION OF WWWo The concept of World Wide Web (WWW) was developed by Tim Berners and Lee in

Switzerland at the European Particle Research Centre (CERN) in the year 1989.

o They gave three standards to make a web page possible.

o HTTP (Hypertext Transfer Protocol): It is the way for computers to talk to one another over theInternet.

o HTML (Hypertext Markup Language): This describes how to format documents so they can be

transferred over the Web. It gives the proper look to the document.

o URL (Uniform Resource Locater): By this we can give a unique address to the document onthe Web.

o The main idea of web was to work with documents only. But now a days, WWW-World Wide

Web is a group of computers containing documents, figures, pictures, videos, sounds in verylarge collection.

o Because of the ability of web to work with multimedia and modern programming languages, itis very fast developing part of Internet.

o In the month of December, 1991, a public demonstration was given in San Antonio, Texas(USA).

o In the year 1993, the first graphical interface software package called Mosaic was released.

o The Mosaic was discovered by Marc Andersen, working with National Centre of

Supercomputer Applications (NCSA).

o In the year 1994, CERN and MIT (Massachusetts Institute of Technology) was collaborated

and created an organization for developing web, standardizing protocols, and interoperabilitybetween sites called World Wide Web Consortium (W3C).

Page 8 of 23


9/23

1.3ABOUT W3Co W3C stands for World Wide Web Consortium. It was created in December 1994.

o W3C is working to make the Web accessible to all users (despite differences in culture,

education, ability, resources, and physical limitations).

o Since this organizations created, hundreds of universities and companies have joined the

consortium. Some of them are Microsoft, IBM, America Online, Apple, Adobe, Macromedia,

Sun Microsystems.

o The WWW is maintained by W3C.

o This organization is a group of people related to Internet development and Web page

designing. This also includes specialists form the leading companies.

o W3C is the closest anyone gets to settings the standards for and enforcing rules about

World Wide Web.o Web is only few years old, but it is growing at an astounding rate. Its popularity has

increased dramatically.

o It is becoming more and more popular because it is so easy to use, colorful, and right in

content.

o Basically it is the series of interconnected documents stored on the computer sites or the

Web sites.

o You can visit stores to buy things, transfer movies, pictures, games and other software to

your computer, much of it free. As you move through the Web you can read the data onalmost every imaginable topic.

o On the whole, World Wide Web is becoming a pipeline telephone, communication,

entertainment, and news-the challenging existing technologies.

Page 9 of 23


10/23

Chapter-2

Introduction

2.1 What is Web Designing

Web design is a broad term covering many different skills and disciplines that are used in the

production and maintenance of websites. The different areas of web design include; web graphic

design, interface design, authoring; including standardised code and proprietary software, user

experience design and search engine optimization. Often many individuals will work in teams

covering different aspects of the design process, although some designers will cover them all.

The term web design is normally used to describe the design process relating to the front-end

(client side) design of a website including writing mark up, but this is a grey area as this is also

covered by web development. Web designers are expected to have an awareness of usability andif their role involves creating mark up then they are also expected to be up to date with web

accessibility guidelines.

2.2 Basic Principles

o Visitor-centric, clear purpose

o Progressive disclosure

o

Displays quicklyo Browser compatible

o Intuitive navigation

o Spelling, grammar, writing

o Secure (eCommerce)

o Attractive design, easy to read

o Cultural bias? (Regional? Domestic? International?)

o No technical problems (broken links, buggy scripts)

o Maintainable (separate content from style)

o Search Engine Accessible

Page 10 of 23


11/23

2.3 Document Object ModelThe Document Object Model (DOM) is a cross-platform and language-independent convention

for representing and interacting with objects in HTML, XHTML and XML documents. Objects

in the DOM tree may be addressed and manipulated by using methods on the objects. The public

interface of a DOM is specified in its application programming interface (API). The history of

the Document Object Model is intertwined with the history of the "browser wars" of the late

1990s between Netscape Navigator and Microsoft Internet Explorer, as well as with that of

JavaScript, the first scripting languages to be widely implemented in the layout engines of web

browsers. The DOM model can be seen below for an HTML document.

Fig 2.3 DOM in HTML document.

Page 11 of 23


12/23

Chapter-3

Creating Web Pages

For creating Web Pages one need to know about some tools and technologies to be used and theyare :-

Markup Languages

o HTML, DHTML, XML, etc....

Cascading Style Sheets (CSS)

Scripting languages

o javascript, php, etc....

Web creation and editing software

o Notepad, FrontPage, WebPage Maker, Flash, Dreamweaver, Adobe Photoshop, etc..

Fig 3. Web Page Creation.

As shown in the above figure the HTML, CSS, and javascripts form the basis of a web Page. So,

here we try to understand briefly about these technologies.

Page 12 of 23


13/23

3.1 HTML

HTML is a markup language which means it consists of markup tags which the browser

understands. HTML is Hyper Text Markup Language and is derived from SGML which is

Standard Generalized Markup Language. It is case Insensitive and it does not need any compiler.

It is directly understood by the browser and it displays the requested information by the user.

HTML documents are composed entirely of HTML elements that, in their most general form

have three components: a pair of tags, a "start tag" and "end tag"; some attributes within the start

tag; and finally, any textual and graphical content between the start and end tags, perhaps

including other nested elements. The HTML element is everything between and including the

start and end tags. Each tag is enclosed in angle brackets.


The structure of HTML can be understood by the following code which is also the syntax for

making HTML.

The title of your html page

An HTML 4 document is composed of three parts:

1. a line containing HTML version information,

2. a declarative header section (delimited by the HEAD element),3. a body, which contains the document's actual content.

HTML version information

A valid HTML document declares what version of HTML is used in the document. Thedocument type declaration names the document type definition (DTD) in use for the document.

Page 13 of 23


14/23

The document head

The HEAD element contains information about the current document, such as its title, keywordsthat may be useful to search engines, and other data that is not considered document content.

User agents do not generally render elements that appear in the HEAD as content. They may,

however, make information in the HEAD available to users through other mechanisms. Head

element also contains information about the external style sheets and javascripts used in thedocument.

The document body

The body of a document contains the document's content. The content may be presented by a

user agent in a variety of ways. For example, for visual browsers, you can think of the body as a

canvas where the content appears: text, images, colors, graphics, etc. For audio user agents, thesame content may be spoken. Since style sheets are now the preferred way to specify a

document's presentation, the presentational attributes of BODY have been deprecated.

HTML TagsHTML consists of Tags which define the type and property for thedocument text to be used.

Some common HTML Tags are :-

Anchor element to set Hyper links.

Content is shown as bold type

Title of document.

The body part of the HTML document.

Force line break within paragraph.

Content is centered on page (can include paragraphs etc).

A dummy element which contains block-level elements. It is used with style

sheets.

Emphasis: text usually displayed in italics

Used to define characteristics of font, according to attributes e.g. SIZE,

COLOR, FACE. SIZE sets size, 1-7 e.g. SIZE="5". COLOR sets colour of text e.g. makes text red. FACE e.g. FACE="Times".

The head part of the HTML document.

... Headings (levels 1-6, i.e. H3 is a subheading within a

H2 subheading).

Italics.

Image. Attributes: must have SRC and ALT. SRC gives source file for image, e.g.

SRC="picture.jpg". ALT gives brief description e.g. ALT="Picture of UB"

Page 14 of 23


15/23

List item. Used within an ordered () or unordered () list

Ordered list. Includes List Items, which will be numbered automatically
Paragraph
A dummy element which contains in-line content. It is used with style

sheets.

Text is emphasised strongly - usually appears in bold.

Subscript

Superscript

Table.

Table data cell.

Table header cell.

CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation

semantics (the look and formatting) of a document written in a markup language. Its most

common application is to style web pages written in HTML and XHTML, but the language can

also be applied to any kind of XML document, including plain XML.CSS is designed primarily

to enable the separation of document content (written in HTML or a similar markup language)

from document presentation, including elements such as the layout, colors, and fonts. Thisseparation can improve content accessibility, provide more flexibility and control in the

specification of presentation characteristics, enable multiple pages to share formatting, and

reduce complexity and repetition in the structural content (such as by allowing for table less web

design). CSS can also allow the same markup page to be presented in different styles for

different rendering methods, such as on-screen, in print, by voice (when read out by a speech-

based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow

the web page to display differently depending on the screen size or device on which it is being

viewed. While the author of a document typically links that document to a CSS style sheet,

readers can use a different style sheet, perhaps one on their own computer, to override the one

the author has specified.

Structure and syntax

CSS has a simple syntax and uses a number of English keywords to specify the names of various

style properties. A style sheet consists of a list of rules. Each rule or rule-set consists of one or

more selectors, and a declaration block. A declaration-block consists of a list ofdeclarations in

Page 15 of 23


16/23

braces. Each declaration itself consists of a property, a colon (:), and a value. If there are

multiple declarations in a block, a semi-colon (;) must be inserted to separate each declaration.

Style sheet syntax is made up of three parts and can be shown as below:

selector {property: value}

selector = element.class

Example:

#label:hover {

border-color:blue;

}

Here Label is the selector which is a id named label having property of border color to be blue.

CSS Usage and Properties

In CSS, selectors are used to declare which part of the markup a style applies to, a kind of match

expression. Selectors may apply to all elements of a specific type, to elements specified by

attribute, or to elements depending on how they are placed relative to, or nested within, others in

the document tree. Selector can be specified by:

Id (#) :- Id is the uniquely defined named of the elements in the HTML. Example

Class (.):- Class is the group of element that shares the same name and theirproperties can be set at once. Example

Html tags itself:- By writing the Html tag itself and specifying the properties and

assigning their values against them. Exapmle H1 color:blue

CSS can be implemented with the HTML content in three ways:-

Inline:- When the properties and its values are define in the HTML document

itself.

Internal:- When the Style properties are defined in the header using the style tags

External:- These are separate files with .css extension which have the stylingcodes that can be linked in the HTML document. The linking path is defined in

the header of the HTML document and the syntax for linking the CSS file is

Page 16 of 23


17/23

Javascripts

JavaScript is a scripting language that resides inside HTML documents, and can provide levels

of interactivity to web pages that are not achievable with simple HTML. Using JavaScript, sites

can send HTTP requests behind the scenes and customize or update certain sections of the site,

tailored to a particular users needs.

JavaScript was formalized in the ECMA script language standard and is primarily used in the

form of client-side JavaScript, implemented as part of a Web browser in order to create enhanced

user interfaces and dynamic websites. This enables programmatic access to computational

objects within a host environment.


Javascript is a scripting language not a programming language. Although it follows all the basic

rules and syntax like that of an programming language. JavaScript like many languages (eg C,

Java, awk, perl) is based on a common syntax and structure developed by the Bell Labs in the

60's. This makes it easy to cross over from one language to another based on program

requirements, resources and policies. This basic rules for JavaScript are:

JavaScript is case sensitive.

Whitespace, tabs, and newline characters are ignored except when part of string constants. They can be added as needed for readability.

Single line comments begin with //Multiline comments begin with /* and end with */

Statements terminate in semicolons! Make sure to always terminate statements with a

semicolon.Commas are used to separate words in a listRound brackets are used for operator precedence and argument lists.

Square brackets are used for arrays and square bracket notation.

Curly or brace brackets are used for blocks. Keywords are reserved words that have special meanings within the language syntax.

Identifiers are names for constants, variables, functions, loop labels, objects and classes. Thefirst character must be an ASCII letter, underscore or dollar sign. Following characters can also

include digits. JavaScript style begin class identifiers with a capital letter, uppercase constant ids

and lowercase variables.

Page 17 of 23


18/23

1.3.2 Difference between Javascripts and Java

One of the most common misconception about javascript is that it is derived or is related to java

programming language but in actual scenario both have different meaning. Here are the common

difference between the Java and Javascripts:

Java

Java is an object oriented programming language. In early 1990s, Sun Microsystems developed

the Java language. Initially, it was designed to make small programs for the web browser calledapplets. But later on, Java was used to create applications based on e-commerce.

There are five main features of Java language:

Provides more flexibility to develop software applications because of object oriented approach.

Easy to use as it combines the best properties of other programming languages.

Allows code written in Java to run on different platforms or Java code is independent ofplatform.

The code from the remote source can be executed securely.

Built-in support for computer networks.

Java also supports automated memory management model that allows developers to get rid of thetime consuming method called manual memory management. Programmers can easily do this byimplementing automatic garbage collection. But according to some people, Java is slow as well

as consumes more memory than other programming languages such as C++.

JavaScript

JavaScript is also a programming language which is used to make web pages more dynamic as

well as interactive. Constant downloads from the server are not required in case of JavaScript asit runs on the users computer. JavaScript is different from the Java programming language.

Most modern day web browsers have built-in JavaScript. However, JavaScript based web pagescan run only if JavaScript is enabled on the web browser and the browser supports it. JavaScript

is enabled in most browsers by default.

No special program is required in order to write code in JavaScript as it is an interpreted

language. You can use any text editor such as Notepad in order to write JavaScript code. You

can also use other text editor that colorizes the different codes making it easier to detect any

error.

Page 18 of 23


19/23

JavaScript is different from HTML because JavaScript is used to create more dynamic web pages

while HTML is a markup language that is used to create static content on the web page.

You can insert the JavaScript code in a HTML file by using the tag. But if you want touse the script in different pages of the website then you can save the scripts in different files with

.js extension.

So, we can differentiate between them as follows:-

Java is an object oriented programming language whereas JavaScript is more of a scriptinglanguage.

JavaScript is used to make the web pages more interactive. However, Java can be used not only

to make interactive web pages but can also be used to create server side applications and

standalone programming.

Java uses the concept of classes and objects that makes reuse of the code easier but there is nosuch thing in JavaScript.

Java exhibits the properties like inheritance, data encapsulation and polymorphism whereas

JavaScript does not.

Page 19 of 23


20/23

Chapter-4

ADVANTAGES AND DISADVANTAGES

4.1 ADVANTAGES

The general benefits of Web-page designing when compared to traditional instructor-led training

include all those shared by other types of technology-based training. These benefits are that thedesigning is usually self-paced, highly interactive, results in increased retention rates, and has

reduced costs associated with student travel to an instructor-led workshop. When compared to

CD-ROM training, the benefits of Web-based training stem from the fact that access to thecontent is easy and requires no distribution of physical materials. This means that Web-based

training yields additional benefits, among them:

o Access is available anytime, anywhere, around the globe. Students always have access to a

potentially huge library of training and information whether they are working from home, in theoffice, or from a hotel room. As cellular modems become more popular, students will even be

able to access training in a place that doesn't have a traditional phone line or network connection.

o Per-student equipment costs are affordable. Almost any computer today equipped with a

modem and free browser software can access the Internet or a private Intranet. The cost of setupis relatively low.

o Student tracking is made easy. Because students complete their training while they areconnected to the network, it is easy to implement powerful student-tracking systems. Unlike with

CD-ROMs that require students to print reports or save scores to disk, WBT enables the data to

be automatically tracked on the server-computer. This information can be as simple as who has

accessed the courseware and what are their assessment scores, to detailed information includinghow they answered individual test questions and how much time they spent in each module.

o Possible "learning object" architecture supports on demand, personalized learning. With CD-

ROM training, students have access only to the information that can be held by one CD-ROM.

The instructional design for this type of delivery, therefore, has been to create entire modules anddistinct lessons. But with WBT, there is virtually no storage limitation and content can be held

on one or more servers. The best WBT is designed so that content is "chunked" into discrete

knowledge objects to provide greater flexibility. Students can access these objects through pre-defined learning paths, use skill assessments to generate personal study plans, or employ search

engines to find exact topics.

o Content is easily updated. This is perhaps the single biggest benefit to WBT. In today's fast-paced business environment, training programs frequently change. With CD-ROM and other

forms of training, the media must be reduplicated and distributed again to all the students. With

WBT it is a simple matter of copying the updated files from a local developer's computer onto

the server-computer. The next time students connect to the Web page for training, they willautomatically have the latest version.

4.2 DISADVANTAGES

There are only two real disadvantages to WBT, and both will be overcome in the next five to ten

years as high bandwidth network connections become as common as telephones. The first

drawback, when compared to live instruction, is the lack of human contact, which greatly

Page 20 of 23


21/23

impacts learning. WBT is better than CD-ROM learning in this regard. Students can use their

Web connection to e-mail other students, post comments on message boards, or use chat rooms

and videoconference links to communicate live. While this type of interaction is helpful, and animprovement over CD-ROM learning, it still doesn't have the impact of a live workshop. With

higher speed connections and improved conferencing software, one day students around the

world will be able to communicate in real time with each other through full-screen video.The second major drawback is the lack of multimedia in many WBT programs. The use of audio

and video are critical to creating compelling metaphors, realistic job simulations, and

accommodating different learning styles. Full multimedia delivered over corporate Intranets ispossible, and many companies are doing it (see Case Studies in this book for examples). But in

most cases, even if students have a high-bandwidth Intranet connection, corporate information

technology departments don't want large media files

Page 21 of 23


22/23

Chapter-5

CONCLUSIONS & FUTURE SCOPE

By the research on Web Designing technologies and techniques we get to learn about creating

web pages. With developing web pages we also got to know about some basics of HTML, CSS,

and Javascripts for developing web pages.

As the web moves towards an open, content centered existence, the future of its design is

unknown. For a long time, typical web design was based on print design practices but the

web is not and has never been a static medium. In 2011, HTML5 became the most talked

about programmers language and CSS3 became the latest standard for CSS that gave the

designers more grip for Web designing. In the coming future the more interactive way of

Web designing will be taking over known as Responsive Web Design. Responsive Web

Designing is adopting new techniques so that the same web page used for computers can

be used for other devices like mobiles and PDAs.

Page 22 of 23


23/23

REFERENCES

1. Internet: http://www.w3schools.com/

2. Internet: http://en.wikipedia.org/wiki/Main_Page
http://www.w3schools.com/http://en.wikipedia.org/wiki/Main_Pagehttp://www.w3schools.com/http://en.wikipedia.org/wiki/Main_Page

seminar report on web desinging

Documents