X_400488 Web Technology
Index
Chapter 1 : Introduction to Web Programming .................................................................................................1
Chapter 2 : HTML.............................................................................................................................................4
Chapter 3 : More HTML ...................................................................................................................................6
Chapter 4 : Basic CSS .......................................................................................................................................9
Chapter 5 : Mobile Web Development ............................................................................................................12
Chapter 6 : Basic JavaScript ...........................................................................................................................13
Chapter 7 : JavaScript in the Browser .............................................................................................................17
Chapter 8 : jQuery ...........................................................................................................................................24
Chapter 9 : Node.js..........................................................................................................................................27
Chapter 1 : Introduction to Web Programming
➤1.1 Web History
• The internet began as four networked computers in 1969, nowadays it is the largest and most popular
computer network spanning.
• FTP(File Transfer Protocol): Protocol used for transferring files over the internet. FTP programs
were used to connect to servers, look at available documents etc.
• World Wide Web/the Web(WWW): Information system created by Tim Berners-Lee, a more
convenient way for computers to communicate files over the internet. It involved 3 things:
1. Text files, known as HTML files, containing links to other files.
2. A program, known as a browser, for viewing the HTML files.
3. A set of rules, known as the HTTP protocol, for transferring HTML files among computers.
• Web page: Document that is viewed in a web browser.
• Website: Collection of related web pages.
• Web server: Program that serves web pages to web browsers.
• HyperText Markup Language(HTML): Standard markup language for web documents. Hypertext is text
that has links to other text. Markup are special markings that provide additional information about e.g. links.
• HTML permits adding metadata like search engine keywords, author information, and language.
• Web browser: Program that downloads an HTML document from a web server, displays the document
to the user with the appropriate formatting, and allows the user to interact with the document. It also
uses HTML to understand the structure and semantics, or meaning, of the document.
• World Wide Web Consortium(W3C): International standards organization that traditionally has
controlled a number of web standards, including HTML.
• Web Hypertext Application Technology Working Group(WHATWG): Organization that develops
a variety of web standards and whose members include the major browser vendors. It also produces the
HTML Living Standard, a continually evolving standard.
• A modern web page is composed of:
- HTML: defines the structure and the content of the page
- CSS: specifies the layout and visible appearance
- JavaScript: describes the dynamic behaviors and actions of a web page
➤1.2 IP Addresses, domain names & URLs
• IP Address: Internet Protocol address, a computer’s unique address on the internet. A typical IP
address is 32 bits, divided by four 8-bit parts written as a decimal number(0 through 255).
• Computers can communicate to each other by sending an Internet packet to a computer’s IP address.
• The original internet protocol was IPv4 which has 32 bits. Because it could no longer provide enough
addresses, IPv6 was created with 128-bit addresses.
• Domain name: Name for an IP address. Contains a TLD and a second-level domain. E.g. 'name.org'
• DNS server: Domain Name System server. This server is contacted to convert the domain name to the
IP address it represents. For example when a computer wants to send a packet using a domain name.
• 13 main DNS servers called root servers, exist in the world. A computer’s operating system or ISP
keeps a reference to their IP addresses in order to make contact with it.
• Domain names are hierarchical. Domain names belong to a Top-Level Domain(TLD), such as .com.
• Each country has a unique 2-letter country code Top-Level Domain(ccTLD).
1
, • An organization calls ICANN manages TLDs and allows companies to have customized ones.
• The second-level domain is basically the name, e.g. “Stanford” for Stanford.com.
• Third-or-deeper-level domains refer to sub-computer systems local to an organization. The most
common one is www.
• URL: Uniform Resource Locator, the location of a web resource on the web. A web resource is any
retrievable item. A URL is composed of several parts:
- Scheme : Characters at the beginning of a URL followed by ":" or "://". Common URL schemes
include http, https, mailto, and file. E.g. https://
- Hostname : The complete domain name following the scheme in a URL. E.g. www.name.com
- Path : All characters to the right of the hostname in a URL. E.g. /aPath
• URLs sometimes have special characters in the path for giving the web server more information.
• If a domain name is not found by a DNS server, a page is displayed that will let the user know that it
cannot be found.
• A domain name may be found but the web server may not respond. It could be due to the web server
being turned off or undergoing maintenance, for example.
• If a web server is reached but the specific requested page isn't found, the server returns a 404 status
code, which is a code number for page not found. Various other status codes exist.
➤1.3 HTTP
• HyperText Transfer Protocol(HTTP): Networking protocol that runs over TCP/IP and governs
communication between web browsers and web servers.
• Transmission Control Protocol/Internet Protocol (TCP/IP): Protocol suite that governs how data
packets are transferred over the Internet from one machine to another.
• Before HTTP communication begins, the web browser performs a DNS lookup: Sending the domain
name to the local DNS and getting back the IP address of the web server hosting the domain name.
• HTTP functions as a request-response protocol between web browsers and web servers:
- HTTP request: Message sent from the browser to the server. Often requesting the server to send
back a web recourse.
- HTTP response: Message sent from the server back to the browser in response to an HTTP
request. Often containing the requested web recourse.
• Every HTTP request usually results in a single HTTP response. However, a web server can ignore a
request and fail to send a response.
• An HTTP request and an HTTP response are both composed of four parts:
1. Status line: Specifies the HTTP version being used. A
request status line includes a request type and path; a
response status line includes a status code.
2. Zero or more header fields: Keywords followed by a
colon and a value. Header fields supply additional
information about the request or response.
3. Empty line
4. Optional message body: Contains data being transferred
between a web browser and web server. In a request, the
message body may be empty or contain submitted form
data. In a response, the message body may contain the Fig 1.3.1 Example HTTP request & response
requested resource.
• An HTTP request method indicates the desired action to perform on a resource.
Fig 1.3.2 Common HTTP request methods
2
, • An HTTP response status code is a three digit
number that indicates the status of the requested
resource. A successfully requested resource
results in a 200 status code, other status codes are
returned for various reasons.
• A browser redirect : Server returns a 301 or 302
status code with a location header indicating the
URL the browser should load next. Fig 1.3.3 Status codes and their meaning
• Browser cache: Area on the computer's disk where web content can be stored by the web browser for
quick retrieval later. It reduces the amount of network traffic.
• Entity tag(ETag): Identifier for a specific version of a web resource. When the resource changes, so
should the ETag associated with the recourse.
• 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.
• HTTP defines additional HTTP headers to aid in caching, these are other caching mechanisms:
- If-Modified-Since: 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.
- Expires: contains a date/time indicating when the requested resource is considered “stale”.
- Cache-Control: Used to specify a number of caching directives.
• Network sniffer: Software that monitors network traffic and allows users to inspect all HTTP requests
and responses.
• HTTPS: Encrypts HTTP traffic between a browser and web server so a network sniffer cannot
intercept sensitive information in the HTTP traffic.
• Transport Layer Security(TLS): Protocol used by HTTPS, which uses asymmetric public keys to
encrypt data between the browser and web server.
• A website wanting to use HTTPS must acquire a digital certificate, issued by a trusted certificate
authority, that contains a public key used by TLS to encrypt data.
➤1.4 Web Trends
• It is good practice to ensure that web pages work on all established browsers.
• Web developers should design apps that will work equally well on both desktop and mobile devices.
• Developers of mobile friendly web pages showed consider the following: Screen size, load speed,
device speed, data cost, battery life, and interface.
• Internet of Things(IoT): Global collection of communicating devices that sense and control
technology on behalf of humans.
• Web developers build a web page that will allow people to access information and control IoT devices.
• Web accessibility: The ability of users with disabilities to access and use a web page with reasonable
effort. It ensures equal access and opportunity for everyone.
• Cognitive computing: The use of AI techniques and access to vast amounts of data to simulate human
problem solving in complex situations with ambiguity, changing data, and conflicting information.
• Separation of concerns: The design principle of breaking up web content using distinct languages and
documents that overlap as little as possible.
• When web pages are built in a way that document structure, visual layout, and interaction are clearly
separated, all things above can be obtained.
➤1.5 Introduction to HTML
• HTML is a textual language for creating web pages. They are usually saved with a .html or .htm file
extension. The HTML file can contain CSS or JavaScript code.
• The body of an HTML document is constructed with several tags.
• Tag: Has a descriptive name surrounded by ‘<’ and ‘>’ characters that the web browser uses to display
content. Some tags require a closing tag that uses ‘</’ and ‘>’.
• Link: Clickable item that causes the web browser to jump to another web page when clicked. A button
or image can also have a link.
3
