Bridging Day Summer Handout
Bridging Day Summer Handout
1|Page
Contents Page
3|Page
Learning Objectives
4|Page
Activities to Page 5
5|Page
Support Notes to Page 12
13 | P a g e
Example Commented Code to Page 15
16 | P a g e
OCR Specification for Languages HTML, CSS and JavaScript to Page 18
19 | P a g e
Teams Forms Questionnaire to Page 32
2|Page
Y11 to Y12 Computer Science Independent
Learning Bridging Activity
Objectives of the activities:
To support you in developing independent learning skills and programming language skills - based on
your previous learning at GCSE and bridging to A Level Study OCR Computer Science specification (see
Pg. )
Develop programming skills in web based development (HTML, CSS and JavaScript)
3|Page
Bridging Day Activities
Using your Teams Login, access the Y11 Bridging Day Team and the Bridging Activity via the Forms link below:
Sharon Scholes: I added a tab at the top of this channel. Check it out!
posted in Computer Science - Year 11 Bridging Day / General at 04 July 2022 12:34:16
Development Section
Objectives of the Bridging Activity:
Produce a mini HTML web site using suitable tags and attributes using Notepad++ (Free)
Apply classes and ids to style a website in CSS using Notepad++ (Free)
Apply JavaScript forms to a webpage and capture data using Notepad++ (Free)
Complete questions on Teams based on the code you have developed and upload the files to the
Bridging Day Activities Assignment on Teams
Answer the questions by identifying the languages used and the comment the code that states what the
functionality is, by using the correct following comment tags for the correct language:
o HTML <!-- Write your comments here -->
There are sample web pages to support you with this in the resources pack.
1. Pages:
4|Page
i. Hyperlinks to the other pages
ii. A heading
iv. Image
Email address (input box and alert message to check email is correct)
Sharon Scholes: I added a tab at the top of this channel. Check it out!
posted in Computer Science - Year 11 Bridging Day / General at 04 July 2022 12:34:16
5|Page
Lesson Today: Website Development Language
Support Notes
The basics of HTML
Title bar
To give the web page a title in the bar at the top of the browser, use a TITLE tag in the head section:
<title>Put the title you want to appear in the title bar here</title>
Headings
To put a heading on the page, use <h> tags in the body section:
<h1>A top level heading</h1>
<h2>A sub heading</h2>
<h3>A sub-sub heading</h3>
6|Page
Images
Images must be saved in a separate file in GIF, JPEG or PNG format. They are then linked into the page using
the <img> tag. There is no closing tag.
<img src="the filename of the file goes here">
There are additional attributes for the image tag to specify alternative text for the blind and height and width
attributes – for example:
<img src="image.jpg" alt="This is a picture of a... " height="300px" width="400px">
Hyperlinks
A link to another page requires an anchor tag (<a>) and a hyperlink reference attribute.
<a href="the filename of the page to link to goes here">The words the user actually clicks
here</a>
7|Page
Other tags
There are many other tags, but these are the basic ones you need to know for your exams. In addition, you will need to
know:
<link> Explained in the Basics of CSS guide
<div> Explained in the Basics of CSS guide
<form> Explained in the Basics of HTML forms guide
<input> Explained in the Basics of HTML forms guide
<script> Explained in the Basics of JavaScript guide
Form structure
A basic form with one text box and a Submit button would be created with this HTML:
<form id="form1" action="">
Forename:
<input type="text" name="forename" name="forename">
<input type="submit" name="submit" name="submit" value="Submit">
</form>
You need to know about creating a text input and Submit button for exams, although other input options are achieved
in a similar way with alternative tags.
8|Page
The basics of CSS
Cascading style sheets (CSS) allow you to separate the content of a web page from how it is presented; this is useful if
you want to be able to change how a page is printed compared to how it is viewed on-screen, or you want it to be more
accessible for people with disabilities – for example, allowing them to choose a high-contrast theme for easier viewing.
There are many more creative things you can do to content using CSS that are not possible with HTML alone.
<link href="stylesheet.css" rel="stylesheet"> <!—HTML link to the external css style sheet –
relative path -->
So if you have your relative path folder structure set up, you will have a root folder or parent folder where the
html files are stored, you will have a child folder inside the root folder named css, where you will store all css files,
so if the . So the relative path would be:
9|Page
Applying styles to other elements
If you want to style other sections of the page such as a block of text with an image, you need to create a class or
identifier in the CSS file. Identifiers are used for items that only exist once on a page like a navigation bar. Styles are
used when you want to apply the mark-up to more than one aspect of a page. In reality, it doesn’t matter if you use
styles for everything.
Whether you use classes or identifiers, you need to specify which elements this style applies to using the <div>
tag and the class or ID attribute – for example:
<div class="content"> /* open the div tag defines the section the style will be applied to */
This is the content you want to style
</div> /* close the div tag after the style has been applied to that section only */
Note, the dot only exists in the CSS file, not in the class attribute.
10 | P a g e
The basics of JavaScript
It is possible to put client-side programming elements on a web page using JavaScript.
A button outside the form is used to trigger the JavaScript code to execute. Enter this HTML:
<button onclick="myFunction()">Try Javascript</button> <!—HTML trigger for button action-->
An output identifier is used to capture the output from the code. Enter this HTML:
<p id="output_here"></p> <!—HTML Output identifier-->
Enter the JavaScript overleaf and study the example to see how:
JavaScript elements have a <script> tag.
Command lines are terminated with a semicolon.
Curly brackets are used to define sections of code.
Functions are defined.
Variables are defined.
For loops work.
An array of inputs can be referred to.
Variables are assigned values.
An if condition can be used for selection.
The output is returned to the page.
11 | P a g e
<script> // Javascript section is being opened
function myFunction() {
var x = document.getElementById("form1");
var text = "";
var i;
for (i = 0; i < x.length ;i++) {
data = x.elements[i].value;
if (data!="This submits the data to another page") {
text += "Your name was entered as " + data + ".";
}
}
document.getElementById("output_here").innerHTML = text;
}
</script> //closes the Javascript section
Auto date output – see JavaScript Date Objects (w3schools.com) for further support
By default, JavaScript will use the browser's time zone and display a date as a full text string.
<h2>JavaScript new Date()</h2> <!—Creates a title in a text string formatted to h2 format via the css script in HTML -->
<p id="demo"></p> <!—creates a new paragraph with an id called “demo” in HTML -->
<script> //tells the HTML document that a Javascript section is being opened
const d = new Date(); //creates a constant variable d and assigns the newDate() in Javascript
document.getElementById("demo").innerHTML = d; //takes the id “demo” and applies the constant d to the inner HTML –
which will perform the date script in javascript and output the date
</script> //closes the Javascript section
12 | P a g e
Example code for each web page with
comments:
Add comments to the following code so that you know what languages are in each section…
for (i = 0; i < x.length ;i++) { //check size of variable (array) i and compare to size of variable x (array)
if (data!="This submits the data to another page") { //validates the data string before output
text += "Your email address was entered as: " + data + "."; //output message
document.getElementById("output_here").innerHTML = text; //assigns html output_here ID the value from test variable
assigned in the javascript and will output in HTML
<head>
<title> My web page </title> <!—title of web page appear in grey tab of web browser -->
<link href="Web Technologies Example.css" rel="stylesheet"> <!—external href link to external CSS style sheet -->
</head>
<body>
<h1 style="color:blue;">The Taj Mahal</h1> <!—h1 embedded CSS style tag in HTML -->
13 | P a g e
<h2 style="color:green;">Based in India</h2> <!—h2 embedded CSS style tag in HTML -->
<h3>Where is this formatting comming from?</h3> <!—h3 embedded CSS style tag in HTML -->
<img alt="Taj Mahal" src="Taj Mahal.jpg" height="200px" width="200px"> <!—link to source file for image in root folder
with alternative text for accessibility for near sight so that descriptor of image can be narrated -->
</p>
<li>It is estimated to have taken more than 22,000 people to build this impressive building including labourers, painters,
stonecutters, embroidery artists, and many others.</li> <!—opening of list item and close of list item -->
<li>According to legend it is believed that Emperor Shah Jahan had planned to construct another Taj Mahal in black
marble on the other side of the river but the war with his sons interrupted his plans.</li>
<li>Built in memory of the Emperors third and most favourite wife Mumtāz Mahal, the Taj Mahal took 17 years to be
completed.</li>
<li>The full height of the Taj Mahal is 171 metres (561 feet).</li>
<li>More than 1,000 elephants were employed to transport the construction materials used to build the Taj.</li>
<li>Many precious stones were ripped off from its walls by the British during the Indian rebellion of 1857.</li>
Enter your e-mail address to get sent more information: <!—text that is displayed to inform user to input to the form -->
<input type="text" name="email"> <!—capture of text input into text variable assigned in javascript and assign to email
variable in HTML -->
<button onclick="myFunction()">Check I have your email address right</button> <!—when the button is pressed the
function myFunction will run via javascript -->
<p id="output_here"></p> <!—will output the text via javascript to the out_put ID in HTML -->
14 | P a g e
</body>
</html>
15 | P a g e
OCR A Level Computer Science Specification
Notes on HTML, CSS and
Javascript Languages:
HTML
Learners are expected to have an awareness of the following tags. Any other tags used will be introduced in
the question.
<html>
<link> to link to a CSS file
<head>
<title>
<body>
<h1> <h2> <h3>
<img> including the src, alt, height and width attributes.
<a> including the href attribute.
<div>
<form>
<input> where the input is a text box (i.e., it has the attribute type="text" and another attribute name to identify it)
or a submit button (i.e., it has the attribute type="submit").
<p>
<li>
<ol>
<ul>
<script>
16 | P a g e
CSS
Learners are expected to be able to use CSS directly inside elements using the style attribute:
<h1 style="color:blue;">
They are also expected to be able to use external style sheets. In the style sheets, they should be able to use
CSS to define the styling of elements…
h1{
color:blue;
}
classes:
.infoBox{
background-color: green;
}
…and identifiers:
#menu{
background-color: #A2441B;
}
17 | P a g e
JavaScript
Learners are expected to be able to follow and write basic JavaScript code. They will not be expected to commit exact
details of syntax to memory.
Questions in the exam will not penalise learners for minor inaccuracies in syntax. Learners will be expected to be
familiar with the JavaScript equivalents of the structures listed below:
Variables
Casting
Iteration
Logical operators
Selection
String handling
Arrays
They will not be expected to use JavaScript for object-oriented programming or file handling.
Input
Input will be taken in by reading values from a form. NB: Learners will not be expected to memorise the method for doing
this, as the focus will be on what they do with that input once it is received.
Output
By changing the contents of an HTML element:
chosenElement = document.getElementById("example");
chosenElement.innerHTML = "Hello World";
By writing directly to the document:
document.write("Hello World");
By using an alert box:
alert("Hello World");
Should any other aspects of JavaScript be used, they will be introduced and explained in the question.
18 | P a g e
Teams Form to complete via Teams
Sharon Scholes: I added a tab at the top of this channel. Check it out!
posted in Computer Science - Year 11 Bridging Day / General at 04 July 2022 12:34:16
19 | P a g e
20 | P a g e
21 | P a g e
22 | P a g e
23 | P a g e
24 | P a g e
25 | P a g e
26 | P a g e
27 | P a g e
28 | P a g e
29 | P a g e
30 | P a g e
31 | P a g e
32 | P a g e