Part I: Core Browser
Programming
CSCI 354
Part I: Core Browser Programming
• Basic Concepts about WWW
• Development Environment and Project Setup
• Styles
• Flexbox
• Media Queries
• Event Handling
• CSS Visual Effects
2
How World Wide Web Works?
• When visit a website, web browser communicates with web
server over the internet
3
Web Browser vs. Web Server
Web Browser (Web Client)
Connect to web service when needed
Often run as a web browser
Web Server
Constantly online to provide web service
Often run via web server software (e.g.,
Apache)
Use HTTP and HTTPS
Request pages/resources from server
Receive requests for pages/resources
Receive responses for requested pages/ Send responses for requested pages/
resources
resources
4
More on Internet Part
• Protocols
• HTTP (Hypertext Transfer Protocol)
• Set of rules for exchanging files such as text, images, audio, video, and
other multimedia on the web
• HTTPS (Hypertext Transfer Protocol Secure)
• HTTP on SSL (Secure Sockets Layer) or TLS (Transport Layer Security)
• Both client and server agree on a “code” encryption before passing data
• TCP (Transmission Control Protocol)
• Ensure integrity of internet communications
• Breaks files into packets, which contain the file destination and source
• Used with IP to transmit files efficiently
5
More on Internet Part (cont.)
• IP (Internet Protocol)
• Set of rules that controls how data is sent between computers on the internet
• Pass packets to next closest router until they reach destination
• Addresses
IP Address
MAC (Media Access Control) Address
Every device connected to network gets an IP
address
Hard coded in NIC (Network Interface Card)
hardware when manufactured
Associated with TCP/IP networking software
Associated with software below TCP/IP to provide
one hop communication service
Used by network application for addressing
Used by local area network (e.g., LAN or WIFI) for
addressing
6
More on Internet Part (cont.)
IPv4
IPv6
32 bit addressing: provides 4.3 billion individual
addresses
128 bit addressing: provide almost an infinite
number of addresses
Uses four 1 byte decimal numbers separated by
dot (e.g. 192.168.1.1)
Uses hexadecimal numbers separated by colons
(e.g. fe80:d4a8:6435:d2d8:d9f3b11)
Static IP Address
Dynamic IP Address
Statically assigned by special request and usually
cost money
Dynamically assigned automatically when
connecting to a network and usually no extra cost
Do not change, which is great for Businesses
Change from time to time even in same network
Good for creating or hosting computer servers for Convenient and flexible to support many users
dedicated services like mail, FTP and VPN servers in/out network over time with limited address pool
Easier to have accurate geolocation
May not have accurate geolocation
7
More on Internet Part (cont.)
• DNS (Domain Name System)
• Allow user to only remember URLs, not IP addresses
• Associate domain names (e.g., cs.olmiss.edu) with the unique IP addresses
• Response with IP address associated with the queried domain/host name
• TLD (Top-level Domain name)
• Right most part of the domain name (e.g., .com, .gov, .edu, .org)
• www sometimes refers to the web host server
• Web host server, domain name (second level domain name), and TLD
together are considered to be a fully qualified domain name (FQDN)
8
How World Wide Web Works?
• When visit a website, web browser communicates with web
server over the internet
9
More on Web Browser Part
• After receiving response, browser interprets page/resource
inside (e.g., HTML, CSS, JavaScript, etc.)
• Some interpretation may trigger further request
• While interpreting page/resource, browser also renders and
presents the result to user
• Consider a web app is a living creature
• HTML (Hypertext Markup Language) -> skeleton and organ
(mechanics)
• CSS (cascading style sheets) -> skin (visible layer)
• JavaScript -> personality (behaviors)
10
Development Environment
• Browser
• Google Chrome (recommended)
• Others include Firefox, Microsoft Edge, etc.
• Text Editor
• Any editor can create web pages – but some are better than others
•
•
•
•
VS code – can add plugins for several languages
Atom – designed for web development but needs more memory and is heavy
Sublime text 3 – can add plugins for several languages
Brackets – has a live preview showing progression as you write code
11
Publish Web Pages to Web Server
• In this class, we use our Turing server as web server
• Host name: turing.cs.olemiss.edu
• Username and password : Your CS username and password
• As a general rule: DO NOT save your password for any file transfer program
unless it is your own computer
• To publish from Windows OS:
• PuTTY
• For ssh connections to server, it opens a cmnd prompt like shell
• WinSCP
• A secure file transfer between a local and a remote computer
• Work with PuTTY
• Use SFTP or SCP file protocol for transferring files
12
Publish Web Pages to Web Server (cont.)
• To publish from Mac OS:
• Built-in Terminal
• For ssh connections to server, open Terminal to enter:
ssh YourCSUserName@turing.cs.olemiss.edu
• Cyberduck
• A secure file transfer between a local and remote computer
• Must select SCP (SSH) file protocol for transferring files (be sure to select SFTP)
• Additional information can be found at
http://www.cs.olemiss.edu/help/
13
Documentation and Reference Sources
• devdocs.io
• Excellent interface, pull docs from MDN and can work offline
• developer.mozilla.org (MDN) vs. www.w3schools.com
developer.mozilla
w3schools
easy to use
easy to use
getting better to look up
quick look up and reference
best/more in-depth concepts
very basic concepts
no security holes
security holes
proper/best practices
bad practices and poor examples
affiliated with w3c
not affiliated with w3c
founded by Mozilla
run by a Norway company
14
Documentation and Reference Sources (cont.)
• Web technologies are always changing
• How to know features/APIs supported by certain browser?
• Check html5please.com to see if feature is recommended
• Check caniuse.com to see how feature is supported
• E.g., how flexbox feature is supported by different browser
15
Command Line/Terminal Commands
• More or less you may need to use following commands of
command line/terminal for your web programming:
Mac/Linux/Unix
Description
Windows
cd
Change directory
cd
mkdir
rmdir
Create directory
Remove directory
md
rd
ls
pwd
sudo
Print all files in the current directory to screen
Print pathname of current directory to screen
Superuser to gain extra security privileges
dir
chdir
*no equivalent
Change ownership
*no equivalent
chown
16
Command Line/Terminal Commands (cont.)
• Some more frequently used commands
Mac/Linux/Unix
cp
rm
ping
traceroute
clear
history
exit
Description
Copy one or more files from one location to
another
Remove a file
verify IP-level connectivity, send receive packets
Windows
Show the Path and time for pings
Clear the shell of all previous commands
Display all command stored in memory
tracert
cls
doskey /h
End the current session
copy
del
ping
exit
17
Project Setup
• Create a new folder “ottergram” for the project
• Inside the new folder
• Create a new HTML file “index.html”
• index.html is usually where your web app starts to be loaded to browser
• Create a new folder “stylesheets”
• This folder is usually used to store style files (e.g., CSS files)
• Create a new CSS file “styles.css” inside stylesheets folder
• This file is used later to style the HTML file
18
Initial HTML
• Type in the following code in “index.html”
<!DOCTYPE html>
• Known as DTD (Document Type Declaration), defining the doctype
• Browser may render page differently based on doctype
• Earlier HTML versions often had long and convoluted doctypes
• E.g., HTML4 had 3 possible doctypes: Strict, Transitional, and Frameset
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
• With HTML5, no need for reference to DTD, simplifying the declaration
• “DOCTYPE” does not have to be in caps but it is convention
19
Initial HTML (cont.)
• Then finish code by typing the following in “index.html”
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ottergram</title>
</head>
<body>
<header>
<h1>ottergram</h1>
</header>
</body>
</html>
20
Initial HTML (cont.)
• Then finish code by typing the following in “index.html”
<!doctype html>
<html>
<body>
<header>
<head>
<h1>ottergram</h1>
<meta charset="utf-8">
<title>ottergram</title>
</head>
</header>
</body>
</html>
• <head> holds info about doc and how browser handles doc
• E.g., doc title, CSS/JavaScript files used, and when doc was last modified
21
Initial HTML (cont.)
• Then finish code by typing the following in “index.html”
<!doctype html>
<html>
<body>
<header>
<head>
<h1>ottergram</h1>
<meta charset="utf-8">
<title>ottergram</title>
</head>
</header>
</body>
</html>
• <meta> provides browser with info about doc itself
• E.g., doc author name or keywords for search engines
22
Initial HTML (cont.)
• Then finish code by typing the following in “index.html”
<!doctype html>
<html>
<body>
<header>
<head>
<h1>ottergram</h1>
<meta charset="utf-8">
<title>ottergram</title>
</head>
</header>
</body>
</html>
• Here specify doc is encoded by UTF-8 set, with all Unicode characters
• So that widest range of browsers can interpret correctly, especially if expecting
international traffic with other language characters (e.g., Spanish, Chinese)
23
Initial HTML (cont.)
• Then finish code by typing the following in “index.html”
<!doctype html>
<html>
<body>
<header>
<head>
<h1>ottergram</h1>
<meta charset="utf-8">
<title>ottergram</title>
</head>
</header>
</body>
</html>
• <body> holds all HTML code representing page content
• I.e., all images, links, text, buttons and videos that will appear on page
24
More on Tags
• In HTML, tags are used to “mark up”
content, designating their purpose
• E.g., heading, list items, links
• Content enclosed by tag pair can also include other HTML
• E.g., <header> tag encloses <h1> tag and <body> encloses <header>
• There are 140+ tags to choose from
• We will go through some of them during this course
• For more info, refer to MDN’s HTML element reference
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element
25
Link Stylesheet
• To link HTML file to stylesheet “style.css”, update head below:
<head>
<meta charset="utf-8">
<title>ottergram</title>
<link rel="stylesheet" href="stylesheets/styles.css">
</head>
26
Link Stylesheet
• To link HTML file to stylesheet “style.css”, update head below:
<head>
<meta charset="utf-8">
<title>ottergram</title>
<link rel="stylesheet" href="stylesheets/styles.css">
</head>
• <link> attaches external stylesheet to HTML doc, with two attributes
• rel (relationship) lets browser know linked doc (stylesheet) provides style info
• href tells browser to send request to server for styles.css in folder stylesheets
• Note the file path is relative to current doc (index.html)
27
Add Content
• Use following code to add an unordered list with five items:
<body>
<header>
<h1>ottergram</h1>
</header>
<ul>
<li>
<span>Barry</span>
</li>
<li>
<span>Robin</span>
</li>
<li>
<span>Maurice</span>
</li>
•
<li>
• <ul> defines
unordered list <span>Lesley</span>
</li>
<li>
<span>Barbara</span>
</li>
• <li> defines list </ul>
item
</body>
<span> is generic
container only to
separate content
for styling
28
Add Images
• Download ottergram-resources.zip file from Blackboard
• Unzip and copy img folder inside to ottergram folder
• Add following code to add clickable images to web page:
<ul>
<li>
<a href="#">
<img src="img/otter1.jpg" alt="Barry the Otter">
<span>Barry</span>
</a>
</li>
• <a> is anchor tag, making
elements on page clickable
• Can take user to page pointed by
href attribute
• “#” makes browser back to page top
• Commonly referred to as “links” but
differ from <link> tag
29
Add Images (cont.)
• <img> let browser replace it by
<li>
displaying an image
<a href="#">
• src gives the path or url
<img src="img/otter2.jpg" alt="Robin the Otter">
• alt gives alternative description
<span>Robin</span>
• Replace image if unable to load image
</a>
• Also used by screen reader to describe
</li>
image to user with visual impairment
<li>
• <img> is self-closing, i.e., no closing tag
<a href="#">
• Can also be written as “<img … />”
<img src="img/otter3.jpg" alt="Maurice the Otter">
<span>Maurice</span>
</a>
</li>
30
Add Images (cont.)
<li>
<a href="#">
<img src="img/otter4.jpg" alt="Lesley the Otter">
<span>Lesley</span>
</a>
</li>
<li>
<a href="#">
<img src="img/otter5.jpg" alt="Barbara the Otter">
<span>Barbara</span>
</a>
</li>
</ul>
31
Viewing Web Page in Browser
• Open index.html by Google Chrome
and you may see something similar
to right
32
Web Browser Developer Tools
• Some browsers (e.g., Chrome, Firefox, Edge etc.) have builtin Developer Tools (DevTools)
• Good for testing styles, layouts, etc.
• Much more efficient than trying in code
• In this course, we focus on Chrome Developer Tools
• Tool interface in other browsers is very similar
• To find Chrome Developer Tools:
• Click button to very right of URL address bar -> More Tools ->
Developer Tools
33
Chrome Developer Tools
• To change tool
dock position
34
Style Web Page
• Recall that HTML is like skeleton and organ of web app
• Now let us make web page better by add skin (CSS styles)
• Two general approaches to styling web page
• Start with overall layout and work down to smallest details
• Start with smallest details and work up to overall layout (atomic styling)
• Usually produce cleaner, more reusable code
• You may use multiple styles to decor web page
• For same web element, new style overrides old/default one
• Allow to have a baseline and then add more details
35
Create Styling Baseline
• Multiple CSS files available to be used as baseline
• One is “normalize.css”
• All browsers have default styles, which however are different across browsers
• This file helps user-written CSS display consistently across browsers
• Others include “Bootstrap.css”, which will be introduced later
• These files together with other useful libraries are available
online (e.g., cdnjs.com)
• Go to website and find URL for the file you want
• E.g., here we have
“https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css”
36
Create Styling Baseline (cont.)
• Add found URL in code as follows:
<title>ottergram</title>
<link rel="stylesheet“
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="stylesheets/styles.css">
• Note this should be before our own styles.css
• This makes browser download page/resource
from multiple servers (as shown on right)
• Not unusual for web development
• Here CDN (Content Delivery Network) can serve
useful file/resource from nearby server to reduce load time
37
Prepare HTML for Styling
• Need to set up HTML with targets for styling to apply
• Here add class attributes to serve as targets
<li>
......
<a href="#">
<span class="thumbnail-title">Lesley</span>
<img src="img/otter1.jpg" alt="Barry the Otter"> </a>
<span class="thumbnail-title">Barry</span>
</li>
</a>
<li>
</li>
<a href="#">
<li>
<img src="img/otter5.jpg" alt="Barbara the Otter">
<a href="#">
<span class="thumbnail-title">Barbara</span>
<img src="img/otter2.jpg" alt="Robin the Otter"> </a>
......
</li>
38
Anatomy of Style
• Each style is written as styling rule, including two main parts:
• selectors
• Describe elements that style should be applied to
• E.g., tag and class names
• Relative priority defined by specificity
• If multiple styles apply to same element:
• Higher specificity overrides lower one
• Then newer one overrides older one
• declarations
• Tell how selected elements to be styled
39
First Styling Rule
• Add following code to style.css:
.thumbnail-title {
background: rgb(96, 125, 139);
color: rgb(202, 238, 255);
}
• Prefix class name with “.” to use it as selector
• Here we set background and foreground colors of selected
elements (i.e., elements with class name “thumbnail-title”)
• Let browser load page to see similar result as shown up right
40
First Styling Rule (cont.)
• Further add following code to style.css:
.thumbnail-title {
display: block;
margin: 0;
padding: 4px 10px;
background: rgb(96, 125, 139);
......
• These three declarations affect element’s box
• Browser uses standard box model to determine dimensions of rectangle
used to draw each HTML tag’s visual representation
41
Understand Box Model
• Let browser load and open DevTools
• Click Inspect Element button
• Move cursor over element
to see their rectangles
42
Understand Box Model (cont.)
• Click word “ottergram” on web page
• Element corresponding to <h1> is selected and shown in DOM
tree view in elements panel
• Elements panel also shows rectangular diagram (as one at bottom
right) representing box model for h1 element
• Box model has four aspects of rectangle drawn for
element
•
•
•
•
Content: visual content (e.g., text)
Padding: transparent space around content
Border: around content and padding, can be visible
Margin: transparent space around the border
43
Understand Box Model (cont.)
• For code input just now
display: block;
margin: 0;
padding: 4px 10px;
• Change box for all selected elements so that they occupy
entire width allowed by their containing element
• display can have other values, e.g., display: inline makes
element’s width fit to its content
• Use shorthand properties to set margin to 0 and padding to two
different values 4px and 10px
• Shorthand properties allow one value applied to multiple properties
• Here for padding, 1st value applied to both top and bottom and 2nd value applied
to both left and right
• For margin, one value applied to all top, bottom, left and right
44