Maseno University
Department of Information Technology
CDIT 406: Web Authoring
[email protected]Introduction to web development
Web development – These are all the activities involved in building and
maintaining web applications for the world wide web. These range from small
static websites, web apps, e-commerce sites, online banking systems,
Progressive Web Apps etc.
Programmers use different programming languages to develop web
applications and websites. Web development could be categorised into two
1. Front end development/ client-side development- This is the
development of interfaces that users of websites/apps interact with. It’s
mostly concerned with taking care of layout, design, interactivity and
user experience. HTML, CSS and JavaScript are used.
2. Backend development - Back end is the server side of a web
application including methods and platforms for communication
between the database and the web browser. This kind of development
involves ensuring the data storage(database) and the application run as
needed and their interaction produce desired results. Programming
languages used include PHP, Ruby on Rails, Python and .Net
Full stack developers/development – This is a general development of both
front end and back end. (Full stack developers are familiar with both front
end and back end.
Browsers – An application computer is software used to retrieve, present, and
traverse information on the WWW/ simply put access resources from the
WWW. Web application are only accessible through. E.g. Firefox, Google
Chrome etc.
Request-Response Cycle
This is the process describing what happens when a computer requests a file
from a server on the web and the server responds with the appropriate file/s.
(what happens when you type something on the address bar of a browser and
hit enter)
Referring to networking - LAN, WAN, MAN etc one of the topologies is Client
server model as shown below.
Networks has both
1. Client Machines - Machines for personal use/used by network end
users
2. Server Machine – Machines in the network that contains shared
resources
From a client machine, a user types a web address called Uniform Resource
Locator (URL). An example of a URL is https://www.maseno.ac.ke/index.html
URLs contain three main parts
1. The protocol – In this case (https://www.maseno.ac.ke/index.html)
https. Protocols tells the browser how to connect and which protocol to
use when it accesses a page on a website.
2. The Domain - Where to find the document requested - maseno.ac.ke
– Domains identifies the entity you want to connect to. This contains
the top level domain and second level domain as determined by ICANN-
Internet Corporation for Assigned Names and Numbers
3. The document - What specific file is needed - index.html
URLs could also contain – Subdomain - https://ecampus.edutab.africa/ ,
subdirectory - https://www.edutab.africa/ecampus/ - Top Level Domain -
https://www.edutab.africa / https://www.google.com/ - Second-level
Domain - https://www.edutab.africa / https://www.google.com/
The protocols mostly used are –
http - Hypertext Transfer Protocol - information flowing from server to client
is not encrypted. Very insecure.
https - Hypertext Transfer Protocol Secure - HTTPS protocol is an
improvement of http by adding an SSL (secure sockets layer) certificate, which
helps create a secure encrypted connection between the server and the client,
thereby protecting potentially sensitive information from being stolen as it is
transferred between the server and the browser.
FTP – File Transfer Protocol - protocol used for the transfer of computer files
from a server to a client on a computer network.
IP address and Domain Naming Service (DNS)
There are two versions of IP versions
1. IPv4 – Uses a 32bit number format of XXX.XXX.XXX.XXX –
192.168.34.92 to uniquely identify each domain/device on the network.
The entire address pool is 2^32 unique addresses.
2. IPv6 - Uses a 128bit number format in hexadecimal separated into 8
groups of 16 bits by the colons eg
2001:0db8:3c4d:0015:0000:0000:1a2f:1a2b The entire address pool
would be 2^128 Ip addresses.
Each domain has its address as an IP address.
DNS – Looks up the domain you enter on the browser and returns an IP
address. Eg – https://www.maseno.ac.ke/index/ would return -
41.204.161.183 .
You can use - https://www.whatismyip.com/dns-lookup/ to check the IP
addresses of your favourite domains.
Recap: Overview
What happens if I type https://www.maseno.ac.ke
1. The browser looks up the domain in the DNS
2. The DNS returns the IP address: 41.204.161.183
3. The browser sends an HTTP request to the server located at that
address.
4. The server finds the requested file and sends it back as a response.
5. The browser takes the response and renders the HTML code as a nice
graphical presentation, often repeating steps 3 – 4 as needed to request
images and other supporting files.
Languages for web development
Front end languages include
1. HTML - Hyper Text Markup Language – This is the standard markup
language for developing Web pages. The building blocks of HTML pages
are the HTML elements (paragraphs, tables, headings etc) which are
represented by <> tags (<p> paragraph </p>
2. CSS - Cascading Style Sheets. Scripting language that describes how
HTML elements are to be displayed. Adds more visual appeal and
styling to webpages.
3. JavaScript - A programming language for adding interactivity in
webpages. It also can calculate, manipulate and validate data.
Text editors/IDEs
To write this code you need an IDE or a text editor. These help you author the
web pages as desired. We will use Visual Studio Code in this course for
authoring web pages.
If you do not have a computer – You can use this mobile text editor (Acode) -
https://bit.ly/33TNuts that will enable you write html.
Version Control
Version control is the practice of tracking and managing changes to software
code.
Similar to documents, whilst writing a report, you start by adding first few
paragraphs and save the report say report14052021.docx meaning that it’s
the initial report. Three days later you edit the report by adding two
paragraphs and save it as – report14052021.docx – This will replace the old
report. To have both reports you would have to save the new report with a
new name say –report17052021.docx- In this context then you would have
two versions of document – one with initial paragraphs and the other with
initial paragraphs and the new paragraphs.
Software development is a continuous process and source code keeps on
changing. Version control system helps us keep the history of edits on a
source code file without having to keep multiple files.
We will use Git and GitHub as our Version Control Systems(VCS) in this
course. Have a read on VCS - Getting started with Version Control Systems-
GitHub - https://git-scm.com/book/en/v2