Web Development

🌐 Web words

A web page is one document; a website is a group of linked pages; a web application does work for the user, like booking a bus ticket. The web follows the client–server model: your browser (the client) asks a web server for a page using HTTP, and the server sends it back.

🧱 HTML: structure

HTML (HyperText Markup Language) gives a page its structure using tags in angle brackets. Every page has <html>, a <head> holding the <title>, and a <body> holding the content. Common tags: <h1> heading, <p> paragraph, <a href="..."> link, <img src="..." alt="..."> image, <ul> and <li> lists, <table> tables, <form> and <input> for user input.

🎨 CSS: style

CSS (Cascading Style Sheets) controls how a page looks: colours, fonts, spacing and layout. Inline CSS goes in a tag's style attribute. Internal CSS goes in a <style> block in the head. External CSS lives in a separate .css file linked to many pages, which is the best way to keep a whole site consistent.

⚙️ Static and dynamic pages

A static page shows the same content to everyone, straight from a file. A dynamic page is built when you ask for it. Client-side scripts (JavaScript) run in your browser, for example checking a form. Server-side scripts (such as PHP) run on the server, often reading or saving data in a database.

🔄 A dynamic web app, end to end

A learner fills in a registration form and taps Submit. The browser sends the form to the server. A PHP script checks the data and saves it to a MySQL database with SQL. The server then sends back a confirmation page. Design first with a wireframe (a simple sketch of the layout), and add alt text so everyone can use the site.

Key points

• A browser, the client, asks a web server for pages using HTTP.
• HTML gives a page its structure with tags.
• Every page has a head with a title, and a body with the content.
• CSS controls colours, fonts and layout.
• External CSS keeps a whole site looking consistent.
• JavaScript runs in the browser; PHP runs on the server.
• A dynamic app sends form data to a server script that saves it in a database.

Try it for real: Build a page

• If you can, open a text editor, write a page with a heading, a paragraph, a list and a link, save it as index.html, and open it in a browser.
• Add an external style.css file that changes the heading colour and the font.