Topic 1 - Module Overview

ECS417U - Fundamentals of Web Technology

School of Electronic Engineering and Computer Science
 Dr Usman Naeem

Educational
Machine Learning
Technologies

Learner Engagement
Analytics

Context Awareness

[email protected]
Gami cation
O ce Hours
By appointment or Wednesday
Mobile Sensing 10.00am (PP.5.01)
School of Electronic Engineering and Computer Science
2
ffi
fi
Agenda
• Introductions

• What is the module about & module

information
• Module Organisation
• Topic schedule
• Module texts
• Assessment

• Introduction to World Wide Web

School of Electronic Engineering and Computer Science 3

Learning Objectives
On completion of this topic, you will be able to:

• Understand the module structure and

deliverables

• Summarise the history of the Internet and

World Wide Web

• Outline the concepts and protocols that

support the Internet

• Describe the hardware and software

components that support the Internet

• Explain how a web page is retrieved and

interpreted

School of Electronic Engineering and Computer Science 4

Session Etiquettes
• In EECS, we want to ensure that you have a
fantastic and productive learning experience
during your lecture sessions.

• In order to do so, it is extremely important that

you:
• Be punctual
• Please do not speak over each other!
• Be respectful to academics and fellow
students
• Ask relevant questions to make the most out
of the session
• Be mindful of your language when posting
questions/ comments

• Failure to do so could lead to disciplinary action.

School of Electronic Engineering and Computer Science

5
Interactive Lecture Session
• Bring your laptop
• Make sure it is charged

• Join the Teams group to post questions

• Microsoft Teams - 85cexv9

Visual Studio Code

Posting a Question
• In order to get your question answered Waleed Iqbal

during the session, you will need to post it on

MS Teams dedicated lecture channel (e.g.
Week 1 Lecture)

School of Electronic Engineering and Computer Science 6

Waleed Iqbal - Teaching Fellow

[email protected]

School of Electronic Engineering and Computer Science 7

 Module Team - Demonstrators

Abdul Rahmatzada Iis Amelia Hussain Christos Loucaides Conor Venus Davina Naran Hesham Ahmed Ilenia Maietta

Ivan Konakotin Lewis Day Nazmus Saqib Nicolae Savin Patryk Kuchta Oryna Goichuk Robert Karapetian Rohail Ramesh

Roman Pretty Saloni Desai Saloni Salian Taylor-Mae Dodd Vaishnavi Dipakkumar Zunaira Nadeem
How can you get in touch with
module team to ask a question?
• During the lecture session, you can post your
questions to the moderator, who will then pass these
on to the lecturer during the session.

• During the scheduled lab sessions you can ask the

teaching team for help during the scheduled lab
sessions using an online form, where you will be able
to initiate contact with them.

• The student forum on QMPlus can be used to ask a

question. You are encouraged to post to this forum
and it will be checked regularly by the module team.
Please feel free to reply to other students if you are
able to.

• You can also contact the module team by email, and

if necessary request a meeting. The module team will
respond to emails within three working days (excluding
weekends). Unfortunately, we cannot guarantee an
immediate response.

School of Electronic Engineering and Computer Science 9

What the module is about
& module information

School of Electronic Engineering and Computer Science 10

Module Aims
• The aim of this module is to provide you with
a basic understanding of the operation of the
World Wide Web and teach you practical
skills for programming the Web.

• You will gain hands-on experience using

web programming languages and
technologies.

• You will also develop an understanding of

essential programming concepts, such as
a mark-up language for text layout design
and a scripting language.

School of Electronic Engineering and Computer Science 11

Module Learning Outcomes
By the end of the module you will be able to:

• Understand issues surrounding the

technical development of web services.

• Undertake basic programming using a

range of common web languages.

• Understand programming concepts of

markup and scripting languages.

• Apply programming concepts of event-

driven computation.

School of Electronic Engineering and Computer Science 12

Module Expectations
• The module is NOT a web-design course
• It DOES NOT have the scope to cover
advanced web programming topics
• Those topics will be covered in a 3rd year
module: ECS639U Web Programming,
including
• Python, Django, Javascript, jQuery and
HTML
• So don’t expect that it will cover everything
and to the most advanced level
• It is designed to cover as broad as
possible but at the minimum depth.

School of Electronic Engineering and Computer Science 13

 Why ECS417U?
• The World Wide Web (WWW) is one of most
signi cant inventions in human history.

• An EECS graduate should and must know

how it works and how to program it.

• What you will learn from this course alone

(plus ECS639U) may land you a job in the
future.

• Or at least a Lab Demonstrator job for this

module next year and the year after.

School of Electronic Engineering and Computer Science 14

fi
Web Professional
The ability to code using HTML is essential for
any web professional.

Modern Web Design

• Structure: HTML
• Presentation: CSS
• Behaviour: JavaScript:
• Backend: PHP or similar

School of Electronic Engineering and Computer Science 15

Module Organisation
• Lectures will take place every Thursday
• 1.00pm to 3.00pm - Great Hall

• Lab Sessions (30th January 2024) - Temporary ITL Building

• Each of you has been assigned to one of the three sessions/
groups
• 10.00am to 12.00pm
• 12.00pm to 2.00pm
• 2.00pm to 4.00pm

• Week by week activity is outlined in the Module Handbook

• Please check your QMPlus+ account regularly for slide handouts,
lab exercises and more information.

School of Electronic Engineering and Computer Science 16

Lecture Interaction and
Engagement
• QMplus and Mentimenter - in class quizzes

• Login to Microsoft Teams to engage with the

in class exercises. Joining code: 85cexv9

• Engagement Challenge - ranking of how well

you are engaging with the module:
• This does not count towards the nal mark
of the module - just a bit of competitive
fun!

• The lectures will also be making extensive

use of codepen.io to demonstrate the real-
time output of markup changes.

School of Electronic Engineering and Computer Science 17

fi
 Lab Sessions
• Of cially start next Tuesday 30th January 2024

• Opportunity to reinforce the content that was delivered in the lecture sessions by working on the weekly lab
exercises.

• These sessions will provide you with an opportunity to:

• Attempt the weekly lab exercises.
• Ask demonstrators for clari cation/support on the weekly exercises.
• Get your weekly exercises assessed by a member of the module team. [via Microsoft Teams]

• Interaction with the module team will be done using an online form.

• Once you have lled in the form (during your lab session) to request support or con rm that you are ready
to be assessed then you will be contacted by a member of the module team via Microsoft Teams or they
will come to your location in ITL (you will need to provide this information in the online form).
• Please ensure that you have downloaded Microsoft Teams application and your are logged in.

School of Electronic Engineering and Computer Science 18

fi
fi
fi
fi
 Campus - Temporary ITL
All assessment is
Lab Session Starts
conducted
over MS Teams,
Attend Brie ng on
MS Teams
hence bring
headphones/
headset.
Attempt Lab
Exercises

No
Exercise
Need Support?
Completed?

Yes Yes

You will need to con rm your location (A map with Complete Lab Complete Lab
locations will be provided in the interaction form) Interaction Form Interaction Form

A member of the
A member of the module team will come to your Module team will module team will Module team will
location to provide support with the lab exercises contact you contact you via MS contact you
Teams

School of Electronic Engineering and Computer Science 19

fi
fi
Lab Structure

• Open the ‘Microsoft Teams’ application at the beginning

of the session

• Attend your dedicated group’s channel at the start of the

lab session

• 5 - 10 minutes - Usman will give a brie ng and discuss

expectations of the lab session exercises.

• You will then work on the weekly exercises.

• Interaction with the module team will be done using an
online form.
School of Electronic Engineering and Computer Science 20
fi
 How can I get the most out of the weekly content?
Step 1 - Watch the interactive videos before the live
lecture session.

Step 2 - Attend the live lecture sessions in the Great Hall.

Step 3 - Attempt the post live lecture session exercises,

which will include lab exercises and some interactive
content.

If you are expected to start or complete these exercises

in the lab session then this will be represented by the
purple lab session icon:

If the exercise will be assessed or will count towards your

nal module mark then this will be represented by the
pink assessment icon:

School of Electronic Engineering and Computer Science 21

fi
Topic Schedule

1 Introduction to World Wide Web

2 Introduction to Hypertext Markup Language

3 Introduction to Cascading Style Sheets

4 HTML Tables and Forms

5 Advanced CSS - Layout

6 Introduction to Client Side Scripting - JavaScript

7 JavaScript

8 Introduction to Server-Side Processing with PHP

9 PHP Arrays and Superglobals

10 Deployment and Beyond

School of Electronic Engineering and Computer Science 22

Module Reading
• Essential Reading
• Connolly R and Hoar R, 'Fundamentals of
Web Development, 3rd Edition’, Global
Edition, Pearson, ISBN-10: 0135863570,
2022.
• Connolly R and Hoar R, 'Fundamentals of
Web Development', Global Edition,
Pearson, ISBN-10: 1292057092, 2014.
Developer Documentation (Important)
• Highly Recommended Reading
• Foster J, ’HTML & CSS for Beginners: • https://developer.mozilla.org/en-US/docs/Web/HTML
Learn the Fundamentals of Computer
Programming’, ISBN-10: 191315114X, • https://developer.mozilla.org/en-US/docs/Web/CSS
2020 - Recommended
• McGrath M, ‘HTML, CSS and JavaScript in • https://developer.mozilla.org/en-US/docs/Web/JavaScript
Easy Steps’, Special Edition, ISBN-10:
184078878X, 2020 - Recommended • https://www.php.net/docs.php

School of Electronic Engineering and Computer Science 23

Resources
A text and source code editor

Visual Studio
Code
A browser - Google Chrome

https://console.d.comp-teach.qmul.ac.uk

School of Electronic Engineering and Computer Science 24

Week 1 Lab - 30th January 2024
• This is an opportunity for me to meet all of you!

• The aim of this lab session is to ensure that you have set up your development
environment on your machine.

• It is strongly recommended that you use your laptop for the web development
work.

1. Install Visual Studio Code

2. Install Microsoft Teams

3. Setup GitHub CoPilot

4. Contact Module Team https://education.github.com/pack

School of Electronic Engineering and Computer Science 25
Assessment
Will be based on Weekly Lab Exercises
30%
• Weekly Lab Exercises – worth 30% of your marks

• Project Assessment – worth 70% of your marks

• You must achieve an overall module mark of 40%

Project Assessment
70%

School of Electronic Engineering and Computer Science 26

Weekly Lab Exercises - 30%
• Weekly Lab Exercises – 25%

• Weekly Review Questions – 5%

School of Electronic Engineering and Computer Science 27

Weekly
Lab Exercises - 25%
• You will need to complete a series of weekly lab
exercises during the rst seven weeks of this module.

• These tasks will be based on the practical content

introduced in the lecture sessions.

• The marking scheme for these exercises will be included

within the lab exercise sheets, which are all available on
QMPlus.

• The assessment of your lab exercises will take place

during your allocated lab sessions.

• For each of the weekly lab exercises, you will have a

three-week window to get your work assessed by the
demonstrators.

• During this assessment, you will be required to turn on

your camera for veri cation purposes. So please ensure
you have your ID card to hand, so that the assessor can
verify your identity.

School of Electronic Engineering and Computer Science 28

fi
fi
Weekly
Lab Exercises - 25%
• Do not leave the assessment of your lab
exercises to the last moment, as
demonstrators will only be able to assess
your work within the rst hour and half hour of
the lab session, as your work will not be
assessed after this period.

• So if you do not get assessed within this time

frame, then you will get a ZERO for that
exercise.

• You can only have your assessment

conducted during your allocated lab sessions.

• Once the assessment has started, you cannot

make any changes.

School of Electronic Engineering and Computer Science 29

fi
Weekly
Review Questions - 5%
• You will also be expected to watch a series of
weekly videos on QMPlus (before or after the
lecture), which will include review questions
that you will need to answer by the end of
that week.

• The purpose of this is to assess if you are

engaging and understanding the module
content.

School of Electronic Engineering and Computer Science 30

Project - 70%
• This assessment will require you to create a
portfolio website that will showcase your
skills to potential employers.

• The site will need to include a simple tool for

writing and reading a weblog (blog).

• To complete this project, you will need to

work on the mini project on a weekly basis,
as the content you cover in the lab sessions
will enable you to build your portfolio website
progressively over the 12 weeks of this
module.
Task for this week
Read the Coursework Assessment
• Added value
Guide
• Employability

School of Electronic Engineering and Computer Science 31

Project - 70%

• Phase 1 - Front End – 15%

• The module team will assess the HTML5 and CSS aspects of the project.
This assessment will be conducted between weeks 9-11 (you will be
allocated an assessment slot on QMPlus), and you will need to submit
the URL of your portfolio by 18/03/2024 - 10.00AM (UK time).

• Phase 2 - Server and Client Side Processing – 55%

• The module team will assess the JavaScript and PHP aspects of the project.
This assessment will be conducted during the period 22nd April to 10th
May 2024, and you will need to submit your updated portfolio code les
and documentation by 19/04/2024 - 10.00AM (UK time).

School of Electronic Engineering and Computer Science 32

fi
 Assessment Breakdown
Assessment % Assessment Window/
Deadline Date Topic No. Lab Exercises - Assessment
Breakdown Submission Location
Every Week Weekly Questions - QMPlus 5% Deadline: Every Friday - 10.00am QMPlus
Code Submission Deadline: 12/02/2024
12/02/2024 2 HTML Basics 4%
Assessed in Week 3 to 5 - Lab Session
Code Submission Deadline: 19/02/2024
19/02/2024 3 CSS Basics 4%
Assessed in Week 4 to 6 - Lab Session
Code Submission Deadline: 26/02/2024
26/02/2024 4 HTML Tables and Forms 5%
Assessed in Week 5 to 7 - Lab Session
Code Submission Deadline: 04/03/2024
04/03/2024 5 Advanced CSS (Layout) 6%
Assessed in Week 6 to 8 - Lab Session
08/03/2024 - Generative AI Tools 3% Lab Sheet Submission Deadline: 08/03/2024
08/04/2024 - Virtual Experience 3% Certi cate Submission Deadline: 08/04/2024
Assessment Component 001 Total 30%
Front End Assessment Code Submission Deadline: 18/03/2024
18/03/2024 15%
Component 002 Assessed in Week 9, 10, 11 - Lab Sessions
Project Code and Documentation Submission Deadline: 19/04/2024
Client and Server Side Assessment
19/04/2024 55%
Component 003
Viva will be scheduled between 22nd April and 10th May 2024
Project Assessment Total 70%
Module Assessment Total 100%

School of Electronic Engineering and Computer Science 33

fi
Week
Week
Comm.
Lab Date
Lab Session Activities
Tuesday
Lecture Date
Lecture Topic
Thursday Module
Calendar
1 22/01/2024 N/A No Lab Session 25/01/2024 1. Module Overview & Introduction to the WWW
2 29/01/2024 30/01/2024 Introductions and Setup 01/02/2024 2. Introduction to HTML
2. HTML Basics Lab Exercises
L
3 05/02/2024 06/02/2024 Code Submission Deadline: 12/02/2024 08/02/2024 3. Introduction to CSS
A HTML Basics
3. CSS Basics Lab Exercises
L
4 12/02/2024 13/02/2024 Code Submission Deadline: 19/02/2024 15/02/2024 4. HTML Tables & Forms
A CSS Basics HTML Basics
4. HTML Tables and Forms Lab Exercises
L
Code Submission Deadline: 26/02/2024
5 19/02/2024 20/02/2024 22/02/2024 5. Advanced CSS - Layout
HTML Tables &
A CSS Basics HTML Basics
Forms
5. Advanced CSS Lab Exercises
L
6 26/02/2024 27/02/2024 Code Submission Deadline: 04/03/2024 29/02/2024 Project Assessment, Virtual Experience and Generative AI Tools
A Advanced CSS HTML Tables & Forms CSS Basics
A Advanced CSS HTML Tables & Forms
7 04/03/2024 05/03/2024 N/A No Lecture
A Generative AI Tools
8 11/03/2024 12/03/2024 A Advanced CSS 14/03/2024 6. Introduction to Client Side Scripting - JavaScript
L 6. Introduction to JavaScript

9 18/03/2024 19/03/2024 Project Front End Assessment - 15% 21/03/2024 7. JavaScript

A Code Submission Deadline: 18/03/2024
Assessed in Week 9, 10, 11 Lab Sessions
L 7. JavaScript
10 25/03/2024 26/03/2024 28/03/2024 8. Introduction to Server Side Processing - PHP
A Project Phase 1
L 7. JavaScript 8. Introduction to PHP
11 01/04/2024 02/04/2024 04/04/2024 9. PHP Arrays & Superglobals
A Project Phase 1
12 08/04/2024 N/A No Lab Session 11/04/2024 10. Deployment and Beyond
Project Client and Server Side Assessment - 55% L Lab Session Exercises
A Submission Deadline: 19/04/2024
Viva will be scheduled between 22nd April to 10th May 2024 A Assessment

School of Electronic Engineering and Computer Science 34

Introduction to World Wide
Web

School of Electronic Engineering and Computer Science 35

Introduction to World Wide
Web
• How does the web work?

• Client-Server Model

• Concepts and Protocols

• Hypertext Transport Protocol (HTTP)

• Post Session and Weekly

engagement questions

• History of the Internet and World

Wide Web

• HTTP Request, Response and

Headers
School of Electronic Engineering and Computer Science 36
 What is the Internet?

School of Electronic Engineering and Computer Science 37

Client-Server Model
• In the client-server model, there are two types
of actors: clients and servers. Request

• The server is a computer agent that is Client

normally active 24 hours a day, 7 days a week
(or simply 24/7), listening for queries from any
client who make a request.

• A client is a computer agent that makes

requests and receives responses from the
server, in the form of response codes, Response
images, text les, and other data.
Server

• The client initiates a request to a server and

gets a response that could include some
resource like an HTML le, an image or some
other data.

School of Electronic Engineering and Computer Science 38

fi
fi
Server Types
• Web servers
• Services HTTP requests, e.g. Apache or Microsoft
IIS (internet Information Services)

• Application servers
• Hosts and executes web applications, e.g. PHP,
ASP.NET

• Database servers
• Runs a Database Management System (DBMS),
e.g. MySQL

• Mail servers
• Creates and satires mail requests, e.g. Simple Mail
Transfer Protocol (SMTP)
In smaller sites, these specialty
• Media servers servers are often the same
• Servicing requests for images and videos, e.g. Plex machine as the web server.
• Authentication servers

School of Electronic Engineering and Computer Science 39

How does the Web work?
• Web information is stored in the form of web pages

• Web pages are stored in the computers called Web servers.

• The computers reading the pages are called Web clients.

• A Web browser is software used by an end user to access the Web.

• The web server waits for the request from the web clients over the
Internet.
• Communication is via Hypertext Transport Protocol (HTTP)
• Document representation using Hypertext Markup Language
(HTML)

School of Electronic Engineering and Computer Science 40

 How does the Web work? What is the role of a Web Client?
Reformat the URL entered as an HTTP request Establish TCP connection to the
server using IP address

Send the HTTP request over

TCP and wait for server
response

Web Client

Convert host name to IP address using DNS

School of Electronic Engineering and Computer Science 41
 How does the Web work? What is the role of a Web Server?
Map requested URL to speci c Receive HTTP request via TCP
resource associated with the
virtual host

Log information

Web Server
Map host header to speci c virtual host
Map type of resource to appropriate MIME type
School of Electronic Engineering and Computer Science 42
fi
fi
How does the Web work?

3
1 http://www.eecs.qmul.ac.uk
URL
OK

HTTP request

GET

Web Client
Web Server 2

School of Electronic Engineering and Computer Science 43

How does the Web work?

GET

OK
4

GET

OK

School of Electronic Engineering and Computer Science 44

How does the Web work?

School of Electronic Engineering and Computer Science 45

Web Applications vs Native Applications

Advantages
• Accessible
• Platform independent
• Easier to roll out program updates
• Centralised storage
Disadvantages
• Internet connection needed
• Security concerns
• Concerns over the storage, licensing and use of
uploaded data.
School of Electronic Engineering and Computer Science 46
Domain Name System
• As elegant as IP addresses may be, human What is the IP address
Domain
1 of 2 It is 138.37.95.147
beings do not enjoy having to recall long www.eecs.qmul.ac.uk
Name Server

strings of numbers. Instead of IP addresses,

we use the Domain Name System (DNS)

• www.eecs.qmul.ac.uk (numeric I need to go to

www.eecs.qmul.ac.uk
address:138.37.95.147)

I want the the

Web Server:
138.37.95.14 3 default page at
7
138.37.95.147

Here it
4 is…

School of Electronic Engineering and Computer Science 47

 Domain Levels
Generic Top-level domain (gTLD)
Third-level domain Top-level domain (TLD)
Country code Top-level domain (ccTLD)

eecs.qmul.ac.uk

Fourth-level domain Second-level domain (SLD)

General Top-level domain (TLD) uk

Second-level domain (SLD) ac

Third-level domain
qmul

Speci c Fourth-level domain eecs

School of Electronic Engineering and Computer Science 48
fi
DNS Address Resolution

• While domain names are certainly an easier way for users to reference a web
site, eventually, your browser needs to know the IP address of the web site in
order to request any resources from it.

• The Domain Name System provides a mechanism for software to discover this
numeric IP address.

• This process is referred to here as address resolution.

School of Electronic Engineering and Computer Science 49

Domain Name Address Resolution Process
ISP

2 DNS Resolver
Primary DNS
Server 5
I want to visit 3
1
www.eecs.qmul.ac.uk
4 6 Root name server
7

12 11 8

10 9 uk name server

Alternate DNS
Server

eecs.qmul.ac.uk
13

14 DNS server

Web server

School of Electronic Engineering and Computer Science 50

Hypertext Transport Protocol (HTTP)
• HTTP is a communication protocol specifying how web clients and servers should
communicate

• It is based on the request-response communication model:

• Client sends a request
• Server sends a response

• One can use the Internet’s Telnet protocol to simulate browser request and view
server response.
• Mac and Linux - use curl via terminal (curl -I url)
• Windows - one can use the free SSH/Telnet client PuTTY
School of Electronic Engineering and Computer Science 51
Hypertext Transport
Protocol (HTTP)
• The HTTP protocol establishes a TCP connection on port 80 (by
default).

• The server waits for the request, and then responds with a response
code, headers and an optional message (which can include les).

• HTTP Header Request

• Allows client and server to pass additional information with a
request or a response
• HTTP consists of Name: Value pair
Response
• Post Session and Weekly engagement questions
• HTTP Request, Response and Headers

Web Server

School of Electronic Engineering and Computer Science 52

fi
Summary
On completion of this topic, you will be able to:

• Understand the module structure and

deliverables

• Summarise the history of the Internet and

World Wide Web

• Outline the concepts and protocols that

support the Internet

• Describe the hardware and software

components that support the Internet

• Explain how a web page is retrieved and

interpreted

School of Electronic Engineering and Computer Science 53

For next week…

• Attend your lab session on Tuesday 30th January 2024

• Watch the post-session content - this is assessed!

• Read the module handbook and coursework assessment guide

• Watch pre-session before the next lecture

School of Electronic Engineering and Computer Science

54
Directed Reading

• Connolly R and Hoar R, 'Fundamentals of Web Development', Global Edition,

Pearson, 2022, Chapter 1

• ECS417U Module Study Guide

Slide material adapted from:

Connolly R and Hoar R, 'Fundamentals of Web Development', Global Edition, © 2022. Electronically reproduced by permission of Pearson Education

School of Electronic Engineering and Computer Science 55