The document provides an introduction to web application development training. It discusses what software is, categories of software including system software, desktop applications, mobile applications, and web applications. It also discusses the concept of web applications and their common components like the client, server, and database. The document outlines areas of focus in web application development like graphic user interface design, front-end development, back-end development, and full-stack development.

1. MOATACADEMY
WEBAPPLICATION
DEVELOPMENT
TRAINING
INTRODUCTION TO WEB APPLICATION
HTML DAY 1

2. WHAT ISSOFTWARE?
• Software, is a set of instructions or programs instructing a computer
to do specific tasks.
• It is generally used to describe computer programs

3. CATEGORIES
OFSOFTWARE
1. System Software eg Operating System
2. Application Software:
a. Desktop Application: can be installed on a
single computer
b. Mobile Application: downloaded from app
stores and installed on mobile devices
c. Web Application : runs on a remote server
(web server) and can be accessed using web
browsers over a network such as Internet
d. Cloud Solutions: a ready-built application
where users can pay for subscription per
number of accounts or volume of usage* :
may be similar to web app

4. CLASSQUIZ

5. THE INNERWORKINGSOFWEBAPPLICATIONS:
LOCATINGAWEBSITEONTHE INTERNET

6. SCENARIO: BLESSINGWANTSTOVISIT
MOATACADEMY.COM
1. She first enters the url (address) of the website in the browser on her local
computer (the client).
2. Her computer browser (client) generates a request that is sent out to the server
computer, which then accepts the request.
3. The server runs (or executes) the back-end code, usually getting data from (or
querying) the database
4. The database sends the requested data back to the server.
5. The server takes the data and executes the front-end code to produce a
response.
6. This response is sent back out to the client where it is then displayed (or
rendered) on the client computer as a standard web page.

7. THE INNERWORKINGSOFWEBAPPLICATION – HOW
OUR MODULES FITTOGETHER (YOUR MOATACADEMY
JOURNEY)

8. THECONCEPTOFWEBAPPLICATION
• Web Development involves all the activities that lead to the
creation, design and building of web application.
• There are so many factors considered in creating a web application -
aesthetics, ease of use, impressiveness and relevant content,
functionality, appropriate graphics, convenient navigation, search
features etc.
• The whole essence however is to ensure it solves the identified
problem.
Website and Web Application
• A web application is more than just an informational website; it
provides more than textual and graphical information. It allows users
to carry out some specified tasks.

9. THECONCEPTOFWEBAPPLICATION
• The Common components that handle every interaction between a
user and a website / web application are:
• Client: The browser on your local computer or phone you are
interacting with to access the website.
• Server: The remote computer that “physically houses” all the files
(and thus code) that make up the website.
• Database: A sub-component of the remote server, used to store
all the data and information generated or used within the
website. For example, when you sign up on facebook, your
details will be stored in the database.

10. WEBAPPLICATION DEVELOPMENT -WHERE
CAN I FIT IN?
The core of web application development is programming hence it is
expected you build your muscles in this regard; From the perspective of
area of focus, the following are the areas of web application
development:

11. WEBAPPLICATION DEVELOPMENT –WHERE
CAN I FIT IN?
Graphic User
Interface (GUI)
Designer
This is the guy trained in the arts of using graphic tools such as Corel draw, Photoshop etc
to create mockups for pages or entire websites that will please the client and appeal to
the audience. In some development circles, this position is non-programming based,
while in other cases, GUI Designers will be expected to convert visual mockups into
workable front-end code.
Front-End Developer: The frontend relates to any components that can be manipulated by the user.A front end
developer focuses on the look and feel of the site (the presentation) and develops the
website exclusively utilizing web technologies (i.e. HTML,CSS, and JavaScript) which run
natively in a web browser.
Back-end developer writes all the code necessary for the core logic of the website:Grabbing data from the
database and molding how that data is appropriately used and displayed to the user
through the front end.
full-stack developer developers who are comfortable working with both back-end and front-end technologies.
To be more specific, it means that the developer can work with databases, PHP, HTML,
CSS, JavaScript and everything in between, also, venturing as far as converting
Photoshop designs to front-end code His position is a much-lauded one, why not?

12. WHAT ISCOMPUTER PROGRAMMING?
• The essence of computer programs is to solve problems
• Computer programs are series of instructions given to the computer
in order to solve a particular problem
• Computer programming (shortened to ‘programming’) is the process
of instructing the computer on what to do.
• Programmers make use of various programming languages to
instruct the computer on what to do.
• Programming languages have evolved over the years
• Examples are: PHP, Python, Java etc

13. A BRIEF HISTORY

14. • Understanding of the problem is the first step to solving any
problem.
• To instruct the computer, you must understand its language.
• As diverse as humans are, so is the solution to problems. Ponder on
Problems 1 and 2
• Assuming you have identified a problem in the society and you have
also found a way of solving the problem using technology, what is
next?
WEBAPPLICATION DEVELOPMENT

15. GRAPHICUSER
INTERFACE (GUI)
DESIGN
Every application will require
a GUI where users will
interface with the application

16. PLANNINGYOURWEBSITE DESIGN
• What is the website about? What do you want to tell the public/
showcase ? Do you just want to talk about yourself?
• What information are you presenting on the subject? Write a title
and a few paragraphs and think of an image you'd like to show on your
page.
• What does your website look like, What's the background color?What
kind of font is appropriate: regular, bold, italics, underlined?

17. ORGANIZINGYOURCONTENTS
• A website consists of many files: text content, code, media content,
images etc. That is; a combination of several pages [files]
• When you're building a website, you need to assemble these files into
a sensible structure and make sure they can talk to one another.
• When you are working on a website locally on your own computer, you
should keep all the related files in a single folder.This is what will
eventually be on the server when done.
• This folder can live anywhere you like such as the Desktop

18. ORGANIZINGYOURCONTENTS -TIPS
• Always name your folders and files completely in lowercase with no
spaces.This is because:
◦ Many computers, particularly web servers, are case-sensitive.
◦ Browsers, web servers, and programming languages do not handle
spaces consistently – It is thus better to separate words with
dashes or underscores: my-file.html or my_file.html.
• The homepage be named index.html, other pages named with
meanings
• EXERCISE: create a folder anywhere on your system where you
intend to store all the files that make up your website, following
the above tips

19. INTRODUCTIONTO HTML -TAGS
• HTML stands for HyperText Markup Language
• HTML is used in creating documents for the web browser, it makes use
of tags
• The different HTML tags are used to tell your browser how to display
the web pages you visit
• Tags are the building blocks of HTML documents.
• Tags could be Non-selfClosingTags or self closingTags. General
Syntax is as shown below:
◦ Non-selfClosing: <tagname> contents </tagname>
◦ Self Closing : <tagname /> OR < tagname>

20. TYPESOF HTMLTAGS
• An element is the tags plus content
• Tags, when wrapped around different parts of the content
make the webpage appear a certain way, or act a certain way.

21. ANATOMYOFA HTML DOCUMENT
• All web pages no matter how simple or complex have a structure similar to:
• Take note of the HEAD and BODY –
don’t human beings have HEAD and
BODY too?
• The <head> tag contains other tags
that give information to the browser
about the document.
• Notable in the head section are: the
<title> tag and various <meta> tags
(these will be covered tomorrow)
<!DOCTYPE html>
<html>
<head>
<title>
My New Webpage
</title>
</head>
<body>
</body>
</html>

22. 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).
• The <!DOCTYPE> declaration is not case sensitive.

23. COMMONCOMPONENTSOFWEB PAGES
The following are components usually found on web pages:
◦ Texts
◦ Links
◦ Images
◦ Multimedia (audio, video)
◦ Data Capture Forms
In HTML module, we will be learning the tags for placing these
components
QUIZ:Think of any website /web application and try to see the
components… anything outside the list?

24. HTMLTAGS FOR
PLACINGTEXTS
• Paragraphs
• Heading
• And more…

25. • The <p> and <span> tag: (non-self closing)
• The <br> tag (self-closing)
• QUIZ: what makes them display like that? Does space
have any thing to do with it?
• &nbsp;
PLACINGTEXTSONYOURWEBPAGE

26. INLINEAND BLOCK LEVEL ELEMENTS
• By default, HTML displays its elements in one of the
following ways:
• Inline:These elements do not force new lines before or
after its placement, and it only consumes as much space
as necessary.
• Block: New lines appear before and after the element
with it consuming the full width available.
www.moatacademy.com

27. HOWTHEWEB BROWSER DISPLAYCONTENTS

28. • Below is a section of a company’s website where the
testimonials of customers are displayed, two happy
customers have sent in their testimonials.
• Achieve the below using an appropriate tag combination:
EXERCISE: BLOCK LEVELAND INLINE
ELEMENTS

29. PLACINGTEXTSONYOURWEBPAGE
• The <marquee></marquee> tag *
• QUIZ: what kind of element is the marquee?

30. THE HEADINGTAGS
• The <h>heading tag: (h1 to h6)
◦ Search engines use the headings to index the structure and
content of your web pages.
◦ Users skim your pages by its headings. It is important to use
headings to show the document structure.
◦ QUIZ:Try out any 3 heading tags, what do you observe as the
number increases?

31. PLACINGTEXTSONYOURWEBPAGE – Heading and
Paragraph

32. PLACINGTEXTSONYOURWEBPAGE – Heading and
Paragraph

33. REMINDER:ANATOMYOFA HTML DOCUMENT

34. HTML FORMATING
1. Making it bold…
2. Italics
3. Underline…

35. HTML FORMATINGTAGS
• <b> and <strong> tag
• <i> italic
• <u> underline
• QUIZ: Achieve the following using HTML tagWelcome
• CANYOU APPLYTHE NEWLY INTRODUCEDTAGSTO
UPDATETHETESTIMONIAL SECTION?

36. QUIZ – INTRODUCE HTML FORMATINGTAGS

37. YOURTAGSCAN HAVEATTRIBUTESTOTELLTHE
BROWSER MOREABOUTTHETAG.
ATTRIBUTESARESEPARATEDWITHSPACEANDARE
ALWAYSWITHINTHEOPENINGTAG,WITHTHESYNTAX:
<TAG ATTRIBUTE=‘VALUE’> CONTENT</TAG>
<BODY BGCOLOR=‘YELLOW’>…. </BODY>
<HR WIDTH=‘200’ SIZE=‘8’ ALIGN=‘LEFT’ COLOR=‘RED’>
Common Attributes: align, title, bgcolor, direction for marquee

38. HTMLATTRIBUTES
<marquee behavior="scroll" direction="left"
scrollamount="5">This is a maquee</marquee>
QUIZ: Why will align not have visible effect on an inline element
like span? *

39. Classwork: Design a web page for the opening of the letter below.
5, Ogunsiji Close,
Off Allen Avenue,
Lagos
Dear Sir,
APPLICATION FORTHE ROLE OF A PROGRAMMER

40. ASSIGNMENT
Create a single personal web page
using various <h> tags to highlight
different sections such as ‘About
Me’, Hobbies, Education’
respectively
NOTE: itemize your hobbies