You can edit HTML when you have pressed the Source button in the toolbar.

Colours help you to find your way around the code more easily. Colours shown do not represent the colour of your work when shown to a user of your app.

Copy, paste, undo, redo & find

You need to learn to use your keyboard to Copy, Paste, Undo and Redo

Windows PC Keyboard        Mac Keyboard
CTRL C = Copy    Command C = Copy
CTRL V = PasteCommand V = Paste
CTRL X = CutCommand X = Cut    
CTRL Z = UndoCommand Z = Undo    
CTRL SHIFT Z = RedoCommand SHIFT = Redo
CTRL F = FindCommand F = Find


Below you can see the basic toolbar for the editor displayed above the code area.

Most of it is greyed out because these buttons are for working in WYSIWYG ('What you see is what you get') mode.

Search & Autocomplete

Search helps you find tags and other code in your editor quickly.

Autocomplete can be turned on or off.  If you're learning about open and closed tags, the teacher may not want you to enable this feature so that you can see the effect of tags being used correctly.

Format Selection

When code is formatted correctly it helps you to find your way around it more logically including when you need to find where there's a mistake in your code.

To format your code select it all (CTRL A or Command A on your keyboard) then click the Format Selection button.

Comment Selection

This is an easy and instant way to stop some code from being read by the Writer Widget.

It's a great way to just put code to one side and come back to it later to work on.

It's also very useful for writing notes in your code without them showing when your app runs.

For example

Note the <!-- and --> at the start end end of the code which is now hidden.