The Easy Way to Write Web Content
It turns out that writing HTML isn’t everyone’s favorite way to spend their day.
If you’re a minor geek, surely you already know a bit of HTML. You might already have your chosen text editor and a process for writing HTML content and uploading it. Yet you probably suspect there’s a more efficient way.
If you’re not at all a geek, though, all of that might seem very intimidating. You might know what HTML does (tells a browser how to display content) and want to be able to create online content. Yet you may have no idea how to do it—and you don’t want to spend a fortune on web design software that does the work for you.
Well, if you have a Mac, $4, and a bit of time, I have a solution for you, whether you’re a minor geek looking for an easier way or a total rookie looking to get started.
The Magic: Markdown
Thankfully, there’s a much easier language to learn for formatting content. The system is called Markdown.
It’s a whole lot easier to write and to read than HTML. For instance, if you want to emphasize a word (because it’s really important—or even really, really important or super-duper important), here’s how you’d do it in HTML:
<em>really important</em>
or
<strong>really really important</strong>
or
<strong><em>super-duper important</em></strong>
That’s a lot of symbols to type and codes to remember, especially if you’re not a seasoned user of computer jargon. You might wind up asking, “Which is more emphasized—the ”em“ tag or the ”strong“ tag? And what if I make a typo, such as forgetting the slash?”
Wouldn’t it be simpler if we could use something more intuitive? Markdown allows you to use really simple, intuitive codes to mark up your content.
For instance, here are the indicators of emphasis: single, double, and triple asterisks, before and after the words you’re emphasizing. That’s it. Thus, when deciding how much to emphasize a word, you just need to decide whether to use one, two, or three asterisks:
*really important*
**really, really important**
***super-duper important***
Now that’s much easier to remember, easier to write, and easier to read.
All of the rest of the most common things you’ll do with HTML are also much easier with Markdown. I won’t go through the whole dictionary, of course. See the Daring Fireball guide to Markdown syntax for the whole guide. The Wikipedia article on Markdown is also very helpful.
What I will do, though, is tell you how you can be using this super-easy language with a super-easy workflow. I call it:
Using Markdown on the Mac: The Easy Way
To use Markdown, you need three things:
- A good text editor (not Word or TextEdit)
- A way to translate Markdown text to HTML
- A place to publish your content
I’m assuming you already have a place to publish your content. (See the P.S. at the end if not.) But if you’re still using the web interface for WordPress or Blogger to write your blog posts, stop. If you’re using a clunky web interface for your “easy” web page, stop. You’re wasting time, and you might lose your whole draft if you get disconnected.
Do this instead.
First, get a good text editor:
There are a lot of text editors on Mac, but I personally recommend TextWrangler. It costs nothing. It’s also super easy to use. (It can also do a lot of advanced things, too, but don’t let that stop you from using it in its super-easy glory.)
Anyway, open TextWrangler, save the file as filename.markdown (or hermanstinks.markdown or whatever), and start writing your content using Markdown syntax. TextWrangler automatically starts doing super helpful things like highlighting your syntax in all sorts of pretty colors.
Next, get a system for translating Markdown to HTML
Now you can’t just past Markdown text anywhere on the web and expect it to look good. You need a tool that translates Markdown into HTML. I discovered Markdown many moons ago but never got into it because I didn’t see an easy answer for this step.
<HTML joke>
<non-easy ways to implement Markdown; you can skip this part>
As with all things computer-related, there are some decidedly non-easy ways to do this. You could follow the instructions on the Daring Fireball site, but when you get to “Markdown requires Perl 5.6.0 or later,” you may well be horrified.
In a slightly-easier-but-still-not-easy solution, you can also install a Markdown filter directly into TextWrangler. This makes a one-time translation from Markdown to HTML. If you then save it, you’d then have to make any edits in HTML, not Markup, which defeats the whole point. Alternately, you could “Save As” and create a second file, filename.html, but now you have two files to manage instead of one.
Either way, you’ll have to save it as an HTML file before it will render in a browser. Now, if you want to make changes in the Markdown file, you’ll have to convert it to HTML, then open the file in your browser/refresh the browser window to see the changes. Combined with keeping track of a .html file and a .markdown file, that’s a real pain.
</non-easy ways to implement Markdown; you can skip this part>
</HTML joke>
Since those are all members of the <Car Talk joke>Pain-Diaz family</Car Talk joke>, I think the easy solution is an absolute steal at $4.
It’s called Marked.
You just have to open your filename.markdown file in TextWrangler and open it again with Marked. The default view for Marked is a live preview of how the content would look as a webpage.
Every time you make even the tiniest change in your file in TextWrangler and save it, those changes show up in your Marked window. Here’s what a typical workflow might look like:
(Click on the image to open the larger version.) I have the TextWrangler window on the right and the Markdown window on the left. With just a 13" monitor, I have plenty of space to view both windows, which means I can make changes and see them instantly.
I choose to leave just enough space around the margins of the Marked window that I can see my browser—which makes it easy to visit the page on Markdown Syntax if I need to look something up right quick.
Once you’re ready to publish your content on the web, Marked makes it ridiculously easy to get the properly-formatted HTML. If you need an HTML-formatted file to upload to a webpage (e.g., if you’re creating your new home page), Marked can save a new file as HTML. Do this from the “File” menu or with the Command-S hotkey (the universal “Save” hotkey; brilliant!).
Alternately, you can copy and paste the HTML code. This is handy if you’re posting your content into a web interface (e.g., if you’re posting it on Blogger or WordPress). You don’t even need to save a new file. You can just click on the button in the bottom-center of the Marked window that says “HTML” and there’s your page, in all its properly-formatted-HTML glory.
Copy, paste, preview, publish. It’s that easy. It’s also (IMO, of course) a LOT easier and more efficient than using the web interfaces for WordPress and Blogger, and it gives you the tools to design your own web page later. Obviously, it’s designed to make things simple, so it would only make a simple web page—but even if you’re already doing high-powered web magic, this could reduce the time you spend doing basic things in HTML.
I hope this has been informative and useful. I have no relationship with the folks who wrote Marked. I just saw it in the App Store, looked into what it did, and got so excited that I had to try it right away. That’s the mark of good software—especially at $4!
Edit 2:58 pm: I forgot to mention that, if Markdown can’t do what you need, you can just use regular HTML in the middle, and it works just fine. That’s what I did for the image link to Flickr.
P.S. Looking for a place to publish your content?
You can start a blog at a free site such as Blogger. There are others, of course, but I find Blogger pretty easy to use, and once you have HTML-formatted posts, pasting them into the browser works every time.
If you want to create your own home page, you need to look for a good web host—an online place to put your page. You can just Google “web host” to see the billions of choices. Many even offer a free tier of service (though you’ll have to pay to register your own URL), and even the entry-level packages from most hosts are pretty cheap—mostly $5 to $10 per month.
I’d recommend you not commit to an annual contract until you’ve tried a service and know that they provide the service and level of tech support you need. Many hosting packages include a free domain name registration as well, worth roughly $12/year. Whoopee!
Alternately, you can contact your ISP and have them help you get set up with the space to host a personal web page. This is usually included as part of your monthly fee for broadband service. You may have to actively contact them to have them create a web hosting space for you.
If you go the free-via-ISP route, don’t expect to be able to use this space with a custom web address; it will be more like home.roadrunner.com/bherman. This isn’t ideal, but it’s better than having no home page at all. It’s also a fine place to start if you don’t want to bother sifting through the literally endless choices of independent web hosts.
No comments:
Post a Comment