4.1 Concepts of Web Technology

Web technology is the collection of tools, languages, and standards used to build, run, and deliver websites and web applications. It covers the entire journey of a webpage: how it is written, how it travels across the internet, and how it finally appears on your screen.

How the Web Works

When you type a website address (called a URL) into a browser and press Enter, several things happen behind the scenes:

1. Your browser looks up the address and finds the server where the website is stored
2. Your browser sends a “request” to that server, asking for the webpage
3. The server processes the request and sends back the webpage’s files (HTML, CSS, images, etc.)
4. Your browser reads those files and displays the page on your screen

This entire request-and-response process usually takes less than a second, even though the server might be located in a different country.

Front-end vs Back-end

Every website has two main sides working together:

Web Browsers and Web Servers

A web browser (like Chrome, Firefox, or Edge) is a program that requests and displays webpages. A web server is a computer that stores website files and sends them out whenever a browser asks for them. Every website you visit is physically stored on a server somewhere in the world.

Static vs Dynamic Websites

A static website shows the same fixed content to every visitor, and its pages don’t change unless someone manually edits the code. A dynamic website can change its content automatically, often based on user actions or data from a database, such as a social media feed or an online shopping site showing different products to different users.

4.2 Concept of UI/UX: Wireframe and Wireframe Design

User Interface (UI)

UI is everything a user sees and clicks on: buttons, menus, images, colors, fonts, and layout. Good UI design makes a webpage look clean, consistent, and easy to read. For example, a well-designed UI uses a clear color scheme and large enough buttons so anyone can use the site without confusion.

User Experience (UX)

UX is about how a user feels while using the website — whether the site is easy to navigate, fast to load, and helps them complete what they came to do. A site can look beautiful (good UI) but still have bad UX if, for example, the checkout process on a shopping site takes too many confusing steps.

A simple way to remember the difference: UI is how it looks, UX is how it works.

Wireframe

A wireframe is a simple, black-and-white sketch or blueprint of a webpage’s layout, created before any real design or coding begins. It uses boxes, lines, and text labels to show where each part of the page will go — like the header, navigation menu, main content area, images, and footer — without worrying about actual colors, fonts, or images yet.

Think of a wireframe like the floor plan of a house: it shows where each room will be, but not the paint color or furniture.

Wireframe Design Process

Designers usually follow these steps when creating a wireframe:

1. Decide what content and features the page needs (menu, images, forms, buttons)
2. Sketch a rough layout showing where each section will sit on the page
3. Arrange elements in an order that makes sense for the user (important content near the top)
4. Review and adjust the layout before moving on to full visual design and coding

Wireframes save time because mistakes in layout are much easier and cheaper to fix on paper or in a simple tool than after the whole website has already been designed and coded. Common wireframing tools include Figma, Adobe XD, and even pen and paper.

4.3 HTML

4.3.1 Introduction to HTML

HTML stands for HyperText Markup Language. It is not a programming language — it doesn’t perform calculations or logic — it’s a markup language, meaning it describes and labels content so a browser knows how to display it.

HyperText refers to text that contains links to other text or pages, letting users jump between pages by clicking. Markup means adding tags around content to describe its role, like marking something as a heading or a paragraph.

HTML was created by Tim Berners-Lee and remains the foundation of every webpage on the internet, even today’s most advanced sites still rely on HTML underneath.

4.3.2 HTML Tag

A tag is a keyword wrapped in angle brackets that tells the browser what kind of content follows. Tags usually come in pairs:

• Opening tag: <p> — marks the start of an element
• Closing tag: </p> — marks the end, with a forward slash
• Content: sits between the opening and closing tag

Example:

<p>This is a paragraph.</p>

Some tags don’t need a closing tag because they don’t wrap around content — these are called self-closing (empty) tags, such as <br>, <img>, and <input>.

Attributes add extra information to a tag. They’re written inside the opening tag as name-value pairs:

<a href="https://computerkite.com">Click here</a>

Here, href is the attribute and "https://computerkite.com" is its value, telling the browser where the link should go.

4.3.3 Structure of HTML

Every HTML page follows this basic skeleton:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>This is my webpage.</p>
  </body>
</html>

• <!DOCTYPE html> — tells the browser this document uses HTML5, the current standard version
• <html> — the root element that wraps the entire page
• <head> — contains information about the page that isn’t shown directly, like the page title, linked CSS files, and metadata
• <title> — sets the text shown on the browser tab
• <body> — contains everything visible on the page: text, images, links, forms, and more

4.3.4 Text Formatting Tags

4.3.5 Anchor, List, Table, Image Tags and Their Properties

Anchor Tag <a> — creates a clickable hyperlink.

<a href="https://computerkite.com" target="_blank">Visit Example</a>

• href — the destination URL (required)
• target="_blank" — opens the link in a new browser tab
• title — shows a tooltip when hovering over the link

List Tags

<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>

<ul> creates an unordered (bulleted) list, while <ol> creates an ordered (numbered) list. Both use <li> for each list item. The <ol> tag also supports a type attribute (e.g. type="A" for letters, type="i" for lowercase Roman numerals).

Table Tag

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Ram</td>
    <td>15</td>
  </tr>
</table>

• <table> — wraps the whole table
• <tr> — table row
• <th> — table header cell (bold, centered by default)
• <td> — table data cell (normal cell)
• border attribute — adds visible borders, e.g. <table border="1">

Image Tag <img>

<img src="photo.jpg" alt="A sunset" width="300" height="200">

• src — the file path or URL of the image (required)
• alt — a text description shown if the image fails to load, and read aloud by screen readers
• width / height — sets the image’s display size in pixels

The <img> tag is self-closing and does not need a closing tag.

4.3.6 Form and Div Tag

Form Tag <form> is used to collect input from users, such as text, choices, or file uploads, and send that data somewhere for processing.

<form>
  Name: <input type="text" name="username"><br>
  Email: <input type="email" name="useremail"><br>
  <input type="submit" value="Submit">
</form>

• <input type="text"> — a single-line text box
• <input type="email"> — a text box that checks for a valid email format
• <input type="password"> — hides typed characters
• <input type="submit"> — a button that submits the form
• <textarea> — a larger box for multi-line text, like a message

Div Tag <div> is a container that groups other HTML elements together. It has no visual style of its own, but it’s extremely useful for organizing a page into sections that can then be styled or positioned together using CSS.

<div class="header">
  <h1>My Website</h1>
  <p>Welcome to my page</p>
</div>

Here, the heading and paragraph are grouped inside one div, so both can be styled together (for example, given the same background color) using a single CSS rule targeting .header.

4.4 CSS

4.4.1 Introduction to CSS

CSS stands for Cascading Style Sheets. While HTML builds the structure and content of a page, CSS controls how that content looks — colors, fonts, spacing, borders, layout, and positioning.

The word “cascading” refers to how CSS rules can come from multiple places (browser defaults, external files, internal styles, inline styles), and more specific or later rules override earlier, more general ones.

A CSS rule has three parts:

selector { property: value; }

Example:

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

This means: select every <p> element, and set its text color to blue and font size to 16 pixels.

4.4.2 Embed CSS Script in HTML

CSS can be added to a webpage in three main ways (explained fully in the next section): directly on an element using the style attribute, inside a <style> block in the head, or through a completely separate .css file linked to the HTML page.

4.4.3 Types of CSS: Inline, Internal, and External

1. Inline CSS — written directly inside a single HTML tag using the style attribute. It only affects that one specific element.

<p style="color: red; font-size: 18px;">This text is red and larger.</p>

Best used for quick, one-off changes to a single element, but not efficient for styling a whole website.

2. Internal CSS — written inside a <style> tag placed in the <head> section. It affects every matching element on that one page only.

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

Useful when a page needs its own unique styles that other pages on the site don’t share.

3. External CSS — written in a completely separate file with a .css extension, then linked to the HTML page using the <link> tag inside the head.

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

Example contents of style.css:

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}
h1 {
  color: navy;
}

External CSS is the most practical method for real websites because one file can style every page on the site at once. If you want to change the site’s color scheme, you only edit one file instead of every page individually.

Practical Tasks

1. Develop a simple webpage using Notepad or a similar text editor, including basic tags, text formatting tags, lists, an embedded picture, a table, and a hyperlink.
2. Demonstrate the use of inline and internal CSS, applying both within basic text formatting tags on your webpage.

Project Work

Develop your own personal webpage using a suitable tool, such as Dreamweaver or Chrome DevTools, including <ul>/<ol> list tags, <a> anchor tags, <img> image tags, <table> tags, <form> tags, and <div> tags, along with both internal and inline CSS applied throughout the page.