NED11: Module 3

Notes from Unit Outline
In the real world people can see where they are going because we are surrounded by navigational clues like signs, maps, sounds, smells, colours and climates. However on the Internet, it is very easy to get lost. You have a very little sense of where you are. Think about your Internet use yesterday. Is it easy to remember the sites you stumbled across? What navigational tools do you use to help you find your way?

It is important to make your website easy to learn - transparent and obvious to your users because you only have one chance to make a first impression! Navigation should be consistent across pages within your website. If you move your navigation from one page to the next, people will get lost. Don't remove the page they are on from the tabs, but dim it so they know where they are.

If you're building a site for a large corporation with many departments, try using multiple sub-sites. Check IBM for an example. Colour coded sections and roll-overs are a good way of providing feedback to users. Koodoz has very interesting navigational links. A 'back' button doesn't necessarily take the reader back a page - they may have arrived at that page from elsewhere. It is important to provide a 'home' button instead. If your navigation doesn't stand out from the rest of your content - it won't be very clear. It must be noticed and obvious! It is crucial that you understand your audience.

Tutorial Exercise: Style Sheet Basics
We were asked to install the Web Developer Tools extension for Mozilla FireFox. I did that and played around with the CSS enabling and disabling. It was interesting to see how a page's appearance changes when you alter the CSS style sheet.

What I've learnt about HTML, XHTML and CSS so far


HTML:

• In HTML hidden code should be written like <!--like this. This text cannot be seen by the browser, only by you and others who are reading the code-->
• Instead of hand-writing html - the program Dream Weaver by Creative Suite does it
• Tag + content + tag = element
• 6 different heading types are permitted: <h1>, <h2>...<h6>
• An href element contains a hyperlink to either an internal folder or external URL
• An img src element contains a link to an image
• The root folder is the top level folder of your website - the folder to which every page on your website links back to. The index is the 'home' page
• Relative paths link pages within the same website while URL's link to other websites
• Title attribute = when you hover your mouse over a link and a small flag pops up telling you something about that link
• To link to a specific spot on a webpage, use the id attribute and anchor points
• Most people view links BEFORE content
• Block elements are elements that stand on their own, like <h1>, <p> and <blockquotes> They add a line break below (sometimes above)
• Inline elements are those which flow on the same line like <q>, <a> and <em>
• <br> and <img> are empty elements - they don't need a closing tag
• Nesting refers to elements nested inside other elements
• As a coder you should use special characters instead of numbers, entities and symbols so all browsers display the text correctly. Numbers, entities and special characters can be found here
• Lists <li> can be ordered <ol> or unordered <ul> and don't need to begin at the number 1. To start a list at 100, for example, the html would be entered like this:

<ol>

<li value="100">Coffee</li>

<li>Tea</li>

</ol>

• jpegs are best used for complex graphics and graphics with colour (like photos)
• gifs are best for single or 2 colour images, like logos and are best for transparent backgrounds
• A document type tells the browser which version of html you're using
• Meta tags tell the browser the content type of the file and the kinds of characters used to encode it

XHTML:

• The 'X' in XHTML stands for extensible
• XML is extensible markup language
• Using XHTML means that screen readers are able to view browsers correctly, as are mobile devices and many different browsers
• More so than ever, it is important to convert all special characters to entities using this guide here
• Empty tags need to be closed now. So the regular old <br> tag now becomes < /br> with a space before the slash
• A paragraph cannot contain a list any longer
• <ol>, <ul> and <p> are block elements so cannot use one within the other, i.e. a list will now look like this:

<p>This is a list</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

• <img src> must go inside a <p> now, must have an alt attribute and a closing tag, e.g.

<img src="images/segway2.jpg" alt="segway2" />

• An href tag needs to go inside a <p>, i.e.

<p>
<a href="../lounge.html">Back to the lounge< /a>
</p>

CSS:

• In CSS hidden code should be written like /*like this. This can only be seen by code readers. It does not show in the browser*/
• An example of read-baked CSS may look like:

<style type="text/css">

body {

background-color: #d2b48c;

margin-left: 20%;

border: 1px dotted gray;

padding: 10px 10px 10px 10px;

font-family: sans-serif;

}

</style>

• CSS code must go within the <head> in html
• To change a heading to gray sans serif, the code looks like this:

h1 {
font-family: sans-serif; color: gray;
}

• To change a paragraph background colour to red, the code looks like this:

p {
background-color: red;
}

• From the above examples it is clear that CSS looks different than html. Gone are the <tags> and {braces} replace them
• You can change all paragraphs to the red background using the code above like you can change all heading 1's into tray sans serif just by entering the code once. You don't' have to individually code ever paragraph or every heading 1
• You can have as many rules as you want for each element, e.g. you can tell a h1 to be maroon sans-serif 14pt font and underline all at the same time
• All CSS can be entered within the <head> of the html document, HOWEVER it is best practice to create your own CSS style sheet which is a separate document to the html code. That way when you have a multi-page website and need to change background colours, text colours, fonts etc, you can simply make one change...in the CSS document rather than have to change every page individually
• To tell a browser to find a style sheet, you enter this code within the head:

<link type="text/css" rel="stylesheet" href="filename.css" />