Your SlideShare is downloading. ×
Block2 Session2 Presentation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Block2 Session2 Presentation

415

Published on

E Learning Session 2

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
415
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Welcome
    • Introductions
    • What we will learn
    • How we will learn
    • Learning Spaces & Tools
    • Models of Working
    • Live Tutorials
    • Assessment
  • 2. Task Feedback
    • Take the mic
    • HTML Exercises
    • Cascading Style Sheets
  • 3. Assessment Task Overview
    • Develop a design for a learning object
    • Develop a website based on your learning design
    • Develop and Display Images
  • 4. Assessment Task One
    • Develop a design for a learning object
    • Complete Design Workshops (Wiki)
    • Site Map and Story Board for small Learning Object
  • 5. Assessment Task One Site Map
  • 6. Assessment Task One Story Board
  • 7. Learning HTML
    • Not expected to be an HTML expert!
    • A lot of web designers use WYSIWYG editors such as FrontPage
    • Learn enough of the basic tags to produce simple web pages or make minor changes to a web page
  • 8. HTML Structure
    • <html> <!-- Comment is ignored --> <head> <title> E Learning < /title> </head> <body> Document body text here. </body> </html>
  • 9. Adding Links
    • I work at <a href=&quot;http://www.ballarat.edu.au/&quot;>UB</a>
    URL for link Text to display for link
  • 10. Inserting Images
    • <img src=“giro.jpg” alt=“Photo”>
    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. Inserting Images
    • <img src=“ pics/ giro.jpg” alt=“Photo”>
    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. Common Tags – Headings (Code)
    • <h1>Level 1 Heading</h1>
    • <h 2 >Level 2 Heading</h 2 >
    • <h 3 >Level 3 Heading</h 3 >
    • <h 4 >Level 4 Heading</h 4 >
    • <h 5 >Level 5 Heading</h 5 >
    • <h 6 >Level 6 Heading</h 6 >
  • 13. Common Tags – Headings (Display)
  • 14. Common Tags – Headings (Display)
  • 15. Common Tags – Colour
    • Websafe Colours
    • http://www.lynda.com/value.html
    • http://webdesign.about.com/od/colorcharts/l/bl_colors.htm
    • 2 Ways to Specify Colour
      • By Color Name
      • By hexadecimal value.
  • 16. Common Tags – Colour
  • 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. 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. 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. Style Sheets
    • O ne file that defines all the values (including HTML tags)
    • 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.
  • 21. Style Sheets
    • T he syntax is:
    • selector {style-attribute1:value1; style-attribute2:value2; ... }
    • EG
    • H2 {color:red; text-transform:capitalize}
    • Most of the style attributes concern:
      •   borders , margins and padding
      •   backgrounds
      •   lists fonts and text properties
  • 22. Style Sheets
    • We can determine the styles:
    • In the Head of our webpage
    • With the Tag attribute on the webpage
    • In an external link CSS file
  • 23. Style Sheets 1 – Examples
    • Basic paragraph text is to be a dark green 12 point Verdana, bold, italic and degrading to Arial, Helvetica and sans serif.
    • Redefining the style of an existing html tag
    • Defining the style on the page
  • 24. Style Sheets 1 – Examples
    • <html><head><title>Untitled Document</title>
    • <style type=&quot;text/css&quot;>
    • <!--
    • p {
    • font-family: Verdana, Arial, Helvetica, sans-serif;
    • font-size: 12px;
    • font-style: italic;
    • font-weight: bold;
    • color: #66CC00;
    • }-->
    • </style></head>
  • 25. Style Sheets 1 – The HTML
    • <p>This Rise and Fall of E Learning<p>
  • 26. Style Sheets – Examples
    • We can define styles in an external file (with a .css extension) and link them to our pages.
    • One change to the p style will “cascade” across all our pages linked to the .css file
  • 27. Style Sheets – Exernal CSS File
  • 28. Style Sheets – Exernal CSS File
    • <html >
    • <head>
    • <title>Untitled Document</title>
    • <link href=&quot;pagedesign/web.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; />
    • </head>
  • 29. Style Sheets – Uses
    • Use One File to:
    • Control web site look
    • Customise HTML Tags
    • Create Custom Styles
    • Control Layout of site
  • 30. Next Live Tutorials Times
    • Wednesday 28 May 2008, 6.30-7.30pm AES
  • 31. Thank you for playing

×