Web Programming Studio Notes

1.1: Web History

The internet started as 4 computers in 1969. Early versions of the internet used FTP (File Transfer Protocol) to allow simple files to be transferred.

In the early 1990s Tim Berners-Lee working at CERN developed the World Wide Web, which allowed HTML files to be used to link to other text files, browsers were developed in order to view these files. They are ruled by HTTP (HyperText Transfer Protocol)

Browser Wars Timeline

Cool Website - CSS Zen Garden

1.2: IP addresses, domain names, and URLs

Devices find eachother in networks using IP addresses, these addresses come in multiple forms, mainly IPv4 and IPv6

IPv4 is a 32 bit long address divided into groups of 8 bits, these could range from
0.0.0.0
00000000.00000000.00000000.00000000
to
255.255.255.255
11111111.11111111.11111111.11111111
This differs from IPv6 which uses 128-bit addresses

Typically when using the internet a url will be searched by either the user or the system, this looks to a DNS server in order to retrieve the IP address that correlates with the choses URL. These are stored in the 13 root servers which then propagate to the other DNS servers, often run by the service providers in that country.

Anyone can register a domain name, however most registrars will charge a fee in order to register.

URLs

Domain names are most commonly seen in URLs. A URL (Uniform Resource Locator) is the location of a web resource on the web, such as http://www.cdc.gov/alcohol/faqs.htm. A web resource is any retrievable item, like an HTML file, image, video, CSS stylesheet, etc.

A URL is composed of several parts:

• Scheme - Characters at the beginning of a URL followed by a colon ":" or a colon and double slashes "://". Common URL schemes include http, https, mailto, and file. Ex: In https://www.cdc.gov/alcohol, the scheme is "https".
• Hostname - The complete domain name following the scheme in a URL. Ex: In https://www.cdc.gov/alcohol, the hostname is "www.cdc.gov".
• Path - The characters to the right of the hostname in a URL. Ex: In https://www.cdc.gov/alcohol, the path is "/alcohol".
• Query string - Optional characters to the right of the question mark (?) in a URL that provide data for the web server. In https://www.youtube.com/watch?v=uu7XCEMdSHg, the characters after the ? tells YouTube's server to play a video having code uu7XCEMdSHg.
• Fragment - Optional characters at the end of a URL that start with a hash character (#) and refer to a certain location within a webpage. In https://en.wikipedia.org/wiki/URL#History, the fragment "#History" refers to the webpage's History section.

1.3: HTTP

TCP/IP (Transmission Control Protocol/Internet Protocol) Governs how devices communicate over a network, HTTP (HyperText Transfer Protocol) runs over the top of TCP/IP in order to govern the communication between web browsers and web servers.

Before HTTP starts, the IP address must be found through the DNS lookup, once this occurs it does a TCP handshake in order to establish a connection with the web server. A HTTP request is sent, often requesting html files, images, CSS stylesheets, JavaScript files or videos, a HTTP response responds often with the requested files.

Each item in a website requires one HTTP request in order to retrieve it, for example if a website has an image, a video, a CSS stylesheet and a Javascript File, there will be 5 requests including the HTML document.

HTTP response with HTML in message body

Browser Caching

In order to reduce loading times browsers often cache files, this is managed by an entity tag system (ETag), the browser will check to see if the ETag has changed between visits, if it matches then the site or content has not changed, if it is different the browser should refresh the content with the new version. When the resource changes, so should the ETag associated with the resource. When a web browser requests a cached web resource, the browser sends the ETag in the request with an If-None-Match header. The web server will reply with a 304 Not Modified response status if the resource has not changed or a 200 OK with the changed resource and a new ETag.

Other caching mechanisms

HTTP defines additional HTTP headers to aid in caching:

• If-Modified-Since is used with the Last-Modified date/time to request the web server only send the requested resource if the resource has changed since the specified date/time. Ex: "If-Modified-Since: Wed, 01 Sep 2019 13:24:52 GMT" asks the web server to send the resource if the resource was modified after Sep 1, 2019 at 13:24:52 GMT.
• Expires contains a date/time indicating when the requested resource is considered "stale". Ex: "Expires: Wed, 01 Sep 2019 13:24:52 GMT" tells the web browser to show the cached resource until Sep 1, 2019 at 13:24:52 GMT.
• Cache-Control is used to specify a number of caching directives. Ex: "Cache-Control: no-store" tells the web browser to never cache the requested resource, and "Cache-Control: max-age=180" tells the browser to cache the resource for 180 seconds.

HTTPS

All HTTP traffic can be viewed by third parties using a network sniffer, these come in all forms however the one most popularly used for showing network traffic when programs are running is Wireshark. HTTPS improves upon this issue by encrypting the traffic between the browser and the web server in order to prevent sniffers from being able to clearly read what is being sent. HTTPS uses Transport Layer Security (TLS) which uses asymmetric public keys to encrypt the data between the browser and web server. In order for a website to use HTTPS, they must aquire a digital certificate from a trusted certificate authority, containing a public key useed by the TLS to encrypt the data

1.4: Web Trends

IoT: Internet Of Things

The Internet of Things (abbreviated as IoT) is the global collection of communicating devices that sense and control technology on behalf of humans. IoT devices range from a simple temperature sensor to a satellite-based laser scanner used to discover archaeological sites hidden by vegetation.

Web accessibility

Web accessibility is the ability of users with disabilities to access and use a webpage with reasonable effort. Designing accessible webpages ensures equal access and opportunity for everyone. Developing accessible webpages requires knowledge of disabilities, assistive technologies and software used by users with disabilities, and following design practices to ensure content is compatible with those assistive tools. Some conditions affecting web accessibility include:

• Visual problems like blindness, low vision, or color blindness
• Hand control issues ranging from tremors to total inability to use hands
• Seizures caused by flashing on the screen
• Cognitive challenges like dyslexia and other difficulties in processing webpages

1.5: Introduction to HTML

<h2>Puppies are cute</h2>

<p>Humans seem designed to see puppies as cute.</p>

When in <strong>doubt</strong>, tell the <em>truth</em>" -Mark Twain

<img src="https://resources.zybooks.com/WebProgramming/ducativ1.jpg" alt="Bike photo">

<a href="https://www.wikipedia.org/">Click Here</a>

1.6: Introduction to CSS

CSS allows for the developer to change how a webpage looks when displayed in a browser

Common CSS Properties

h1 {background-color: lightgray;}

h1 {color: darkblue;}

p {font-family: arial;}

p {font-size: 9pt;}

strong {padding: 5px;}

p {margin-left: 10px;}