WD Notes Unit-I (1)
WD Notes Unit-I (1)
UNIT I
INTRODUCTION
WORLD WIDE WEB:
The World Wide Web is a system of interlinked hypertext documents accessed via the Internet.
Web is a huge collection of pages of information linked to each other around the globe.
2. Planning
In this phase, the information gathered in phase I is put together to develop a site map. A
site map is a list of main topics of the website and sub topics (if any). It helps you to
develop the rest of the system easily. The site map is essential to develop a consistent and
easy to understand navigation system.
3. Design
In this phase, we determine the look of the website. Target audience and type of the
website are major factors to decide the look and feel. eg a site meant for young people
like Facebook, should have a different look and feel from a site meant for banking
application like SBI.
4. Development
In this phase, the website is actually created with the help of relevant technologies. Web
designers may use prototypes before developing the actual content. Typically, the
development starts from the home page followed by a ‗skeleton‘ for interior pages. The
skeleton serves as the template for the entire website. Once the skeleton is developed,
developers can develop other pages.
6. Maintenance
Website development is a continuous process. You can provide newer and newer content,
update information or use different look and feel from time to time to attract your visitors.
DOMAIN
The domain is a unique name on the Internet. We might say that what in real life the ID is for a
human, this is what the domain name is for a web page.
Web Designing_KCS052
URL (Uniform Resource Locator) is another term for a web address. A URL has three parts:
protocol name (e.g., HTTP)
Domain name/ hostname (servers address that a user wants to connect with), For Ex.
www.google.com
File name is optional, implies the access to a file/directory into the principal webpage.
It is separated by slash
Therefore, when we enter http://www.google.com in the address bar in our web browser, the
browser is instructed to connect to a server with the domain www.google.com by using the HTTP
protocol.
HOSTING
Web hosting: after we create a website, it is necessary to store it in a place where it is always
available for users. We use Web hosting services/companies for this purpose. They own web
servers that have the ability to store content.
Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a
website, to make it look good on all devices (desktops, tablets, and phones).
WEBSITE
Website is the collection of web pages, different multimedia content such as text, images, and
videos which can be accessed by the URL which you can see in the address bar of the browser.
Types of Website:
Static Website
Dynamic Website
Static Website:
A static website contains Web pages with fixed content. Each page is coded in HTML,
CSS or JavaScript and displays the same information to every visitor.
In Static Websites, Web pages are returned by the server which prebuilt source code
files are built using simple languages such as HTML, CSS or JavaScript.
There is no processing of content on the server (according to the user) in Static
Websites.
Web pages are returned by the server with no change therefore, static Websites are fast.
There is no interaction with databases. Also, they are less costly as the host does not need
to support server-side processing with different languages.
Advantages
1. Flexibility is the main advantage of a static site - every page can be different if desired, to
match the layout to different content, and the designer is free to put in any special effects
that a client may ask for in a unique way on different pages
Web Designing_KCS052
Disadvantages
1. The main problem with any static site appears when you wish to update the content.
Unless you are conversant with HTML and the design methods used in the site then you
have to go back to the designer to have any content changes made. This may be perfectly
ok when a new page is required which needs design input, but if all you want to do is
change some text then it can be a nuisance for both client and designer.
2. The second main problem is scalability. If you wish to sell products on your site and you
have a lot of them then you may have to construct individual pages for each one, which
can take considerable time, effort and cost.
3. Costs - there are ongoing costs for updating the content.
Note: Static does not mean that it will not respond to user actions, These Websites are called
static because these cannot be manipulated on the server or interaction with databases (which is
the case in Dynamic Websites).
Dynamic Website:
A dynamic website or dynamic web page contains information that changes,
depending on the viewer, the time of the day, the time zone, the viewer's native
language, and other factors.
In Dynamic Websites, Web pages are returned by the server which are processed
during runtime means they are not prebuilt web pages but they are built during
runtime according to the user’s demand with the help of server-side scripting
languages such as PHP, Node.js, ASP.NET and many more supported by the server. So,
they are slower than static websites but updates and interaction with databases are
possible.
Dynamic Websites are used over Static Websites as updates can be done very easily as
compared to static websites (Where altering in every page is required) but in Dynamic
Websites, it is possible to do a common change once and it will reflect in all the web
pages.
Web Designing_KCS052
Advantages
1. The main advantages of dynamic sites are that by connecting them to databases you can
easily pull in information in an organized and structured way to create product pages or
categories of related products sorted in a variety of different ways depending on how the
user wants to view them.
2. This ability to connect to a database means that you can also create a content management
system - an interface which allows the client to input and manage data via a web-based
series of administration pages. That content can be text for their pages and images to go
along with the text, or items in their product range with categories, specifications, short
and long descriptions, images, etc. In both these cases it can be as simple or as complex as
the client requires.
3. There are little or no ongoing costs unless there is a change in the basic design or an extra
capability added.
Disadvantages
1. The design of a dynamic site is more fixed than a static one because many of the pages
are essentially a template into which data and content is poured to create multiple pages
of a similar type. So for instance all your product pages will be essentially the same
page layout with different data being displayed. While some customization capability
can be built in it is usually quite limited, such a selecting from a set of pre-defined
options. Individual layout changes to particular pages are not usually possible.
2. Costs are higher initially than for a static site, and additional functionality may also cost
more, particularly if it's something that wasn't envisaged originally and requires re-
writing of the core code or database.
Web Designing_KCS052
Content of web pages cannot be change at Content of Web pages can be changed.
runtime
No interaction with database possible. Interaction with database is possible
HTML, CSS, JavaScript is used for Developing Server side languages such as PHP, Node.js are
the website used.
Same content is delivered every time the page is Content may change every time the page is
loaded loaded.
WHAT IS HTML?
HTML is a computer language devised to allow website creation.
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for Web pages
HTML elements are the building blocks of HTML pages
HTML elements are represented by <> tags
Hypertext is the method by which you move around on the web — by clicking on special text
called hyperlinks which bring you to the next page. The fact that it is hyper just means it is
not linear i.e. you can go to any place on the Internet whenever you want by clicking on links —
there is no set order to do things in.
Markup is what HTML tags do to the text inside them. They mark it as a certain type of text
(italicized text, for example). HTML is a Language, as it has code-words and syntax like any
other language.
Note that HTML is not a programming language. While we often refer to HTML markup as
HTML code, programming languages require the processing of logical statements and
math. HTML allows the developer to make text documents look engaging and pleasant.
Web Designing_KCS052
HTML DOCUMENTS
It's a text document saved with the extension .html that contains texts and some tags
written between "< >" which give the instructions needed to configure the web page.
It is a file containing hypertext markup language. HTML code is based on tags, or hidden
keywords, which provide instructions for formatting the document.
A tag starts with an angle bracket and the 'less than' sign: '<'. The tag ends with an angle
bracket and the 'greater than' sign '>'. Tags tell the processing program, often the web
browser, what to do with the text. For example, to make the word 'Hello' bold, you would
use the opening bold tag <b> and then the closing bold tag </b>, like this:
e.g.
<b>Hello</b>
Every HTML document includes two parts:
one part that is visible to/in the browser and can't be changed directly and that shows
the entire content of the page.
another part that contains the source code of the page with which we can modify the
HTML document.
In a web page, the first tag (specifically, <html>) indicates the markup language that is being
used for the document. The <head> tag contains information about the web page. Lastly, the
content appears in the <body> tag. The following illustration provides a summary.
<!DOCTYPE html>
<html>
<head>
Web Designing_KCS052
<p>Hello World!<p>
</body>
</html>
Explanation of code
The first line <!DOCTYPE html> is the document type declaration. It instructs the web
browser that this document is an HTML5 document. It is case-insensitive.
The <head> element is a container for the tags that provides information about the
document, for example, <title> tag defines the title of the document.
The <body> element contains the document's actual content (paragraphs, links, images,
tables, and so on) that is rendered in the web browser and displayed to the user.
Markup Tags
A ―markup tag‖ is the fundamental characteristic of HTML. Every markup tag is a command
placed between ― angle brackets‖—a left bracket (<) and a right bracket (>). Markup tags are not
revealed by a web browser; they are invisible.
In most cases, markup tags (containing commands) come in pairs, with text or a graphic image
located between the beginning and ending tags:
<COMMAND>text or graphic image</COMMAND>: controls or regulates the text or
graphic image information between the two non-empty markup tags.
Web Designing_KCS052
`Pairs of markup tags are referred to as ―non-empty‖ tags, because something is contained
between the beginning tag and the ending tag. A beginning tag and an ending tag are identical,
except a ―slash‖ (/) is placed before the command of the ending tag to tell the browser that the
command has been completed.
So a typical pair of non-empty HTML tags in a source code, with the first tag containing a
command along with a few parameters, would resemble this:
HTML HEADINGS
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Web Designing_KCS052
Each HTML heading has a default size. However, you can specify the size for any heading with
the style attribute, using the CSS font-size property:
HTML PARAGRAPH
The <p> tag in HTML defines a paragraph. These have both opening and closing tag. So
anything mentioned within <p> and </p> is treated as a paragraph. Most browsers read a line as
a paragraph even if we don‘t use the closing tag i.e, </p>, but this may raise unexpected results.
So, it is both a good convention and we must use the closing tag.
e.g
<p>A paragraph</p>
Following are some unusual situations associated with the use of paragraph tag.
<p>
A paragraph contains a lot of lines in the source code, but the browser ignores it.
</p>
It will display the paragraph in continuation without any line break in the browser
because browser ignores the line breaks which we give intentionally.
<p>A paragraph contains a lot of spaces in the source
code, but the browser ignores it.</p>
Above paragraph will be displayed in continuation because browser ignores more than
one letter space.
The number of lines in a paragraph depends on the size of the browser window. If you resize the
browser window, the number of lines in this paragraph will change automatically.
Web Designing_KCS052
The <br> element is used to insert a line break or carriage-return within a parent element such as
a paragraph without breaking out of the parent container.
The HTML <br> element produces a line break in text (carriage-return). It is useful for writing a
Audience information A store of knowledge about the target audience for the web as well as the
actual audience who uses the information. This information includes the audience's background,
interests, proclivities, and all detail helpful to shaping the information to suit the users' needs. All
this information might not be complete at any time during the web-development process; a store
of information develops over time. The audience information might be very useful and accurate
at one time; it then might pass out of currency as different users start accessing the web.
Purpose statement An articulation of the reason for and scope of the web's existence. At all
times during development, a developer should have a succinct purpose statement for the web.
This statement might be in general terms, such as "To create a presence for our company in
cyberspace," or it might be very specific, such as "To provide information about our company's
new line of modems".
Objective statement Flows from the purpose statement and defines what specific goals the web
should accomplish. An objective statement based on the purpose used in the preceding
Web Designing_KCS052
paragraph, "To provide information about our company's new line of modems," might include a
statement of the modems the company offers and the kind of information that should be given
(pictures, prices, schematics, and so on). Like the audience information and purpose statements,
the objective statement is dynamic, and it might become necessary later in web development to
define still other statements. Therefore, the objective statement changes as the purpose of the
web changes, but also as the information about the audience changes. The audience looking at
the modems suddenly might become very concerned about display buttons on the devices
themselves, for example. In that case, an objective might be created to include pictures of
modems on the web itself.
Domain information A collection of knowledge and information about the subject domain that
the web covers, both in terms of information provided to users of the web and information that
the web developers need. A web offering modems for sale also might necessarily draw on a
variety of information about the use, mechanics, principles, and specifications for modems.
Although not all this information would necessarily be made available to the users of the web,
this domain knowledge might be essential for the web developers to have. Often, this domain
knowledge makes a good complement to the information the web already offers. A modem
manufacturer with a good collection of modem facts, for example, might find that interested
buyers visit that web for technical information about modems and, in the course of this visit, are
informed of a company's products.
Web specification A detailed description of the constraints and elements that will go into the
web. The specification statement lists what pieces of information will be presented as well as any
limitations on the presentation. One part of a specification might state that the picture of the
modem must be placed on the same hypertext page as a link to an order form, for example. The
specification, as with all the other elements of the web, might be in constant flux.
Web presentation The means by which the information is delivered to the user. The
presentation is the result of design and implementation processes that build on the web
specification. In these processes, creative choices are made among design and presentation
Web Designing_KCS052
techniques to achieve the web specification; considerations for efficiency, aesthetics, and known
web-usage patterns also are made.
This list of the elements involved in the web-development methodology shows that there are
many interactions and relationships among them. In fact, all the elements depend on the best
information being available about the other elements in order to be successful. A web developer,
for example, needs to know whether the objective is to sell modems or to educate people about
modems when designing a particular piece of a web. Similarly, the elements interact with the
processes of the methodology.
WEB STANDARDS
In the Past
Back in the ―old days,‖ the Internet was a lot like the Wild West. There were few standards for
coding, page design, and browser compatibility. Many different web browsers vied for market
dominance. And with the lack of standards, most websites did not work well with all browsers. If
you needed information from a web site that didn‘t work on your browser, you either had to buy
a different browser or get that information elsewhere.
Fortunately, along came the Word Wide Web Consortium (W3C) to bring some law and order to
the wild cyber-frontier. Created in 1994, W3C is an international community of member
organizations that articulates web standards so that websites look and work the same in all web
browsers. Its mission is to lead the World Wide Web to its full potential by developing standards,
protocols and guidelines that ensure its long-term growth.
Definition
W3C standards define an Open Web Platform for application development that has the
unprecedented potential to enable developers to build rich interactive experiences, powered by
vast data stores that are available on any device. Although the boundaries of the platform
continue to evolve, industry leaders speak nearly in unison about how HTML5 will be the
cornerstone for this platform.
Web Designing_KCS052
W3C standards for XML and CSS ensure that every website will function the same on
any browser. Using W3C-compliant XML and CSS coding also improves search engine
optimization by allowing search engine robots to ―crawl‖ through websites quicker and
more efficiently.
W3C standards also improve issues of accessibility, privacy, security, and
internationalization, while helping to balance speed, fairness, public accountability, and
quality on the Internet. W3C-compliant websites are cross-platform compatible.
In addition to working on any browser, they can also be accessed via mobile phones,
screen readers and text browsers, interactive televisions, and other devices. Websites that
use XML/CSS markup are cheaper to run because they use less bandwidth. And W3C‘s
royalty-free patent licensing commitments ensure that everyone has access to the
technology they need to build their websites with the desired functionality.
Standards
II Web of Devices
W3C is focusing on technologies to enable Web access anywhere, anytime, using any device.
This includes Web access from mobile phones and other mobile devices as well as use of
Web technology in consumer electronics, printers, interactive television, and even
automobiles.
IV Semantic Web
In addition to the classic ―Web of documents‖ W3C is helping to build a technology stack to
support a ―Web of data,‖ the sort of data you find in databases. The ultimate goal of the Web
of data is to enable computers to do more useful work and to develop systems that can
support trusted interactions over the network. The term ―Semantic Web‖ refers to W3C‘s
vision of the Web of linked data. Semantic Web technologies enable people to create data
stores on the Web, build vocabularies, and write rules for handling data. Linked data are
empowered by technologies such as RDF, SPARQL, OWL, and SKOS.
V XML Technology
XML Technologies including XML, XML Namespaces, XML Schema, XSLT, Efficient
XML Interchange (EXI), and other related standards.
VI Web of Services
Web of Services refers to message-based design frequently found on the Web and in
enterprise software. The Web of Services is based on technologies such as HTTP, XML,
SOAP, WSDL, SPARQL, and others.
W3C RECOMMENDATIONS
Guided by these design principles, W3C has published more than forty Recommendations since
its inception. Each Recommendation not only builds on the previous, but is designed so that it
may be integrated with future specifications.
Web Designing_KCS052
these technologies an XML file can be transformed into any other type of XML file, for
example into XHTML or SVG, for the purpose of presentation. XLink and XML Base,
both published in June 2001, define a general hyperlinking vocabulary to XML. A major
step forward was made with the publication of XML Schema structures and datatypes in
May 2001. XML Schemas provide functionalities above and beyond what is provided by
DTDs and are essential in defining complex XML applications.
DOM: The Document Object Model is an application programming interface for
providing access to document structure, style, events, and more. Because it does not rely
on a particular programming language, it facilitates the design of active Web pages and
provides a standard interface for other software to manipulate HTML and XML
documents. DOM Level 1 was published in October 1998 followed, in November 2000,
by DOM Level 2 and, in April 2004, by DOM Level 3. (both DOM Level 2 and 3 consist
of several documents; see the DOM Technical Reports page for more details and links.)
MathML 2.0: MathML 2.0, published in February 2001 (based on an earlier release
published in July 1999), is the fundamental tool for marking up mathematics on the Web
using XML.
PNG: Portable Network Graphics is an extensible file format for the lossless, portable,
well-compressed storage of raster images. Unencumbered by IPR issues, PNG has
become one of the most widely used raster image formats on the Web, implemented by
all major browsers. PNG was published in 1996.
SVG 1.0: Scalable Vector Graphics (SVG) 1.0, was published in September 2001. SVG
is a major breakthrough in bringing vector graphics to the Web. Based on XML, editable
by any text editor and manageable by search engines, SVG provides a rich graphics
content and animation facilities, offering a strong alternative to the usage of bitmaps
images. Later versions of SVG (SVG 1.1, SVG Basic and Tiny) provide a vector graphics
format for smaller devices, like PDAs or phones.
SMIL 2.0: SMIL 2.0 allows authors to create synchronized multimedia presentations on
the Web. SMIL 2.0 will also play a vital role in the new generation of internet-aware
phones. It was published in August 2001 (and is based on an earlier version, completed in
June 1998).
Web Designing_KCS052
The Semantic Web provides a common framework that allows data to be shared and
reused across application, enterprise, and community boundaries. It is a collaborative
effort led by W3C with participation from a large number of researchers and industrial
partners. It is based on the Resource Description Framework (RDF), which integrates a
variety of applications using XML for syntax and URIs for naming, and the Web
Ontology Language (OWL), which gives the basis to build Ontologies using RDF. An
early version of RDF was published in 1999; the new version, as well as OWL, was
published February 2004. (Both RDF and OWL consist of several documents; see the
RDF and OWL pages for more details and links.)
XML-Signature and XML Encryption: published in February and December 2002,
respectively, are important steps towards the Web of Trust. They define an XML-based
framework to add digital signatures to, and to encrypt resources on the Web.
P3P 1.0: the Platform for Privacy Preferences (P3P) 1.0, published in April 2002,
provides a standard, simple, automated way for users to gain more control over the use of
personal information on Web sites they visit.
Voice Framework: W3C is defining a suite of markup languages covering dialog,
speech synthesis, speech recognition, call control and other aspects of interactive voice
response applications. As part of this ongoing development,
W3C has already published, in March 2004, the Speech Recognition Grammar
Specification (SRGS), that can be used to define recognition grammars, and VoiceXML,
a dialog markup language that leverages the other specifications for creating voice based
dialogs.
Web Accessibility Guidelines: The Web Accessibility Initiative has published two
Recommendations so far to promote access to the Web for people with disabilities. The
principles of these guidelines also benefit all users and are very similar to guidelines for
mobile access. The Web Content Accessibility Guidelines 1.0, which explains how to
author accessible Web pages and sites, was published in May 1999. The Authoring Tool
Accessibility Guidelines 1.0, which explains how to build authoring tools that produce
accessible content and are accessible to users with disabilities, was published in February
2000.