Web Technology I

Padding and margin are CSS box model properties that create space around an element.

• Padding is the space inside the element, between its content and its border.
• Margin is the space outside the element, between its border and neighbouring elements.

Box model (from inside out): content, padding, border, margin.

Difference between padding and margin

Example

<style>
  .box {
    width: 200px;
    background: lightblue;
    border: 2px solid navy;
    padding: 20px;      /* inside space */
    margin: 30px;       /* outside space */
  }
</style>
<div class="box">Hello</div>

The text sits 20px away from the border (padding), and the box is kept 30px away from other elements (margin). The total width is $200 + 2(20) + 2(2) = 244$ px, plus $2(30) = 60$ px margin.

Shorthand: padding: 10px 20px 30px 40px; means top, right, bottom, left. Two values mean vertical and horizontal; one value applies to all sides. Individual sides use padding-top, margin-left and so on.

CSS properties

A CSS property is a named style attribute that is given a value in a declaration of the form property: value; inside a rule selector { ... }. Common groups:

• Text/font: color, font-family, font-size, font-weight, text-align, text-decoration, line-height.
• Background: background-color, background-image, background-repeat, background-size.
• Box model: width, height, margin, padding, border, box-sizing.
• Display and positioning: display, position, top, left, float, z-index, overflow.
• Layout: flex, justify-content, align-items, grid-template-columns.
• Effects: opacity, box-shadow, border-radius, transition, animation.

p {
  color: darkgreen;
  font-size: 16px;
  text-align: justify;
  margin-bottom: 12px;
}

DOM and SAX are two APIs used to parse and process XML documents.

DOM (Document Object Model) parser

• Reads the whole XML document and builds a tree of nodes in memory.
• Allows random access: any node can be read, modified, added or deleted at any time.
• Uses more memory and is slower for large files because the entire document is loaded.
• Suitable for small or medium documents where the data is edited or accessed repeatedly.

SAX (Simple API for XML) parser

• An event-driven, sequential parser: it reads the document from start to end and calls handler methods such as startElement(), characters() and endElement() as it meets each part.
• Does not build a tree, so memory use is very low and parsing is fast.
• Read-only and forward-only: nodes cannot be modified or revisited.
• Suitable for very large documents and for streaming.

Comparison

Lists in HTML5

A list is a set of related items displayed one below the other, with a marker (bullet, number) or a term and description. Each item of an ordered or unordered list is written in an <li> tag. HTML5 provides three types of list.

1. Unordered list (<ul>)

Items are shown with bullets and their order does not matter. The type of marker can be set with CSS list-style-type (disc, circle, square, none).

<ul>
  <li>Rice</li>
  <li>Lentils</li>
  <li>Vegetables</li>
</ul>

2. Ordered list (<ol>)

Items are numbered or lettered because the sequence matters. Attributes are type (1, A, a, I, i), start and reversed.

<ol type="1" start="1">
  <li>Open browser</li>
  <li>Type the address</li>
  <li>Press Enter</li>
</ol>

3. Description (definition) list (<dl>)

Used for terms and their descriptions. <dt> holds the term and <dd> its description.

<dl>
  <dt>HTML</dt>
  <dd>Language used to structure web pages</dd>
  <dt>CSS</dt>
  <dd>Language used to style web pages</dd>
</dl>

Lists can be nested by placing a <ul> or <ol> inside an <li> of another list, which is used to build menus and outlines.

Client-side scripting is code that is downloaded with the web page and executed in the user's browser. Examples: JavaScript, jQuery, TypeScript (compiled to JS). Server-side scripting is code that runs on the web server, which builds the response (usually HTML or JSON) before sending it to the client. Examples: PHP, Node.js, ASP.NET, Python (Django/Flask), Java (JSP/Servlets).

Importance of client-side scripting

• Fast response: no round trip to the server for simple actions, so the page feels instant.
• Reduced server load: validation and calculations are done on the user's computer.
• Rich interactivity: animations, menus, drag and drop, dynamic content.
• Immediate form validation: errors are shown before submission.
• Asynchronous updates: AJAX changes part of a page without reloading.
• Example: JavaScript checking that a password has 8 characters before the form is submitted.

Importance of server-side scripting

• Database access: reading and writing data such as users, products and orders.
• Security: business logic, authentication and sensitive data stay hidden from the user; code cannot be viewed in the browser.
• Dynamic page generation: different content for different users and requests.
• Session and user management: login, cookies, sessions.
• Processing: file uploads, sending email, payment processing.
• Browser independence: the output is plain HTML, so it works on any browser.
• Example: PHP verifying a login against a MySQL table and generating the user's dashboard.

Comparison

Example of both together: in an online shop the client-side JavaScript validates the checkout form and updates the cart total instantly, while the server-side script checks stock, stores the order in the database and processes the payment. Both are used together in modern web applications.

A scripting language is a lightweight, usually interpreted programming language used to automate tasks and control other software (a browser, a web server, an application) rather than to build stand-alone programs. Code is executed line by line at run time without a separate compile step. Examples: JavaScript, PHP, Python, ASP, Perl, VBScript.

Client-side scripting runs in the user's web browser. The script is sent with the page and executed on the user's machine (e.g. JavaScript, VBScript).

Server-side scripting runs on the web server. The server executes the script, and only the resulting HTML/output is sent to the browser (e.g. PHP, ASP.NET, JSP, Node.js).

jQuery is a fast, small, cross-browser JavaScript library whose slogan is "write less, do more".

Why we use jQuery

• Simple syntax: selecting and changing elements takes one line, e.g. $("p").hide().
• Easy DOM manipulation and traversal using CSS-style selectors.
• Simple event handling (click, hover, submit).
• Built-in effects and animations (fadeIn, slideUp, animate).
• Easy AJAX calls ($.ajax, $.get, $.post).
• Cross-browser compatibility handled by the library.
• Large number of plugins and wide community support.

jQuery script to display "Hello BCA" on button click

<!DOCTYPE html>
<html>
<head>
  <title>Hello BCA</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $(document).ready(function () {
      $("#btn").click(function () {
        $("#output").text("Hello BCA");
      });
    });
  </script>
</head>
<body>
  <button id="btn">Click Me</button>
  <p id="output"></p>
</body>
</html>

$(document).ready() waits until the DOM is loaded. $("#btn").click(...) attaches a click handler to the button, and $("#output").text("Hello BCA") writes the message into the paragraph. An alert("Hello BCA") could be used instead of text() to show a pop-up.

DNS (Domain Name System) is a distributed, hierarchical naming system that translates human-readable domain names (such as www.example.com) into numerical IP addresses (such as 93.184.216.34) that computers use to locate each other. It is often called the phone book of the internet.

Components

• DNS resolver (recursive resolver): receives the query from the client, usually run by the ISP.
• Root name servers: direct the resolver to the correct top-level domain server.
• TLD name servers: handle domains such as .com, .org, .np.
• Authoritative name servers: hold the actual records for the domain and give the final answer.

Resolution process

1. The user types a domain name in the browser.
2. The browser/OS cache is checked; if not found, the query goes to the resolver.
3. The resolver asks a root server, then the TLD server, then the authoritative server.
4. The IP address is returned, cached for its TTL and used by the browser to connect.

Common record types: A (domain to IPv4), AAAA (IPv6), CNAME (alias), MX (mail server), NS (name server), TXT (text information).

Features: uses UDP/TCP port 53, caching to speed up lookups, and a hierarchical, distributed design that scales and avoids a single point of failure.

jQuery is a fast, small, feature-rich, cross-browser JavaScript library created by John Resig in 2006. It simplifies HTML DOM traversal and manipulation, event handling, animation and AJAX with an easy API ("write less, do more"). The basic syntax is $(selector).action().

$(document).ready(function () {
  $("button").click(function () {
    $("p").hide();
  });
});

Advantages of jQuery

• Simple, short syntax: tasks needing many lines of JavaScript take one line.
• Cross-browser compatibility: hides browser differences.
• Easy DOM manipulation: CSS-style selectors find elements quickly.
• Simple event handling: click(), hover(), on().
• Built-in effects and animations: fadeIn(), slideToggle(), animate().
• Easy AJAX: $.ajax(), $.get(), $.post().
• Method chaining: $("#a").css("color","red").slideUp().
• Extensible with plugins and a large community; free and open source.
• Light weight and easy to learn, available through a CDN.

Domain name

A domain name is a human-readable name (for example www.pu.edu.np) that identifies a host or network on the Internet. Computers communicate using numeric IP addresses such as 203.0.113.10, which are hard to remember, so the Domain Name System (DNS) translates a domain name into its IP address.

Hierarchy of the domain name

The DNS is a tree. A name is read from right to left, from the most general level to the most specific one, with each level separated by a dot.

1. Root: the top of the tree, written as an empty label (a trailing dot). Root servers know where the top-level domain servers are.
2. Top-level domain (TLD): the last label, such as .com, .org, .edu, .gov (generic TLDs) or .np, .in, .uk (country-code TLDs).
3. Second-level domain: the name registered by an organisation under a TLD, such as edu.np or google.com.
4. Subdomain / host name: labels added by the owner, such as www, mail or exam.pu.edu.np.

                 . (root)
        ┌─────────┼─────────┐
       com       org        np
                         ┌──┴──┐
                        edu   com
                         │
                         pu
                         │
                        www   → www.pu.edu.np

Resolution works down this tree: the resolver asks a root server, then the .np server, then the edu.np server, and finally the server of pu.edu.np, which returns the IP address of www.

Why a domain name must be unique

• Correct delivery: one name must map to the intended server. If two organisations had the same name, a browser could not know which IP address to contact, and requests or email would reach the wrong site.
• Consistent resolution: DNS is a distributed database. Every DNS server in the world must return the same answer for a name, which is only possible if each name has one owner.
• Identity and trust: users rely on the name to recognise a brand or bank. Duplicates would allow impersonation and phishing.
• Ownership and management: registrars (under ICANN, and in Nepal the .np registry) register each name to a single holder who controls its DNS records.
• Email routing: mail addressed to user@domain is routed using the domain's MX record, so duplicate domains would misroute mail.

Therefore a domain name is registered on a first-come basis and cannot be given to another party while it is active.

Document Object Model (DOM)

The DOM is a standard programming interface that represents an HTML or XML page as a tree of objects (the document object is the root, with html, head, body and the elements below). JavaScript uses the DOM to read and change the content, structure and style of a page and to handle events. For example, document.getElementById("demo").innerHTML = "Hello"; changes the text of an element.

Popup boxes in JavaScript

JavaScript has three kinds of popup boxes, all methods of the window object.

1. Alert box: shows a message with an OK button. It is used to give information, and the user must click OK to continue.

alert("Form submitted successfully!");

2. Confirm box: shows a message with OK and Cancel. It returns true for OK and false for Cancel, so it is used to ask for confirmation.

var ok = confirm("Do you want to delete this record?");
if (ok) {
  alert("Deleted");
} else {
  alert("Cancelled");
}

3. Prompt box: asks the user to type a value. It takes a message and an optional default value, and returns the entered text, or null if Cancel is pressed.

var name = prompt("Enter your name:", "Guest");
if (name != null) {
  document.write("Hello " + name);
}

Popup boxes stop the page until the user responds. A newline in the text is written with \n.

jQuery

jQuery is a fast, small, cross-browser JavaScript library that simplifies HTML DOM traversal and manipulation, event handling, animation and AJAX. Its motto is "write less, do more". It is added with a <script> tag (a local file or a CDN) and used through the $ function.

Basic syntax

$(selector).action();

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $(document).ready(function () {
    $("#btn").click(function () {
      $("p").hide();
    });
  });
</script>

Features

• Selecting elements with CSS-like selectors ($("#id"), $(".class"), $("p")).
• DOM and CSS manipulation: html(), text(), append(), css(), addClass().
• Event handling: click(), hover(), submit(), on().
• Effects and animation: show(), hide(), fadeIn(), slideToggle(), animate().
• AJAX: $.ajax(), $.get(), $.post() to load data without reloading the page.
• Works the same across browsers and has many plugins.

CSS. CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of an HTML document: colours, fonts, spacing, layout and responsiveness. It separates content (HTML) from design, so one stylesheet can style many pages. A rule has the form selector { property: value; }. CSS can be applied inline, internally (<style>) or externally (<link rel="stylesheet" href="style.css">). "Cascading" means that when rules conflict, the one with higher specificity, or the later one, wins.

Selectors. A selector chooses which HTML elements a rule applies to.

1. Universal selector *: all elements. * { margin: 0; }
2. Element (type) selector: all elements of a tag. p { color: blue; }
3. Class selector .name: elements with class="name"; reusable. .note { background: yellow; }
4. ID selector #name: the single element with id="name". #header { height: 80px; }
5. Grouping selector a, b: same style for several selectors. h1, h2, h3 { font-family: Arial; }
6. Descendant selector A B: B anywhere inside A. div p { color: red; }
7. Child selector A > B: B that is a direct child of A. ul > li { list-style: square; }
8. Adjacent sibling A + B: B immediately after A. h1 + p { font-weight: bold; }; general sibling A ~ B selects all following siblings.
9. Attribute selector [attr=value]: by attribute. input[type="text"] { border: 1px solid gray; }
10. Pseudo-class :state: element in a particular state. a:hover { color: green; }, li:first-child, tr:nth-child(even).
11. Pseudo-element ::part: part of an element. p::first-line { font-weight: bold; }, ::before, ::after.

Specificity. From lowest to highest: element, class/attribute/pseudo-class, ID, inline style (and !important overrides all). For example #menu li beats li.

Table in HTML: a table arranges data in rows and columns. It is created with the <table> tag.

Important table tags

Code for the required table

The Time cell (8:00AM - 8:30AM) spans both data rows, so it uses rowspan="2" and appears only in the first data row.

<!DOCTYPE html>
<html>
<head>
  <title>Appointment Table</title>
  <style>
    table, th, td { border: 1px solid black; border-collapse: collapse; }
    th, td { padding: 8px; text-align: center; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Patient Name</th>
      <th>Doctor Name</th>
      <th>Time</th>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>Dr. Frudo Sean</td>
      <td rowspan="2">8:00AM - 8:30AM</td>
    </tr>
    <tr>
      <td>Dean Lewis</td>
      <td>Dr. Foo Bar</td>
    </tr>
  </table>
</body>
</html>

<div> tag

<div> is a block-level container used to group elements into a section so that they can be styled with CSS or manipulated with JavaScript. It always starts on a new line and takes the full available width. It is used for page layout (header, menu, content, footer).

<div style="background:#eee; padding:10px;">
  <h3>Notice</h3>
  <p>Exam starts on Sunday.</p>
</div>

<span> tag

<span> is an inline container used to mark a small part of text inside a line, usually to style it. It does not start a new line and only takes the width of its content.

<p>My favourite colour is <span style="color:red;">red</span>.</p>

Code for the table

<!DOCTYPE html>
<html>
<head>
  <title>Patient Table</title>
  <style>
    table, th, td { border: 1px solid black; border-collapse: collapse; padding: 6px; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Patient Name</th>
      <th>Doctor Name</th>
      <th>Time</th>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>Dr. Frudo Sean</td>
      <td rowspan="2">8:00AM - 8:30AM</td>
    </tr>
    <tr>
      <td>Dean Lewis</td>
      <td>Dr. Foo Bar</td>
    </tr>
  </table>
</body>
</html>

The rowspan="2" attribute makes the Time cell cover both rows, so the second row has only two cells.

CSS

CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of an HTML document, such as colours, fonts, spacing and layout. It separates content (HTML) from design (CSS). A rule has a selector and a declaration block:

p { color: red; font-size: 16px; }

Selectors in CSS

A selector chooses the HTML elements to be styled.

1. Universal selector *: all elements.

* { box-sizing: border-box; }

2. Element selector: all elements of one tag.

h1 { color: navy; }

3. Class selector .name: elements with the class; reusable.

.highlight { background: yellow; }

<p class="highlight">Important</p>

4. ID selector #name: the single element with that id.

#logo { width: 120px; }

5. Group selector: several selectors separated by commas.

h1, h2, h3 { font-family: Verdana; }

6. Descendant selector: an element inside another element.

div p { color: gray; }

7. Child selector >: only direct children.

ul > li { color: green; }

8. Adjacent sibling selector +: the next sibling.

h2 + p { margin-top: 0; }

9. Attribute selector: by attribute or value.

input[type="password"] { background: #eee; }

10. Pseudo-class / pseudo-element: a state or part of an element.

a:hover { text-decoration: underline; }
p::first-letter { font-size: 2em; }

If rules conflict, specificity decides: ID is stronger than class, which is stronger than element selectors; !important and inline styles override these.

Why HTTPS is more secure than HTTP. HTTP (HyperText Transfer Protocol) sends data between browser and server as plain text, so anyone on the path can read or change it. HTTPS is HTTP running over TLS (Transport Layer Security, formerly SSL), usually on port 443, and gives three protections:

• Encryption (confidentiality): data such as passwords and card numbers is encrypted, so an eavesdropper sees only unreadable ciphertext. After a handshake the client and server agree on session keys (asymmetric cryptography to exchange the key, symmetric cryptography for the data).
• Integrity: message authentication codes detect any modification of data in transit.
• Authentication: the server presents a digital certificate signed by a trusted Certificate Authority, proving its identity and defeating impersonation and man-in-the-middle attacks.

HTTP uses port 80, no encryption and no certificate; HTTPS also improves user trust and search ranking.

HTTP request format. A request from client to server has:

1. Request line: method, resource path and protocol version, e.g. GET /index.html HTTP/1.1. Common methods: GET, POST, PUT, DELETE, HEAD.
2. Headers: name-value pairs, e.g. Host: www.example.com, User-Agent: Mozilla/5.0, Accept: text/html, Content-Type, Cookie.
3. Blank line (CRLF) ending the headers.
4. Body (optional): data sent, such as form fields in a POST.

POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 27

username=ram&password=1234

HTTP response format. The server's reply has:

1. Status line: protocol version, status code and reason phrase, e.g. HTTP/1.1 200 OK. Codes: 1xx informational, 2xx success, 3xx redirection (301, 302), 4xx client error (404 Not Found, 403), 5xx server error (500).
2. Headers: e.g. Content-Type: text/html, Content-Length: 1250, Set-Cookie, Server, Date.
3. Blank line.
4. Body: the requested content, such as the HTML page, image or JSON.

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 46

<html><body><h1>Welcome</h1></body></html>

HTTP is stateless: each request is independent, and cookies or sessions are used to maintain state.

HTML. HTML (HyperText Markup Language) is the standard markup language for creating web pages. It describes the structure and content of a page using tags (elements) such as headings, paragraphs, links, images, lists, tables and forms. A browser reads the HTML file and renders it. HTML is not a programming language; it is combined with CSS for presentation and JavaScript for behaviour. The current version is HTML5.

Types of lists in HTML

1. Unordered list (<ul>). Items shown with bullets; each item is in <li>. The type (or CSS list-style-type) can be disc, circle or square.

<ul>
  <li>Rice</li>
  <li>Lentils</li>
</ul>

2. Ordered list (<ol>). Items are numbered or lettered. Attributes: type (1, A, a, I, i), start (first number), reversed.

<ol type="A" start="1">
  <li>Open file</li>
  <li>Edit file</li>
</ol>

3. Description (definition) list (<dl>). Terms and their descriptions: <dt> holds the term and <dd> the description.

<dl>
  <dt>HTML</dt><dd>Markup language for web pages</dd>
  <dt>CSS</dt><dd>Language for styling pages</dd>
</dl>

4. Nested lists. A list placed inside an <li> of another list to show sub-items.

<ul>
  <li>Fruits
    <ul><li>Apple</li><li>Mango</li></ul>
  </li>
</ul>

Lists are used for menus, navigation bars, steps and glossaries; CSS can restyle their bullets and layout.

The table uses a two-level header (rowspan and colspan) and merged cells for the rows covering several days or periods.

<!DOCTYPE html>
<html>
<head>
  <title>Seminar Schedule</title>
  <style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid black; padding: 6px 10px; text-align: center; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th rowspan="3">Day</th>
      <th colspan="2">Seminar</th>
      <th rowspan="3">Topic</th>
    </tr>
    <tr>
      <th colspan="2">Schedule</th>
    </tr>
    <tr>
      <th>Start</th>
      <th>End</th>
    </tr>
    <tr>
      <td>Monday</td>
      <td>08:00 AM</td>
      <td>05:00 PM</td>
      <td>Introduction/Uses</td>
    </tr>
    <tr>
      <td rowspan="4">Tuesday</td>
      <td>08:00 AM</td>
      <td>11:00 AM</td>
      <td rowspan="2">Learn</td>
    </tr>
    <tr>
      <td>11:00 AM</td>
      <td>02:00 PM</td>
    </tr>
    <tr>
      <td>02:00 PM</td>
      <td>08:00 PM</td>
      <td rowspan="2"></td>
    </tr>
    <tr>
      <td>10:00 AM</td>
      <td>01:00 PM</td>
    </tr>
    <tr>
      <td>Wednesday - Friday</td>
      <td colspan="2">Full Day</td>
      <td>Practical</td>
    </tr>
    <tr>
      <td>Saturday - Sunday</td>
      <td>11:00 AM</td>
      <td>05:00 PM</td>
      <td>Extra Class</td>
    </tr>
  </table>
</body>
</html>

Notes: rowspan="3" on Day and Topic makes them span the three header rows; colspan="2" on Seminar and on Schedule covers the Start and End columns, and the third header row holds the Start and End labels. The Tuesday cell spans its four time rows with rowspan="4", and "Full Day" spans Start and End with colspan="2".

CSS box model. In CSS every HTML element is treated as a rectangular box. The box model describes how the size and space of this box is calculated. From the inside outwards, the box consists of:

1. Content: the text, image or other content; its size is set by width and height.
2. Padding: transparent space between the content and the border.
3. Border: a line around the padding and content.
4. Margin: transparent space outside the border that separates the element from its neighbours.

Roles

• Width: sets the width of the content area (width: 200px;). With the default box-sizing: content-box the total box width is $\text{width}+2\times\text{padding}+2\times\text{border}$ (plus margins for the space taken). With box-sizing: border-box, width includes padding and border.
• Padding: creates inner space so the content does not touch the border; the background colour extends under the padding. padding: 10px 20px; (top-bottom, left-right).
• Border: border: 2px solid black; sets width, style and colour; it can be set per side and can have rounded corners with border-radius.
• Margin: controls the space between elements; it is always transparent, can be negative, and margin: 0 auto; centres a block with a set width. Vertical margins of adjacent blocks collapse.

Example

<style>
  .box {
    width: 200px;
    padding: 20px;
    border: 5px solid navy;
    margin: 30px;
    background: lightyellow;
  }
</style>
<div class="box">Box model demo</div>

Total width occupied by the box is $200+2(20)+2(5)=250$ px, and with the margins the horizontal space taken is $250+2(30)=310$ px. With box-sizing: border-box the box would be 200 px wide in total, and the content would be $200-40-10=150$ px wide.

Media queries. A media query is a CSS feature (@media) that applies a block of styles only when certain conditions about the device or viewport are true, such as screen width, height, orientation, resolution or the media type (screen, print). It is the main tool of responsive web design, which makes one page adapt to phones, tablets and desktops.

Syntax:

@media media-type and (condition) {
  selector { property: value; }
}

Role in designing for different screen sizes

• The layout, font sizes, images and navigation can be changed at breakpoints (for example 600 px and 992 px) so that content stays readable on every screen.
• A single HTML page and stylesheet serves all devices, which avoids separate mobile sites.
• Content can be reflowed (multi-column on desktop, single column on mobile), parts can be hidden or shown, and touch-friendly sizes set.
• Other conditions allow print styles, dark mode (prefers-color-scheme) and high-resolution images.
• It needs <meta name="viewport" content="width=device-width, initial-scale=1"> in the HTML head for phones to use the real width.

Examples

1. Mobile-first layout with a breakpoint:

.container { display: block; }
.sidebar, .content { padding: 10px; }

@media (min-width: 768px) {
  .container { display: flex; }
  .sidebar { width: 25%; }
  .content { width: 75%; }
}

On screens under 768 px the sidebar and content stack; at 768 px and above they sit side by side.

2. Max-width for small screens:

@media (max-width: 600px) {
  nav ul { display: none; }
  body { font-size: 14px; }
}

3. Print styling:

@media print {
  .no-print { display: none; }
}

4. Orientation: @media (orientation: landscape) { ... }

Hence media queries make websites flexible, user friendly and accessible on any device.

The script reads the marks, validates them, and uses an if ... else if chain to find the grade.

<!DOCTYPE html>
<html>
<head>
  <title>Grade Calculator</title>
</head>
<body>
  <h2>Student Grade</h2>
  <label>Enter marks (0-100):
    <input type="number" id="marks" min="0" max="100">
  </label>
  <button onclick="showGrade()">Get Grade</button>
  <p id="result"></p>

  <script>
    function getGrade(marks) {
      if (marks >= 90 && marks <= 100) {
        return "Grade A";
      } else if (marks >= 80) {
        return "Grade B";
      } else if (marks >= 70) {
        return "Grade C";
      } else if (marks >= 60) {
        return "Grade D";
      } else {
        return "Grade F (Fail)";
      }
    }

    function showGrade() {
      var input = document.getElementById("marks").value;
      var marks = parseFloat(input);
      var out = document.getElementById("result");

      if (input === "" || isNaN(marks) || marks < 0 || marks > 100) {
        out.textContent = "Please enter valid marks between 0 and 100.";
        return;
      }
      out.textContent = "Marks: " + marks + " -> " + getGrade(marks);
    }
  </script>
</body>
</html>

Working. showGrade() reads the value typed in the box, converts it with parseFloat, and rejects empty, non-numeric or out-of-range input. getGrade() checks the ranges from the highest down, so each later else if only needs the lower bound: 95 gives Grade A, 85 gives Grade B, 72 gives Grade C, 60 gives Grade D, and 59 gives Grade F (Fail).

For a console version, use var marks = Number(prompt("Enter marks (0-100):")); and alert(getGrade(marks));.

Function in JavaScript: a function is a named, reusable block of code that performs a specific task. It is defined once and executed whenever it is called, optionally taking parameters and returning a value.

Types of functions in JavaScript

• Function declaration (named function): hoisted, so it can be called before it is defined.
• Function expression: a function stored in a variable; it may be anonymous.
• Arrow function: a short syntax introduced in ES6, (a, b) => a + b.
• Anonymous function: a function without a name, often used as a callback.
• Immediately Invoked Function Expression (IIFE): runs as soon as it is defined.
• Callback function: a function passed as an argument to another function.
• Function with or without parameters/return value: functions may take arguments and may return a result with return.

function add(a, b) { return a + b; }          // declaration
const sub = function (a, b) { return a - b; }; // expression
const mul = (a, b) => a * b;                   // arrow
(function () { console.log("IIFE"); })();      // IIFE

Validating email and mobile number

<!DOCTYPE html>
<html>
<head>
  <title>Validate Email and Mobile</title>
  <script>
    function validateEmail(email) {
      const pattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      return pattern.test(email);
    }

    function validateMobile(mobile) {
      // Nepali mobile number: 10 digits starting with 97 or 98
      const pattern = /^9[78][0-9]{8}$/;
      return pattern.test(mobile);
    }

    function validateForm() {
      const email = document.getElementById("email").value.trim();
      const mobile = document.getElementById("mobile").value.trim();
      const msg = document.getElementById("msg");

      if (!validateEmail(email)) {
        msg.textContent = "Invalid email address.";
        return false;
      }
      if (!validateMobile(mobile)) {
        msg.textContent = "Mobile number must be 10 digits and start with 97 or 98.";
        return false;
      }
      msg.textContent = "Email and mobile number are valid.";
      return true;
    }
  </script>
</head>
<body>
  <form onsubmit="return validateForm()">
    Email: <input type="text" id="email"><br><br>
    Mobile: <input type="text" id="mobile"><br><br>
    <input type="submit" value="Submit">
  </form>
  <p id="msg"></p>
</body>
</html>

The functions use regular expressions with the test() method, which returns true when the input matches the pattern. The form is submitted only when validateForm() returns true.

JavaScript object: an object is a collection of related data stored as key-value pairs. The keys are called properties; a property whose value is a function is called a method. Objects model real-world entities such as a student or a car.

Creating an object (object literal)

let student = {
  name: "Ram",
  age: 20,
  course: "BCA",
  show: function () { return this.name + " studies " + this.course; }
};

Other ways are new Object(), a constructor function and class.

Accessing properties: student.name (dot notation) or student["name"] (bracket notation).

(a) Adding a property: assign a value to a new key.

student.address = "Pokhara";
student["email"] = "ram@example.com";

(b) Modifying a property: assign a new value to an existing key.

student.age = 21;
student["course"] = "BIT";

(c) Deleting a property: use the delete operator.

delete student.email;
console.log(student.email);   // undefined

Complete example

let student = { name: "Ram", age: 20 };
student.address = "Pokhara";   // add
student.age = 21;              // modify
delete student.name;           // delete
console.log(student);          // { age: 21, address: "Pokhara" }

A property can be checked with "age" in student or student.hasOwnProperty("age").

JavaScript is a lightweight, interpreted, high-level scripting language used to make web pages interactive. It runs in the browser (and on servers through Node.js) and works together with HTML (structure) and CSS (presentation).

Purpose of JavaScript in the web

• Making pages dynamic and interactive (menus, sliders, pop-ups).
• Validating form data on the client before sending it to the server.
• Manipulating the HTML and CSS of a page through the DOM.
• Handling events such as clicks, key presses and mouse movements.
• Updating parts of a page without reloading using AJAX / fetch.
• Building complete applications with frameworks such as React, Vue and Angular, and server-side programs with Node.js.

Example: populate a table inside a div with id="table-content"

<!DOCTYPE html>
<html>
<head>
  <title>Populate Table</title>
</head>
<body>
  <div id="table-content"></div>

  <script>
    const students = [
      { id: 1, name: "Ram",   course: "BCA" },
      { id: 2, name: "Sita",  course: "BCA" },
      { id: 3, name: "Hari",  course: "BIT" }
    ];

    let html = "<table border='1' cellpadding='6'>";
    html += "<tr><th>ID</th><th>Name</th><th>Course</th></tr>";

    for (let i = 0; i < students.length; i++) {
      html += "<tr>" +
              "<td>" + students[i].id + "</td>" +
              "<td>" + students[i].name + "</td>" +
              "<td>" + students[i].course + "</td>" +
              "</tr>";
    }
    html += "</table>";

    document.getElementById("table-content").innerHTML = html;
  </script>
</body>
</html>

The script builds the table markup as a string from an array of objects and assigns it to the innerHTML of the div found by document.getElementById("table-content"). The script is placed after the div so that the element exists when the code runs.

Asynchronous programming is a style in which a long-running operation (network request, file access, timer) is started and the program continues with other work instead of waiting; the result is handled later when the operation finishes. JavaScript is single-threaded, so asynchronous code prevents the page from freezing.

Synchronous vs asynchronous

• Synchronous: statements run one after another and a slow task blocks everything after it.
• Asynchronous: slow tasks run in the background and their result is delivered through a callback, a promise or async/await.

Promise: an object representing a value that will be available in the future. It has three states: pending, fulfilled and rejected. It is consumed with .then() and .catch().

async and await

• A function declared with async always returns a promise.
• await can be used inside an async function; it pauses that function until the promise settles and gives its result, so the code reads like synchronous code.
• Errors are handled with try ... catch.

fetch() is the built-in browser API for HTTP requests. It returns a promise that resolves to a Response object; response.json() parses the body and also returns a promise.

Example

async function loadUsers() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    if (!response.ok) {
      throw new Error("HTTP error " + response.status);
    }
    const users = await response.json();
    users.forEach(u => console.log(u.name));
  } catch (error) {
    console.log("Failed: " + error.message);
  }
}

loadUsers();
console.log("This line runs without waiting for the data");

The last console.log prints first, which shows that the program is not blocked while the data is being fetched.

To reverse a string, read its characters from the last index to the first and append each to a new string.

<!DOCTYPE html>
<html>
<head><title>Reverse String</title></head>
<body>
  <script>
    function reverseString(str) {
      let reversed = "";
      for (let i = str.length - 1; i >= 0; i--) {
        reversed += str[i];
      }
      return reversed;
    }

    let text = prompt("Enter a string:");
    document.write("Original: " + text + "<br>");
    document.write("Reversed: " + reverseString(text));
  </script>
</body>
</html>

Working: for "BCA", length is 3. The loop starts at i = 2 ("A"), then i = 1 ("C"), then i = 0 ("B"), giving "ACB". The loop stops when i becomes -1.

The time complexity is $O(n)$ for a string of length $n$.

User story: a short, simple description of a feature written from the point of view of the person who will use it, in the form:

As a <type of user>, I want <a goal> so that <a benefit>.

Why user stories are important in web development

• User focus: they keep the team thinking about real user needs rather than technical details.
• Shared understanding: developers, designers, testers and clients all read the same plain-language requirement.
• Prioritisation: each story can be ranked, estimated and placed in a sprint, which suits agile development.
• Small, testable units: each story has acceptance criteria that tell testers when it is done.
• Flexibility: requirements can change easily because stories are lightweight and discussed continuously.
• Better communication with clients: non-technical stakeholders can understand and approve them.
• Reduced waste: only features with clear user value are built.

Sample user story: e-commerce home page

Title: View featured products on the home page

Story: As a visitor to the online shop, I want to see featured products and categories on the home page so that I can quickly find and buy items I am interested in.

Acceptance criteria

1. The home page shows a banner, a category menu and at least 8 featured products with image, name and price in Rs.
2. Clicking a product opens its detail page.
3. A search box is visible at the top and returns matching products.
4. Each product has an "Add to Cart" button and the cart icon shows the updated item count.
5. The page loads within 3 seconds and displays correctly on mobile and desktop.

Priority: High Estimate: 5 story points

React

React is an open-source JavaScript library developed by Facebook (Meta) for building user interfaces, especially single-page applications.

• Component-based: the UI is divided into reusable, independent components.
• Virtual DOM: React keeps a lightweight copy of the DOM, compares changes (diffing) and updates only the parts of the real DOM that changed, which makes updates fast.
• JSX: a syntax that allows HTML-like markup inside JavaScript.
• One-way data flow: data passes from parent to child through props; state is managed with hooks such as useState.
• Large ecosystem (React Router, Redux) and React Native for mobile apps.

function Hello({ name }) {
  return <h1>Hello, {name}</h1>;
}

Vue.js

Vue.js is a progressive JavaScript framework created by Evan You for building user interfaces and single-page applications.

• Progressive: it can be added to an existing page for a small widget or scaled to a full application.
• Reactive data binding: the view updates automatically when data changes; two-way binding with v-model.
• Template syntax and directives: v-if, v-for, v-bind, v-on.
• Component-based with single-file components (.vue) holding template, script and style together.
• Uses a virtual DOM, is lightweight, and is easy to learn.

<div id="app">{{ message }}</div>
<script>
  Vue.createApp({ data() { return { message: "Hello Vue" }; } }).mount("#app");
</script>

Both use components and a virtual DOM; React is a library with more freedom, while Vue is a framework with more built-in conventions.

AJAX (Asynchronous JavaScript and XML) is a technique for exchanging data with a web server in the background so that part of a web page can be updated without reloading the whole page.

How it works

1. An event occurs on the page (button click, typing).
2. JavaScript creates an XMLHttpRequest object (or uses fetch).
3. The request is sent asynchronously to the server.
4. The server processes it and returns data (JSON, XML, HTML or text).
5. JavaScript receives the response and updates the DOM.

Advantages

• Faster, more responsive pages because only needed data is transferred.
• Reduced server load and bandwidth.
• Better user experience (live search, auto-suggest, form validation, Gmail-like updates).

Disadvantages

• Needs JavaScript enabled; back button and bookmarking can be difficult.
• Harder to debug and potential security issues such as cross-site scripting.

Example

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    document.getElementById("demo").innerHTML = xhr.responseText;
  }
};
xhr.open("GET", "data.txt", true);
xhr.send();

Although the name contains XML, JSON is now the most common data format.

Protocol: a protocol is a set of rules and conventions that defines how data is formatted, transmitted, received and acknowledged between devices on a network. Without common protocols, devices from different vendors could not communicate.

Types of protocols used on the internet

1. TCP/IP suite (transport and network)

• IP (Internet Protocol): addresses and routes packets from source to destination (IPv4 and IPv6). It is connectionless and unreliable.
• TCP (Transmission Control Protocol): connection-oriented, reliable delivery using a three-way handshake, sequencing, acknowledgements, retransmission, flow and congestion control. Used by web, email and file transfer.
• UDP (User Datagram Protocol): connectionless, fast, no guarantee of delivery; used for streaming, VoIP, DNS and gaming.

2. Application layer protocols

• HTTP/HTTPS: transfers web pages between browser and server (port 80/443); HTTPS adds encryption through TLS/SSL.
• FTP: transfers files between computers (ports 20/21); SFTP is the secure form.
• SMTP: sends email between servers (port 25/587).
• POP3 and IMAP: retrieve email from a mail server; POP3 downloads and usually deletes, IMAP keeps mail on the server and synchronises.
• DNS: resolves domain names to IP addresses (port 53).
• DHCP: automatically assigns IP addresses to hosts.
• Telnet and SSH: remote login; SSH is encrypted and secure.
• SNMP: network management and monitoring.

3. Supporting protocols

• ARP: maps an IP address to a MAC address.
• ICMP: error reporting and diagnostics (used by ping).
• NTP: synchronises clocks.

Layers summary

Together these protocols let data move reliably and securely across the internet.

HTML (HyperText Markup Language) is the standard markup language used to create and structure web pages. It uses tags to describe elements such as headings, paragraphs, links, images, lists and tables, and is rendered by web browsers. HTML5 is the current version.

HTML document structure

An HTML document has the following parts:

• <!DOCTYPE html>: declares that the document is HTML5.
• <html>: the root element containing the entire page; the lang attribute gives the language.
• <head>: holds metadata that is not displayed in the page: <title>, <meta>, <link>, <style> and <script>.
• <body>: contains all visible content such as text, images, links, forms and tables.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Welcome to My Website</h1>
  </header>
  <nav>
    <a href="index.html">Home</a> |
    <a href="about.html">About</a>
  </nav>
  <main>
    <p>This is a paragraph of text.</p>
    <img src="photo.jpg" alt="A photo">
  </main>
  <footer>
    <p>&copy; 2025 My Website</p>
  </footer>
</body>
</html>

An element normally has an opening tag, content and a closing tag, for example <p>text</p>. Empty elements such as <br> and <img> have no closing tag. Elements can carry attributes like href, src and alt, and elements can be nested inside one another.

Purpose of the <ul> tag: <ul> defines an unordered list, a list of items in which the order is not important. Each item is written with an <li> (list item) tag, and the browser displays the items with bullet markers by default. The marker can be changed with CSS list-style-type (disc, circle, square, none). It is commonly used for menus, navigation bars and groups of related items.

Types of HTML lists

1. Unordered list (<ul>) shows bulleted items.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

2. Ordered list (<ol>) shows numbered items where order matters. The type attribute (1, A, a, I, i), start and reversed attributes control numbering.

<ol type="1">
  <li>Open editor</li>
  <li>Write code</li>
  <li>Run in browser</li>
</ol>

3. Description list (<dl>) shows terms and their descriptions, using <dt> for the term and <dd> for the description.

<dl>
  <dt>HTML</dt>
  <dd>Markup language for web pages</dd>
  <dt>CSS</dt>
  <dd>Language for styling pages</dd>
</dl>

4. Nested list: a list placed inside an <li> of another list.

<ul>
  <li>Web
    <ul>
      <li>Frontend</li>
      <li>Backend</li>
    </ul>
  </li>
  <li>Mobile</li>
</ul>

A list can be nested to any depth, and <ul> and <ol> can be mixed.

JavaScript is a lightweight, interpreted, high-level scripting language that makes web pages interactive. It runs in every web browser and, through Node.js, on the server.

Role of JavaScript in web development

• Client-side interactivity: menus, sliders, pop-ups, image galleries and animations.
• DOM manipulation: adding, removing and changing HTML and CSS dynamically.
• Event handling: responding to clicks, key presses and form submission.
• Form validation: checking input before it is sent to the server.
• Asynchronous communication: AJAX and fetch update part of a page without reloading.
• Frameworks and libraries: React, Vue, Angular and jQuery for building rich front ends.
• Back-end development: Node.js with Express for servers and APIs.
• Mobile and desktop apps: React Native, Electron.

Control statements in JavaScript

Control statements decide the order in which statements are executed. They are of three kinds: conditional, looping and jump statements.

1. Conditional statements

if, if...else, else if:

let marks = 72;
if (marks >= 80) {
  console.log("Distinction");
} else if (marks >= 60) {
  console.log("First division");
} else {
  console.log("Pass or below");
}

switch:

let day = 3;
switch (day) {
  case 1: console.log("Sunday"); break;
  case 2: console.log("Monday"); break;
  case 3: console.log("Tuesday"); break;
  default: console.log("Other day");
}

The ternary operator is a short form: let result = marks >= 40 ? "Pass" : "Fail";

2. Looping statements

for (let i = 1; i <= 5; i++) { console.log(i); }       // for

let j = 1;
while (j <= 5) { console.log(j); j++; }                // while

let k = 1;
do { console.log(k); k++; } while (k <= 5);            // do...while

for (let key in { a: 1, b: 2 }) { console.log(key); }  // for...in (object keys)
for (let v of [10, 20, 30]) { console.log(v); }        // for...of (array values)

3. Jump statements

• break exits a loop or switch.
• continue skips the current iteration.
• return exits a function with an optional value.

for (let i = 1; i <= 10; i++) {
  if (i === 3) continue;   // skip 3
  if (i === 6) break;      // stop at 6
  console.log(i);          // prints 1 2 4 5
}

The form is validated in a validateForm() function called on submit. Each rule is checked in turn; if one fails, an error message is shown and the submission is cancelled by returning false.

<!DOCTYPE html>
<html>
<head>
  <title>Form Validation</title>
  <style>
    .error { color: red; font-size: 14px; }
  </style>
  <script>
    function validateForm() {
      const name = document.getElementById("name").value.trim();
      const email = document.getElementById("email").value.trim();
      const password = document.getElementById("password").value;
      const confirm = document.getElementById("confirm").value;
      const age = document.getElementById("age").value.trim();
      const error = document.getElementById("error");
      error.textContent = "";

      // Name must not be empty
      if (name === "") {
        error.textContent = "Name cannot be empty.";
        return false;
      }

      // Email format
      const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      if (!emailPattern.test(email)) {
        error.textContent = "Enter a valid email address.";
        return false;
      }

      // Password: minimum 8 characters, letters and numbers
      if (password.length < 8) {
        error.textContent = "Password must be at least 8 characters.";
        return false;
      }
      if (!/[A-Za-z]/.test(password) || !/[0-9]/.test(password)) {
        error.textContent = "Password must contain both letters and numbers.";
        return false;
      }

      // Confirm password must match
      if (confirm !== password) {
        error.textContent = "Passwords do not match.";
        return false;
      }

      // Age: number between 18 and 60
      const ageNum = Number(age);
      if (age === "" || isNaN(ageNum) || ageNum < 18 || ageNum > 60) {
        error.textContent = "Age must be a number between 18 and 60.";
        return false;
      }

      alert("Form submitted successfully!");
      return true;
    }
  </script>
</head>
<body>
  <form onsubmit="return validateForm()">
    Name: <input type="text" id="name"><br><br>
    Email: <input type="text" id="email"><br><br>
    Password: <input type="password" id="password"><br><br>
    Confirm Password: <input type="password" id="confirm"><br><br>
    Age: <input type="text" id="age"><br><br>
    <input type="submit" value="Register">
    <p id="error" class="error"></p>
  </form>
</body>
</html>

Notes: trim() removes surrounding spaces; the regular expressions /[A-Za-z]/ and /[0-9]/ check that at least one letter and one digit are present; Number() converts the age text and isNaN() rejects non-numeric input.

DOM stands for Document Object Model. It is a programming interface defined by the W3C that represents an HTML (or XML) document as a tree of objects. Each element, attribute and piece of text becomes a node. The document object is the root, with <html> below it, then <head> and <body> and so on.

document
 └── html
      ├── head
      │    └── title
      └── body
           ├── h1
           └── p

Why the DOM is important in JavaScript

• Access to the page: JavaScript cannot work with HTML directly; the DOM provides objects and methods to find elements, e.g. getElementById(), querySelector(), getElementsByClassName().
• Changing content: text and HTML can be changed with textContent and innerHTML.
• Changing styles and attributes: element.style.color = "red", setAttribute().
• Adding and removing elements: createElement(), appendChild(), removeChild().
• Event handling: addEventListener("click", fn) lets the page react to user actions.
• Form validation and dynamic pages: reading input values and showing messages without reloading.
• Language and platform neutral: the same model works with different languages and browsers.

Example

<p id="msg">Old text</p>
<button onclick="change()">Change</button>
<script>
  function change() {
    const p = document.getElementById("msg");
    p.textContent = "New text";
    p.style.color = "blue";
  }
</script>

Without the DOM, web pages would be static documents; with it JavaScript can make them dynamic and interactive.

Media query: a CSS feature, introduced with CSS3, that applies styles only when certain conditions of the device or viewport are true, such as screen width, height, orientation, resolution or media type (screen, print). The syntax is:

@media media-type and (condition) {
  /* CSS rules */
}

How media queries help build responsive pages

• Adapt layout to screen size: one HTML page can look right on mobile, tablet and desktop by changing columns, widths and font sizes at breakpoints.
• Single code base: no separate mobile site is needed.
• Mobile-first design: base styles are written for small screens, then min-width queries add enhancements for larger screens.
• Show/hide content: unneeded elements such as sidebars can be hidden on small screens.
• Orientation and print: styles can differ for portrait/landscape and for printing.
• Better user experience and better search ranking, since mobile-friendly pages are preferred.

A viewport meta tag is required: <meta name="viewport" content="width=device-width, initial-scale=1.0">.

Common breakpoints: about 600px (phones), 768px (tablets), 992px and above (desktops).

Example

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container { display: flex; }
    .sidebar { width: 25%; background: #ddd; padding: 10px; }
    .content { width: 75%; background: #f5f5f5; padding: 10px; }

    /* Screens 768px wide or smaller: stack the columns */
    @media (max-width: 768px) {
      .container { flex-direction: column; }
      .sidebar, .content { width: 100%; }
    }

    /* Print: hide the sidebar */
    @media print {
      .sidebar { display: none; }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="sidebar">Sidebar</div>
    <div class="content">Main content</div>
  </div>
</body>
</html>

On a desktop the sidebar and content appear side by side (25% and 75%). When the viewport is 768px or narrower, the query switches the container to a column so both blocks take the full width and are stacked.

XML (eXtensible Markup Language) is a W3C markup language for storing and transporting data in a structured, human- and machine-readable text format. Unlike HTML, whose tags are predefined and which describes how data is displayed, XML lets the author define their own tags and describes what the data is.

Rules of XML: exactly one root element; every start tag has an end tag; tags are case sensitive; elements must be properly nested; attribute values must be quoted.

Example

<?xml version="1.0" encoding="UTF-8"?>
<students>
  <student id="1">
    <name>Ram Sharma</name>
    <course>BCA</course>
    <semester>3</semester>
  </student>
  <student id="2">
    <name>Sita Thapa</name>
    <course>BCA</course>
    <semester>3</semester>
  </student>
</students>

Here <students> is the root, <student> is a child element with an attribute id, and <name> etc. are the nested elements holding data.

Advantages of XML

• Self-descriptive: tag names explain the data.
• Extensible: users create their own tags.
• Platform and language independent: plain text, usable on any system.
• Separates data from presentation: the same data can be shown using CSS or XSLT in various forms.
• Easy data sharing and exchange between different applications and organisations (web services, RSS, SOAP, configuration files).
• Validation: DTD or XML Schema can check that data is correct.
• Supports Unicode, including Nepali text.
• Hierarchical structure suits complex, nested data.
• Readable and easy to debug, with wide tool support.

Page layout is the arrangement of elements such as header, navigation, content, sidebars, images and footer on a web page. A good layout guides the eye, makes content readable and works across devices. Layout issues are problems that break this arrangement or reduce usability.

Common page layout issues, causes and solutions

1. Poor responsiveness across screen sizes

• Cause: fixed pixel widths, no viewport meta tag, desktop-only design.
• Solution: use the viewport meta tag, relative units (%, rem, vw), flexbox/grid, media queries and a mobile-first approach.

2. Browser incompatibility

• Cause: different browsers render CSS differently or lack newer features.
• Solution: use a CSS reset or normalise.css, test on major browsers, use feature queries and vendor prefixes where necessary, avoid deprecated tags.

3. Overlapping or broken elements

• Cause: misuse of float, position: absolute, missing clearing of floats, content larger than its container.
• Solution: use flexbox or grid instead of floats, clearfix, overflow control, box-sizing: border-box.

4. Horizontal scrolling and content overflow

• Cause: fixed-width images, tables or long words wider than the screen.
• Solution: max-width: 100% for images, overflow-wrap: break-word, scrollable wrapper for tables.

5. Inconsistent spacing and alignment

• Cause: ad hoc margins and padding, no design system.
• Solution: use a consistent spacing scale, grid system, and shared CSS classes.

6. Poor readability and visual hierarchy

• Cause: small fonts, low contrast, long lines, cluttered content.
• Solution: readable font size (at least 16px), 45-75 characters per line, good contrast, headings, white space.

7. Slow loading layout and layout shift

• Cause: large unoptimised images, no dimensions on images, late-loading fonts.
• Solution: compress images, set width and height, lazy loading, optimise CSS/JS.

8. Navigation and accessibility problems

• Cause: complicated menus, no semantic markup, no keyboard support.
• Solution: simple navigation, semantic tags (header, nav, main, footer), alt text, ARIA labels, keyboard focus support.

9. Table-based or inflexible layouts

• Cause: using tables for layout.
• Solution: use CSS layout techniques (flexbox, grid) and keep tables for tabular data.

Best practice: plan with wireframes, design mobile-first, use a grid, test on real devices and validate HTML/CSS.

Typography is the art and technique of arranging written text so that it is readable, legible and visually appealing. In web design it covers the choice of typefaces (fonts), sizes, spacing, colour and alignment, and strongly affects usability and the personality of a site.

Key elements

• Typeface / font family: serif (Times New Roman), sans-serif (Arial, Roboto), monospace (Courier) and decorative. Sans-serif fonts are common for screen text.
• Font size: body text should be around 16px or more; headings larger to show hierarchy.
• Line height (leading): about 1.4 to 1.6 times the font size for comfortable reading.
• Letter spacing (tracking) and word spacing.
• Line length: about 45 to 75 characters per line.
• Alignment: left aligned text is easiest to read; avoid long centred or fully justified paragraphs.
• Contrast and colour: enough contrast between text and background.
• Hierarchy and weight: bold and size differences distinguish headings, subheadings and body.

CSS properties for typography: font-family, font-size, font-weight, font-style, line-height, letter-spacing, text-align, text-transform, text-decoration.

Web fonts: fonts such as Google Fonts are loaded with @font-face or a <link> so that all users see the same font; a fallback stack is given, e.g. font-family: "Roboto", Arial, sans-serif;.

Good practice: limit to two or three fonts, keep a consistent hierarchy, ensure accessibility, and support Nepali (Devanagari) fonts where required.

Nested table

A nested table is a table placed inside a cell (<td>) of another table. It is used to build complex layouts. The same effect for grouped data is usually obtained with the rowspan and colspan attributes, which let one cell cover several rows or columns, as in the given table.

HTML code

The table has six data rows (Text, Memory, Storage, Printer, Mouse, Keyboard). "System" spans all six rows, "System Apps" spans the upper group, "System env1" spans the first three rows, "System env2" the Printer row and "System Memory" / "Memory text" the Mouse and Keyboard rows.

<!DOCTYPE html>
<html>
<head>
  <title>Nested Table</title>
  <style>
    table, th, td { border: 1px solid black; border-collapse: collapse; padding: 6px; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Level 1</th><th>Level 2</th><th>Level 3</th><th>Info</th><th>Name</th>
    </tr>
    <tr>
      <td rowspan="6">System</td>
      <td rowspan="4">System Apps</td>
      <td rowspan="3">System env1</td>
      <td>Text</td><td>A</td>
    </tr>
    <tr><td>Memory</td><td>B</td></tr>
    <tr><td>Storage</td><td>C</td></tr>
    <tr>
      <td>System env2</td>
      <td>Printer</td><td>D</td>
    </tr>
    <tr>
      <td rowspan="2">System Memory</td>
      <td rowspan="2">Memory text</td>
      <td>Mouse</td><td>E</td>
    </tr>
    <tr><td>Keyboard</td><td>F</td></tr>
  </table>
</body>
</html>

Each rowspan cell is written only once, in the first row it covers, and the rows below it omit that cell.

Hyperlinking

Hyperlinking is the technique of connecting one web resource (a page, a section, an image, a file or an email address) to another so that clicking the link takes the user to the target. A hyperlink is created with the anchor tag <a> and its href attribute:

<a href="target">Clickable text</a>

Ways of linking to a document

1. Linking to an external page (absolute URL): the full address of a page on another site.

<a href="https://www.pu.edu.np/">Visit PU</a>

2. Linking to a page of the same site (relative URL): a path relative to the current file.

<a href="about.html">About us</a>
<a href="pages/contact.html">Contact</a>
<a href="../index.html">Home</a>

3. Linking within the same page (internal link / bookmark): give the target an id and link to it with #.

<a href="#chapter2">Go to Chapter 2</a>
...
<h2 id="chapter2">Chapter 2</h2>

A link can also jump to a section of another page: <a href="notes.html#chapter2">.

4. Email link: opens the user's mail program.

<a href="mailto:info@example.com">Email us</a>

5. Image link: an image used as the clickable item.

<a href="home.html"><img src="logo.png" alt="Home"></a>

6. File download link: links to a PDF or other file; the download attribute asks the browser to save it.

<a href="syllabus.pdf" download>Download syllabus</a>

The target attribute controls where the link opens: target="_blank" opens a new tab, while the default _self uses the same tab.

Document Object Model (DOM)

The DOM is a W3C standard, language-neutral programming interface that represents an HTML or XML document as a tree of objects (nodes). Scripts such as JavaScript use it to access, add, change or delete elements, attributes and text, and to respond to events, so the page can change without reloading.

DOM hierarchy

The window object is the top of the browser's object model, and document is the root of the page tree. Every tag is an element node, its attributes are attribute nodes and its text is a text node.

window
 └── document
      └── html
           ├── head
           │    ├── title ── "My page"
           │    └── meta
           └── body
                ├── h1 ── "Welcome"
                ├── p ── "Hello"
                └── ul
                     ├── li
                     └── li

Example of use:

<p id="msg">Hello</p>
<script>
  document.getElementById("msg").innerHTML = "Welcome to DOM";
</script>

Other window children include history, location, navigator and screen.

Client-side versus server-side scripting

Example: <script>alert("Fill all fields");</script> runs in the browser, whereas <?php echo "Total: " . $total; ?> runs on the server and only the text Total: 500 reaches the browser.

JavaScript form validation

The following page validates four fields when the form is submitted. If any rule fails, an alert is shown and the submission is cancelled by returning false.

<!DOCTYPE html>
<html>
<head>
  <title>Form Validation</title>
  <script>
    function validateForm() {
      var name = document.getElementById("name").value;
      var password = document.getElementById("password").value;
      var contact = document.getElementById("contact").value;
      var email = document.getElementById("email").value;

      // Name: only alphabets (spaces allowed between words)
      var nameRule = /^[A-Za-z ]+$/;
      if (!nameRule.test(name)) {
        alert("Name must contain only alphabets.");
        return false;
      }

      // Password: not empty and longer than 8 characters
      if (password === "") {
        alert("Password cannot be empty.");
        return false;
      }
      if (password.length <= 8) {
        alert("Password must be longer than 8 characters.");
        return false;
      }

      // Contact: digits only
      var contactRule = /^[0-9]+$/;
      if (!contactRule.test(contact)) {
        alert("Contact must contain only numbers.");
        return false;
      }

      // Email: valid format
      var emailRule = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRule.test(email)) {
        alert("Enter a valid email address.");
        return false;
      }

      alert("Form submitted successfully.");
      return true;
    }
  </script>
</head>
<body>
  <form onsubmit="return validateForm()">
    Name: <input type="text" id="name"><br><br>
    Password: <input type="password" id="password"><br><br>
    Contact: <input type="text" id="contact"><br><br>
    Email: <input type="text" id="email"><br><br>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

The regular expression /^[A-Za-z ]+$/ accepts only letters and spaces, /^[0-9]+$/ accepts only digits, and the email pattern requires text, an @, a domain and a dot. The ! operator with test() triggers the error message when a value does not match.

JavaScript

JavaScript is a lightweight, interpreted, object-based scripting language used mainly to make web pages interactive. It runs in the browser (and on servers with Node.js), is embedded in HTML with <script>, and can handle events, validate forms, change the DOM and communicate with servers (AJAX). It is dynamically typed and case sensitive.

Control statements

Control statements decide the order in which statements are executed. They are of three kinds: selection (decision), iteration (loops) and jump statements.

1. Selection statements

if, if...else, else if

var marks = 72;
if (marks >= 80) {
  console.log("Distinction");
} else if (marks >= 60) {
  console.log("First division");   // printed
} else {
  console.log("Pass or fail");
}

switch chooses one of many cases:

var day = 3;
switch (day) {
  case 1: console.log("Sunday"); break;
  case 3: console.log("Tuesday"); break;
  default: console.log("Other day");
}

2. Iteration statements

for loop (known number of repetitions):

for (var i = 1; i <= 5; i++) {
  console.log(i);
}

while loop (condition tested first):

var n = 1;
while (n <= 3) { console.log(n); n++; }

do...while loop (body runs at least once):

var k = 10;
do { console.log(k); k++; } while (k < 5);

for...in / for...of iterate over object properties or array values.

3. Jump statements

• break leaves a loop or switch immediately.
• continue skips the rest of the current iteration.
• return leaves a function, optionally giving a value.

for (var i = 1; i <= 10; i++) {
  if (i === 3) continue;   // skip 3
  if (i === 6) break;      // stop at 6
  console.log(i);          // 1 2 4 5
}

CSS selector

CSS (Cascading Style Sheets) describes how HTML elements look. A selector is the part of a CSS rule that chooses which HTML elements the declarations apply to.

selector {
  property: value;
}

Types of selectors

1. Universal selector (*): selects every element.

* { margin: 0; padding: 0; }

2. Element (type) selector: selects all elements of a tag name.

p { color: blue; }

3. Class selector (.): selects elements having a given class; a class can be used on many elements.

.note { background: yellow; }

<p class="note">Remember this</p>

4. ID selector (#): selects the one element with that id, which must be unique in the page.

#header { text-align: center; }

5. Group selector (,): applies one rule to several selectors.

h1, h2, p { font-family: Arial; }

6. Descendant selector (space): selects elements inside another element at any depth.

div p { color: green; }

7. Child selector (>): selects direct children only.

ul > li { list-style: square; }

8. Adjacent sibling selector (+): selects the element immediately after another.

h1 + p { font-weight: bold; }

9. Attribute selector ([ ]): selects by attribute or value.

input[type="text"] { border: 1px solid gray; }

10. Pseudo-class and pseudo-element selectors: select a state or a part of an element.

a:hover { color: red; }
p::first-line { font-weight: bold; }

When rules conflict, the more specific selector wins: inline style, then ID, then class/attribute/pseudo-class, then element.

Valid XML document

An XML document is well-formed if it follows the basic XML syntax rules: a single root element, every start tag has an end tag, tags are properly nested, tag names are case sensitive, attribute values are quoted and special characters are escaped.

A valid XML document is a well-formed document that also conforms to a set of rules defined in a Document Type Definition (DTD) or an XML Schema (XSD). The DTD or schema states which elements and attributes are allowed, in what order, how many times and with which data types. A parser that checks these rules is a validating parser. Every valid document is well-formed, but a well-formed document need not be valid.

Example (valid against a DTD)

<?xml version="1.0"?>
<!DOCTYPE student [
  <!ELEMENT student (name, roll, course)>
  <!ELEMENT name   (#PCDATA)>
  <!ELEMENT roll   (#PCDATA)>
  <!ELEMENT course (#PCDATA)>
]>
<student>
  <name>Sita Sharma</name>
  <roll>101</roll>
  <course>BCA</course>
</student>

This document is valid because student contains exactly the elements name, roll and course, in that order, and each holds text.

Invalid but well-formed example

<student>
  <roll>101</roll>
  <name>Sita Sharma</name>
</student>

The tags are properly closed, so it is well-formed, but it breaks the DTD because the order is wrong and course is missing. A validating parser reports an error.

Validation is useful for ensuring that data exchanged between applications has the agreed structure.

Difference between XML and HTML

XML Schema (XSD)

An XML Schema is an XML-based language (stored in a .xsd file) that defines the structure and the legal content of an XML document: its elements, attributes, their order, number of occurrences and data types such as string, integer and date. It is the successor of DTD and is better because it is written in XML itself, supports data types and namespaces, and is extensible.

Example

XML document student.xml:

<?xml version="1.0"?>
<student xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="student.xsd">
  <name>Ram Thapa</name>
  <roll>25</roll>
  <email>ram@example.com</email>
</student>

Schema student.xsd:

<?xml version="1.0"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
  <xs:element name="student">
    <xs:complexType>
      <xs:sequence>
        <xs:element name="name"  type="xs:string"/>
        <xs:element name="roll"  type="xs:integer"/>
        <xs:element name="email" type="xs:string"/>
      </xs:sequence>
    </xs:complexType>
  </xs:element>
</xs:schema>

Here student is a complex type because it contains child elements; xs:sequence forces the order name, roll, email; and roll must be an integer, so <roll>abc</roll> would fail validation.

Search engine

A search engine is a software system that searches the World Wide Web for information matching a user's keywords and returns a ranked list of results. Examples are Google, Bing, Yahoo and DuckDuckGo.

Working

1. Crawling: programs called crawlers (spiders or bots) follow links from page to page and collect content.
2. Indexing: the collected data is analysed and stored in a large database called the index, keyed by words and phrases.
3. Query processing and ranking: when the user enters a query, the engine finds matching pages in the index and ranks them using algorithms (for example PageRank, relevance of keywords, freshness, links and location).
4. Result display: the results page (SERP) shows titles, links and snippets.

Types

• Crawler-based search engines (Google).
• Directory-based (Yahoo Directory, DMOZ).
• Meta search engines, which combine results of several engines (Dogpile).
• Specialised search engines (image, video, academic search).

Uses and note

Search engines save time in finding information, and websites use Search Engine Optimization (SEO) to rank higher.

Page layout of a webpage

Page layout is the arrangement of the visual elements of a web page, such as the header, navigation, content, sidebar and footer, so that information is easy to read and navigate.

Common sections

• Header: logo, site title and banner.
• Navigation bar: menu links to the main pages.
• Main content: the articles, text and images.
• Sidebar (aside): related links, advertisements.
• Footer: copyright, contact and policy links.

HTML5 semantic elements used for layout are <header>, <nav>, <main>, <section>, <article>, <aside> and <footer>.

<body>
  <header>Site title</header>
  <nav>Home | About | Contact</nav>
  <main>
    <article>Content</article>
    <aside>Links</aside>
  </main>
  <footer>&copy; 2024</footer>
</body>

Layout techniques

• Tables (old method, now discouraged).
• <div> elements with CSS float or positioning.
• CSS Flexbox and CSS Grid for modern, flexible layouts.
• Media queries for responsive layouts on different screen sizes.

A good layout has a clear visual hierarchy, consistent alignment, adequate white space and a design that works on mobile and desktop.

Image map

An image map is an image in which different areas (hotspots) act as separate hyperlinks. Clicking a region takes the user to a different destination. It is created with three parts: an <img> with a usemap attribute, a <map> with a matching name, and <area> tags that define the shapes with shape, coords and href. Shapes are rect, circle and poly.

<img src="campus.jpg" alt="Campus" usemap="#campusmap" width="400" height="300">
<map name="campusmap">
  <area shape="rect"   coords="0,0,150,100"   href="library.html" alt="Library">
  <area shape="circle" coords="250,150,50"    href="canteen.html" alt="Canteen">
  <area shape="poly"   coords="300,10,380,10,340,90" href="lab.html" alt="Lab">
</map>

HTML code for the table

<!DOCTYPE html>
<html>
<head>
  <title>Nested Table</title>
  <style>
    table, th, td { border: 1px solid black; border-collapse: collapse; padding: 6px; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Level 1</th><th>Level 2</th><th>Level 3</th><th>Info</th><th>Name</th>
    </tr>
    <tr>
      <td rowspan="6">System</td>
      <td rowspan="4">System Apps</td>
      <td rowspan="3">System env 1</td>
      <td>Text</td><td>A</td>
    </tr>
    <tr><td>Memory</td><td>B</td></tr>
    <tr><td>Storage</td><td>C</td></tr>
    <tr>
      <td>System env 2</td>
      <td>Printer</td><td>D</td>
    </tr>
    <tr>
      <td rowspan="2">System Memory</td>
      <td rowspan="2">Memory text</td>
      <td>Mouse</td><td>E</td>
    </tr>
    <tr><td>Keyboard</td><td>F</td></tr>
  </table>
</body>
</html>

The rowspan cell appears once in the first row it covers; the rows below leave it out, so each row still totals five columns.

Form method attribute

The method attribute of the <form> tag tells the browser which HTTP method to use to send the form data to the server address given in action.

• GET: the data is appended to the URL as a query string (page.php?name=Ram&email=r@x.com). It is visible in the address bar and bookmarkable, has a length limit (about 2000 characters) and should be used for searches and non-sensitive data. It is the default.
• POST: the data is sent in the body of the HTTP request. It is not shown in the URL, has no practical size limit and is used for passwords, registrations, file uploads and any data that changes the server.

<form action="register.php" method="post"> ... </form>

Registration form

<!DOCTYPE html>
<html>
<head>
  <title>Registration Form</title>
</head>
<body>
  <h2>Registration Form</h2>
  <form action="register.php" method="post">
    <table>
      <tr>
        <td><label for="name">Name:</label></td>
        <td><input type="text" id="name" name="name" required></td>
      </tr>
      <tr>
        <td><label for="dob">Date of Birth:</label></td>
        <td><input type="date" id="dob" name="dob" required></td>
      </tr>
      <tr>
        <td><label for="email">Email:</label></td>
        <td><input type="email" id="email" name="email" required></td>
      </tr>
      <tr>
        <td><label for="phone">Phone:</label></td>
        <td><input type="tel" id="phone" name="phone"></td>
      </tr>
      <tr>
        <td></td>
        <td><input type="submit" value="Register"></td>
      </tr>
    </table>
  </form>
</body>
</html>

type="date" shows the date picker, and type="email" makes the browser check the email format.

JavaScript form validation

<!DOCTYPE html>
<html>
<head>
  <title>Form Validation</title>
  <script>
    function validate() {
      var name = document.getElementById("name").value.trim();
      var email = document.getElementById("email").value.trim();
      var password = document.getElementById("password").value;
      var contact = document.getElementById("contact").value.trim();

      // Name cannot be empty
      if (name === "") {
        alert("Name cannot be empty.");
        return false;
      }

      // Valid email id
      var emailRule = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRule.test(email)) {
        alert("Enter a valid email id.");
        return false;
      }

      // Password at least 7 characters
      if (password.length < 7) {
        alert("Password must be at least 7 characters long.");
        return false;
      }

      // Contact only numbers
      if (contact === "" || isNaN(contact) || !/^[0-9]+$/.test(contact)) {
        alert("Contact must contain only numbers.");
        return false;
      }

      alert("Validation successful.");
      return true;
    }
  </script>
</head>
<body>
  <form onsubmit="return validate()">
    Name: <input type="text" id="name"><br><br>
    Email: <input type="text" id="email"><br><br>
    Password: <input type="password" id="password"><br><br>
    Contact: <input type="text" id="contact"><br><br>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

Each check returns false on failure, which stops the form from being submitted. trim() removes leading and trailing spaces so that a name made only of spaces is also treated as empty.

Why CSS is used

• Separation of content and presentation: HTML holds the structure, CSS holds the design, so each is easier to maintain.
• Consistency: one style sheet controls the look of the whole site, and a change in one place updates all pages.
• Less code and faster loading: the same rules are not repeated in every tag, and a style sheet is cached by the browser.
• Better formatting control: fonts, colours, margins, backgrounds, positioning and animation can be set precisely.
• Responsive and multi-device design: media queries adapt pages to phones, tablets and print.
• Accessibility and SEO: clean HTML is easier for screen readers and search engines.

Ways of implementing CSS

1. Inline CSS: the style attribute inside a tag. It affects only that element and has the highest priority.

<p style="color:blue; font-size:18px;">Inline style</p>

2. Internal (embedded) CSS: a <style> element in the <head>. It affects only that page.

<head>
  <style>
    h1 { color: green; }
    p  { text-align: justify; }
  </style>
</head>

3. External CSS: rules are kept in a separate .css file and linked with <link> in the <head>. One file can style many pages, so it is the best method for a whole site.

style.css:

body { background: #f4f4f4; }
h1   { color: darkred; }

HTML:

<link rel="stylesheet" type="text/css" href="style.css">

An external sheet can also be loaded with @import url("style.css"); inside a <style> block.

Priority: inline style overrides internal and external styles; between internal and external, the one that comes later in the document wins when specificity is equal.

Uses of XML

XML (Extensible Markup Language) stores and transports data in a structured, self-describing, platform-independent text format. It is used for:

• Exchanging data between different systems and applications (web services, SOAP, RSS feeds).
• Configuration files (for example Android manifests and Maven files).
• Storing documents and data independent of hardware and software.
• Separating data from presentation, which is then styled with XSLT or CSS.
• Creating new markup languages such as XHTML, SVG and MathML.

XML DOM (Document Object Model)

The DOM parser reads the whole XML document and builds a tree of nodes in memory. The program can then move through the tree in any direction and read, add, change or delete nodes.

Uses:

• Suited for small or medium documents, because the whole tree is held in memory.
• When random access is needed, the same data must be read many times, or the document must be modified and saved again.
• Building or editing an XML document programmatically.

Limitation: it uses more memory and is slower to start on very large files.

SAX (Simple API for XML)

SAX is an event-based parser. It reads the document sequentially from start to end and calls handler methods such as startElement(), characters() and endElement() when it meets each part. It does not build a tree.

Uses:

• Processing very large XML files, since memory use is small.
• Fast, forward-only reading, for example searching for a value or counting elements.
• Streaming data and reading only part of a document.

Limitation: it is read-only and cannot go backwards, so random access or modification is not possible.

Comparison

Responsive design

Responsive web design (RWD) is an approach in which a web page automatically adapts its layout, images and text to the screen size and orientation of the device (mobile, tablet, laptop, desktop), so that one site gives a good experience everywhere. It is built with:

• Fluid grids: widths in percentages or fr, flex and grid, not fixed pixels.
• Flexible images: img { max-width: 100%; height: auto; }.
• Media queries: CSS applied only when a condition is true.
• Viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1">.

.column { width: 33%; float: left; }
@media (max-width: 600px) {
  .column { width: 100%; }
}

Cross-browser compatibility issues

Cross-browser compatibility means that a site looks and works the same in Chrome, Firefox, Safari, Edge and others. Issues arise because browsers use different rendering engines (Blink, Gecko, WebKit) and support standards to different degrees.

1. Different support for HTML5, CSS3 and JavaScript features: a new property (for example some CSS Grid or Flexbox features) may not work in an old browser.
2. Vendor prefixes: some properties need -webkit-, -moz- or -ms- prefixes.
3. Different default styles: margins, padding, fonts and form controls differ, so layouts shift. A CSS reset or normalize.css is used.
4. Box model and layout differences: old Internet Explorer calculated widths differently.
5. JavaScript and DOM differences: event handling and APIs differ across browsers, and old versions lack newer ES features.
6. Font and media format support: video/audio codecs and font formats are not the same everywhere.
7. Older versions of browsers and device differences: users may not update their browser.
8. Plugin dependencies: features based on Flash or other plugins fail on many browsers.

Solutions: use web standards and valid code, feature detection (@supports, Modernizr), polyfills, autoprefixer, CSS resets, progressive enhancement and testing on many browsers and devices with tools such as BrowserStack.

JavaScript objects

An object is a collection of related data and functions stored as name: value pairs. The data items are called properties and the functions are called methods. Almost everything in JavaScript is an object.

Creating objects

1. Object literal:

var student = {
  name: "Hari",
  roll: 12,
  show: function () { return this.name + " " + this.roll; }
};
console.log(student.name);      // Hari
console.log(student.show());    // Hari 12

2. Using new Object():

var car = new Object();
car.brand = "Toyota";

3. Constructor function:

function Person(name, age) {
  this.name = name;
  this.age = age;
}
var p = new Person("Sita", 20);

Properties are accessed with dot notation (p.name) or bracket notation (p["age"]) and can be added or deleted at any time.

Built-in objects: String, Number, Boolean, Array, Date, Math, RegExp, Object. Example: Math.sqrt(16) gives 4, and new Date() gives the current date and time.

Browser objects: window, document, navigator, location, history and screen.

Protocol

A protocol is a set of rules and conventions that governs how data is formatted, transmitted, received and acknowledged between computers on a network. Both the sender and the receiver must follow the same protocol to communicate.

Protocols used in the Internet

• TCP/IP (Transmission Control Protocol / Internet Protocol)
• HTTP / HTTPS (web pages)
• FTP (file transfer)
• SMTP, POP3, IMAP (email)
• DNS (name resolution)
• DHCP (automatic IP assignment)
• Telnet / SSH (remote login)
• UDP, ARP, ICMP, SNMP, VoIP protocols

Four protocols in detail

1. HTTP (HyperText Transfer Protocol)

HTTP is an application-layer protocol used to transfer web pages between a web server and a browser. It works on the client-server request/response model over TCP at default port 80. The browser sends a request (methods such as GET, POST, PUT, DELETE) and the server replies with a status code (200 OK, 404 Not Found, 500 Server Error) and the content. It is stateless, so each request is independent. HTTPS is HTTP secured with SSL/TLS (port 443), which encrypts the data.

2. FTP (File Transfer Protocol)

FTP is used to upload and download files between a client and a server. It uses two TCP connections: a control connection on port 21 for commands and a data connection on port 20 for the file. The user logs in with a username and password (or anonymous login) and uses commands such as get, put, ls and cd. Data and passwords are sent in plain text, so secure versions (SFTP, FTPS) are preferred.

3. SMTP (Simple Mail Transfer Protocol)

SMTP is used to send email from a client to a mail server and between mail servers. It works over TCP at port 25 (587 for submission). It is a "push" protocol: the sender's mail server transfers the message to the recipient's mail server using commands such as HELO, MAIL FROM, RCPT TO and DATA. To retrieve mail, POP3 (port 110) or IMAP (port 143) is used.

4. TCP/IP

TCP/IP is the suite of protocols on which the Internet runs.

• IP (Internet Protocol) gives every device an address (IPv4 32-bit, IPv6 128-bit), breaks data into packets and routes them across networks. It is connectionless and does not guarantee delivery.
• TCP works above IP. It is connection-oriented, establishes a connection by a three-way handshake (SYN, SYN-ACK, ACK), numbers the segments, retransmits lost ones, controls flow and congestion, and reassembles data in order, giving reliable delivery.

Together they provide addressing, routing and reliable end-to-end communication, and application protocols such as HTTP, FTP and SMTP run on top of them.

Elements and attributes

An element is the basic building block of an HTML or XML document. It consists of a start tag, content and an end tag, for example <p>Hello</p>. Elements can contain text, other elements or both, and an element with no content (such as <br> or <img>) is empty.

An attribute gives extra information about an element. It is written inside the start tag as a name="value" pair, for example <a href="index.html" target="_blank">. Here a is the element, and href and target are attributes. In XML, attribute values must always be quoted.

HTML code for the table

The Seminar column is divided into the sub-columns Schedule (Begin, End) and Topic. The Day cells and the Topic cells use rowspan where needed.

<!DOCTYPE html>
<html>
<head>
  <title>Seminar Table</title>
  <style>
    table, th, td { border: 1px solid black; border-collapse: collapse; padding: 6px; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th rowspan="2">Day</th>
      <th colspan="3">Seminar</th>
    </tr>
    <tr>
      <th colspan="2">Schedule<br>Begin &nbsp;&nbsp; End</th>
      <th>Topic</th>
    </tr>
    <tr>
      <td>Monday</td>
      <td>8:00pm</td>
      <td>5:00pm</td>
      <td>Introduction to XML<br>Validity: DTD &amp; Relax</td>
    </tr>
    <tr>
      <td rowspan="2">Tuesday</td>
      <td>8:00</td>
      <td>11:00</td>
      <td>XPath</td>
    </tr>
    <tr>
      <td>11:00am</td>
      <td>2:00pm</td>
      <td>XSL Transformations</td>
    </tr>
    <tr>
      <td>Wednesday</td>
      <td>8:00am</td>
      <td>12:00pm</td>
      <td>XSL Formatting objects</td>
    </tr>
  </table>
</body>
</html>

Here colspan="3" makes "Seminar" cover Begin, End and Topic, and rowspan="2" makes "Day" and "Tuesday" cover two rows.

Client-side vs server-side scripting

A scripting language is an interpreted language used to automate tasks inside another program (a browser or a web server). Scripts are of two kinds depending on where they run.

What JavaScript can do

• Change HTML content and CSS styles dynamically through the DOM.
• Validate form data before it is sent to the server.
• React to events such as clicks, key presses and mouse movement.
• Create and read cookies, and use localStorage/sessionStorage.
• Show alerts, prompts and pop-up messages.
• Detect the user's browser and screen details.
• Send and receive data without reloading the page (AJAX, fetch).
• Draw graphics and animations (Canvas) and perform calculations.

What JavaScript cannot do

• It cannot read or write files on the user's computer (browser sandbox restriction).
• It cannot access a database on the server directly; it needs server-side code or an API.
• It cannot access other computers on the network or open arbitrary network connections.
• It cannot read pages from another domain because of the same-origin policy.
• It cannot run if the user disables JavaScript in the browser.
• It cannot hide its source code from the user, so it is not suitable for secrets such as passwords.

Functions in JavaScript

A function is a named block of code that performs a task and runs when it is called. It is implemented with the function keyword, a name, a parameter list in parentheses and a body in braces. A function may return a value with return; if it does not, it returns undefined.

function functionName(parameter1, parameter2) {
    // statements
    return value;
}

Other forms are the function expression, const add = function(a, b) { return a + b; };, and the arrow function, const add = (a, b) => a + b;. Functions are normally written in the <head> or in an external .js file and are called from events or other code.

Example: HTML and JavaScript demonstrating a function

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Function Demo</title>
  <script>
    // function with parameters and a return value
    function add(a, b) {
      return a + b;
    }

    // function called from a button click
    function showSum() {
      var x = parseFloat(document.getElementById("n1").value);
      var y = parseFloat(document.getElementById("n2").value);
      var result = add(x, y);
      document.getElementById("out").innerHTML = "Sum = " + result;
    }
  </script>
</head>
<body>
  <h3>Add two numbers</h3>
  First number: <input type="text" id="n1"><br><br>
  Second number: <input type="text" id="n2"><br><br>
  <button onclick="showSum()">Calculate</button>
  <p id="out"></p>
</body>
</html>

When the button is clicked, the onclick event calls showSum(). It reads the two values, passes them as arguments to add(), receives the returned sum and writes it into the paragraph with id out. For example, 12 and 8 give Sum = 20.

Why we use CSS

CSS (Cascading Style Sheets) describes the presentation of HTML documents.

• It separates content (HTML) from presentation (CSS), so the code is cleaner.
• One style sheet can control the look of many pages, so a site-wide change is made in one place.
• It saves time and reduces file size, because styles are not repeated in every tag.
• It gives much richer control over fonts, colours, spacing, layout, backgrounds and animation than HTML attributes.
• Pages load faster because the external CSS file is cached.
• The same page can be adapted to different devices (responsive design, media queries) and to printing.

Types of selector

A selector chooses the HTML elements to which a rule is applied.

1. Element (type) selector selects all elements of a tag name.

p { color: blue; }

2. Class selector (.) selects elements with a given class. It can be reused many times.

.note { background: yellow; }      /* <p class="note"> */

3. ID selector (#) selects the one element with that id. An id must be unique.

#header { font-size: 24px; }       /* <div id="header"> */

4. Universal selector (*) selects every element.

* { margin: 0; padding: 0; }

5. Group selector applies one rule to several selectors separated by commas.

h1, h2, p { font-family: Arial; }

6. Descendant selector selects elements inside another element.

div p { color: red; }              /* every p inside a div */

7. Child selector (>) selects direct children only: ul > li { color: green; }.
8. Attribute selector selects by attribute: input[type="text"] { border: 1px solid black; }.
9. Pseudo-class and pseudo-element selectors select a state or part of an element: a:hover { color: red; }, p::first-line { font-weight: bold; }.

Why XML Schema (XSD) is preferred over DTD

Both DTD and XML Schema define the legal structure of an XML document, but XML Schema is more powerful.

Example

XML document:

<?xml version="1.0"?>
<student>
  <name>Ram</name>
  <age>20</age>
</student>

DTD (cannot say that age is a number):

<!DOCTYPE student [
  <!ELEMENT student (name, age)>
  <!ELEMENT name (#PCDATA)>
  <!ELEMENT age (#PCDATA)>
]>

XML Schema (age must be an integer between 16 and 60):

<?xml version="1.0"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
  <xs:element name="student">
    <xs:complexType>
      <xs:sequence>
        <xs:element name="name" type="xs:string"/>
        <xs:element name="age">
          <xs:simpleType>
            <xs:restriction base="xs:integer">
              <xs:minInclusive value="16"/>
              <xs:maxInclusive value="60"/>
            </xs:restriction>
          </xs:simpleType>
        </xs:element>
      </xs:sequence>
    </xs:complexType>
  </xs:element>
</xs:schema>

The schema rejects <age>abc</age> or <age>5</age>, which a DTD would accept. Because of data types, namespaces, finer control and XML syntax, XML Schema is preferred.

XML parsers: DOM and SAX

An XML parser reads an XML document, checks that it is well-formed (and valid if a DTD/schema is given) and makes its data available to a program. The two common API styles are DOM and SAX.

DOM (Document Object Model)

• The parser reads the whole document and builds a tree of nodes in memory (document, element, attribute and text nodes).
• The program can move around the tree in any direction, and can read, add, modify or delete nodes.
• It is easy to use and allows random access, but it uses a lot of memory and is slow to start for large files.

var xmlDoc = new DOMParser().parseFromString(
  "<book><title>Web Tech</title></book>", "text/xml");
var t = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

SAX (Simple API for XML)

• It is an event-driven, sequential parser. The document is read from start to end and the parser calls handler methods when it meets events such as startDocument(), startElement(), characters(), endElement() and endDocument().
• Nothing is stored unless the programmer stores it, so memory use is very small and it suits very large files.
• It is read-only and forward-only; it cannot go back or modify the document, and the code is more difficult to write.

Comparison

Use DOM when the document is small and must be edited or searched repeatedly; use SAX when the file is large or must be read only once.

Page layout guidelines for web pages

Page layout is the arrangement of text, images, navigation and other elements on a page. A good layout makes the page easy to read, navigate and use. The main guidelines are:

1. Plan before designing. Know the audience and purpose, and sketch the structure (wireframe) first.
2. Keep it simple and clear. Avoid clutter. Use a clear visual hierarchy so the most important content is noticed first (headings, size, colour).
3. Consistency. Use the same header, footer, navigation, fonts and colours on every page. A shared CSS file and templates help.
4. Easy navigation. Place a clear menu in a standard position (top or left), provide a link to the home page on every page, use meaningful link text, and let the user reach any page in few clicks.
5. Use white space. Margins and spacing between blocks and lines make content readable and guide the eye.
6. Readable text. Use legible fonts and sizes (body text of about 16px), strong contrast between text and background, short lines and short paragraphs with headings and bullet lists.
7. Colour. Use a limited palette of 2 to 3 colours, avoid combinations that clash or cannot be read by colour-blind users.
8. Images and multimedia. Use relevant, optimized images with alt text, so that pages load quickly.
9. Alignment and grid. Arrange items on a grid (using tables, div/CSS, Flexbox or Grid) so that elements are aligned and balanced.
10. Put important content above the fold so users see it without scrolling.
11. Fast loading. Keep pages light, compress images, minimise scripts.
12. Responsive and cross-browser. The layout should adapt to desktop, tablet and mobile screens and work in all major browsers.
13. Accessibility and usability. Support keyboard use and screen readers and keep forms simple.
14. Test the pages on different browsers and devices and correct the problems.

JavaScript DOM

The Document Object Model (DOM) is a W3C standard that represents an HTML or XML document as a tree of objects. Each tag becomes an element node, attributes become attribute nodes and text becomes text nodes. JavaScript uses the DOM to access and change the content, structure and style of a page. The root object is document, below window.

document
 └── html
      ├── head → title
      └── body → h1, p, ...

Common uses

• Finding elements: document.getElementById("id"), getElementsByTagName(), getElementsByClassName(), querySelector().
• Changing content: element.innerHTML, element.textContent.
• Changing attributes and style: element.setAttribute("src", "a.png"), element.style.color = "red".
• Creating and removing nodes: createElement(), appendChild(), removeChild().
• Handling events: element.onclick = function() {...} or addEventListener().

<p id="msg">Hello</p>
<button onclick="document.getElementById('msg').innerHTML='Welcome'">Change</button>

Thus the DOM makes pages dynamic and interactive.

XML parser

An XML parser (XML processor) is a software module that reads an XML document and gives the application access to its content and structure. It checks the document for correctness and breaks it into elements, attributes and text.

Functions

• Checks that the document is well-formed (one root element, properly nested and closed tags, quoted attribute values, case-sensitive names).
• Optionally checks that it is valid against a DTD or XML Schema (validating parsers).
• Resolves entities and character references.
• Makes the data available to the program through an API.

Types

• Non-validating parsers only check well-formedness; validating parsers also check against a DTD or schema.
• DOM parser: builds the complete tree in memory, supports random access and modification.
• SAX parser: event-driven, sequential, low memory, read-only.
• Pull parser (StAX): the application requests the next event.

Examples are Xerces, MSXML, the browser's DOMParser and Java's JAXP. An XML parser is the basis of every program that reads XML data, such as RSS readers and web services.

URL (Uniform Resource Locator)

A URL is the address of a resource on the Internet. It tells the browser which protocol to use, which server to contact and where the resource is.

https://www.example.com:443/docs/index.html?id=5#top

FTP (File Transfer Protocol)

FTP is an application-layer protocol used to transfer files between a client and a server. It uses two TCP connections, a control connection (port 21) for commands and a data connection (port 20 in active mode) for the files.

Types / modes of FTP

1. Active FTP: the client opens the control connection and tells the server a port; the server then starts the data connection from its port 20 to the client. It often fails when the client is behind a firewall or NAT.
2. Passive FTP: the server gives a port and the client opens both the control and data connections. It works well through firewalls and NAT and is the usual mode today.
3. Anonymous FTP: public files can be downloaded using the user name anonymous and an e-mail address as password, without an account.
4. Authenticated (user) FTP: a registered user name and password are required, giving access to private areas.
5. TFTP (Trivial FTP): a simple version over UDP (port 69), with no authentication or directory listing, used for booting devices.
6. Secure FTP: FTPS (FTP over SSL/TLS) and SFTP (file transfer over SSH, port 22) encrypt the transfer, because plain FTP sends passwords as clear text.

Core elements and attributes of HTML

An HTML element consists of a start tag, content and an end tag, e.g. <p>Text</p>. Attributes give extra information inside the start tag as name="value".

Core (structural) elements

Core attributes

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My Page</title>
</head>
<body>
  <h1 id="top" class="main">Welcome</h1>
  <p style="color:blue;" title="Intro">This is a paragraph.</p>
  <a href="page2.html">Next page</a>
  <img src="logo.png" alt="Logo" width="100">
</body>
</html>

CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of an HTML/XML document, such as colours, fonts, spacing and layout. It separates content (HTML) from presentation, so one style sheet can control the look of many pages.

Syntax: selector { property: value; }

Types of CSS selectors

1. Universal selector selects all elements.

* { margin: 0; padding: 0; }

2. Element (type) selector selects all elements of a tag.

p { color: blue; }

3. Class selector selects elements with a given class, written with a dot.

.note { background: yellow; }

4. ID selector selects the single element with a given id, written with #.

#header { height: 80px; }

5. Grouping selector applies one rule to several selectors separated by commas.

h1, h2, p { font-family: Arial; }

6. Descendant selector selects elements nested inside another element.

div p { color: red; }

7. Child selector selects direct children only: ul > li { list-style: square; }
8. Adjacent sibling selector selects the element immediately after another: h1 + p { font-weight: bold; }
9. Attribute selector selects by attribute: input[type="text"] { border: 1px solid gray; }
10. Pseudo-class selector selects an element in a state: a:hover { color: green; }
11. Pseudo-element selector selects part of an element: p::first-line { font-style: italic; }

The first header cell and "Red eyes" span two rows (rowspan), and "Average" spans the height and weight columns (colspan).

<!DOCTYPE html>
<html>
<head>
  <title>Test Table</title>
</head>
<body>
  <table border="1" cellpadding="5" cellspacing="0">
    <tr>
      <td rowspan="2"></td>
      <th colspan="2">Average</th>
      <th rowspan="2">Red eyes</th>
    </tr>
    <tr>
      <th>Height</th>
      <th>Weight</th>
    </tr>
    <tr>
      <th>Males</th>
      <td>1.9</td>
      <td>0.003</td>
      <td>40%</td>
    </tr>
    <tr>
      <th>Females</th>
      <td>1.7</td>
      <td>0.002</td>
      <td>43%</td>
    </tr>
  </table>
</body>
</html>

colspan="2" merges two columns into one cell, and rowspan="2" merges two rows into one cell.

The CSS box model treats every HTML element as a rectangular box made of four layers, from inside to outside: content, padding, border and margin.

1. Content is the area holding text or images. Its size is set by width and height (with min-width, max-width, etc.).

2. Padding is the transparent space between content and border: padding, padding-top, padding-right, padding-bottom, padding-left.

3. Border surrounds padding and content: border-width, border-style (solid, dashed, dotted), border-color, shorthand border: 2px solid red;, and border-radius.

4. Margin is the transparent space outside the border separating the element from others: margin, margin-top, margin-right, margin-bottom, margin-left.

div {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}

Total width = width + left/right padding + left/right border + left/right margin:

$200 + 2(10) + 2(5) + 2(20) = 270\text{ px}$

(the element's own box without margin is 230 px).

box-sizing: with content-box (default) width applies to the content only. With box-sizing: border-box, width includes padding and border.

CSS can be applied to an HTML document in four ways.

1. Inline CSS uses the style attribute on a single element. It affects only that element.

<p style="color: red; font-size: 18px;">Inline styled text</p>

2. Internal (embedded) CSS is written inside a <style> element in the <head> and applies to that page only.

<head>
  <style>
    h1 { color: blue; }
    p  { font-family: Arial; }
  </style>
</head>

3. External CSS is kept in a separate .css file and linked with <link> in the <head>. One file can style many pages.

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

style.css:

body { background-color: #f0f0f0; }

4. Import uses the @import rule to load another style sheet, either inside a <style> element or inside a CSS file.

<style>
  @import url("style.css");
  p { color: green; }
</style>

Priority when rules conflict: inline overrides internal/external, and between internal and external the one declared later wins.

Importance of style sheets in web page design

• Separation of content and presentation: HTML holds structure and CSS holds appearance, so each is easier to write and maintain.
• Consistency: one style sheet gives the same look across all pages of a site.
• Easy maintenance: changing one rule in an external file updates the whole site.
• Faster loading and less code: the CSS file is cached by the browser, and repeated formatting tags are avoided.
• Better layout and design control: precise control over fonts, colours, spacing, positioning and responsive layouts.
• Accessibility and multiple devices: different styles for screen, print and mobile through media queries.
• Better SEO and cleaner code: smaller, cleaner HTML is easier for search engines to read.

Types of selectors

1. Universal selector: * { margin: 0; } selects every element.
2. Element selector: p { color: blue; } selects all elements of that tag.
3. Class selector: .box { border: 1px solid; } selects elements with class="box"; reusable on many elements.
4. ID selector: #top { height: 60px; } selects the unique element with id="top".
5. Group selector: h1, h2 { color: red; } applies one rule to several selectors.
6. Descendant selector: div p { } selects every p inside a div.
7. Child selector: ul > li { } selects direct children only.
8. Adjacent sibling selector: h1 + p { } selects the p right after an h1.
9. Attribute selector: a[target="_blank"] { } selects by attribute value.
10. Pseudo-class and pseudo-element selectors: a:hover { }, li:first-child { }, p::first-letter { }.

Basic rules for creating an XML document

1. An XML document may start with an XML declaration: <?xml version="1.0" encoding="UTF-8"?>.
2. There must be exactly one root element containing all other elements.
3. Every start tag must have a matching end tag (or be self-closing, e.g. <br/>).
4. Elements must be properly nested: <a><b></b></a> is valid, <a><b></a></b> is not.
5. XML is case sensitive: <Name> and <name> differ.
6. Attribute values must be quoted: <book id="1">.
7. Element and attribute names must start with a letter or underscore, and contain no spaces.
8. Special characters must be written as entities: <, >, &, ", '.
9. Comments use <!-- ... -->.
10. An attribute name cannot repeat within the same tag.

Physical structure describes how the document is stored: it is made of one or more entities (storage units). The document entity (root file) can refer to other entities, such as internal or external text entities, character entities and binary files like images. Entities are declared in the DTD and referenced by name.

<!DOCTYPE note [ <!ENTITY cp "Copyright BCA"> ]>
<note><footer>&cp;</footer></note>

Here &cp; is replaced by its text when parsed.

Logical structure describes the content organisation: the document is a hierarchy (tree) of elements, attributes, text, comments and processing instructions, with a prolog (declaration, DTD) followed by the root element.

<?xml version="1.0"?>
<students>
  <student id="1">
    <name>Ram</name>
    <age>20</age>
  </student>
</students>

Here students is the root, student is a child with attribute id, and name and age are its children.

XSL (Extensible Stylesheet Language) is a family of W3C languages for transforming and presenting XML. It consists of XSLT (transforms XML into HTML, text or another XML), XPath (selects parts of an XML document) and XSL-FO (formatting objects for output such as PDF). An XSLT style sheet contains templates that match XML nodes and describe the output.

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="/">
    <html><body>
      <xsl:for-each select="students/student">
        <p><xsl:value-of select="name"/></p>
      </xsl:for-each>
    </body></html>
  </xsl:template>
</xsl:stylesheet>

XML processor (parser) is software that reads an XML document, checks that it is well-formed (and valid against a DTD/schema if required) and gives the application access to its content. The two main APIs are DOM and SAX.

DOM (Document Object Model)

• Loads the whole document into memory as a tree of nodes.
• Allows random access, navigation, and modification (add, delete, update nodes).
• Needs more memory, so it is slow for large files.
• Suited to small or medium documents that need editing or repeated access.
• Provided by W3C; it is tree-based.

SAX (Simple API for XML)

• Event-based: the parser reads the document sequentially and calls handler methods such as startElement(), characters() and endElement().
• Does not build a tree, so uses very little memory and is fast.
• Read-only and forward-only; cannot go back or modify the document.
• Suited to large documents and one-pass processing.

jQuery is a fast, small, cross-browser JavaScript library that simplifies client-side scripting with the motto "write less, do more". It is essential for developing web pages for these reasons:

1. Easy DOM selection and manipulation: CSS-like selectors find elements in one line.

$("#title").text("Hello");   // instead of document.getElementById(...).innerText = ...

2. Cross-browser compatibility: it hides differences between browsers, so the same code works everywhere.
3. Shorter code: many lines of plain JavaScript become one line, which saves development time.
4. Simple event handling:

$("button").click(function () { alert("Clicked"); });

5. Effects and animation: hide(), show(), fadeIn(), slideToggle(), animate() make interactive pages easy.
6. AJAX support: $.ajax(), $.get() and $.post() update parts of a page without reloading.
7. Chaining: several actions in one statement: $("p").css("color","red").slideUp().slideDown();
8. Plugins and UI libraries: a large ecosystem (jQuery UI, validation, sliders, date pickers) for ready-made features.
9. Free, open source and well documented, with a large community.
10. HTML/CSS manipulation: easy to add, remove and change elements, classes and styles dynamically.

Page layout is the arrangement of text, images, navigation and other elements on a web page. A poor layout makes a site hard to use, so the following issues must be considered.

1. Screen size and resolution: users have monitors, tablets and phones with different sizes. Fixed-width layouts cause horizontal scrolling on small screens, so responsive/fluid layouts (percentage widths, media queries, flexbox, grid) are preferred.
2. Browser compatibility: browsers render HTML/CSS slightly differently, so the layout must be tested in several browsers.
3. Layout technique: tables (old, not recommended for layout), CSS floats, positioning, flexbox and CSS grid. Layouts are fixed, fluid (liquid), elastic or responsive.
4. Consistency: the header, footer, menus and colour scheme should be the same on all pages, preferably through a shared external style sheet.
5. Navigation and structure: menus must be clear and easy to find, with a visual hierarchy. Typical sections are header, navigation, content, sidebar and footer.
6. Use of white space and alignment: enough spacing and alignment make the page readable and balanced.
7. Readability: suitable font, size, line spacing and good contrast between text and background.
8. Loading time: large images and heavy layouts slow a page, so images should be optimised.
9. Content placement: important content should be "above the fold", visible without scrolling.
10. Accessibility: use semantic tags (<header>, <nav>, <main>, <footer>), alt text for images, and a layout that works with screen readers.
11. Printing and device support: a print style sheet or media type may be needed.

.container { display: flex; }
.sidebar { width: 25%; }
.content { width: 75%; }
@media (max-width: 600px) { .container { flex-direction: column; } .sidebar, .content { width: 100%; } }

Cross browser communication means exchanging data or messages between different browser windows, tabs or frames, or making a page behave the same across different browsers.

• Pages from different origins (protocol, domain, port) are restricted by the same-origin policy for security.
• Communication between windows or frames is done with window.postMessage(), with the receiver listening for the message event and checking event.origin.

otherWindow.postMessage("Hello", "https://example.com");
window.addEventListener("message", function (e) {
  if (e.origin === "https://example.com") console.log(e.data);
});

• For requests to another domain, CORS (Cross-Origin Resource Sharing) headers (Access-Control-Allow-Origin) allow AJAX calls, and JSONP is an older technique.
• Tabs of the same origin can communicate using localStorage events, BroadcastChannel or SharedWorker.
• Differences between browsers in scripts and DOM are handled by feature detection or libraries such as jQuery.

Box model: in CSS every element is a rectangular box consisting of content, padding, border and margin (inside to outside). Width and height set the content, padding is space inside the border, the border surrounds the padding, and margin is the space outside separating the box from other elements.

div { width: 200px; padding: 10px; border: 5px solid; margin: 20px; }

Total horizontal space = $200 + 2(10) + 2(5) + 2(20) = 270$ px. With box-sizing: border-box, the width includes padding and border.

Element Occurrence Indicators (EOI): in an XML DTD, these symbols after an element name in a content model say how many times that element may occur.

<!ELEMENT student (name, phone*, email?, address+)>

Here name appears exactly once, phone zero or more times, email at most once and address at least once.