Computing Scotland

HTML

At Advanced Higher level you will be expected to know HTML from Higher level as well as PHP + MySQL and CSS Media Queries.

HTML5 Page Structure

There are 5 new tags that you need to be aware of for WDD in Higher;

1. <header> - This contains elements that will appear at the top of every page eg. a title, banner and logo.
2. <nav> - This is where the navigation links/buttons will go
3. <main> - This is where the main content of the webpage will go
4. <section> - Sections are used within the main tags to define certain sections of the page
5. <footer> - The footer will usually contain information about the website such as contact and legal info.

HTML Tag List

Below is a list of HTML tags and what they are used for. It isn't a complete list, but a comprehensive list of all the HTML tags that you will be expected to know for Computing Science N5 and Higher. [Click the table header to collapse the table]

PHP

PHP is used to create dynamic, database driven websites where the code is executed server side and delivers data to individual users.

Since PHP is serverside scripting, we need to install a program that can simulate a client and server setup. To do this we will be using XAMPP.

Click here to view a guide to setting up XAMPP

Some PHP basics

All of our PHP code will need to sit in between a PHP tag. And to create a variable in PHP we must start the variable name with a dollar sign $;

<?php
	$name = 'Steven';
?>

Previous programming concepts will also be used in PHP;

<?php
	//Fixed Loop
	for($i = 1; $i <= 10; $i++)
	{
		echo $i;
	}
	//While Loop
	$i = 1;
	while ($i <= 10){
		echo $i++;
	}
	//Conditional Statements
	$a = 10;
	$b = 8;
	if ($a > $b){
		echo "a is bigger than b";
	}
?>

You may have noticed a command in the previous code called echo. This is how we print data on the webpage for the client to see.

$server = 'localhost';
$user = 'root';
$password = '';
$database = 'bookingdb';

//Connect to server with above variables
$connection = mysqli_connect($server,$user,$password,$database);

//If error with connection, print error
if (mysqli_connect_errno())
{
	echo "Failed to connect to MySQL Database: ".mysqli_connect_error();
	//and kill the script
	die();
}

//Setup variable with query string
$querystring = "SELECT * FROM vehicles";

//Setup variable to be the return data from executing the query (passing in connection and query variable)
$allData = mysqli_query($connection, $querystring);

//Create an if statement to display IF there was no results returned from the query
if(mysqli_num_rows($allData) == 0){
	echo "No results";
}

echo "<table><tr><th>Make</th><th>Model</th><th>Year</th>";
while($row=mysqli_fetch_array($allData)){
	echo "<tr>";
	echo "<td>".$row['make']."</td>";
	echo "<td>".$row['model']."</td>";
	echo "<td>".$row['year']."</td>";
	echo "</tr>";
}
echo "</table>";

SELECT * FROM vehicles

SELECT * FROM vehicles WHERE year > 1990 

INSERT INTO usersTable(firstName, surname, email, password) VALUES('$firstName','$surname','$email','$password')

CSS

CSS - Cascading Style Sheet is the language that adds style and design to the websites. On top of what you learned in N5 WDD, you will be controlling more of the websites design from external CSS.

Basic CSS

Basic CSS example to give the body a background colour, and style every paragraph tag with font family, font size and colour.

body{
	background-color:blue;
}

p{
	font-family:Arial;
	font-size:23px;
	color:white;
}

The above will make any text in a <p> tag have the font of Arial, 23px font size and be white in colour. The entire body of the webpage will have a blue background.

Grouping and Descendant Selectors

At Higher we will be expected to use Grouping and Descendant CSS selectors.

Grouping Selector

Grouping selectors allows us to reuse the same CSS rules for multiple elements. In the example below I want to apply 2 rules; padding and margin-top, to 4 different tags, main, nav, footer and header, at once. I simply name my tags I want to apply the rule to, and place a comma between each one.

nav, main, footer, header{
	padding:5px;
	margin-top:5px;
}

Descendant Selector

Descendant selectors are used to reduce the need for ID's and class' by targetting tags within tags. For example; if we have a webpage that has lots of div's and inside those div's we have a h3 tag, we could use descendant selector CSS to target only the h3 tags that are inside a div.

div h3{
	color:blue;
	text-decoration:underline;
}

Another scenario would be if I had a nav bar that had an unordered list in and I wanted to style the individual list items a specific way, I would use descendant selectors to target only the <li> tag found inside an <nav> tag.

nav ul li{
	color:blue;
	list-style-type:none;
}

Controlling Appearance

CSS has a property that allows us to control how an element appears on the page. This property is called display. You should be aware of 3 of its values; block, inline and none.

When the display property is set to block, no element can be positioned to the side of it.

Controlling Spacing

We can control the distance between elements using margins and padding

Margin will control the spacing between elements, where as padding will control the spacing of elements within an element, for example text within a div

Controlling Layout

We can use float property in CSS to control how an element sits. We have 2 properties that we need to know and use; left and right. But we also have another property that works along with float and that is clear. It only has 1 property you will likely need to use; both.

Switch between the float options below and then trigger clear:both on or off to see the impact

Image	Text
float:left float:right	clear:both

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

CSS Rules

Here is a list of ways you will be expected to use CSS for Website Design and Development. Click the heading to hide the table.

Here is a comprehensive list of CSS tags that we might be expected to use in Higher Computing Science Website Design and Development:

JavaScript

JavaScript is the language that adds interactivity and dynamic elements to the websites.

For example, move your mouse over the text below and then move your mouse off - notice the change?

EXAMPLE JAVASCRIPT

At Higher you will be expected to implement JavaScript using any or all 3 mouse events; onmouseover, onmouseout, and onclick. These events are placed inside the HTML element tag.

<h3 onClick="____">Click Me</h3>
<h3 onmouseover="____" onmouseout="____" >Hover your mouse over me</h3>

What goes inside the quotes is either a function or JavaScript itself. It is cleaner to put a call to a function that we define in <script> tags that sit inside the <head> tag.

<head>
	<script>
		function changeToRed(){
			document.getElementById("target").style.color="red";
		}
	</script>
</head>

<h3 onClick="changeToRed()">Click Me</h3>

All of our JavaScript should go in the script tags

JavaScript Examples

Image Change

Change an image when we move our mouse over then return the image back to the original when the mouse moves off.

function imgA(){
			document.getElementById("imgChange").src = "../images/js_imgA.png";
		}
		
		function imgB(){
			document.getElementById("imgChange").src = "../images/js_imgB.png";
		}

Image Size

Increase image size when we move our mouse over it, return the image back to the original size when mouse moves off the image.

Image Reveal Text

We can show and hide text when we click an element

JavaScript is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS.

Text Effect

JavaScript can also affect text. Hover your mouse over the following text:

This text can be made bold when the user hovers their mouse over, and then returns back to normal weight when the mouse moves off.

Image Reveal

onClick applied to a piece of text to reveal a relevant image.

• Pizza
• Burger
• Fries