Developing for the Web

DASKEREL wrote this teaching and practice using Oak's sequence as a source. View the source lesson at Oak National Academy. Oak has not endorsed this material. Check Oak's terms and separate rights for third-party works.

Learning outcomes

Distinguish HTML structure from CSS appearance
Use headings, paragraphs and links with meaningful text

Vocabulary: HTML · element · heading · paragraph · hyperlink · semantic

Retrieve previous learning

Why should a digital presentation have a predictable reading order?

Check: It helps readers and assistive tools find ideas in a meaningful sequence.

Learn the concept

A web page has structure and presentation. HTML names the parts and their meaning: a heading marks a section, a paragraph groups prose, and an anchor links to another resource. CSS can later change appearance, but large bold text alone does not become a semantic heading.

A small page might use <h1>Club guide</h1>, <p>Meet on Tuesday.</p> and <a href='...'>Read the timetable</a>. The href should point to a real, safe destination. Descriptive link words help people who scan a page or use a screen reader; 'click here' gives little context.

Keep a logical heading order and valid nesting. Test the rendered page on a school-approved device with keyboard navigation and check the text when styles are disabled. A page can render despite a mistake, so appearance alone is not a validation method.

Minimal fictional club page

<h1>Club guide</h1>
<p>Meet on Tuesday.</p>
<a href='/timetable'>Read the timetable</a>

The heading, paragraph and named link retain meaning without CSS.

Hands-on HTML and CSS editor

Edit the fictional page, inspect its live preview and test the lesson's design goal. Scripts, forms, external assets and access to the DASKEREL page are disabled in the preview.

HTMLCSS

Script-free preview

This editor does not publish or save your code. Avoid personal information and external links. The preview cannot run JavaScript.

Worked model

Write a one-sentence purpose for a fictional club page.
Mark its main title with h1 and detail with p elements.
Add a descriptive link to an approved local timetable route.
Inspect heading order, link destination and keyboard operation.

Guided practice

A page uses a styled <div> as its only title. What semantic change helps navigation?

Hint: Choose an element whose meaning is heading.

Check the guided answer

Use an appropriate heading element such as <h1> for the main page title, then retain CSS for its appearance. Assistive navigation can identify the title by structure.

Independent practice

Write your own response to every question before viewing the model answers. Your writing stays in this page session; this activity does not submit, store or grade it. Avoid including private information.

Teacher observed practical evidence

A teacher must apply the school's risk assessment, allergy policy and any individual healthcare plan before the practical. Observe and record the criteria during supervised work. Written answers cannot certify practical safety or skill.

A teacher observes the learner produce and revise the named artefact or program in an approved, accessible environment.
The saved work is checked against the brief, source rights, privacy and an actual user or test task.

Find and correct a misconception

“HTML is only a way to make text look colourful.”

Correction: HTML describes content structure and meaning; CSS is normally used for visual styling.

Extend and reflect

Add a second section without jumping from h1 to h4.

Guidance: Use h2 for the next major heading and explain the section relationship.

Where this lesson could lead · Computer Science GCSE → Daskerel Computing and AI

This lesson practises: Distinguish HTML structure from CSS appearance. Algorithms, digital systems and safe practice support later software and technology work.

Next school subject: Computer Science GCSE. Check the subject and examination board that fit your school.
Later DASKEREL learning: Daskerel Computing and AI. Explore further study and build evidence from practical work.
Later credential exploration: AWS Certified Developer - Associate is an example in this later specialism. Check current awarding-body requirements before planning an exam.
Example career direction: Software Engineer. Explore organisations and local support.

This is an exploratory route, not a promise of admission, a qualification, certification eligibility or employment. Years 7–9 learning is an early foundation; any later credential may require substantial study, experience or local approval.

Year 8 · Creative digital projects · original lesson pack

DASKEREL beta · internal AI review pending

Add an image with rights and a meaningful alternative

DASKEREL wrote this teaching and practice using Oak's sequence as a source. View the source lesson at Oak National Academy. Oak has not endorsed this material. Check Oak's terms and separate rights for third-party works.

Learning outcomes

Use an image element with appropriate alternative text
Choose a permitted image and preserve its proportions

Vocabulary: image element · alt text · licence · aspect ratio · caption

Retrieve previous learning

What makes a link accessible when read out of context?

Check: Its text describes the destination or action.

Learn the concept

An HTML image element uses src for the file location and alt for a text alternative. An informative image's alt text should convey the information needed in context. For a chart of three club counts, 'Bar chart of attendance: art 12, music 9, coding 7' is more useful than 'image'. If the same information is already in nearby text, a decorative image may use empty alt text.

A photograph found in search results is not automatically free to reuse. Use an original image or check its licence, any attribution terms and the school's consent rules. Avoid publishing identifiable pupil faces or location details without the required permissions. The image path should be local or trusted and should not secretly collect reader data.

Specify display dimensions or responsive CSS without distorting the aspect ratio. Test at narrow and wide widths and when the image cannot load. The text and page purpose should still make sense in the failed-load case; a caption and a text alternative have related but different jobs.

Original fictional garden diagram

<figure>
  <img src='/images/garden-plan.png' alt='Three raised beds beside a wide path'>
  <figcaption>Proposed garden layout</figcaption>
</figure>

The alt conveys the informative layout; the caption names the diagram's purpose.

Hands-on HTML and CSS editor

Edit the fictional page, inspect its live preview and test the lesson's design goal. Scripts, forms, external assets and access to the DASKEREL page are disabled in the preview.

HTMLCSS

Script-free preview

This editor does not publish or save your code. Avoid personal information and external links. The preview cannot run JavaScript.

Worked model

Decide what information an original garden sketch adds to the page.
Save the permitted image at a known path and record any required licence credit.
Write context-specific alt text and a short caption if it helps interpretation.
Test loading, narrow screen width and the page with images disabled.

Guided practice

An image of a seating plan has alt='photo'. How would you improve it?

Hint: State the information a reader needs from the image.

Check the guided answer

Describe the relevant layout, for example 'Four tables around a central clear route', if that is accurate. If the seating plan has more detail, provide a fuller text description nearby.

Independent practice

Write your own response to every question before viewing the model answers. Your writing stays in this page session; this activity does not submit, store or grade it. Avoid including private information.

Teacher observed practical evidence

A teacher must apply the school's risk assessment, allergy policy and any individual healthcare plan before the practical. Observe and record the criteria during supervised work. Written answers cannot certify practical safety or skill.

A teacher observes the learner produce and revise the named artefact or program in an approved, accessible environment.
The saved work is checked against the brief, source rights, privacy and an actual user or test task.

Find and correct a misconception

“Alt text is always the file name.”

Correction: Alt text describes the image's useful meaning in the page context, not its storage label.

Extend and reflect

Design a text equivalent for a more complex chart.

Guidance: Include title, categories, units, key values and the main pattern in nearby prose or a table.

Where this lesson could lead · Computer Science GCSE → Daskerel Computing and AI

This lesson practises: Use an image element with appropriate alternative text. Algorithms, digital systems and safe practice support later software and technology work.

Next school subject: Computer Science GCSE. Check the subject and examination board that fit your school.
Later DASKEREL learning: Daskerel Computing and AI. Explore further study and build evidence from practical work.
Later credential exploration: AWS Certified Developer - Associate is an example in this later specialism. Check current awarding-body requirements before planning an exam.
Example career direction: Software Engineer. Explore organisations and local support.

This is an exploratory route, not a promise of admission, a qualification, certification eligibility or employment. Years 7–9 learning is an early foundation; any later credential may require substantial study, experience or local approval.

Year 8 · Creative digital projects · original lesson pack

DASKEREL beta · internal AI review pending

Use CSS selectors and declarations to style a page

DASKEREL wrote this teaching and practice using Oak's sequence as a source. View the source lesson at Oak National Academy. Oak has not endorsed this material. Check Oak's terms and separate rights for third-party works.

Learning outcomes

Explain selector, property and value
Apply a readable style without removing semantic HTML

Vocabulary: CSS · selector · declaration · property · value · contrast

Retrieve previous learning

Which technology gives a heading its structural meaning?

Check: HTML gives the heading its semantic role; CSS can control its appearance.

Learn the concept

CSS rules select HTML elements and assign presentation properties. In h1 { color: #12324a; } the selector h1 targets heading elements; color is a property; #12324a is its value. The braces contain declarations and a semicolon ends each declaration. A browser may ignore an invalid property without making an obvious error dialog.

Class selectors allow a style to apply to selected elements. A rule .notice { padding: 1rem; } matches an element with class='notice'. Separate structure from styling so a page still has headings, paragraphs and links when CSS fails. Avoid styling a generic div to imitate a button without giving it button behaviour.

Style for a purpose: readable contrast, spacing and line length. Test responsive widths and keyboard focus; do not hide focus outlines without an accessible replacement. A large font alone cannot fix unclear wording or a missing text alternative.

Simple readable heading style

h1 {
  color: #12324a;
  margin-bottom: 1rem;
}
.notice { padding: 1rem; }

The first selector styles every h1; the class selector styles only elements carrying notice.

Hands-on HTML and CSS editor

Edit the fictional page, inspect its live preview and test the lesson's design goal. Scripts, forms, external assets and access to the DASKEREL page are disabled in the preview.

HTMLCSS

Script-free preview

This editor does not publish or save your code. Avoid personal information and external links. The preview cannot run JavaScript.

Worked model

Keep a semantic h1 in the fictional club page.
Add an h1 rule for colour and spacing and inspect the result.
Add a notice class to one explanatory section and target it with .notice.
Check contrast, narrow width and keyboard focus without relying on colour alone.

Guided practice

What does .notice { padding: 1rem; } select?

Hint: The dot changes the selector's kind.

Check the guided answer

It selects elements whose class list includes notice and adds inner spacing. It does not target every element named notice.

Independent practice

Write your own response to every question before viewing the model answers. Your writing stays in this page session; this activity does not submit, store or grade it. Avoid including private information.

Teacher observed practical evidence

A teacher must apply the school's risk assessment, allergy policy and any individual healthcare plan before the practical. Observe and record the criteria during supervised work. Written answers cannot certify practical safety or skill.

A teacher observes the learner produce and revise the named artefact or program in an approved, accessible environment.
The saved work is checked against the brief, source rights, privacy and an actual user or test task.

Find and correct a misconception

“A CSS class creates a semantic heading.”

Correction: A class is a styling hook; use an HTML heading element for heading meaning.

Extend and reflect

Suggest a narrow-screen layout change for a two-column page.

Guidance: Use a media query or flexible layout to stack content in logical reading order without losing labels.

Where this lesson could lead · Computer Science GCSE → Daskerel Computing and AI

This lesson practises: Explain selector, property and value. Algorithms, digital systems and safe practice support later software and technology work.

Next school subject: Computer Science GCSE. Check the subject and examination board that fit your school.
Later DASKEREL learning: Daskerel Computing and AI. Explore further study and build evidence from practical work.
Later credential exploration: AWS Certified Developer - Associate is an example in this later specialism. Check current awarding-body requirements before planning an exam.
Example career direction: Software Engineer. Explore organisations and local support.

This is an exploratory route, not a promise of admission, a qualification, certification eligibility or employment. Years 7–9 learning is an early foundation; any later credential may require substantial study, experience or local approval.

Year 8 · Creative digital projects · original lesson pack

DASKEREL beta · internal AI review pending

Explain how search results are found and ordered

DASKEREL wrote this teaching and practice using Oak's sequence as a source. View the source lesson at Oak National Academy. Oak has not endorsed this material. Check Oak's terms and separate rights for third-party works.

Learning outcomes

Distinguish crawling, indexing and ranking
Recognise that a top result may be paid or unsuitable

Vocabulary: crawler · index · ranking · sponsored result · query

Retrieve previous learning

What evidence should support a factual claim on a web page?

Check: A traceable source whose content and date support that exact bounded claim.

Learn the concept

A search engine discovers many pages with crawlers, stores information about them in an index and ranks likely matches for a query. It does not search every page on the live web at the moment a user types. Some pages are inaccessible, new or excluded, so absence from results is not proof of absence from the web.

Ranking considers relevance and other signals, but the exact systems vary and change. Sponsored results are advertisements and should be recognised as such. Position on a result page is not proof that a source is correct, current or independent. Read the title, address and page date before relying on it.

For a school question, compare an official primary source with other relevant evidence. Search terms should be specific enough to find the intended subject, but do not put classmates' personal details into a public search. Record the page you actually inspected, not only the search snippet.

Hands-on HTML and CSS editor

Edit the fictional page, inspect its live preview and test the lesson's design goal. Scripts, forms, external assets and access to the DASKEREL page are disabled in the preview.

HTMLCSS

Script-free preview

This editor does not publish or save your code. Avoid personal information and external links. The preview cannot run JavaScript.

Worked model

Write a specific search question about a fictional local recycling rule.
Distinguish a sponsored listing from an ordinary result.
Open an official source through its known domain, check date and exact scope.
Record the source link and explain why its position in results alone proves nothing.

Guided practice

A result ranks first and says 'Ad'. Is its position evidence that the information is official?

Hint: Separate payment and ranking from authority.

Check the guided answer

No. It is a sponsored placement. Verify its publisher, URL, date and evidence independently before using it, and prefer the relevant official source for an official rule.

Independent practice

Write your own response to every question before viewing the model answers. Your writing stays in this page session; this activity does not submit, store or grade it. Avoid including private information.

Teacher observed practical evidence

A teacher must apply the school's risk assessment, allergy policy and any individual healthcare plan before the practical. Observe and record the criteria during supervised work. Written answers cannot certify practical safety or skill.

A teacher observes the learner produce and revise the named artefact or program in an approved, accessible environment.
The saved work is checked against the brief, source rights, privacy and an actual user or test task.

Find and correct a misconception

“The first search result is the most truthful page.”

Correction: Rank position and advertising do not certify accuracy or suitability; verify the page's provenance and claim.

Extend and reflect

Compare results for two different but related queries.

Guidance: Explain how changed wording affects relevance without assuming the engine's internal ranking formula.

Where this lesson could lead · Computer Science GCSE → Daskerel Computing and AI

This lesson practises: Distinguish crawling, indexing and ranking. Algorithms, digital systems and safe practice support later software and technology work.

Next school subject: Computer Science GCSE. Check the subject and examination board that fit your school.
Later DASKEREL learning: Daskerel Computing and AI. Explore further study and build evidence from practical work.
Later credential exploration: AWS Certified Developer - Associate is an example in this later specialism. Check current awarding-body requirements before planning an exam.
Example career direction: Software Engineer. Explore organisations and local support.

This is an exploratory route, not a promise of admission, a qualification, certification eligibility or employment. Years 7–9 learning is an early foundation; any later credential may require substantial study, experience or local approval.

Year 8 · Creative digital projects · original lesson pack

DASKEREL beta · internal AI review pending

Navigate to evidence and keep a traceable source record

DASKEREL wrote this teaching and practice using Oak's sequence as a source. View the source lesson at Oak National Academy. Oak has not endorsed this material. Check Oak's terms and separate rights for third-party works.

Learning outcomes

Refine a query and inspect a source beyond its snippet
Use page navigation and a source log safely

Vocabulary: query refinement · domain · breadcrumb · source log · accessibility

Retrieve previous learning

Does a first-ranked result prove a page is reliable?

Check: No. Ranking and sponsored placement do not verify author, date or evidence.

Learn the concept

Search begins with a precise question. If 'energy' yields unrelated results, add the subject and age or country, such as 'UK electricity generation official statistics'. Then inspect the actual page's publisher and date. A domain name can be a clue, but a familiar-looking address can still be misleading; use a known route to important services.

Navigation continues after the first click. Headings, menus and breadcrumbs show where a page sits in a larger site. Use browser find for a term, but read the surrounding paragraph and definitions. Save the exact page URL, title and date accessed; a homepage link may not allow someone else to verify the figure.

Be careful with downloads, pop-ups and forms. Do not enter private details just to read a claim. Use school-approved devices and ask a teacher before installing extensions or opening unexpected files. A readable source log and descriptive links make your own work easier to check.

Hands-on HTML and CSS editor

Edit the fictional page, inspect its live preview and test the lesson's design goal. Scripts, forms, external assets and access to the DASKEREL page are disabled in the preview.

HTMLCSS

Script-free preview

This editor does not publish or save your code. Avoid personal information and external links. The preview cannot run JavaScript.

Worked model

Write the specific data question before entering search terms.
Refine one broad query using topic, location and source type.
Open two candidate pages, check provenance and read the relevant paragraph in context.
Log title, publisher, exact URL, date and the claim each page supports.

Guided practice

A page cites a number, but the student's source log only says 'internet'. What is missing?

Hint: Another reader must be able to locate and assess the exact source.

Check the guided answer

Record the page title, publisher, full URL, publication or access date, and where the number appears. Then check whether its units and scope match the student's claim.

Independent practice

Write your own response to every question before viewing the model answers. Your writing stays in this page session; this activity does not submit, store or grade it. Avoid including private information.

Teacher observed practical evidence

A teacher must apply the school's risk assessment, allergy policy and any individual healthcare plan before the practical. Observe and record the criteria during supervised work. Written answers cannot certify practical safety or skill.

A teacher observes the learner produce and revise the named artefact or program in an approved, accessible environment.
The saved work is checked against the brief, source rights, privacy and an actual user or test task.

Find and correct a misconception

“Finding the right word with Ctrl+F means the sentence supports the whole claim.”

Correction: Read context, definitions, date and boundary before using a passage as evidence.

Extend and reflect

Explain how a change in a site's page path affects a saved citation.

Guidance: Record title and publisher as well as URL, and revisit links when work is updated.

Where this lesson could lead · Computer Science GCSE → Daskerel Computing and AI

This lesson practises: Refine a query and inspect a source beyond its snippet. Algorithms, digital systems and safe practice support later software and technology work.

Next school subject: Computer Science GCSE. Check the subject and examination board that fit your school.
Later DASKEREL learning: Daskerel Computing and AI. Explore further study and build evidence from practical work.
Later credential exploration: AWS Certified Developer - Associate is an example in this later specialism. Check current awarding-body requirements before planning an exam.
Example career direction: Software Engineer. Explore organisations and local support.

This is an exploratory route, not a promise of admission, a qualification, certification eligibility or employment. Years 7–9 learning is an early foundation; any later credential may require substantial study, experience or local approval.

Year 8 · Creative digital projects · original lesson pack

DASKEREL beta · internal AI review pending

Plan, build and test a small custom website

DASKEREL wrote this teaching and practice using Oak's sequence as a source. View the source lesson at Oak National Academy. Oak has not endorsed this material. Check Oak's terms and separate rights for third-party works.

Learning outcomes

Combine semantic HTML and CSS around a clear brief
Test navigation, content, access and rights before sharing

Vocabulary: brief · prototype · navigation · responsive · validation

Retrieve previous learning

How do HTML and CSS differ?

Check: HTML supplies semantic structure; CSS controls presentation.

Learn the concept

A small site is more than one attractive page. A fictional school club site might need a home page, a verified schedule page and a contact route managed by the school. Write a brief with the audience, required facts and safe actions. Sketch links so a user can move between pages without guessing the site structure.

Implement semantic headings and descriptive links first, then apply readable CSS. Use original or permission-cleared images and appropriate alternatives. Keep any form out of the prototype unless the school has approved how personal data will be collected and stored. A static page can demonstrate a service without collecting anything.

Test with tasks: find the schedule, return home, and identify who maintains the information. Check on keyboard and narrow screen. Validate HTML and inspect broken links, but also ask a human to read the wording. Keep a change log and mark the site as a classroom prototype until facts, accessibility and rights are reviewed.

Hands-on HTML and CSS editor

Edit the fictional page, inspect its live preview and test the lesson's design goal. Scripts, forms, external assets and access to the DASKEREL page are disabled in the preview.

HTMLCSS

Script-free preview

This editor does not publish or save your code. Avoid personal information and external links. The preview cannot run JavaScript.

Worked model

Write the brief for a fictional club and verify the schedule through a named school source.
Create semantic home and schedule pages with descriptive navigation.
Apply a small consistent CSS set and one permitted image with alt text.
Run task-based, keyboard, narrow-screen and source-rights checks; revise a found issue.

Guided practice

A visitor cannot return from the schedule page to the home page. What change and test are needed?

Hint: Navigation should work in both directions.

Check the guided answer

Add a descriptive 'Club home' link in the site's navigation, then ask a user to open the schedule and return home using only the keyboard. Verify the destination is correct.

Independent practice

Write your own response to every question before viewing the model answers. Your writing stays in this page session; this activity does not submit, store or grade it. Avoid including private information.

Teacher observed practical evidence

A teacher must apply the school's risk assessment, allergy policy and any individual healthcare plan before the practical. Observe and record the criteria during supervised work. Written answers cannot certify practical safety or skill.

A teacher observes the learner produce and revise the named artefact or program in an approved, accessible environment.
The saved work is checked against the brief, source rights, privacy and an actual user or test task.

Find and correct a misconception

“A site that works on the author's laptop is ready for everyone.”

Correction: It needs accurate content, link, keyboard, narrow-screen, rights and privacy review with representative users.

Extend and reflect

Sketch how to record version changes after the club timetable changes.

Guidance: State source, date, affected pages and retest links and summaries after the correction.