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: Mr. Mohammad Faisal Asst. Professor

Submitted by: Shubham Hada Final year (CSE) Enroll no. 9E1LDCSM30P112

DEPARTMENT OF COMPUTER SCIENCE & ENGG.

LAXMI DEVI INSTITUTE OF ENGG. & TECHNOLOGY, ALWAR

RAJASTHAN TECHNICAL UNIVERSITY
2012-2013

Page 1 of 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 of Bachelor 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: Place: LIET, Alwar

Name & Signature of student _________________________

Page 2 of 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 our guidance and supervision. This work has not been submitted elsewhere for the award of any other degree. is a record of students work carried out by him/her under

Date: Place: liet, Alwar

Year: 2012-2013

Page 3 of 23

Signature of supervisor/guide Seminar Coordinator (Mr. Shriram Sharma) (Mr.Mohd. Faisal) Assist. Prof. CSE Prof. CSE Signature of HOD (Mr. Jarnail Singh) HOD CSE/IT

Signature of

Assist.

ACKNOWLEDGEMENT

I hereby, thankfully anticipate all those who have been a great support to me for accomplishing my walk and also expect to receive the same help and an extended hand from them in the future also. I gratefully thank all our teachers especially MR. Shriram Sharma who has helped us immensely in gathering the material and efficient details of our report. Without their support it would have been difficult for me to achieve success.

Page 4 of 23

DATE: PLACE: LIET, ALWAR

Shubham Hada FINAL YEAR, CSE

Page 5 of 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

CONTENTS
CHAPTER 1
1.

History and Development

1.1 1.2 1.3 WHAT IS WORLD WIDE WEB? EVOLUTION OF WWW ABOUT W3C

CHAPTER 2
2.

Introduction 2.1 What is Web Designing 2.2 Basic Principles 2.3 Document Object Model

CHAPTER 3 3.

Creating Web Pages 3.1 HTML 3.1.1 Structure and syntax 3.1.2 HTML Tags

3.2 CSS 3.2.1 Structure and syntax

3.2.2

CSS Usage and Properties

3.3 Javascripts 3.3.1 Structure and syntax 3.3.2 Difference between Javascripts and Java CHAPTER 4 ADVANTAGES AND DISADVANTAGES

CHAPTER 5 REFERENCES

CONCLUSIONS & FUTURE SCOPE

Page 7 of 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-based global 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 WWW
o 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 the Internet. 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 on the 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 very large collection. o Because of the ability of web to work with multimedia and modern programming languages, it is 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 interoperability between sites called World Wide Web Consortium (W3C).

Page 8 of 23

1.3ABOUT W3C
o 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 on almost 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

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 and if 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 quickly o 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

2.3 Document Object Model

The 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

Chapter-3

Creating Web Pages

For creating Web Pages one need to know about some tools and technologies to be used and they are : 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

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. 3.1.1 Structure and syntax

The structure of HTML can be understood by the following code which is also the syntax for making HTML. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> The title of your html page </title> </head> <body> <! - - your web page content and markup - -> </body> </html> 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. The document type declaration names the document type definition (DTD) in use for the document.

Page 13 of 23

The document head 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 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 the document. 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, the same 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 Tags HTML consists of Tags which define the type and property for thedocument text to be used. Some common HTML Tags are :<A> </A> Anchor element to set Hyper links. <B> </B> Content is shown as bold type <TITLE> </TITLE> Title of document. <BODY> </BODY> The body part of the HTML document. <BR> Force line break within paragraph. <CENTER> </CENTER> Content is centered on page (can include paragraphs etc). <DIV> </DIV> A dummy element which contains block-level elements. It is used with style sheets. <EM> </EM> Emphasis: text usually displayed in italics <FONT> </FONT> 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. <FONT COLOR="#FF0000"> makes text red. FACE e.g. FACE="Times". <HEAD> </HEAD> The head part of the HTML document. <H1> </H1> <H2> </H2>...<H6> </H6> Headings (levels 1-6, i.e. H3 is a subheading within a H2 subheading). <I> </I> Italics. <IMG> 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

<LI> </LI> List item. Used within an ordered (<OL>) or unordered (<UL>) list <OL> </OL> Ordered list. Includes <LI> List Items, which will be numbered automatically <P> </P> Paragraph <SPAN> </SPAN> A dummy element which contains in-line content. It is used with style sheets. <STRONG> </STRONG> Text is emphasised strongly - usually appears in bold. <SUB> </SUB> Subscript <SUP> </SUP> Superscript <TABLE> </TABLE> Table. <TD> </TD> Table data cell. <TH> </TH> 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. This separation 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 speechbased 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 of declarations in Page 15 of 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 <div id=wrapper></div> Class (.):- Class is the group of element that shares the same name and their properties can be set at once. Example <div class=main></div> 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 styling codes 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 <link href="path/to/file.css" rel="stylesheet">

Page 16 of 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. 3.3.1 Structure and syntax 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 list Round 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. The first 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

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 called applets. 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 of platform. 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 the time consuming method called manual memory management. Programmers can easily do this by implementing 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 as it 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 pages can 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

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 <script> tag. But if you want to use 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 scripting language. 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 no such thing in JavaScript. Java exhibits the properties like inheritance, data encapsulation and polymorphism whereas JavaScript does not.

Page 19 of 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 the designing 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 the content 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 the office, 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 setup is relatively low. o Student tracking is made easy. Because students complete their training while they are connected 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 including how 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 CDROM 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 and distinct 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 predefined 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 fastpaced 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 will automatically 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

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 an improvement 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 is possible, 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

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

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

Page 23 of 23