Welcome   <ul><li>Introductions </li></ul><ul><li>What we will learn </li></ul><ul><li>How we will learn </li></ul><ul><li...
Task Feedback <ul><li>Take the mic </li></ul><ul><li>HTML Exercises </li></ul><ul><li>Cascading Style Sheets </li></ul>
Assessment Task Overview <ul><li>Develop a design for a learning object </li></ul><ul><li>Develop a website based on your ...
Assessment Task One <ul><li>Develop a design for a learning object </li></ul><ul><li>Complete  Design Workshops  (Wiki) </...
Assessment  Task One Site Map
Assessment  Task One Story Board
Learning HTML <ul><li>Not  expected to be an HTML expert! </li></ul><ul><li>A lot of web designers use WYSIWYG editors suc...
HTML Structure <ul><li><html>   <!-- Comment is ignored -->   <head>   <title> E Learning  < /title>   </head>   <body>   ...
Adding Links <ul><li>I work at <a href=&quot;http://www.ballarat.edu.au/&quot;>UB</a> </li></ul>URL for link Text to displ...
Inserting Images <ul><li><img src=“giro.jpg” alt=“Photo”> </li></ul>Name of file with image Text to display if image unava...
Inserting Images <ul><li><img src=“ pics/ giro.jpg” alt=“Photo”> </li></ul>Name of Folder Name of file Text to display if ...
Common Tags – Headings (Code) <ul><li><h1>Level 1 Heading</h1> </li></ul><ul><li><h 2 >Level  2  Heading</h 2 > </li></ul>...
Common Tags – Headings (Display)
Common Tags – Headings (Display)
Common Tags – Colour <ul><li>Websafe Colours </li></ul><ul><li>http://www.lynda.com/value.html </li></ul><ul><li>http://we...
Common Tags – Colour
Common Tags – Colour U se a color (hex) code to  colour text .  <FONT COLOR=&quot;######&quot;>text </ FONT > For example,...
Common Tags – Colour across Page <TEXT=&quot;######&quot;>   T he full-page text colo u r. <LINK=&quot;######&quot;>   C o...
Common Tags – Colour across Page P lace them all together inside the same command along with any  background  commands.  S...
Style Sheets <ul><li>O ne file that defines all the values  (including HTML tags)   </li></ul><ul><li>Can  leave out most ...
Style Sheets <ul><li>T he syntax is: </li></ul><ul><li>selector {style-attribute1:value1; style-attribute2:value2; ... } <...
Style Sheets <ul><li>We can determine the styles: </li></ul><ul><li>In the Head of our webpage </li></ul><ul><li>With the ...
Style Sheets 1 – Examples <ul><li>Basic paragraph text is to be a dark green 12 point Verdana, bold, italic and degrading ...
Style Sheets 1 – Examples  <ul><li><html><head><title>Untitled Document</title> </li></ul><ul><li><style type=&quot;text/c...
Style Sheets 1 – The HTML <ul><li><p>This Rise and Fall of E Learning<p> </li></ul>
Style Sheets – Examples <ul><li>We can define styles in an external file (with a .css extension) and link them to our page...
Style Sheets – Exernal CSS File
Style Sheets – Exernal CSS File <ul><li><html > </li></ul><ul><li><head> </li></ul><ul><li><title>Untitled Document</title...
Style Sheets – Uses <ul><li>Use One File to:  </li></ul><ul><li>Control web site look  </li></ul><ul><li>Customise HTML Ta...
Next Live Tutorials Times <ul><li>Wednesday 28 May 2008,  6.30-7.30pm AES </li></ul>
Thank you for playing
Upcoming SlideShare
Loading in...5
×

Block2 Session2 Presentation

461
-1

Published on

E Learning Session 2

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
461
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Block2 Session2 Presentation

  1. 1. Welcome <ul><li>Introductions </li></ul><ul><li>What we will learn </li></ul><ul><li>How we will learn </li></ul><ul><li>Learning Spaces & Tools </li></ul><ul><li>Models of Working </li></ul><ul><li>Live Tutorials </li></ul><ul><li>Assessment </li></ul>
  2. 2. Task Feedback <ul><li>Take the mic </li></ul><ul><li>HTML Exercises </li></ul><ul><li>Cascading Style Sheets </li></ul>
  3. 3. Assessment Task Overview <ul><li>Develop a design for a learning object </li></ul><ul><li>Develop a website based on your learning design </li></ul><ul><li>Develop and Display Images </li></ul>
  4. 4. Assessment Task One <ul><li>Develop a design for a learning object </li></ul><ul><li>Complete Design Workshops (Wiki) </li></ul><ul><li>Site Map and Story Board for small Learning Object </li></ul>
  5. 5. Assessment Task One Site Map
  6. 6. Assessment Task One Story Board
  7. 7. Learning HTML <ul><li>Not expected to be an HTML expert! </li></ul><ul><li>A lot of web designers use WYSIWYG editors such as FrontPage </li></ul><ul><li>Learn enough of the basic tags to produce simple web pages or make minor changes to a web page </li></ul>
  8. 8. HTML Structure <ul><li><html> <!-- Comment is ignored --> <head> <title> E Learning < /title> </head> <body> Document body text here. </body> </html> </li></ul>
  9. 9. Adding Links <ul><li>I work at <a href=&quot;http://www.ballarat.edu.au/&quot;>UB</a> </li></ul>URL for link Text to display for link
  10. 10. Inserting Images <ul><li><img src=“giro.jpg” alt=“Photo”> </li></ul>Name of file with image Text to display if image unavailable or for accessibility In this example the Image must be in same folder as HTML file to display
  11. 11. Inserting Images <ul><li><img src=“ pics/ giro.jpg” alt=“Photo”> </li></ul>Name of Folder Name of file Text to display if image unavailable or for accessibility In this example the Image is in the “pics” folder adjacent to the html file
  12. 12. Common Tags – Headings (Code) <ul><li><h1>Level 1 Heading</h1> </li></ul><ul><li><h 2 >Level 2 Heading</h 2 > </li></ul><ul><li><h 3 >Level 3 Heading</h 3 > </li></ul><ul><li><h 4 >Level 4 Heading</h 4 > </li></ul><ul><li><h 5 >Level 5 Heading</h 5 > </li></ul><ul><li><h 6 >Level 6 Heading</h 6 > </li></ul>
  13. 13. Common Tags – Headings (Display)
  14. 14. Common Tags – Headings (Display)
  15. 15. Common Tags – Colour <ul><li>Websafe Colours </li></ul><ul><li>http://www.lynda.com/value.html </li></ul><ul><li>http://webdesign.about.com/od/colorcharts/l/bl_colors.htm </li></ul><ul><li>2 Ways to Specify Colour </li></ul><ul><ul><li>By Color Name </li></ul></ul><ul><ul><li>By hexadecimal value. </li></ul></ul>
  16. 16. Common Tags – Colour
  17. 17. Common Tags – Colour U se a color (hex) code to colour text . <FONT COLOR=&quot;######&quot;>text </ FONT > For example, for aqua text: <FONT COLOR=“ ff0000 &quot;>text </ FONT >
  18. 18. Common Tags – Colour across Page <TEXT=&quot;######&quot;> T he full-page text colo u r. <LINK=&quot;######&quot;> C olo u r of the links on your page. <ALINK=&quot;######&quot;> C olo u r the link will flash when clicked upon. <VLINK=&quot;######&quot;> colo u rs of the links after user has visited .
  19. 19. Common Tags – Colour across Page P lace them all together inside the same command along with any background commands. Something like this: < BODY BGCOLOR=&quot;######&quot; TEXT=&quot;######&quot; LINK=&quot;######&quot; VLINK=&quot;######&quot;>
  20. 20. Style Sheets <ul><li>O ne file that defines all the values (including HTML tags) </li></ul><ul><li>Can leave out most of the formatting tags in HTML and use only nice structural elements (like headings, paragraphs and links) — separating structure and presentation. </li></ul>
  21. 21. Style Sheets <ul><li>T he syntax is: </li></ul><ul><li>selector {style-attribute1:value1; style-attribute2:value2; ... } </li></ul><ul><li>EG </li></ul><ul><li>H2 {color:red; text-transform:capitalize} </li></ul><ul><li>Most of the style attributes concern: </li></ul><ul><ul><li>  borders , margins and padding </li></ul></ul><ul><ul><li>  backgrounds </li></ul></ul><ul><ul><li>  lists fonts and text properties </li></ul></ul>
  22. 22. Style Sheets <ul><li>We can determine the styles: </li></ul><ul><li>In the Head of our webpage </li></ul><ul><li>With the Tag attribute on the webpage </li></ul><ul><li>In an external link CSS file </li></ul>
  23. 23. Style Sheets 1 – Examples <ul><li>Basic paragraph text is to be a dark green 12 point Verdana, bold, italic and degrading to Arial, Helvetica and sans serif. </li></ul><ul><li>Redefining the style of an existing html tag </li></ul><ul><li>Defining the style on the page </li></ul>
  24. 24. Style Sheets 1 – Examples <ul><li><html><head><title>Untitled Document</title> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li><!-- </li></ul><ul><li>p { </li></ul><ul><li>font-family: Verdana, Arial, Helvetica, sans-serif; </li></ul><ul><li>font-size: 12px; </li></ul><ul><li>font-style: italic; </li></ul><ul><li>font-weight: bold; </li></ul><ul><li>color: #66CC00; </li></ul><ul><li>}--> </li></ul><ul><li></style></head> </li></ul>
  25. 25. Style Sheets 1 – The HTML <ul><li><p>This Rise and Fall of E Learning<p> </li></ul>
  26. 26. Style Sheets – Examples <ul><li>We can define styles in an external file (with a .css extension) and link them to our pages. </li></ul><ul><li>One change to the p style will “cascade” across all our pages linked to the .css file </li></ul>
  27. 27. Style Sheets – Exernal CSS File
  28. 28. Style Sheets – Exernal CSS File <ul><li><html > </li></ul><ul><li><head> </li></ul><ul><li><title>Untitled Document</title> </li></ul><ul><li><link href=&quot;pagedesign/web.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /> </li></ul><ul><li></head> </li></ul>
  29. 29. Style Sheets – Uses <ul><li>Use One File to: </li></ul><ul><li>Control web site look </li></ul><ul><li>Customise HTML Tags </li></ul><ul><li>Create Custom Styles </li></ul><ul><li>Control Layout of site </li></ul>
  30. 30. Next Live Tutorials Times <ul><li>Wednesday 28 May 2008, 6.30-7.30pm AES </li></ul>
  31. 31. Thank you for playing

×