Category: Information System Design and Development

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.

BGE – Headings, Paragraphs and Breaks 


<!doctype html>
<html>
<head>
<title>Mr. Stratton's Page</title>
</head>
<body>
<h1>Mr Stratton </h1>

<p>Age<br>
School<br>
Hobbies</p>
</body>
</html>
  • <h1> </h1> – Heading tag is used to signify a heading of type 1. The default style for this has it as the most important and therefore largest heading size with a leading and trailing line break (blank line).
  • <p></p> – Paragraph tag is used so show a paragraph of text. The default style for this has a line break appear after the text.
  • <br> – Break tag is used to insert a line break (new line).

BGE – Blank HTML Page

Open notepad++ and enter the code below.


<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> </title>
  </head>
  <body>

  </body>
</html>

Save this as blank.html in your web folder.

  • <!doctype html> – This identifies the page as a HTML5 document.
  • <html></html> – The contents of this tag is HTML.
  • <head></head> – This is the head area of the website, the contents are not displayed on the site but can be used by the browser.
  • <meta charset=”UTF-8″> – This sets the character set of the site to unicode.
  • <title></title> – Title tag contains the text that appears as the title of the site, this is displayed at the top of the windows or on the tag.
  • <body></body> – The contents of this tag can be displayed on the browser window.

Notice that tags can contain other tags in thier contents, so for example the <head> contains <title>.

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>