First HTML page

To get a feel for what it’s like to create for the web using BBEdit, let’s create a simple HTML page.

Launch BBEdit, or if it is already open, bring it to the front so it is the active application.

Now from within BBEdit, create a new text document.

New text document

BBEdit will open a new empty window, ready for you to start typing.

Valid HTML pages have certain elements. Each must start out with a document type declaration, for example. HTML pages also have certain sections. Typically, all of your code after the document type declaration will be contained within <html> … </html> tags.

Code at the start of the HTML page will be contained within <head> … </head> tags. The only element from the <head> section that should appear in the browser window is the contents of the <title> … </title> tag.

The contents of the HTML page will be contained within <body> … </body> tags.

You can either type in (or copy and paste) the code shown in Basic HTML Page.

Basic HTML Page 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
  <title>BBEdit rocks!</title>
</head>
<body>
My first HTML page in BBEdit.
</body>
</html>

The first thing you may notice is that BBEdit colors your code for easier reading. Shown is the BBEdit Lite Color Scheme. BBEdit comes with eight built-in Color Schemes, and you can even define your very own personal Color Scheme, by selection whatever background and text colors your little heart desires (as if you could ever improve on the Ponies Color Scheme!).

When you are done, save your document: File ⇒ Save

BBEdit will suggest a filename such as untitled text.txt Note that untitled text is highlighted, and if this was a plain text document, you could simply type the filename you want and hit RETURN or click Save. However, HTML documents need a different filename extension, so instead of .txt, use .html. When done correctly, you will wind up with something along the lines of basic.html as your filename.

You want want to check out your handiwork in a browser (which is, after all, the point of this entire exercise), you have several options. You can:

  1. Locate the file in the Finder and double-click it, which will open it in your default browser.
  2. Locate the file in the Finder and drag-and-drop it on the icon of the browser in which you wish to view it.
  3. Option-click on the file in the Finder to bring up the contextual menu, and then select your preferred browser through the Open With menu item.
  4. Use the Preview in Safari menu item in BBEdit’ Markup menu to have BBEdit show you how your document will appear in Safari.
  5. Set up your own local preview server (see Projects).
  6. Use the Preview in BBEdit menu item in BBEdit’ Markup menu to have BBEdit open a new window that executes your HTML code as a browser might.
    preview HTML in BBEdit

This last option is different from the others in one important way: As you make changes to your document, BBEdit updates the preview window, so you have near-instantaneous feedback on your changes.

Try it right now: In your code window, place your cursor at the end of the sentence My first HTML page in BBEdit., and type The power to create is now mine. You will see that your preview window updates within a moment or two … or immediately if you re-save your document. Even links that you will be creating in your documents will be active, although clicking them opens the linked file in your browser, not in the preview window.

Aside from BBEdit’s live preview, let’s be honest: That was both tedious and painful. Can you imagine creating a multi-page website this way? If so, you have a lot more patience (and probably a better work ethic) than I do. If not, there’s no need to throw in the towel and call Web.com to take over. Let’s tap into some of the power of BBEdit to make this process a lot quicker and easier.

Now check out the BBEdit way of creating an HTML page.