Learn the Code (But Only What You Must)
Don’t skip this step.
We know. When you see words like “code,” mysterious acronyms like “HTML” or phrases like “Hypertext Markup Language,” your brain starts to buzz, little red warning flags start to wave and you turn away saying, “Yeeee … not interested.”
It’s a natural reaction if you’re poking into new territory. But you’ll be surprised how easy it is to sort out and understand high-tech alphabet soup with a little plain talk and clear explanation.
Even if you’ve decided to let a pro take over your business Web site design, you’ll have more control over the look, content and function of your site with a basic knowledge of HTML.
In this step, we’ll look at HTML basics in three parts:
- What is Hypertext Markup Language?
- How Does It Work?
- Understanding HTML Tools
What is Hypertext Markup Language?
Yes, it’s a new language to learn. But HTML has been the basic framework of all Web design for as long as it’s existed, largely because it’s easy to understand.
It’s just words. Plain text, common words mixed with some special but simple “punctuation” marks.
You may be surprised to learn that every Web page, no matter how many slick tricks and graphics it has, is built on nothing but text. It’s like that old wizard behind the curtain: You don’t see him – unless you know where to look.
Go to a Web page you like and right-click your mouse on an empty space. When a menu appears, look for “View Source” or “View Page Source” and left-click it.
A new screen appears, filled with plain English text and familiar punctuation marks – but arranged in a different way. (If it’s one long unbroken block of gobbledygook, pick another page. Whoever wrote the code didn’t bother to break the text into lines and sections for easy reading.)
This is HTML and it controls everything on that page – every sentence, every graphic, every link and form, every sound, all of it. Your Web browser reads this text and translates it into the visual, functional Web page.
It’s as user-friendly as code gets, and you don’t need anything more than a word processor or simple text editor – like Notepad – to write or manipulate it. And it works on any kind of computer with any operating system.
Even if you’ve decided to let a pro design your business website, knowing the basics of HTML will help you understand how it works.
Hypertext Markup Language, or HTML, has been the basic framework of all Web design for as long as it’s existed, mainly because it’s easy to understand. It’s just words – common words mixed with some special but simple “punctuation” marks. No matter how many slick tricks and graphics a website has, it’s built on nothing but text.
Want to see? Go to a Web page you like and right-click on an empty space. When a menu appears, look for “View Source” or “View Page Source” and left-click it. That long page of mysterious-looking type controls everything about the site, how it looks and how it works. Learning basic HTML will allow you to customize your own pages and expand the limits of any DIY website-building packages.
How Does It Work?
Text alone is just a collection of words. Once strung together in a sentence or paragraph, punctuation makes them understandable and gives them meaning.
In HTML, the punctuation marks are called “tags.” Here’s a simple example:
Say you want to add the line, “Is HTML really so easy?” as its own paragraph on your Web page. In Hypertext Markup Language, it looks like this:
<p>Is HTML really so easy?</p>
To give emphasis to a word using italics – “Is HTML really so easy?” – add another pair of tags:
<p>Is HTML <em>really</em> so easy?</p>
Now, to put the same word in boldface, add another pair of tags:
<p>Is HTML <em><strong>really</strong></em>so easy?</p>
When a Web browser reads that code, this will appear on your page:
Is HTML really so easy?
You’ll notice that for every tag, like <p> for the start of a paragraph, there is also a closing tag – in this case </p>, for end of paragraph – that includes the slash mark /. The italics tag <em> means “emphasis,” and <strong> means boldface. (Old school HTML uses <i> for italics and <b> for boldface, but working with the newer tags will prepare you for using CSS – or Cascading Style Sheets – for even more flexibility and functions).
Of course there’s much more to this language than three pairs of tags – far too much to cover here. But if you want to keep going, these are great places to start:
Understanding HTML Tools
As we mentioned earlier, you really don’t need any special software or programs to work with HTML. Plenty of Web designers use nothing more than Microsoft Word, even old Corel WordPerfect, to create HTML content.
Let’s decipher one more techie acronym here in case you run across it:
ASCII – say “ask-ee” – stands for American Standard Code for Information Interchange, the most common standard for handling text on computers. ASCII documents are basically text files, easily viewed and managed.
Because HTML works with any operating system – Windows, Mac, Linux – saving your HTML files in ASCII text format is the easiest and most effective way to go. In MS Word, just choose “Simple Text,” “Text” or “Text Only” when it’s time to close and save your file.
Text editors are simpler than word processing programs, but cover your same needs for writing HTML. On PCs running the Windows operating system (or OS), you’ll find Notepad or WordPad built into all but the oldest versions; on Macs, it’s SimpleText.
There’s a big advantage, however, to getting an inexpensive program like the CoffeeCup HTML Editor, because it lets you easily switch between a text screen and a visual editor so you can see how your HTML looks on a Web page.
Hope we’ve taken the mystery out of this universal code.
It’s a language anybody can learn, there’s no secret handshake to join the worldwide society that uses it, and “speaking” even a little will give you more power over your new business Web site.
Maybe more than the competition.