Web Page Design

Every website you open — the NEB results page, a news portal, the Nagarik App's web version, Wikipedia — is built from plain text files written in HTML. A browser reads those files and turns them into headings, paragraphs, pictures, tables and links. In this lesson you learn how the World Wide Web works and then write web pages yourself: the structure of an HTML document, tags for formatting text, lists, images, links and tables, and finally a small website of linked pages that you can open in any browser. All the code in this lesson was tested in a real browser (Chromium), and what it shows is described exactly.

10.1 World Wide Web: web page, website, web browser, URL and HTML

The World Wide Web (WWW, or "the web") was invented by Tim Berners-Lee, a British scientist at CERN, the European physics laboratory near Geneva. He proposed it in March 1989, wrote the first web server, the first browser and HTML by the end of 1990, and announced the web to the public in August 1991. In 1993 CERN made the web software free for everyone, and the web grew explosively.

The Internet and the web are not the same. The Internet is the worldwide network of networks — cables, satellites, routers and computers joined together. The web is one service that runs on the Internet, like email, video calls and online games.

1Tabs: one for each open page; a tab shows the page's title2Address bar: the URL, here https://en.wikipedia.org/wiki/Firefox3Back, forward and reload buttons4Bookmarks toolbar for favourite pages5The web page itself6Hyperlinks (blue text) that open other pages

The parts of a URL

A domain name is read from the right. In www.janataschool.edu.np, np is the country code of Nepal, edu shows the type of organisation (education), janataschool is the organisation's own name and www is the name of its web server. Other types used in Nepal are gov.np (government), com.np (companies) and org.np (organisations); worldwide there are .com, .org, .net and many more. A .np domain is registered free of charge for Nepali citizens and organisations at register.com.np.

HTML

HTML is a markup language, not a programming language: it describes a document but cannot calculate or make decisions.

Tags. A tag is a keyword written inside angle brackets: <p>. Most tags are container (paired) tags: an opening tag <b> and a closing tag </b> with a slash, with the content between them. A few are empty (unpaired) tags that have no content and no closing tag: <br>, <hr>, <img>. An element is the opening tag, the content and the closing tag together.

Attributes. An attribute gives extra information about an element. It is written inside the opening tag as name="value", for example <img src="school.jpg" width="300"> or <p align="center">. HTML tags are not case-sensitive (<B> works like <b>), but lower case is the modern practice.

Tools. An HTML file is plain text, so any text editor will do: Notepad on Windows, or code editors such as Notepad++, Visual Studio Code and Sublime Text, which colour the tags. The file is saved with the extension .html (or .htm) and opened in a browser.

10.2 Structure of an HTML document: html, head, title and body

Every web page has the same skeleton:

<!DOCTYPE html>
<html>
<head>
  <title>My First Page</title>
</head>
<body>
  Namaste! This is my first web page.
</body>
</html>

Nesting. Elements fit inside one another like boxes, and they must be closed in the reverse order of opening: <b><i>Nepal</i></b> is correct, <b><i>Nepal</b></i> is not. Indenting the code (as above) makes the nesting easy to see.

The body tag can take attributes for the whole page, for example <body bgcolor="lightyellow" text="navy"> for the background and text colours. Like <font> and align below, these old attributes still work in browsers but are replaced in HTML5 by CSS (styles), which you will meet in Grade 9.

The browser ignores extra spaces and line breaks in the code: three spaces show as one, and pressing Enter in Notepad does not start a new line on the page. Lines and paragraphs are made with tags. Notes for yourself can be written as comments, <!-- like this -->, which the browser does not show.

10.3 Formatting tags: headings, paragraphs, line breaks, bold, italic, underline and font

The align attribute of headings and paragraphs takes left (default), center, right or justify: <h1 align="center">. Colours are written as names (red, green, navy) or as hexadecimal codes such as #FF0000 (red) and #008000 (green).

<!DOCTYPE html>
<html>
<head>
  <title>Nepal</title>
</head>
<body>
  <h1>Nepal</h1>
  <h2>Geography</h2>
  <p>Nepal lies between <b>China</b> and <i>India</i>.</p>
  <p>Its highest peak is <u>Mount Everest</u>,<br>8,848.86 metres high.</p>
  <hr>
  <p><font face="Arial" size="5" color="green">Visit Nepal!</font></p>
</body>
</html>

10.4 Lists, images and hyperlinks

Lists

Unordered list <ul> — items marked with bullets. Each item is an <li> (list item). The type attribute chooses the bullet: disc (filled circle, the default), circle (hollow) or square.

Ordered list <ol> — items numbered automatically. type chooses the numbering: 1 (1, 2, 3 — default), A (A, B, C), a (a, b, c), I (I, II, III) or i (i, ii, iii); start chooses the first number.

Lists can be nested: a <ul> or <ol> placed inside an <li> makes sub-points. A description list <dl> holds terms <dt> and their descriptions <dd>.

<h3>Fruits of Nepal</h3>
<ul type="square">
  <li>Mango</li>
  <li>Litchi</li>
  <li>Orange</li>
</ul>
<h3>Making tea</h3>
<ol>
  <li>Boil water.</li>
  <li>Add tea leaves.</li>
  <li>Add milk and sugar.</li>
</ol>
<ol type="I" start="3">
  <li>Kathmandu</li>
  <li>Pokhara</li>
  <li>Chitwan</li>
</ol>

Images

The empty tag <img> places a picture on the page:

<img src="images/school.jpg" alt="Our school building" width="320">

Pictures for the web are usually JPG (photos), PNG (drawings, logos, transparency) or GIF (simple animations). The path is relative to the page: images/school.jpg means "the file school.jpg in the folder images, next to this page".

Hyperlinks

The anchor tag <a> makes a hyperlink; its href (hypertext reference) attribute gives the destination, and the text between the tags is what the visitor clicks. Links appear blue and underlined, and purple once visited.

<h2>Phewa Lake</h2>
<img src="images/pokhara.jpg" alt="Phewa Lake, Pokhara" width="300">
<img src="images/missing.jpg" alt="Photo of Phewa Lake (file missing)" width="200">
<p>Read more at the <a href="https://www.welcomenepal.com">Nepal Tourism Board</a> website.</p>
<p><a href="about.html">About us</a> | <a href="mailto:info@janataschool.edu.np">Email us</a></p>

10.5 Tables in HTML

A table is built row by row:

<table border="1" cellpadding="6">
  <tr>
    <th rowspan="2">Day</th>
    <th colspan="2">Periods</th>
  </tr>
  <tr>
    <th>1st</th>
    <th>2nd</th>
  </tr>
  <tr>
    <td>Sunday</td>
    <td>Maths</td>
    <td>Science</td>
  </tr>
  <tr>
    <td>Monday</td>
    <td colspan="2">Sports Day</td>
  </tr>
</table>

<table border="1">
  <caption>Class 8 Results</caption>
  <tr>
    <th>Name</th>
    <th>Maths</th>
    <th>Science</th>
  </tr>
  <tr>
    <td>Asha</td>
    <td>85</td>
    <td>92</td>
  </tr>
  <tr>
    <td>Rohan</td>
    <td>72</td>
    <td>64</td>
  </tr>
</table>

10.6 Creating and viewing a small website

A website is a set of web pages in one folder, linked to each other by a menu of links. Plan it on paper first: the pages, what each holds, and the links between them (a site map).

Steps

1. Make a folder mysite, and inside it a folder images holding the pictures (e.g. school.jpg).
2. Write the home page and save it in mysite as index.html:

<!DOCTYPE html>
<html>
<head>
  <title>Shree Janata School - Home</title>
</head>
<body bgcolor="#f2f7ff">
  <p>
    <a href="index.html">Home</a> |
    <a href="about.html">About</a> |
    <a href="gallery.html">Gallery</a> |
    <a href="contact.html">Contact</a>
  </p>
  <hr>
  <h1 align="center">Shree Janata Secondary School</h1>
  <p align="center"><i>Lakeside, Pokhara</i></p>
  <img src="images/school.jpg" alt="Our school building" width="320">
  <h2>Notices</h2>
  <ul>
    <li>Science Exhibition on 15 Falgun</li>
    <li>Admission open for Grade 6</li>
  </ul>
</body>
</html>

3. Save a copy as about.html, keep the head and the menu, change the title to Shree Janata School - About and replace the rest of the body with that page's content. Do the same for gallery.html and contact.html, so every page has the same menu.
4. View: double-click index.html. Tested in Chromium, it shows a pale blue page with the menu of four blue links, a line, the centred heading and the italic address, the picture and the bulleted notices; clicking About opens about.html and the tab changes to Shree Janata School - About.
5. Test every link and picture, in more than one browser if you can, and fix any page that does not work.
6. Publish (optional): to put the site on the Internet, copy the folder to a web server through a hosting service, and connect a domain name to it. Free hosting such as GitHub Pages exists, and a .np domain is free for Nepali citizens and organisations.

<img src="image/logo.png" alt="School logo">
<a href="About.htm">About us</a>
<p>Welcome to <b>our school.</p>
<p>We teach Grades 1 to 10.</p>
<p align="center>Pokhara</p>

Practice questions

Group A — Objective (1 mark each)

1. The World Wide Web was invented by [1]aCharles BabbagebTim Berners-LeecBill GatesdLinus Torvalds
2. HTML stands for [1]aHyperText Markup LanguagebHigh Transfer Machine LanguagecHyperText Making LanguagedHome Tool Markup Language
3. Which of these is a web browser? [1]aNotepadbMicrosoft EdgecExceldWindows
4. In https://www.neb.gov.np/results.html, the domain name is [1]ahttpsbwww.neb.gov.npcresults.htmldnp
5. Which is an empty (unpaired) tag? [1]a<p>b<b>c<br>d<title>
6. The text between <title> and </title> appears [1]aas the largest headingbon the browser tabcat the bottom of the pagednowhere
7. Which heading tag shows the largest text? [1]a<h6>b<h3>c<h1>d<head>
8. <ol type="A" start="2"> with three items numbers them [1]aA, B, CbB, C, Dc2, 3, 4dII, III, IV
9. The attribute that gives the file of a picture in <img> is [1]ahrefbaltcsrcdlink
10. The tag that makes a hyperlink is [1]a<a>b<link>c<h>d<l>
11. In a table, a cell that stretches across two columns uses [1]arowspan="2"bcolspan="2"ccellpadding="2"dborder="2"
12. A web page should be saved with the extension [1]a.txtb.docxc.htmld.exe

Group B — Short answer (2 marks each)

1. Differentiate between a web page and a website. [2]
2. What is a URL? Name its parts in https://www.moecdc.gov.np/index.html. [2]
3. Differentiate between the Internet and the World Wide Web. [2]
4. Differentiate between container and empty tags with two examples of each. [2]
5. What is an attribute? Give an example. [2]
6. Write the basic structure of an HTML document. [2]
7. Write HTML code to show Computer Science as the largest, centred heading and Grade 8 below it in red. [2]
8. Write the code for an unordered list of three districts with square bullets. [2]
9. Write the code to insert the picture rhino.jpg, 250 pixels wide, with suitable alternative text. [2]
10. Write code that makes the words Visit NEB a link to https://www.neb.gov.np, opening in a new tab. [2]

<!DOCTYPE html>
<html>
<head>
  <title>Page title</title>
</head>
<body>
  Page content
</body>
</html>

<h1 align="center">Computer Science</h1>
<p><font color="red">Grade 8</font></p>

<ul type="square">
  <li>Kaski</li>
  <li>Chitwan</li>
  <li>Jhapa</li>
</ul>

Group C — Long answer (4 marks each)

1. Write the HTML for a page titled My District that shows a centred main heading, a paragraph with one bold and one italic word, a line, and a numbered list of three places to visit. [4]
2. Write the HTML for this table, with a border and the caption Marks: a header row Name, English, Nepali; and rows Sita 78 85 and Hari 66 72. [4]
3. Write the HTML for a table whose first row is a heading Fee Details spanning three columns, followed by the heading row Grade, Monthly fee, Exam fee and the rows 7, 1500, 300 and 8, 1700, 350. How many cells does it have? [3+1]
4. Explain the steps to create a two-page website (home and about) linked to each other, and to view it in a browser. [4]
5. Explain the terms web browser, URL, HTML and hyperlink with one example each. [4]

<!DOCTYPE html>
<html>
<head>
  <title>My District</title>
</head>
<body>
  <h1 align="center">Kaski District</h1>
  <p>Kaski is famous for <b>Phewa Lake</b> and the <i>Annapurna</i> range.</p>
  <hr>
  <ol>
    <li>Sarangkot</li>
    <li>World Peace Pagoda</li>
    <li>Davis Falls</li>
  </ol>
</body>
</html>

<table border="1">
  <caption>Marks</caption>
  <tr>
    <th>Name</th>
    <th>English</th>
    <th>Nepali</th>
  </tr>
  <tr>
    <td>Sita</td>
    <td>78</td>
    <td>85</td>
  </tr>
  <tr>
    <td>Hari</td>
    <td>66</td>
    <td>72</td>
  </tr>
</table>

<table border="1">
  <tr>
    <th colspan="3">Fee Details</th>
  </tr>
  <tr>
    <th>Grade</th>
    <th>Monthly fee</th>
    <th>Exam fee</th>
  </tr>
  <tr>
    <td>7</td>
    <td>1500</td>
    <td>300</td>
  </tr>
  <tr>
    <td>8</td>
    <td>1700</td>
    <td>350</td>
  </tr>
</table>