

Now put the cursor on the blank line between the body tags in your code window, and type:Ĭhoose Markup ⇒ Preview in BBEdit to admire your work so far. html filename extension.Īs before, BBEdit applies different colors to tags, attribute names, attributes, etc., so you can easily differentiate among page elements at a glance. txt filename extension, BBEdit has already filled in the. By the way, when you save your document, you will notice that instead of the. Whereas before you started with a blank document and added this code yourself, BBEdit gets you started on the right foot with the skeleton of a valid HTML document.Īll you have to do is add your content and save.


Note that BBEdit created a basic HTML document for you, containing the bare bones of a valid HTML page. Don’t worry about the Base, Meta, Link, or Page template options for now. Leave the Language as English ( en) unless your page content is in a different language, and the Charset (character set) as utf-8. Try it now by typing BBEdit rocks! in the Title field. It is not mandatory, but it is really, really handy, and is therefore highly recommended. The Title is the text that appears in the browser’s title bar. The HTML5 document type is the latest (and best, IMHO), but BBEdit allows you to choose other legacy document types (or no document type) if you are working on a project where you need to match the existing code base. Instead of popping open a new blank window, BBEdit presents a dialog box with a few choices. Instead of starting with a blank text document, BBEdit can create our basic HTML page so we can get right to work. If you have never created an HTML page before, here is a quick tutorial. You can thank me later, or just send me $500. Your life is already better, and you have barely started using BBEdit.

Now BBEdit will be available to you at all times. Move the cursor up to Options, and note that in the fly-out menu there is the option to Keep in Dock. Once BBEdit is running and the icon is visible in the Dock, hold down the Control key and click on the BBEdit Dock icon. The icon should bounce in the Dock until BBEdit is loaded and ready to go. Locate it on your hard drive, and double-click the icon to launch BBEdit. So you have purchased a copy of BBEdit or have the free trial version.
