Web Technology

A hundred years ago, news traveled by letter and newspaper. Today you can read a page written a minute ago in Japan, pay your school fee from a phone, and watch a class from a village in Jumla. The internet has become part of daily life, giving us a vast amount of information, communication and entertainment, and websites are the places where most of it lives: places to share information, do business and connect with people across the world. Anyone who wants to make, run or simply find their way around the online world well needs to understand the technology behind them.

The name has two parts. Web is about how everything online is connected: pages to pages, people to people, devices to devices, like the threads of a spider’s web. Technology means the tools, the computer programs and the languages that make this connected web work. Put together:

Web technology is the set of tools, software, protocols and languages that people, businesses and organizations use to create, develop and manage applications and content on the internet.

It covers a wide range of things:

• The building blocks of every page: HTML (Hypertext Markup Language), which gives a page its structure, and CSS (Cascading Style Sheets), which gives it its presentation and design.
• Scripting for interactivity: JavaScript, which makes a page respond when you click, type or scroll.
• Server-side technologies, which run on the website’s computer and handle its data: PHP, Python and Node.js (JavaScript run on a server).
• Frameworks for building large web applications in an organized way: React, Angular and Vue.js.
• And the care that goes round all of it: web security (keeping users’ data safe), responsive design (pages that fit every screen, from a phone to a big monitor) and following web standards (the agreed rules, so a page works the same in every browser).

Web technology is the backbone of our digital lives: it shapes how we find information, communicate, learn and shop.

Some examples of web technologies

• a.HTML (Hypertext Markup Language): what every web page is written in; it marks which text is a heading, a paragraph, a link.
• b.CSS (Cascading Style Sheets): sets how those parts look: colors, fonts, spacing, layout.
• c.JavaScript: a language run by the browser that makes a page do things: check a form, open a menu, update a score.
• d.PHP: runs on the server and builds a page fresh for each visitor (a dynamic page), such as your own results page.
• e.Python: a general programming language, also used on servers through frameworks such as Django and Flask.
• f.MySQL: a database system where a web application keeps its data (users, notices, results) and looks it up again.
• g.WordPress: a content management system (CMS): software for building and running a website or blog by filling in forms, without writing the code of every page.

The future of web technology

The future of web technology is an exciting journey that will change how we do things online. Some directions are already clear:

• a.AI and machine learning: smart websites use AI and machine learning to give each user content and suggestions picked for them, and to do tasks automatically (a help chat that answers questions, a shop that suggests what you might need).
• b.Progressive web apps (PWAs): websites that work like an app, straight from the browser. They can be added to the phone’s home screen, keep working offline and send notifications.
• c.Augmented reality (AR) and virtual reality (VR): websites with AR and VR give experiences that feel real, such as walking round a museum, or seeing how a sofa would look in your room through the phone’s camera.
• d.Responsiveness: websites will keep getting better at fitting every device, from a small phone to a television.
• e.Edge computing: the work is done on computers close to where the data is made and used, not in one faraway data center, so web applications respond faster.
• f.Web security: websites are getting smarter at protecting our data from online threats, with stronger encryption, better ways to check who you are (such as a code sent to your phone, or a fingerprint) and ways to stop data breaches (data being stolen).

A good website isn’t typed in one sitting. Think of building a house: first you find out what the family needs, then an engineer draws a plan, then the look is chosen, the house is built, checked, and kept in repair for years. A website is made in the same planned way.

The web development life cycle (WDLC) is a systematic process of creating and maintaining a website. It is a planned method that makes development, improvement and maintenance faster and easier, while keeping the user’s experience, the site’s functions and its ability to adapt in mind. It gives web developers, designers and stakeholders (everyone with an interest in the site: the owner, the users, the people paying for it) a roadmap to work together and deliver a successful site.

Stages of the WDLC

Follow the stages through one example: a website for a secondary school in Dhading.

1. Gathering information: find out who the site is for (the target audience: students, parents, teachers, people looking for admission), what content it must have (notices, results, the routine, photos) and what its structure should be (which pages). The team talks to the principal, teachers and a few parents.
2. Planning: make a basic layout of the site, its structure and pages: which pages there are, and how they link. This is often a sitemap and wireframes (4.3). Home, About, Notices, Gallery, Admission and Contact; every page with the same menu.
3. Design and layout: choose the fonts, colors and images, so the site looks right for its content or brand. The school’s maroon and gold, its logo, a large photo of the building.
4. Content creation: write and collect the real content: text, images, audio and videos. The principal’s message, this year’s notices, photos of sports day.
5. Development: developers write the code (HTML, CSS, JavaScript and server code) that turns the design and content into a working site.
6. Testing: look for errors and fix them: every link, every form, every page on a phone and a computer, in different browsers, and for safety. A form that sends nothing, or a page that is too wide for a phone, is found here.
7. Maintenance and updating: a website needs constant care: new notices, new results, fixes, security updates, and smooth working. A site with last year’s notices on its front page looks abandoned.

DNS (Domain Name System)

Every computer on the internet, including every website’s server, has a number that identifies it, its IP address (Internet Protocol address), such as 203.0.113.25. Computers find each other by these numbers, but people would never remember them. So websites also have names, such as ntb.gov.np, called domain names.

The DNS (Domain Name System) is the system that translates domain names into IP addresses. It works like the contacts on your phone: you tap a name, and the phone dials the number stored with it. When you type the name of a website, your computer sends a request to a DNS server for the IP address of that website’s server, and then connects to that address. A domain name must be unique: no two websites can have the same one.

The last part of a domain name, after the final dot, is its top-level domain. It says what kind of site it is, or which country it belongs to:

Most Nepali sites put a second part before .np: .com.np (business), .org.np (organization), .edu.np (education), .gov.np (Nepal’s government), .net.np (network). So moest.gov.np is a Nepal government site, and the Nepal Rastra Bank’s is nrb.org.np. Other countries have their own codes: .in for India, .cn for China, .jp for Japan, .uk for the United Kingdom.

DNS registration process

To have a name that works everywhere in the world, a website must be registered in the DNS. You register a domain name through a registrar, a company allowed to sell and register domain names; many registrars and hosting companies work in Nepal. The steps:

• a.Choose the domain name: pick a name that is unique, easy to remember and says who you are.
• b.Check its availability: look it up with the registrar’s domain checker, to see that nobody has it already.
• c.Choose a domain name registrar: pick a trusted registrar to register the name officially.
• d.Buy and register your domain name: once you know it is free and have chosen a registrar, pay for it and register it in your name.
• e.Don’t lose your domain name: a domain is registered for a fixed time, often a year. Renew it before it expires, or someone else may take it.

To understand UI and UX, first understand the two halves of every website or app: the front end and the back end.

Front end and back end

Think of a house again. What you see from outside and use every day, the walls, the doors, the windows, the paint, is like the front end. Behind the walls is what keeps it standing and working: the wiring, the plumbing, the pillars and beams. That hidden part is like the back end. The front end catches the eye; the back end makes the house, or the website, work.

The front end is the part of a website or software application that users see and use directly: the buttons you tap, the text you read, the images you view and the layout of the page. It runs in your browser, built with HTML, CSS and JavaScript. A good front end makes the experience pleasant and engaging, and UI/UX design is part of front-end work.

The back end is the part that handles what users don’t see. It runs on the server: it stores and fetches data in a database, runs the site’s program, its functions and logic (checking a password, working out a result, saving a booking), and keeps everything running smoothly. It is built with languages such as PHP, Python, Java or JavaScript (Node.js) and databases such as MySQL.

When you check SEE results online, the front end is the box where you type your symbol number and the page that shows your grades; the back end is the program on the server that looks your number up in the database of results.

UI (user interface)

UI stands for user interface: the point where a user and a digital device or software application meet and interact. UI design is about a product’s visual and interactive parts, its buttons, icons, colors, fonts, menus and layout, so that the interface is attractive, user-friendly and easy to navigate. A banking app’s big “Send money” button, its readable numbers and its clear menu are all UI.

UX (user experience)

UX stands for user experience: the whole experience of a user while using a product, service or system, from opening it to getting the job done. UX design is about understanding users’ needs, behaviors and preferences to make them satisfied. Can a grandmother pay her electricity bill on the app without help? Does it work on a cheap phone with a slow connection? Does it remember her last payment? Those are UX questions.

So UI designs the visual parts you see, the buttons, colors and layout, while UX makes sure that using the website is easy and enjoyable. Together they make the front end interactive and user-friendly.

Advantages of UI/UX design

• a.It increases user engagement with attractive designs: people stay longer and come back.
• b.It improves the user experience: tasks are easy and quick.
• c.It gives a unique look for branding: people recognize the company by its design.
• d.It makes websites and apps easy to use and navigate, even for new users.
• e.It saves development time and cost: problems found in the design are cheap to fix, while problems found after the site is built are costly.

Software used for UI/UX design

• a.Figma: for collaborative design: several people can work on the same design at the same time, in a browser.
• b.Adobe XD: for designing interfaces, buttons and layouts, and making clickable prototypes.
• c.Balsamiq: for making quick, sketch-like wireframes.

Wireframe

A wireframe is the outline or skeleton of a UI: a simple drawing that shows the basic structure and layout of a web page or app, where each part will go, without colors, real pictures or detailed design. Like the plan of a house before the bricks, a wireframe is made early in the design process, in the planning stage, to agree on the layout before anyone spends time on the look. Wireframes can be drawn on paper, or with software such as Sketch, Figma and Balsamiq.

Wireframe design

Wireframe design is the process of making a simplified picture of a user interface or web page. Its key aspects:

1. Structural framework: the basic layout and organization of a page: header, menu, main content, sidebar, footer.
2. User flow and navigation: a user flow is a picture of the path a user takes through a product to finish a task (Home → Admission → fill in the form → Submit); navigation is how a user moves through the interface and uses it (the menu, links, buttons).
3. Quick iteration: wireframes are much less detailed than final designs, so they can be changed and tried again quickly, many times.
4. Prototyping: a prototype is an early working model or sample of a product, made to test and confirm the design before it is fully built. Wireframes can be joined into clickable prototypes: tap the menu on screen 1 and screen 2 opens.
5. Cost-effective exploration: problems are found early in the design, which avoids costly mistakes later.

Benefits of wireframes

• a.Easy to draw: a wireframe has a simple, clean layout made of basic shapes.
• b.Easy to understand: it shows only the essential parts and structure, with no decoration.
• c.Easy to modify: you don’t need to know any programming language to change a wireframe.
• d.No coding required: you draw it as you would with any drawing tool, or with a pencil.

Introduction to HTML

HTML stands for Hypertext Markup Language, the language used to build web pages. The name explains itself:

• Hypertext is text that contains links to other text: click a word, and you jump to another page. That is what the web is made of.
• Markup means symbols or codes added to a document that say how it should be structured, formatted and processed. A teacher marking an essay writes notes in the margin; HTML writes tags around the text: “this is a heading”, “this is a paragraph”, “put a picture here”.
• So a markup language is a way of adding notes, or marks, to a text, to turn it into a web page.

HTML uses predefined tags to describe the structure of a web page, and it is the industry standard for making the skeleton of every page on the web. HTML is not a programming language like Python: it doesn’t calculate or make decisions, it only describes what each part of a page is. Without HTML, the World Wide Web would not exist.

To write HTML you need only a simple text editor, such as Notepad on Windows. Special code editors make it easier:

1. Sublime Text: a fast, versatile text editor with many features.
2. Visual Studio Code (VS Code): a popular free editor from Microsoft, with tools for making software and websites in many languages.
3. Notepad++: a popular free text editor for Windows, good for HTML documents.

In the 2000s, many people made pages with WYSIWYG editors (“what you see is what you get”), where you arrange the page like a document and the program writes the HTML: Adobe Dreamweaver, Microsoft FrontPage (stopped in 2006) and CoffeeCup. Today most web developers write code in an editor like VS Code, or build sites with a CMS such as WordPress.

HTML is used for:

• a.creating the basic layout of a web page;
• b.creating and formatting the text on web pages;
• c.embedding images, graphics, sounds and videos in web pages;
• d.adding tables, forms and hyperlinks to web pages.

HTML tags

Each part of a web page is marked by an HTML tag. Tags are predefined commands that tell the browser how to display what is inside them. A tag is written inside angle brackets: it starts with < (less than) and ends with > (greater than), like <p> or <h1>. Tags decide a page’s structure, appearance, layout and flow, and the tags themselves are not shown on the page.

A tag has a name (which tag it is, such as p or img) and may have attributes with values, which give it more information. HTML tags are not case-sensitive: <P>, <p> and <B>, <b> work the same. Older books often write tags in capitals; today everyone writes them in lowercase, and this book does too.

A tag and everything it holds make an element. There are two types of tags:

• a.Container (paired) tags have an opening tag and a closing tag, with the content between them: <b>Nepal</b>, <p>…</p>. The opening tag starts with < and switches the tag’s effect on; the closing tag starts with </ and switches it off. Most tags are paired.
• b.Empty (unpaired) tags have only an opening tag and no closing tag, because they hold no content: they do one job at the place where they stand. <br> starts a new line and <img> puts a picture on the page. They are also called stand-alone or self-closing tags, and are sometimes written with a slash, <br />, which means the same.

HTML attributes

Attributes are extra settings written inside an opening tag to control or change how the tag behaves. Each is a name, an equals sign and a value in quotes: name="value". A tag can have several, separated by spaces, in any order. For example, <a href="festivals.html"> says where a link goes, and <img src="nyatapola.jpg" width="240"> names a picture and its width.

In older HTML, attributes also set how text looked: <font size="5" color="red">I love my country</font> made the words bigger and red. That still works in browsers, but it is obsolete: today the look is set with CSS (4.5).

Structure of HTML

Every language has a structure, and so does an HTML document. Elements are nested, one inside another, to build a hierarchy, like boxes in boxes. Every page has four main parts:

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

1. The doctype declaration, line 1: <!DOCTYPE html> tells the browser that this is a modern HTML page. It isn’t a tag of the page, only a note at the top.
2. The <html> element, lines 2–11, holds the whole page. Its lang attribute says the page’s language (en English, ne Nepali).
3. The <head> element, lines 3–6, holds information about the page, which isn’t shown in it: the <title> shown on the browser’s tab and in search results, the character encoding (<meta charset="utf-8">, so Nepali letters arrive as Nepali), and links to style sheets and scripts.
4. The <body> element, lines 7–10, holds everything the page shows: headings, paragraphs, pictures, tables, forms.

An element opened inside another must close inside it: the last opened is the first closed. <p><b>Nepal</b></p> is right; <p><b>Nepal</p></b> is wrong.

Creating an HTML document

All you need to make an HTML file is a basic text editor. Each operating system has its own: Notepad on Windows, TextEdit on a Mac (switched to plain text, under Format → Make Plain Text), and Vim, Emacs or gedit on Linux. There are also editors made for code, such as Notepad++, Sublime Text, VS Code, EditPlus and TextPad. An HTML file is saved with the extension .html (or the older .htm).

Sublime Text is a program for writing and editing code. It has syntax highlighting (it colors the different parts of your code, so it is easier to read), autocomplete (it suggests the rest of a tag as you type, so you code faster), and customization (you can change how it looks and works).

To make and save an HTML document in Sublime Text:

1. Open Sublime Text on your computer (download it from sublimetext.com/download).
2. Open the File menu and choose Save.
3. Sublime Text shows the Save As dialog box, asking for a file name.
4. In the file name box, type a name ending in .html or .htm (for example index.html) and choose the drive and folder to save it in.
5. Click Save.
6. Now write your HTML code. Sublime Text colors it as HTML, because the file ends in .html. Save again (Ctrl + S) after each change.

To see your web page, double-click the file: it opens in your default browser. After each change, save in the editor and reload the browser (F5).

Organizing text in an HTML document

Comments

A comment is a note for people reading the code: an explanation, a reminder, or a part switched off for now. The browser ignores it and never shows it on the page. A comment starts with <!-- (with an exclamation mark after the opening bracket) and ends with -->:

<!-- Your comment here -->

A comment can be on one line (a single-line comment) or run over several lines (a multi-line comment): everything between <!-- and --> is ignored.

<html>  <head>    <title>Example of comments</title>  </head>  <body>    <!-- The body holds everything the page shows -->    There are two kinds of comments:<br>    1. Single-line comments<br>    2. Multi-line comments    <!-- This comment         runs over         three lines -->  </body></html>

The page shows only the three lines of text; both comments stay hidden.

Line breaks and spaces

The <br> tag starts a new line, like pressing Enter on your keyboard. It is an empty tag: nothing goes after it and there is no closing tag.

A browser shows only one space between words, however many spaces or line breaks you type in the code. To show extra spaces, type   (a non-breaking space) for each one: one   is one space, two are two spaces, and so on. Note the semicolon at its end. (A non-breaking space also keeps two words together on one line, as in 10 km.)

Paragraphs

A paragraph is a group of sentences about one topic. The <p> tag marks one: it puts the sentences that belong together in their own block, with a little space above and below. When you use <p>, you are saying “this is a paragraph”.

In older HTML, the align attribute, with the value left, center or right, set a paragraph’s alignment (left by default): <p align="center">. It is obsolete; the modern way is CSS: <p style="text-align: center;">.

Text formatting tags

Once the structure is in place, the content goes in the body. Text formatting tags change, define or improve how text looks on a page: headings, lines, bold, italics and more.

Heading tags: <h1> to <h6>

HTML has six levels of headings, from <h1>, the biggest and most important, to <h6>, the smallest. All are shown in bold, with a size set by the level. Use <h1> for the page’s main title (once), <h2> for its sections, <h3> for parts of a section, and so on, the way a book has a title, chapters and sub-headings.

<h1>This is heading one.</h1><h2>This is heading two.</h2><h3>This is heading three.</h3><h4>This is heading four.</h4><h5>This is heading five.</h5><h6>This is heading six.</h6>

Each line shows its words in bold, the first in the biggest letters and each one after it smaller (<h4> is about the size of ordinary text; <h5> and <h6> are smaller than it).

Horizontal line: <hr>

The <hr> tag draws a horizontal line (a rule) across the page, from left to right, to separate parts of the content. It is an empty tag. Its old attributes, now obsolete but still shown by browsers:

<hr align="left" width="25%" size="3" color="blue">Nepal is the birthplace of Lord Buddha.

This draws a blue line 3 pixels thick, a quarter of the page wide, at the left, with the sentence under it.

Text styles

So E = mc<sup>2</sup> shows E = mc², and (a + b)<sup>2</sup> shows (a + b)². Subscript writes chemical formulas (CO₂) and number bases: (1011)<sub>2</sub> shows (1011)₂, as in Unit 2.

Two more are worth knowing: <strong> marks words as important and <em> gives them emphasis. They look like bold and italics, but they also tell a screen reader (software that reads pages aloud for blind users) to stress them, so they are preferred when the words matter, not just their look.

The <font> tag

In old HTML, everything between <font> and </font> appeared in the face, size and color set by the tag’s attributes:

<font face="Times New Roman" size="5" color="red">Talent is not what you have, talent is what you do.</font>

Color codes

Colors on the web can be written as names (red, maroon) or as hexadecimal color codes: a # and six hexadecimal digits, two each for red, green and blue (RGB), each pair from 00 (none of that light) to FF (all of it, 255). You met hexadecimal in Unit 2. #FF0000 is all red, no green, no blue; #FFFFFF is all three at full, white.

These are the names and codes of the 16 basic colors; any six digits make a color, such as #00CC00, a bright green between Green and Lime.

<font color="#800000">Maroon</font><font color="#808080">Gray</font><font color="#00CC00">Green</font>

The <marquee> tag

The <marquee> tag makes text, an image or other content scroll across the page, like the news ticker at the bottom of a TV screen.

<marquee>I will be a web developer.</marquee><marquee behavior="scroll" direction="down" bgcolor="#CCFF00" scrolldelay="1000">I am marquee running text!</marquee>

The first line scrolls from right to left, again and again. The second moves down inside a lime green box, one small jump a second (1,000 milliseconds).

Links: the anchor tag

The anchor tag, <a>, makes hyperlinks (links). A link can take the user to another web page, to another part of the same page, or to a file such as a PDF, an image or a document.

A browser shows links differently from normal text. By default:

• a.linked text is blue (and purple once you have visited the page);
• b.linked text and images are underlined;
• c.when the mouse pointer is over a link, it turns into a pointing hand.

The syntax:

<a href="URL or path of the page or file">text shown on the page</a>

Attributes of the anchor tag:

• href (hypertext reference): the URL of the page or file the link goes to.
• target: where to open it.

Links are of two types:

• a.External links go to another web page or file, on the same website or a different one.
• b.Internal links go to a particular place on the same page.

External links

<a href="Link_Check.html">Visit my home page</a>

This opens the file Link_Check.html in the same folder. A full address (with https://) links to another website:

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <title>Using external links</title>  </head>  <body bgcolor="skyblue">    <h2 align="center">Visit these links to explore Nepal:</h2>    <p><a href="https://ntb.gov.np">Nepal Tourism Board</a></p>    <p><a href="https://mofa.gov.np">Ministry of Foreign Affairs</a></p>  </body></html>

The page has a sky blue background (the old bgcolor attribute on <body>), a centered heading, and two links, each opening its website in the same tab.

Internal links (bookmarks)

Internal links, or bookmarks, take the user to another place on the same page, such as a section further down, or back to the top. They can also jump to a place on another page. It takes two steps:

1. Give the place an id: <h2 id="section1">Section 1</h2>. An id is a name, unique on the page.
2. Link to it with # and the id: <a href="#section1">Go to Section 1</a>. The # says the name is a place in this page, not another file. To jump to a place on another page, add the id after the file’s name: <a href="notices.html#exams">.

In older HTML, the place was marked with an empty anchor and a name attribute: <a name="top"></a>, linked as <a href="#top">Top</a>. That is obsolete; today any element’s id is used.

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <title>Internal link example</title>  </head>  <body>    <nav>      <!-- Internal links in the navigation menu -->      <ul>        <li><a href="#section1">Section 1</a></li>        <li><a href="#section2">Section 2</a></li>      </ul>    </nav>    <!-- Content for Section 1 -->    <h2 id="section1">Section 1</h2>    <p>This is the content of Section 1.</p>    <!-- Link back to the top of the page -->    <p><a href="#top">Back to top</a></p>    <!-- Content for Section 2 -->    <h2 id="section2">Section 2</h2>    <p>This is the content of Section 2.</p>    <p><a href="#top">Back to top</a></p>  </body></html>

Clicking “Section 2” scrolls the page to the heading with id="section2"; clicking “Back to top” scrolls to the top. The <nav> element marks the page’s menu of links.

Email links

A link can also start an email. When it is clicked, the phone or computer opens its email app with a new message already addressed. Write mailto: and the email address in href:

Send your email to <a href="mailto:info@yourschool.example">our school office</a>.

(yourschool.example stands for your school’s real address.)

Lists

A list groups related items. HTML has three kinds: unordered lists (with bullets), ordered lists (with numbers or letters) and description lists (terms with their descriptions). Each item of an unordered or ordered list is an <li> (list item); a description list uses <dt> and <dd>.

Unordered list: <ul> (bullets)

An unordered list starts with <ul> and ends with </ul>; each item is between <li> and </li>. Its type attribute (now obsolete; CSS’s list-style-type does it today) chooses the bullet:

<b>Some heavenly places of Nepal</b><ul type="square">  <li>Surma Sarovar</li>  <li>Aalital</li>  <li>Ramaroshan</li></ul>

This shows the bold title, then the three places, one under another, each with a small black square in front.

Ordered list: <ol> (numbers)

An ordered list starts with <ol> and ends with </ol>; each item is an <li>. The browser numbers the items itself, so adding or removing an item renumbers the rest. Its attributes (all still standard HTML):

And on one <li>, value changes the numbering in the middle of a list: <li value="10"> is numbered 10, and the items after it 11, 12….

<b>Some heavenly places of Nepal</b><ol type="1" start="3">  <li>Surma Sarovar</li>  <li>Aalital</li>  <li>Ramaroshan</li></ol>

Output:

Some heavenly places of Nepal3. Surma Sarovar4. Aalital5. Ramaroshan

Description list: <dl>

A description list (also called a definition list) lists terms, each with its description, like a glossary. It is written between <dl> and </dl>, each term in a <dt> (description term) and its description in a <dd> (description details), shown a little indented.

<dl>  <dt>Front end</dt>  <dd>Where the user interacts with the system.</dd>  <dt>Back end</dt>  <dd>Where the logic of the system is written.</dd></dl>

Output:

Front end    Where the user interacts with the system.Back end    Where the logic of the system is written.

Nested lists

A list can be put inside another list’s item: a nested list. Close the inner list before the outer </li>.

<ol type="A">  <li>Koshi Province    <ul>      <li>Ilam</li>      <li>Jhapa</li>    </ul>  </li>  <li>Madhesh Province</li></ol>

Images

Besides text, a page can show still and moving pictures. The common picture formats on the web are .jpg (or .jpeg, for photos), .png (for drawings, screenshots and pictures with see-through parts), .gif (small animations), .webp (a newer format that makes smaller files) and .svg (drawings made of lines and shapes, sharp at any size). Pictures are made and saved with software such as Adobe Photoshop, GIMP (free) or a phone’s camera app.

A picture is put on a page with the <img> tag, an empty tag, whose src (source) attribute gives the picture’s file name or address:

<img src="path or address of the image" alt="what the picture shows">

The attributes of <img>:

Older HTML also allowed width and height as a percentage of the window (width="50%"); today that is done with CSS (width: 50%). The obsolete attributes are done with CSS too: float for align, border, and margin for hspace and vspace.

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <title>Education in nation building</title>  </head>  <body>    <marquee bgcolor="yellow" behavior="alternate" direction="right" width="300">Education enlightens the students!</marquee>    <br><br>    <hr color="blue">    <h2 align="center">Inserting an image in an HTML document</h2>    <img src="images/myImage.jpg" height="120" width="200" alt="Students in a computer class">    <br><br>    <img src="images/myImage2.jpg" border="5" alt="Our school building">  </body></html>

The first picture is shown 200 pixels wide and 120 high; the second at its own size, with a 5-pixel border. Both are in a folder named images beside the HTML file, so src gives the folder and the file. You can also save the picture in the same folder as the HTML file and give just its name (src="myImage.jpg"), or give its full address on the web.

Tables

A table arranges data in rows and columns, like a class routine or a marks sheet. In HTML:

• <table> … </table> holds the whole table.
• <tr> … </tr> (table row) holds one row.
• <th> … </th> (table heading) is a header cell: its content is centered and bold by default. A table’s top row is usually made of <th> cells.
• <td> … </td> (table data) is a data cell: its content is left-aligned by default. Each cell can hold text, formatting such as <b>, or even a picture.
• <caption> … </caption>, written just after <table>, gives the table a title, shown above it by default.

The cells are always inside rows, and the rows inside the table; a table has as many columns as its widest row has cells. This table:

is written:

<table border="1">  <tr>    <th>Sunday</th> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th>  </tr>  <tr>    <td>5</td> <td>7</td> <td>10</td> <td>21</td>  </tr>  <tr>    <td>11</td> <td>13</td> <td>3</td> <td>4</td>  </tr></table>

Attributes of the <table> tag

These attributes are obsolete (CSS does each job today, as the last column shows), but browsers still follow them, and older books and exams use them:

background and height on a table were never in any HTML standard, though browsers show them.

Attributes of cells: colspan and rowspan

Two attributes of a cell (<td> or <th>), still standard HTML, merge cells:

• colspan makes a cell stretch across several columns: <th colspan="3"> is one cell three columns wide.
• rowspan makes a cell stretch down several rows: <th rowspan="2"> is one cell two rows tall.

Two more, now obsolete, align a cell’s content. They can be put on a <td> or <th>, or on a <tr> for every cell in the row:

<td valign="top">Top-aligned content</td><td valign="middle">Middle-aligned content</td><td valign="bottom">Bottom-aligned content</td> <td align="left">Left-aligned content</td><td align="center">Center-aligned content</td><td align="right">Right-aligned content</td>

The caption’s old align attribute (align="bottom" or "top") put the caption below or above the table; in CSS, caption-side: bottom.

Three tables

A table with a caption.

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <title>Visit Nepal: famous places</title>  </head>  <body>    <table border="1">      <caption>Visit Nepal: famous places</caption>      <tr>        <th>Place</th>        <th>Description</th>        <th>Highlights</th>      </tr>      <tr>        <td>Pashupatinath Temple</td>        <td>Hindu temple in Kathmandu</td>        <td>Ancient architecture</td>      </tr>      <tr>        <td>Boudhanath Stupa</td>        <td>Center for Buddhism</td>        <td>Religious rituals</td>      </tr>    </table>  </body></html>

The caption shows above a table of three columns and three rows: a bold, centered heading row (Place, Description, Highlights), then a row for each place, every cell with a border.

Without and with cellspacing.

<h3 align="center">Table without cellspacing</h3><table border="1" width="30%" align="center" cellspacing="0">  <caption>Without cellspacing</caption>  <tr> <th>Name</th> <th>Age</th> </tr>  <tr align="center"> <td>Krishna</td> <td>25</td> </tr>  <tr align="center"> <td>Shiva</td> <td>30</td> </tr>  <tr align="center"> <td>Yangchen</td> <td>22</td> </tr></table><hr><h3 align="center">Table with cellspacing</h3><table border="1" width="30%" align="center" cellspacing="10">  <caption>With cellspacing</caption>  <tr> <th>Name</th> <th>Age</th> </tr>  <tr align="center"> <td>Krishna</td> <td>25</td> </tr>  <tr align="center"> <td>Shiva</td> <td>30</td> </tr>  <tr align="center"> <td>Yangchen</td> <td>22</td> </tr></table>

Both tables are 30% of the page wide and centered. In the first, the cells’ borders touch (written cellspacing="0"; without the attribute, browsers leave a gap of 2 pixels). In the second, each cell is a separate box, with 10 pixels between them.

Merging cells with rowspan and colspan.

<table border="2" width="70%" align="center">  <caption align="bottom">Student marks</caption>  <tr align="center">    <th rowspan="2">Name</th>    <th colspan="3">Marks</th>  </tr>  <tr>    <th>Science</th>    <th>Math</th>    <th>Computer</th>  </tr>  <tr>    <td>Dolma</td> <td>80</td> <td>90</td> <td>85</td>  </tr>  <tr>    <td>Rizwan</td> <td>75</td> <td>85</td> <td>90</td>  </tr></table>

Count carefully: row 1 has only two cells written (Name and Marks), but they fill four columns. Row 2 has three, because Name already fills its first column.

Forms

You have filled in forms on websites: a login form, a contact form, a registration form, a search box. Their purpose is to collect data from users and send it to a server to be processed: the server checks your password, saves your booking, or searches for your words.

An HTML form runs on the client side (in the browser) and is the meeting point between the user and the server. It is made with the <form> tag, a container that holds input elements (text boxes, check boxes, buttons…) along with ordinary HTML such as headings and paragraphs. Its opening tag has three attributes:

• name: a name for the form.
• method: how the data is sent: get (the data is added to the page’s address, as in a search: ?q=momo) or post (sent inside the request, out of sight; used for passwords and long data).
• action: the address of the program on the server that will process the data.

<form name="register" action="/register" method="post">  … the form’s inputs …</form>

The <input> element is the most flexible form tag: its type attribute decides which kind of field it makes (a text box, a check box, a radio button, a button…). It is an empty tag.

a. Text fields

A text field is a single-line box where a user types text: letters, numbers or both. Make one with type="text", or leave type out, since text is the default.

<input type="text" name="username" size="50">

A password field, type="password", is a text box whose characters are shown as dots, so nobody looking at the screen can read them.

<form>  <label>Username</label>  <input type="text" name="username"><br>  <label>Password</label>  <input type="password" name="userpass"></form>

This shows two boxes on two lines: one labeled Username, showing what is typed, and one labeled Password, showing dots.

The <label> tag names an input. Give the input an id and the label for with the same name, and they are joined: tapping the label puts the cursor in the box, and a screen reader reads the label with it: <label for="user">Username</label> <input type="text" id="user" name="username">.

b. Text area

The <textarea> tag makes a text box of several lines, for longer writing: a message, a comment, a complaint. It is a paired tag: any starting text goes between <textarea> and </textarea>.

<form>  <b>Comments:</b><br>  <textarea rows="7" cols="25" name="details">Write your comment here...</textarea></form>

This shows a box 7 lines tall and about 25 characters wide, with “Write your comment here...” in it, ready to be replaced.

c. Radio buttons

A radio button lets the user pick only one option from a group. Radio buttons with the same name form one group: choosing one un-chooses the others, like the station buttons on an old radio. The value is what is sent to the server for the chosen one.

<form>  <input type="radio" name="result" value="pass"> Pass  <input type="radio" name="result" value="fail"> Fail</form>

Two round buttons, Pass and Fail; only one can be chosen at a time. Add the attribute checked to one to choose it at the start.

d. Check boxes

A check box can be checked or unchecked on its own, so, unlike radio buttons, the user can choose several items in a list.

<h3>Lakes of Nepal you have visited</h3><form>  <input type="checkbox" name="lakes" value="phoksundo"> Shey Phoksundo Lake<br>  <input type="checkbox" name="lakes" value="rara"> Rara Lake<br>  <input type="checkbox" name="lakes" value="gosaikunda"> Gosaikunda Lake<br></form>

Three square boxes, one per lake, each of which can be ticked or not.

e. Select box (drop-down list)

The <select> tag makes a drop-down list (a select box), from which the user picks one of options set in advance; each option is an <option> inside it, and its value is what is sent. Add multiple to <select> to let the user pick more than one, and size="4" to show four options at once as a scrolling list. A select box does the job of radio buttons or check boxes, but takes less room.

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <title>Working with a select box</title>  </head>  <body>    <form>      <p><b>Select a district</b></p>      <select name="district">        <option value="mugu">Mugu</option>        <option value="manang">Manang</option>        <option value="panchthar">Panchthar</option>        <option value="siraha">Siraha</option>        <option value="kapilvastu">Kapilvastu</option>      </select>    </form>  </body></html>

The page shows “Select a district” and a box showing Mugu, the first option; tapping it opens the list of five districts.

f. Buttons

A form needs a button to send it. With <input>:

• i.Submit button, type="submit": sends the form’s data to the server (to the action address). A form that is to be sent needs one.
• ii.Reset button, type="reset": clears every field back to how it started, so the user can fill it in again.

The value attribute sets the words on the button.

<form>  <input type="submit" name="submit" value="Submit">  <input type="reset" name="reset" value="Reset"></form>

The <button> tag also makes a button, anywhere on a page; it is a paired tag, so it can hold text, a picture or other tags: <button type="submit">Send <b>now</b></button>. Its job is set by type too (submit, reset, or button, which does nothing until a script gives it a job).

Two more input types appear in the lab form below: type="file", a button to choose a file (a photo) to upload, and the many types newer HTML added, which phones show with the right keyboard or picker: email, tel (a number pad), number, date, color.

The <div> tag

The <div> (division) tag is a container that divides a page into logical parts, so its content can be organized and arranged. It is a block-level element: it starts on a new line and takes the full width, and it can hold any other elements, other divs included. On its own a div shows nothing; it is a box to group things in. It can be styled with CSS to change its look, size, position and layout, and it can have an id (to name one particular div) or a class (to group it with others that share a style).

Advantages of the div tag:

• a.Grouping content: related parts (a heading, a picture, its text) are kept together in one box.
• b.Layout and structure: a page is divided into a header, a menu, columns and a footer.
• c.Responsive design: with CSS, divs side by side on a computer can stack one under another on a phone.
• d.Styling with CSS: one rule styles a whole group at once: a border, a background, spacing.
• e.JavaScript interaction: a script can find a div by its id and show, hide or change it.

To style one element directly, put CSS in its style attribute (inline CSS, 4.5):

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <title>Div example</title>  </head>  <body>    <!-- Parent div -->    <div style="border: 2px solid #000; margin: 10px; padding: 10px;">      <h2>Main div</h2>      <!-- First div -->      <div style="border: 2px solid #000; margin: 10px; padding: 10px;">        <p>First div</p>      </div>      <!-- Second div -->      <div style="border: 2px solid #000; margin: 10px; padding: 10px;">        <p>Second div</p>        <!-- Third div, inside the second -->        <div style="border: 2px solid #000; margin: 10px; padding: 10px;">          <p>Third div</p>        </div>      </div>    </div>  </body></html>

Each div is drawn as a box with a black border 2 pixels thick, 10 pixels of space inside it and 10 outside it: the main box holds the heading and two boxes, and the second of those holds a third.

HTML also has semantic containers that work like a div but say what their part is: <header>, <nav>, <main>, <section>, <article>, <aside> and <footer>. Use them where they fit, and a div for any other group; screen readers and search engines understand the page better.

Dynamic HTML

DHTML stands for Dynamic HTML. It isn’t a language of its own: it was the name, in the late 1990s, for using three technologies together to make interactive and animated web pages. HTML defines the page’s structure (tables, paragraphs, lists…); CSS controls the look and layout of the HTML elements (colors, fonts, margins, positions); and a scripting language, JavaScript (or Microsoft’s VBScript, now gone), changes the HTML elements and CSS styles while the page is open, in answer to what the user does. Today every page can do this, and nobody needs the name: we just say HTML, CSS and JavaScript.

Cascading Style Sheets

HTML uses tags to make the parts of a page: text, links, images, videos. CSS (Cascading Style Sheets) is a second language that works with HTML to style and lay out those parts: their colors, fonts, sizes, spacing and positions. HTML says what each part is; CSS says how it looks. For example, this makes one paragraph red and bold:

<p style="color: #ff0000; font-weight: bold;">CSS helps to define style.</p>

CSS can also make a page responsive: the same page laid out differently for different devices, wide columns on a computer, one column on a phone. And it can give a page a different look for printing, without the menu and ads, in black on white.

The style rules can be written between <style> and </style> tags, placed in the page’s <head>:

<style>  tag { property: value; property: value; … }</style>

(Older pages write <style type="text/css">; the type is no longer needed, since CSS is the only kind.) The properties include font, color, background, text, border, margin and list.

A CSS rule has two parts:

• a selector, which picks the elements the rule applies to: “all the paragraphs on my page”;
• a set of properties with values, which change how those elements look: “text color white, background gray”.

The CSS rules together make a style sheet, which decides how a page should look.

Here is a simple page with an <h1> and a <p>, and two rules for them:

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <title>My first CSS example</title>    <style>      h1 {        color: blue;        background-color: yellow;        border: 1px solid black;      }      p {        color: red;      }    </style>  </head>  <body>    <h1>Hello World!</h1>    <p>This is my first CSS example.</p>  </body></html>

The heading is blue on a yellow band across the page, with a thin black border round the band; the paragraph under it is red.

4.5.1 Properties of CSS

CSS has two main parts in every declaration:

• Properties are the names of the things about an element you want to change: font-family, width, background-color…
• Values are the settings you give each property: Arial, 50%, blue… Each property accepts only its own set of values.

A property and its value, with a colon between them, make a CSS declaration: color: red;. Several declarations inside braces { } make a declaration block, separated by semicolons (the last semicolon may be left out, but it is good practice to write it). A selector in front of the block says which elements it applies to, and the whole thing is a CSS rule (a rule set):

p {  background-color: red;  background-style: none;}

Here p is the selector, background-color: red; and background-style: none; are two declarations, and the braces make the declaration block.

4.5.2 Selectors

CSS selectors are expressions that find, or select, the HTML elements a rule styles. They let you change the look of elements without changing the HTML, and every rule needs one. Four types:

1. Element selector: selects elements by their tag name. This styles every <b> element:

b {  /* styles applied to all <b> elements */  color: maroon;}

2. ID selector: selects one element by its id attribute. Since an id must be unique on a page, it picks a single, particular element. Write a hash, #, then the id:

#header {  /* styles applied to the element with id="header" */  background-color: teal;}

<p id="header">I am chosen by my id, header.</p>

3. Class selector: selects every element with a particular class attribute. Many elements can share a class, and one element can have several classes. Write a dot, ., then the class name:

.check {  /* styles applied to all elements with class="check" */  color: purple;}

<p class="check">I am chosen by my class, check.</p>

4. Universal selector: * selects every element on the page, whatever its tag, class or id:

* {  /* styles applied to all elements */  font-family: sans-serif;}

/* … */ is a comment in CSS: notes the browser ignores, as <!-- … --> in HTML.

4.5.3 Types of CSS

There are three ways to add CSS to an HTML document: inline, internal and external.

i. Inline CSS

Inline CSS styles one element directly, in its own style attribute. It sets that element’s look without changing any other element on the page.

<!DOCTYPE html><html lang="en">  <head>    <title>My CSS experiment</title>  </head>  <body>    <h1 style="color: blue; background-color: yellow; border: 1px solid black;">Good morning, class!</h1>    <p style="color: red;">This is my first example of inline styles.</p>  </body></html>

ii. Internal CSS

Internal CSS (an internal or embedded style sheet) styles the elements of one page from a single <style> tag in the page’s <head>. Instead of styling each element one by one, one rule styles every element it selects on that page.

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <title>My first CSS try page</title>    <style>      h1 {        color: blue;        background-color: yellow;        border: 1px solid black;      }      p {        color: red;      }    </style>  </head>  <body>    <h1>Hello World!</h1>    <p>This is my first CSS example of an internal style sheet.</p>  </body></html>

iii. External CSS

External CSS puts the rules in a separate file with the extension .css, which each page links to with the <link> tag in its <head>. Unlike inline and internal CSS, it keeps the style apart from the content altogether, so styles are easy to manage across many pages: the same .css file can be linked to every page of a site, which reuses the code and gives every page the same look.

The page, index.html:

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <title>My experiment with an external style sheet</title>    <link rel="stylesheet" href="mystyle.css">  </head>  <body>    <h1>Visit Nepal!</h1>    <p>Sagarmatha, also known as Mount Everest, is the highest mountain on Earth and a symbol of both natural beauty and human determination.</p>  </body></html>

And in a new file, mystyle.css, in the same folder:

h1 {  color: blue;  background-color: gold;  border: 1px solid black;}p {  font-size: 14pt;  font-weight: bold;  text-align: justify;  color: red;}

In <link rel="stylesheet" href="mystyle.css">, rel (relation) says the linked file is a style sheet and href gives its name. Older pages also add type="text/css", which is allowed but not needed.

Common CSS properties

(text-decoration once had blink too; browsers no longer blink.)

CSS box model

CSS lays out a page as boxes: every element is a rectangular box with four parts, from the inside out:

• Content: what you see inside the box: words, pictures or videos.
• Padding: a cushion of space round the content, inside the border. It makes the box bigger, and it has the element’s background color.
• Border: the frame round the content and padding. It shows where the box ends.
• Margin: clear space outside the border, between this box and the next, which keeps boxes from touching.

The properties that set them, padding, border and margin (with width and height for the content), are the box properties, and the way they make boxes is the CSS box model.

h2 {  padding: 1em;  border: medium dashed black;  background-color: gray;}

This gives an <h2> a gray background, with 1 em of space between its words and its dashed black border. The space inside the border (even when there is no border to see) is filled with the background color, and is set by the padding properties.

To put more space between this element (with its border) and what is round it, increase the margin. Margin and padding are easy to mix up, especially when there is no border or background color. If the space round an element isn’t what you want (browsers give many elements some space of their own), set both to zero and work from there:

ul {  margin: 0em;  padding: 0em;}

(padding: 10px sets all four sides; padding-top, padding-right, padding-bottom and padding-left set one side each, and margin works the same way.)

CSS measurement units

Common units of length in CSS:

• em: the current font size. If the text is 16 px, 1em is 16 px and 2em is 32 px, so spacing in ems grows with the text. (ex is the height of a small letter x, roughly half the font size.)
• px: one pixel, one dot on the screen. On very high-resolution screens, real pixels are tiny, so a CSS pixel is adjusted to about the size of a pixel on an ordinary display: 1/96 of an inch.
• mm: a millimeter; there are also cm and in (inches). These are the browser’s best guess and can be far off, depending on the screen: on a projector, a “millimeter” becomes much larger.
• %: a percentage of the element round it: width: 50% is half as wide as the box it is in.

As far as possible, give sizes in em and px: they behave the same everywhere. (Newer units, rem, the page’s base font size, and vw, a hundredth of the screen’s width, are common too.)

p {  line-height: 1.5em;}blockquote {  margin-left: 2em;  border-left: 0.25em solid black;}#logoimg {  width: 120px;  height: 160px;  float: left;  margin-left: 1em;}

The paragraphs’ lines are spaced 1.5 times the font size apart; a quotation is indented by 2 ems with a black line down its left; and the picture with id="logoimg" is 120 × 160 pixels, set at the left (float: left) with the text flowing round it, 1 em from the edge. Note: #logoimg, with no space after the #.

The style sheet page above uses several of these properties together, on a page with an <h1>, two <h2> headings, paragraphs and a list. Its style.css:

body {  font-family: Helvetica, sans-serif;}h1 {  text-align: center;  font-weight: bold;  background-color: silver;  color: teal;  padding: 0.25em;}h2 {  border: medium dotted teal;  font-weight: normal;  padding: 0.1em;}

Try changing them in that page’s style.css tab, or on a page you have made.

1. Write down the full forms of:

2. Choose the correct option

3. Write short answers to these questions

4. Write long answers to these questions