Home Search About

Computer Programming



WHAT IS HTML?

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.



WHERE IS HTML USED?

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.



WHY LEARN HTML?

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.



WHERE DO I WRITE HTML?

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"





WRITING HTML


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/>


Essential Tags

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>


Text Tags


In order to write on a webpage, we must use text tags. Titles and subtitles are usually written using heading tags. Headings are written using the <h1> to <h6> tags. The <h1> tag is the biggest tag in terms of size, and the <h6> tag is the smallest.

HTML

<h1>Heading 1</h1>

Displayed

Heading 1

HTML

<h2>Heading 2</h2>

Displayed

Heading 2

HTML

<h3>Heading 3</h3>

Displayed

Heading 3

HTML

<h4>Heading 4</h4>

Displayed

Heading 4

HTML

<h5>Heading 5</h5>

Displayed

Heading 5

HTML

<h6>Heading 6</h6>

Displayed

Heading 6

The HTML element <p> is used to define a paragraph. The <p> tag outputs the smalest-sized text of any of the text elements.

HTML

<p>This is a paragraph</p>

Displayed

This is a paragraph



Styling Text Tags

The text elements can be styled to alter the appearance of the text. They must be used in conjunciton with the text tags.

The <b> tag is used to create bold text.

HTML

<h2><b>Text</b></h2>

Displayed

Text



The <i> tag is used to create italicized text.

HTML

<h2><i>Text</i></h2>

Displayed

Text



The <u> tag is used to underline the text.

HTML

<h2><u>Text</u></h2>

Displayed

Text



The <big> tag is used to make the text bigger.

HTML

<h2><big>Text</big></h2>

Displayed

Text



The <small> tag is used to make the text smaller.

HTML

<h2><small>Text</small></h2>

Displayed

Text



The <strong> tag is used to make the text stand out more.

HTML

<h2><strong>Text</strong></h2>

Displayed

Text



The <em> tag is used to emphasize the text.

HTML

<h2><em>Text</em></h2>

Displayed

Text



The <mark> tag is used to highlight the text.

HTML

<h2><mark>Text</mark></h2>

Displayed

Text



The <del> tag is used to strikethrough the text.

HTML

<h2><del>Text</del></h2>

Displayed

Text



The <ins> tag is written to show that the text has been insterted, but only displayed as underlined text.

HTML

<h2><ins>Text</ins></h2>

Displayed

Text



The <sup> tag is used to write text in superscript.

HTML

<h2>cm<sup>3</sup></h2>

Displayed

cm3



The <sub> tag is used to write text in subscript.

HTML

<h2>CO<sub>2</sub></h2>

Displayed

CO2



We can combine multiple text elements to create a different text appearance.

HTML

<h2><u><i><mark><big>Text</big></mark></i></u></h2>

Displayed

Text





Separating Parts of Webpages



Webpages need to separate paragraphs, images, etc. to make them easier for a user to read.

To separate elements, we can use the <br/> tag to create a line break. This adds a blank, vertical spacing between elements. The <br/> tag is a self-closing tag.

HTML

<!DOCTYPE html>
  <html>
    <p>Paragraph 1</p>
     <br/>
    <p>Paragraph 2</>
  </html>

Displayed

Paragraph 1


Paragraph 2



If we want to separate elements with a horizontal line, we can use the <hr/> tag.

HTML

<!DOCTYPE html>
  <html>
    <p>Paragraph 1</p>
     <hr/>
    <p>Paragraph 2</>
  </html>

Displayed

Paragraph 1

Paragraph 2



If we just want to preserve our spaces and line breaks, we can use the <pre> tag.

HTML

<!DOCTYPE html>
  <html>
    <pre>Paragraph 1

    Paragraph 2</pre>
  </html>

Displayed

Paragraph 1


Paragraph 2




Images


To add an image, we can use the <img> tag. Inside of the <img> tag we use the atributes src and alt. The src attribute is used to specify the source of the image. The alt attribute is used to specify an alternative text to describe the image which helps with seo and accessibility. The alt text will be displayed if the image can not be loaded. Inside of the image tag we must also set the width and height attributes. The width and height attributes are used to specify the width and height of the image. The height and width can be specified in pixels or in percent. The <img> tag does not need to be closed.

HTML

<img src="https://i.imgur.com/xCPZT2V.jpg" alt="The Arc De Triomphe Monument in Paris" width="50%" height="50%">

Displayed

The Arc De Triomphe Monument in Paris



Audio


To add an audio file, we can use the <audio> tag. Inside of the <audio> tag we use the atributes src and controls. The src attribute is used to specify the source of the audio file. The controls attribute is used to specify whether the user can control the audio file (Play, Stop, Volume, Skip). The controls attribute can be set to true or false.

HTML

<audio src="xyzzzpoemchargeofthelightbrigade.mp3" controls></audio>

Displayed




Video


To add a video file, we can use the <video> tag. Inside of the <video> tag we use the atributes src and controls. The src attribute is used to specify the source of the video file. The controls attribute is used to specify whether the user can control the video file (Play, Stop, Volume, Skip). The controls attribute can be set to true or false.

HTML

<video src="https://i.imgur.com/dlEu1yM.mp4" controls></video>

Displayed




Lists


Lists can be created in HTML using the <li> tag. The <li> tag is used to create a list item. Lists can be ordered or unordered. Unodered lists use bullet points. Ordered lists use numbers. Ordered lists need to be nested in a pair of <ol> tags and unordered lists need to be nested in a pair of <ul> tags.
Let's create an ordered list in HTML:

HTML

<ol>
  <li>Pizza</li>
  <li>Pasta</li>
  <li>Ice Cream</li>
</ol>

Displayed

  1. Pizza
  2. Pasta
  3. Ice Cream


And here is an unodered HTML list:


HTML

<ul>
  <li>Pizza</li>
  <li>Pasta</li>
  <li>Ice Cream</li>
</ul>

Displayed

  • Pizza
  • Pasta
  • Ice Cream



Tables

Tables can be created in HTML using the <table> tag. Inside of the table tag we use the <tr> tag to define a row in a table. Inside of the <tr> tag we use the <th> to define the headers of the table, or we use the <td> tag to define the cells of the table.

HTML

<table>
 <tr>
  <th>Name</th>
  <th>Surname</th>
  <th>Age<th>
 </tr>
 <tr>
  <td>John</th>
  <td>Doe</th>
  <td>69<th>
 </tr>
 <tr>
  <td>Jane</th>
  <td>Doe</th>
  <td>6900<th>
 </tr>
</table>

Displayed

Name Surname Age
John Doe 69
Jane Doe 6900



Centering


To make something appear in the center of the page, we can use the <center> tags. This tag is used to center the content inside of it.
Let's center some text:

HTML

<center><h4>Centered Text</h4></center>

Displayed

Centered Text




Buttons


To create clickable buttons in HTML, we use the <button> tag.
Let's create a button that says "Click Me":

HTML

<button>Click Me</button>

Displayed



Hyperlinks


Hyperlinks are used to link to other parts of the website or other websites. To create a hyperlink, we use the <a> tag. Inside of the <a> we must include the atribute href. The href attribute is used to specify the destination of the link. The href attribute can be set to a URL or a file path. We can add a hyperlink to a text element, image or button.
Let's create a button with hyperlink to my photography website:

HTML

<a href="https://photography.samfield.org"><button>Click Me</button></a>

Displayed



Clicking that button will open that webpage in place of this one. We can open the webpage in a new tab by using the target attribute. By setting the target attribute to _blank, the webpage will open in a new tab.

HTML

<a href="https://photography.samfield.org" target="_blank"><button>Click Me</button></a>

Displayed



Input Forms


Input forms are used to allow users to input data into a webpage, such as email adresses and passwords. HTML is used to create the framework for these inputs, but in order to actually store or process them, you will need to use php.

To create inputs on a webpage, we first use the <form> tags. Inside of the <form> tags, we write the <label> and <input> tags. The <label> tag is used to let the user know what type of input is required. The <input> tag creates the actual input box. The input tag must have an assigned attrubute which will differ depending on the type of input required. We must also asign an id to the <label> and <input> elements.

Let's take a look at the different types of inputs:

The text attribute allows a user to input text. This is useful for things like comments or messages.

HTML

<form>
  <label for="message">Write Message</label><br/>
    <input id="message" type="text">
</form>

Displayed







The Head



The head of a HTML document contains important information (metadata) for the browser that does not need to be displayed to the user on the webpage. The head is defined by the <head> tags. The head usually is placed at the top of the HTML document.

HTML

<!doctype HTML>
  <html>
    <head>

Invisible metadata
                            
    </head>
    <body>

All visible webpage content
                            
    </body>
  </html>

Result



Title


The title of a webpage is displayed in the browser tab. For example, the title of this webpage is "Sam Studies". The title is defined by the <title> tag.

HTML

<head>
  <title>Sam Studies</title>
</head>

Result

"Sam Studies" is displayed in the browser tab.


Link


The link tag is used to link to other files, for example, a CSS or Javascript file. The link tag is defined by the <link>.

Linking to stylesheets


Inside of the link tag we must include the atribute rel and href. The rel attribute is used to specify the relationship between the current document and the external resource. The href attribute is used to specify the location of the external resource.

HTML

<head>
 <link rel="stylesheet" href="style.css">
</head>

Result

The file: style.css is accessible by the current file.


Adding a Favicon


A favicon is the small image displayed in the tab. To display a favicon, inside of the link tag we must include the atribute rel and href. The rel attribute is used to specify the relationship between the current document and the external resource. For favicons, we set the rel value to "icon" The href attribute is used to specify the location of the external resource.

HTML

<head>
 <link rel="icon" href="https://i.imgur.com/vOcNiq9.png">
</head>

Result

Sam Studies logo displayed in the browser tab.



Meta



The <meta> tag is typically used to specify the character set, page description, keywords, author of the document, and viewport settings.

Character Set

A character set is a collection of characters used to represent text in a computer system. The UTF-8 character set is used to represent all characters on the planet.

HTML

<head>
  <meta charset="UTF-8"> 
</head>

Result

The webpage will contain characters from the UTF-8 character set.


Keywords

Key words are used to add relevant topic words to a webpage to help a search engine match the relevant user to the webpage.

HTML

<head>
  <meta name="keywords" content="Study, GCSE, Revision"> 
</head>

Result

The webpage will contain the keywords: "Study", "GCSE" & "Revision".


Descriptions

Descriptions are used to describe the contents of a webpage to help a search engine match the relevant user to the webpage.

HTML

<head>
  <meta name="description" content="A website for GCSE study resources"> 
</head>

Result

The webpage will contain the description: "A website for GCSE study resources".


Author

Authors are used to define the creater of a webpage

HTML

<head>
  <meta name="author" content="Sam Field"> 
</head>

Result

Sam Field is the author of this webpage.


Viewport
The viewport tells browsers how to control dimensions and scaling of the webpage so that the page looks good on all screen sizes.
We write: "width=device-width" to set the width of the page to follow the screen-width of the device which will vary depending on the device.
We also write: "initial-scale=1.0" to set the initial zoom level when the page is first loaded by the browser.

HTML

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head>

Result

Viewport set to device width and standard zoom.


Auto-refresh
We can refresh a webpage automatically by setting the "http-equiv" to equal "refresh".

HTML

<head>
  <meta http-equiv="refresh" content="60"> 
</head>

Result

Page will be reloaded every 60 seconds.


Redirecting

We can automatically redirect a webpage to another webpage by setting the "http-equiv" to equal "refresh" and the "url" to equal the webpage we want to redirect to.

HTML

<head>
 <meta http-equiv="refresh" content="60; url ="https://instagram.com/sams.photo.gallery"> 
</head>

Result

After 60 seconds, page will redirect to https://instagram.com/sams.photo.gallery


Language


We need to let the web browser know which language the website is written in so that it can match the relavent audience to the webpage. Inside of the html element we write: "lang=" to set the language of the webpage. To set the langauge to english, we write "lang="en"", other laguage codes include:

Click here for a full list of language codes

Let's set the language of this website to English:

HTML

<html lang="en"> 
</html>

Result

Language set to English


Country


We can also let the web browser know which country the website's target country so that it can match the relavent audience to the webpage. Inside of the language attribute, after the two-letter language code, we write a dash (-) followed by the country code. Country codes are always written in captial letters. To set the location to the United Kingdom, we write "lang="en-GB"", other country codes include:

Click here for a full list of country codes

Let's set the country of this website to the United Kingdom:

HTML

<html lang="en-GB">
</html>

Result

Language set to English. Country set to United Kingdom.





Characters & Entities


Some characters are reserved in HTML so in order to display them, we must write the character entity.

NOTE: These guides use codes for the UTF-8 character set.

Useful Character Entities



                                & Ampersand &amp;&#38;

                                " Double Quatation Mark &quot;&#34;

                                ' Apostrophe &apos;&#39;

                                ¢ Cent &cent;&#162;

                                £ Pound &pound;&#163;

                                ¥ Yen &yen;&#165;

                                € Euro &euro;&#8364;

                                © Copyright &copy;&#169;

                                ® Registered &reg;&#174;

                                ™ Trademark &trade;&#8482;



Mathematical Entity Codes



                                - Minus &#x2212;

                                + Plus &#x2B;

                                × Multiply &#x00d7;

                                ÷ Divide &#x00f7;

                                = Equal &#x003D;

                                ≠ Not Equal &#x2260;

                                ≈ Approximately Equal &#x2248;

                                < Less Than &#x003c;

                                ≤ Less Than or Equal &#x2264;

                                > Greater Than &#x003e;

                                ≥ Greater Than or Equal &#x2265;

                                ± Plus or Minus &#x00b1;

                                ∝ Proportional &#x221d;

                                ∑ Summation &#x2211;

                                ∏ Product &#x220f;

                                ⌊ Left Floor Parenthesis &#x230a;

                                ⌋ Right Floor Parenthesis &#x230b;

                                ⌈ Left Ceiling Parenthesis &#x2308;

                                ⌉ Right Ceiling Parenthesis &#x2309;
WHAT IS CSS?

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 an HTML document. CSS allows us to change the colour, font, size, layout and so much more of an HTML document.



WHERE IS CSS USED?

CSS is used to style HTML documents therefore CSS is responsible for the design of a website.



WHY LEARN CSS?

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..



WHERE DO I WRITE CSS?

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"





WRITING CSS



CSS is used to style HTML documents. To insert CSS into a style sheet, we can use three different ways:
  • External CSS
  • Internal CSS
  • In-line CSS


    • External CSS

    To insert CSS using the external method, we need to create a new file with the .css extension. We can then link to that file in our HTML document. We can then write all of our CSS in the .css file. The syntax for this is as follows:

    HTML

    <!DOCTYPE html>
 <html>
  <head>
   <link rel="stylesheet" href="style.css">
  </head>
 </html>

    Displayed






    Internal CSS

    To insert CSS using the internal method, we can use the <style> tag. We can then write all of our CSS in the <style> tags. The syntax for this is as follows:

    HTML

    <!DOCTYPE html>
  <html>
    <style>
                            
      CSS goes here
                            
    </style>
  </html>

    Displayed






    In-line CSS

    To insert CSS using the in-line method, we can use the style attribute inside of a HTML element. We can then write all of our CSS in the style attribute. The syntax for this is as follows:

    HTML

    <!DOCTYPE html>
  <html>
    <h style="CSS goes here"><h>
  </html>

    Displayed





    Cascading Order

    If multiple CSS rules are acting on one element, the element will only output the CSS of the rule of highest priority. The priority of CSS styles is as follows:
    1. In-line Style
    2. Internal Style
    3. External Style




    FOR THIS TUTORIAL, I WILL BE USING IN-LINE CSS



    Text Colours

    To change the colour of text, we use the color attribute followed by a colour value. CSS has a range of in-built colours that can be used, or we can use a hex code or RGB code to specify a colour.
    Let's make some green text:

    HTML

    <h3 style="color: green;">This text is green</h3>

    Displayed

    This text is green



    Background Colours

    To change the background colour of an element, we use the background-color attribute followed by a colour value. CSS has a range of in-built colours that can be used, or we can use a hex code or RGB code to specify a colour.
    Let's give some text a pink background:

    HTML

    <h3 style="background-color: pink;">This text is green</h3>

    Displayed

    This text has a pink background



    Combining Attributes

    To use multiple attributes on one element, we must separate them with a semi colon.
    Let's create a purple background with some white text.

    HTML

    <h3 style="background-color: purple; color: white;">This text is white with a purple background</h3>

    Displayed

    This text is white with a purple background



    Changing Radius

    To make it so that the background is the same width as the text, rather than being the entire width of the webpage, we can set the CSS display property to inline.
    Let's create a purple background with some white text.

    HTML

    <h3 style="background-color: purple; color: white; display: inline;">This text is white with a purple background</h3>

    Displayed

    This text is white with a purple background



    Font Sizing

    To change the size of text, we use the CSS font-size property with the value of the size. Size can be specified in px (pixels), % (percentage), vw (percentage of viewport width), vh (percentage of viewport height), em. There are lots of other units we could use, but these listed are the most common.
    Let's explore different font sizes.

    HTML

    <h3 style="font-size: 20px;">Text</h3>

    Displayed

    Text

    HTML

    <h3 style="font-size: 20%;">Text</h3>

    Displayed

    Text

    HTML

    <h3 style="font-size: 20vw;">Text</h3>

    Displayed

    Text



    Borders

    We can create a coloured border around text by using the border attribute. The border attrubute needs to have a set thickness, usually meaured in pixels or percentage. The border attribute must also have a set solidity. This can be either solid, dashed, dotted, double, groove, ridge, inset, and outset. Finally, we must also specify the colour of the border.
    Let's take a look at the different solidities.

    HTML

    <h3 style="border: 2px solid black">A solid border</h3>

    Displayed

    A solid border

    HTML

    <h3 style="border: 2px dashed black">A dashed border</h3>

    Displayed

    A dashed border

    HTML

    <h3 style="border: 2px dotted black">A dotted border</h3>

    Displayed

    A dotted border





    WHAT IS JavaScript?

    JavaScript is a programming language used to create interactive and dynamic content on webpages.



    WHERE IS JavaScript USED?

    JavaScript is primarily used in Web Development but is also used in Game Development, Mobile and Desktop applications, and Server-Side Development.



    WHY LEARN JavaScript?

    With JavaScript, you can enhance your own websites. .



    WHERE DO I WRITE JavaScript?

    To write JavaScript, 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"





    WRITING JavaScript


    Javascript is written into HTML files, or a .js file.
    Writing Things

    .

    HTML

    <p id="mytext"></p>
<script>document.getElementById("mytext").innerHTML = "Hello World!";</script>

    Displayed

    Hello World!


    WHAT IS MathML?

    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.



    WHERE IS MathML USED?

    MathMl is most commonly used to display mathematical information on websites. MathMl is also used in mobile and desktop applications and E-books.



    WHY LEARN MathML?

    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.



    WHERE DO I WRITE MathML?

    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"





    Writing MathML


    MathML 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 (<)



    Essential Tags

    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

    All MathMl content


    Writing Values

    When writing values (numbers, algebraic letters, pi, sin, cos, tan, ect.) we use the <mi> tag. The <mi> tag stands for Mathamatical Identifiers.
    Lets write 476 in MathML.

    MathML

    <math>
    <mi>476</mi>
</math>

    Displayed

    476



    Writing Operators
    When writing operators (times, divide, plus, minus, ect.) we use the <mo> tag. The <mo> tag stands for Mathamatical Operators. Each operator has its own unique characterset code to represent it: 

    
                        - Minus &#x2212;
    
                        + Plus &#x2B;
    
                        × Multiply &#x00d7;
    
                        ÷ Divide &#x00f7;
    
                        = Equal &#x003D;
    
                        ≠ Not Equal &#x2260;
    
                        ≈ Approximately Equal &#x2248;
    
                        < Less Than &#x003c;
    
                        ≤ Less Than or Equal &#x2264;
    
                        > Greater Than &#x003e;
    
                        ≥ Greater Than or Equal &#x2265;
    
                        ± Plus or Minus &#x00b1;
    
                        ∝ Proportional &#x221d;
    
                        ∑ Summation &#x2211;
    
                        ∏ Product &#x220f;
    
                        ⌊ Left Floor Parenthesis &#x230a;
    
                        ⌋ Right Floor Parenthesis &#x230b;
    
                        ⌈ Left Ceiling Parenthesis &#x2308;
    
                        ⌉ Right Ceiling Parenthesis &#x2309;


    So, if we want to write a multiplication sign, we would write:

    MathML

    <math>
     <mo>&#x00d7;</mo>
</math>

    Displayed

    ×


    Writing Simple Equations

    So now that we know how to write values and operators, we can start writing equations. To write an equation, we must put our value and operator tags indside an <mrow> tag. The <mrow> tag stands for Mathamatical Row.
    Let's write 4 + 3 = 7 in MathML.

    MathML

    <math>
 <mrow>   
  
 <mi>4/<mi><mo>&#x2B;</mo><mi>3</mi><mo>&#x003D;</mo><mi>7</mi>
 </mrow>
</math>

    Displayed

    4+3=7


    Writing Fractions

    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

    12


    How To Write Indices

    To write indices, we use the <msup> tag around the entire number and the <mn> tag around just the power.


    Let's write 23 in MathML.

    MathML

    <math>
   <mrow>  
       <msup><mi>2</mi><mn>3</mn></msup>
   </mrow>
</math>

    Displayed

    23


    Writing Roots in MathML

    To write roots in MathML, we use the <root> tag. The <root> surrounds the <mi> tag (The number being rooted) and <mn> tag (The root number).
    Let's write the cube root of 69 in MathML.

    MathML

    <math>
   <mrow>  
       <mroot><mi>69</mi><mn>3</mn></mroot>
   </mrow>
</math>

    Displayed

    693


    Writing The Quadratic Formula in MathML

    We now have all of the neccessary MathML knowledge to put together and write a more complex equation such as the quadratic fromula.
    Let's write the quadratic formula in MathML:

    MathML

    <math>
  <mrow>
<mi>x</mi><mo>&#x003D;</mo><mfrac><mrow><mrow><mo>&#x2212;</mo><mi>b</mi></mrow><mo>&#x00b1;</mo><mroot><mrow><msup><mi>b</mi><mn>2</mn></msup><mo>&#x2212;</mo><mrow><mn>4</mn><mo>&#x2062;</mo><mi>a</mi><mo>&#x2062;</mo><mi>c</mi></mrow></mrow><mn>2</mn></mroot></mrow><mrow><mn>2</mn><mo>&#x2062;</mo><mi>a</mi></mrow></mfrac>
  </mrow>
</math>

    Displayed

    x = -b ± b2 - 4⁢ a⁢ c 2⁢ a


    WHAT IS LILYPOND?

    Lilypond is a text based language used to write sheet music on a computer.



    WHERE IS LILYPOND USED?

    Lilypond is used to write sheet music on a computer.



    WHY LEARN LILYPOND?

    Lilypond is great for beginners as it has an easy to read syntax. It is very useful for writing music on a computer. Lilypond can even be embedded into HTML documents, making it a great choice for those interested in web development.



    WHERE DO I WRITE LILYPOND?

    To write Lilypond, you can either use a web based IDE (such as www.hacklily.org/ 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 WILL NEED TO INSTALL LILYPOND FROM https://lilypond.org/open_in_new





    Writing Lilypond




    Commands

    Lilypond has a lot of commands that can be used to set certain perameters. To write a command, you simply write a backslash (\) followed by the command.

    One very useful command is the \language command which sets the language for accidentals.
    Let's set the language to english

    Lilypond

    \language "english"

    Displayed



    Setting Clefs

    To write the clef of the music, we use the \clef syntax, followed by the name of the clef. The clef names are: Treble, Bass, Alto, Tenor, Guitar tab, and Perc.
    Let's write a bass clef in Lilypond.

    Lilypond

    \clef bass

    Displayed



    Setting Time Signatures

    To write the time signature of the music, we write \numericTimeSignature followed by \time followed by the value of the time signature.
    Let's write a time signature of 4/4.

    Lilypond

    \numericTimeSignature
\time 4/4

    Displayed



    Setting Key Signatures

    To write the key signature of the music, we write \key followed by the pitch and then either \major or \minor.
    Let's write a key signature of A minor.

    Lilypond

    \key a \minor

    Displayed



    Writing Notes

    To write notes, we first need to set a relative octave for those notes. To do this, we write \relative followed by the octave.
    Let's set the octave relative to middle C.

    Lilypond

    \relative c'

    Displayed



    Now, next to the relative command, we write the notes inside of curly brackets {}. To write notes, we simply write their letter value. So to write the note C, we write C. To write the note D, we write d etc. NOTE: Lilypond is case-sensitve, always write notes in lowercase.
    The clef, time signature and key signature must all also be written inside of the curly brackets after the relative octave.

    Let's write some notes as well as a clef and time signature.

    Lilypond

    \relative c' {\clef treble \numericTimeSignature \Time 4/4 c d e f}

    Displayed



    Note Lengths

    To set the length of notes, we write a number before the note. The number is determined by how many notes of the desired beat length fit into one bar of music relative to the time signature. So, if 4 1-beat notes fit into one bar of music with the time signature 4/4, them the value of 1 beat is 4. Therefore, when the time signature is 4/4, the number 1 represents 1 note per bar, meaning it is 4 beats long under this time signature. So, for a time signature of 4/4, a 4 beat note is represented by a value of 1; a 2 beat note is represented by a value of 2; a 1 beat note is represented by a value of 4; a half beat note is represented by a value of 8, a quater beat note is represented by a value of 16; and an eighth beat note is represented by a value of 32.
    Let's write some notes with beat values

    Lilypond

    \relative c' {\clef treble \numericTimeSignature \Time 4/4 1c 2d 3e 4f 8g 16a 32b}

    Displayed



    Accidentals

    To write accidentals
    Let's write some notes with accidentals

    Lilypond

    \relative c' {\clef treble \numericTimeSignature \Time 4/4 1c 2d 3e 4f 8g 16a 32b}

    Displayed



    WHAT IS PYTHON?

    Python is a general purpose programming language. We use python to give instructions to computers.



    WHERE IS PYTHON USED?

    Python is used in web development, software development, mathematics, system scripting and more.



    WHY LEARN PYTHON?

    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.



    WHERE DO I WRITE PYTHON?

    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





    Writing Python



    Embedding Python into HTML

    To embed Python into HTML, we first must add a script defer: <script defer src="https://pyscript.net/alpha/pyscript.js"></script> inside of our HTML <head> tags. We can then use the <py-script> tag. We must write all of our python inside of the <py-script> tags.

    HTML

    <!DOCTYPE html>
 <html>  
  <head>
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
<py-script>

</py-script>
</html>

    Displayed


    Printing Things

    To print things onto a screen in python, we use the code: print("").
    Let's print "Hello World!" in python:

    python

    print("Hello World!")

    Displayed

    Hello World!


    Variables

    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.

    Let's create a variable called "name" and assign it the value "John".

    python

    name = "John"


print(name)

    Displayed

    John


    NOTE: SOME COMPILERS REQUIRE YOU TO 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

    John Doe

    python

    print(age+wife_age)

    Displayed

    6969

    python

    print(name+surname, wife+wife_surname)

    Displayed

    John Doe
    Jane Doe


    Math In Python

    Python allows us to perform basic mathematical calculations.


    Let's take a look at some operations python can do:

    NOTE: python will perform calculations by order of BIDMAS (Brackets, Indices, Division, Multiplication, Addition, Subtraction).

    Addition:

    python

    print(2+5)

    Displayed

    7


    Subtraction:

    python

    print(2-5)

    Displayed

    -3


    Multiplication:

    python

    print(2*5)

    Displayed

    10


    Division:

    python

    print(2/5)

    Displayed

    0.4


    Exponentiation:
    Raising to a power. Power is the number to the right of the **.

    python

    print(4 ** 2)

    Displayed

    16


    Floor Division
    Dividing a number and then rounding it down to the nearest whole number.

    python

    print(9 // 2)

    Displayed

    4




    Math Module

    A module is basically is code library that contains a set of functions. These functions can then be used in our code. Python has an inbuilt module called math. We can use this module to perform more complex mathematical calculations. To use this module, we must import it. To import a module, we use the code: import math

    python

    import math

    Displayed




    Squareroot

    We can use the Math module function math.sqrt() to square root a number.

    python

    import math
print(math.sqrt(25))

    Displayed

    5



    Rounding

    We can use the Math module to round numbers. math.ceil() will round a number up to its nearest whole number, and math.floor() will round a number down to its nearest whole number.

    python

    import math
print(math.ceil(1.7))

    Displayed

    2


    python

    import math
print(math.floor(1.7))

    Displayed

    1



    Pi

    Using the Math module, we can represent the value of pi. We can use the math.pi function to do this.

    python

    import math
print(math.pi)

    Displayed

    3.141592653589793



    Sine, Cosine & Tangent

    We can use the Math module to find the sine, cosine and tangent of a number. We write either math.sin(), math.cos() or math.tan()

    python

    import math
print(math.sin(90))

    Displayed

    0.8939966636005579



    NOTICE: Python takes our input in Radians by default. If we want Python to take our input in Degrees, we must use the math.radians() function to convert our degrees to radians.

    python

    import math
print(math.sin(math.radians(90)))

    Displayed

    1




    Comparing Values

    We can compare values using python. We write two equals signs (==) to compare values. We can also compare values using greater than (>) or less than (<) signs as well as greater than or equal to (>=) or less than or equal to signs (<=). An exclamation mark means that the opposite is true (the value is not equal to the other value). The output will either be true or false, this is useful for creating things like passcodes and verification codes.

    python

    5 == 5

    Displayed

    True

    python

    9 == 5

    Displayed

    False

    python

    9 > 5

    Displayed

    True

    python

    9 != 5

    Displayed

    True




    Conditional (If/Else) Statements

    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.

    python

    if name == "John":
 print("Hello John")
else:
 print("I don't know you")

    Displayed

    Hello John



    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

    I don't know you





    WHAT IS R?

    R is a programming language used for creating graphs and statistical computing.



    WHERE IS R USED?

    R is most commonly used to visualise and analyse data.



    WHY LEARN R?

    R is the most popular programming language in the field of data science.



    WHERE DO I WRITE R?

    To write R, you need to first download it from https://cloud.r-project.org/index.html open_in_new





    Writing R



    Printing things

    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!





    Math in R

    R allows us to perform mathematical calculations.


    Let's take a look at some operations R can do:

    Addition:

    R

    2+5

    Displayed

    7


    Subtraction:

    R

    2-5

    Displayed

    -3


    Multiplication:

    R

    2*5

    Displayed

    10


    Division:

    R

    2/5

    Displayed

    0.4




    Square Root:

    The sqrt() function returns the square root of a number:

    R

    sqrt(25)

    Displayed

    5


    Absolute Value:

    The abs() function returns the absolute (positive) value of a number:

    R

    abs(-25)

    Displayed

    25


    Rounding:

    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





    Variables

    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





    Comparing Values

    We can compare values using R. We write two equals signs (==) to check if values are equal. We can also compare values using greater than (>) or less than (<) signs as well as greater than or equal to (>=) or less than or equal to signs (<=). An exclamation mark means that the opposite is true (the value is not equal to the other value). The output will either be true or false, this is useful for creating things like passcodes and verification codes.

    R

    5 == 5

    Displayed

    True


    R

    9 == 5

    Displayed

    False


    R

    9 > 5

    Displayed

    True


    R

    9 != 5

    Displayed

    True





    Conditional (If/Else) Statements

    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


    We can use & (and) or | (or) as logical operators


    Graphs in R


    R is very useful for creating graphs.

    Plotting points

    We can plot points using the plot() function. Inside of the brackets, we enter our coordinates, separated by a comma. First, we enter the x-coordinates, then the y-coordinates.
    R will automatically set the scale of the graph relative to the inputted coordinates.
    We may also need to write the line of code: bitmap(file="out.png") to actually show the code in some compilers.

    Let's plot the coordinates (1,2) in R.

    R

    plot(1, 2)

    Displayed

    R Graph


    Plotting Multiple Points

    To plot multiple points on a single graph, we write vectors of coordinates inside of the plot() function.

    Let's plot the coordinates (1, 3) and (2, 4) in R.

    R

    plot(c(1, 2), c(3,4))

    Displayed

    R Graph


    We can plot as many points as we like in this way.

    Let's plot the coordinates (1, 3), (2, 4), (5, 7) and (6, 8) in R.

    R

    plot(c(1, 2, 5 , 6), c(3, 4, 7, 8))

    Displayed

    R Graph


    Plotting from Variables

    We can use variables to plot values.
    Let's create an example of plotting a graph using variables.

    R

    
xaxis <- c(1, 3, 4, 8, 13)
yaxis <- c(2, 1, 7, 9, 11)

plot(xaxis, yaxis)

    Displayed

    R Graph


    Plotting a Sequence of Points

    To plot a directly proportional sequence of points in incriments of 1, we use the : operator, inside of the plot() function. The value of the smallest point goes to the left of the : operator, and the value of the largest point goes to the right of the : operator.

    Let's plot the points 1:69 in a sequence:

    R

    plot(1:69)

    Displayed

    R Graph


    Graph Labels

    To title the graph and label the x-axis and the y-axis, we add the attributes: main="" for the title; xlab="" for the x-axis; and ylab="" for the y-axis.
    Let's add labels to the graph in R.

    R

    plot(c(1, 2, 5 , 6), c(3, 4, 7, 8), type="l", main="My Graph", xlab="My X-axis", ylab="My Y-axis")

    Displayed

    R Graph


    Styling Graphs


    We can change many perameters to alter the appearance of our graphs.

    Changing the Colour of the Graph

    To change the colour of the points on a graph, we use the attrbute col="n".
    Let's make the points pink:

    R

    plot(1:69, col="pink")

    Displayed

    R Graph


    Changing the Size of Points

    To change the size of the points on a graph, we add the attrbute cex=n. We set the cex value equal to a number. 1 is the default size, 2 is 100% of the default size, and 0.5 is 50% of the default size.
    Let's make the points larger:

    R

    plot(1:69, col="pink", cex=2)

    Displayed

    R Graph


    Changing the Shape of the Points

    To change the shape of the points on a graph, we add the attrbute pch=n. The number equal to pch represents a shape.
    Here is a complete guide to the numbers and the shapes they represent: 
    
0 = WHITE SQUARE□
    
1 = WHITE CIRCLE○
    
2 = WHITE UP-POINTING TRIANGLE△
    
3 = LIGHT VERTICAL AND HORIZONTAL┼
    
4 = LIGHT DIAGONAL CROSS╳
    
5 = WHITE DIAMOND◇
    
6 = WHITE DOWN-POINTING TRIANGLE▽
    
7 = SQUARED TIMES⊠
    
8 = EIGHT SPOKED ASTERISK✳
    
9 = DIAMOND TIMES
    
10 = CIRCLE PLUS⊕
               
11 = STAR OF DAVID✡
    
12 = SQUARE PLUS⊞
    
13 = CIRCLE WITH SUPERIMPOSED X⦻
    
14 = APL FUNCIONAL SYMBOL QUAD UP CARET⍓
    
15 = BLACK SQUARE■
    
16 = BLACK CIRCLE●
    
17 = BLACK TRIANGLE▲
    
18 = BLACK DIAMOND◆
    
19 = BLACK CIRCLE●
    
20 = Z NOTATION SPOT⦁
    
21 = LARGE BLACK CIRCLE⬤
    
22 = BLACK SQUARE■
    
23 = BLACK DIAMOND◆
    
24 = BLACK UP-POINTING TRIANGLE▲
    
25 = BLACK DOWN-POINTING TRIANLGE▼


    Lets's change the shape of the points to an eight spoked asterix:

    R

    plot(1:69, col="pink", cex=2, pch=8)

    Displayed

    R Graph



    Drawing Lines from Points

    To draw a line between points, we add the attribute type inside of the plot() function, and set it equal to l.

    Let's draw a line between the coordinates: (1, 3), (2, 4), (5, 7) and (6, 8) in R.

    R

    plot(c(1, 2, 5 , 6), c(3, 4, 7, 8), type="l")

    Displayed

    R Graph


    Changing Line Width

    To change the width of the line, we add the attribute lwd=n inside of the plot() function. 1 is the default size, 2 is 100% of the default size, and 0.5 is 50% of the default size.
    Let's change the width of the line to 2:

    R

    plot(c(1, 2, 5 , 6), c(3, 4, 7, 8), type="l", lwd=2)

    Displayed

    R Graph


    Changing Line Type

    To change the line type, we add the attribute lty=n inside of the plot() function.

    Line Types:
    • 0 removes the line
    • 1 displays a solid line
    • 2 displays a dashed line
    • 3 displays a dotted line
    • 4 displays a "dot dashed" line
    • 5 displays a "long dashed" line
    • 6 displays a "two dashed" line


    Let's set the line type to a "dot dashed" line

    R

    plot(c(1, 2, 5 , 6), c(3, 4, 7, 8), type="l", lwd=2, lty=4)

    Displayed

    R Graph


    Multiple Lines

    To create multiple lines on the same graph, we use vectors inside of the plot() function for one line. The other lines are plotted by placing vectors inside of the lines() function.
    Let's create a graph with multipe lines:

    R

    plot(c(1, 3, 4, 8, 13), c(2, 1, 7, 9, 11), type="l")
lines(c(2, 1, 7, 9, 11), c(1, 3, 4, 8, 13), type="l")

    Displayed

    R Graph


    To distinguish between the two lines, we can change the colour of each using the col="" attribute.

    R

    plot(c(1, 3, 4, 8, 13), c(2, 1, 7, 9, 11), type="l", col="red")
lines(c(2, 1, 7, 9, 11), c(1, 3, 4, 8, 13), type="l", col="blue")

    Displayed

    R Graph


    To add even more lines, just repeat the lines() function for as many lines as you require:

    R

    plot(c(1, 3, 4, 8, 13), c(2, 1, 7, 9, 11), type="l", col="red")
lines(c(2, 1, 7, 9, 11), c(1, 3, 4, 8, 13), type="l", col="blue")
lines(c(1, 1, 6, 8, 12), c(1, 2, 5, 8, 13), type="l", col="orange")
lines(c(1, 3, 4, 5, 12), ,c(1, 2, 2, 3, 7), type="l", col="darkgreen")

    Displayed

    R Graph



    Pie Charts


    We can create a pie chart in R using the pie() function. Inside the brackets, we use vector values to create the sections of the pie chart. For the sake of simplicity, these sections could be a percentage out of 100, 100 being the whole pie. R decides the size of each section by calculating the value of the section divided by the sum of all section values.
    Let's create a simple pie chart in R:

    R

    pie(c(20, 35, 12, 4, 29))

    Displayed

    R Graph


    Starting Angle

    To change the starting angle of the pie chart, we add the attribute init.angle = n. n is specified in degrees. The default angle is 0, we can see it as the flat horizontal line that spans from the centre of the pie, outwards to the right.
    Let's change the starting angle to 90 degrees:

    R

    pie(c(20, 35, 12, 4, 29), init.angle = 90)

    Displayed

    R Graph


    Labels

    We can add labels to the pie chart using strings inside of a vector inside of the pie() function. The labels are displayed in the order of the sections they will be asigned to. We can also add a title to the chart using the main="" attribute.
    Let's add labels to our pie chart:

    R

    pie(c(20, 35, 12, 4, 29), init.angle = 90, c("Instagram", "Facebook", "X", "Tiktok", "Youtube"), main="Social Media Sites")

    Displayed

    R Graph


    Custom Colours

    We can add custom colours to the pie chart using strings inside of a vector inside of the col = attribute inside of the pie() function. The colours are displayed in the order of the sections they will be asigned to.
    Let's asign custom colours to our pie chart:

    R

    pie(c(20, 35, 12, 4, 29), init.angle = 90, c("Instagram", "Facebook", "X", "Tiktok", "Youtube"), main="Social Media Sites", col=c("#e1306c", "#1877F2", "black", "#00f2ea", "#FF0000"))

    Displayed

    R Graph


    Legend

    We can add a key to our chart using the legend() function. Inside of the legend() function, we add its postion, labels and colour values.
    Let's create a legend for our pie chart:

    R

    pie(c(20, 35, 12, 4, 29), init.angle = 90, c("Instagram", "Facebook", "X", "Tiktok", "Youtube"), main="Social Media Sites", col=c("#e1306c", "#1877F2", "black", "#00f2ea", "#FF0000"))
                             
legend("topright", c("Instagram", "Facebook", "X", "Tiktok", "Youtube"), fill = c("#e1306c", "#1877F2", "black", "#00f2ea", "#FF0000"))

    Displayed

    R Graph

    The position of the legend can be set to:
    • top
    • topleft
    • left
    • bottomleft
    • bottom
    • bottomright
    • right
    • topright
    • center
    WHAT IS Arduino?

    Arduino programming language is used to write software for Arduino boards, which are microcontroller-based development platforms used for building digital devices and interactive objects.



    WHERE IS Arduino USED?

    Arduino is used to program electronics.



    WHY LEARN Arduino?

    Arduino allows you harness the power of electricity to controll physical real-world things.



    WHERE DO I WRITE Arduino?

    To write Arduino, you need to first download it from https://www.arduino.cc/en/main/software. open_in_new

    Once installed, you can open the Arduino IDE by clicking on the Arduino icon on the desktop. You cen then write your Arduino code in the Arduino IDE.






    Executing Arduino


    In order to execute Arduino code, you need an Arduino board or a 3rd party board capable of running Arduino software. I recommend buying Cryton Technologies Maker UNO X board, which for just £18.90 will provide you with everything that you need: A 3rd party Arduino board, 3V Miniature Brush Motor, 4 Blades Motor Propeller, Ultrasonic Sensor, IR Sensor, 3 x LED 5mm Red, 3 x LED 5mm Yellow, 3 x LED 5mm Green, 3 x Pushbutton Switch, 10 x Resistor 220 Ohm, 10 x Resistor 1K Ohm, 10 x Resistor 10K Ohm, Diode, 2 x Transistor, Finger Preset 10K, 40 x Male to Male Jumper Wire, 40 x Male to Female Jumper Wire, Micro B USB Cable, Electronic Breadboard 8.5cm x 5.5cm. More Info open_in_new


    Understanding Electronics


    Understanding electronics is vital to be able to program Arduino.


    Writing Arduino




    An Arduino program typically consists of two main functions:
  • Setup()
  • Loop()

    • Setup() runs once when the Arduino board is powered on or reset. It's used to initialize settings or start serial communication between the board and the computer.
    Loop() runs continuously in a loop, allowing the program to change and respond to inputs over time.


    Comments in Arduino


    To write comments in Arduino, we use: // followed by the contents of the comment.

    Arduino

    // This is a comment.

    Output



    WHAT ARE Minecraft Commands?



    WHERE ARE Minecraft Commands USED?

    Minecraft commands are used in the video game: Minecraft



    WHY LEARN Minecraft Commands?



    WHERE DO I WRITE Minecraft Commands?

    To write Minecraft Commands, you need to first download minecraft from minecraft.net. open_in_new

    Once installed, you can open the Minecraft launcher by clicking on the Minecraft icon on the desktop. You can then choose to launch Minecraft Java Edition - this will open up a new app. With Minecraft Java open, click "New World", then adjust the settings of this world to enable cheats and commands. Then click "Create World". Once the world load, press the forward slash (/) to open the chat bar. You can write your commands in here.





    Writing Minecraft Commands