Posts Tagged ‘tutorial’

Coding HTML in TextEdit

Friday, January 16th, 2009

I received the following question from one of my online students…

“hi! I’m working on the html assignment for Unit A.  I’m trying to do the exercises on A-11, but I can’t seem to make it work. I’ve done it repeatedly, but when I try to open the document in my web browser it just keeps all of the tags, it’s not doing anything like Figure A-10.  It’s talking about a PC so I didn’t know if that had anything to do with it.  I’ve tried to open it on both Safari and Firefox and I can’t make it work.  Also, it says to save it under all file formats and manually put the .htm extension.  Textedit doesn’t allow me to do that.  It does, however, give me a choice to save it as the html format.   I feel like I’m having problems translating PC to Mac language. What am I doing wrong???”

This student is clearly working on the Mac platform. The native text editor on the Mac is TextEdit. Unlike its PC counterpart (Notepad), TextEdit has the capacity of interpreting, editing, and saving in several formats:

  • .txt (ASCII character set, or “plain text”)
  • .rtf (Rich Text Format. A platform independent wordprocessing format)
  • .htm (HTML format)

For the purposes of coding in HTML you want to work in plain text. This is why HTML documents are platform independent. ASCII characters are part of an open standard and are able to be written and read by all devices and platforms. An HTML document can be read by client programs regardless of whether you are on a PC or Mac, or are using any number of operating systems (proprietary or open source).

In TextEdit, you need to set some preferences to ensure you are opening, working, and saving a document in plain text mode. To do that follow the next few steps:

  1. Open TextEdit
  2. Go into preferences window [TextEdit > Preferences]
  3. At the top of the Preferences window > Select the New Document tab
  4. Under the Format Section > Select the Plain Text option
  5. Select the Open and Save tab at the top of the Preferences window
  6. In the “When Opening a File” Section > Select the “Ignore rich text commands in HTML files” option
  7. Close the Preferences window

Note: If you already have a document open, you will need to close that document and re-open it after having made the changes to the preferences settings. They will NOT apply to your open document

You should be set. Now you should be able to create your HTML code, save it with a .htm extension, and open it in TextEdit and see the code you previously entered with no problems. To see the HTML code rendered, open that same file in a web browser.

I hope this answered your question. If you have further question, send me an email and I’ll answer them. Let me know if you found this tutorial helpful