Creating Web Pages with Apple's TextEdit

With the latest version of OS-X, the Macintosh operating system, Apple has added new Web-building features to an old friend. TextEdit is the successor to "TeachText," the original plain and simple Macintosh text editor that you may have used on an older Mac. TeachText created thousands of Web pages before fancy Web editors like Dreamweaver and GoLive came along.

Anyone could write HTML code with TeachText. It only wrote "plain text" files -- and that's what HTML documents are. The new TextEdit still can write plain text, but it also can write Rich Text Format and Word files. It also can convert the Rich Text features like bold or italic type to HTML codes for you, to save a document "as" an HTML Web page. (More on that later.)

We will use TextEdit to write "raw" HTML code. You also can learn about HTML by making simple pages with TextEdit in RichText mode, saving the files as HTML, then inspecting the code it generates. (Trying to do the same thing with Word would be somewhere between "confusing" and "impossible.")

Running TextEdit

Your first goal is to learn how to write simple HTML code that you can read and modify easily. To start with a clean slate, take TextEdit out of "Rich Text" mode and put it in "plain text" mode to write HTML code the old-fashioned way.

(To find TextEdit on some Macs, you may have to open the Applications folder and scan through the filenames, or use Spotlight, the blue icon in the top right corner of the screen.)

To make TextEdit always open HTML documents in code-editing mode:

  1. Launch TextEdit. You should see a blank document with a ruler at the top.
  2. Choose TextEdit > Preferences.
  3. Under "New Document" and "Format," click "Plain text."
  4. Under "Open and Save," at "When opening a file," select "Ignore rich text commands in HTML files."
  5. That setting should remain each time you run the program on your Mac. If you use a different Mac, you'll have to change it again.
  6. Choose "File," "New" and you should get a new blank document -- but with no ruler. That indicates you're in plain text (or HTML) mode.

Writing an HTML file with TextEdit

  1. Start a new document
  2. If you can see the ruler bar at the top of the screen, you are in RTF mode. That means the "Ignore rich text" setting still needs to be changed, as described above. [But if you're borrowing a friend's Mac, you can change it temporarily for this blank document: Use the top menu to change FORMAT to PLAIN TEXT.]
  3. Save the file on the desktop. Give it a short name ending in ".html" (for now, "hello.html" is good).
  4. File names in HTML:
    • Use all lower case letters.
    • Don't use spaces or punctuation marks, except for the period before the "html" filename extension.
    • Do NOT let TextEdit append ".txt" to the file name.
    • (Some programs create HTML files with a filename extension of ".htm"; that's still legal, but it's confusing to mix the two endings on your website. Stick with .html for all files and add the "l" if a program tries to use the short version.
    • If you need to break up the name to make it clearer, use the hyphen - or underscore _ , rather than spaces or upper case.
    • After you save and name the file, you can hold down the Apple/Cloverleaf key (sometimes called "Command" or Cmd) and press the letter "S" to save changes at any time.
    • Type these codes <html><head></head><body>Hello world!</body></html>
    • Save the file. You have now made a Web page the old fashioned way!
    • Arrange your workspace: With a wide monitor, keep your TextEdit document open on one side of the screen. Open Firefox so that it fills the other side of the screen, but keep enough of the desktop visible to see the HTML file you just saved.
    • Drag the HTML file into the Firefox window, and adjust the placement of the TextEdit and Firefox windows so that they don't overlap.
    • Now, whenever you make an editing change, you just have to hit Cmd-S to save in TextEdit, then click your mouse on the FireFox display and click the Reload (blue circular arrows) button or hit Cmd-R to reload the revised page
    • Edit your HTML code, putting line breaks after each HTML code with the Return key. That should make it easier to read. Add a few more lines of text.
    • Save the page and Reload in FireFox. Notice that the line breaks have no effect on the page as shown in the browser.

Open an Existing Document

If you just click on the desktop icon for an HTML page, the page will usually open in a browser or a program like Dreamweaver. You can tell which by the page's icon. So how do you open it in TextEdit?

  1. Run TextEdit, if it's not already running.
  2. Choose File > Open, but don't go too fast... If you are using a borrowed computer, the next step is essential.
  3. If it is not already checked, select the "Ignore rich text commands" checkbox in the Open dialog window.
  4. Locate the document (name ending in .html or .htm) and click Open.

Other text editors...

There are many text editors... some for Macintoshes, some for PCs, and a few that work on both. Windows comes with "Notepad," which is like TextEdit. TextWrangler is available for free for Macs, and NoteTab is available free for Windows. Those two do a useful thing--they color-code your HTML, making it easier to tell tags from content. For writing HTML in class, you can switch to TextWrangler now... but keep this page (or its link) if you have a Mac at home or might use one in another lab. "Emacs" is a free editor that is available for PCs, Macs, Linux computers and almost any other computer, but it's so powerful that I don't recommend learning it for this class. If you already know it, feel free to use it.

The Alternative: Letting TextEdit Write the HTML for You

If you have just a simple page to make in a hurry, go ahead and write it with TextEdit in RichText mode (with the ruler bar visible on the page), then "save as" HTML.

Microsoft Word has the same ability to "save as" plain text or to "save as HTML." However, TextEdit appears to write simpler, cleaner HTML code than Word does. Click those two links and use "view page source" to compare the HTML pages. Both programs use "style sheets" in the head of the document to set margins and tabs. Most human-written pages use more simple positioning codes. TextEdit's creates a style section that is relatively simple, compared to Word's version. Not only is Word's XML/HTML hard for humans to read, Dreamweaver and other Web editors can have trouble with the more complicated Word-generated HTML.

Font Tips: Only use common fonts, including Times, Verdana, Arial, Helvetica and Comic Sans MS. After the page is on the Web, your reader's browser will only use fonts installed on that reader's computer. Those five fonts (and a few others) are safe bets, since they are shipped with every Apple, Windows machine, or copy of MS Word. When you save the document choose "Save as HTML," and TextEdit will create a version of the document with an HTML ending.

TextEdit lets you set preferences that affect how HTML files are saved when you use the "save as" technique. In class, we'll discuss the "CSS" mentioned below.

From its HELP file:

Choose TextEdit > Preferences and click "Open and Save."
Under "HTML saving options" choose a document type, a setting for cascading style sheets (CSS), and an encoding. If you aren't sure what to choose, keep the original settings.
Select "Preserve white space" if you want TextEdit to include code to preserve blank areas in your document.

For more, see TextEdit Help on its Help menu.