Basics of Web Programming
Lect 0: Introduction and related terminologies
Overview of Today’s Lecture
• Why we are studying CS447?
• Syllabus, Assessment Mechanism, etc.
• What?
• What is internet?
• What is world wide web?
• What is website or simply a web page?
• What is web browser?
• What is server?
• And so many “what” questions!
• How?
• Internet works?
• World wide web work?
• We can develop website?
Why Web programming? (goals of CS447)
If you never take another web programming class again, you will have
following skill towards the end of the course
• Create attractive, small scale web sites or apps -
• Have the vocabulary and background knowledge to understand
technical writing/discussions about the web (e.g. web API
documentation; random blog posts)
• Have the foundation to pursue the areas of web programming that
you're interested in (if you choose)
CS447 - non-goals
• CS447 - not a class to learn how to code.
• CS447 is not a class that will turn you into a senior frontend/backend
developer.
- Nor is any class; software takes years of experience to develop expertise
Syllabus
• Webpage development using various technologies such as
• HTML
• CSS
• JavaScript
• use of JavaScript frameworks (e.g. ReactJs) to create
dynamic pages; use JavaScript to access and use web
services for dynamic content (AJAX, JSON, etc.).
• In addition, server side scripting such as NodeJs and some
database servers will also be covered.
• Knowledge of Webhosting
Assessment
Formal Assessment
• Mid Term
• End Term
Internal Theory Assessment
• Two quiz (one pre mid term exam and one post mid term exam)
Lab Assessment
• Lab Assignments (6-7 number depend on the labs) [individual]
• Course materials and other information will be
posted on google classroom (pb3fzfws).
Internet and World Wide Web
• Which came first - Internet or WWW?
The Internet
• Internet is a network of interconnected computers that is now global
• Internet born in 1969 - called ARPANET
• 1969 ARPANET was connection of computers at UCLA, Stanford,
UCSB, Univ. of Utah
What Is the Internet?
• A network of networks, joining many government,
university and private computers together and providing an
infrastructure for the use of E-mail, bulletin boards, file
archives, hypertext documents, databases and other
computational resources
• The vast collection of computer networks which form and
act as a single huge network for transport of data and
messages across distances which can be anywhere from the
same office to anywhere in the world.
Written by William F. Slater, III
1996
President of the Chicago Chapter of the Internet Society
Copyright 2002, William F. Slater, III, Chicago, IL, USA
World Wide Web
• Via Internet, computers can contact each other
• Public files on computers can be read by remote
user
• usually HyperText Markup Language (.html)
• URL - Universal Resource Locator - is name of file on
a remote computer
• E.g.,
https://www.linkedin.com/in/satyendra-singh-chouhan-33a36318/
HTTP
• World Wide Web uses HTTP Servers, better known as web server
• Receive HTTP type request and send requested file in packets
Web Browsers
• Mosaic (1993) was first point-and-click browser
• Web browsers are the software we use to view web pages
• Netscape Navigator and Internet Explorer were most popular in early
days
• Netscape Navigator was original, but Microsoft leveraged IE on
market
Universal Resource Locator
https://www.linkedin.com/in/satyendra-singh-chouhan-33a36318/
http:// File Location on Remote Computer
identifies type
of transfer
Domain Name -
name of remote computer
How do web pages work?
Browsers are applications that can display web pages.
E.g. Chrome, Firefox, Safari, Internet Explorer, Edge, etc.
How do web pages work?
Web pages are written in a markup language called
HTML, so browsers display a web page by reading and
interpreting its HTML.
How do web pages work?
The HTML file might link to other resources, like images,
videos, as well as JavaScript and CSS (stylesheet) files,
which the browser then also loads.
How do web pages work?
A web server is a program running on a computer that
delivers web pages in response to requests.
It either stores or generates the web page returned.
How do web pages work?
https://www.linkedin.com/in/satyendra-singh-chouhan-33a36318/
1. You type
in a URL,
which is the
address of
the HTML
file on the
internet.
How do web pages work?
2. The browser asks
the web server that
hosts the document to
send that document.
GET
How do web pages work?
3. The web server
responds to the
browser with HTML file
that was requested.
OK
How do web pages work?
4. The browser reads
the HTML, sees the
embedded resources
and asks the server for GET
OK
those as well.
... GET OK
How do web pages work?
5. The web page is loaded when all the resources are fetched and displayed.
https://www.linkedin.com/in/satyendra-singh-chouhan-33a36318/
(That was obviously very hand-wavy. We won’t go into the details of that
How to make a web page
• Define the two basic steps required in making a web page.
Two Basic Steps
• Create an HTML File
• Upload file to server
.html
• Web documents are text files with .html extension
• These text files have HTML “tags” in them
What is HTML?
HTML (Hypertext Markup Language)
- Describes the content and structure of a web page; not
a programming language.
- Made up of building blocks called elements.
<p>
HTML is <em>awesome!!!</em>
<img src="puppy.png" />
</p>
Basic HTML page structure
(i.e. copy/paste boilerplate)
<!DOCTYPE html>
<html>
<head>
<title>CS447</title>
</head>
<body>
... contents of the page...
</body>
</html>
Saved in a filename.html file.
Basic HTML page structure
(i.e. copy/paste boilerplate)
<!DOCTYPE html>
Metadata that <html>
doesn't appear in <head> E.g. <title>
the viewport of <title>CS447</title> shows up as the
the browser </head> name of the tab
Contents that <body>
render in the ... contents of the page...
viewport of the </body>
browser </html>
HTML elements
<p>
HTML is <em>awesome!!!</em>
<img src="puppy.png" />
</p>
● An element usually has start and ending tags (<p> and </p>)
○ content: stuff in between start and end tags
● An element can be self-closing (img)
● An element can have attributes (src="puppy.jpg")
● Elements can contain other elements (p contains em and img)
Some HTML elements
(to place within <body>)
Top-level heading
<h1>Moby Dick</h1>
h1, h2, ... h6
Paragraph <p>Call me Ishmael.</p>
since feeling is first<br/>
Line break
who pays any attention
Image <img src="cover.png" />
<a href="google.com">click
Link
here!</a>
Strong (bold) <strong>Be BOLD</strong>
Emphasis (italic) He's my <em>brother</em> and all
Exercise: Course web page
Let's write some HTML to make the a course page:
Exercise: Course web page
HTML boilerplate Plaintext contents of the page
<!DOCTYPE html> CS447: Web programming
<html>
<head> Announcements
<title>CS447</title> 18/01: Assignment 0 is out!
</head> Due Friday.
18/01: course material and
<body> syllabus are now posted
...
</body> View Syllabus
</html>
Solution
<!DOCTYPE html>
<html>
<head>
<title>CS447</title>
</head>
<body>
<h1>CS447: Web programming </h1>
<strong>Announcements</strong><br/>
18/01: Assignment 0 is out! Due Friday.<br/>
18/01: course material and syllabus are now posted .<br/>
<br/>
<a href="https://classroom.google.com/syllabus">
View Syllabus
</a>
</body>
</html>
That was weird
- We saw that HTML whitespace collapses into one space…
<h1> CS447 : Web programming </h1>
<strong>Announcements</strong><br/>
18/1: Homework 0 is out! Due Friday.<br/>
- Except weirdly the <h1> heading was on a line of its own,
and <strong> was not.
Hmmm… strange…
Oh well, it works! Let's move on!!!
View Page Source
• Using “View Page Source” allows you to see the HTML behind a page
• When we get into advanced HTML pages, this can be really important
for learning how someone did something
Web Essentials
• Client: web browsers, used to surf the Web
• Server systems: used to supply information to these browsers
• Computer networks: used to support the browser-server
communication
Request “document A”
document A
Client Server
36
Internet v.s. Web
• The Internet: a inter-connected computer networks, linked by wires,
cables, wireless connections, etc.
• Web: a collection of interconnected documents and other resources.
• The world wide web (WWW) is accessible via the Internet, as are
many other services including email, file sharing, etc.
How does the Internet Work?
• Through communication protocols
• A communication protocol is a specification of how communication
between two computers will be carried out
• IP (Internet Protocol): defines the packets that carry blocks of data from one
node to another
• TCP (Transmission Control Protocol) and UDP (User Datagram Protocol): the
protocols by which one host sends data to another.
• Other application protocols: DNS (Domain Name Service), SMTP (Simple Mail
Transmission Protocol), and FTP (File Transmission Protocol)
38
The Internet Protocol (IP)
• A key element of IP is IP address, a 32-bit number
• The Internet authorities assign ranges of numbers to different
organizations
• IP is responsible for moving packet of data from node to node
• A packet contains information such as the data to be transferred, the
source and destination IP addresses, etc.
• Packets are sent through different local network through gateways
• A checksum is created to ensure the correctness of the data; corrupted
packets are discarded
• IP-based communication is unreliable
39
The Transmission Control Protocol (TCP)
• TCP is a higher-level protocol that extends IP to provide additional
functionality: reliable communication
• TCP adds support to detect errors or lost data and to trigger
retransmission until the data is correctly and completely received
• Connection
• Acknowledgment
40
TCP/IP Protocol Suites
HTTP, FTP, Telnet, DNS,
SMTP, etc.
TCP, UDP
IP (IPv4, IPv6)
41
The World Wide Web (WWW)
• WWW is a system of interlinked, hypertext documents that runs over
the Internet
• Two types of software:
• Client: a system that wishes to access the information provided by servers
must run client software (e.g., web browser)
• Server: an internet-connected computer that wishes to provide information
to others must run server software
• Client and server applications communicate over the Internet by following a
protocol built on top of TCP/IP – HyperText Transport Protocol (HTTP)
Basics of the WWW
• Hypertext: a format of information which allows one to move from
one part of a document to another or from one document to another
through hyperlinks
• Uniform Resource Locator (URL): unique identifiers used to locate a
particular resource on the network
• Markup language: defines the structure and content of hypertext
documents
43
Web Client: Browser
• Makes HTTP requests on behalf of the user
• Reformat the URL entered as a valid HTTP request
• Use DNS to convert server’s host name to appropriate IP
address
• Establish a TCP connection using the IP address
• Send HTTP request over the connection and wait for
server’s response
• Display the document contained in the response
• If the document is not a plain-text document but instead is written in
HTML, this involves rendering the document (positioning text, graphics,
creating table borders, using appropriate fonts, etc.)
44
Web Servers
• Main functionalities:
• Server waits for connect requests
• When a connection request is received, the server creates a new
process to handle this connection
• The new process establishes the TCP connection and waits for HTTP
requests
• The new process invokes software that maps the requested URL to a
resource on the server
• If the resource is a file, creates an HTTP response that contains the
file in the body of the response message
• If the resource is a program, runs the program, and returns the
output
45
Static Web: HTML/XHTML, CSS
• HTML stands for HyperText Markup Language
• It is a text file containing small markup tags that tell the Web browser how to
display the page
• XHTML stands for eXtensible HyperText Markup Language
• It is identical to HTML 4.01
• It is a stricter and cleaner version of HTML
• CSS stands for Cascading Style Sheets
• It defines how to display HTML elements
46
Why Programmability?
• What’s the drawback to simple document model?
• Static
• Assume that documents are created before they are requested
• What are examples of information that might be part of web
documents that may not be known before they are requested?
47
Client-Side Programmability
• Scripting language: a lightweight programming language
• Browser scripting: JavaScript
• Designed to add interactivity to HTML pages
• Usually embedded into HTML pages
• What can a JavaScript Do?
• Put dynamic text into an HTML page
• React to events
• Read and write HTML elements
• Validate data before it is submitted to a server
• Create cookies
• …
48
Server-Side Programmability
• The requests cause the response to be generated
• Server scripting:
• CGI/Perl: Common Gate Way Interface (*.pl, *.cgi)
• PHP: Open source, strong database support (*.php)
• ASP: Microsoft product, uses .Net framework (*.asp)
• Java via JavaServer Pages (*.jsp)
• Node.js
•…
49
CSS
CSS
CSS: Cascading Style Sheets
- Describes the appearance and layout of a web page
- Composed of CSS rules, which define sets of styles
selector {
property: value;
}
CSS
A CSS file is composed of style rules:
selector {
property: value;
}
selector: Specifies the HTML element(s) to style.
property: The name of the CSS style.
value: The value for the CSS style.
Saved in a filename.css file.
CSS
// NOT REAL CSS
fork {
color: gold;
}
"All forks on the table
should be gold"
CSS
p {
color: blue;
font-weight: bold;
}
"All <p> elements on the page
should be blue and bold"
Linking CSS in HTML
(i.e. copy/paste boilerplate)
<!DOCTYPE html>
<html>
<head>
<title>CS447</title>
<link rel="stylesheet" href="filename.css" />
</head>
<body>
... contents of the page...
</body>
</html>
Some CSS properties
There are over 500 CSS properties! Here are a few:
Font face (mdn) font-family: Helvetica;
Font color (mdn) color: gray;
Background color (mdn) background-color: red;
Border (mdn) border: 3px solid green;
Text alignment (mdn) text-align: center;
Aside: Mozilla Developer Network (MDN) is the best reference for HTML
elements and CSS properties
- The actual W3 spec is very hard to read (meant for browser
developers, not web developers)
Main ways to define CSS colors:
140 predefined names (list)
color: black; Hex values
color: #00ff00;
rgb() and rgba() color: #0f0;
color: rgb(34, 12, 64); color: #00ff0080;
color: rgba(0, 0, 0, 0.5);
- The "a" stands for alpha channel and is a transparency value
- Generally prefer more descriptive over less:
1. Predefined name
2. rgb / rgba
3. Hex
Summary
