Web editing

Learning objectives

When you have completed this session, you should be able to

• list some website editors,
• create simple webpages in Moodle.

Webpage editors

To publicate on the Internet you no more need to know HTML. The most widespread word processors, like MS Word already know this language. You can convert the document you are editing into a web page with the Save As Webpage command in the File menu. The result can be published on the Internet. You better know that not every part of the document will appear in exactly the same form as in a .doc file, but the differences are really specific. It has a drawback on the other hand. In word processors the converter algorithm is too complicated and that is why the code contains a lot of "unnecessary" parts that make the file bigger and the code more immens.

There are a lot of professional softwares on the market which are suitable not only for editing simple pages but for editing complex websites (which consist of more pages). Such a software is Adobe Dreamweaver, formerly a Macromedia product. To find a free software for editing more simple webpages you can choose from thousands of applications on the Internet.

These softwares make HTML editing easier with a lot of features. They give you options from you can choose, you can edit the properties visually e.g. in a design view (WYSIWYG - What you see is what you get), or you can view the code and the design next to each other at the same time.

In Moodle

Learning objectives

When you have completed this session, you should be able to

• list the most important tools in Moodle's editor.

Web editor in Moodle

There is an easy and handy web editor in Moodle that is suitable for editing the most HTML documents, educational materials, shorter lessons, assignments. You can work with this editor like in a normal word processor without knowing the HTML code but in case you would like to have a look at the source code you can read it and even modify it.

Common toolbar elements and functions

Icon	Function
	View or edit the document source code (for advanced users).
	Preview what the HTML page will look like for users.
	Select a layout template.
	Cut the highlighted text to the clipboard.
	Copy the highlighted text to the clipboard.
	Paste the data copied to the clipboard (with or without formatting).
	Paste content copied from Microsoft Word or similar applications.
	Print the current document.
	Spell check the text in the document.
	Undo or redo the most recent action taken.
	Find a word or phrase within the document.
	Find and replace a word or phrase within the document.
	Select the entire text in the document.
	Remove the formatting from the highlighted text.
	Applies bold, italic, underscore or strikethrough formatting to the highlighted text.
	Superscript or subscript the highlighted text.
	Changes the color of the text.
	Changes the background color of the text.
	Creates numbered or bulleted lists.
	Increase or decrease the text indentation.
	Sets the text alignment (left, centered, right or justified).
	Inserts or modifies a link anchor.
	Inserts images into the document.
	Creates a table with the defined number of columns and rows.
	Inserts a divider line (horizontal rule).
	Inserts an emoticons image (smiley faces, email icon, lightbulb, etc.).
	Inserts symbols & special characters (accented characters, trademark, currency symbol, etc.).
	Inserts a printing page break. Only impacts printed version.
	Keyboard for special languages.
	Styles & formatting determine the appearance and semantic value of your document. You may use the drop down boxes to apply styles, set the font, its size, etc. To remove the applied style select the style name again.

Curriculum

Learning objectives

When you have completed this session, you should be able to

• create a small lesson in Moodle.

HTML curriculum in Moodle

Through a simple and easy instance we are going to see step-by-step, how to make a HTML page in Moodle with the help of its tiny editor.

Let's do a small educational lesson about Gutenberg. Turn editing mode on and choose from the Add a resource... drop-down list the command Compose a web page.

The name of the document will be Gutenberg and write only a short sentence into the Summary section. You can type the sentence or copy from Word and paste it into Moodle.

Please type or copy/paste the Full text into the editor (into the next block, like below in the picture).

Insert a picture by clicking on the little Picture icon . The picture has not been uploaded, yet. So you can create a folder with the help of the window which appeared, browse a picture from your own materials and need to upload it into that folder.

After that we can adjust the settings: the alternate text (which will appear when someone takes the cursor over the picture), the alignment to the text (Right), the distance from the text (2 pixels) and the size of the picture if it would be too big.

Then you can align the text left and by hitting Enter key you can get a new paragraph. With the icons ( ) you can adjust the alignment of the text below the picture as justified.

At last but not least you can insert a link and you are ready with the webpage. Moreover you can insert a line ( ) between the text and the reference link to get a better view.

After the line write the text: reference: Wikipedia. The last word will be the hyperlink. Highlight it and click on the little chain icon to insert a link.

The url will be:

http://en.wikipedia.org/wiki/Johannes_Gutenberg

In the appearing window write the exact url of the webpage you want to visit, give a title (it could be anything, but it can be left empty, too) and if you want, choose from the Target list New Window. It means that the original webpage of Wikipedia will open in a new tab or window.

Clicj on OK to finish the settings.

Below the editor you will find a Show Advanced button. Click on it and adjust the settings in the following, as you can see it below:

The size 620 x 450 will be the size of the new window in which our lesson about Gutenberg will show up. Adjust the other settings as you wish, try some variations.

In the end do not forget to click on the "Save and return to course" or the "Save and display" button.

Source code

Learning objectives

When you have completed this session, you should be able to

• modify the source code in Moodle.

HTML source code

Who knows HTML code can have a look at the source code and can edit, modify or correct it.

In order to edit the source code you need to click on the icon Its name is "Toggle HTML Source".

The Gutenberg lesson's source code looks like this (unwrapped):

The link you made the last look like the following, in the source code view:

<div style="text-align: justify;">Reference: <a href="http://en.wikipedia.org/wiki/Johannes_Gutenberg" target="_blank" title="Wikipedia">Wikipedia</a><br /> </div>

To see it better through look at the same code in a better structure:

<div style="text-align: justify;">

</div>

The whole line can be found in a div layer between <div></div> tags, like a paragraph.

The tag <div> has an attribute, „text-align”, and its value is „justify”.

This is a short line that is why it has got no sense in aligning it as justified although it is not a mistake but unnecessary.

We can modify the source code itself!

The easiest solution is to change the word "justify" to "left" and so you adjust the text to the left. The other solution is to delete this attribute to leave only the <div> tag without style="text-align: justify;".

So the source code changes as following:

<div>

</div>

The text between tags <a href></a> will become the link. It has an additional tag "title", its value is "Wikipedia". It appears when the mouse cursor is over the link.

You can let the tag „title” out, so the source code changes like this:

<div>

</div>

The tag <a> has a compulsory „href” attribute, because you can give after this the url. It will link to the site you give here.

Reference and additional help:

HTML Basic: http://www.w3schools.com/
Color Codes: http://www.computerhope.com/htmcolor.htm
Free HTML Tutorial: http://www.2createawebsite.com/build/html.html

HTML Tutorial