HTML editor: Difference between revisions
From MoodleDocs
No edit summary |
|||
| Line 8: | Line 8: | ||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- | |||
strict.dtd"> | |||
< | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> | ||
< | <head> | ||
< | |||
<title>Kamloops Centre for Therapy - Services</title> | |||
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> | |||
<link rel="stylesheet" type="text/css" href="style.css" /> | |||
<style type="text/css"> | |||
body { background-image: url("/images/inner_02.jpg"); background-attachment: fixed } | |||
< | |||
</style> | |||
< | |||
< | <!--------------------------End Of CSS Style Definitions ----------------------------> | ||
< | </head> | ||
< | |||
< | <div align="left"> | ||
</ | |||
< | |||
< | <div align="center"><img src="/images/logo.gif" width="300" height="60" alt="Kamloops Centre for Therapy"> | ||
< | </div> | ||
< | |||
< | <DIV align="left"> | ||
< | <ul id="nav"> | ||
< | <li><a href="http://kamloopscentrefortherapy.com" title="Home">Home</a></li> | ||
</ | <li><a href="services.html" title="Services">Services</a></li> | ||
< | <li><a href="#" onclick="javascript: window.open | ||
< | ('http://www.websitetoolbox.com/guestbook/kamloopscentrefortherapy', '', | ||
< | 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=820,height=590'); | ||
< | return false" id="menu437" title="Kamloops Centre for Therapy - | ||
< | Guestbook"><span>Guestbook</span></a></li> | ||
<li><a href="contact.html" title="Contact">Contact</a></li> | |||
</ul> | |||
<ul id="subnav"> | |||
<li id="subnavfirst"><a href="events.html" title="Events">Events</a></li> | |||
<li><a href="#" onclick="javascript: window.open('login.html', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=no,width=900,height=590'); return false" id="menu437" title="Kamloops Centre for Therapy - Login"><span>Login</span></a></li> | |||
<li><a href="editnews.htm" title="Edit News">Edit News</a></li> | |||
</ul> | |||
<div id="colone"> | |||
<h2>Featured <span>Design</span></h2> | |||
<div class="featureimg"><img src="/images/feature_1.gif" width="" height="84" alt="Featured image" /></div> | |||
<ul class="featurelist"> | |||
<li><em>Owner:</em> John Doe</li> | |||
<li><em>Company:</em> Nanobytedesign</li> | |||
<li><em>Finished:</em> January 1st, 2006</li> | |||
<li><em>Description:</em> A website for a design firm that is based in Houston, TX. This design firm had no time to make their own website so we did it for them.</li> | |||
</ul> | |||
</div> | |||
<div id="coltwo"> | |||
<h2>Most <span>Recent</span> Client</h2> | |||
<div class="featureimg"><img src="/images/feature_2.gif" width="192" height="84" alt="Featured image" /></div> | |||
<ul class="featurelist"> | |||
<li><em>Owner:</em> Dave Bledsoe</li> | |||
<li><em>Company:</em> SleekNetwork</li> | |||
<li><em>Finished:</em> January 1st, 2006</li> | |||
<li><em>Description:</em> A website for a network of websites with different opportunities including an arcade website, myspace goodies, and much more.</li> | |||
</ul> | |||
</div> | |||
<div id="colthree"> | |||
<h2>Newest <span>Website</span></h2> | |||
<div class="featureimg"><img src="/images/feature_3.gif" width="192" height="84" alt="Featured image" /></div> | |||
<ul class="featurelist"> | |||
<li><em>Owner:</em> Joe Blow</li> | |||
<li><em>Company:</em> Marketing World</li> | |||
<li><em>Finished:</em> January 1st, 2006</li> | |||
<li><em>Description:</em> A website for Marketing World which is a company that is used for a software development firm.</li> | |||
</ul> | |||
</div> | |||
<h2 class="heading"><font color=#000000 >Newest <span>News</span></font></h2> | |||
<h3 class="heading"><BODY BACKGROUND ="images/bg_lines4.gif"><li><Font color=#000001>This Site</font></li></h3> | |||
<Font color=#000009 > | |||
<h4 class="heading">About</h4> | |||
</font> | |||
<Font size = “9” color=#000000 > | |||
<p>Welcome to Kamloops Centre for Therapy. Our site is still under construction. You may click on | |||
the links above to view them. If a broken link, please contact us at | |||
http://kamloopscentrefortherapy.com/contact.html .</font></p> | |||
</font> | |||
<Font color=#000009 > | |||
<h4 class="heading">When is it going to be done?</h4> | |||
</font> | |||
<Font size = “9” color=#000000 > | |||
<p>We are currently working hard at this website. Please keep checking back; if you would like | |||
updates, just contact us with the subject "Updates" . Make sure you provide you name and | |||
email.</font><br /> | |||
<br /> | |||
</font> | |||
<div id="foot"> | |||
<BODY BACKGROUND ="/images/bg_lines4.gif"> | |||
<p>Copyright © 2008 - All Rights Reserved<br /><a href="http://www.kamloopscentrefortherapy.com" | |||
title="Kamloops Centre for Therapy"><strong>Kamloops Centre for Therapy</strong></a></p> | |||
</div> | |||
</body> | |||
</html><!-- Register4less.com --> | |||
==Inserting images== | ==Inserting images== | ||
Revision as of 22:24, 23 March 2008
The Richtext HTML editor provides a word-processor interface embedded in your web page to allow you to edit text in an intuitive way, and produces normal HTML code.
In addition to formatting text, this editor provides a number of extra features you may find useful.
When you choose many functions a new small window will open. Unfortunately it can often open BEHIND the window you are in so you may miss that anything has happened. You can check new windows with [Alt]+[Tab].
Note: The HTML editor does not work in all browsers. If you are using a Mac OS X and for some reason it does not appear, try using Firefox instead of Safari as a browser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<title>Kamloops Centre for Therapy - Services</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <style type="text/css">
body { background-image: url("/images/inner_02.jpg"); background-attachment: fixed }
</style>
</head>
<img src="/images/logo.gif" width="300" height="60" alt="Kamloops Centre for Therapy">
Featured Design
<img src="/images/feature_1.gif" width="" height="84" alt="Featured image" />
- Owner: John Doe
- Company: Nanobytedesign
- Finished: January 1st, 2006
- Description: A website for a design firm that is based in Houston, TX. This design firm had no time to make their own website so we did it for them.
Most Recent Client
<img src="/images/feature_2.gif" width="192" height="84" alt="Featured image" />
- Owner: Dave Bledsoe
- Company: SleekNetwork
- Finished: January 1st, 2006
- Description: A website for a network of websites with different opportunities including an arcade website, myspace goodies, and much more.
Newest Website
<img src="/images/feature_3.gif" width="192" height="84" alt="Featured image" />
- Owner: Joe Blow
- Company: Marketing World
- Finished: January 1st, 2006
- Description: A website for Marketing World which is a company that is used for a software development firm.
Newest News
<BODY BACKGROUND ="images/bg_lines4.gif">This Site
About
Welcome to Kamloops Centre for Therapy. Our site is still under construction. You may click on the links above to view them. If a broken link, please contact us at http://kamloopscentrefortherapy.com/contact.html .
When is it going to be done?
We are currently working hard at this website. Please keep checking back; if you would like
updates, just contact us with the subject "Updates" . Make sure you provide you name and
email.
<BODY BACKGROUND ="/images/bg_lines4.gif">
Copyright © 2008 - All Rights Reserved
<a href="http://www.kamloopscentrefortherapy.com"
title="Kamloops Centre for Therapy">Kamloops Centre for Therapy</a>
</body>
</html>
Inserting images
If you have images that are already published on a web site and accessible via a URL, you can include these images in your texts using the "Insert Image" button. Moodle recongizes JPG, GIF and PNG as image files.
Inserting tables
- To add layout to your texts, you can use the "Insert Tables" button in the toolbar.
- Most table editing tools are only visible if you click the Enlarge Editor button.
Inserting links
To make a new link,
- type the text that you want to be a link
- select the text
- click the link button in the toolbar
- Type (or paste, or browse to) the URL you want to link to
- Click OK
NOTE: This process does NOT work inside the wiki module where you need to use the Wiki link system (square brackets containing the label and the link seperated by a vertical line character)
Inserting smilies (emoticons)
To embed these small icons in your text, click on the smiley icon in the toolbar. A dialog will pop up that allows you to select from the following smiley icons. (Alternatively, you can just type the corresponding code straight into your text and it will be converted later when your text is displayed).
Shortcut keys
| Keys | Action |
|---|---|
| Ctrl-C | Copy |
| Ctrl-V | Paste |
| Ctrl-X | Cut |
| Ctrl-O | Change the font |
| Ctrl-P | Change the font size |
| Ctrl-H | Change text format (headings etc.) |
| Ctrl-1 | to Ctrl-6 Change heading level |
| Ctrl-= | Change text language for screen readers, or specify language for the Multilang filter |
| Ctrl-B | Make text bold |
| Ctrl-I | Make text italic |
| Ctrl-U | Underline text |
| Ctrl-S | Strikethrough text |
| Ctrl-, | Subscript |
| Ctrl-. | Superscript |
| Ctrl-0 | Clean Word HTML |
| Ctrl-Z | Undo |
| Ctrl-Y | Redo |
| Ctrl-L | Justify left |
| Ctrl-E | Center |
| Ctrl-J | Justify full |
| Ctrl-/ | Text runs left to right |
| Ctrl-| | Text runs right to left |
| Ctrl-; | Decrease indent |
| Ctrl-' | Increase indent |
| Ctrl-G | Change text colour |
| Ctrl-K | Change background colour |
| Ctrl-F | Search and replace |
| Ctrl-` | Switch to HTML source code view |
| Ctrl-M | Toggle fullscreen editor mode |
| Ctrl-Alt-O | Insert ordered list |
| Ctrl-Alt-U | Insert unordered list |
| Ctrl-Alt-R | Insert horizontal rule |
| Ctrl-Alt-A | Create anchor |
| Ctrl-Alt-L | Create link |
| Ctrl-Alt-D | Unlink |
| Ctrl-Alt-N | Turn off autolinking |
| Ctrl-Alt-I | Insert image |
| Ctrl-Alt-T | Insert table |
| Ctrl-Alt-S | Insert emoticon |
| Ctrl-Alt-C | Insert special character |
Code editing
The [<>] button changes the display window to raw HTML code. This can be useful for those of you that know how to use it (or want to learn!). Most of the buttons do not work there, not even the Search and Replace unfortunately.
See also
- Page content - for more assistance on using some of above editing icons
- HTML in Moodle
- Editor settings
- Using Moodle HTML editor forum
- Using Moodle Question about insert image function in HTML editor forum discussion, including methods of enabling students to insert images using the HTML editor
- Using Moodle Need to display english special phonetic symbols for ESL students forum discussion
