MultiEd's Icon

Tutorial
Editing HTML Files

This tutorial will show you how to use some of MultiEd's special features to simplify creating a html document.

Programmable tool buttons used: A Web button Web tool button for loading files into a browser. the Template button Template button and the HTML tools button HTML tools button .

  1. Open a new .html file and save in it an appropriate folder. There are two ways to do this:
    a. Click on the new button New file button and ask for a .html file. Then use the File menus "Save As" option to save it to an appropriate place with an appropriate name.
    or
    b. Click on the open button Open file button, select an appropriate folder, and type the desired file name (e.g. Test.html) Important: Be sure to include the file type (.html).
  2. Click the template button. Template tool button The open dialog has a list of templates that can be used for html. "template.html" is for generic html while the templates with version numbers meet the standards of the respective version of html. Select the desired template. MultiEd will write the basic structure of the .html for you.
    Select a template                 Result using template
    The result
    Selecting the template                
  3. Edited file
    (Optional) Click a tool button Web button for a browser. MultiEd will load the file into the browser. (If necessary, it will open the browser first.) Of course, the page will be blank because we only have the standard structure of the web page.
  4. Write some html between the <body> and </body> tags. (If you don't know html, you can just write some text like "MultiEd makes it easy to write WEB pages.")
  5. Click the browser tool button Web button. The page will be loaded into a browser. If you already have loaded the file into a browser, you may find it more convenient to click the Save button Save button in MultiEd and then click the "Refresh" or "Reload" button in the browser. This alternative will avoid opening a new tab in browsers that use tabs.
  6. After viewing the result in the browser, you decide that you would like to use some CSS to change the background color but you have forgotten the syntax for the style section. Because it belongs in the head section, put the cursor just left of </head> and click the "HTML tools button" HTML tools button. This brings up the HTML tools menu. The style tag is part of the head section, so click "Head menu" to bring up that menu. Then click "Style". MultiEd writes the <style ... > and </style> tags for you putting the cursor on the blank line between them. You can type the CSS code "    body {background-color: yellow}".
  7. Repeat step 5 to check the results.
  8. Repeat editing and viewing steps as needed to complete the page as desired.
Put cursor in the head tag

Hint: Many html tabs like <head> require a closing tag like </head>. MultiEd can help you find the matching tag in such pairs. Put the cursor in the text of one tag, click the "Find brace" tool button Find brace button and MultiEd will move the cursor to the matching tag. Click the button again and the cursor will move back to the matching tag.

Return to the beginning of this file         Return to the tutorial home page

Revised: 10/4/2011