Tag: HTML

BGE – Images on websites

The <img> tag is used to add an image to a webpage. <img> uses attributes to descibe the image and its location.


<img src="egg.jpg" alt="A picture of a chocolate egg">
  • src – The value of this attribute is the full name of the image file, in this case egg.gif which is in the same directory as the html file.
  • alt – The value of this attribute is a description of the image. This is used in case the image fails to download or it can be read aloud by screen readers.

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.

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>

Internet 101

Quite a few students have been asking for a better explanation of how the Internet works. This sequence of videos takes you through all areas and aspects of the Internet. If you have a Khanacademy account (you do S4) then you can even earn a badge for watching the videos.

It is well worth a watch for National 4,5 & higher and it will now be making up part of our future courses.

HTML – Lists

A HTML list is composed of two types of tag

List Type

This tag tells the browser what type of list we will be displaying. the two main types are

Unordered List <ul></ul>, this list displays bullet point. It is used when you do not want to give a ranking to the list items.

  • Item 1
  • Item 2
  • Item 3

Ordererd List<ol></ol>, this list is numbered. This is used when you want to give a ranking to the pages.

  1. Item 1
  2. Item 2
  3. Item 3

List Item

The list type must be placed around the List Item <li></li>, the browser will then display the items with the format specified from the list type.

Unordered List example

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Ordered List example

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

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.