Coding HTML in TextEdit

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

” I tried opening files the book told me to, but they didn’t open in code, they just opened in regular text. Is that normal? Or am I doing something wrong?”

HTML code is created with plain text and therefore needs an editor that can work with plain text. 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. Unicode and 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).

TextEdit

There are several settings to adjust before you are ready to use TextEdit as a plain text editor:

1. Set it to work in Plain Text Mode
2. Open and Save the document so that you can read HTML code and not have the app interpret those codes and display them as RTF.
3. Turn off Smart Quotes

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 Display HTML files as HTML code instead of formatted text 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

Smart Quotes

Smart Quotes will break your code. Using Smart Quotes will not allow your files to validate since a “smart” quote is not the same character code as a simple ascii character.  Smart quotes show on the screen at angle, versus regular quotes that are more vertical. The browser (and validator) is looking for plain text character codes. Neither of those applications knows what to do with a smart quote. If you look at your code and everything looks OK, but the code is rendering in the browser correctly, validate the code. If you have smart quotes, the browser will tell you it has found a character that it does not recognize. I have found that this almost always means there is a smart quote issue. The validator will tell you which line the problem is on.

Solution? Make sure you that you have turned off smart quotes in TextEdit  preferences (on the New Document tab). Remember that changing settings not affect the open window. You have to close out any open windows and open them again to change the settings. After ensuring that your smart quotes are off, you should be able to open the offending files, change the smart (angled) quotes to plain text quotes (straight quotes). Validate the file again, to see if the error has disappeared. If it has, open the file in the browser and see if the page renders correctly.

Saving

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.

Line Numbers

While TextEdit does not display line codes, you can still find out what line your code is on. You use Ctrl L to accomplish that. For example, say you run your code through the w3.org validator and you get an error report. “Line 13, error etc”. Go back to your code in Text Edit. Hold down the Command key and press L at the same time. An input box titled “Select Line” pops up. Enter “13” or whatever the line number with an error is, press select and voila! The requested line is highlighted. No need to hand count each line to find the error.

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

Save