Author: Mr Stratton

Computing teacher and a PT at Coltness High School.

Computational Constructs

  • Expressions to assign values to variables
  • Expressions to return values using arithmetic operations (+, -, *, /, ^, mod)
  • Execution of lines of code in sequence demonstrating input – process- output
  • Expressions to concatenate strings and arrays using the & operator
  • Use of selection constructs including simple and complex conditional statements and logical operators.
  • Iteration and repetition using fixed and conditional loops Pre-defined functions (with parameters)

Read more

HTML – Hyperlinks

The H in HTML stands for Hyper,but what does that mean?

Hypertext is text which can link to other files, this is called a hyperlink. A hyperlink is composed of two parts, the anchor and the destination.

<a href=”http://www.google.com”>Google</a>

In the example above the anchor tag <a></a> is used to set an object (text or image) as an anchor, in this case Google. The href attribute is used to identify the destination of the link, in this case http://www.google.com. This is called an external hyperlink as the destination is on another server. If you were linking to a file on the same server then the internal hyperlink would be.

<a href=”page1.html”>Page 1</a>

The anchor tag can be placed around other HTML elements such as images.

<a href=”http://www.google.com><img src=”googleLogo.png”></a>

This would place a border around the image indicating that it is an anchor.

You can specify where to open the linked document using the target attribute.

Value Description
_blank Opens the linked document in a new window or tab
_self Opens the linked document in the same frame as it was clicked (this is default)
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of the window

So if you want the Google link above to open in a new tab you would change it to.

<a href=”http://www.google.com” target=”_blank”>Google</a>

HTML – Images

To add a picture to a HTML page we use the <img> tag. This tag creates a holding space for the image to be included on the page. This tag does not need to be closed.

The tag uses a number of attributes but two of them are required.  SRC tells the browser the location and file name of the image file (its source). ALT is the alternative text that is displayed if the picture fails to load.

Homer at computer

So the HTML code to display the image above is

<img src=”HScomp.jpg” alt=”Homer at computer”>

This assumes that the image is in the same folder as the HTML file.

If the image is the wrong size then you can use the height and width attributes to scale the picture.

<img src=”HScomp.jpg” alt=”Homer at computer” width=200>

Would make the image 200 pixels wide while keeping the aspect ratio correct by automatically scaling the height by the correct percentage.

Scratch – Calculations using a loop

Today we recapped performing calculation within and using a loop. We started off redoing the 6 times table task, before improving it to display all the times tables from 1 to 10.

TimesTable

We then created a program that took in 4 ages and displayed the total only using one user created variable

Age

These two programs make use of loops to reduce the number of programming lines, this making the program more efficient.

 

HTML Sample 1

This HTML file shows a sample use of the tags shown in the last post. Notice that the tags open and close without crossing over (this is shown after the jump). Copy and paste the code into Notepad++ and save it as Sample.HTML.

<!DOCTYPE html>
<html>
<head>
<title>HTML Sample 1</title>
<meta charset=”UTF-8″/>
</head>
<body>
<h1>HTML Sample 1</h1>
<p>This sample HTML file uses <strong>all</strong> the tags covered in <em>Nat 5 – Common HTML Text Tags</em></p>
</body>
</html>

Read more