Good day to all of you. I warmly welcome you to ITE 1712 Web Design course.

This is the second lecture of this series.

In the previous lecture we learnt about the history of the internet.
Today we are going to get an introduction to www and web development.

This is the color coding that you have already been introduced in the previous lecture.
We will be using the same coding throughout this series. So please take a moment to make
yourselves
familiar with this.

The objectives of today's lecture are twofold.

After completing this lecture, you should be able to explain how a web application is composed.
You should also be able to develop a simple web application using html and css.
There are two activities in this lecture that you have to complete as well.

Before we learn about the anatomy of a web application, let's get ourselves familiarised on
seme terminology.

Browser, or commonly known as a web browser is a tool that you use to access web
applications.
If you browse YouTube on a computer, you will be using a browser.
Examples of such browsers are Google Chrome, Firefox, or Microsoft Edge.

Second terminology is client-server. This is an architecture that applies to most of the web
applications.
Client is an application running on a user's device. A server is a computer that belongs to an
application developer such as Facebook.
The client, connects to a server, over a network (such as the Internet) to access the content or
applications available on the server.
This is the basic architecture behind many web applications.

Protocol is a standard or an accepted procedure. In web design, we are interested in protocols

that are used to send a message from one device to another.
Protocols ensure that there is a standard or agreed upon way for devices to send and receive
messages.
Also, they make sure that the messages are understood by the senders and receivers.

API stands for Application programming interface

It's a software-based endpoint that allows two applications to talk to each other.

UI stands for user interface which is the interface a user interacts with an application.
UX or user experience is a much broader term. It involves looking not only at the interface but
the overall experience a user will get from an application.
Frameworks are software solutions that facilitate application development. They allow a
developer to use the functionailities provided and build custom applications.

Full-stack development is developing an application from the user interface or the client side
code up until the backend server side application.
In other words, the complete platform. A full stack developer can develop both client and
server-side software.

Bugs are issues or mistakes that are present in a program or software.

As developers we have to find and fix these bugs to make sure they don't affect how the
application behaves.

Wireframe is the structure or the blueprint of an application. It provides a visual guideline that
represent the skeletal framework of a website.

Web apps are made up of two separate running computer programs, a server and a client.
They are both important and the main distinction is whose machine they run on.
The server runs on a machine controlled by you the web app creator,
and the client runs on a machine controlled by the user of the web application.
This could be their laptop, desktop computer or their mobile phone. It could be a program
running in a web browser,
or a Native Application running directly on their computer.

Every web application communicates via a request and a response.

These are messages shared back and forth between the server and the client.
The client sends a request asking for information, and the server sends back a response after
doing
some processing on the request. The reason that web clients and web servers know how to
understand these messages
is because they all are written in the same way.

The Request and Response messages are just text, but how do the client and server know how
to speak the same language?
That problem is solved by the HTTP Standard. HTTP stands for Hypertext transfer protocol.
The HTTP standard is a set of rules for how the messages are allowed to be structured.
Every web browser and web server is then written so that it always follows these rules.

The request is sent by a web browser or a client to the web server over the network.
The server processes the request and prepares a response.
The response is sent by a web server over the network to the client who sent the request.

So what is a web server then?

Web server has several functionailities.

First, it provides HTML or Hypertext markup language pages to web browser. We call this act as
serving.
If the application requires, a web server can provide other types of documents as well.
A web server may also process information provided by a user as well.
Based on the supplied information, server may provide an apporopriate response.

Here's a reading activity for you to become faimiliar with what we discussed here.
Please complete this task before we move to the topic of web development.

Now we are going to look at how we can create a web page. This is going to be a very simple
web page.
What we want to learn here are the basics so that we can build much more complex web pages.

In order to understand web development, you need to understand three aspects of a web page.
The structure of the web page defines how the content are organized. This is done using a
markup language like HTML.
Next aspect is the style of the web page. This is implemented using CSS, cascading style sheets
which is a language used for
describing how a document is presented to a user.
Final aspect is controlling the behavior of a web page, which is done using a programing
language such as JavaScript or typescript.
Such a language can control the behavior a web page by executing the programme code from
the client side with the help of the server.

We have talked about these markup languages multiple times. So let's briefly talk about them
here.
Markup languages uses tags to define the elements of a document which can be used for
formatting and structuring text.
Some examples are HTML, XML or markdown.
We will talk about these in details in a later lecture.

HTML or Hypertext markup language is used for structuring your web page which is a collection
of texts.
So we use this markup language to help us to organize it.

This is an example of a web page that displays Hello world!.

First step is to tell the web browser which version of html we are using. This is done
through what we call a "Doctype" declaration. It helps the browser to read the information
in this html page. To be specific, here we are saying that his html page follows
the html5 standard.

Next we build the html document. These are called tags. First tag is a html tag.
If you open a tag, then you have close the tag. Between the opened and closed tags you
can place content. Here you see multiple such content head, body and so on.
You can see another important feature of html, which are attributes.
This lang attribute says that this web page is written in English language which helps
the browsers and other interested applications to use that information.

After the html tags you can insert any text including other tags effectively, given that
tags are opened and closed properly.

Let's see how this looks like in a web browser. Here you can see the title, "Hello!". And inside
the body it says
"Hello, World!". It's as simple as that.

If you want to look at the way this html page is structured, it is built in a tree like structure.

We call this document object model or DOM. Here is how the dom for this web page looks like.

In this tree like structure, html element stays as the parent. This parent element has two
children, head and body.
And head has another child, title which has the child "Hello". Similarly for the body element has
"hello world!" text as a child.

This DOM is useful when you go onto change the behaviour of the web page.

Here are some of the common html tags that you can use.
You'll learn about these in the coming weeks. They provide various functionailities.

Now that you have the structure, next step is to add some style to this. You can do this using
CSS or cascading Style sheets.
This is what this would look like. You can see that the font size of the body has changed.

These are some css properties that you can use.

Finally, you have to change the behaviour of the web page. To do that we use a programming
language like JavaScript.
We are not going to talk about this today. But it will be covered in a later lecture.

So as a recap, we talked about the anatomy of a web application such as the client - server
model and the http protocol.
Then we looked at designing a simple web page.

With this information, I believe now you can create a simple web page about yourself.

This will be the first assignment of this course.

Hope you learnt something useful today. We'll see you next time.
Thank you.