UNIT-1 Introduction to Web Development Strategies

Introduction to Web Development Strategies The web quickly gained popularity in the early 1990s. In
1993, the first commercial
Web development is the process of creating a website. It web browser, called Mosaic, was released. In 1994, the
includes the planning, first search engine, called
design, development, and maintenance of websites. Web AltaVista, was launched.
developers use a variety of The web has continued to grow and evolve in the years
programming languages, tools, and technologies to create since its creation. Today, the
websites. web is a global network of billions of computers. It is used
There are many different strategies for web development. for a wide variety of
Some common strategies purposes, including communication, commerce, education,
include: and entertainment.
• Agile development: This is a method of software  Protocols Governing Web
development that The World Wide Web is governed by a set of protocols.
emphasizes iterative development and continuous delivery. These protocols define how
Agile computers communicate with each other on the web.
development is often used for web development because it The most important protocol for the web is the Hypertext
allows for Transfer Protocol (HTTP).
changes to be made to a website quickly and easily. HTTP is a set of rules that define how web browsers and
• Waterfall development: This is a more traditional web servers communicate.
method of software Other important protocols for the web include:
development that involves a linear progression from • The Hypertext Markup Language (HTML): HTML is a
planning to development markup language that is
to testing to deployment. Waterfall development is less used to create web pages.
flexible than agile • The Cascading Style Sheets (CSS): CSS is a style sheet
development, but it can be more efficient for large, language that is
complex projects. used to control the appearance of web pages.
• Hybrid development: This is a combination of agile and • The JavaScript: JavaScript is a programming language
waterfall development. that is used to add
Hybrid development can be a good choice for projects that interactivity to web pages.
require both These protocols work together to allow users to view,
flexibility and efficiency. create, and interact with web
The best web development strategy for a particular project pages.
will depend on the
Writing Web Projects
specific requirements of the project.
A web project is a collection of web pages that are related
to each other and share a
History of Web and Internet
common purpose. Web projects can be created for a variety
The World Wide Web (WWW) is a system of interlinked
of purposes, such as to
hypertext documents
provide information, sell products, or provide
accessed via the Internet. With a web browser, one can
entertainment.
view web pages that may
To write a web project, you will need to:
contain text, images, videos, and other multimedia and
1. Choose a web development framework. A web
navigate between them via
development framework is a
hyperlinks.
set of tools and libraries that make it easier to create web
The history of the web begins with the development of the
projects. There are
Internet, which began in
many different web development frameworks available,
the 1960s as a way for scientists to communicate with each
such as Ruby on
other. In 1989, Tim
Rails, Django, and Laravel.
Berners-Lee, a British computer scientist, proposed the
2. Design your web pages. Once you have chosen a web
creation of a global hypertext
development
system. He called this system the World Wide Web.
framework, you will need to design your web pages. This
Berners-Lee developed the first web browser, called
includes creating the
WorldWideWeb, in 1990. In
layout of your pages, the content of your pages, and the
1991, he released the first web server software, called
style of your pages.
HTTPd. These two pieces of
3. Develop your web pages. Once you have designed your
software made it possible for anyone to create and share
web pages, you will
web pages.
need to develop them. This involves writing the code for
your pages, including
the HTML, CSS, and JavaScript.

ER.VIPIN RAWAT ASSISTANT PROFESSOR DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

4. Deploy your web project. Once you have developed
your web pages, you will
need to deploy them. This involves uploading your pages
to a web server so
that they can be accessed by others.
Connecting to Internet
To connect to the internet, you will need to have a device
that is capable of
connecting to the internet, such as a computer, smartphone,
or tablet. You will also
need to have an internet service provider (ISP). An ISP is a
company that provides
access to the internet.
To connect to the internet, you will need to do the
following:
1. Find an ISP. There are many different ISPs available, so
you will need to find server computers are typically used for tasks such as
one that is right for you. You can compare ISPs by their storing data, processing data,
price, their features, and providing services to the client computers.
and their customer service. Client-server computing is a popular computing
2. Sign up for an internet service plan. Once you have architecture because it allows
found an ISP, you will businesses to share resources and data more efficiently. It
need to sign up for an internet service plan. This will also allows businesses to
involve providing the ISP scale their computing infrastructure more easily.
with your name, address, and payment information. Here are some of the benefits of client-server
3. Install your internet service. Once you have signed up computing:
for an internet service • Efficiency: Client-server computing can help businesses
plan, the ISP will send a technician to your home to install to share resources
your internet and data more efficiently. This can lead to cost savings and
service. improved
Introduction to Internet Services and Tools productivity.
• Scalability: Client-server computing can help businesses
The internet provides a wide variety of services and tools to scale their
that can be used for a computing infrastructure more easily. This can be
variety of purposes. Some of the most common internet important for businesses
services and tools include: that are growing or that need to be able to handle sudden
• Email: Email is a service that allows you to send and increases in
receive messages to demand.
other people. • Security: Client-server computing can help businesses to
• Web browsing: Web browsing is a service that allows you improve the security
to access websites. of their data. This is because the data is stored on a central
• Social media: Social media is a service that allows you to server, which can
connect with friends be more easily secured than individual client computers.
and family and share information with them. Here are some of the challenges of client-server
• Online shopping: Online shopping is a service that allows computing:
you to purchase • Complexity: Client-server computing can be more
goods and services from businesses that are located all complex to set up and
over the world. manage than other computing architectures.
• Streaming media: Streaming media is a service that • Cost: Client-server computing can be more expensive
allows you to watch than other computing
movies, listen to music, and watch TV shows online. architectures.
• Security: Client-server computing can be more
vulnerable to security threats
than other computing architectures.
Introduction to Client-Server Computing

Client-server computing is a type of computing

architecture in which client computers
request services from server computers. The client
computers are typically used for
tasks such as displaying information, entering data, and
controlling applications. The

ER.VIPIN RAWAT ASSISTANT PROFESSOR DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

WEB PAGE DESIGNING: HTML Attribute
HTML
 HTML stands for HyperText Markup Language. o HTML attributes are special words which provide
 HTML is used to create web pages and web additional information about the elements or
applications. attributes are the modifier of the HTML element.
 HTML is widely used language on the web. o Each element or tag can have attributes, which
 We can create a static website by HTML only. defines the behaviour of that element.
 Technically, HTML is a Markup language rather o Attributes should always be applied with start tag.
than a programming language. o The Attribute should always be applied with its
name and value pair.
HTML Example with HTML Editor o The Attributes name and values are case
<!DOCTYPE> sensitive, and it is recommended by W3C that it
<html> should be written in Lowercase only.
<head> o You can add multiple attributes in one HTML
<title>Web page title</title> element, but need to give space between two
</head> attributes.
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body> Syntax
</html> 1. <element attribute_name="value">content</element>
OUTPUT: Write Your First Heading

Write Your First Paragraph. Example

1. <!DOCTYPE html>
HTML Tags
HTML tags are like keywords which defines that how web 2. <html>
browser will format and display the content. With the help 3. <head>
of tags, a web browser can distinguish between an HTML 4. </head>
content and a simple content. HTML tags contain three 5. <body>
main parts: opening tag, content and closing tag. But some 6. <h1> This is Style attribute</h1>
HTML tags are unclosed tags. 7. <p style="height: 50px; color: blue">It will add style pro
perty in element</p>
When a web browser reads an HTML document, browser 8. <p style="color: red">It will change the color of content
reads it from top to bottom and left to right. HTML tags </p>
are used to create HTML documents and render their 9. </body>
properties. Each HTML tags have different properties. 10. </html>

An HTML file must have some essential tags so that web

browser can differentiate between a simple text and HTML This is Style attribute
text. You can use as many tags you want as per your code
requirement. It will add style property in element
All HTML tags must enclosed within < > these brackets.
Every tag in HTML perform different tasks. It will change the color of content
If you have used an open tag <tag>, then you must use a
close tag </tag> (except some tags)
Syntax
<tag> content </tag>
Note: HTML Tags are always written in lowercase letters.
The basic HTML tags are given below:
Unclosed HTML Tags
Some HTML tags are not closed, for example br and hr.
<br> Tag: br stands for break line, it breaks the line of the
code.
<hr> Tag: hr stands for Horizontal Rule. This tag is used to
put a line across the webpage.
HTML Meta Tags
DOCTYPE, title, link, meta and style

ER.VIPIN RAWAT ASSISTANT PROFESSOR DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

 HTML Lists HTML Description list is also a list style which is
HTML Lists are used to specify lists of information. All supported by HTML and XHTML. It is also known as
lists may contain one or more list elements. There are three definition list where entries are listed like a dictionary or
different types of HTML lists: encyclopedia.
The definition list is very appropriate when you want to
1. Ordered List or Numbered List (ol) present glossary, list of terms or other name-value list.
2. Unordered List or Bulleted List (ul) The HTML definition list contains following three tags:
3. Description List or Definition List (dl)
1. <dl> tag defines the start of the list.
HTML Ordered List or Numbered List 2. <dt> tag defines a term.
In the ordered HTML lists, all the list items are marked 3. <dd> tag defines the term definition
with numbers by default. It is known as numbered list also. (description).
The ordered list starts with <ol> tag and the list items start INPUT
with <li> tag. <dl>
1. <ol> <dt>Aries</dt>
2. <li>Aries</li> <dd>-One of the 12 horoscope sign.</dd>
<dt>Bingo</dt>
Tag Description <dd>-One of my evening snacks</dd>
<dt>Leo</dt>
<dd>-
<table> It defines a table. It is also an one of the 12 horoscope sign.</dd>
<dt>Oracle</dt>
<tr> It defines a row in a table. <dd>-
It is a multinational technology corporation.</dd>
It defines a header cell in
<th> </dl>
a table.
Output:
<td> It defines a cell in a table. Aries
-One of the 12 horoscope sign.
3. <li>Bingo</li> Bingo
4. <li>Leo</li> -One of my evening snacks
5. <li>Oracle</li> Leo
6. </ol> -It is also an one of the 12 horoscope sign.
Oracle
-It is a multinational technology corporation.
Output: HTML Table
HTML table tag is used to display data in tabular form
1. Aries (row * column). There can be many columns in a row.
2. Bingo We can create a table to display data in tabular form, using
3. Leo <table> element, with the help of <tr> , <td>, and <th>
4. Oracle elements.
In Each table, table row is defined by <tr> tag, table
header is defined by <th>, and table data is defined by
HTML Unordered List or Bulleted List
<td> tags.
In HTML Unordered list, all the list items are marked with
HTML tables are used to manage the layout of the page
bullets. It is also known as bulleted list also. The
e.g. header section, navigation bar, body content, footer
Unordered list starts with <ul> tag and list items start with
section etc. But it is recommended to use div tag over table
the <li> tag. to manage the layout of the page .
1. <ul>
2. <li>Aries</li>
3. <li>Bingo</li> HTML Table Tags
4. <li>Leo</li>
5. <li>Oracle</li> INPUT
6. </ul> <table>
Output: <tr><th>First_Name</th><th>Last_Name</th><th>Marks
</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
 Aries <tr><td>James</td><td>William</td><td>80</td></tr>
 Bingo <tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
 Leo <tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
 Oracle </table>

HTML Description List or Definition List

ER.VIPIN RAWAT ASSISTANT PROFESSOR DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

 23. <br>Enter your Address:<br>
24. <textarea></textarea><br>
25. <input type="submit" value="sign-up">
26. </fieldset>
27. </form>
28. </body>
29. </html>

HTML Image
HTML img tag is used to display image on the web page.
HTML img tag is an empty tag that contains attributes
only, closing tags are not used in HTML image element.

Let's see an example of HTML image.

<h2>HTML Image Example</h2>

<img src="good_morning.jpg" alt="Good Morning
Friends"/>

HTML Form
An HTML form is a section of a document which
contains controls such as text fields, password fields,
checkboxes, radio buttons, submit button, menus etc.
An HTML form facilitates the user to enter data that is to
be sent to the server for processing such as name, email
address, password, phone number, etc. .

HTML Form Syntax

1. <form action="server url" method="get|post">
2. //input controls e.g. textfield, textarea, radiobutton, button

3. </form>

HTML Form Example

Following is the example for a simple form of registration.
1. <!DOCTYPE html>
2. <html>
3. <head> Introduction to frames
4. <title>Form in HTML</title>
5. </head> HTML frames allow authors to present documents in
6. <body> multiple views, which may be independent windows or
7. <h2>Registration form</h2> subwindows. Multiple views offer designers a way to keep
8. <form> certain information visible, while other views are scrolled
9. <fieldset> or replaced. For example, within the same window, one
10. <legend>User personal information</legend> frame might display a static banner, a second a navigation
11. <label>Enter your full name</label><br> menu, and a third the main document that can be scrolled
12. <input type="text" name="name"><br> through or replaced by navigating in the second frame.
13. <label>Enter your email</label><br>
14. <input type="email" name="email"><br> Here is a simple frame document:
15. <label>Enter your password</label><br> <HTML>
16. <input type="password" name="pass"><br> <HEAD>
17. <label>confirm your password</label><br> <TITLE>A simple frameset document</TITLE>
18. <input type="password" name="pass"><br> </HEAD>
19. <br><label>Enter your gender</label><br> <FRAMESET cols="20%, 80%">
20. <input type="radio" id="gender" name="gender" val <FRAMESET rows="100, 200">
ue="male"/>Male <br> <FRAME src="contents_of_frame1.html">
21. <input type="radio" id="gender" name="gender" val <FRAME src="contents_of_frame2.gif">
ue="female"/>Female <br/> </FRAMESET>
22. <input type="radio" id="gender" name="gender" val <FRAME src="contents_of_frame3.html">
ue="others"/>others <br/> <NOFRAMES>

ER.VIPIN RAWAT ASSISTANT PROFESSOR DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

 <P>This frameset document contains: DTD
<UL>
<LI><A href="contents_of_frame1.html">Some A Document Type Definition (DTD) describes the tree
neat contents</A> structure of a document and something about its data. It is
<LI><IMG src="contents_of_frame2.gif" alt="A a set of markup affirmations that actually define a type of
neat image"> document for the SGML family, like GML, SGML,
<LI><A href="contents_of_frame3.html">Some HTML, XML.
other neat contents</A>
</UL> A DTD can be declared inside an XML document as inline
</NOFRAMES> or as an external recommendation. DTD determines how
</FRAMESET> many times a node should appear, and how their child
</HTML> nodes are ordered.

that might create a frame layout something like this: There are 2 data types, PCDATA and CDATA
---------------------------------------
| | | PCDATA is parsed character data.
| | | CDATA is character data, not usually parsed.
| Frame 1 | | yntax:
| | | <!DOCTYPE element DTD identifier
| | |
[
|---------| |
| | Frame 3 | first declaration
| | | second declaration
| | |
| | | .
| Frame 2 | | .
| | |
| | | nth declaration
| | | ]>
| | |
Example:
---------------------------------------

XML
XML stands for eXtensible Markup Language.

XML was designed to store and transport data.

XML was designed to be both human- and machine-

readable.
XML Example 1
<?xml version="1.0" encoding="UTF-8"?>
<note> DTD for the above tree is:
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading> XML Schema
<body>Don't forget me this weekend!</body>
</note>  An XML Schema describes the structure of an
Note XML document, just like a DTD.

To: Tove  An XML document with correct syntax is called

"Well Formed".
From: Jani
 An XML document validated against an XML
Schema is both "Well Formed" and "Valid".
Heading: Reminder
 XML Schema
Body: Don't forget me this weekend!  XML Schema is an XML-based alternative to
DTD:

ER.VIPIN RAWAT ASSISTANT PROFESSOR DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

<xs:element name="note"> The following illustration shows how memory is
structured when this XML data is read into the DOM
<xs:complexType> structure.
<xs:sequence>
<xs:element name="to" type="xs:string"/>
<xs:element name="from" type="xs:string"/>
<xs:element name="heading" type="xs:string"/>
<xs:element name="body" type="xs:string"/>
</xs:sequence>
</xs:complexType>

</xs:element>

The Schema above is interpreted like this:

 <xs:element name="note"> defines the element

called "note"
 <xs:complexType> the "note" element is a
complex type
 <xs:sequence> the complex type is a sequence of
elements
 <xs:element name="to" type="xs:string"> the XML document structure
element "to" is of type string (text)
 <xs:element name="from" type="xs:string"> the
element "from" is of type string
 <xs:element name="heading" type="xs:string">
the element "heading" is of type string Presenting XML XML documents are presented using
 <xs:element name="body" type="xs:string"> the Extensible Stylesheet which expresses stylesheets. XSL
element "body" is of type string stylesheet are not the same as HTML cascading
stylesheets. They create a style for a specific XML
XML Document Object Model (DOM) element, with XSL a template is created. XSL basically
transforms one data structure to another i.e., XML to
HTML. Example Here is the XSL file for the XML
The XML Document Object Model (DOM) class is an in-
document of Example This line must be included in the
memory representation of an XML document. The DOM
XML document which reference stylesheet
allows you to programmatically read, manipulate, and
modify an XML document. The XmlReader class also
reads XML; however, it provides non-cached, forward- SAX - Simple API for XML Parsing It was the first to
only, read-only access. This means that there are no come on the scene and interestingly it was developed in
capabilities to edit the values of an attribute or content of the XML-Dev maling list. Evidently the people who
an element, or the ability to insert and remove nodes with developed this were XML gurus and it is quite visible in
the XmlReader. Editing is the primary function of the the usage of this API. You got to have a fair understanding
DOM. It is the common and structured way that XML data of XML, but at least Java developers got something to
is represented in memory, although the actual XML data is combine the two worlds - Java and XML in a structured
stored in a linear fashion when in a file or coming in from way. It instantly became a hit for the obvious reasons.
another object. The following is XML data. Since this API does require to load the entire XML doc
and also because it offers only a sequential processing of
the doc hence it is quite fast. Another reason of it being
Input faster is that it does not allow modification of the
XMLCopy underlying XML data.

<?xml version="1.0"?> DOM - Document Object Model The Java binding for
<books> DOM provided a tree-based representation of the XML
<book> documents - allowing random access and modification of
<author>Carson</author> the underlying XML data. Not very difficult to deduce that
<price format="dollar">31.95</price> it would be slower as compared to SAX. The event-based
<pubdate>05/01/2001</pubdate> callback methodology was replaced by an object-oriented
</book> in-memory representation of the XML documents.
<pubinfo> Though, it differs from one implementation to another if
<publisher>MSPress</publisher> the entire document or a part of it would be kept in the
<state>WA</state> memory at a particular instant, but the Java developers are
</pubinfo>
</books>

ER.VIPIN RAWAT ASSISTANT PROFESSOR DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

kept out of all the hassle and they get the entire tree readily
available whenever they wish.

Differences between DOM and SAX SAX v/s DOM Main

differences between SAX and DOM, which are the two
most popular APIs for processing XML documents in
Java, are:- Read v/s Read/Write: SAX can be used only for
reading XML documents and not for the manipulation of
the underlying XML data whereas DOM can be used for
both read and write of the data in an XML document.
Sequential Access v/s Random Access: SAX can be used
only for a sequential processing of an XML document
whereas DOM can be used for a random processing of
XML docs. So what to do if you want a random access to
the underlying XML data while using SAX? You got to
store and manage that information so that you can retrieve
it when you need. Call back v/s Tree: SAX uses call back
mechanism and uses event-streams to read chunks of XML
data into the memory in a sequential manner whereas
DOM uses a tree representation of the underlying XML
document and facilitates random access/manipulation of
the underlying XML data. XML-Dev mailing list v/s
W3C: SAX was developed by the XML-Dev mailing list
whereas DOM was developed by W3C (World Wide Web
Consortium). Information Set: SAX doesn't retain all the
info of the underlying XML document such as comments
whereas DOM retains almost all the info. New versions of
SAX are trying to extend their coverage of information.

ER.VIPIN RAWAT ASSISTANT PROFESSOR DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING