PowerPoint Presentation Design tips for effective slide presentations

1
Basic HTML
Dorian Peters
CoCo Research CentreThe University of Sydney20
July 09
2
Purpose

• For you to get a basic understanding of how html
  works so you can edit and fix html pages by
  hand.
  
• CoCo members so you can use html in our content
  management system (Plone) for writing learning
  activities online.
  

3
What is HTML?

• Not a programming language
• Normal text with a few instructions thrown in to
  tell the browser what to do.
  
• used to structure text (ie. break it down into
  headings, paragraphs, lists etc.)
  
• Hypertext Markup Language

4
xhtml or html - whats the difference?

• xhtml is just the new version of html
• Like anything else, html gets improved. Just like
  tiger is the new Mac OS version
  
• Dont worry, it never changes much.
• The new version is coincidentally also xml as
  well as being html (which is technically
  convenient) hence the x added on.
  
• W3C (world wide web consortium)
• standards body that defines html

5
Structuring text

• Heading text

6
Tags

• Tags are the little instructions you put around
  text to give it structure.
  
• heading text
• second heading text
• text in a paragraph
• text in bold
• Tags are always surround by arrows. Closing
  tags always start with a forward slash.

7
Common tags

• for strong bold
• for emphasis italics
• heading levels bold/large
• for paragraphs separates
  text block
  
• 
  break to a new line like hard
  return
  
• horizontal rule draws line
  
  

8
Special tags

• Links
• Link
• Images

9
Links

• Link
• technically a is for anchor
• Why not think of it as address
• Requires a hypertext reference (web address)
• Link to
  google
  
• Looks like this..
• Link to google

10
Links email

• To link to an email address, add mailto
• Email
  dorian
  
• Looks like this..
• Email dorian

11
Images

• Needs a source for the image
• The source is the name and location of your
  image, relative to the web page. If the page and
  the image are in the same folder, you use just
  the image name.

12
Images Alternative text

• Images need alternative text
• For broken images, slow connections, text-only
  browsers, when images turned off, for blind and
  low vision users
  
• Text replacement of the image, NOT description
• DO NOT describe the image (teacher in a
  classroom)
  
• DO Communicate the meaning (Courses page)
• If the image serves no function, include an empty
  alt attribute
  

13
Images getting the source right

• Relative links can be tricky, so here are some
  examples.
  
• image is in the same place as html page
• Image is in images folder, one level below, my
  html page
  
• images folder outside my webpage folder, but on
  same level
  

?web
?html ?.gif
?web
?html ?images
?web
? images
?.gif
? html
14
Lists

• Unordered List (bullets)
  • Ordered List (numbers)
    1. • carrots
       • peas
       • tomato
  • Carrots
  • Peas
  • Tomatoes

15
Tags must always

• Be all lowercase
• Be closed
• Be properly nested (tags within tags)
• Correct
• text
• Wrong
• text
• Their attributes must always have quotations
  marks
  

16
Other tags included by the editor

• If you are using a content management system (eg.
  Plone) or an editor (eg. Dreamweaver, Netscape
  Composer) then you wont need to put these in.
  

My Page
All your content
goes in here.
17
About WYSIWYG editors

• You can always use them to create some html then
  paste it into your content management system.
  
• You can download Netscape composer for free!
• Dreamweaver is recommended if youre buying
• Frontpage is not recommended because it creates
  messy html.

18
Try it yourself

• Open the following page in a browser
• MyPage.html
• Open it in a text editor and Change the page
  title (put your name in)
  
• Add alt text to the flower image

19
Now make it look like this
20
Check it in a browser

• Open your file in a browser to check it. Make
  any fixes.
  
• Now open MyPage_Finished.html in a browser.
• Go to View page source
• Compare the source code of your page to this
  one.
  

Compare the source
21
Tips on html files

• They must always end in .html (or occasionally
  .htm)
  
• They are just plain text
• They can be opened by
• Any browser
• Text editors (Notepad, TextEdit, etc.)
• html editors (Composer, Dreamweaver, etc.)
• MS Word (not good for editing, just viewing,
  messes things up a bit)

22
When you need help

• Google it! - search for any question you have
• Webmonky.com has excellent html online tutorials
• Learn more, SSDU - has classes in html, web dev,
  css
  
• Books Visual Quick Start guides are great and
  available at the library
  
• No individual or help service is available at
  USyd for how to questions
  

www.webmonkey.com
Visual Quick Start Guide to HTML
23
Just for CoCo the plan

• We will be writing online activities in html.
• I recommend using dreamweaver or composer, so you
  dont have to do it by hand (then just paste
  in).
  
• Well be including extra xml tags sometimes.
  Things like
  
• I will give you a list of these tags (and a
  template) so you dont need to remember them or
  even type them in yourself.

24
Just for CoCo working in Plone

• When you paste some html that has been generated
  by Dreamweaver or composer into Plone, copy and
  past only the body.
  
• Everything between these tags
• Exclude everything else, also exclude the body
  tags themselves. Plone already has these tags
  built in.