Web development: Class 12 Computer Science Notes and Short Questions

How the web works, web browsers and servers, URLs, HTML structure and tags, links, images, lists and tables, forms, CSS styling, the role of JavaScript, and website planning and publishing.

Key points

The internet is the global network. The World Wide Web is a collection of web pages linked together and served over the internet using HTTP or HTTPS. A web page is one document. A website is a group of related pages under one domain name. A web browser such as Chrome or Firefox requests pages and displays them.

When you type a URL, the browser asks DNS for the IP address, sends an HTTP request to the web server, and the server sends back the page, usually HTML with CSS, JavaScript and images. The browser then draws the page. This is the client-server model. HTTPS adds encryption so that data cannot be read on the way.

A URL has parts: the protocol (https), the domain name (www.example.com), and the path to the page (/notes/page.html). Static pages are the same for every visitor, while dynamic pages are made by a server program using a database and can change for each user.

HTML (HyperText Markup Language) describes the structure of a page using tags. Most tags come in pairs: an opening tag <p> and a closing tag </p>. Some, such as <br> and <img>, are empty tags. Tags can have attributes written as name="value", for example <a href="page.html">.

Basic structure of an HTML page:

<!DOCTYPE html> tells the browser it is HTML5.
<html> wraps the whole page.
<head> holds information not shown on the page, such as <title> and <meta>.
<body> holds everything the visitor sees.

Common tags:

Headings <h1> to <h6>, with h1 the largest. Paragraph <p>.
<b> or <strong> for bold, <i> or <em> for italic, <u> for underline.
<br> for a line break and <hr> for a horizontal line.
<a href="url">text</a> for a hyperlink.
<img src="file.jpg" alt="description"> for an image. The alt text is shown if the image fails and is read by screen readers.

Lists and tables:

Unordered list <ul> with items <li> shown with bullets.
Ordered list <ol> with items <li> shown with numbers.
Table <table> with rows <tr>, header cells <th> and data cells <td>. The attributes colspan and rowspan merge cells.

A form collects input from the visitor. The <form> tag has an action (where the data goes) and a method (GET or POST). Inside it, <input type="text">, <input type="password">, radio buttons, checkboxes, <select> for a drop-down list, <textarea> for long text and a submit button are used. GET puts data in the URL, so POST is used for passwords and large data.

CSS (Cascading Style Sheets) controls the look of a page: colours, fonts, spacing and layout. A rule has a selector and declarations: p { color: blue; font-size: 16px; }. CSS can be inline (the style attribute), internal (a <style> tag in the head) or external (a separate .css file linked with <link rel="stylesheet" href="style.css">). External CSS is best because one file styles many pages.

JavaScript is a programming language that runs in the browser and makes pages interactive, for example checking a form before sending or showing a message when a button is clicked. HTML gives structure, CSS gives style and JavaScript gives behaviour.

Planning a website: decide its purpose and audience, draw a site map and page layouts, write the content, build the pages, test them in different browsers and on a phone, and publish. Good design is simple, readable, easy to navigate and works on small screens (responsive design).

To publish, a website is uploaded to a web hosting server and a domain name is registered. Pages are checked for broken links and slow images. Copyright of text and pictures must be respected.

Study tip: Practise writing a full small page from memory: doctype, html, head with title, and body with a heading, paragraph, link, image, list and table. Check that every opening tag has its closing tag and all attribute values are in quotes.

Definitions and flashcards

Say the meaning first, then open the card to check.

HTML

The markup language that gives structure to web pages.

Tag

A keyword in angle brackets that tells the browser how to show content.

Attribute

Extra information inside a tag, written as name="value".

Hyperlink

A link that takes the visitor to another page or place.

CSS

A language used to style the look of HTML pages.

URL

The full web address of a resource.

Web server

A computer that stores websites and sends pages when asked.

Domain name

The readable name of a website such as example.com.

Browser

Software that requests, receives and displays web pages.

Short questions with model answers

These are the kind of questions asked for 2, 3 and 5 marks. Try each one before opening the answer.

Differentiate between a web page and a website. (2 marks)

A web page is a single document written in HTML and shown in the browser. A website is a collection of related web pages joined by links and kept under one domain name, such as a school site with pages for admission, news and contact.

What is the use of the alt attribute in the img tag? (2 marks)

The alt attribute gives a short text description of the image. It is shown if the image does not load, helps search engines and is read aloud to visually impaired users.

Write HTML code for an ordered list of three fruits. (3 marks)

<ol> <li>Mango</li> <li>Apple</li> <li>Orange</li> </ol> The ol tag makes a numbered list and each li tag is one item. The browser numbers them 1, 2, 3.

Explain the three ways of adding CSS to an HTML page. (3 marks)

Inline CSS uses the style attribute on one tag and affects only that tag. Internal CSS is written inside a style tag in the head and affects that page. External CSS is stored in a separate .css file linked in the head, and can style many pages at once, so it is easiest to maintain.

Explain how a web page is delivered to a browser after typing a URL. (5 marks)

The browser takes the domain name from the URL and asks a DNS server for its IP address. It then sends an HTTP request to that web server. The server finds the requested file, or builds a page using a program and database, and sends back a response with HTML. The browser reads the HTML, loads the linked CSS, images and JavaScript, and displays the page. This is the client-server model.

Differentiate between GET and POST methods. (3 marks)

GET appends form data to the URL, so it is visible and limited in length. It suits searches. POST sends the data in the body of the request, hiding it from the address bar and allowing larger data. It suits passwords and registration forms.

Common mistakes

Forgetting the closing tag, which breaks the layout of everything after it.
Putting visible content in the head instead of the body.
Leaving out quotation marks around attribute values or writing the wrong file name in src or href.
Saying HTML is a programming language. It is a markup language.
Missing the alt attribute on images.

Practise this chapter

Practice questions and timed test Printable worksheet