Web Technology I

Every page you have ever opened — the NEB result page, a school website, a news site — is a plain text file with tags in it. That is the whole secret of this unit. HTML is not a programming language and there is nothing to compile: you type text, you wrap it in tags, you save it with a .html extension, and a browser turns it into a page. This unit takes you from what the web is to writing, styling and publishing a page of your own.

6.1 Web development, web browsers and search engines

A web page is a single document. A website is a collection of related web pages kept under one domain name. The first page a visitor lands on is the home page.

The part of a browser that turns HTML into pixels is called the rendering engine — Blink in Chrome and Edge, Gecko in Firefox, WebKit in Safari.

1Tab — one open page per tab, so several sites can stay open at once2Back, forward and reload buttons — the browser's history controls3Address bar — type a URL here, or a search phrase, which the browser hands to your default search engine4Bookmark and menu buttons — saving a page and reaching settings, history and downloads5The page itself, rendered from the HTML the server sent

A search engine works in three stages. A crawler (or spider) follows links from page to page collecting documents; an indexer stores the words of every page it finds in a huge index; and when you type a query the query processor searches that index and ranks the hits so the most relevant come first. So when you search, you are not searching the web — you are searching a copy of it that the search engine made earlier.

A browser and a search engine are not the same thing. The browser is software installed on your device; the search engine is a website you visit using a browser.

6.2 The internet, web technologies and content management systems

The internet is the global network of interconnected computer networks. The World Wide Web (WWW) is just one of the services that runs on it — a collection of linked documents identified by URLs and fetched using HTTP. Email, FTP and video calls are other internet services that are not the Web. Tim Berners-Lee invented the World Wide Web at CERN in 1989.

The core technologies you must know by name:

The web works on the client–server model. Your browser is the client; it sends an HTTP request; the web server sends back an HTTP response containing the HTML file and everything the page needs.

Popular examples are WordPress, Joomla and Drupal. A CMS separates three jobs: the content (in the database), the template or theme (the look), and the plugins or extensions (extra features such as a photo gallery or a contact form). That is why a school office clerk can add a notice to the school website without knowing a single tag.

Advantages of a CMS: no coding needed to publish content; several people can work on the same site with different permission levels; the look can be changed by switching the theme without touching the content; updates and backups are built in. Disadvantages: the site is heavier and slower than hand-written HTML; you depend on plugin authors; an unpatched CMS is a common target for attackers.

6.3 HTML: objectives, structure, publishing and hosting

HTML is not a programming language — it has no variables, no conditions and no loops. It describes a document; it does not compute anything.

Objectives of HTML — to structure the content of a page (headings, paragraphs, lists, tables); to link documents to one another through hyperlinks; to embed images, audio and video; and to present forms that collect data from the visitor. Being plain text, an HTML file is platform independent: the same file displays on Windows, Linux, Android and iOS.

Every HTML document has the same skeleton.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My First Web Page</title>
</head>
<body>
  <h1>Namaste from Nepal</h1>
  <p>This is my first web page.</p>
</body>
</html>

• <!DOCTYPE html> tells the browser this is an HTML5 document. It is a declaration, not a tag.
• <html> is the root element; everything else lives inside it.
• <head> holds information about the page — title, character set, links to stylesheets. Nothing in the head appears in the page body.
• <title> sets the text shown on the browser tab and used by search engines. It is compulsory.
• <body> holds everything the visitor actually sees.

Tags versus attributes. A tag is the keyword in angle brackets that names an element — <p>, <img>, <table>. Most tags come in pairs: an opening tag <p> and a closing tag </p>. A few are empty (or void) tags that have no closing partner, such as <br>, <hr>, <img> and <meta>.

An attribute is extra information written inside the opening tag as name="value", which modifies the element.

<img src="everest.jpg" alt="Mount Everest" width="300">

Here img is the tag and src, alt and width are three attributes. An attribute never appears in a closing tag.

Publishing and hosting. Writing the file is only half the job. To publish it:

1. Create the pages in a text editor (Notepad, Notepad++, VS Code) and save with a .html extension.
2. Test every page locally by opening it in a browser.
3. Buy or register a domain name (§6.13).
4. Buy space on a web server — this is web hosting.
5. Upload the files to the server using FTP software such as FileZilla, or the hosting control panel (cPanel).
6. Test the live site and keep it updated.

6.4 Basic tags: HTML, HEAD, TITLE and BODY

The four structural tags were shown in §6.3. The <body> tag carries the attributes that control the look of the whole page.

A colour is written either as a name (red, navy, orange) or as a hexadecimal code #RRGGBB, two hex digits each for red, green and blue. So #FF0000 is pure red, #000000 is black and #FFFFFF is white.

Background sound was set by the <bgsound> tag, which only ever worked in Internet Explorer:

<body bgcolor="#fff8e7" text="#003366" background="paper.png">
  <bgsound src="music.mid" loop="infinite">

Warning: <body> attribute "background" not allowed for HTML5
Warning: <body> attribute "bgcolor" not allowed for HTML5
Warning: <body> attribute "text" not allowed for HTML5
Warning: <h1> attribute "align" not allowed for HTML5
Warning: <basefont> element removed from HTML5
Warning: <font> element removed from HTML5
Warning: <bgsound> is not approved by W3C

The HTML5 way to do the same thing is one line of CSS:

body { background-color: #fff8e7; color: #003366;
       background-image: url("paper.png"); }

6.5 Heading tags and the FONT tag

HTML has six levels of heading, <h1> down to <h6>. <h1> is the largest and most important, <h6> the smallest. Headings are not just big text: search engines and screen readers use them to work out the structure of the page, so use one <h1> per page and go down in order.

<h1 align="center">Heading level 1</h1>
<h2 align="left">Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

The align attribute takes left (the default), center, right or justify. In HTML5 it is replaced by style="text-align:center".

The <font> tag used to control the appearance of text and has three attributes:

<basefont size="4"> set a default size for the rest of the page. A size can also be given relative to the base: size="+2" means two steps larger.

<basefont size="4">
<font size="5" color="red" face="Arial">Big red Arial text</font>
<p>Normal text, then <small>small text</small> and <big>big text</big>.</p>

<small> renders one step smaller and <big> one step larger than the surrounding text. <small> survives in HTML5 (it now means fine print, like a copyright line); <big> was removed — the Tidy validator reports Warning: <big> element removed from HTML5. The CSS replacement for the whole <font> tag is:

p { font-family: Arial, sans-serif; font-size: 18px; color: navy; }

6.6 Paragraphs, line breaks and comments

A browser collapses every run of spaces, tabs and newlines in your source into a single space. Pressing Enter in the editor does nothing to the page. You must say where paragraphs and lines end with tags.

• <p> … </p> marks a paragraph. Browsers put blank space above and below it. align works here too.
• <br> forces a line break inside a paragraph. It is an empty tag with no closing partner (you may write <br />).
• <hr> draws a horizontal rule — a dividing line. Also an empty tag.

<p>First line<br>Second line after a break.</p>
<hr>
<p align="justify">A justified paragraph.</p>

A comment is a note for the author that the browser ignores completely:

<!-- This is a comment. The browser does not display it. -->

Comments explain sections of a long page and are also used to temporarily switch off a piece of code while testing. They may run over several lines, but they may not be nested inside one another.

6.7 Formatting text

These tags change how a run of text looks or what it means.

<b> and <i> are presentational — they say "make it look bold". <strong> and <em> are semantic — they say "this matters", and a screen reader will change its tone of voice for them. They look identical on screen.

<pre> is the one tag that switches off the whitespace-collapsing rule, which makes it the right tag for program code and for tables of figures typed by hand.

<p><b>Bold</b>, <i>italic</i>, <u>underlined</u>,
   <mark>highlighted</mark>, <em>emphasised</em>,
   <strong>strong</strong>.</p>
<p>H<sub>2</sub>O is water and 5<sup>2</sup> is 25.</p>
<blockquote cite="https://www.neb.gov.np">
  A quotation is indented from both sides by the browser.
</blockquote>
<pre>
Roll   Name         Marks
  1    Sushmita       82
  2    Bibek          74
</pre>

6.8 Lists: ordered, unordered and definition

An ordered list numbers its items automatically. <ol> opens it and each item is an <li>.

An unordered list <ul> puts a bullet in front of each item instead of a number. The bullet shape used to be set by type="disc" (the default, a filled circle), type="circle" (hollow) or type="square". In HTML5 this is style="list-style-type:square".

<ol type="I" start="3">
  <li>Kathmandu</li>
  <li value="7">Pokhara</li>
  <li>Biratnagar</li>
</ol>

That list displays as III. Kathmandu, then VII. Pokhara — because value="7" overrides the count — then VIII. Biratnagar, which continues from 7, not from IV.

Lists can be nested: put a whole <ul> inside an <li> of another list.

<ul style="list-style-type:square">
  <li>Input unit</li>
  <li>Processing unit
    <ul style="list-style-type:circle">
      <li>ALU</li>
      <li>CU</li>
    </ul>
  </li>
  <li>Output unit</li>
</ul>

A definition list (also called a description list) pairs terms with their meanings. It uses three tags: <dl> for the list, <dt> for the term and <dd> for the definition, which the browser indents.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language, used to structure a web page.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets, used to present a web page.</dd>
</dl>

6.9 The ADDRESS tag, links and the anchor tag

<address> marks up contact information for the author or owner of a page. Browsers show it in italics as a block.

<address>
  NEBians, Sanothimi, Bhaktapur<br>
  Email: <a href="mailto:info@example.com.np">info@example.com.np</a>
</address>

A hyperlink is text or an image that takes you somewhere else when clicked. It is made with the anchor tag <a>, whose essential attribute is href (hypertext reference) — the destination.

<a href="https://moecdc.gov.np">Curriculum Development Centre</a>

The text between <a> and </a> is what the visitor sees and clicks.

There are three kinds of link by destination:

• External link — to another website: href="https://neb.gov.np".
• Internal link — to another page of the same site, using a relative path: href="unit06.html" for a file in the same folder, href="notes/unit07.html" for one in a sub-folder.
• Bookmark (same-page) link — to a named point on the page, using #: href="#summary" jumps to the element whose id is summary.

An email link uses the mailto: scheme and opens the visitor's mail program. An image link is made by putting an <img> between the anchor tags.

<p><a href="https://neb.gov.np" target="_blank">Open NEB in a new tab</a></p>
<p><a href="#summary">Jump to the summary on this page</a></p>
<p><a href="index.html"><img src="logo.png" alt="Home" width="80"></a></p>
<h2 id="summary">Summary</h2>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My Village</title>
</head>
<body bgcolor="#fffdf5" text="#222222">
  <h1 align="center">My Village</h1>
  <p align="justify">My village lies in the hills of Kaski district,
     about two hours' walk from the nearest road head.</p>
  <h2>Places to see</h2>
  <ul type="square">
    <li>The old temple</li>
    <li>The suspension bridge</li>
    <li>The viewpoint above the school</li>
  </ul>
  <hr>
  <address>Written by a Grade 11 student, 2082 BS</address>
  <p><a href="https://neb.gov.np" target="_blank" title="Exam board">
     National Examination Board</a></p>
</body>
</html>

6.10 Tables and forms

A table arranges data in rows and columns. Three tags build it:

• <table> … </table> encloses the whole table.
• <tr> … </tr> is one table row.
• <th> is a header cell — bold and centred by default.
• <td> is an ordinary data cell.

Cells go inside rows, and rows go inside the table — never the other way round.

<caption> placed immediately after <table> gives the table a title.

<table border="1" cellpadding="5">
  <caption>Marks of Grade 11</caption>
  <tr>
    <th>Roll</th><th>Name</th><th>Computer</th>
  </tr>
  <tr>
    <td>1</td><td>Sushmita</td><td>82</td>
  </tr>
  <tr>
    <td>2</td><td>Bibek</td><td>74</td>
  </tr>
  <tr>
    <td colspan="2">Average</td><td>78</td>
  </tr>
</table>

A form collects data from the visitor and sends it to a program on the server. <form> encloses the controls and carries two attributes: action (the server program that will receive the data) and method (get, which puts the data in the URL, or post, which hides it in the request body — use post for passwords).

The rule that catches most students: radio buttons in the same group must share the same name. That shared name is what makes them mutually exclusive. Check boxes that share a name are still independent of each other.

<form action="register.php" method="post">
  <p>Name: <input type="text" name="sname" size="25"></p>
  <p>Gender:
    <input type="radio" name="gender" value="m" id="m"><label for="m">Male</label>
    <input type="radio" name="gender" value="f" id="f"><label for="f">Female</label>
  </p>
  <p>Subjects:
    <input type="checkbox" name="sub" value="cs" id="cs"><label for="cs">Computer</label>
    <input type="checkbox" name="sub" value="ph" id="ph"><label for="ph">Physics</label>
  </p>
  <p>Address:<br>
    <textarea name="addr" rows="3" cols="30"></textarea></p>
  <p>
    <input type="submit" value="Register">
    <input type="reset" value="Clear">
  </p>
</form>

6.11 HTML5 media elements: audio, video, source, track and embed

Before HTML5, playing sound or video needed a plug-in such as Flash. HTML5 gave the browser two built-in players.

<audio> plays sound; <video> plays moving pictures. Both take the attribute controls (show the play/pause bar), and also accept autoplay, loop, muted and preload. <video> additionally takes width, height and poster (a still image shown before play starts).

<source> is an empty tag placed inside <audio> or <video>. You give one <source> per file format; the browser plays the first one it understands and ignores the rest. This matters because no single format works everywhere — MP3 and MP4 are the widely supported pair, OGG and WebM the open alternatives.

<track> adds a timed text file (WebVTT, .vtt) to a video: subtitles, captions or chapter names. Its kind says which, srclang gives the language and default selects it automatically.

Any text typed between the opening and closing media tags is fallback content — shown only by a browser too old to support the element.

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

<video width="480" height="270" controls poster="thumb.jpg">
  <source src="lesson.mp4" type="video/mp4">
  <source src="lesson.webm" type="video/webm">
  <track src="lesson-en.vtt" kind="subtitles" srclang="en" label="English" default>
  Your browser does not support the video element.
</video>

<embed> is the general-purpose container for external content handled by a plug-in or by the browser itself — a PDF, a map, a video from another site. It is an empty tag.

<embed src="notes.pdf" type="application/pdf" width="480" height="320">

6.12 HTML5 graphics: canvas and SVG

HTML5 can draw pictures in the page itself, in two completely different ways.

<canvas> is a rectangular drawing surface. The tag alone draws nothing — it is a blank sheet, and you paint on it with JavaScript. The result is a grid of pixels (a bitmap), so enlarging it makes it blurry, and once drawn, the browser no longer knows a rectangle is there.

<canvas id="myCanvas" width="200" height="120"
        style="border:1px solid #888"></canvas>
<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.fillStyle = "#3b6ea5";
  ctx.fillRect(20, 20, 120, 60);
  ctx.beginPath();
  ctx.arc(160, 50, 25, 0, 2 * Math.PI);
  ctx.stroke();
</script>

getContext("2d") hands back the drawing toolbox; fillRect(x, y, width, height) paints a solid rectangle; arc(x, y, r, start, end) traces a circle, and stroke() draws its outline.

SVG (Scalable Vector Graphics) takes the opposite approach. Each shape is its own element in the document tree, written as a tag with attributes, so the browser keeps knowing it is a circle. Being described by coordinates rather than pixels, SVG stays perfectly sharp at any size, and each shape can be styled with CSS or given a click handler.

<svg width="200" height="120">
  <rect x="20" y="20" width="120" height="60" fill="#3b6ea5"></rect>
  <circle cx="160" cy="50" r="25" fill="none" stroke="black"></circle>
  <text x="20" y="105" font-size="14">Drawn with SVG</text>
</svg>

Both blocks above draw the same picture: a filled blue rectangle and an open circle beside it.

6.13 Domain names and web hosting

Every computer on the internet is identified by an IP address, a number such as 142.250.183.4. Numbers are hard to remember, so we use names.

A domain name is read right to left, from the most general part to the most specific.

Common top-level domains (TLDs): .com (commercial), .org (organisation), .net (network), .edu (education), .gov (government), .info, .biz. Country-code TLDs identify a country: .np for Nepal, .in for India, .uk for the United Kingdom. Nepal's .np registry is administered by Mercantile Communication Pvt. Ltd., which takes registrations at the third level under second-level domains such as .com.np, .org.np, .net.np, .edu.np (schools, colleges and universities) and .gov.np (government bodies, overseen by the National Information Technology Centre). Registration under .np is free of cost, but the applicant must prove eligibility with citizenship or organisation registration documents.

For most TLDs a domain name is not bought outright — it is registered and rented from a registrar, normally for a year at a time, and must be renewed.

A domain name and hosting are two separate purchases. The domain is the address; the hosting is the land and building. The domain is pointed at the hosting by setting its name servers in the registrar's control panel.

6.14 Cascading Style Sheets: inline, embedded and external

A CSS rule has two parts: a selector naming the elements it applies to, and a declaration block in braces holding property: value; pairs.

h1 { color: navy; text-align: center; }

Here h1 is the selector, color and text-align are properties, navy and center their values. Selectors you must know: the element selector (p), the class selector (.note, matching class="note", reusable on many elements) and the id selector (#header, matching id="header", used once per page).

There are three ways to attach CSS to a page.

1. Inline CSS — a style attribute on a single tag. It styles that one element only. Quick, but it mixes presentation into the structure and cannot be reused, so it is the worst method for a real site.

<p style="color: green">Inline CSS styled only this paragraph.</p>

2. Embedded (internal) CSS — a <style> element inside <head>. Its rules apply to every matching element on that page.

<head>
  <style>
    body  { background-color: #f4f4f4; font-family: Arial, sans-serif; }
    h1    { color: navy; text-align: center; }
    .note { border-left: 4px solid orange; padding-left: 10px; }
  </style>
</head>

3. External CSS — the rules live in a separate .css file with no HTML tags in it at all, and every page links to it with a <link> tag in its <head>.

<link rel="stylesheet" href="style.css">

This is the method professionals use: change one line of style.css and a hundred pages change at once, and the browser caches the file so the site loads faster.

When two rules apply to the same element, the more specific one wins: inline beats embedded, embedded beats external, and an id selector beats a class selector, which beats an element selector.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Three ways to attach CSS</title>
  <link rel="stylesheet" href="style.css">
  <style>
    body  { background-color: #f4f4f4; font-family: Arial, sans-serif; }
    h1    { color: navy; text-align: center; }
    .note { border-left: 4px solid orange; padding-left: 10px; }
  </style>
</head>
<body>
  <h1>Embedded CSS styled this heading</h1>
  <p class="note">External and embedded rules both reach this paragraph.</p>
  <p style="color: green">Inline CSS styled only this paragraph.</p>
</body>
</html>

Practice questions

Group A — Multiple choice (1 mark each)

1. Which tag holds the information that appears on the browser tab? [1]a<body>b<head>c<title>d<meta>
2. Which of the following is an empty tag? [1]a<p>b<br>c<td>d<textarea>
3. The default size of the <font> tag is [1]a1b3c5d7
4. Which attribute of the anchor tag gives the destination of a link? [1]asrcblinkchrefdtarget
5. To merge two columns into one cell of a table you use [1]arowspanbcolspanccellspacingdmerge
6. Which control lets the user choose only one option from a group? [1]acheck boxbtext areacradio buttondsubmit button
7. Which HTML5 tag specifies alternative media files for a video? [1]a<track>b<embed>c<source>d<media>
8. Which type of CSS is written inside the style attribute of a tag? [1]aexternalbembeddedcinlinedimported
9. .np in neb.gov.np is a [1]asub-domainbcountry-code top-level domaincprotocoldpath

Group B — Short answer (5 marks each)

1. Differentiate between a web browser and a search engine with any five points. [5]
2. What is a tag? What is an attribute? Explain with an example, and list any four empty tags. [5]
3. Write the HTML code for an ordered list of three provinces numbered in capital Roman numerals, each province carrying a square-bulleted sub-list of its cities. [5]
4. Write the HTML code to create a table of three rows and three columns with a border, showing the roll number, name and marks of two students. [5]
5. What is CSS? Explain the three ways of attaching CSS to a web page with one example of each. [5]
6. What is a domain name? What is web hosting? Differentiate between them. [5]

<ol type="I">
  <li>Bagmati
    <ul type="square">
      <li>Kathmandu</li>
      <li>Bhaktapur</li>
    </ul>
  </li>
  <li>Gandaki
    <ul type="square">
      <li>Pokhara</li>
    </ul>
  </li>
  <li>Koshi
    <ul type="square">
      <li>Biratnagar</li>
    </ul>
  </li>
</ol>

<table border="1" cellpadding="5">
  <tr><th>Roll</th><th>Name</th><th>Marks</th></tr>
  <tr><td>1</td><td>Sushmita</td><td>82</td></tr>
  <tr><td>2</td><td>Bibek</td><td>74</td></tr>
</table>

Group C — Long answer (8 marks each)

1. (a) Draw and explain the structure of an HTML document, naming every compulsory element. [3](b) Write the HTML code for a page titled "My School" with a centred <h1> heading on a light background, one justified paragraph, a definition list of two terms, and a link to contact.html that opens in a new tab. [5]
2. (a) What is a form? Name its two main attributes and say what each does. [3](b) Write the HTML code for a student registration form containing a text box for the name, radio buttons for gender, check boxes for optional subjects, a text area for the address, and Submit and Reset buttons. [5]
3. (a) Differentiate between <canvas> and <svg> with any four points. [4](b) Write the HTML5 code to play a video with controls, two alternative source files and an English subtitle track, and explain what each tag does. [4]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My School</title>
</head>
<body bgcolor="#fffdf5">
  <h1 align="center">My School</h1>
  <p align="justify">Our school was established in 2035 BS and today
     teaches over eight hundred students in Grades 1 to 12.</p>
  <dl>
    <dt>NEB</dt>
    <dd>National Examination Board, which conducts the Grade 11 and 12 examinations.</dd>
    <dt>CDC</dt>
    <dd>Curriculum Development Centre, which writes the syllabus.</dd>
  </dl>
  <p><a href="contact.html" target="_blank">Contact us</a></p>
</body>
</html>

<video width="480" height="270" controls poster="thumb.jpg">
  <source src="lesson.mp4" type="video/mp4">
  <source src="lesson.webm" type="video/webm">
  <track src="lesson-en.vtt" kind="subtitles" srclang="en" label="English" default>
  Your browser does not support the video element.
</video>