Block2 Session2 Presentation


Published on

E Learning Session 2

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
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;;>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> </li></ul><ul><li> </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