MCA 3rd Sem.

WEB TECHNOLOGY
1ST UNIT
Web development -
Web development refers to the creating, building, and maintaining of
websites. It includes aspects such as web design, web publishing, web
programming, and database management. It is the creation of an application
that works over the internet i.e. websites.
The word Web Development is made up of two words, that is:
1- Web: It refers to websites, web pages or anything that works over the
internet.
2- Development: It refers to building the application from scratch.

Introduction and web development strategies-

1- Identify the target users- Identify the target users of the website by
doing market research.
2- Make our design portable- To be successful website design should be
portable and accessible across different browsers, operating system and
computer platforms. Designer should test the website in different
environment weathers they look same to all their users.
3- Design for low bandwidth-The pages in website should be accessible
at any connection speeds. If a page is downloaded slowly then users will
leave the website before they see the content.
4- Plan for clear presentation and easy access to information-
Presentation of the information on the website must be clear and easily
accessible to the users.
5- Create smooth transitions- plan to create a unified look among the
section and page of the site. Reinforce the identifying the elements of the
site and create smooth transitions from one page to another page.

World Wide Web-

1- World Wide Web, which is also known as a Web, is a collection of
websites or web pages stored in web servers and connected to local
computers through the internet.
 2- These websites contain text pages, digital images, audios, videos, etc.
Users can access the content of these sites from any part of the world
over the internet using their devices such as computers, laptops, cell
phones, etc.
3- The WWW, along with internet, enables the retrieval and display of text
and media to your device.

History of WWW-
1- WWW is created by Sir Tim Berners Lee in 1989 at CERN in Geneva.
2- In 1990, the first text only browsers were setup and CERN scientist could
access hypertext files and other information at CERN. HTML was based on
a subset of the standard generalized markup language (SGML). To transfer
HTML document to remote sites a new protocol was devised called HTTP
(Hyper Text Transfer Protocol).
3- In the fall of 1991, conference goes around the work started hearing
about the promise but sparks still were not flying.
4- In 1993, there are only about 50 websites worldwide. A browser that
allowed user to take advantage of the web's graphical capabilities was
developed at the National center for Super Computing application (NCSA).
NCSA called the browser Mosaic.

Protocols Governing Web-

Protocol: A protocol is a set of rules that is used to communicate applications to
each other. OR A protocol is the interface required for communicating the
different applications.
Classification:
1- HTTP
2- TCP/IP
3- FTP
4- E-MAIL
5- TELNET
Website-
1- A website (also written as web site) is a collection of web pages and
related content that is identified by a common domain names and
published on at least one web server. Notable examples are
wikipedia.org, google.com, and amazon.com
2- All publicly accessible websites collectively constitute the World Wide
Web. There are also private websites that can only be accessed on a
private network, such as a company's internal website for its employees.
3- Websites are typically dedicated to a particular topic or purpose, such as
news, education, commerce, entertainment, or social networking. Hyper
linking between web pages guides the navigation of the site, which often
starts with a home page.

Web Application-
1- A web application (or web app) is application software that runs on a web
server, unlike computer-based software programs that are run locally on
the operating system (OS) of the device. Web applications are accessed by
the user through a web browser with an active network connection.
2- These applications are programmed using a client–server modeled
structure—the user ("client") is provided services through an off-site
server that is hosted by a third-party.
3- Examples of commonly-used web applications include: web-mail, online
retail sales, online banking, and online auctions.

Web design-
1- Web design refers to the design of websites that are displayed on the
internet. It usually refers to the user experience aspects of website
development rather than software development.
2- Web design used to be focused on designing websites for desktop
browsers; however, since the mid-2010s, design for mobile and tablet
browsers has become ever-increasingly important.
3- A web designer works on the appearance, layout, and, in some cases,
content of a website. Appearance, for instance, relates to the colors,
font, and images used. Layout refers to how information is structured
and categorized.
 4- A good web design is easy to use, aesthetically pleasing, and suits the
user group and brand of the website. Many WebPages are designed with
a focus on simplicity, so that no extraneous information and functionality
that might distract or confuse users appears.
5- As the keystone of a web designer’s output is a site that wins and fosters
the trust of the target audience, removing as many potential points of
user frustration as possible is a critical consideration.

Web hosting-
1- A Web host is an organization that sells or leases memory space on its
servers. Web hosting is typically done in a data center, which provides
services to clients that enable them to publish websites on the Internet.
2- A Web host can also provide data center space and an Internet
connection for servers owned by others. The service provided by a Web
host is called Web hosting.

Html introduction-
HTML is an acronym which stands for Hyper Text Markup Language which is
used for creating web pages and web applications. Let's see what is meant by
Hypertext Markup Language, and Web page.

Hyper Text- HyperText simply means "Text within Text." A text has a link
within it, is a hypertext. Whenever you click on a link which brings you to a new
webpage, you have clicked on a hypertext. Hypertext is a way to link two or
more web pages (HTML documents) with each other.

Markup language- A markup language is a computer language that is used to

apply layout and formatting conventions to a text document. Markup language
makes text more interactive and dynamic. It can turn text into images, tables,
links, etc.

Web Page- A web page is a document which is commonly written in HTML and
translated by a web browser. A web page can be identified by entering an URL.
A Web page can be of the static or dynamic type. With the help of HTML only,
we can create static web pages.
 Hence, HTML is a markup language which is used for creating attractive web
pages with the help of styling, and which looks in a nice format on a web
browser. An HTML document is made of many HTML tags and each HTML tag
contains different content.

Example-

1. <!DOCTYPE>
2. <html>
3. <head>
4. <title>Web page title</title>
5. </head>
6. <body>
7. <h1>Write Your First Heading</h1>
8. <p>Write Your First Paragraph.</p>
9. </body>
10.</html>

Description of HTML Example

<!DOCTYPE>: It defines the document type or it instruct the browser about the
version of HTML.
<html > :This tag informs the browser that it is an HTML document. Text
between html tag describes the web document. It is a container for all other
elements of HTML except <!DOCTYPE>
<head>: It should be the first element inside the <html> element, which
contains the metadata(information about the document). It must be closed
before the body tag opens.
<title>: As its name suggested, it is used to add title of that HTML page which
appears at the top of the browser window. It must be placed inside the head tag
and should close immediately. (Optional)
<body> : Text between body tag describes the body content of the page that is
visible to the end user. This tag contains the main content of the HTML
document.
<h1> : Text between <h1> tag describes the first level heading of the webpage.
<p> : Text between <p> tag describes the paragraph of the webpage.
Html Tags-
HTML tags are like keywords which define 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.
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 performs 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>

 <a>: Creates hyperlinks, linking to another document or resource.

 <img>: Embeds images.
 <ul> and <ol>: Define unordered and ordered lists.
 <li>: Represents list items within <ul> or <ol>.
 <div>: Groups content for styling or layout purposes.
 <span>: Applies styles to inline elements.
 <br>: Inserts a line break within text.
 <hr>: Represents a horizontal rule or line.
 <strong> and <em>: Emphasize text with strong and emphasized
importance, respectively.
 <input>: Creates input fields for forms.
 <form>: Wraps form elements for user input.
 <table>, <tr>, <td>, <th>: Constructs tables, rows, and cells for tabular
data.
 <iframe>: Embeds external content, like a webpage or video, within the
current document.
  article>: Represents a self-contained piece of content that could be
distributed and reused independently.
 <aside>: Defines content aside from the page content, often used for
sidebars.
 <footer>: Represents the footer of a section or page.
 <header>: Defines the header of a section or page.
 <nav>: Defines a navigation menu.
 <section>: Represents a generic section of content.
 <main>: Wraps the main content of the document, excluding headers,
footers, and sidebars.
 <figure>: Represents any content that is referenced from the main
content, such as images and diagrams.
 <figcaption>: Provides a caption for the content inside a <figure> element.
 <mark>: Highlights text for reference or notation.
 <abbr>: Represents an abbreviation or acronym, with an optional
expansion.
 <address>: Represents contact information for the nearest <article> or
<body> ancestor.
 <time>: Represents a specific period in time or a range of time.
 <progress>: Represents the completion progress of a task.
 <metre>: Represents a scalar measurement within a known range.
 <cite>: Represents the title of a creative work or the name of a person
cited.
 <code>: Represents a piece of computer code.
 <pre>: Defines preformatted text, preserving both spaces and line breaks.
 <blockquote>: Represents a section that is a quotation from another
source.
 <q>: Defines a short inline quotation.

Html grouping using Div and Span tag-

HTML div tag-
The div tag is known as the Division tag. The HTML <div> tag is a block-level
element used for grouping and structuring content. It provides a container to
organize and style sections of a webpage, facilitating layout design and CSS
styling.
Div tag has both opening(<div>) and closing (</div>) tags and it is mandatory
to close the tag.

Example-

<!DOCTYPE html>
<html>

<head>
<title>Div tag</title>

<style>
div {
color: white;
margin: 2px;
font-size: 25px;
}

.div1 {
background-color: rgb(142, 142, 245);
}

.div2 {
background-color: #9af19a;
}

.div3 {
background-color: rgb(232, 232, 137)
}

.div0 {
background-color: #009900;
}
</style>
</head>

<body>
<div class="div1"> div tag </div>
 <div class="div2"> div tag </div>
<div class="div3"> div tag </div>
<div class="div0"> div tag </div>
</body>

</html

Output-

HTML span Tag-

The HTML span element is a generic inline container for inline elements and
content. It used to group elements for styling purposes (by using the class or id
attributes). A better way to use it when no other semantic element is
available.

Example-

<!DOCTYPE html>
<html>

<head>
<title>span tag</title>
</head>

<body>

<p>
 <span style="background-color:lightgreen">
GeeksforGeeks
</span>
is A Computer Science Portal where you can
<span style="color:blue;">
Publish
</span> your own
<span style="background-color:lightblue">
articles
</span>
and share your knowledge with the world!!
</p>
</body>

</html

Output-

Html List-
An HTML list is a record of related information used to display the data or any
information on web pages in the Ordered or Unordered form.

Example-

<!DOCTYPE html>
<html>

<head>
<title></title>
</head>

<body>
<h2>Welcome To GeeksforGeeks Learning</h2>
<h5>List of available courses</h5>
 <ul>
<li>Data Structures & Algorithm</li>
<li>Web Technology</li>
<li>Aptitude & Logical Reasoning</li>
<li>Programming Languages </li>
</ul>
<h5>Data Structures topics</h5>
<ol>
<li>Array</li>
<li>Linked List</li>
<li>Stacks</li>
<li>Queues</li>
<li>Trees</li>
<li>Graphs</li>
</ol>
</body>

</html>

Output-

The HTML Unordered List or Bulleted List-

The unordered list items are marked with bullets. It is also known as bulleted
lists. An unordered list starts with the <ul> tag. Each list item starts with the
<li> tag.

Syntax:
<ul> list of items </ul>

Attribute: This tag contains two attributes which are listed below:
compact: It will render the list smaller.
type: It specifies which kind of marker is used in the list.

Example-
<!DOCTYPE html>
<html>

<body>
<h2>Grocery list</h2>
<ul>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
</body>

</html

Output-
HTML Ordered List-
In an ordered list, all list items are marked with numbers by default. An
ordered list starts with the <ol> tag. Each list item starts with the “li” tag.

Syntax:
<ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>

Attributes:
compact: It defines the list should be compacted (compact attribute is not
supported in HTML5. Use CSS instead.).
reversed: It defines that the order will be descending.
start: It defines from which number or alphabet the order will start.
type: It defines which type(1, A, a, I, and i) of the order you want in your list
of numeric, alphabetic, or roman numbers.

Example
<!DOCTYPE html>
<html>

<head>
<title>HTML ol tag</title>
</head>

<body>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>HTML ol tag</h3>

<p>reversed attribute</p>

<ol reversed>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<p>start attribute</p>

<ol start="5">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>

<p>type attribute</p>

<ol type="i">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
</body>

</html>

Output-

HTML Description List-

A description list is a list of terms, with a description of each term. The <dl> tag
defines the description list, the <dt> tag defines the term name, and the <dd>
tag describes each term.
Syntax:
<dl> Contents... </dl>

Example-
<!DOCTYPE html>
<html>

<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- 500 gms</dd>
<dt>Milk</dt>
<dd>- 1 ltr Tetra Pack</dd>
</dl>
</body>

</html

Output -

HTML IMG Tag-

The HTML <img> tag plays a important role in enriching web content by
embedding images into a webpage. This tag primarily uses the src attribute to
define the URL of the image file. Additionally, it supports a variety of optional
attributes such as alt for alternative text, and width/height to specify the
dimensions of the image.

Syntax :
<img src="" alt="" width="" height="">

Example-
<!DOCTYPE html>
<html>

<body style="text-align: center;">

<h3>GeeksforGeeks logo</h3>

<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-13.png"
width="420" height="100"
alt="Geeksforgeeks.org">
</body>

</html>

Output-