In this video tutorial we investigate how to add more webpages to our website and how to create the hyperlinks for the navigation bar using the anchor tag <A>
Learning Zone ✕
Theory Concepts
Cryptography Computer Hardware Computer Networks Algorithms OOP Programming Binary Data Boolean Logic Database ConceptsInteractive Quizzes
View All QuizzesGCSE Computer Science (UK)
1.1 System Architecture 1.2 Memory and Storage 1.3 Computer networks 1.4 Network security 1.5 – Systems software 1.6 – Impacts of digital technology2.1 – Algorithms 2.2 – Programming fundamentals 2.3 – Producing robust programs 2.4 – Boolean logic 2.5 – Programming languages and IDEs
A-Level Computer Science (UK)
1.1 Contemporary processors, input, output and storage devices 1.2 Software and software development 1.3 Exchanging data 1.4 Data types, data structures and algorithms 1.5 Legal, moral, cultural and ethical issues2.1 Elements of computational thinking 2.2 Problem solving and programming 2.3 Algorithms
Coding Challenges ✕
Python Challenges
Python Challenges - All Levels Python Challenges - Beginner Level Python Challenges - Intermediate Level Python Challenges - Advanced Level Python Turtle Challenges Solved ChallengesBlock Programming
BBC micro:bit Challenges Scratch ChallengesInteractive Coding Puzzles
Pirate Island Space Explorer Interactive Coding QuizzesOnline Interactive Tools ✕
More results...
Member's Area ✕
HTML – External CSS Stylesheet
Did you know?
You can use CSS code both within your HTML page or as a separate CSS file
Internal CSS Stylesheet
Internal CSS is saved wihtin the HTML page by adding a <STYLE> tag inside the <HEAD> section of the page.
The example below is an example of internal CSS stylesheet:
<HTML>
<HEAD>
<STYLE>
BODY {
background-color: #00FFFF;
}
</STYLE>
</HEAD>
<BODY>
....
</BODY>
</HTML>
The issue with internal CSS stylesheet is when a website consists of many HTNL pages. The CSS code needs to be added to every single page which can be really time consuming to maintain.
External CSS Style Sheet
To solve this issue, we can save the CSS code in a single file with the file extension .css (for instance: style.css)
We can then link all the pages of our website to this CSS stylesheet by adding the following code to our pages:
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="css/style.css">
</HEAD>
<BODY>
....
</BODY>
</HTML>
The main benefit of this approach is that we can now change the look & feel of all the webpages of our website by changing the content of just one single style.css file.
Video Tutorial
Hogwarts Sorting Hat Challenge
In the Harry Potter series of novels written by British author J. K. Rowling, The Sorting Hat is a magical hat at Hogwarts that determines which of the four school Houses each new student belongs most to. These four Houses are Gryffindor, Hufflepuff, Ravenclaw, and Slytherin.
In this challenge we are going to write Python program to control the sorting hat.
Your Task
Check the flowchart below and use Python to code your program.
Video Tutorial
Python Code
Solution...
The solution for this challenge is available to full members!Find out how to become a member:
➤ Members' Area
Voting Age Checker – Flowchart
For this challenge you are going to code a script to ask a user how old they are and inform them as to whether they are old enough to vote or not. If they are not old enough to vote, the script will calculate how many years the user will have to wait before being allowed to vote.
Flowchart
Task #1
Recreate this flowchart by writing the pseudo-code of this algorithm using code2flow.com.
Task #2
Implement this code using our online Python IDE:
Task #3
Test your code. Is it behaving the way you would expect? What input data could you use to test your code?
| Test # | Input Values | Expected Output | Actual Output |
| #1 | Age: 21 | You can vote | |
| #2 | Age: 16 | You will be able to vote in 2 years. | |
| #3 | Age: 100 | You can vote. | |
| #4 | Age: 0 | You will be able to vote in 18 years. | |
| #5 | Age: 18 | You can vote | |
| #6 | Age: (leave blank) | Error Message | |
| #7 | Age: “I am fifteen years old” | Error Message |
Task #4: Improve your code
How could you improve your code to fix some of the errors you have spotted by completing your test plan? What validation routines could you add to this code to make it more robust?
Solution...
The solution for this challenge is available to full members!Find out how to become a member:
➤ Members' Area
Pizza Robot – Flowchart
In this blog post we will design our own algorithms using both pseudo-code and flowcharts.
When given a problem to solve using a computer program you need to think about?
- What are the main steps required to solve this program? (decomposition)
- In which order will these steps be processed? (sequencing)
- What information do I need to retrieve from the end user? (inputs)
- What information do I need to display to the end user? (outputs)
- What decisions will the computer need to make? (selection / if statements)
- Is there any part of the process that can be repeated several times? (iteration / loops)
Then you can design your algorithm either in “plain English” (e.g. using pseudo-code) or using a visual representation (flowchart).
Scenario: Coffee Machine
Let’s look at the algorithm used in a tea/coffee machine.
The machine should:
- Ask the user whether they want tea or coffee,
- Add the tea or the coffee to the cup,
- Ask the user whether they want milk,
- If so, add milk to the cup,
- Ask the user whether they want sugar,
- If so, add sugar to the cup,
- Pour the hot water into the cup.
Now let’s look at this algorithm using pseudo-code and using a flowchart:
Pseudo-codeFlowchart
START;
/Would you like Tea or Coffee?/;
if tea {
Add Tea in cup;
} else {
Add Coffee in cup;
}
/Would you like Milk?/;
if Milk {
Add Milk in cup;
}
/Would you like Sugar?/;
if Sugar {
Add Sugar in cup;
}
Pour hot water in cup;
END;
Your Task: Pizza Robot
Adapt the above algorithm to use it in a pizza robot. Here is what the robot should do:
- Welcome the user,
- Ask what pizza base they need? (Thin, Thick)
- Ask if they want tomato sauce or BBQ sauce?
- Ask if they want cheese or not?
- Cook the pizza for 20 minutes,
- Serve the pizza
Extension:
- Ask if the user is vegetarian. If they are not, then ask if they want chicken on their pizza.
- The cooking time of the pizza varies: It should be 15 minutes for a thin base and 20 minutes for a thick base. Adapt your flowchart accordingly.
Create your pseudo-code and your flowchart using code2flow.com. Note you can reuse the code form the coffee machine to help you get started!
Tagged with: Flowchart
Digital Data – Terminology
Complete this domino activity to revise key definitions on how text files, pictures and sound files are stored on a computer using binary code.
Tagged with: Binary
HTML – Styling Text using CSS
Learning Objectives
In this challenge we are learning how to format text on a web page using a range of CSS properties.
Remember the key syntax for CSS is as follows:
In this challenge we will use various CSS properties such as:
- font-family:
- font-size:
- color:
- font-weight:
- font-style:
- text-decoration:
- text-shadow:
You can learn more about all these CSS properties on w3schools.com.
Video Tutorial
Customising Page Headings
Check the code below to see how we created the following 5 headings. Tweak the code to change the style of your headings and reuse it in your own webpages or CSS stylesheets.
Styling Paragraphs
Check the code below to see how we applied CSS to the <P> tag. Tweak the code to change the style of your paragraphs and reuse it in your own webpages or CSS stylesheets.
HTML – How to add a Favicon?
Once your website is ready, you will want to design and add a favicon.
This graphic will appear in your web-browser in the tab section as well as in the favourite toolbar.
The favicon is also used by smartphone and tablets as an “App” icon when the user decides to pin your webpage on their home screen.
There are different approaches to create your favicon. One easy approach is to use a website such as favicon.cc
Create your own favicon using favicon.ccOnce your icon is ready save it as favicon.cc in the root folder of your website:
HTML code to add your favicon to your webpage
Access the code of your webpage and in the <HEAD> section add the following code:
<link rel='icon' href='favicon.ico' type='image/x-icon'/ >
So your code should now look like this:
That’s it, save your page and access it in a web-browser. The favicon should now appear in the tab, next to the page title.
HTML – Using CSS with Pictures
There are many CSS properties that can be used to change the look and feel of your web graphics. You can use CSS to:
- Position a picture (e.g. center a picture or add a margin around your picture)
- Resize your picture (width, height) or make your picture responsive (width/height adapt to the size of the screen)
- Add border to a picture
- Add a border-radius to create rounded corner to a picture
- Add a shadow effect to a picture
- Rotate a picture
- Change the opacity of a picture
Investigate the use of CSS in the examples provided below. Then reuse some of these skills to update your pictures on your own webpages.
See the Pen Using CSS with Pictures by 101 Computing (@101Computing) on CodePen.
Roll over effects and animation effects
To draw the attention to your web graphics you may want to add animated rollover effects. This is a great approach to let the web user know when a graphic such as a web button can be clicked on (e.g. hyperlink).
See the Pen Rollover animation effects on pictures by 101 Computing (@101Computing) on CodePen.
HTML – Adding Pictures
In this video tutorial you will learn:
- How to organise your picture files in your website folder
- The main three types of picture files: .png, .jpg and .gif
- How to use the <IMG> tag to add pictures to your webpage.
LMC Simulator
Logic Gates Circuits
Network Designer
Flowchart Studio
Online Python IDE