Skip to content
CampusPrep
AD-503 (A) · Internet and Web Technology/Quick Revision Short Notes

Internet and Web Technology (AD-503 (A)) - Unit 1 Short Notes

How unit 1 is examined

This unit covers the Web basics and web design; HTTP (methods, request and response) and web design issues carry the marks, and a Nov 2022 short note asked web browser, JavaScript identifier and web hosting.

Concept of WWW

<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Not asked since 2022</span>

Definition. <mark>The World Wide Web (WWW) is a system of interlinked hypertext documents, identified by URLs and transferred by HTTP, that users view through a web browser.</mark>

Key points.

  1. The Web was proposed by Tim Berners-Lee at CERN in 1989 and runs on top of the Internet.
  2. Its three building blocks are URL (address), HTTP (transfer protocol) and HTML (page language).
  3. It follows the client-server model, where a browser requests pages and a web server supplies them.
  4. Hyperlinks connect documents, so a user moves from page to page by clicking.

Internet and WWW

<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Not asked since 2022</span>

Definition. <mark>The Internet is the global network of networks connected by TCP/IP; the WWW is only one service that runs over it.</mark>

Key points.

  1. The Internet is the hardware and protocol infrastructure (routers, cables, TCP/IP), while the WWW is a collection of pages and resources on it.
  2. Other Internet services besides the Web are email (SMTP), file transfer (FTP) and remote login (Telnet).
  3. The Internet was born earlier (ARPANET, 1969) than the Web (1989).
  4. The Web needs the Internet to work, but the Internet works without the Web.

HTTP Protocol: Request, Response, header and methods

<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Medium weight</span>

Definition. <mark>HTTP (HyperText Transfer Protocol) is a stateless, application-layer request-response protocol, running over TCP (port 80; 443 for HTTPS), used to transfer web resources between a client and a server.</mark>

Diagram. <figure class="ds-fig" style="margin:1.4rem 0;overflow-x:auto"><svg xmlns="http://www.w3.org/2000/svg" id="dsfig-u1-01" viewBox="0 0 424 80" width="424" height="80" role="img" aria-label="HTTP cycle. Cli = client (browser), Srv = web server; the client sends a request and the server returns a response"><style>#dsfig-u1-01 .e{stroke:#454C5A;stroke-width:1.4;fill:none}#dsfig-u1-01 .e.hi{stroke:#2340B8;stroke-width:2.6}#dsfig-u1-01 .n{fill:#FFFFFF;stroke:#16181D;stroke-width:1.4}#dsfig-u1-01 .n.hi{fill:#E3E9FC;stroke:#2340B8;stroke-width:2.2}#dsfig-u1-01 .n.rb-b{fill:#16181D;stroke:#16181D}#dsfig-u1-01 .n.rb-r{fill:#BD3227;stroke:#BD3227}#dsfig-u1-01 text{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;font-size:13px}#dsfig-u1-01 .t{fill:#16181D;font-weight:500}#dsfig-u1-01 .t.inv{fill:#FFFFFF;font-weight:700}#dsfig-u1-01 .kd{stroke:#16181D;stroke-width:1.2}#dsfig-u1-01 .dot{fill:#16181D}#dsfig-u1-01 .ann{fill:#2340B8;font-size:11px;font-weight:700}#dsfig-u1-01 .lbl{fill:#6F7787;font-family:system-ui,-apple-system,sans-serif;font-size:12px;font-weight:700}#dsfig-u1-01 .ptr{fill:#2340B8;font-size:12px;font-weight:700}#dsfig-u1-01 .ah{fill:#454C5A}#dsfig-u1-01 .ah.hi{fill:#2340B8}#dsfig-u1-01 .wl rect{fill:#FFFFFF;stroke:#DCE0E7}#dsfig-u1-01 .wl .t{font-size:12px;font-weight:700}#dsfig-u1-01 .wl.hi rect{fill:#2340B8;stroke:#2340B8}#dsfig-u1-01 .wl.hi .t{fill:#FFFFFF}html.dark #dsfig-u1-01 .e{stroke:#B1B7C3}html.dark #dsfig-u1-01 .e.hi{stroke:#8FA3FF}html.dark #dsfig-u1-01 .n{fill:#161920;stroke:#E6E8ED}html.dark #dsfig-u1-01 .n.hi{fill:#1E2748;stroke:#8FA3FF}html.dark #dsfig-u1-01 .n.rb-b{fill:#E6E8ED;stroke:#E6E8ED}html.dark #dsfig-u1-01 .n.rb-r{fill:#FF7E71;stroke:#FF7E71}html.dark #dsfig-u1-01 .t{fill:#E6E8ED}html.dark #dsfig-u1-01 .t.inv{fill:#0F1115}html.dark #dsfig-u1-01 .kd{stroke:#E6E8ED}html.dark #dsfig-u1-01 .dot{fill:#E6E8ED}html.dark #dsfig-u1-01 .ann{fill:#8FA3FF}html.dark #dsfig-u1-01 .lbl{fill:#858D9C}html.dark #dsfig-u1-01 .ptr{fill:#8FA3FF}html.dark #dsfig-u1-01 .ah{fill:#B1B7C3}html.dark #dsfig-u1-01 .ah.hi{fill:#8FA3FF}html.dark #dsfig-u1-01 .wl rect{fill:#161920;stroke:#2A2E37}html.dark #dsfig-u1-01 .wl.hi rect{fill:#8FA3FF;stroke:#8FA3FF}html.dark #dsfig-u1-01 .wl.hi .t{fill:#0F1115}</style><defs><marker id="ah1" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path class="ah" d="M0,1 L9,5 L0,9 z"/></marker><marker id="ahh1" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path class="ah hi" d="M0,1 L9,5 L0,9 z"/></marker></defs><path class="e" d="M61,40 L363,40" marker-end="url(#ah1)" marker-start="url(#ah1)"/><g class="wl"><rect x="149.8" y="31" width="124.5" height="18" rx="9"/><text class="t" x="212" y="40" dy=".35em" text-anchor="middle">Request-Response</text></g><circle class="n" cx="40" cy="40" r="18"/><text class="t" x="40" y="40" dy=".35em" text-anchor="middle">Cli</text><circle class="n" cx="384" cy="40" r="18"/><text class="t" x="384" y="40" dy=".35em" text-anchor="middle">Srv</text></svg><figcaption style="font-size:.82em;opacity:.72;margin-top:.45rem">HTTP cycle. Cli = client (browser), Srv = web server; the client sends a request and the server returns a response</figcaption></figure>

Key points.

  1. Utility: HTTP is the language of web communication, so a browser can fetch HTML pages, images and files, and submit form data to a server.
  2. Handling a request: the client opens a TCP connection, sends the request, the server parses it, runs the resource or script, and generates a response with a status code.
  3. A request has a request line (method, URL, version), headers (Host, User-Agent, Accept, Cookie) and an optional body.
  4. A response has a status line (version, code, reason), headers (Content-Type, Content-Length, Set-Cookie) and the body.
  5. Status codes: 200 OK, 301 moved, 304 not modified, 404 not found, 500 server error.
  6. Being stateless, each request is independent, so cookies and sessions are used to remember a user.
Method Purpose
GET Retrieve a resource; data goes in the URL; safe and cacheable
POST Send data in the body to create or process something (forms)
PUT Replace or create a resource at the URL
DELETE Remove the resource
HEAD Like GET but returns headers only
OPTIONS Ask which methods the server supports
PATCH Partially modify a resource

Example.

GET /index.html HTTP/1.1        HTTP/1.1 200 OK
Host: www.example.com           Content-Type: text/html
                                <html>...</html>

Answer frame. Open with the definition; draw the client-server cycle; then develop points 1-6 and the method table with the example message; close with one line that HTTP is stateless and that cookies add state.

Asked: [7 marks] (Nov 2022, Nov 2023) What is HTTP? Explain its utility and the various methods used by HTTP. How to handle HTTP requests and responses? Explain different kinds of HTTP request methods. Pitfall: Calling HTTP stateful; it is stateless.

Web browser and Web servers

<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Not asked since 2022</span>

Definition. <mark>A web browser is client software that requests, interprets and displays web pages; a web server is software that stores pages and answers browser requests over HTTP.</mark>

Key points.

  1. Browser functions are sending HTTP requests, rendering HTML/CSS and running JavaScript; examples are Chrome, Firefox and Edge.
  2. Web servers such as Apache and IIS store pages, run scripts and return responses.
  3. Identifier in JavaScript: the name of a variable or function; it must begin with a letter, _ or $, may then contain digits, is case-sensitive and cannot be a keyword (var total_1).

Asked: [7 marks] (Nov 2022) Write short notes on: i) Web browser ii) Identifier in java script iii) Webhosting (web hosting is under Planning and publishing website)

Features of Web 2.0

<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Not asked since 2022</span>

Definition. <mark>Web 2.0 is the interactive, user-centred Web where users create and share content instead of only reading it.</mark>

Key points.

  1. Users contribute content through blogs, wikis, social networks and video sharing.
  2. Rich, responsive interfaces use AJAX, so pages update without a full reload.
  3. It offers collaboration and sharing, and APIs and mashups combine services.
  4. Tagging and folksonomy organise content, and web applications replace desktop software.

Web Design: Concepts of effective web design

<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Not asked since 2022</span>

Definition. <mark>Effective web design plans a site's content, layout and navigation so that it is usable, consistent and quick to load.</mark>

Key points.

  1. Clear purpose and audience decide the content.
  2. Consistency in colours, fonts and layout gives a uniform look.
  3. Simple navigation and readable text help users find things.
  4. Fast loading, compatibility and accessibility widen the audience.

Web design issues including Browser, Bandwidth and Cache, Display resolution, Look and Feel of the Web site

<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Medium weight</span>

Definition. <mark>Web design issues are the factors, such as browser, bandwidth, cache, display resolution and look and feel, that make a site look or work differently for different users.</mark>

Key points.

  1. Browser: browsers render HTML and CSS differently and support different versions, plug-ins and JavaScript features, so a site must be tested on several browsers.
  2. Bandwidth: slow connections make heavy images, video and scripts load slowly, so compress images and keep pages light.
  3. Cache: browsers store copies of pages, so users may see stale content; cache headers and file versioning control this, and caching speeds up repeat visits.
  4. Display resolution: screens range from phones to large monitors, so use relative units and responsive layouts instead of fixed pixel widths.
  5. Look and feel: consistent colours, fonts, graphics and layout, with readable contrast, give the site its identity and comfort.
  6. Other issues are platform and operating system differences, fonts availability, colour choice, security and performance.
  7. Solutions: test across browsers and devices, use standard HTML/CSS, responsive design, optimised media and a common template.

Answer frame. Open by defining web design issues; no diagram needed; develop browser first (the question stresses it), then bandwidth and cache, resolution, look and feel, then problems and solutions; close with the best-practice line: test widely, keep it light, stay responsive.

Asked: [7 marks] (Nov 2022, Nov 2023) Explain Web design issues including Browser. Describe the common problems and solutions in designing website in detail.

Page Layout and linking

<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Not asked since 2022</span>

Definition. <mark>Page layout is the arrangement of text, images and navigation on a page, and linking connects pages through hyperlinks.</mark>

Key points.

  1. Layouts use a header, navigation, content area, sidebar and footer.
  2. White space and visual hierarchy guide the eye.
  3. Links should have clear anchor text and stay consistent in colour.
  4. Links may be internal (same site) or external, and relative or absolute.

User centric design

<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Not asked since 2022</span>

Definition. <mark>User-centric design (UCD) builds a site around the needs, goals and behaviour of its users, and tests it with them.</mark>

Key points.

  1. Start by identifying users and their tasks.
  2. Build prototypes and test them with real users.
  3. Feedback drives iteration until the site is easy to use.
  4. It improves user experience (UX), satisfaction and accessibility.

Sitemap

<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Not asked since 2022</span>

Definition. <mark>A sitemap is a plan or list of all pages of a website and how they are organised and linked.</mark>

Key points.

  1. A design sitemap is a hierarchy chart of pages from the home page downwards, made during planning.
  2. A sitemap page helps visitors find content quickly.
  3. An XML sitemap lists URLs for search engines to crawl.
  4. It shows the structure before development begins.

Planning and publishing website

<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Not asked since 2022</span>

Definition. <mark>Planning defines a website's goal, audience, content and structure; publishing uploads the finished site to a web server so that it is public.</mark>

Key points.

  1. Planning steps are setting goals, knowing the audience, planning content and sitemap, then designing and building.
  2. Publishing needs a domain name and web hosting, then uploading files by FTP.
  3. Web hosting is renting server space that keeps the site online; types are shared, dedicated, VPS and cloud hosting.
  4. After publishing, test the site, submit it to search engines and keep updating it.

Designing effective navigation

<span style="display:inline-block;padding:.16em .6em;border:1.5px solid currentColor;border-radius:999px;font-size:.68em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.75">Not asked since 2022</span>

Definition. <mark>Navigation is the set of links and menus that lets users move around the site and find content easily.</mark>

Key points.

  1. Keep menus simple, consistent and in the same place on every page.
  2. Use clear labels and few levels; any page should be reachable in about three clicks.
  3. Breadcrumbs, a search box and a home link show location and help return.
  4. Types are top navbar, sidebar, footer links and drop-down menus.

Last-minute revision

  • HTTP is stateless, application layer, uses TCP port 80 (HTTPS 443).
  • Methods: GET, POST, PUT, DELETE, HEAD, OPTIONS, PATCH.
  • Status codes: 200 OK, 301 moved, 304 not modified, 404 not found, 500 server error.
  • The Internet is the network; the WWW is a service on it.
  • WWW = URL + HTTP + HTML, proposed by Tim Berners-Lee.
  • Web 2.0 means user-generated content, AJAX and social sharing.
  • Design issues: browser, bandwidth, cache, resolution, look and feel.
  • A JavaScript identifier starts with a letter, _ or $ and is case-sensitive.
  • A sitemap is the page hierarchy plan.
  • Web hosting types: shared, dedicated, VPS, cloud.

Memory hooks

  • HTTP methods: "GP-PD-HOP" = GET, POST, PUT, DELETE, HEAD, OPTIONS, PATCH.
  • Design issues: "B-B-C-R-L" = Browser, Bandwidth, Cache, Resolution, Look and feel.
  • Internet is the road, WWW is the traffic of pages.
  • Publish = Domain + Host + FTP.

Coverage checklist

  • Concept of WWW: covered.
  • Internet and WWW: covered.
  • HTTP Protocol: Request, Response, header and methods: Q1 (7 marks, Nov 2022, Nov 2023).
  • Web browser and Web servers: Q3 i and ii (Nov 2022).
  • Features of Web 2.0: covered.
  • Web Design: Concepts of effective web design: covered.
  • Web design issues including Browser, Bandwidth and Cache, Display resolution, Look and Feel of the Web site: Q2 (7 marks, Nov 2022, Nov 2023).
  • Page Layout and linking: covered.
  • User centric design: covered.
  • Sitemap: covered.
  • Planning and publishing website: Q3 iii web hosting (Nov 2022).
  • Designing effective navigation: covered.
Go to where you left off?

Quick Add to Notes

Save questions, your own notes and screenshots into notes filed by unit. It takes a free account.

Create free account

Have an account? Log in