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.
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.
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>
Today in class we made use of Mozilla X-Ray Googles and Mozilla Thimble to edit existing web sites.
We also used the built-in Inspect tool to edit websites on the fly. The changes to the websites are on the local HTML files not on the server.
We noticed a lot of websites make use of the <div> tag, we will be investigating this next time.
Today in class we were doing a bit of revision/learning from “KHANACADEMY’s hour of code, creating webpages“. This is a starter lesson that will help us to better understand the role of HTML & CSS in websites.
We will be using this website a lot this term.
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>
Scripting
Including sections of program code in your website, to help make it more dynamic or interactive, is called scripting.
Client-side scripting
Server-side scripting
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:
Search engines and web crawlers
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:
Thank you to C O’Toole & A Madill from Braidhurst High School for allowing me to edit and publish this here.
This is a programming statement which increases by a known amount, each time it is called.
Incrementing counters are often used inside loops to keep track of the number of iterations.
In the example above the tries=tries+1 line is keeping track of how many times the loop has been iterated.
Today 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.
