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.

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