Web Development and Web Design

Learning Objectives

• Explain how websites work.
• Use HTML structure and CSS styling.
• Apply good web design principles.
• Describe the client side, the server side and web hosting.

How Websites Work

When a user types a web address and presses Enter, a chain of events delivers the page. The browser asks DNS to translate the domain name into an IP address, sends an HTTP or HTTPS request to the web server, the server decides what content to return and fetches data from a database if needed, the server sends back HTML, CSS and other resources, and the browser renders the page using the HTML structure and CSS styles. The same flow applies to every website, whether a school notice board or an online marketplace. A web server is a computer that stores web files and responds to browser requests. Hosting means storing the pages on a server connected to the internet and reachable at a domain name, on a shared server, a dedicated server or in the cloud.

A website is built from clearly separated layers. HTML provides the structure, the headings, paragraphs, lists, images and links. CSS controls the presentation, the colours, fonts, spacing and layout. JavaScript adds behaviour and interactions in the browser. Server-side code and a database provide the stored data and the processing behind the page. Keeping these layers separate is a good engineering habit, because the same stylesheet can style many pages, keeping a whole site consistent and easy to update, an example of reuse through pattern recognition.

HTML Structure and CSS Styling

HTML, the HyperText Markup Language, describes the structure of a page using tags, markers wrapped in angle brackets. Most tags come in pairs, an opening tag and a closing tag, and the browser reads the tags to display the content correctly. Core tags are h1 to h6 for headings of decreasing size, p for paragraphs, ul and ol for lists with li for each item, img for images, a for links, and table, tr, th and td for tables. A basic page begins with a doctype declaration, then an html element containing a head, which holds the page title, and a body, which holds the visible content. For example, a school coding club page uses an h1 for the main heading, a p for the meeting details and an a tag for a link to the club page, each tag opening and closing so the browser lays the page out correctly.

CSS, the Cascading Style Sheets, controls how the page looks, its colours, fonts, spacing and layout. A CSS rule selects an element and applies properties to it. One simple set of rules sets the body font to Arial, the body text to a soft grey, the main heading green and centered. CSS can be written inside the HTML file in a style block or in a separate stylesheet file linked to the page. Separating structure from style means the content, HTML, can change without touching the appearance, CSS, and vice versa. Practical work is to write the HTML for a short school home page with a heading, two paragraphs and one link, then add three CSS rules for background colour, heading colour and paragraph font.

Client-Side, Server-Side, Databases and Building a Page

Web work splits into two sides. Client-side work happens in the user's browser, rendering HTML, applying CSS and running simple JavaScript interactions. Server-side work happens on the server, processing data, checking logins and querying a database. Sensitive tasks such as storing passwords or computing totals are done server-side, because the client can be modified by anyone, and the browser only ever sees what the server sends it. A dynamic website stores its data in a database and reads from it each time a page is requested. When a form is submitted, the browser sends an HTTP or HTTPS request carrying the data, the server validates the input and runs a SQL statement against the database, the database stores or returns the data, and the server builds an updated HTML page and sends it back.

This is why a school result portal shows a different result for each student, the page is built fresh from the database rather than being a fixed file. A teacher enters a score on a form; the server-side code stores it with SQL; a second page reads the stored scores and prints a table; and the same page handles every student because the data lives in the database, not inside the HTML. Even without a full server in class, learners can build and run the static page and trace exactly where the server and database would fit, the page and stylesheet first, then the server-side code and the SQL. The essential skill is knowing which part of the stack, HTML, CSS, server logic or database, handles each task.

Security and data protection are part of every step. A login form without HTTPS exposes the password as it travels the network, so HTTPS is mandatory. Building a SQL query by joining user input directly into the statement invites SQL injection, so all input must be validated and queries must use parameters. Publishing parents' phone numbers on a public page violates data protection, so personal data is kept private and shown only to authorised users. Borrowing another school's stylesheet and images without asking raises copyright issues, so content is created or licensed properly. Scenario work traces a student submitting a request to join the coding club through the school website, from the browser to the server, into the database with a validated SQL insert, and back to the list the secretary later reads.

Client side means code that runs in the browser.

Foundations of Web Development

Web development is the craft of creating websites and web applications. It unites everything studied in Week 8, because a website is simply files and programmes served over the networks and protocols already covered. Developers working on a site fall into two broad groups depending on where their code runs.

Front-end development produces everything the user sees and touches in the browser, the layout, colours, buttons and text. It is built with HTML for structure, CSS for styling and JavaScript for behaviour, and it runs on the user's own device. Back-end development produces the code that runs on the server, checking logins, storing data and preparing the content that is sent to the browser. It uses languages such as Python, PHP and JavaScript on Node.js, together with databases such as MySQL and PostgreSQL.

The dividing line is simple in principle, the front end is what runs in the browser, the back end is what runs on the server. A school result portal shows the line clearly, the front end paints the page and the form, while the back end verifies the student, reads the score from the database and returns it safely.

Front end, HTML, CSS and JavaScript running in the browser.

Back end, server-side programmes and databases that supply the data.

A full website needs both sides working together over HTTP or HTTPS.

This foundation frames the whole week, since Period 2 builds the HTML and CSS that form the front end, and Period 3 shows the server side and database behind a dynamic page.

HTML Structure and Tags in Depth

An HTML document is a nested tree of elements. The element that contains everything is the html element, which holds two children, the head and the body. The head carries information about the page, such as the title shown on the browser tab and links to CSS files. The body carries the visible content, headings, paragraphs, images, lists and links.

Tags are written in angle brackets, and most come in pairs, an opening tag such as p and a closing tag with a slash such as p. The content sits between the two. Some elements, such as the image tag img, do not wrap content and stand alone. Attributes add information inside the opening tag, for example the src attribute of an image gives the file's address, and the href attribute of a link gives the destination.

Two simple rules keep a page well formed. Elements must nest correctly, so an element opened inside another must close before the outer one closes, and every page should declare its doctype and its language attribute. A well-formed page renders predictably in every browser and is much easier to style with CSS.

html wraps the whole document and holds a head and a body.

The head holds the title and links to stylesheets; the body holds the visible content.

Most tags come in opening and closing pairs; a few, such as img, stand alone.

Attributes such as src and href live inside the opening tag.

Hyperlink means a link that opens another page.

Simple CSS Styling in Practice

CSS styles elements by matching selectors to rules. A selector names which element to style, and the declaration block lists the properties, such as color, font-size and background-color, with their values. A simple rule for the body element sets the page font, and the browser applies it to every matching element.

Selectors can target whole element types, specific classes or single ids. Because styles inherit, setting the font on the body element styles the whole page, and a later rule for a specific element can override it. Keeping structure in HTML and appearance in CSS means one stylesheet can restyle an entire school site by changing a few values.

A CSS rule pairs a selector with a declaration block of properties and values.

Class and id selectors target specific elements rather than whole types.

One external stylesheet can control the look of every page on a site.

In the practical exercise, learners write the HTML first, check that it is well formed, and then add CSS rules to change the heading colour, the text font and the page background.

Domains and Web Hosting

Publishing a website makes it available to the whole internet, and it requires two things, a domain name and web hosting. The domain name is the address users type, such as creativebrainsacademy.edu.ng, while hosting is the server space where the site's files live. The two are usually registered with different companies and then connected.

A domain name is leased from a domain registrar for a year or more, and the registrar sets the DNS records that point the name to the hosting server's IP address, the exact DNS mechanism studied in Week 8. Hosting companies in Nigeria, such as those offering shared, VPS and dedicated plans, provide storage, bandwidth and an always-on internet connection for the server.

Shared hosting puts many websites on one server and is cheap and suitable for small school sites. VPS hosting gives a private slice of a server with more control, and dedicated hosting rents a whole machine for heavy traffic. Free options such as Netlify and GitHub Pages host small static sites with no cost, which is ideal for learners practising at school.

Domain name, the address users type, leased from a registrar.

Shared hosting, several sites on one server, cheap for small sites.

VPS and dedicated hosting, more power and control for busy sites.

Free hosts such as GitHub Pages suit learner projects and simple static pages.

Publishing and Uploading a Website

Uploading is the step that copies the finished files from a local computer to the web server. The common methods are FTP, an older file transfer protocol, and SFTP, its secure version, used with a client such as FileZilla, or the web-based file manager provided by the hosting panel such as cPanel. Some hosts also offer one-click publishing from a code editor.

The upload workflow follows one sequence. First the site is tested locally in a browser. Then the files are connected to the host through an FTP or SFTP client, the files are placed in the public folder, usually called public_html, and finally the domain is visited to confirm the pages load. After publishing, changes are made locally and re-uploaded, and the live site updates immediately.

Publishing brings the whole front-end and back-end story together. The domain gives the address, the server holds the files, and the DNS records studied earlier join the two, so that when a user anywhere types the domain, the browser fetches the hosted page and renders it.

Test the site locally before uploading.

Upload files to the public_html folder with FTP, SFTP or the hosting file manager.

Visit the domain to confirm the live site works.

Update pages by editing locally and re-uploading the changed files.

The Web and How a Page is Delivered

The world wide web is a service that runs on the internet. A web page is a document written in a markup language that gives the browser instructions on how to display it. The browser sends a request to a server, the server returns the page, and the browser renders it on the screen.

Every page has a unique address, called a uniform resource locator, and this is why pages can be linked. A site is a collection of pages on one subject that are published together and reached from a common home page.

A website is stored on a web server, which may be run by the organisation itself or rented from a hosting provider. The domain name is the name people type, and it is resolved to the address of the server.

Planning a Website

A site map shows the pages of a website and the links between them. It is drawn before any page is built, because it prevents a page being created that nothing links to and a link being created that leads to no page.

A storyboard shows the content of each page in order, giving the heading, the text and the images for every screen. This makes it clear that the content is planned before the design, and it shows any page that is thin on material.

The audience and the purpose are decided first. A site for a school needs the staff, the subjects, the calendar and the contact details, and it needs to work on a small screen because many visitors will use a phone.

HTML and Basic Tags

HTML is the markup language of a web page. A tag is written between angle brackets, and most tags come in a pair, an opening tag and a closing tag. Tags are not case sensitive in practice, but they are written in lower case by convention.

The page structure is given by the head section, which holds the title and the settings, and the body section, which holds what the visitor sees. Headings are given by h1 to h6, where h1 is the main heading and the numbers below it are smaller.

Text is marked with p for a paragraph and b or strong for bold, and u for underline and i or em for italics. A list is given by ul or ol with li for each item. A picture is inserted with img and src, and a link is made with a and href.

An image should carry alt text, which is read aloud when the image cannot be seen. A link should describe its destination rather than say click here, so that the sentence still makes sense when it is read aloud.

Building and Testing a Website

A site is built in a folder structure, with an images folder for pictures, so that the files are easy to find and move. The home page is named index, because that is the name the server looks for when no page is named.

Testing is done in more than one browser and at more than one screen size. Each link is followed to confirm that it reaches a page that exists, and each image is checked for correct spelling and size, because a large image makes the page slow to load.

Validation checks the code against the standard, which reports a missing closing tag or an error in the structure. Valid code loads faster and is easier to correct, since the browser can find the position of the fault.

Practical Work

1. Write a small HTML page with a heading, a list and an image.
2. Add simple CSS to change colours and text.
3. Plan the layout of a page on paper before coding it.
4. Describe the steps to publish a site to a host.

Scenario-Based Questions

1. A club needs a one page website. Plan the layout and list the HTML parts.
2. Explain why a page that looks good on a laptop may look poor on a phone.
3. Explain why a form needs server side code as well as HTML.
4. Explain why a domain name is easier to remember than an IP address.

Lesson objectives

By week's end, candidates should be able to:

1. Identify head, body and heading tags.
2. Build a form with labels.
3. Apply CSS to a heading.
4. Link two pages with a relative href.
5. Test and fix one markup error.

Key vocabulary

• HTML: markup language for page structure.
• Tag: a keyword marking an element.
• Attribute: extra information in a tag.
• CSS: rules for page appearance.
• Form: controls that collect input.
• Hyperlink: a reference to another page.

Common misconceptions

• "HTML is a programming language." It marks up content and cannot decide.
• "CSS changes the words." CSS changes presentation only.

Teacher activities

1. Starter: circle three tags.
2. Teach the head and body split.
3. Model a labelled form.
4. Add CSS for the heading.
5. Create and link page two.
6. Break one closing tag.

Student activities

1. Circle three tags.
2. Type the skeleton and title.
3. Build the form with two labels.
4. Add the table and CSS.
5. Create the help page and link.
6. Fix the broken tag.

<!DOCTYPE html>
<html>
<head>
  <title>SS3 Result Checker</title>
  <style> h1 { color: #004400; } </style>
</head>
<body>
  <h1>Result Checker</h1>
  <form action="/check" method="post">
    <label for="sid">Student ID:</label>
    <input id="sid" name="sid" required>
    <button type="submit">Check</button>
  </form>
  <table border="1">
    <tr><th>Subject</th><th>Score</th></tr>
    <tr><td>Mathematics</td><td>78</td></tr>
  </table>
</body>
</html>

Expected result: a green heading, a labelled text box, a button and a two-row table.

Practical / learning evidence

ss3_result_page_lawal.html and ss3_help_lawal.html link in both directions. The first carries a form with matching for and id values, a styled table and a tested link. Success needs valid nesting.

Resources and preparation

A text editor, two browsers and a printed source listing. Offline route: write markup on paper and sketch the layout.

Assessment for learning

Check the doctype, head, label matching, action and href. Award marks for a page without a broken link.

Inclusion and homework

Provide the head-and-body skeleton; extend others with an external stylesheet. Homework: sketch a third page.