UNIT-1 Introduction to Web Development Strategies

 

                                                 UNIT-1 Introduction to Web Development Strategies

 

 

Introduction to Web Development Strategies

 

Web development is the process of creating a website. It includes the planning,

design, development, and maintenance of websites. Web developers use a variety of

programming languages, tools, and technologies to create websites.

There are many different strategies for web development. Some common strategies

include:

• Agile development: This is a method of software development that

emphasizes iterative development and continuous delivery. Agile

development is often used for web development because it allows for

changes to be made to a website quickly and easily.

• Waterfall development: This is a more traditional method of software

development that involves a linear progression from planning to development

to testing to deployment. Waterfall development is less flexible than agile

development, but it can be more efficient for large, complex projects.

• Hybrid development: This is a combination of agile and waterfall development.

Hybrid development can be a good choice for projects that require both

flexibility and efficiency.

The best web development strategy for a particular project will depend on the

specific requirements of the project.

 

History of Web and Internet

The World Wide Web (WWW) is a system of interlinked hypertext documents

accessed via the Internet. With a web browser, one can view web pages that may

contain text, images, videos, and other multimedia and navigate between them via

hyperlinks.

The history of the web begins with the development of the Internet, which began in

the 1960s as a way for scientists to communicate with each other. In 1989, Tim

Berners-Lee, a British computer scientist, proposed the creation of a global hypertext

system. He called this system the World Wide Web.

Berners-Lee developed the first web browser, called WorldWideWeb, in 1990. In

1991, he released the first web server software, called HTTPd. These two pieces of

software made it possible for anyone to create and share web pages.

 

 

 

 

 

 

The web quickly gained popularity in the early 1990s. In 1993, the first commercial

web browser, called Mosaic, was released. In 1994, the first search engine, called

AltaVista, was launched.

The web has continued to grow and evolve in the years since its creation. Today, the

web is a global network of billions of computers. It is used for a wide variety of

purposes, including communication, commerce, education, and entertainment.

·       Protocols Governing Web

The World Wide Web is governed by a set of protocols. These protocols define how

computers communicate with each other on the web.

The most important protocol for the web is the Hypertext Transfer Protocol (HTTP).

HTTP is a set of rules that define how web browsers and web servers communicate.

Other important protocols for the web include:

• The Hypertext Markup Language (HTML): HTML is a markup language that is

used to create web pages.

• The Cascading Style Sheets (CSS): CSS is a style sheet language that is

used to control the appearance of web pages.

• The JavaScript: JavaScript is a programming language that is used to add

interactivity to web pages.

These protocols work together to allow users to view, create, and interact with web

pages.

Writing Web Projects

A web project is a collection of web pages that are related to each other and share a

common purpose. Web projects can be created for a variety of purposes, such as to

provide information, sell products, or provide entertainment.

To write a web project, you will need to:

1. Choose a web development framework. A web development framework is a

set of tools and libraries that make it easier to create web projects. There are

many different web development frameworks available, such as Ruby on

Rails, Django, and Laravel.

2. Design your web pages. Once you have chosen a web development

framework, you will need to design your web pages. This includes creating the

layout of your pages, the content of your pages, and the style of your pages.

3. Develop your web pages. Once you have designed your web pages, you will

need to develop them. This involves writing the code for your pages, including

the HTML, CSS, and JavaScript.

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

one that is right for you. You can compare ISPs by their price, their features,

and their customer service.

2. Sign up for an internet service plan. Once you have found an ISP, you will

need to sign up for an internet service plan. This will involve providing the ISP

with your name, address, and payment information.

3. Install your internet service. Once you have signed up for an internet service

plan, the ISP will send a technician to your home to install your internet

service.

Introduction to Internet Services and Tools

 

The internet provides a wide variety of services and tools that can be used for a

variety of purposes. Some of the most common internet services and tools include:

• Email: Email is a service that allows you to send and receive messages to

other people.

• Web browsing: Web browsing is a service that allows you to access websites.

• Social media: Social media is a service that allows you to connect with friends

and family and share information with them.

• Online shopping: Online shopping is a service that allows you to purchase

goods and services from businesses that are located all over the world.

• Streaming media: Streaming media is a service that allows you to watch

movies, listen to music, and watch TV shows online.

 

 

 

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

 

 

 

 

server computers are typically used for tasks such as storing data, processing data,

and providing services to the client computers.

Client-server computing is a popular computing architecture because it allows

businesses to share resources and data more efficiently. It also allows businesses to

scale their computing infrastructure more easily.

Here are some of the benefits of client-server computing:

• Efficiency: Client-server computing can help businesses to share resources

and data more efficiently. This can lead to cost savings and improved

productivity.

• Scalability: Client-server computing can help businesses to scale their

computing infrastructure more easily. This can be important for businesses

that are growing or that need to be able to handle sudden increases in

demand.

• Security: Client-server computing can help businesses to improve the security

of their data. This is because the data is stored on a central server, which can

be more easily secured than individual client computers.

Here are some of the challenges of client-server computing:

• Complexity: Client-server computing can be more complex to set up and

manage than other computing architectures.

• Cost: Client-server computing can be more expensive than other computing

architectures.

• Security: Client-server computing can be more vulnerable to security threats

than other computing architectures.

 

WEB PAGE DESIGNING:

HTML

Ø  HTML stands for HyperText Markup Language.

Ø  HTML is used to create web pages and web applications.

Ø  HTML is widely used language on the web.

Ø  We can create a static website by HTML only.

Ø  Technically, HTML is a Markup language rather than a programming language.

HTML Example with HTML Editor

<!DOCTYPE> 

<html> 

<head> 

<title>Web page title</title> 

</head> 

<body> 

<h1>Write Your First Heading</h1> 

<p>Write Your First Paragraph.</p> 

</body> 

</html> 

OUTPUT:  Write Your First Heading

                 Write Your First Paragraph.

HTML Tags

HTML tags are like keywords which defines that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags.

 

When a web browser reads an HTML document, browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties.

 

An HTML file must have some essential tags so that web browser can differentiate between a simple text and HTML text. You can use as many tags you want as per your code requirement.

All HTML tags must enclosed within < > these brackets.

Every tag in HTML perform different tasks.

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

HTML Attribute

• HTML attributes are special words which provide additional information about the elements or attributes are the modifier of the HTML element.
• Each element or tag can have attributes, which defines the behaviour of that element.
• Attributes should always be applied with start tag.
• The Attribute should always be applied with its name and value pair.
• The Attributes name and values are case sensitive, and it is recommended by W3C that it should be written in Lowercase only.
• You can add multiple attributes in one HTML element, but need to give space between two attributes.

---

Syntax

1.      <element attribute_name="value">content</element>  

---

Example

1.       <!DOCTYPE html>  

2.      <html>  

3.      <head>  

4.      </head>  

5.      <body>  

6.          <h1> This is Style attribute</h1>  

7.         <p style="height: 50px; color: blue">It will add style property in element</p>  

8.          <p style="color: red">It will change the color of content</p>  

9.      </body>  

10.   </html>  

This is Style attribute

It will add style property in element

It will change the color of content

 

 

 

 

 

 

 

 

HTML Lists

HTML Lists are used to specify lists of information. All lists may contain one or more list elements. There are three different types of HTML lists:

1. Ordered List or Numbered List (ol)
2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)

HTML Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers by default. It is known as numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.

1.      <ol>  

2.       <li>Aries</li>  

3.       <li>Bingo</li>  

4.       <li>Leo</li>  

5.       <li>Oracle</li>  

6.      </ol> 

 

 

Output:

1. Aries
2. Bingo
3. Leo
4. Oracle

HTML Unordered List or Bulleted List

In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list also. The Unordered list starts with <ul> tag and list items start with the <li> tag.

1.      <ul>  

2.       <li>Aries</li>  

3.       <li>Bingo</li>  

4.       <li>Leo</li>  

5.       <li>Oracle</li>  

6.      </ul>  

Output:

• Aries
• Bingo
• Leo
• Oracle

HTML Description List or Definition List

HTML Description list is also a list style which is supported by HTML and XHTML. It is also known as definition list where entries are listed like a dictionary or encyclopedia.

The definition list is very appropriate when you want to present glossary, list of terms or other name-value list.

The HTML definition list contains following three tags:

1. <dl> tag defines the start of the list.
2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).

INPUT

<dl>  

  <dt>Aries</dt>  

<dd>-One of the 12 horoscope sign.</dd>  

 <dt>Bingo</dt>  

<dd>-One of my evening snacks</dd>  

<dt>Leo</dt>  

<dd>-It is also an one of the 12 horoscope sign.</dd>  

 <dt>Oracle</dt>  

 <dd>-It is a multinational technology corporation.</dd>   

               </dl>  

Output:

Aries

-One of the 12 horoscope sign.

Bingo

-One of my evening snacks

Leo

-It is also an one of the 12 horoscope sign.

Oracle

-It is a multinational technology corporation.

HTML Table

HTML table tag is used to display data in tabular form (row * column). There can be many columns in a row.

We can create a table to display data in tabular form, using <table> element, with the help of <tr> , <td>, and <th> elements.

In Each table, table row is defined by <tr> tag, table header is defined by <th>, and table data is defined by <td> tags.

HTML tables are used to manage the layout of the page e.g. header section, navigation bar, body content, footer section etc. But it is recommended to use div tag over table to manage the layout of the page .

HTML Table Tags

 

Tag	Description
<table>	It defines a table.
<tr>	It defines a row in a table.
<th>	It defines a header cell in a table.
<td>	It defines a cell in a table.

INPUT

<table>

<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>

<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>

<tr><td>James</td><td>William</td><td>80</td></tr>

<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>

<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>

</table>

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>  

4.        <title>Form in HTML</title>  

5.      </head>  

6.       <body>  

7.           <h2>Registration form</h2>  

8.          <form>  

9.           <fieldset>  

10.           <legend>User personal information</legend>  

11.           <label>Enter your full name</label><br>  

12.           <input type="text" name="name"><br>  

13.            <label>Enter your email</label><br>  

14.            <input type="email" name="email"><br>  

15.            <label>Enter your password</label><br>  

16.            <input type="password" name="pass"><br>  

17.            <label>confirm your password</label><br>  

18.            <input type="password" name="pass"><br>  

19.            <br><label>Enter your gender</label><br>  

20.            <input type="radio" id="gender" name="gender" value="male"/>Male  <br>  

21.            <input type="radio" id="gender" name="gender" value="female"/>Female <br/>    

22.            <input type="radio" id="gender" name="gender" value="others"/>others <br/>   

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>  

 

 

                          

Introduction to frames

HTML frames allow authors to present documents in multiple views, which may be independent windows or subwindows. Multiple views offer designers a way to keep certain information visible, while other views are scrolled or replaced. For example, within the same window, one frame might display a static banner, a second a navigation menu, and a third the main document that can be scrolled through or replaced by navigating in the second frame.

Here is a simple frame document:

<HTML>

<HEAD>

<TITLE>A simple frameset document</TITLE>

</HEAD>

<FRAMESET cols="20%, 80%">

  <FRAMESET rows="100, 200">

      <FRAME src="contents_of_frame1.html">

      <FRAME src="contents_of_frame2.gif">

  </FRAMESET>

  <FRAME src="contents_of_frame3.html">

  <NOFRAMES>

      <P>This frameset document contains:

      <UL>

         <LI><A href="contents_of_frame1.html">Some neat contents</A>

         <LI><IMG src="contents_of_frame2.gif" alt="A neat image">

         <LI><A href="contents_of_frame3.html">Some other neat contents</A>

      </UL>

  </NOFRAMES>

</FRAMESET>

</HTML>

that might create a frame layout something like this:

 ---------------------------------------

|         |                             |

|         |                             |

| Frame 1 |                             |

|         |                             |

|         |                             |

|---------|                             |

|         |          Frame 3            |

|         |                             |

|         |                             |

|         |                             |

| Frame 2 |                             |

|         |                             |

|         |                             |

|         |                             |

|         |                             |

 ---------------------------------------

 

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>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

Note

To: Tove

From: Jani

Heading: Reminder

Body: Don't forget me this weekend!

 

DTD

A Document Type Definition (DTD) describes the tree structure of a document and something about its data. It is a set of markup affirmations that actually define a type of document for the SGML family, like GML, SGML, HTML, XML.

 

A DTD can be declared inside an XML document as inline or as an external recommendation. DTD determines how many times a node should appear, and how their child nodes are ordered.

 

There are 2 data types, PCDATA and CDATA

 

PCDATA is parsed character data.

CDATA is character data, not usually parsed.

yntax:

<!DOCTYPE element DTD identifier

[

   first declaration

   second declaration

   .

   .

   nth declaration

]>

Example:

DTD for the above tree is:

XML Schema

Ø  An XML Schema describes the structure of an XML document, just like a DTD.

Ø  An XML document with correct syntax is called "Well Formed".

Ø  An XML document validated against an XML Schema is both "Well Formed" and "Valid".

Ø  XML Schema

Ø  XML Schema is an XML-based alternative to DTD:

<xs:element name="note">

<xs:complexType>
  <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 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
• <xs:element name="body" type="xs:string"> the element "body" is of type string

XML Document Object Model (DOM)

The XML Document Object Model (DOM) class is an in-memory representation of an XML document. The DOM allows you to programmatically read, manipulate, and modify an XML document. The XmlReader class also reads XML; however, it provides non-cached, forward-only, read-only access. This means that there are no capabilities to edit the values of an attribute or content of an element, or the ability to insert and remove nodes with the XmlReader. Editing is the primary function of the DOM. It is the common and structured way that XML data is represented in memory, although the actual XML data is stored in a linear fashion when in a file or coming in from another object. The following is XML data.

Input

XMLCopy

<?xml version="1.0"?>

  <books>

    <book>

        <author>Carson</author>

        <price format="dollar">31.95</price>

        <pubdate>05/01/2001</pubdate>

    </book>

    <pubinfo>

        <publisher>MSPress</publisher>

        <state>WA</state>

    </pubinfo>

  </books>

The following illustration shows how memory is structured when this XML data is read into the DOM structure.

 

XML document structure

 

 

Presenting XML XML documents are presented using Extensible Stylesheet which expresses stylesheets. XSL stylesheet are not the same as HTML cascading stylesheets. They create a style for a specific XML 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 document of Example This line must be included in the XML document which reference stylesheet

SAX - Simple API for XML Parsing It was the first to come on the scene and interestingly it was developed in the XML-Dev maling list. Evidently the people who developed this were XML gurus and it is quite visible in the usage of this API. You got to have a fair understanding of XML, but at least Java developers got something to combine the two worlds - Java and XML in a structured way. It instantly became a hit for the obvious reasons. 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 faster is that it does not allow modification of the underlying XML data.

DOM - Document Object Model The Java binding for DOM provided a tree-based representation of the XML documents - allowing random access and modification of the underlying XML data. Not very difficult to deduce that it would be slower as compared to SAX. The event-based callback methodology was replaced by an object-oriented in-memory representation of the XML documents. Though, it differs from one implementation to another if the entire document or a part of it would be kept in the memory at a particular instant, but the Java developers are 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.