Introduction to Web Development
Web development is the process of building websites and web applications. It covers the structure, design, and behaviour of web pages. Understanding the internet, HTML, CSS, and JavaScript is essential for any modern computer operator.
A. Internet, WWW & Key Concepts
Internet vs World Wide Web
They are NOT the same thing
| Term | Definition | Key Facts |
|---|---|---|
| Internet | A global network of networks — billions of devices connected together using the TCP/IP protocol suite. The physical infrastructure: cables, routers, servers. | Started as ARPANET (1969, USA military). Internet ≠ WWW. |
| WWW | World Wide Web — a system of interlinked web pages and resources accessible via the internet using browsers. Uses HTTP/HTTPS protocol. | Invented by Tim Berners-Lee at CERN in 1989. First website: info.cern.ch. |
| Website | A collection of related web pages stored on a web server and accessible through a domain name. | e.g. www.google.com — a website with many pages. |
| Web Page | A single document on the web, written in HTML, displayed in a browser. | A website can contain hundreds of web pages. |
| Web Browser | Software that retrieves and displays web pages. Sends HTTP requests and renders HTML/CSS/JS. | Chrome, Firefox, Safari, Edge, Internet Explorer. |
| Web Server | A computer that hosts websites and serves web pages to browsers on request. | Apache, Nginx, IIS are popular web server software. |
| URL | Uniform Resource Locator — the web address of a resource. Format: protocol://domain/path | e.g. https://www.example.com/page.html |
| IP Address | A unique numerical label assigned to every device on a network. Two versions: IPv4 (e.g. 192.168.1.1) and IPv6. | IPv4 = 32-bit. IPv6 = 128-bit (more addresses). |
| Domain Name | Human-readable address of a website (e.g. google.com). DNS translates it to an IP address. | .com = commercial · .edu = education · .gov = government · .pk = Pakistan |
| ISP | Internet Service Provider — company that provides internet access to homes and businesses. | PTCL, Jazz, Zong, Nayatel (Pakistan examples) |
Internet vs WWW
Internet = physical network infrastructure. WWW = web pages/services running ON the internet. WWW is a service of the internet.
Tim Berners-Lee
Invented the World Wide Web at CERN in 1989. First website was info.cern.ch.
Website vs Web Page
Website = collection of related pages under one domain. Web page = a single HTML document within a website.
Web Browser
Software that retrieves and displays web pages. Sends HTTP requests and renders HTML/CSS/JS. Chrome, Firefox, Safari, Edge.
Web Server
Computer that hosts websites and serves pages to browsers. Apache, Nginx, IIS are popular web server software.
URL Format
https://www.example.com/page.html — Protocol · Domain · Path
IP Address
Unique numerical label for every device. IPv4 = 32-bit (e.g. 192.168.1.1). IPv6 = 128-bit (more addresses).
Domain Name & ISP
Domain = human-readable address (google.com). DNS translates it to IP. ISP = company providing internet access (PTCL, Jazz).
Protocolhttps — secure communication protocol
Subdomainwww — World Wide Web prefix
Domainexample.com — the website's address
Path/Filepage.html — the specific page being requested
Internet started as ARPANET (1969). Internet ≠ WWW — WWW is a service that runs on the internet. URL = web address. ISP = company providing internet. DNS converts domain names to IP addresses.
B. HTML — HyperText Markup Language
Structure of a Web Page
HTML defines what content appears on a page
| Concept | Explanation |
|---|---|
| HTML | HyperText Markup Language — the standard language for creating web pages. It defines the structure and content of a page using tags. File extension: .html or .htm |
| Tag | An HTML instruction enclosed in angle brackets: <tagname>. Most tags have an opening <p> and closing </p> tag. Self-closing: <br> <img> |
| Element | Everything from the opening tag to the closing tag: <p>Hello</p> |
| Attribute | Extra information inside an opening tag: <a href="url"> — href is an attribute. |
| Basic structure | <!DOCTYPE html> → <html> → <head> (meta, title) + <body> (visible content) |
| Hyperlink | <a href="page.html">Click here</a> — the HT in HTML stands for HyperText, which is clickable linked text. |
| Tag | Purpose | Example |
|---|---|---|
| <h1>–<h6> | Headings (h1 = largest, h6 = smallest) | <h1>Main Title</h1> |
| <p> | Paragraph of text | <p>This is a paragraph.</p> |
| <a> | Hyperlink / anchor | <a href="url">Link text</a> |
| <img> | Image (self-closing) | <img src="pic.jpg" alt="desc"> |
| <ul> <ol> <li> | Unordered / ordered list + list item | <ul><li>Item</li></ul> |
| <table> | Table — with <tr> (row), <th> (header), <td> (cell) | Data tables |
| <form> | Input form for user data | Login, registration, search forms |
| <div> | Division/container — generic block element | Layout grouping |
| <span> | Inline container for styling part of text | <span style="color:red">word</span> |
| <br> | Line break (self-closing) | Forces text to next line |
| <hr> | Horizontal rule — draws a line | Section divider |
| <head> | Contains metadata — not displayed on page | Title, CSS links, meta tags |
| <title> | Page title shown in browser tab | <title>My Page</title> |
HTML
HyperText Markup Language. Defines structure and content of web pages. Extension: .html
Tags, Elements & Attributes
Tag = instruction in <brackets>. Element = opening + content + closing tag. Attribute = extra info inside opening tag (e.g. href, src).
Structure
<!DOCTYPE html> → <html> → <head> (title, CSS) + <body> (visible content)
Hyperlink
<a href="url">Link text</a> — the HT in HTML stands for HyperText (clickable linked text).
Key Tags
<h1>–<h6> headings · <p> paragraph · <img> image · <br> line break · <div> container · <table> table
Self-closing Tags
<br> <img> <hr> — these have no closing tag. <img src="pic.jpg" alt="desc">
⚡ Exam Tips — HTML = HyperText Markup Language. Extension = .html. HyperText = clickable linked text. <h1> = largest heading. <br> = line break (self-closing). <a href=""> = hyperlink. <img src=""> = image (self-closing). <!DOCTYPE html> = must be first line of every HTML page.
C. CSS — Cascading Style Sheets
Styling & Presentation of Web Pages
CSS controls how HTML elements look
| Concept | Explanation |
|---|---|
| CSS | Cascading Style Sheets — controls the appearance of HTML elements: colours, fonts, sizes, layout, spacing. Separates presentation from structure. |
| Syntax | selector { property: value; } — e.g. p { color: red; font-size: 16px; } |
| 3 ways to add CSS | Inline — inside the HTML tag: style="color:red" Internal — in <style> tag in <head> External — separate .css file linked with <link> — best practice |
| Selectors | Element: p { } · Class: .myClass { } · ID: #myId { } |
| Cascading | "Cascading" means styles can be inherited and overridden. Inline style overrides internal, which overrides external. |
| Box Model | Every HTML element is a box: Content → Padding → Border → Margin. Understanding this is key to layout. |
| Property | What it controls | Example |
|---|---|---|
| color | Text colour | color: blue; |
| background-color | Background colour of element | background-color: yellow; |
| font-size | Size of text | font-size: 18px; |
| font-family | Font typeface | font-family: Arial; |
| text-align | Horizontal alignment of text | text-align: center; |
| border | Border around element | border: 1px solid black; |
| padding | Space inside element (between content and border) | padding: 10px; |
| margin | Space outside element (between elements) | margin: 20px; |
| width / height | Dimensions of element | width: 100px; |
CSS
Cascading Style Sheets. Controls appearance: colour, font, size, layout. Extension: .css
3 Ways to Apply CSS
Inline (style="") · Internal (<style> in head) · External (.css file — best practice)
Selectors
Element: p { } · Class: .myClass { } · ID: #myId { } — used to target HTML elements for styling.
Cascading
Styles can be inherited and overridden. Priority order: Inline > Internal > External.
Box Model
Content → Padding → Border → Margin (inside to outside)
Key Properties
color · background-color · font-size · font-family · text-align · border · padding · margin · width · height
⚡ Exam Tips — CSS = Cascading Style Sheets. Controls appearance (not structure — that's HTML). File extension = .css. External CSS = best practice (one file controls entire website). Box model order: Content → Padding → Border → Margin.
D. JavaScript & Web Technologies
Making Web Pages Interactive
JavaScript, PHP, and the front-end vs back-end split
| Technology | Role | Example |
|---|---|---|
| JavaScript (JS) | Programming language that makes web pages interactive and dynamic. Runs directly in the browser. Controls behaviour — responds to user actions, animates content, validates forms, fetches data. | Dropdown menus, image sliders, form validation, pop-ups, live search |
| HTML | Structure — the skeleton of the page (content) | Headings, paragraphs, images, links |
| CSS | Presentation — the appearance (skin) | Colours, fonts, layout |
| Front-end | Everything the user sees in the browser. Built with HTML + CSS + JavaScript. | Website visual interface |
| Back-end | Server-side processing — databases, authentication, business logic. Hidden from user. | PHP, Python, Node.js, databases |
| Full-stack | A developer who works on both front-end and back-end. | Most professional web developers |
| PHP | Hypertext Preprocessor — server-side scripting language for dynamic web pages. Runs on the server, not the browser. | WordPress, Facebook was originally built on PHP |
| CMS | Content Management System — software for creating/managing website content without coding. | WordPress, Joomla, Drupal |
JavaScript
Makes web pages interactive. Runs in the browser. Handles dropdown menus, form validation, image sliders, pop-ups.
HTML vs CSS vs JavaScript
HTML = Structure (skeleton) · CSS = Style (appearance) · JavaScript = Behaviour (interactivity)
Front-end vs Back-end
Front-end = visible in browser (HTML/CSS/JS). Back-end = server side (PHP, databases, authentication).
Full-stack
A developer who works on both front-end and back-end. Most professional web developers are full-stack.
PHP
Hypertext Preprocessor — server-side scripting for dynamic pages. Runs on server, not the browser. Used in WordPress.
CMS
Content Management System — create and manage website content without coding. WordPress, Joomla, Drupal.
HTMLStructure / Skeleton — defines what content appears on the page
CSSStyle / Appearance — controls colours, fonts, layout
JavaScriptBehaviour / Interaction — makes pages dynamic and interactive
PHP = server-side scripting. CMS = Content Management System (WordPress). The three core web technologies: HTML (structure) + CSS (style) + JS (behaviour). Front-end = user-visible side. Back-end = server side.
E. Important Web Concepts & Terms
Key Terms for the Exam
Important web concepts tested in the STS exam
| Term | Definition |
|---|---|
| Hosting | Storing website files on a web server so they are accessible on the internet. Web hosting companies provide server space. |
| E-commerce | Buying and selling goods/services over the internet. Examples: Amazon, Daraz, AliExpress. |
| Search Engine | Software that searches the web for content matching a query. Examples: Google, Bing, Yahoo. Uses web crawlers/spiders to index pages. |
| SEO | Search Engine Optimisation — techniques to improve a website's ranking in search results. |
| Cookie | Small file stored on your computer by a website to remember your preferences, login status, or browsing history. |
| Cache | Temporary storage of web page data so pages load faster on future visits. |
| Bandwidth | The maximum amount of data that can be transmitted over an internet connection in a given time. Measured in Mbps or Gbps. |
| Upload vs Download | Upload = sending data TO the internet (posting a photo). Download = receiving data FROM the internet (watching a video). |
| Static website | Content is fixed — same for all users. Built with just HTML/CSS. No database. Fast to load. |
| Dynamic website | Content changes based on user, time, or data. Uses a back-end language (PHP) and database. Examples: Facebook, news sites. |
| Responsive Design | A website that automatically adjusts its layout for different screen sizes (desktop, tablet, mobile). |
| Cloud Computing | Accessing computing resources (storage, software, servers) over the internet instead of on local hardware. Examples: Google Drive, Dropbox, AWS. |
Hosting
Storing website files on a web server so they are accessible on the internet. Web hosting companies provide server space.
Static vs Dynamic Website
Static = fixed HTML pages, no database. Dynamic = content changes per user/time, uses database (e.g. Facebook, news sites).
E-commerce
Buying and selling over the internet. Amazon, Daraz, AliExpress.
Search Engine & SEO
Search engine (Google, Bing) uses crawlers to index pages. SEO = Search Engine Optimisation — improves ranking in results.
Cookie & Cache
Cookie = file saved on computer by website to remember login/preferences. Cache = temporary storage for faster page loads.
Bandwidth
Max data transmitted over a connection per second. Measured in Mbps/Gbps. Upload = sending to internet. Download = receiving.
Responsive Design & Cloud
Responsive = site adjusts layout for any screen size. Cloud = internet-based storage and services (Google Drive, AWS, Dropbox).
⚡ Exam Tips — E-commerce = electronic commerce (online buying/selling). SEO = Search Engine Optimisation. Cookie = remembers user info. Static website = no database. Dynamic website = uses database + back-end. Cloud = internet-based storage and services. Search engine uses web crawlers to index pages.
Quick Fire Revision
- WWW invented byTim Berners-Lee (1989)
- Internet started asARPANET (1969)
- Internet vs WWWInternet = network infrastructure · WWW = web pages service ON internet
- URL stands forUniform Resource Locator
- HTML stands forHyperText Markup Language
- HTML file extension.html or .htm
- CSS stands forCascading Style Sheets
- CSS controlsAppearance (colour, font, layout)
- JavaScript controlsBehaviour / Interactivity
- HTML + CSS + JS rolesStructure + Style + Behaviour
- Best way to apply CSSExternal .css file (linked)
- CSS Box Model order (inside→out)Content → Padding → Border → Margin
- <a href=""> tag is forHyperlinks
- <img> tag isSelf-closing (no closing tag needed)
- Largest heading tag<h1>
- Front-end usesHTML, CSS, JavaScript
- Back-end examplesPHP, Python, Node.js, databases
- PHP stands forHypertext Preprocessor (server-side)
- CMS stands forContent Management System (WordPress)
- Static vs Dynamic websiteStatic = fixed HTML · Dynamic = database-driven
- E-commerce meansBuying and selling over the internet
- Cookie storesUser preferences and login info on local computer
- SEO stands forSearch Engine Optimisation
- ISP stands forInternet Service Provider