Web Programming
Introduction to Web Technologies
Josue Obregon
Seoul National University of Science and Technology Lecture slides index
March 6, 2026
Lecturer Presentation
BSC in Computer Engineering
Universidad de San Carlos de Guatemala
MSc in Industrial & Management Systems Engineering
Business Process Management Laboratory
Process mining applied to SNS
PhD in Industrial & Management Systems Engineering
Industrial Artificial Intelligence Laboratory
Interpretable Machine Learning for tree ensembles
Students
Question for students:
What website do you use the most every day??
If you could build one website, what would it be? (game website, shopping site, SNS)
Have you heard of or used any web tools (like HTML, CSS, or JavaScript) before? Which one sounds most interesting?
Every great developer you know got there by solving problems they were unqualified to solve until they actually did it.
— Patrick Mackenzie, Software Engineer
Course objectives
By the end of this course, students will be able to:
Design and implement web applications using JavaScript, SQL, HTML, CSS, and React.
Apply best practices in application design, including scalability, security, and user experience optimization.
Write and utilize APIs, manipulate the DOM, and create dynamic, interactive user interfaces.
Test, containerize, and deploy web applications on the Internet using modern CI/CD workflows.
The end result? A better understanding of the web, important technologies, and a portfolio for you to show!
Methodology
Flipped Clasroom style (most of weeks)
(1 ~ 1.5 hours) Watch online lectures and complete readings before class.
(1.5 ~ 2 hours) Offline activities (10:00 am)
Initial Quiz: Formative assesement of basic concepts and syntax.
Interactive Q&A: discussions and to clarify doubts.
Programming Quizzes: Take regular quizzes to reinforce concepts.
Hands-On Practice: Engage in coding exercises to apply what you’ve learned.
Class contents
Intro to Web Technologies + HTML
CSS
Introduction to JavaScript
DOM Manipulation with JavaScript
Asynchronous JavaScript, JSON and APIs
HTTP, API, JSON and AJAX
Web Architectures
Midterm
Backend development I - Node.js
Backend development II - Express
Data Persistence in web applications
Authentication and authorization
Testing and Integration in web applications
Project Presentation
Final examination
Evaluation
Point Distribution
Midterm
30%
Homework
15%
Term project
25%
Final exam
30%
Total
100%
Resources
Class website (continuously updating)eclass for homeworks, announcements, quizzes and attendance
Recomended books
Introduction web technologies
<!DOCTYPE html> < html lang = "en" > < head > < title > Web Programming ITM</ title > </ head > < body > </ body > </ html >
Global overview
Why do we study Web Programming in ITM?
In-demand skills
Allows businesses to establish an online presence, welcoming traffic and converting it into leads
It is fun to create websites (well, sort of…)
What are the tools and technologies developers are currently using and the ones they want to use.
What is a web page?
Content
Structure
Style
Behavior
A real web page?
What’s everything involved here?
It’s just this, right?
Decide on URL…
Type it in…
Hit enter…
Website loads!
But what happens between 3 and 4?
Behind the scenes
You don’t have Google.com on your computer. So, where does it come from?
Find the server
DNS translates the domain name into an IP address
Request the page
The browser sends an HTTP request to the server
Receive the response
The server sends HTML, CSS, and JavaScript
Render the page
The browser builds the page and displays it
When you open a webpage, your browser becomes a client that sends a request to a server somewhere on the internet.
The text in the address bar
It indicates where to find the website
Uniform Resource Locator (URL): An identifier for the location of a document
https itm.seoultech.ac.kr /about_itm/about_professor
https jobregon1212.github.io /lecture-slides/webprog/
URL elements
https itm.seoultech.ac.kr /about_itm/about_professor
We’ve handled the host to IP address (so we know who to ask for the web page) The “protocol”
HTTP: HyperText Transfer Protocol
Gives us the instructions (protocols) for how to share (transfer) web content (“hypertext”)
And the rest tells us what:
From the itm.seoultech.ac.kr server (aka host
Now we specifically want about_itm/about_professor (aka path
Internet vs. The Web
Internet
A global network of computers connected together.
Built using several layers:
Physical layer – cables, routers, and hardware
Network layer – moving data between computers
Transport layer – reliable communication (TCP)
Application layer – protocols like HTTP
The Web
A system of information pages
Pages written using HTML
Pages connected using links (hyperlinks)
Pages styled with CSS
Pages made interactive with JavaScript
Remember that URL? https://google.com/
Need to go out to the internet to get the webpage.
Internet is low-level: based on numbers (IP addresses), not names.
Domain Name System (DNS)
A Domain Name System translates human-readable names to IP addresses
Example: itm.seoultech.ac.kr → 203.246.83.174
Hostname of itm.seoultech.ac.kr (which we might put into the browser’s address bar) … has IP address of 203.246.83.174 (which will be used to contact the server via the internet)
Then we have a web page right?
Words + images
HTML
CSS
JavaScript
What’s in a web page?
Hypertext Markup Language (HTML ) : semantic markup for web page contentCascading Style Sheets (CSS ) : styling web pagesClient-side JavaScript : adding programmable interactivity to web pagesAsynchronous Javascript, XML adn JSON : fetching data from web services using JavaScript fetch API
