WEB APPLICATION

DEVELOPMENT
CPC 223 (B)
WEEK 2
AGENDA
I. HISTORY AND ORIGIN OF WEB
II. USES OF WEB
III. BENEFITS OF WEB in TECHNOLOGY
WHAT IS A WEB?
 The World Wide Web—commonly referred to as WWW, W3, or the Web—is an
interconnected system of public webpages accessible through the Internet. The Web is not
the same as the Internet: the Web is one of many applications built on top of the Internet
WHAT IS AN APPLICATION?
 Is a type of computer program that performs specific functions. These functions, performed
by application software, can be personal, business as well as educational. Thus, application
Software is also known as end-user software or productivity software.
WHAT IS DEVELOPMENT?
 Software development refers to the process of creating, designing, testing, and
maintaining software applications. It involves a wide range of activities, from
conceptualizing the idea for a software application to its implementation and deployment.
1. Requirements Gathering: The first step in the software development process is to
understand the requirements for the software. This involves working with stakeholders to
identify the needs and goals of the software, as well as determining any constraints or
limitations that must be considered.

2. Design: Once the requirements have been gathered, the next step is to design the software.
This includes creating detailed specifications for the software, including its user interface,
architecture, and underlying systems.

3. Implementation: The next step is to implement the software. This involves writing the code
that makes the software work and integrating it with any necessary systems or technologies.

4. Testing: Once the software has been implemented, it is time to test it. This involves
conducting a series of tests to ensure that the software functions as expected and meets all of
the requirements.
5. Deployment: Once the software has been tested and deemed ready for release, it is deployed
to users. This can involve installing the software on individual computers or servers, or making
it available over the web.

6. Maintenance: The final step in the software development process is to maintain the
software. This includes fixing any bugs that are discovered, updating the software to keep pace
with changing technology, and providing support to users.
WEB FOUNDERS
 Tim Bernners- Sir Tim Berners-Lee is a British computer scientist. He was born in
London, and his parents were early computer scientists, working on one of the earliest
computers.
TIM BERNNER’S LIFE
 After graduating from Oxford University, Berners-Lee became a software engineer at
 CERN, the large particle physics laboratory near Geneva, Switzerland. Scientists come
from all over the world to use its accelerators, but Sir Tim noticed that they were having
difficulty sharing information.
 In March 1989, Tim laid out his vision for what would become the web in a document
called “Information Management: A Proposal”. Believe it or not, Tim’s initial proposal
was not immediately accepted. In fact, his boss at the time, Mike Sendall, noted the
words “Vague but exciting” on the cover. The web was never an official CERN project,
but Mike managed to give Tim time to work on it in September 1990. He began work
using a NeXT computer, one of Steve Jobs’ early products.
 Robert Cailliau- Robert Cailliau is most well known for the proposal, developed
with Tim Berners-Lee, of a hypertext system for accessing documentation, which
eventually led to the creation of the World Wide Web. In 1992, Cailliau produced the
first Web browser for the Apple Macintosh.
1st WEBSITE CREATED
 CERN WEBSITE developed by Tim Bernners in 1989.
1st WEBSITE CREATED
 CERN WEBSITE developed by Tim Bernners in 1989.
FUNCTIONS OF AN APPLICATION
SOFTWARE
 Manipulating data

 Managing information

 Manipulating images

 Keeping records

 Developing websites
WHER DO WE USE WEB?
1. Business- To inform prospective clients and consumers about your business and entice them

to work with you

2. E-Commerce- To sell items online with a conventional retail method.
3. Blog/News- To educate or inform the visitor about current events or specialized knowledge.
4. Portfolio- To display samples of work for certain professionals and attract more clientele.
5. Service provider (streaming, online tools, etc.) To offer a complete online service, such as

streaming or online tools like search engines, spell-checkers, photo editors, or translators.
6. Landing Page- To drive customers to a single, specific action, usually as part of a greater

marketing campaign.
7. Wiki/Database- To provide a wide berth of information and act as a reference guide.
 EXAMPLES OF APPLICATION
SOFTWARE
 Microsoft products such as Office, PowerPoint, Word, Excel, Outlook, etc.
 Music Application Softwares like Pandora and Spotify
 Real-time online communication like Skype, Google Meet, and Zoom
 Team collaboration software like Slack
 Internet browsers like Chrome, Safari, and Firefox
 Multimedia Software like MX Player and VLC Media Player
 Almost every other application that you are using is an example of application software .
TYPES OF WEB
1. Static- A static website uses server-side rendering to serve pre-built HTML, CSS, and

JavaScript files to a web browser, in contrast to traditional dynamic sites that work by

rendering the webpage at the time of the request

2. Dynamic- is a website containing data that can be mutable or changeable. It uses client-side

or server scripting to generate mutable content. Like a static website, it also contains HTML

data. Dynamic websites are those websites that changes the content or layout with every

request to the webserver

BENEFITS OF WEB IN COMMUNITY
1. Increased Connectivity: The web provides a platform for individuals and communities to
connect with each other, regardless of their physical location. This has allowed communities to
form and strengthen their bonds, even if they are separated by great distances.

2. Access to Information: The web provides easy and quick access to a wealth of information
on a wide range of topics. This is especially important for communities that are seeking
information about health, education, and social services.

3. Improved Communication: The web provides many tools for communication, such as
email, social media, and instant messaging, that allow individuals and communities to
communicate more effectively. This can lead to improved collaboration and coordination
among members of the community.
4. Enhanced Civic Engagement: The web provides a platform for individuals and
communities to participate in the political process and engage with their elected officials. This
can lead to increased accountability and transparency in government, and a more active and
engaged citizenry.

5. Economic Development: The web can provide new opportunities for economic
development, including e-commerce and the creation of new businesses and jobs. This can help
to drive economic growth and improve the quality of life for individuals and communities.
WEEK 3 and 4
WEEK 3
AGENDA
I. HTML Basics
II. HTML Paragraphs
III. HTML Line Breaks
IV. HTML Horizontal Rules
V. HTML Formatting
Introduction to HTML
 HTML is the standard markup language for creating Web pages.

 HTML stands for Hyper Text Markup Language

 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.
HTML BASICS
GROUP PRACTICAL ASSESSMENT #1
(50pts)

Give the backend using HTML Paragraph

<p></p> , Center <center></center>,
Horizontal line <hr>, Breakline <br></br>,
and Heading <h1></h1> h1-h6.
HTML DOCUMENTS
 All HTML documents must start with a document type declaration: <!
DOCTYPE html>.
 The HTML document itself begins with <html> and ends with </html>.
 The visible part of the HTML document is between <body> and </body>.

<!DOCTYPE html>
<html>
<body>
</body>
</html>
THE<!DOCTYPE> DECLARATION
 The <!DOCTYPE> declaration represents the document type, and helps
browsers to display web pages correctly.

 It must only appear once, at the top of the page (before any HTML tags).

<!DOCTYPE>
HTML HEADINGS
 HTML headings are defined with the <h1> to <h6> tags.
 <h1> defines the most important heading. <h6> defines the least important
heading:

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML PARAGRAPHS
 HTML paragraphs are defined with the <p> tag:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML LINE BREAKS
 The HTML <br> element defines a line break.

 Use <br> if you want a line break (a new line) without starting a new paragraph:

<!DOCTYPE html>
<html>
<body>

<p>This is<br>a paragraph<br>with line breaks.</p>

</body>
</html>
HTML HORIZONTAL RULES
 The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a
horizontal rule.
 The <hr> element is used to separate content (or define a change) in an HTML page:

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>

<p>This is some text.</p>
<hr>

<h2>This is heading 2</h2>

<p>This is some other text.</p>
<hr>

<h2>This is heading 2</h2>

<p>This is some other text.</p>

</body>
</html>
HTMT CENTER
 To center-align text </center>

<!DOCTYPE html>
<html>
<body>

<center><h1>This is heading 1</h1></center>

</body>
</html>
WEEK 4
HTML TEXT-FORMATTING
 Contains several elements for defining text with a special meaning.
HTML BOLD AND STRONG-TEXT
 The HTML <b> element defines bold text, without any extra importance.

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><b>This text is bold.</b></p>

</body>
</html>
HTML ITALIC-TEXT
 The HTML <i> element defines a part of text in an alternate voice or mood.
The content inside is typically displayed in italic.

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><i>This text is italic.</i></p>

</body>
</html>
HTML ITALIC-TEXT
 The HTML <i> element defines a part of text in an alternate voice or mood.
The content inside is typically displayed in italic.

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><i>This text is italic.</i></p>

</body>
</html>
HTML ELEMENT-TEXT
 The HTML <em> element defines emphasized text. The content inside is
typically displayed in italic.

<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>

<p><em>This text is emphasized.</em></p>

</body>
</html>
HTML SMALL-TEXT
 The HTML <small> element defines smaller text:

<!DOCTYPE html>
<html>
<body>

<p>This is some normal text.</p>

<p><small>This is some smaller text.</small></p>

</body>
</html>
HTML MARK-TEXT
 The HTML <small> element defines smaller text:

<!DOCTYPE html>
<html>
<body>

<p>Do not forget to buy <mark>milk</mark>

today.</p>

</body>
</html>
HTML DEL-TEXT
 The HTML <del> element defines text that has been deleted from a
document. Browsers will usually strike a line through deleted text:

<!DOCTYPE html>
<html>
<body>

<p>My favorite color is <del>blue</del> red.</p>

</body>
</html>
HTML INS-TEXT
 The HTML <ins> element defines a text that has been inserted into a
document. Browsers will usually underline inserted text:

<!DOCTYPE html>
<html>
<body>

<p>My favorite color is <del>blue</del>

<ins>red</ins>.</p>

</body>
</html>
HTML SUB-TEXT
 The HTML <sub> element defines subscript text. Subscript text appears half a character
below the normal line, and is sometimes rendered in a smaller font. Subscript text can be
used for chemical formulas, like H2O:

<!DOCTYPE html>
<html>
<body>

<p>This is _subscripted text.</p>

</body>
</html>
HTML SUP-TEXT
 The HTML <sup> element defines superscript text. Superscript text appears half a character
above the normal line, and is sometimes rendered in a smaller font. Superscript text can be
used for footnotes, like WWW[1]:

<!DOCTYPE html>
<html>
<body>

<p>This is ^{superscripted} text.</p>

</body>
</html>
UNORDERED LIST
 An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
 The list items will be marked with bullets (small black circles) by default:

<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list</h2>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>
</html>
ORDERED LIST
 An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

<!DOCTYPE html>
<html>
<body>

<h2>A Description List</h2>

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

</body>
</html>
DESCRIPTION LIST
 A description list is a list of terms, with a description of each term.

<!DOCTYPE html>
<html>
<body>

<h2>An ordered HTML list</h2>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>
TABLE BORDERS
 HTML tables can have borders of different styles and shapes.
ROUND TABLE BORDERS
 With the border-radius property, the borders get rounded corners
CELL PADDING
 Cell padding is the space between the cell edges and the cell content.
By default the padding is set to 0.
COLSPAN
 To make a cell span over multiple columns, use the colspan attribute:
ROWSPAN
 To make a cell span over multiple rows, use the rowspan attribute:
HTML STYLES
 The HTML style attribute is used to add styles to an element, such as color,
font, size, and more.

!DOCTYPE html>
<html>
<body>

<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>

</body>
</html>
HTML BACKGROUND COLOR
 background-color property defines the background color for an HTML
element.

<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
HTML TEXT COLOR
 The CSS color property defines the text color for an HTML element:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

</body>
</html>
HTML FONTS
 The CSS font-family property defines the font to be used for an HTML
element:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

</body>
</html>
HTML TEXT-SIZE
 The CSS font-size property defines the text size for an HTML element:

<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:300%;">This is a
heading</h1>
<p style="font-size:160%;">This is a
paragraph.</p>

</body>
</html>
HTML TEXT-ALIGNMENT
 The CSS text-align property defines the horizontal text alignment for an
HTML element:

<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:center;">Centered
Heading</h1>
<p style="text-align:center;">Centered
paragraph.</p>

</body>
</html>
HTML LINKS
 HTML links are defined with the <a> tag:

<!DOCTYPE html>
<html>
<body>

<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>

<a href="https://www.w3schools.com">This is a
link</a>

</body>
</html>
HTML LINKS
 HTML links are defined with the <a> tag:

<!DOCTYPE html>
<html>
<body>

<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>

<a href="https://www.w3schools.com">This is a
link</a>

</body>
</html>
HTML IMAGES
 HTML images are defined with the <img> tag.
 The source file (src), alternative text (alt), width, and height are provided as
attributes:

<!DOCTYPE html>
<html>
<body>

<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>

<img src="w3schools.jpg" alt="W3Schools.com"

width="104" height="142">

</body>
</html>
INLINE CSS
 An inline CSS is used to apply a unique style to a single HTML element.
 An inline CSS uses the style attribute of an HTML element.

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

</body>
</html>
INTERNAL CSS
 An internal CSS is used to define a style for a single HTML page.
 An internal CSS is defined in the <head> section of an HTML page, within a
<style> element.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
EXTERNAL CSS
 An external style sheet is used to define the style for many HTML pages.
 To use an external style sheet, add a link to it in the <head> section of each HTML
page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
CSS BORDER
 The CSS border property defines a border around an HTML element.

<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid powderblue;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>
CSS PADDING
 The CSS padding property defines a padding (space) between the text and the
border.

<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid powderblue;
padding: 30px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>
CSS MARGIN
 The CSS margin property defines a margin (space) outside the border.

<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 2px solid powderblue;
margin: 50px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>
HYPERLINKS
 HTML links are hyperlinks.
 You can click on a link and jump to another document.

<!DOCTYPE html>
<html>
<body>

<h1>HTML Links</h1>

<p><a href="https://www.w3schools.com/">Visit
W3Schools.com!</a></p>

</body>
</html>
LINK BOOKMARKS
 To create a bookmark - first create the bookmark, then add a link to it.
 When the link is clicked, the page will scroll down or up to the location with the
bookmark.
HTML IMAGE-MAP
 The HTML <map> tag defines an image map. An image map is an image with
clickable areas. The areas are defined with one or more <area> tags.

<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page
and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400"

height="379">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer"
href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee"
href="coffee.htm">
</map>

</body>
</html>
BACKGROUND IMAGE
 A background image can be specified for almost any HTML element.

<!DOCTYPE html>
<html>
<body>

<h2>Background Image</h2>

<p>A background image for a p element:</p>

<p style="background-image: url('img_girl.jpg');">

You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a p element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</p>

</body>
</html>
BACKGROUND REPEAT
 If the background image is smaller than the element, the image will repeat itself,
horizontally and vertically, until it reaches the end of the element:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
</head>
<body>

<h2>Background Repeat</h2>

<p>By default, the background image will repeat itself if it

is smaller than the element where it is specified, in this
case the body element.</p>

</body>
</html>
BACKROUND COVER
 If you want the background image to cover the entire element, you can set the
background-size property to cover.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>

<h2>Background Cover</h2>

<p>Set the background-size property to "cover" and the

background image will cover the entire element, in this case
the body element.</p>

</body>
</html>
BACKROUND STRETCH
 If you want the background image to stretch to fit the entire element, you can set the
background-size property to 100% 100%:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
</head>
<body>

<h2>Background Stretch</h2>

<p>Set the background-size property to "100% 100%" and the

background image will be stretched to cover the entire
element, in this case the body element.</p>

</body>
</html>