Web Development

Development & Testing Bridging Activity A Level Computer Science Greenhead C

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)

The activity will be split into two parts:

 Flipped Learning Videos online to watch and work through with resources provided in
Resources Folder
 Activities to Complete via Teams Assignment
 Questions to Answer via Teams Forms via Y11 Bridging Day Teams
 Creation of a mini website

Email [email protected] if you have any questions:

 Read through the assignment and support resources in the Assignment BEFORE working through the
flipped learning videos
 Watch the following flipped learning videos and create the HTML, CSS and JavaScript web page as
shown in the Bridging Day lesson
HTML: https://student.craigndave.org/videos/ocr-alevel-slr12-html
CCS: https://student.craigndave.org/videos/ocr-alevel-slr12-css
JavaScript: https://student.craigndave.org/videos/ocr-alevel-slr12-javascript

Further Reading and Programming Activities:

Below are a range of extended further flipped learning links to help support your learning and develop your
programming skills.
You do not have to complete these as part of your Bridging sessions, but we would recommend that you spend
some time exploring
them over the Summer holidays.
Introduction to Python - Online Course - FutureLearn
Programming 101: An Introduction to Python
https://www.futurelearn.com/courses/programming-102-think-like-a-computer-scientist
Develop skills for constructs in programming – Python as part of your A Level Studies (Y11)
https://www.futurelearn.com/courses/programming-103-data
Develop skills for Python in saving external files – as part of your A Level Studies (Y11, A Level)
https://www.futurelearn.com/courses/learn-to-code-for-the-web
Develop skills for web development – as part of your A Level Studies (Y11)
https://www.futurelearn.com/courses/programming-with-guis
Develop skills in Python for development of graphical user interfaces (GUI) – part of your A Level Studies
https://www.futurelearn.com/courses/video-game-design-development
Develop skills in programming for game design and using OOP – part of your A Level Studies
https://www.futurelearn.com/courses/introduction-to-databases-and-sql
Develop skills in programming in SQL as part of your A Level Studies (Y11, A Level)
https://www.futurelearn.com/courses/embedded-systems
Develop skills for NEA as part of your A level Studies (Y11, A Level)

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

o CSS /* This is a single-line comment */

o JavaScript // Change heading:

Bridging Day Activities: Website Development

Complete the mini website you started on the Bridging Day with the following theme of the website:
Wonders of the World and hand in the complete mini websites via Teams Assignment
before 8th September 2022. You may choose to create your own website instead that has similar features. The
website MUST have HTML, CSS and JavaScript used as the development languages.

Support notes for these languages are provided further down:

There are sample web pages to support you with this in the resources pack.

1. Pages:

i. Page 1 - Background to the project (index page)

ii. Page 2 - The Colosseum

iii. Page 3 - Taj Mahal

2. Each page should have:

4|Page
 i. Hyperlinks to the other pages

ii. A heading

iii. Textual description

iv. Image

v. Bullet-point list of key facts (e.g., country, year of construction, etc.)

3. A feedback form allowing the reader to submit:

Their surname and first name (two input boxes)

Email address (input box and alert message to check email is correct)

Date of visit (Javascript auto date function to today’s date)

Experiences/memories of visiting the wonder (input boxes)

Complete via Teams Form Link:

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

The basics of HTML

Web pages are made from commands called tags that describe how the page should be displayed in the browser.
Each tag is enclosed in chevrons (<>).
There is often an opening tag, the start of the command, and a closing tag, the end of the command. The end of the
command is signified by a forward slash (/).
Convention states that tags should be lowercase. String identifiers can use single or double quotes.

Web page structure

All web pages have the basic structure of:
<html> Indicates the language used – the page is hypertext mark-up language.
<head> Data about the page is placed in the head section – this is known as metadata.
</head>
<body> The content of the page is placed in the body section.
</body> Note how each section ends with a corresponding closing tag.
</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>

Fonts, colours and formatting of text

You can change fonts, colours and formatting of text using in-page styles with the style attribute inside the opening tag.
For example, if you wanted to make a heading blue, you could use a style attribute like this:
<h1 style="color:blue; ">This is a title in blue</h1>

Using paragraphs for text

Text is usually enclosed in paragraph tags (<p> and </p>). Paragraphs will automatically have blank lines between them,
the standard way of presenting paragraphs on a web page.

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>

Bullet points (unordered lists)

Bullet lists require two tags; one to signify the start and end of the unordered list (<ul>) and one for each list item (<li>).
It is good practice to indent list items.
<ul>
<li>Bullet point one</li>
<li>Bullet point two</li>
<li>Bullet point three</li>
</ul>

Numbered points (ordered lists)

Numbered lists require two tags; one to signify the start and end of the ordered list (<ol>) and one
for each list item (<li>). It is good practice to indent list items.
<ol>
<li>Point one</li>
<li>Point two</li>
<li>Point three</li>
</ol>

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

No other knowledge of HTML is necessary.

The basics of HTML forms

Form controls are put on a web page using a <form> tag wrapper.
Simple text boxes are defined with the <input> tag.

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.

1. Create a new text file called stylesheet.css

2. In the file, enter:
h1 { /* defines the style in the css file for the h1 header font */
font-family: Verdana;
font-size: medium;
color: #039;
background-color: #99CCFF;
border-width: 1px;
border-style: solid;
border-color: #039;
width: 50%;
height: 30px;
}
3. Save the file as: stylesheet.css
(Make sure no additional extensions are added – for example, Notepad may add .txt).
4. Now you need to link the stylesheet to the web page. Inside the <head> section of a html page, add a link
reference:

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

<link rel="stylesheet" type="text/css" href="css/file name"> <!—HTML link to the external

css style sheet – relative path child folder -->

Note the effect these styles have on your heading.

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.

Classes are defined with a dot:

.content { /* Creates a new class or style for many items to be the same style on a page or site */
font-family: Verdana;
}

Identifiers are defined with the hash symbol:

#menu { /* creates an identifier for a single item on a page for unique styling */
background-color: #99CCFF;
}

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.

HTML and JavaScript example

Enter this basic HTML form into the body section of a page:

<form id="form1" action=""> <!—HTML Form Open-->

Forename:
<input type="text" name="forename">
<input name="Submit" type="submit" id="Submit" value="This submits the data to another
page">
</form> <!—HTML Form Close-->

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

Additional output options

The above example changes the contents of an existing HTML element called output_here.
You can also write directly to the document using:
document.write("Hello World")
You can also use alert pop-up boxes:
alert("Hello World")

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.

Date objects are created with the new Date() constructor.

new Date()
creates a new date object with the current date and time

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

<script> //start of javascript section embedded in HTML

function myFunction() { //define a function as myFunction

var x = document.getElementById("form1"); //assign to variable x array the form1 element ID

var text = ""; //assign variable text as a string

var i; //assign variable i

for (i = 0; i < x.length ;i++) { //check size of variable (array) i and compare to size of variable x (array)

data = x.elements[i].value; //assign variable data x.elements value

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

</script> //end of javascript section embedded in HTML

<html> <!—start of HTML section -->

<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> <!—new paragraph -->

<a href="http://www.tajmahal.gov.in/http://www.tajmahal.gov.in/">CLICK HERE FOR MORE INFO</a> <!—hyper link to

external website page link -->

</p>

<ul> <!—open un-ordered list bullet point -->

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

</ul> <!—close of bullet point – un-ordered list -->

<ol> <!—opening of ordered list with number format -->

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

</ol> <!—close of ordered list with number format -->

<form id="form1" action=""> <!—assign an action to the javascript ID form1 -->

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

</form> <!—end of form data capture -->

<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;
}

Learners are expected to be familiar with the following properties:

 background-color
 border-color
 border-style
 border-width
 color with named and hex colours
 font-family
 font-size
 height
 width

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