OCR
A Level
HTML stands for HyperText Markup Language. A markup language is a way to write down information with embedded instructions that tell a computer how to interpret and display that information. HTML contains the important information for stucture of the content of a webpage, such as text, images, links and more. HTML tells the computer what you want to see, the computer can read and interpret the HTML and produce an output.
HTML is used to create websites. Every website in existance is written in HTML. In fact, this website that you are on right now was written in HTML. Whilst the primary use of HTML is websites, it is also sometimes used to create emails as well as mobile and desktop apps.
With HTML, you can make your own websites. You can build personal blogs, portfolios, or business websites, and have full control over the content and layout. HTML is also a highly sought-after skill in many job markets. With the rise of the internet, HTML is ever-so relevant to learn.
To write HTML, you need a text editor. A text editor is simply an application that allows you to write and edit text. When first starting out, it is best to use a simple text editor such as the text editors that already come preinstalled on all desktop computers:
On MacOS Open Finder > Applications > TextEdit
On WindowsOS Start > Search & Open "Notepad"
On ChromeOS Launcher > Search & Open "Text"
HTML is written in tags. Tags are basically the instructions that tell tht computer what to do. Tags are written with a less than sign (<) followed by the tag name and then a greater than sign (>). Then follows the content of the tag. After the content, the tag needs to be closed, to do this, we write a closing tag which is a repition of the opening tag with a forward slash (/) after the less than sign (<)
An example of how a tag is written:
<tag> content </tag>
Some tags don't have any content between them. When this is the case, we only write one tag, not two. However, when only writing one tag, this tag need to close itself, so we write the tag as normal but put a forward slash (/) before the greater than (<) sign
An example of how a self-closing tag is written:
<tag/>
Before writing any tags we must always include two essential tags at the very top of our document. We must write <!DOCTYPE html> just once. The <!DOCTYPE html> tag declares that the file is a HTML file, which is important for the web browser to know when processing files
The essential tag that must always be present at the top of any HTML document
<!DOCTYPE html>
We must also always include the <html> tag when writing html. We embed all of the HTML inside the <html> tag.
The two essential tags of any HTML document
<!DOCTYPE html>
<html>
All Content
</html>
HTML
<h1>Heading 1</h1>
Displayed
HTML
<h2>Heading 2</h2>
Displayed
HTML
<h3>Heading 3</h3>
Displayed
HTML
<h4>Heading 4</h4>
Displayed
HTML
<h5>Heading 5</h5>
Displayed
HTML
<h6>Heading 6</h6>
Displayed
HTML
<p>This is a paragraph</p>
Displayed
This is a paragraph
HTML
<h2><b>Text</b></h2>
Displayed
HTML
<h2><i>Text</i></h2>
Displayed
HTML
<h2><u>Text</u></h2>
Displayed
HTML
<h2><big>Text</big></h2>
Displayed
HTML
<h2><small>Text</small></h2>
Displayed
HTML
<h2><strong>Text</strong></h2>
Displayed
HTML
<h2><em>Text</em></h2>
Displayed
HTML
<h2><mark>Text</mark></h2>
Displayed
HTML
<h2><del>Text</del></h2>
Displayed
HTML
<h2><ins>Text</ins></h2>
Displayed
HTML
<h2>cm<sup>3</sup></h2>
Displayed
HTML
<h2>CO<sub>2</sub></h2>
Displayed
HTML
<h2><u><i><mark><big>Text</big></mark></i></u></h2>
Displayed
HTML
<!DOCTYPE html>
<html>
<p>Paragraph 1</p>
<br/>
<p>Paragraph 2</>
</html>
Displayed
Paragraph 1
Paragraph 2
HTML
<!DOCTYPE html>
<html>
<p>Paragraph 1</p>
<hr/>
<p>Paragraph 2</>
</html>
Displayed
Paragraph 1
Paragraph 2
HTML
<!DOCTYPE html>
<html>
<pre>Paragraph 1
Paragraph 2</pre>
</html>
Displayed
Paragraph 1
Paragraph 2
HTML
<img src="https://i.imgur.com/xCPZT2V.jpg" alt="The Arc De Triomphe Monument in Paris" width="50%" height="50%">
Displayed
HTML
<audio src="xyzzzpoemchargeofthelightbrigade.mp3" controls></audio>
Displayed
HTML
<video src="https://i.imgur.com/dlEu1yM.mp4" controls></video>
Displayed
HTML
<ol>
<li>Pizza</li>
<li>Pasta</li>
<li>Ice Cream</li>
</ol>
Displayed
And here is an unodered HTML list:
HTML
<ul>
<li>Pizza</li>
<li>Pasta</li>
<li>Ice Cream</li>
</ul>
Displayed
HTML
<button>Click Me</button>
Displayed
CSS stands for Cascading Style Sheet. A style sheet is a document that defines the presentation and formatting of a structured document. Style sheets specify how elements should be displayed on the screen. CSS is used to style a HTMl document. CSS allows us to change the colour, font, size, layout and so much more of a HTML document.
CSS is used to style HTML documents therefore CSS is responsible for the design of a website.
With CSS, you can enhance your own websites. You can have full control over the content and layout. CSS is also a highly sought-after skill in many job markets. With the rise of the internet, CSS is ever-so relevant to learn..
To write CSS, you need a text editor. A text editor is simply an application that allows you to write and edit text. When first starting out, it is best to use a simple text editor such as the text editors that already come preinstalled on all desktop computers:
On MacOS Open Finder > Applications > TextEdit
On WindowsOS Start > Search & Open "Notepad"
On ChromeOS Launcher > Search & Open "Text"
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
</html>
Displayed
HTML
<!DOCTYPE html>
<html>
<style>
CSS goes here
</style>
</html>
Displayed
HTML
<!DOCTYPE html>
<html>
<h style="CSS goes here"><h>
</html>
Displayed
MathML stands for Mathematical Markup Language. A markup language is a way to write down information with embedded instructions that tell a computer how to interpret and display that information. MathML is like a special language that computers use to write and show math problems, equations, expressions, shapes and more. MathML is the way the computer understands what we want to see, so it can show the math problems correctly on the screen.
MathMl is most commonly used to display mathematical information on websites. MathMl is also used in mobile and desktop applications and E-books.
MathML allows you to represent mathematical formulas and equations accurately on web pages and digital documents. This is especially useful for webdevelopers, educators, researchers, and anyone involved in publishing mathematical content online. As more educational and professional content moves online, the ability to create and manage mathematical content using MathML will become increasingly important.
To write MathML, you need a text editor. A text editor is simply an application that allows you to write and edit text. When first starting out, it is best to use a simple text editor such as the text editors that already come preinstalled on all desktop computers:
On MacOS Open Finder > Applications > TextEdit
On WindowsOS Start > Search & Open "Notepad"
On ChromeOS Launcher > Search & Open "Text"
HTML is written in tags. Tags are basically the instructions that tell tht computer what to do. Tags are written with a less than sign (<) followed by the tag name and then a greater than sign (>). Then follows the content of the tag. After the content, the tag needs to be closed, to do this, we write a closing tag which is a repition of the opening tag with a forward slash (/) after the less than sign (<)
Before writing any tags we must always include the essential <math> tag to encapsulate all of our MathMl inside of. The <math> tag can be put inside of a HTML Document.
HTML
<!DOCTYPE html>
<html>
<math>
All MathML content
</math>
</html>
Displayed
MathML
<math>
<mi>476</mi>
</math>
Displayed
- Minus −
+ Plus +
× Multiply ×
÷ Divide ÷
= Equal =
≠ Not Equal ≠
≈ Approximately Equal ≈
< Less Than <
≤ Less Than or Equal ≤
> Greater Than >
≥ Greater Than or Equal ≥
± Plus or Minus ±
∝ Proportional ∝
∑ Summation ∑
∏ Product ∏
⌊ Left Floor Parenthesis ⌊
⌋ Right Floor Parenthesis ⌋
⌈ Left Ceiling Parenthesis ⌈
⌉ Right Ceiling Parenthesis ⌉
So, if we want to write a multiplication sign, we would write:
MathML
<math>
<mo>×</mo>
</math>
Displayed
MathML
<math>
<mrow>
<mi>4/<mi><mo>+</mo><mi>3</mi><mo>=</mo><mi>7</mi>
</mrow>
</math>
Displayed
To write fractions, we must use the <mfrac> tag. Inside the <mfrac> tag, we must write the numerator and denominator tags, these are both written using the <mn> tag.
Let's write 0.5 in MathML.
MathML
<math>
<mrow>
<mfrac><mn>1</mn><mn>2</mn></mfrac>
</mrow>
</math>
Displayed
To write indices, we use the <msup> tag around the entire number and the <mn> tag around just the power.
MathML
<math>
<mrow>
<msup><mi>2</mi><mn>3</mn></msup>
</mrow>
</math>
Displayed
MathML
<math>
<mrow>
<mroot><mi>69</mi><mn>3</mn></mroot>
</mrow>
</math>
Displayed
MathML
<math>
<mrow>
<mi>x</mi><mo>=</mo><mfrac><mrow><mrow><mo>−</mo><mi>b</mi></mrow><mo>±</mo><mroot><mrow><msup><mi>b</mi><mn>2</mn></msup><mo>−</mo><mrow><mn>4</mn><mo>⁢</mo><mi>a</mi><mo>⁢</mo><mi>c</mi></mrow></mrow><mn>2</mn></mroot></mrow><mrow><mn>2</mn><mo>⁢</mo><mi>a</mi></mrow></mfrac>
</mrow>
</math>
Displayed
Python is a general purpose programming language. We use python to give instructions to computers.
Python is used in web development, software development, mathematics, system scripting and more.
Python is great for beginners as it has an easy to read syntax. It is also a very popular language and is used in many fields. Python can even be embedded into HTML documents, making it a great choice for those interested in web development.
To write Python, you can either use a web based IDE (such as Replit.com open_in_new) or you can use a local text editor. A text editor is simply an application that allows you to write and edit text. When first starting out, it is best to use a simple text editor such as the text editors that already come preinstalled on all desktop computers:
On MacOS Open Finder > Applications > TextEdit
On WindowsOS Start > Search & Open "Notepad"
On ChromeOS Launcher > Search & Open "Text"
NOTE: IF USING A LOCAL TEXT EDITOR YOU MAY NEED TO INSTALL PYTHON FROM python.orgopen_in_new
HTML
<!DOCTYPE html>
<html>
<head>
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<py-script>
</py-script>
</html>
Displayed
python
print("Hello World!")
Displayed
python
name = "John"
print(name)
Displayed
NOTE: YOU MUST HAVE AT LEAST A TWO LINE GAP BETWEEN THE VARIABLE AND PRINT
Now let's create multiple variables and print them in different ways
python
name = "John"
surname = " Doe"
age = 69
wife = "Jane"
wife_surname = " Doe"
wife_age = 6900
print(name+surname)
Displayed
python
print(age+wife_age)
Displayed
python
print(name+surname, wife+wife_surname)
Displayed
Python allows us to perform basic mathematical calculations.
python
print(2+5)
Displayed
python
print(2-5)
Displayed
python
print(2*5)
Displayed
python
print(2/5)
Displayed
python
5 == 5
Displayed
python
9 == 5
Displayed
python
9 > 5
Displayed
python
9 != 5
Displayed
python
if name == "John":
print("Hello John")
else:
print("I don't know you")
Displayed
Now let's see what happens when the opposite is true.
python
if name != "John":
print("Hello John")
else:
print("I don't know you")
Displayed
R is a programming language used for creating graphs and statistical computing.
R is most commonly used to visualise and analyse data.
R is the most popular programming language in the field of data science.
To write R, you need to first download it from https://cloud.r-project.org/index.html open_in_new
To print things in R, we literally just write them
R
Hello World!
Displayed
Hello World!
You can however, if you should want to, print things using: print("")
R
print("Hello World!")
Displayed
Hello World!
R allows us to perform mathematical calculations.
R
2+5
Displayed
7
R
2-5
Displayed
-3
R
2*5
Displayed
10
R
2/5
Displayed
0.4
The sqrt() function returns the square root of a number:
R
sqrt(25)
Displayed
5
The abs() function returns the absolute (positive) value of a number:
R
abs(-25)
Displayed
25
The ceiling() function rounds a number upwards to its nearest whole number, and the floor() function rounds a number downwards to its nearest whole number:
R
ceiling(1.69)
Displayed
2
R
floor(1.69)
Displayed
1
A variable is a name that stores a value. Variables are useful because instead of remembering everything, we can just remember the name of the variable. We can assign a value to a variable using the code: variable_name <- value.
R
name <- "John"
name
Displayed
John
Now let's create multiple variables and print them in different ways. To print multiple variables at once, we use the paste(variable1, variable2) function.
R
name <- "John"
surname <- "Doe"
age <- "69"
wife_name <- "Jane"
wife_surname <- "Doe"
wife_age <- "6900"
paste(name, surname)
Displayed
John Doe
R
age + wife_age
Displayed
6969
R
paste("Hello", name)
Displayed
Hello, John
R
5 == 5
Displayed
True
R
9 == 5
Displayed
False
R
9 > 5
Displayed
True
R
9 != 5
Displayed
True
We can write conditional statements to output different things depending on the value of a variable. We use the if statement to check if a value is true or false.
R
name <- "John"
if (name == "John") {
print("Hello, John")
}
Displayed
Hello, John
We can use the else statement to output something when the if statement is returned as false.
R
name <- "Jane"
if (name == "John") {
print("Hello, John")
} else {
print("I don't know you")
}
Displayed
I don't know you
We can use an elseif statement have mutliple possibilities of differnet "if" outputs.
R
name <- "Jane"
if (name == "John") {
print("Hello, John")
} else if (name == "Jane") {
print("Hello, Jane")
} else {
print("I don't know you")
}
Displayed
Hello, Jane
R
name <- "John"
if (name == "John") {
print("Hello, John")
} else if (name == "Jane") {
print("Hello, Jane")
} else {
print("I don't know you")
}
Displayed
Hello, John
R
name <- "Sam"
if (name == "John") {
print("Hello, John")
} else if (name == "Jane") {
print("Hello, Jane")
} else {
print("I don't know you")
}
Displayed
I don't know you
We can nest ifs inside of other ifs which allows you to test multiple criteria and increases the number of possible outcomes
R
score <- "69"
if (score > 30) {
print("Your score is above 30")
if (score > 50) {
print("and also above 50!")
} else {
print("but not above 50.")
}
} else {
print("Your score is below 30.")
}
Displayed
Your score is above 30
and also above 50!
And/Or Logical Statements