Building a website (from the beginning)

Building a website (from the beginning) web journalism

Ready to put in the work? | Photo: Flickr user pasukaru76


So you’re a newly minted digital journalist. What does that mean, you’ve got a Twitter account? Nice work, champ, but you should probably get to know a few basics along the way — specifically, along the way to creating your own website or maintaining your organization’s site.

Get your domain

This is the step everybody always wants to skip to. No, no, I wouldn’t worry about knowing what you’ll put on your website or how you’ll do it — of course not! Just get the name and worry about the rest later.

Well, fine. Here we are. Use your byline for your domain name unless that’s unavailable. Pick a host. Here’s why I recommend DreamHost.

I do think that every working journalist should understand how HTML works and know, by memory, the most basic tags. So here’s the quickest description I can give you. If you already understand how HTML works, skip on down to the links I provide to site-building guides.

How HTML works

If you’re updating your organization’s website, you’re probably using a content management system (CMS) that allows you to edit in two different ways. One way is very much like editing a Word document, with a little button that bolds text for you and a little button that italicizes it and so on. This is called a WYSIWYG (what you see is what you get) editor. The other way is straight HTML and it probably shows up with a bunch of <p> and <br> and <a href=”yaketyyak”>don’ttalkback</a> type of stuff, right?

Building a website (from the beginning) web journalism

Understanding HTML is like knowing how to read blueprints. | Photo: Flickr user pasukaru76

The key to a more zenlike experience with your content management system is to be able to switch out of your WYSIWYG editor and into your HTML editor and be comfortable there.

Most HTML tags work in pairs. One is an “open” tag and the other one is a “close” tag.

Bold and italic

The simplest example I can give is how to bold some text. So here we go. The tag for bold is <strong>. So to bold some text, I’d type one <strong> tag, then the text I want to bold, and then </strong> tag. Note the “/” in the closing tag. That’s what tells your browser that bold time is over.

So: <strong>Alec Guinness</strong> would give you this: Alec Guinness.

The same goes for the italics tags, which are <em> and </em>.

So: <em>Obi-Wan</em> would give you this: Obi-Wan.

Links

The next such pair you should get to know are <a> and </a>. With these, you can make a link. They’re a little different from the <strong> and </strong> combo because you have to give them a little more information — like tell them not only which text should be a link, but where that link should send someone.

There are a lot of tags like this, so pay attention:

<a href=”http://google.com”>A well known search engine</a>. = A well known search engine

<a href=”http://google.com”> is the first part. Here, you have opened your tag and told the link where to point. That “href” business? It’s old-time geekspeak for “where d’you wanna go?” So you just put in the web address (URL, which some people actually pronounce “Earl” — I swear I have heard this, but I wouldn’t recommend it unless you’re feeling really cocksure) right after “href=”

In this case, you can see that I have told the link to point to “http://google.com” and then I have closed the first tag with a >.

Next, I have written the words that I would like to be linked to Google. In this case, “A well known search engine” are those words. You’ll notice that now it’s kinda acting like the bold and italics tags — the stuff in the middle does what the stuff in the tags tell it to do. And then, of course, I have closed the link with the </a> tag.

So now you understand the most basic tags and how they work. This will take you a long way in figuring out how to do other things and, importantly, how to fix a page when something is broken. Very commonly, errors are caused by not closing a tag. For example if you were to start to build a link but not close it with the </a> tag, all of the text in the rest of your document would be linked. You’d look at your code and see that you forgot a </a> and you’d throw it in there, pat yourself on the back  and open a beer, wouldn’t you?

Yes. You would.

Got some time? Need more knowledge?

I don’t plan to write a whole book on HTML, but I can certainly direct you to a trusted source that put together five tutorials on building a website.

Theme it: What kind of site are you building?

Is this a blog? A portfolio site? A landing page?

For all of these, I recommend WordPress. Here’s why: It’s free, there’s documentation for it all over the web, it’s massively customizable, easy to understand and once you know how to use it, you can put it on your resume, where it’ll mean something.

You could also use Tumblr. It’s also free, there’s a built-in social aspect to it and if your needs are relatively simple, I find it’s easier to make Tumblr look really clean and sharp and stay that way than it is with WordPress.

For now, I will assume you’ve picked WordPress.

Building a website (from the beginning) web journalism

WordPress is delightfully scalable. You'll thank yourself later. | Photo: Flickr user pasukaru76

Install it on your site — hopefully with a one-click install. How do you know if you can use a one-click install? That depends on your web host. If you don’t know, call your web host’s customer service line and ask if they offer a one-click or other easy install of WordPress and how to find it. If they don’t offer that, you’re about to learn more about the web and FTP than you probably wanted to, but extra homework just means extra knowledge. You can do it: WordPress Codex: Installing WordPress.

Once it’s set up, you’ll want to shop for a WordPress theme that fits your needs. For example, I’d use this for a landing page-style site, perhaps one of these for a visual portfolio and this is the one I use for the blog you’re looking at right now.

Some useful resources:

If you can’t find what you need, just Google it. I promise it’s out there.

You’re gonna need some images

As you’ve seen on my site, I lean on Creative Commons-licensed photos from Flickr. But I also shoot photos with my Android phone and want to include them from time to time. I’m a big believer in paying for intellectual property — what a sucker, right? — so the last copy I’ve got of Photoshop is on a laptop that I don’t use much. When I want to bang out some simple images — maybe crop or resize something, touch up the colors — I’ll use one of two free web services.

Both of these allow you to edit images right in the browser window.

Pixlr has a feel kind of like a really old version of Photoshop, complete with filters and a few other things. If you’re an old-line Photoshop user, go here to edit your images.

Picnik is a lot simpler for folks who aren’t familiar with Photoshop and have simple needs.

You’re gonna need some content

You’re on your own. Good luck.