HTML Basics
So you want to make a web page, huh? After all, everyone’s got them these days. It’s no wonder, either. The basics of web design are easy to understand and can, for the most part, be learned in one sitting.
Let’s start out with the obvious question: What are web pages made of? Quite simply, almost all web pages are written in Hypertext Markup Language (HTML for short). Don’t let the name daunt you. HTML isn’t some alien programming language. Rather, it is what is called a formatting language. Simple, easily understood pieces of code are embedded in otherwise inconspicuous text to be interpretted by a web browser and displayed for the user. Here’s a very simple example.
| HTML Code
<B>Emboldened text</B> |
Browser Display
Emboldened text |
The text “Emboldened text” is surrounded by bold tags. The <B> tag tells the browser to start making text bold, and the </B> tag, called an end tag, tells it to stop. HTML documents are filled with such tags, giving the browser instructions about how to format and display their content.
Creating an HTML Document
The process of producing HTML documents is a relatively simple one. Start by opening up your favorite text editor. I recommend using Notepad or Textpad for the sake of simplicity, although most word processors will work. Open a blank document and, in the File drop-down menu, choose “Save As…” In the dialogue that appears, be sure that “All Files (*.*)” is chosen under “Save As Type:”. Now give your document a name, being sure to follow it up with “.html”. This is very important, since a browser will only recognize it as an HTML document if it has this file extension.
Basic Web Page Structure
Okay, now you can get started filling in your page. Begin with this basic structure:
<HTML>
<HEAD>
<TITLE> Page Title </TITLE>
</HEAD>
<BODY>
Page Body
</BODY>
</HTML>
This is the fundamental organization of any HTML document. The page begins with the <HTML> tag and ends with the </HTML> end tag. This simply tells the browser that everything between these tags is to be interpretted as HTML. Going further into the document, you can see that the whole of the document is divided into two main areas, as denoted by the <HEAD> … </HEAD> and <BODY> … </BODY> tags. The head contains important page information, such as the title, while the body contains the actual page content. Make a note of this distinction, because many elements which can go in the body cannot go in the head, and vice versa.
Title
Okay, so now that we’ve got a framework, it’s time to start adding information. The first and, arguably, most important step of this is to come up with a descriptive yet concise title. Give it some thought, because it’s the item most fledgling webmasters forget most often. Place this between the <TITLE> … </TITLE> tags. If you save and load your page now, you’ll notice that the title you’ve just written appears in the title bar across the very top of the browser. For example, you can see the title of this page, “Project Paradox,” displayed above.
Content
Since you’ve already come up with a good title, it’s likely you’ve got at least some idea what the page will contain. Are you publishing your grandmother’s recipe for chicken soup, highlighting your favorite baseball team’s recent victory, or showcasing pictures of your dog? It’s time to take those ideas and give them form.
Doing this is quite similar to using a word processor. Any text you place between the <BODY> … </BODY> tags will appear in the browser window, along with any formatting and/or additional elements you include with it.
Organizing Content
Adding Whitespace
You may have already noticed that the browser trims off any whitespace (i.e. extra spaces and carriage returns) you put in your document. To solve this, simply place a <BR> (Break) tag anywhere you want a carriage return. Alternately, you can use <P> … </P> (Paragraph) tags to organize text, which automatically places blank lines before and after each paragraph. The text you’re reading right now is organized using paragraph tags, just to give you an idea.
Adding in extra spaces between text is a little stranger, involving the use of the character escape sequence. “nbsp” literally stands for “Non-breaking Space.” Simply place one or several wherever you wish to have an additional space, much like the <BR> tag.
| HTML Code
Separated text |
Browser Display
Separated text |
Lists
Another useful way of organizing your content is by using a list. HTML makes lists very simple with the inclusion of the <OL> … </OL> (Ordered List) and <UL> … </UL> (Unordered List) tags. By enclosing any number of <LI> … </LI> (List Item) elements between one of these two sets of tags, you can create a neatly-organized list. An ordered list will generally list items out in numerical order, while an unordered list will use bullets instead. Notice the difference below.
| HTML Code
<OL> <LI>Third item</LI> |
Browser Display
|
|
<UL> <LI>First item</LI> <LI>Second item</LI> |
|
Headings
One last item of note before we leave the subject of organization is headings. Headings help organize a document by providing internal titles to delineate different subjects. To include a header, simply enclose some text between <H#> … </H#> tags, where the # is any number between one and six. The only difference is size; <H1> … </H1> tags provide the largest headings, while <H6> … </H6> tags provide the smallest, with a spectrum of sizes in-between.
| HTML Code
<H4>Subject</H4> |
Browser Display
Subject |
Formatting Content
Okay, so most of this is pretty dry. After all, the pages you can make with what you’ve learned so far, however well-formatted, are stale and colorless text. Now comes the fun stuff. Content is important, but images, color schemes, and other visual features are what provide the eye-catching features that make a web site truly come alive.
Aligning Text
Obviously there are a number of different ways to add spice to a web site. One of the most basic is by aligning text elements. There are a number of ways to do this. The simplest and most popular is to surround your text with the <CENTER> … </CENTER> tags. This makes your text automatically centered. Another more versatile method is to add the ALIGN attribute to your paragraphs or headings. This attribute can be set to left (by default), center, right, and justify for different alignments, as shown in the examples below.
| HTML Code
<CENTER>Centered text.</CENTER> <H4 ALIGN=”right”>Right-aligned text.</H4> |
Browser Display
Right-aligned text. |
Emphasizing Text
Another very basic method of spicing up a web page is by emphasizing particular regions of text. This is accomplished by using the <B> … </B> (Bold), <I> … </I> (Italic), and <U> … </U> (Underline) tags. These are all pretty self-explanatory, but here are a few examples just to illustrate their use. Take a look at the last example to see how you can combine these three tags.
| HTML Code
<B>Emboldened Text</B> <U>Underlined Text</U> |
Browser Display
Emboldened Text Italicized Text |
Fonts and Colors
Changing fonts and colors is another excellent way to make a web site more vivid. To do this, we have to take what you already know and expand it a bit. As you know, tags are used to create page elements, such as paragraphs and titles. Tags can also contain attributes which further define their functionality. For example, the <FONT> … </FONT> tag does nothing on its own. However, by adding the COLOR and FACE attributes, we can create a variety of different font/color combinations. See the example below for more details. Note that you need not ever include any attributes in the end tag.
| HTML Code
<FONT COLOR=”red”>This text is red.</FONT> |
Browser Display
This text is red. |
| <FONT FACE=”arial”>This text is in arial.</FONT> | This text is in arial. |
| <FONT FACE=”serif” COLOR=”blue”>This text is blue and in serif.</FONT> | This text is blue and in serif. |
Background
Of course, everything can be changed in an HTML document. Even the appearance of the background can be altered. The <BODY> tag has two special attributes for this purpose: BACKGROUND and BGCOLOR. The difference between the two is quite simple. BACKGROUND uses an image URL to produce the background, while BGCOLOR uses a solid color. Either one can be used in conjunction with <FONT> to give your page its own color scheme.
| HTML Code |
Browser Display |
| <BODY BACKGROUND=”/images/grayback.jpg”> <P>Black text on a gray background.</P> |
Black text on a gray background.
|
| <BODY BGCOLOR=”orange”> <P>Black text on an orange background.</P> |
Black text on an orange background.
|
Images
Naturally, web sites aren’t only composed of text. Otherwise, they wouldn’t be very interesting to visit. You can quickly and easily add various images to your document by including and <IMG> (Image) tag wherever you want it to appear. Unlike the other tags in this document, the image tag does not have an end tag and must have its attributes set to do anything useful. The SRC (Source) element is of primary importance, because it designates the file name of the image you want to include.
| HTML Code
<IMG SRC=”/images/rasberry.gif”> |
Browser Display
|
Site Design and Linking
Thus far we’ve just been talking about individual page design. That’s fine if all you want is a single, self-contained web page. However, it’s a relatively simple matter to link individual pages together in such a way as to form a web site. This is made possible by every web surfer’s best friend, the hyperlink. Embedding hyperlinks in your web page is accomplished by using the <A> … </A> (Anchor) tag along with its HREF (Hyper-reference) attribute. This can be used to link an image or a section of text to another document on your web site or to another site all together. See the examples below.
| HTML Code
<A HREF=”/index.php”>Project Paradox Homepage</A> |
Browser Display |
| <A HREF=”http://www.yahoo.com/”>Yahoo!</A> | Yahoo! |
Tips on Good Design
As you can see, learning HTML is relatively simple. However, web design can become quite an extensive undertaking, especially when one gets into more advanced topics such as Tables, Forms, CSS, and JavaScript. It helps at any level of design to recognize and avoid the pitfalls that can create so much frustration.
- Consistent coding. HTML may not be a programming language, but it can still get pretty difficult to read. The browser ignores any whitespace, so use of good spacing is a must. Spread your code out a little to make it easier on the eye. Furthermore, try to adopt a consistent casing strategy when it comes to your tags. Will all tag names and attributes be uppercase while all attribute values are lowercase? Decide on what you like now and stick with it.
- Content. Why would people want to visit your page if there’s nothing on it? Content is the single most important feature which is constantly overlooked by fledgling webmasters. Trust me, there’s nothing worse than the infamous “Under Construction” sign, unless of course there’s nothing at all. Just remember: Content first!
- Readability. Colors and images are great and all, but they should be secondary. They are the spice that flavors the food that is your content, but nobody wants to eat just spice. Web pages that are too flashy or, even worse, that have unreadable text because of over-the-top color schemes are doomed to failure. Emphasize the content; don’t overwhelm it.
- Cohesivenesss. This is important in web page design and absolutely mission-critical to web site design. Try your hardest to make the page or site as a whole come together into a singular presentation. It’s a good idea to keep your background/color scheme consistent between pages, and some kind of menu is essential for any site larger than two or three pages. At the very least, try to keep your pages along the same theme. It’s a fact that the more unified the site design, the better the site will be.
October 5th, 2006 at 3:34 pm
I’m sorry for little off-topic, but I want to ask you about design of this site. Did you make this template yourself or got from any templates website? Looks pretty cool for me
…
October 5th, 2006 at 6:27 pm
Wow, if you hadn’t commented on this post, Jessica, I probably would never have remembered that it existed.
To answer your question, this template’s all original. If I thought it was clean enough for public use, I’d publish it for everyone to use. Unfortunately, I’m a bit of a tinkerer, so a lot of the code is customized to my blogging practices and would probably blow up for anyone else. I’m very flattered you like it, but sorry, it’s strictly one-of-a-kind. I do wish you luck finding a nice template, though.
I hope you come back to visit again in the future. Feel free to drop me a link to your blog whenever you get it up.