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. In this step, we’ll look at HTML basics in three parts:
1. What is Hypertext Markup Language?
2. How Does It Work?
3. Understanding HTML Tools
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.
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.
Tips and tricks
- Let site visitors open a new browser window from a link: By adding a link on your Web site that opens another browser window, you can point your site visitors to other Web content without having them leave your Web site.
- Add maps and directions to your site: Want to make it easy for customers to find your business? Add a map or driving directions to your business or other location on your Web site using the Map & Directions module.
- Add a hit counter to your Web page: Hit counters keep a running total of the number of times that your page is viewed. They don’t distinguish between the number of times that you look at your page and when a customer looks at your page. However, they do give a visual clue about the pages most used pages on your site.
- Add a scrolling marquee to your Web page: Use scrolling marquees to highlight new products, post breaking news about an award that your company received, or let customers know that a special offer is about to end.
- Add a slide show to your site: Use a slide show to emphasize new products, to highlight products on sale, or even to display products that your customers might not usually find. You can create your own slide show with our tool or leverage your photos that you may already have on Flickr.
- Add a PayPal Button: You can insert simple HTML code to display PayPal “BuyNow” buttons directly into our Web pages. To offer credit card or direct PayPal payments, you must sign up for PayPal Express.
- Add an embedded video player to your site: You can embed one of several different video players in your Web page including Mydeo, YouTube, or Google video.
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:
•Jukka Korpela’s HTML Primer
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 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 Microsoft 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 or Vista 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.