Web Development Introduction

Theory lecture in Web Development Course for Cybersecurity student program.

2024 By Bakeel Azman

 Objectives

 Study the history of the World Wide Web

 Review the basics of how to create Web pages
 Work with structured Web pages
 Study Web development

ALshmowkh dev.
What will we learn?

 Develop website
 Coding web page
 Interactive dynamic pages

ALshmowkh dev.
To build a website you must learn:

 Mainly
 HTML
 CSS
 JavaScript
 Secondary
 React
 Angular
 Nodejs

ALshmowkh dev.
Terminology
 Name of course description
 Why should the cybersecurity student learn this course?
 What is:
 Browser
 Web
 Web page
 Website  Addressing
 Net  Link or URL
 Network  Protocol
 Internet  http(s)

 Access web  Client-server

ALshmowkh dev.
Understanding Web Development

 Web development, or Web programming, refers to the design of software applications for a Web site
 The Webmaster is responsible for:
 The day-to-day maintenance of a Web site
 Monitoring Web site traffic and ensuring that the Web site’s hardware and software are running properly
 Knowledge of Web page design, authoring, and development

ALshmowkh dev.
 Introduction to Web Development

 In 1990 and 1991,Tim Berners-Lee created the World

Wide Web at the European Laboratory for Particle
Physics (CERN) in Geneva, Switzerland
 The original purpose of the World Wide Web
(WWW) was to provide easy access to cross-
referenced documents that existed on the CERN
computer network
 Hypertext linking allows you to quickly open other
Web pages

ALshmowkh dev.
Web

World Wide Web (WWW) : is a system that interconnect

resources such as documents , files and images on the
internet via hyperlinks and we can access these resources
using the web browsers .

Resources are presented in webpages.

We create webpages using HTML , CSS and programming languages

such as java and PHP.

So this is the reason why you’re here ! To learn how to build webpages
(Website) to share some resources and services on the web.
j
Remember that : Internet and web are different.

ALshmowkh dev.
 Introduction to Web Development

 A document on the Web is called a Web page

 A Web page is identified by a unique address called
the Uniform Resource Locator (URL)
 A URL is also commonly referred to as a Web
address
 A URL is a type of Uniform Resource Identifier (URI)
 A Web site refers to the location on the Internet of
the Web pages and related files

ALshmowkh dev.
 Introduction to Web Development

 Web pages are displayed using a program called a

Web browser
 A Web server is a computer that delivers Web pages
 The most popular Web server software is Apache
HTTP Server (Apache)
 The second most popular Web server is Microsoft
Internet Information Services (IIS) for Windows

ALshmowkh dev.
Client / Server Architecture

What is the Client ?

What is the Server ?

 Client / Server Model

ALshmowkh dev.
 The Internet and the Web

• The Internet is a network of connected computers with many

protocols available to transfer information – email, ftp, etc.

• World Wide Web is the linkage of documents using hypertext links

(and hence hypertext transfer protocol and HyperText Markup
Language - HTML).

• The World Wide Web was invented by English scientist Tim Berners-
Lee in 1989 while working for CERN.

ALshmowkh dev.
Web 2.0 and Web 3.0

• Web 1.0 was a web of documents, of static pages, of few publishes

and many consumers.

• Web 2.0 is a web of dynamic pages, rich media applications, web-

oriented architecture, mass participation in content creation and
social media. This is where the web as we know it began!

• Web 3.0 is the Semantic Web – where automated agents can access
the web intelligently through understanding the meaning of content,
etc., and achieved through meta-data

ALshmowkh dev.
 Browser and Servers

• Servers are computers which host the files and data required to
present websites (These are normally in the form of Web Hosting).

• Browsers allow users to navigate the world wide web using a GUI.
While headless browsers exist they are uncommon for the general
consumer.

• Most common browsers are Google Chrome, Firefox, Safari and

Edge. Other browser such as Opera exist, but their usage is
minimal in comparison.

ALshmowkh dev.
Web page vs Website

Web page: is a file that may contains text , graphics , etc…

We create Webpages using markup language such as

HTML.

Website : group of interlinked related well-structured

webpages that exists on the same domain.

Domain examples :google.com-VisionAcademy.online

ALshmowkh dev.
Domain Names

• A Domain Name is a user-friendly means of allowing users to

access content on the World Wide Web.

• Without domain names a user would need to enter the IP address

of the web server to gain access to the content.

• A domain includes a name and extension. Often the extension

represents either the type of website or the country in which the
content is targeted towards.

ALshmowkh dev.
Domain Names Cont

• Some domain names are open to all (e.g. .com, .net, .co.uk etc).

• Some domains are restricted to residents of the country (e.g. .fr)

• Some domains are restricted to government agencies or education

institutions (e.g. .gov, .gov.uk, .edu, .ac.uk).

• Sometimes a domain extension isn’t used as intended. For example

the domain extension .io is often used for tech companies.
However, it’s also the official domain extension for the British
Indian Ocean Territory.
ALshmowkh dev.
Web Communication Protocols

 A Web page is identified by a unique address called

the URL
 Each URL consists of two basic parts:
A protocol (usually HTTP) and
Either the domain name for a Web server or a
Web server’s Internet Protocol address
 Hypertext Transfer Protocol (HTTP) manages the
hypertext links that are used to navigate the Web

ALshmowkh dev.
Web Communication Protocols
 A host refers to a computer system that is being
accessed by a remote computer
 A domain name is a unique address used for
identifying a computer such as a Web server on the
Internet
 The domain identifier identifies the type of
institution or organization (.biz, .com, .edu, .org)
 An Internet Protocol, or IP address, is another way to
identify computers or devices connected to the
Internet

ALshmowkh dev.
Web Communication Protocols

 An IP address consists of a series of four groups of

numbers separated by periods
 Each Internet domain name is associated with a
unique IP address
 HTTP is a component of Transmission Control
Protocol/Internet Protocol (TCP/IP)
 Hypertext Transfer Protocol Secure (HTTPS)
provides secure Internet connections for transactions
that require security and privacy

ALshmowkh dev.
 Web Communication Protocols

http://www.google.com/help/index.html

Protocol Domain name Directory Filename

Sample URL

ALshmowkh dev.
Web Communication Protocols

 A Web page is identified by a unique address called the URL

 Each URL consists of two basic parts:
 A protocol (usually HTTP) and
 Either the domain name for a Web server or a Web server’s Internet Protocol address
 Hypertext Transfer Protocol (HTTP) manages the hypertext links that are used to navigate the Web

ALshmowkh dev.
 Front-end Developer

• Front-end developers are responsible for any front-end

technologies. These include:
HTML
CSS
JavaScript

• It is unusual for a front-end developer to have to interact with

server- side code (such as PHP, Perl or .NET).

ALshmowkh dev.
Back-end Developer Server-side Developer

• A Back-end developer is responsible for most of the logic and the

accessing/interpretation of data from a source (e.g. a MySQL
database).

• Back-end developers will normally focus the majority of their

knowledge on a single server-side language such as PHP, Perl or
.NET.

• It’s expected that back-end developers also have some

understanding of HTML, CSS and JavaScript. However, this
knowledge won’t be as significant as front-end developers.
ALshmowkh dev.
Full-stack Developer

• A full-stack developer is a combination of the front-end and

back-end developer roles.

• A full-stack developer should be able to use:

HTML
CSS
JavaScript
A server-side language such as PHP, Perl or .NET

• Many freelancers are full-stack developers. You’ll be taught to

be a full- stack developer as part of this course.

ALshmowkh dev.
Really, it depends where you work…

• Most Web Agencies tend to have less precise job roles. Whereas a
company developing in-house software is likely to have more
specific roles.

• You will normally find yourself falling into one of these roles as you
develop as an expert in the field. For example, if you find yourself
enjoying CSS and JS then it’s probably likely you’ll be a front-end
developer.

ALshmowkh dev.
 Which editors/IDEs should you be using?

• choose from one of the following:

• Notepad
• Notepad++
• Visual Studio Code
• Atom
• Brackets
• Sublime Text

ALshmowkh dev.
Web page main areas

1. Banner
2. Header
3. Side panel
1. Left side
2. Right side
3. Top
4. Bottom
4. Body
5. Footer

ALshmowkh dev.
What we need to build a web app

 Frontend tools
 Html
 CSS
 JavaScript
 Backend
 Nodejs, php or python
 Database

ALshmowkh dev.
HTML
 Introduction to HTML

• HTML stands for “Hypertext Markup Language”.

• Web browsers receive HTML documents from a web server. The

HTML markup describes the structure of a web page semantically.

• The HTML syntax includes a range of tags. These tags are often
treated differently by the web browser and can be used to describe
the content of “blocks” on the page.

• For example, an <img> tag is used to represent an image.

ALshmowkh dev.
 Working with Well-Formed Web Pages

 HTML became an Internet standard in 1993 with the

release of version 1.0
 The current version of HTML (4.01) was released in
1999
 HTML 4.01 is the last version of the HTML language
and is being replaced with extensible hypertext
markup language (XHTML)
 HTML is not suitable for user agents other than Web
browsers

ALshmowkh dev.
Basic HTML Syntax

 HTML documents are text documents that contain formatting instructions called tags
 HTML tags include:
 Formatting commands (boldface or italic)
 Controls that allow user input (option buttons or check boxes)
 Tags are enclosed in brackets (< >) and consist of an opening tag and a closing tag
 Tutorial for learning HTML
 http://www.htmldog.com/
 http://www.w3schools.com/html/DEFAULT.asp

ALshmowkh dev.
 HTML Tags and Structure

• HTML tags are almost always split into opening and closing
tags. Within these two tags you would add the content. For
example…

• <div> Hello world </div>

• Some HTML elements are self closing. For example…

• <img src=“img.jpg”/>

• HTML Tags can be nested

ALshmowkh dev.
HTML Skeleton
 <!DOCTYPE html> Document type definition
 <html> Root HTML tag
 <head>
Head tag
 <meta charset="utf-8">
Character set to use
 <title></title>
Document title
 </head>

 <body> Document body

 <p>Hello, world!</p> Paragraph element
 </body>
 </html>
ALshmowkh dev.
 HTML Attributes

• HTML elements can have attributes.

• Attributes provide extra information about an element.

• Attributes are always set in the opening tag.

• They follow a name/value format.

• Use double quotes. <p width=“100”>Hello World</p>

ALshmowkh dev.
 HTML Elements - Paragraph

• <p>Text goes here</p>

• Block element

• May contain text, images and other inline elements.

• Should not contain headings, lists etc (block

elements)

ALshmowkh dev.
 HTML Elements - Headings

• <h1>Text goes here</h1>

• Block element

• H1 is top level and the largest font size, H6 is the bottom level
and smallest font size.

• Each page on a website should only have one H1 tag (for SEO
purposes)

ALshmowkh dev.
 HTML Elements - Lists

• <ul>
• <li>Text goes here</li>
• </ul>

• Unordered lists (UL) are used for a collection of items that appear
in no particular order.

• Ordered lists (OL) are used for lists where the sequence is
important (e.g. tutorial steps)

ALshmowkh dev.
 More inline elements

Tag Description
<a href=“”> … </a> Link
<br/> Page break
<code> … </code> Computer code sample
<em> … </em> Emphasised text
<u> … </u> Underlined text
<i> … </i> Italic
<b> … </b> Bold
<strong> … </strong> Bold – for emphasis
<small> … </small> Small print

ALshmowkh dev.
HTML

 Tags:
 https://www.w3schools.com/tags/default.asp
 https://www.w3schools.com/tags/ref_byfunc.asp

 attributes:
 https://www.w3schools.com/tags/ref_attributes.asp
 https://www.w3schools.com/tags/ref_standardattributes.asp

 Events:
 https://www.w3schools.com/tags/ref_eventattributes.asp

ALshmowkh dev.
Page layout desgin

 Methods
1. Table
2. Frame
3. Flex
4. …

ALshmowkh dev.
HTML Layout Elements

HTML has several semantic elements that define the different parts of a web page:

 <header> - Defines a header for a document or a section

 <nav> - Defines a set of navigation links
 <section> - Defines a section in a document
 <article> - Defines an independent, self-contained content
 <aside> - Defines content aside from the content (like a sidebar)
 <footer> - Defines a footer for a document or a section
 <details> - Defines additional details that the user can open and close on demand
 <summary> - Defines a heading for the <details> element

ALshmowkh dev.
 HTML Elements - Headings

<h1>Text goes here</h1>

• Block element

• h1 is top level and the largest font size, h6 is the bottom level and
smallest font size.

ALshmowkh dev.
DOM

 What You Will Learn

 In the next chapters of this tutorial you will learn:
 How to change the content of HTML elements
 How to change the style (CSS) of HTML elements
 How to react to HTML DOM events
 How to add and delete HTML elements

ALshmowkh dev.
CSS

 Work without CSS in the beginning

 CSS is just to styles

 CSS properties:
 https://www.w3schools.com/cssref/css_selectors.php
 CSS selector:
 https://www.w3schools.com/cssref/css_selectors.php

ALshmowkh dev.
Introduction to HTML5

• HTML5 is the latest evolution of the standard that defines

HTML.

• The standards can be represented in two parts:

A range of new elements, attributes and behaviours.
A larger set of technologies.

• We’ll now go through some of the updates included in

HTML5…

ALshmowkh dev.
 HTML5 Semantics

• One of the major improvements in HTML5 was the introduction

of further “semantic elements”.

• Semantic elements are HTML elements where the name of the

element explains it’s content.

• They include:
<header>, <footer>, <aside>, <nav>
<audio>, <video>, <picture>
<progress>, <time>, <date>, <address>, <figure>

ALshmowkh dev.
XHTML Document Type Definitions (DTDs)

 A well-formed document must include:

 <!DOCTYPE> declaration
 <html>, <head>, and <body> elements
 A document type definition (DTD) defines:
 The elements and attributes that can be used in
a document
 The rules that a document must follow when it includes them

ALshmowkh dev.
 Then there’s JavaScript…

• JavaScript confuses the matter further as many websites now

make use of advanced JavaScript frameworks which require the
skills commonly associated with a back-end developer.

• JavaScript can also be used as a back-end technology in the form

of NodeJS. Therefore, you can technically develop everything in
JavaScript!

ALshmowkh dev.
JavaScript and Client-Side Scripting

 JavaScript allows you to:

 Turn static Web pages into applications such as games or calculators
 Change the contents of a Web page after a browser has rendered it
 Create visual effects such as animation
 Control the Web browser window itself

ALshmowkh dev.
Publishing Your Web Site

 Web Hosting:
 The publication of a Web site for public access
 Internet access (cable modem, DSL, satellite, dial-up modem, ISP)
 Internet Service Provider (ISP):
 Provides access to the Internet along with other types of services such as e-mail

ALshmowkh dev.
Publishing Your Web Site (continued)

 ISP advantages to hosting a Web site:

 Extremely fast Internet connections using advanced fiber-optic connections
 Large and powerful Web servers and the expertise and manpower to maintain and manage them
 A domain name is a unique address used for identifying a computer, such as a Web server on the Internet

ALshmowkh dev.
Publishing Your Web Site

 Domain name registration

 Pick a domain name that is similar to your business name or that describes your Web site
 You cannot use a domain name that is already in use or a trademarked name
 Contact a domain name registrar to find out the availability of a domain name and register it
 Domain names are stored in a master database that is maintained by the InterNIC

ALshmowkh dev.
Publishing Your Web Site

 Domain name registration (continued)

 For a fee, domain names can be registered for a specified period of time
 Most hosting sites provide registration service for you
 After you register your domain name, notify your ISP of your domain information

ALshmowkh dev.
Publishing Your Web Site

 File Transfer Protocol (FTP)

 Is a TCP/IP protocol used for transferring files across the Internet
 Transfers files between an FTP client (your computer) and an FTP server (a server capable of running FTP)
 The vehicle that allows you to get your Web page files to the Web server

ALshmowkh dev.
Publishing Your Web Site

 File Transfer Protocol (continued)

 Your ISP provides a username and password to log on to the FTP site and upload files to the FTP server
 Examples of FTP clients include Firefox and Internet Explorer and WinScp
 Use your browser to log on to an FTP server and upload your files

ALshmowkh dev.
How to build a web app
How to make a web app in 12 steps (4 stages):

 Ideation stage  Development stage

 1. Source an idea  8. Architect your database
 2. Market research  9. Develop your frontend
 3. Define functionality  10. Build your backend
 Design stage  Launch stage
 4. Sketch your web app  11. Host your web app
 5. Plan your workflow  12. Deploy your web app
 6. Wireframe the UI
 7. Seek early validation

ALshmowkh dev.
Web development process

ALshmowkh dev.
Textbooks Candidate

1. Learning Web Design: A beginner’s Guide To HTML, CSS, Javascript, and Web Graphics
2. Front-End Web Development
3. Sams Teach Yourself HTML, CSS, and JavaScript All in One, Third Edition by Julie C. Meloni, Jennifer Kyrnin

ALshmowkh dev.
 Class project

• In each class you will be given activities which together form a

complete website.

• The website you will be creating is a portfolio.

• While the activities should provide you with a basic structure. It is

expected that you’ll go beyond these.

• You are expected to complete all these activities. Additional support for
content covered in activities won’t be provided for those who don’t
complete the activities!

ALshmowkh dev.
 Assessments

• This class features one main assessment:

• Final Portfolio Website and Report – 30%

ALshmowkh dev.
 Assessment

• You should use the techniques you have learnt during the in-class
activities to complete this assessment.

• As part of this submission you are required to complete a report.

• The grade for this assessment is worth 30% and you have 2,000 words
for the report component.

ALshmowkh dev.