We're always looking for Feedback about Sakai, please feel free to leave a comment here.


From Information about Isaak, Brock University's Sakai-Based LMS

Revision as of 08:32, 8 October 2010 by (Talk)
(diff) ←Older revision | Current revision (diff) | Newer revision→ (diff)
Jump to: navigation, search

HTML stands for Hyper-Text Markup Language and is the markup that is used to make web pages on the world wild web.

In 1980, physicist Tim Berners-Lee proposed and prototyped a system for CERN researchers to use and share documents. In 1989, Berners-Lee and CERN data systems engineer Robert Cailliau each submitted separate proposals for an Internet-based hypertext system providing similar functionality. The following year, they collaborated on a joint proposal, the WorldWideWeb (W3) project,[1] which was accepted by CERN.


[edit] Examples

Hopefully you'll never be forced to use these tags/markup, but it can often be helpful to know how they could be used.

[edit] Basic Tags

  • <b>bold</b> (sometimes written as <strong>strong</strong>[2])
  • <strong>strong</strong> (usually bold)
  • <u>underlined</ul>
  • <i>italics</i> (sometimes written as <em>emphasis</em> [2])
  • <em>emphasis</em> (usually italics)
  • <strike>strike through</strike>
  • <center>This centers text on the page</center>
  • <pre>teletype text</pre> (preformatted typewriter text)
  • <blockquotes>blockquotes</blockquotes> (generally this means the text will be indented, and in some cases other stylistic hints marking a quotation will apear)

[edit] Links

  • Basic Link <a href=”url”>link title</a > (where ‘URL’ is the page you want to link to and ‘link title’ is the word/s that you want the link to say.
  • Email Link <a href=”mailto:EMAIL”></a > (where ‘EMAIL’ is the email address you want to be a link).

[edit] Heading Tags (vary according to CSS)

Heading tags not only help with formatting they also help with indexing. They help places like Google make sense of information.

  • <h1>An important heading</h1>
  • <h2>A slightly less important heading</h2>
  • <h3>A less important heading again</h3>
  • <h6>The smallest heading</h6>

[edit] Lists (vary according to CSS)

Lists are handy for formating and organization. They help places like Google make sense of information.

An ordered list (numbered list) is encapsulated with <ol> </ol> tags, un-ordered lists (bulleted lits) <ul> </ul>. Each list item, in both basses, should be surrounded by the tags <li>stuff</li>. In example

<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

Would produce:

  • Item 1
  • Item 2
  • Item 3


<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>

Would produce:

  1. Item 1
  2. Item 2
  3. Item 3

[edit] Images

  • The basic Image tag is <img src=”URL”> (the URL would point to the place on the Internet where the image is already stored)
  • Image with sizing <img src=”url” width=”200″ height=”150″> (note that this is exact pixels, and though you can resize and image be using alternate values this is strongly discouraged)
  • Align image left - <img src=”name” align=left> (substitute ‘left’ with ‘right’ to align it right)
  • Alt Tags - <img src=”url” alt=”short description of image”> (an alt tag describes the content of the image for those with disabilities of for site indexing)
  • Image as a link, like most tags the a tag and img tag can be combined: <a href=”link url”><img src=”url”></a >
  • Image with border - <img border=”1″ src=”url”> (the larger the number in the border “” the thicker the border)
  • Space Around Image <img src=”url” hspace=10 vspace=10> (hspace is the horizontal space and vspace is the vertical space. The numbers are in pixels)

[edit] Paragraphs and new lines

A best practise is to surround paragraphs with a <p> </p> set of tags, but all most all web based tools translate new lines into paragraphs for you - even web sites that do no other formating ofter do this. It is worth noting that a new paragraph often has 1.5 lines of spacing between it and the previous paragraph, forcing a regular new line can be done with the <br /> tag.

[edit] Semantic HTML

In almost all cases semantic HTML is encouraged. Semantic HTML refers to a practise to create documents with HTML that contain only the author's intended meaning, and is free of superfluous HTML markup that is there for presentation, not to describe the document. This is best achieved by separating the HTML markup from lay with Cascading Style Sheets, or CSS. This is indeed how Sakai, this wiki and most other modern web-based tools like blogging software work.

More information about the semantic web can be found in Wikipedia's HTML article: http://en.wikipedia.org/wiki/HTML#Semantic_HTML

[edit] Notes and References

  1. Tim Berners-Lee, "Information Management: A Proposal." CERN (March 1989, May 1990). http://www.w3.org/History/1989/proposal.html
  2. 2.0 2.1 This is the preferred method in the latest HTML 4 specification

[edit] Related

Personal tools
  • Log in / create account
Bookmark and Share