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. View
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 in the
<title> … </title> tags.
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.
<!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 applies 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
.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:
Open Withmenu item.
Preview in Safarimenu item in BBEdit’
Markupmenu to have BBEdit show you how your document will appear in Safari.
Preview in BBEditmenu item in BBEdit’
Markupmenu to have BBEdit open a new window that executes your HTML code as a browser might. View
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.