1. Resources Home
  2. Secondary
  3. Computing
  4. Algorithms and programming
  5. HTML / CSS / Javascript
Free Primary Computing Lesson - Halloween with HTML

Free Primary Computing Lesson - Halloween with HTML

A computing lesson plan and associated resources for KS2 children designing a Halloween themed invitation. Introduces basic HTML and CSS and includes step-by-step lesson plan, support materials and pre-written HTML/CSS template. More free primary computing lessons and resources available at www.icompute-uk.com
iCompute
Primary Computing Lesson celebrating Ada Lovelace

Primary Computing Lesson celebrating Ada Lovelace

Teach primary computing with history. This teacher-led activity involves conducting online research about Ada Lovelace a female pioneer STEM and the world’s first computer programmer! Children present their findings using basic HTML and CSS to create a multimedia webpage all about Ada. More free primary computing lesson plans and resources at www.icompute-uk.com
iCompute
Advanced Higher: Creating a Database Driven Website using HTML, SQL and PHP

Advanced Higher: Creating a Database Driven Website using HTML, SQL and PHP

This resource takes pupils through the process of creating a Database Driven Website using XAMPP to create their server and MYPHP Admin for PHP and SQL. The Web Application I use is Microsoft Expression 4, but it can be done on any other Web Authoring Software. This booklet has made the Unit Assessment so much more manageable for my AH Computing Science pupils.
weebrido
7 Fun Problem Solving Activities for Web Coding

7 Fun Problem Solving Activities for Web Coding

These 7 lessons were written to be delivered as part of a Scottish Qualifications Authority workshop to discuss with Computing Science teachers alternative ways to deliver web coding. They are designed to introduce fun problem solving exercises (some paper-based, some practical) and are intended to be used as lessons starters or simply to break up longer coding exercises. The lessons cover: 1. Basic Tags/Elements (h1, h2, p, title) Pupils are given cut out pieces of web content and code and must arrange the pieces on a blank A3 HTML template printout. 2. Coding Basic Tags (h1, h2, p, title) Pupils are given an HTML file with page content (as a single paragraph of text) but no elements. They must separate the text out and add tags to format the content. They are also asked to research how to create the bullet point list required by the task. 3. Division Tags (div) Similar to lesson 1 but introducing the concept of sectioning off a page using division tags. 4. Adding In-line Styles (text colour, text size, background colour, fonts) Pupils are given an HTML file, printed on A3 paper, with spaces for styles to be added. They must arrange a number of cut-out styles on the HTML file to match a screenshot of a finished page. 5. Adding In-line Styles Pupils are given an screenshot of a finished page with annotations showing colours, fonts and text-sizes used. They must edit the styles in a given file to match the finished page. 6. External Style Sheets Pupils are shown the same site implemented using in-line and then an external stylesheet. This is used to discuss the advantages of external styles. Their task this time is to edit, delete and add to the stylesheet to alter the look of the website to match a fnished example. 7. Cascading Order Pupils are given 5 A3 sheets each which shows an HTML file, a CSS file and a screenshot of the page when shown in a browser. These examples must be examined carefully and used to research the precedence order used when a browser interprets styles (i.e. In-line over-rules external, ID overrules external). This a a difficult task requiring a lot of code reading and problem solving. Level: (Beginner / Intermediate) Duration: (Around 3 to 4 hours in Total) Teaches: (See above)
snegreid
Scratch Hour of Code Vocabulary Jeopardy Game

Scratch Hour of Code Vocabulary Jeopardy Game

This fun and engaging Jeopardy Style Game is the perfect way to bond with your class all year long and learn scratch. I typically put the class into small groups and ask a member of the group to choose a color and number. That is the question that they have to answer. If correct they get one point. Then I move to the next group. Alternatively the whole class answers and then we tally up the points to get a winner. I run it on an interactive whiteboard but would be equally successful on a projector, computer or TV screen. Alternatively it could be run for an individual student on their own device. When you start the game press the shuffle button to randomize the questions ensuring that no game is ever the same. This means that this Jeopardy game came be used multiple times with the one class as it is different every time. Once you have unzipped the file you will find a PowerPoint Macro Show. To run the game double click the file and make sure you say "yes" to running macros. If you do not the questions will not shuffle correctly. I have tested on a PC but it should work on other devices. If this is your first time with Macros let me know by personal message and I am happy to answer all your questions. Enjoy
Kiwilander
Web Coding Problem Solving Homework 2

Web Coding Problem Solving Homework 2

This is a short written task is designed to following an introductory few lesson on HTML. The 15 minute, 15 mark homework sheet has four pages which use basic HTML tags to encourage students to learn the skill of finding errors in code. Question 1 shows a html file containing 10 deliberate errors. Students have to identify the position of each error and write in a correction. Question 2 consists of five similar problems. Students are shown a web page in a browser, each of which are not displaying as intended. Students told how the web page should have looked and have to identify what error may have been made in the code that would cause each page to display as shown. Question 2 may be used to generate lots of good discussion as often there may be several possible answers. This could easily be used as class written work or for staff absence cover. The download includes the original HTML files created while writing the questions. These may be used for demonstration, discussion or as part of your HTML course.
snegreid
Web Coding Problem Solving Homework 1

Web Coding Problem Solving Homework 1

This is a short written task is designed to following an introductory lesson on HTML. The 10 to 15 minute, 18 mark homework sheet has two pages which cover the basic structure and tags of an HTML file. Question 1 shows a html file with most of the elements names removed from the tags. Students have to correctly complete the start and end tags for head, title, body, h1 and p. Question 2 shows a web page in a browser along with the HTML file. Students have to identify eight pieces of code that have been removed from the file, writing in the missing code. This could easily be used as class written work or for staff absence cover.
snegreid
Weggo! Tutorial 5: Linking to other web pages

Weggo! Tutorial 5: Linking to other web pages

Add links to other web pages using the <a> tag. Links can be added to headline, paragraph, and list item tags. Please be aware that Weggo! is 'beta' software, and some bugs will be present. Weggo! is a free-to-use website with no adverts or logins. Go to www.weggo.net I hope you and your students enjoy using Weggo!
MrLangford
Weggo! Tutorial 4: Adding images to a web page

Weggo! Tutorial 4: Adding images to a web page

Use the IMG tag to add images to your Weggo! HTML page. Images can be hot linked from other online resources, or a small amount of clipart images are supplied. Support for ALT text is included to promote accessibility and search engine-friendly authoring. Please be aware that Weggo! is 'beta' software, and some bugs will be present. Weggo! is a free-to-use website with no adverts or logins. Go to www.weggo.net I hope you and your students enjoy using Weggo!
MrLangford
Weggo! Tutorial 3: HTML Lists

Weggo! Tutorial 3: HTML Lists

Create HTML ordered (numbered) and unordered (bullet-point) lists using Weggo's unique drag-and-drop editor. The printable PDF shows step-by-step instructions of how to create simple lists. Please be aware that Weggo! is 'beta' software, and some bugs will be present. Weggo! is a free-to-use website with no adverts or logins. Go to www.weggo.net I hope you and your students enjoy using Weggo!
MrLangford
JavaScript fantasy name generator

JavaScript fantasy name generator

Series of linked html files that allow students to either experience simple JavaScript functionality, or disassemble it or edit it for practice. Alternatively it could be used by the teacher as a demonstration, or broken down for students to rebuild.
jsarnold
JavaScript Town Name Generator

JavaScript Town Name Generator

Simple website demonstrating how JavaScript can be used to generate random town names. This resource can either be given to students to disassemble and edit, or for the teacher to learn how JavaScript can be used in class to create a simple resource that students will enjoy.
jsarnold