HTML 101: Web Basics for Authors
If you're an author, you can't escape the Internet. Even if you work with a traditional print publisher, you have to worry about your web site, your blog, your MySpace and Facebook pages, your Yahoo groups, and so on, ad nauseum. Whether you like it or not, promotion has moved to cyberspace. You have to adapt or die.
So, you need to know something about the mechanics of disseminating information on the Internet. I'm not suggesting that you should be creating your web site by yourself, from scratch. That's a major effort. There are professionals to help with this task, not to mention lots of fancy tools. However, there are times when you need to do a little bit of web coding on your own. Your publisher is running a contest, and you have to add an image or a link to your website. You want to create an email signature. You want to do some quick and dirty modifications of your MySpace profile or add some fancy formatting to a blog entry.
Every author, in my opinion, needs to know at least of bit of HTML, just to survive. In this article, I'll introduce you to some basics of web coding and hopefully, help to demystify the amazing but remarkably simple World Wide Web.
How the Web Works
The Web is much less complicated than you might imagine. Basically, the World Wide Web depends on two types of software programs, plus two languages or protocols.
The first kind of software is a web server. In the most straightforward case, a web server runs on the computer where your web page content is located. If you use a web hosting company, the web server runs on that company's computers.
A web server receives requests from the second type of software, a web browser. Firefox, Safari, Opera and Internet Explorer are common examples of web browsers. A web browser runs on a user's computer and allows the user to get information from any web server that is connected to the Internet.
A web browser creates requests, which are sent to a web server. Which server? That depends on the URL (Universal Resource Locator) included in the request. The URL identifies not only the network address of the web server, but also what content on the web server is desired. For example, the URL http://www.lisabetsarai.com/news.html specifies that the server can be identified as www.lisabetsarai.com, and that the user wants content named news.html from this server.
The language used to make requests is called Hypertext Transfer Protocol (HTTP). You don't need to worry much about this language. However, it's remarkably simple. There are only half a dozen possible commands in the HTTP language.
When a web server receives an HTTP request, it tries to create a response. If the URL specifies a particular item of content that is stored on the web server computer (e.g. the file named news.html), the web server will read that file and send its content across the network, back to the web browser. Normally the retrieved content will be expressed in a language called Hypertext Markup Language or HTML
The main function of a web browser is to make requests, receive content expressed as HTML, and display that content in the web browser window. All Web browsers understand HTML and know how to follow its commands in order to display a nicely-formatted document. Thus, if you want to create your own content for your website, blog or social networking site, you need to know at least a little bit of HTML.
Just What the Heck is HTML, Anyway?
HTML is an example of what is called a "markup language". An HTML document includes the text or other information that you want to show on a web page, plus commands that tell the browser (in general terms) what to do with this content: how it should be displayed or what actions it should cause.
HTML markup commands are always enclosed in angle brackets (<>). For example, the markup command used to indicate the start of a paragraph is <p>.
Actually, most (but not all) HTML markup commands come in pairs. The first member of the pair indicates the start of some section to be treated in a particular way. The second member of the pair indicates the end of the section. For signalling a paragraph, the ending markup is </p>. In general, the ending command is the same as the starting command, with a forward slash after the opening angle bracket (the "less than" sign).
Some of the most common HTML commands are used simply to format text. For example, you can create section headings of various sizes using the markup <h1>...</h1>, <h2>...</h2>, and so on. The text of the heading replaces the .... The smaller the number, the larger the heading text. The subtitle of this section was coded in HTML as:
<h3>Just What the Heck is HTML, Anyway?</h3>
Here are some other common text formatting markup commands:
| Markup | Effect |
|---|---|
| <b>...</b> | Makes the enclosed text bold |
| <i>...</i> | Makes the enclosed text italic |
| <pre>...</pre> | Encloses text that should not be formatted or paragraph-wrapped. The text will appear exactly as typed. |
| <br> | Causes a line break. Note that this markup does not have a corresponding end command. |
| <hr> | Displays a horizontal rule (a dividing line, often displayed as raised) |
| <font size=+1>...</font> | Makes the enclosed text be displayed in a larger font than "normal" |
| <font color="red">...</font> | Makes the enclosed text be displayed in red. |
The last two examples show another wrinkle concerning HTML markup. Many HTML command can include attributes that modify their normal behavior or appearance. If I wanted my heading, above, to be centered, I could add the attribute align, as follows:
<h3 align="center">Just What the Heck is HTML, Anyway?</h3>
There are a few hundred HTML markup commands, but don't worry about learning them all. You can look them up when you need them. HTML markup commands are often called "tags". That's what I will call them from now on.
Just remember that whatever tags you include in your HTML document will be interpreted by the browser and used to format the content of the document. You need to recognize that different browsers may produce somewhat different-looking displays from the same HTML document. There are some commands that are not standardized, which will only work in some browsers. However, there is a standard definition of HTML; if you start to write a significant amount of HTML, you should probably get yourself a book that covers the standard.
Images and Links
Formatting text is obviously important. After all, we're writers - text is our primary tool. However, graphics and links are what make the Web so effective and attractive as a way to communicate.
Including a graphic image in a web page requires adding a single markup command, the <img> tag. This tag does not have a corresponding ending tag. Inside the tag, you must specify the src attribute to indicate what image should be displayed. For example, the HTML that I used to display the web architecture image above is as follows:
<img src="./WebArch1.jpg" align="left" hspace="5" border="1" alt="Basic Web Architecture">
Most web browsers can display JPEG or GIF images. Some browsers can display other formats. The question of how to prepare your images for the web is beyond the scope of this article. Remember, though, that a typical computer screen and browser window may be as small as 1024 dots across (even smaller for PDAs and other special devices). You will often need to reduce the resolution of your images so that they will fit on the screen.
The <img> tag provides width and height attributes that will tell the browser to resize the image. However, the visual quality of the result is often poor.
There are many attributes that can be used with <img>. The ones that I used above define the location of the image in the browser window, allow the text of the article to wrap, and create a border around the image. The alt attribute defines a text string that will be displayed if the image cannot be found or if a user accesses the web page with a text-only browser.
What about links? Anyone who uses the web knows what a link (more correctly, a "hyperlink") is: some text that you click on, which will cause the browser to take you to a different location. The new location (called the "link target") can be a page on a different web site, another page on the current site, or even a different location on the same page.
So, to create a link, the first thing that you need to know is the URL of the page that should be displayed when someone clicks the link. There is a short cut method for specifying pages within the same site, but you can always use the full URL (see above).
Once you know the URL, you must decide what the text of the link should say. What text will the user click on? For example, if I have a link to my latest newsletter, "my latest newsletter" is the link text.
The tag to create a link is called the anchor tag, and is written as <a>. This tag has a required attribute, href, which indicates the target URL. The anchor tag also has an ending tag, </a>. In between the begin anchor and end anchor tags, you put the link text.
So, putting this all together, the code for the newsletter link above is:
<a href="http://www.lisabetsarai.com/news.html">my latest newsletter</a>
What about combining a hyperlink and an image? How do you do that?
It's easy! Instead of putting link text between the begin anchor and
end anchor, you put the appropriate img tag. So to create a
link like this:
you use the following HTML code:
<a href="http://www.eternalpress.biz/book.php?isbn=9781897559246"> <img src="RubysRules100x138.jpg" border="5" hspace="10" vspace="10"> </a>
This example demonstrates a very important feature of HTML. You will often need to nest one set of tags inside another. When you do, it is essential that the ending tags occur in the opposite order from the beginning tags, that is, that the inner markup is completely enclosed by the outer markup. If, for example, you want to make some text be both bold and italic, you could do so as follows:
<b><i>Some Text</i></b>Note that you must end the italic before the bolding. If you put the ending tags in the wrong order, you may get some strange results. Some browsers might not even be able to display your page.
What's Next?
I think that I'll stop here. I don't want to overwhelm you! However, HTML provides many more useful capabilities. There are easy ways to format lists and tables. There are image maps, images with multiple sensitive areas that take you to different places. Of course, it is also possible to embed multimedia content such as a video or audio clip in a web page.
HTML also provides tags that allow you to create forms for input, with text fields, drop down lists, push buttons and so on.
I'll leave you with one last suggestion. If you are ever curious as to what the HTML for a web page looks like, you can find out. Most browsers have a View menu which includes an item called Page Source. If you select this menu item, the browser will open a new window and show you the HTML used to create the page.
Warning! For many web sites, you'll find this to be totally incomprehensible! This is because many sites are created by tools which do not format the HTML to be easily read and understood by a human. (Also, some sites are generated by special programs running on the web server, rather than simply being a stored HTML document.) However, if you try View->Page Source with this page, you should be able to see lots of examples of the points that I've made in this article.
Happy HTML coding! If you have questions, please get in touch. Just email
me with the subject line "HTML 101" at:
Back to 'For Authors' page