Category: Coding

BGE – HTML Links

The anchor tag <a></a> in html 5 is used to create a hyperlink between two documents. The <a></a> surrounds text or an image that then is used to activate the link stored in the href attribute.


<!doctype html>
<html>
<head>
<title> Page 1 </title>
</head>
<body>
<h1>Page 1</h1>
<p>
This is a <a href="page2.html">link</a> to page 2
</p>
</body>
</html>

In the example above the word link is linked to page2.html.

HTML/CSS Navigation Menu

I wasn’t overly happy with the way that this was shown on W3Schools. The navigation bar and dropdowns were on different pages and it wasn’t till you got to the end that you saw how it worked. Even then the sub page links were not held in a sub list they were displayed in a div.

I found this article, which gives a good explination (along with samples) of how you could create a multilevel naviational bar that uses lists. The code is quite complicated and it relies on element element selector.

 

Targeting Menu Elements with Submenus in a Navigation Bar

Higher – Javascript mouse events

The code bellow uses mouse events to run a javascript function.

On line 15  the onmouseover and onmouseout events are used to call the function on line 6.

Line 7 targets the swap id and uses the argument passed to replace the image source.


<!doctype html>
<html>
<head>

<script type="text/javascript">
function changeImage(img_src) {
document.getElementById("swap").src = img_src;

}
</script>

</head>
<body>
<h1>roll over</h1>
<img id="swap" src="redButton.jpg" onmouseover='changeImage("blueButton.jpg")' onmouseout='changeImage("redButton.jpg")'>

</body>
</html>

N5 – Coding

Description and identification of coding to create and modify information systems including JavaScript mouse events.

Javascript is used in HTML documents to add interactivity. The HTML file below has a number of interactive elements to it. Use notepad++ to investigate it further.

<!DOCTYPE html>
<html>
<head>
<title> Teacher Example  </title>
<!--     
The <script> in the <head> tag allows the functions to be called from 
anywhere in the document
-->
<script>

<!-- Changes Style on Mouse Over -->
function mouseOver() {
document.getElementById("demo").style.color = "red";
}

<!-- Changes Style back after Mouse Over -->
function mouseOut() {
document.getElementById("demo").style.color = "black";
}
<!-- Asks for and displays a name -->
function myFunction() {
<!-- Asks the user to enter their name -->
    var person = prompt("Please enter your name", "Harry Potter");
	<!-- Displays the persons name in ID demo3 -->
    if (person != null) {
        document.getElementById("demo3").innerHTML =
        "Hello " + person + "! How are you today?";
    }
}
</script>

</head>

<body>
<!-- Display a heading that can be changed later -->
<h1 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">Welcome</h1>

<!-- Displays a button that when pressed will display the date in the first Heading-->
<p>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>

<!-- Uses Javascript to display the message "Your Text Here" -->
<p>
<script>
document.write("Your Text Here");
</script>

<!-- The text RESULT is not displayed as it is replaced by 
     the results of the calculation below it-->
<h1 id="demo2">RESULT</h1>
<script>
var price1 = 5;
var price2 = 6;
var total = price1 + price2;
document.getElementById("demo2").innerHTML =
"The total is: " + total;
</script>

<!-- This button calls the function myFunction from above -->
<p>Click the button to demonstrate the prompt box.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo3"></p>

</body>
</html>

Description, exemplification and implementation of coding to create and modify information system including the use of HTML with the tags for:
o Document
o Links
o Graphics

The documents below show a HTML document with the basic html document tags and a document showing the html tags for links and images 

<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title> Page1 </title>
</head>
<body>
<h1>Example of a heading of type 1</h1>

<h2>And this is heading 2</h2>

<!-- The anchor tag <a> is used to link a html document to another document. 
     The href attribute gives the name of the destination of the link. -->
<p>Here is a paragraph of text,
which includes a link to <a href="page2.html">page 2</a></p>

<p>
<!-- The image tag <img> is used to display an image.
     The src attribute is the name of the image -->
<image src="logo.png">

</body>
</html>

Higher – Coding (Revision)

Scripting

Including sections of program code in your website, to help make it more dynamic or interactive, is called scripting.

Client-side scripting

  •  A section of code is sent to the client computer and executed there, in the browser.
  • It is commonly used to add interactive elements to a webpage.
  • JavaScript is a language commonly used for client-side scripting.

Server-side scripting

  • A section of code is executed by the web server.
  • It is commonly used to create dynamic webpages, often connected to a database on the server.
  • Popular languages for server-side scripting include PHP, ASP, Perl and ColdFusion.

SEO (Search Engine Optimisation)

SEO is the process of improving the ranking of your webpage in search engine results, in order to increase traffic.

Some SEO techniques include:

  • Making sure each page of your site has a unique, concise and descriptive title contained in the <title> tag.
  • Using the description <meta> tag to include a summary of each page.
  • Using concise URLs.
  • Submit an XML sitemap to the companies which run the search engines
  • Using brief, descriptive filenames and alt text for images

Search engines and web crawlers

  • A web crawler (aka spider) is a piece of software which follows links from web page to web page, analyses the text on each page, and indexes the pages with related keywords.
  • Search engines then use this index to find relevant pages when you carry out a search.

Optimisation of code

Load times of webpages affect traffic. By making code more efficient, file sizes, and therefore load times, can be reduced.

Some techniques include:

  • Using a single CSS file to hold all the formatting information for the site.
  • Putting all JavaScript into a single external file, to reduce fetches from the server.
  • Remove/reduce internal commentary and white space.

Thank you to C O’Toole & A Madill from Braidhurst High School for allowing me to edit and publish this here.

Incrementing Counter

This is a programming statement which increases by a known amount, each time it is called.

  • Score=Score+1
  • One=One+1
  • Bonus=Bonus+10

Incrementing counters are often used inside loops to keep track of the number of iterations.

counter

In the example above the tries=tries+1 line is keeping track of how many times the loop has been iterated.

Python Selection – if:

diceToday we investigated the use of the if statement, this is a selection statement which allows Python to make choices.

We have updated our dice roll program from last time to include a for loop and multiple if statements. The program now displays a summary of the results of 1000 dice rolls.

For homework the class were asked to TRACS the program and we will discuss how efficient it is next time.