Building a website. HTML. Code. These concepts sound pretty intimidating to even the moderately tech-savvy singer. All those little abbreviations in pointy brackets can be dizzying at first glance. But I’m here to tell you that HTML tagging is not actually that hard. The information is free. The software is free. And there’s more everyday common sense involved than you’d think. You—yes, you—can actually make your own website. It won’t be as fancy as a professional one, assuming you’re a novice, but you can get your pictures, résumé, sound clips, and videos online in a matter of hours, with colored backgrounds, links, fonts, and all the fun stuff.
Why Bother?
Why would you build your own website? Well, to save money, for starters. Other reasons include to develop a prototype, so by the time you hire a professional you have a better idea of what you want; to familiarize yourself with the code enough that you can make changes on your website without having to hire an IT consultant every time (or pay extra for a developer to make you a dashboard); to be able to manually make changes, even when you’re using a template; and to make yourself more employable for day jobs.
What Is HTML and Why Is It Easy?
HTML stands for “hypertext markup language.” It is a markup language that uses links, a.k.a. hypertext. A markup language is something editors use. If you were editing a document by hand, you’d use shorthand scribbles to indicate things like “new paragraph here” or “italicize this.” HTML is a standardized version of that for computers.
The other reason HTML is easy is that you can Google any question that comes up and find the answer. People who have these sorts of skills are people who use the Internet a lot. So there is no shortage of instructions, tutorials, and Q&A out there, with most of it free.
The Software
Notepad/TextEdit
If you’re a PC user, you can use your computer’s built-in plain text editor, Notepad. You just have to make sure to save your files as .html instead of as .txt. This is the simplest tool you can use—no frills, no help from the software. This is how I taught myself HTML back in 2002 when it was the only option. Considering that the slightly fancier tools today are free, I don’t know why you wouldn’t just download one of them, but if you like to do things the hard way, Notepad is for you!
Mac users have a slightly different situation. They have TextEdit, which defaults to Rich Text Format. It’s “rich” because you can do stuff like bold the text and change the font. Plain text, which we want for website design, is just plain. You can’t do anything to it. We want all the formatting to be displayed when we open the file in a Web browser, not while we are working on it. Fortunately, it’s easy to change TextEdit to use plain text. Just go to Preferences, and under Format select Plain Text. Then open a new document and you should be good to go. As with Notepad, you must remember to save your file as .html, not .txt (or .rtf, which is the default “rich text file”).
Notepad ++/TextWrangler
Just for PCs, Notepad++ is what it sounds like: a fancier alternative to Notepad. It has features like collapsible sections (Want to skip over those 46 lines of code that make up one table you’re not working on right now? Just collapse the section and it shrinks down to one line), highlighting paired tags (if you click on the opening paragraph tag, it shows you where the closing paragraph tag is), and auto-completing.
It’s got a lot more features than you will ever need just to build a simple website, so it can be a little overwhelming. I recommend using it just for simple stuff, ignoring the bells and whistles, and figuring out what the colors and highlighting and symbols mean as you go along. One important note: Notepad++ can edit a lot of different kinds of coding documents, so the features won’t work until it knows what kind of document it’s looking at. None of the fancy colors will appear until you save your document as .html (or .css in a few cases, but we’ll get to that another month).
Download Notepad++ from www.notepad-plus-plus.org.
Where PC users have Notepad++, Mac users have TextWrangler. It basically does the same things Notepad++ does and has far more than you will need, although I find it a little less “overbuilt” than Notepad++.
Download TextWrangler from www.barebones.com/products/textwrangler.
Dreamweaver
Adobe Dreamweaver is wonderful. It’s also $400. You don’t need it. But it’s really hard to design a nice-looking website without Photoshop or something similar, so if you were thinking of getting a bundle of programs, consider it. There are deep discounts for students and teachers. Dreamweaver does a lot of things for you, making the process much easier.
Download the rest of this article in PDF version of this article HERE.
