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

How unit 2 is examined

Covers HTML markup, forms, lists, XHTML, frames, HTML5 WebSockets, cookies and browser basics; marks sit in forms, HTML vs XHTML, lists, frames, WebSockets and short notes (HTML5, cookies, DTD, tags).

Basics of HTML

<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. HTML (HyperText Markup Language) is the standard markup language that describes the structure of a web page using tags interpreted by the browser.

Key points.

A tag is written in angle brackets, usually as an opening and closing pair such as <p>...</p>; empty tags like <br> have no closing tag.
Attributes give extra information inside the opening tag, as in <a href="x.html">.
Every page has <!DOCTYPE html>, <html>, <head> (title, meta) and <body> (visible content).
The DOCTYPE declaration tells the browser which HTML version rules to follow.

<!DOCTYPE html>
<html><head><title>Demo</title></head>
<body><h1>Hello</h1><p>Text</p></body></html>

Asked: [14 marks] (Nov 2023) Short notes: HTML Tags, DTD (any two of HTML5, Session tracking and Cookies, DTD, HTML Tags)

Formatting and fonts

Definition. Formatting tags change how text looks: bold, italic, size and font.

Key points.

<b>/<strong> give bold, <i>/<em> italic, <u> underline, <sub>/<sup> subscript and superscript.
Headings <h1> to <h6> go from largest to smallest; <p> makes a paragraph and <br> a line break.
<font face="Arial" size="4" color="red"> set the font in old HTML; HTML5 uses CSS instead.
<pre> keeps spaces and line breaks as typed.

Commenting code

Definition. A comment is text in the source that the browser ignores, written .

Key points.

Comments explain the code to developers and do not appear on the page.
They can hide a block of markup temporarily while testing.
Comments can span several lines but cannot be nested.

Color

Definition. Colors are given by name, hex code or RGB value.

Key points.

A hex code is #RRGGBB, two hexadecimal digits each for red, green, blue: #FF0000 is red, #000000 black, #FFFFFF white.
rgb(0,128,0) gives each channel from 0 to 255; there are also 140 named colors such as blue.
Old attributes were bgcolor and text; today style="color:red" is used.

Hyperlink

Definition. A hyperlink is a clickable link to another page or place, made with the anchor tag <a href="url">text</a>.

Key points.

href holds the destination; it may be an absolute URL or a relative path.
target="_blank" opens the link in a new window.
A bookmark link uses id="top" on the target and href="#top" on the anchor.
mailto: in href opens the mail client, as in <a href="mailto:[email protected]">.

Lists

Definition. HTML list tags group items: <ul> unordered (bullets), <ol> ordered (numbers), <dl> definition list with <dt> term and <dd> description; <li> marks each item of ul and ol.

Key points.

<ol type="A|a|I|i|1" start="3"> changes numbering style and start; <ul type="disc|circle|square"> changes the bullet.
Lists can be nested by placing a list inside an <li>.

<ul><li>Tea</li><li>Coffee</li></ul>
<ol type="I"><li>HTML</li><li>CSS</li></ol>
<dl><dt>HTML</dt><dd>Markup language</dd></dl>

Output: two bullets; a list numbered I, II; the term HTML with its indented description.

Asked: [7 marks] (Nov 2023) Define HTML List tags. Write the HTML program that describes various types of lists with suitable example.

Tables

Definition. A table arranges data in rows and columns using <table>, <tr> (row), <th> (heading cell) and <td> (data cell).

Key points.

border="1" draws borders; cellpadding and cellspacing set space inside and between cells.
colspan merges cells across columns and rowspan across rows.
<caption> gives the table a title.

Images

Definition. The <img> tag embeds an image: <img src="a.jpg" alt="text" width="100" height="80">.

Key points.

src is the file path and alt is the text shown if the image fails to load and read by screen readers.
width and height set the display size.
<img> is an empty tag; an image wrapped in <a> becomes a link.

Forms

Definition. An HTML form, made with <form>, collects user input through fields and sends it to a server for processing.

Key points.

<form action="url" method="get|post">: action is the server program that receives the data; method is how it is sent.
GET appends data to the URL (visible, limited size); POST sends it in the request body (hidden, for passwords and large data).
<input type="text"> takes one line of text and type="password" hides the characters typed.
type="radio" (same name) lets one choice be selected; type="checkbox" allows several.
<textarea> takes multi-line text and <select><option> gives a drop-down list.
type="submit" sends the form, type="reset" clears it, and type="button" runs a script.
name identifies each field's value on the server, and <label> describes a field.

<mark>A form is a set of input fields inside the form tag whose action attribute names the server program and whose method attribute (GET or POST) says how the data is sent.</mark>

<html><body>
<form action="save.php" method="post">
 <label>Name: </label><input type="text" name="uname"><br>
 <label>Phone: </label><input type="text" name="phone"><br>
 <input type="submit" value="Submit">
 <input type="reset" value="Reset">
</form></body></html>

Answer frame. Open with the definition; explain form, action and method first; then develop text, password, radio, checkbox, textarea/select, buttons each with a one-line tag example; close with the note that name attributes carry values to the server. For the program, write the full html-body-form skeleton with two labelled inputs (name, phone) and submit and reset buttons.

Asked: [7 marks] (Nov 2022) What are FORMS? Explain different FORM fields. Asked: [7 marks] (Nov 2022) Write an HTML document to provide a form that collect name (hammer) and phone numbers.

XHTML

Definition. XHTML (Extensible HyperText Markup Language) is HTML rewritten to follow strict XML syntax; a document must be well-formed and is checked against a DTD (Document Type Definition) for validity.

Point	HTML	XHTML
Closing tags	Some optional (`<p>`, `<li>`)	All mandatory; empty tags `<br />`
Case	Not case-sensitive	Tags and attributes lowercase
Nesting	Loose, errors tolerated	Properly nested
Attribute values	Quotes optional	Always quoted
Attribute minimising	`<input checked>`	`checked="checked"`
Root and DOCTYPE	Optional `<html>`	Root `<html>` with xmlns, DOCTYPE required
Errors	Browser forgives	Parser stops on error

A DTD lists the elements and attributes allowed in a document; XHTML has Strict, Transitional and Frameset DTDs.

Asked: [7 marks] (Nov 2022) Discuss the difference between HTML and XHTML with respect to elements. Asked: [14 marks] (Nov 2023) Short note on DTD.

Meta tags

Definition. Meta tags, placed in <head>, give information about the page to browsers and search engines.

Key points.

<meta name="description" content="..."> and name="keywords" help search engine results.
<meta charset="UTF-8"> sets the character encoding.
<meta http-equiv="refresh" content="5;url=x.html"> redirects after 5 seconds.
name="viewport" makes the page fit mobile screens.

Character entities

Definition. A character entity is a code beginning with & and ending with ; that displays a reserved or special character.

Key points.

< shows <, > shows >, & shows &, " shows a quote.
  is a non-breaking space and © shows the copyright sign.
Entities are needed because < and > would otherwise start a tag; numeric forms like © also work.

Frames and frame sets

Definition. Frames divide the browser window into independent parts, each showing a separate HTML file; <frameset> defines the layout and <frame> each part. They are obsolete in HTML5.

Key points.

<frameset cols="30%,70%"> makes vertical columns and rows="..." makes horizontal rows; the frameset replaces <body>.
<frame src="file.html" name="f1"> loads a page; noresize and scrolling control behaviour.
A link with target="f2" opens its page in the named frame.

<frameset cols="25%,75%">
 <frame src="menu.html" name="left">
 <frame src="main.html" name="right">
</frameset>

Output: the window shows the menu page in a left column (25%) and the main page on the right (75%). The HTML vs XHTML difference is in the XHTML table above.

Asked: [7 marks] (Nov 2023) Differentiate HTML and XHTML. Write the HTML program that includes HTML frames and frame set.

Browser architecture and Web site structure

Definition. A browser is software that requests, receives and displays web pages; a web site is a collection of linked pages under one domain.

Key points.

Browser parts are the user interface, browser engine, rendering engine, networking, JavaScript interpreter and data storage.
Site structures are linear, hierarchical (tree from a home page) and web (freely linked).
Good structure keeps navigation within a few clicks of the home page.

Web Sockets: Overview and features of HTML5

Definition. A WebSocket is a persistent, full-duplex TCP connection between browser and server, opened by an HTTP handshake, over which both sides send messages at any time. HTML5 is the latest HTML version.

<figure class="ds-fig" style="margin:1.4rem 0;overflow-x:auto"><svg xmlns="http://www.w3.org/2000/svg" id="dsfig-u2-01" viewBox="0 0 424 80" width="424" height="80" role="img" aria-label="Client (Cli) and server (Srv): HTTP Upgrade request, 101 Switching Protocols reply, then two-way data"><style>#dsfig-u2-01 .e{stroke:#454C5A;stroke-width:1.4;fill:none}#dsfig-u2-01 .e.hi{stroke:#2340B8;stroke-width:2.6}#dsfig-u2-01 .n{fill:#FFFFFF;stroke:#16181D;stroke-width:1.4}#dsfig-u2-01 .n.hi{fill:#E3E9FC;stroke:#2340B8;stroke-width:2.2}#dsfig-u2-01 .n.rb-b{fill:#16181D;stroke:#16181D}#dsfig-u2-01 .n.rb-r{fill:#BD3227;stroke:#BD3227}#dsfig-u2-01 text{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;font-size:13px}#dsfig-u2-01 .t{fill:#16181D;font-weight:500}#dsfig-u2-01 .t.inv{fill:#FFFFFF;font-weight:700}#dsfig-u2-01 .kd{stroke:#16181D;stroke-width:1.2}#dsfig-u2-01 .dot{fill:#16181D}#dsfig-u2-01 .ann{fill:#2340B8;font-size:11px;font-weight:700}#dsfig-u2-01 .lbl{fill:#6F7787;font-family:system-ui,-apple-system,sans-serif;font-size:12px;font-weight:700}#dsfig-u2-01 .ptr{fill:#2340B8;font-size:12px;font-weight:700}#dsfig-u2-01 .ah{fill:#454C5A}#dsfig-u2-01 .ah.hi{fill:#2340B8}#dsfig-u2-01 .wl rect{fill:#FFFFFF;stroke:#DCE0E7}#dsfig-u2-01 .wl .t{font-size:12px;font-weight:700}#dsfig-u2-01 .wl.hi rect{fill:#2340B8;stroke:#2340B8}#dsfig-u2-01 .wl.hi .t{fill:#FFFFFF}html.dark #dsfig-u2-01 .e{stroke:#B1B7C3}html.dark #dsfig-u2-01 .e.hi{stroke:#8FA3FF}html.dark #dsfig-u2-01 .n{fill:#161920;stroke:#E6E8ED}html.dark #dsfig-u2-01 .n.hi{fill:#1E2748;stroke:#8FA3FF}html.dark #dsfig-u2-01 .n.rb-b{fill:#E6E8ED;stroke:#E6E8ED}html.dark #dsfig-u2-01 .n.rb-r{fill:#FF7E71;stroke:#FF7E71}html.dark #dsfig-u2-01 .t{fill:#E6E8ED}html.dark #dsfig-u2-01 .t.inv{fill:#0F1115}html.dark #dsfig-u2-01 .kd{stroke:#E6E8ED}html.dark #dsfig-u2-01 .dot{fill:#E6E8ED}html.dark #dsfig-u2-01 .ann{fill:#8FA3FF}html.dark #dsfig-u2-01 .lbl{fill:#858D9C}html.dark #dsfig-u2-01 .ptr{fill:#8FA3FF}html.dark #dsfig-u2-01 .ah{fill:#B1B7C3}html.dark #dsfig-u2-01 .ah.hi{fill:#8FA3FF}html.dark #dsfig-u2-01 .wl rect{fill:#161920;stroke:#2A2E37}html.dark #dsfig-u2-01 .wl.hi rect{fill:#8FA3FF;stroke:#8FA3FF}html.dark #dsfig-u2-01 .wl.hi .t{fill:#0F1115}</style><defs><marker id="ah2" 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="ahh2" 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(#ah2)" marker-start="url(#ah2)"/><g class="wl"><rect x="125" y="31" width="174" height="18" rx="9"/><text class="t" x="212" y="40" dy=".35em" text-anchor="middle">handshake-then-messages</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">Client (Cli) and server (Srv): HTTP Upgrade request, 101 Switching Protocols reply, then two-way data</figcaption></figure>

Point	HTTP	WebSocket
Connection	Short-lived, new per request	One persistent connection
Communication	Request-response, client starts	Full-duplex, either side sends
State	Stateless	Stays open
Overhead	Headers on every request	Small frames after handshake
Use	Web pages, APIs	Chat, live scores, games
URL	http:// or https://	ws:// or wss://

HTML5 features. New semantic tags (<header>, <nav>, <section>, <footer>), <audio> and <video> without plug-ins, <canvas> drawing, new form inputs (date, email), local storage and geolocation.

Answer frame. Open with the definition; draw the handshake; give the table; close with use cases.

<mark>A WebSocket keeps one persistent full-duplex connection open after an HTTP upgrade handshake, unlike HTTP's short-lived, stateless request-response.</mark>

Asked: [7 marks] (Nov 2023) Discuss how web socket connection is different from http connection in detail? Asked: [14 marks] (Nov 2023) Short note on HTML5 (any two of four).

MIME type and content encoding

Definition. A MIME type (Multipurpose Internet Mail Extensions) names the kind of content sent, in the form type/subtype, given in the Content-Type header.

Key points.

Examples: text/html, image/png, application/json, video/mp4.
The browser uses MIME type to decide how to display or handle the file.
Content encoding, e.g. Content-Encoding: gzip, compresses the body to save bandwidth.

Session tracking and Cookies

Definition. Session tracking keeps user identity across requests, since HTTP is stateless; a cookie is a small text file the server stores in the browser and sends back with each request.

Key points.

A server sets a cookie with the Set-Cookie header; the browser returns it in the Cookie header.
Cookies hold a name, value, expiry, domain and path; limit is about 4 KB.
Other methods: hidden form fields, URL rewriting and server-side sessions using a session ID.
Cookies can be blocked by users and raise privacy concerns.

Asked: [14 marks] (Nov 2023) Short note on Session tracking and Cookies (any two of four).

Browser: Working of a Browser, Plug-ins; Search Engines

Definition. A browser fetches a URL, parses the HTML into a DOM tree, applies CSS, lays out and paints the page.

Key points.

Steps: DNS lookup, HTTP request, response, parse HTML, build render tree, layout, paint.
A plug-in is add-on software (Flash, PDF reader) that lets the browser handle extra content types.
A search engine (Google) crawls pages, indexes them and ranks results for a query.

Client Side Programming: Java Script, JavaScript Regular expressions, web servers

Definition. JavaScript is a scripting language run by the browser to make pages interactive, embedded in the page with the script element.

Key points.

It validates forms, handles events and changes the page through the DOM without contacting the server.
A regular expression is a pattern for matching text, written /^[0-9]{10}$/ and tested with .test(str).
A web server (Apache, IIS) stores pages and answers HTTP requests from browsers.

Last-minute revision

HTML is a markup language; tags are <tag> pairs with attributes.
Form: action = server program, method = GET (in URL) or POST (in body).
Input types: text, password, radio, checkbox, submit, reset.
Lists: ul bullets, ol numbers, dl with dt and dd, li items.
XHTML = HTML with XML rules: lowercase, closed, quoted, nested, well-formed.
Frameset replaces body; cols and rows split the window.
WebSocket: full-duplex, persistent, ws://, started by HTTP Upgrade.
HTML5 adds semantic tags, audio, video, canvas, local storage.
Cookie: small text stored in browser, sent via Cookie header.
MIME type is type/subtype in Content-Type.
Hex color is #RRGGBB.

Memory hooks

GET shows in the URL, POST hides in the body.
XHTML = "X-treme strict": every tag closed, lowercase, quoted.
ul = Unordered dots, ol = Ordered numbers, dl = Dictionary.
WebSocket = telephone call; HTTP = letters.
Entities: & then name then ; (<).

Coverage checklist

Basics of HTML: tags, DTD short note (Nov 2023)
formatting and fonts
commenting code
color
hyperlink
lists: Nov 2023 list program
tables
images
forms: Nov 2022 (explain fields; program)
XHTML: Nov 2022 comparison; DTD note
Meta tags
Character entities
frames and frame sets: Nov 2023 program and HTML vs XHTML
Browser architecture and Web site structure
Web Sockets: Overview and features of HTML5: Nov 2023 WebSocket vs HTTP; HTML5 note
MIME type and content encoding
Session tracking and Cookies: Nov 2023 short note
Browser: Working of a Browser, Plug-ins; Search Engines
Client Side Programming: Java Script, JavaScript Regular expressions, web servers

Account

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

How unit 2 is examined

Basics of HTML

Formatting and fonts

Commenting code

Color

Hyperlink

Lists

Tables

Images

Forms

XHTML

Meta tags

Character entities

Frames and frame sets

Browser architecture and Web site structure

Web Sockets: Overview and features of HTML5

MIME type and content encoding

Session tracking and Cookies

Browser: Working of a Browser, Plug-ins; Search Engines

Client Side Programming: Java Script, JavaScript Regular expressions, web servers

Last-minute revision

Memory hooks

Coverage checklist