|
Figure A |
|
|
|
Closing a heading style has the same effect as closing a paragraph tag. |
Introduction
So you’re in charge of setting up a Web site. While this might sound simple, it isn’t quite as easy as it seems. In order to create a Web page, you need to know how to write HTML. If you aren’t able to do that, your site will never get off the ground.
HTML, or Hyper Text Markup Language, is used to create a Web site. Among other things, it tells your Web browser what text to display, what images will appear, and what color a table border should be as well as dictating how everything is laid out. Without HTML, the Internet as we know it today would not exist. The tricky part is that you have to create HTML with nothing but your brain and a text program, such as Microsoft Notepad.
Feeling a bit anxious? Don’t be! TechRepublic has brought together a compilation of articles by Jason Smith titled "A crash course in HTML". These articles will help you gain a better understanding of HTML, its purpose, and how it works. After this crash course, and a little imagination, you just might be able to create the Web page of your dreams!
Good luck!
A crash course in HTML
In my
article on writing cleaner HTML, I referred to coding hypertext markup language (HTML) as programming. Several TechRepublic members wrote to say that HTML isn't a programming language, per se. Strictly speaking, they're right—as its name implies, HTML is a markup language.The basics
HTML is nothing but text and tags. The text is simple—to create it, just type or paste it in. Tags, on the other hand, are a different story. Unless you work with HTML code every day, you can't possibly have all the tags memorized.
There are two main parts to an HTML document: the head and the body. In that sentence, I mentioned three HTML tags: HTML, HEAD, and BODY. You must begin every HTML document with the tag <html> (normally read "open HTML") and end every document with </html> (read "end HTML").
The process of creating an end tag is also known as closing the tag. In your HTML document, you must also open and close head and body tags. The basic skeleton for an HTML file is as follows:
|
<html> |
Open HTML |
|
<head> |
Open HEAD |
|
</head> |
End HEAD |
|
<body> |
Open BODY |
|
</body> |
End BODY |
|
</html> |
End HTML |
The HEAD section of an HTML document allows you to title your document and include other pieces of data, such as META tags and scripts (I'll save those for another lesson).
The title of your document will appear in the Title Bar of the browser window. To title your document, simply place the title between the opening and closing TITLE tags, like this:
<title>This is the title of my HTML document</title>
Another good idea is to put comments in the HEAD section. You begin a comment by using <! --, and end it by using -- >. Here's a sample comment:
<!-- Comments in the HEAD section can include information about the author and the design tactics of the HTML document -->
Nothing between the comment tags will show up in the browser window, and you can place them anywhere within the HTML document. Confused yet? I hope not. We're just getting warmed up.
The BODY section
The BODY section of an HTML document is where all the action occurs. Here is where you get to put your HTML writing skills to the test. (Don't worry; the test won't be given until the end of the lesson.)
The BODY tag can consist of other keywords placed in the same tag. Such words, called parameters, include BACKGROUND, BGCOLOR, TEXT, LINK, ALINK, and VLINK. These parameter names don't leave much to the imagination when trying to figure out what they mean, which is one of the reasons why HTML is so easy to understand.
The following sample should help you understand a basic open BODY tag.
<body bgcolor="#0099FF" text="#FFFF00" link="#FF0000" alink="#0000FF" vlink="#008000">
Here's what each of the components mean:
I know, what a hideous color scheme. By altering these parameters, you can control the appearance of specific elements of the Web page.
If you would like to leave these options to the defaults of the browser (in most cases gray for the background, black for the text, and blue for the links), then all you need to do is open the BODY tag with no parameters.
|
A word about hexadecimals |
|
When you're defining the color of the background, a link, or a block of text, you can use basic word names for colors, such as red, blue, green, or yellow. However, if you want to use a specific shade, you will have better luck using the hexadecimal system of colors. |
Adding a picture
If you would like a picture file as the background of your Web page, the BACKGROUND parameter should be used. Here's an example:
<body background="background.gif">
This instruction will display the file background.gif as wallpaper for the Web page.
The HTML skeleton
Now let's take a new look at what our HTML skeleton looks like.
<html>
<head>
<title>Title goes here</title>
</head>
<body background="back.jpg" link="#FF0000" alink="#0000FF" vlink="#008000">
</body>
</html>
You'll notice that adding parameters to the open BODY tag does not dictate closing them. You do not have to close parameters, only the first tag keyword, in this case </body>.
Getting down to the nitty-gritty
HTML provides a variety of tools that let you do nifty things to spruce up the text on a Web page. You control the appearance of the text on a Web page in much the same way that you format text in a word processing document. The difference is, of course, that there's no "bold" button in pure HTML—you have to know what tags or codes to use to format your text.
Let's review some simple tags and their functionality. Table 1 shows some of the tags you'll use most often.
|
Table 1: Some common HTML tags |
||
|
<b> |
bolds text |
</B> |
|
<i> |
italicizes text |
</I> |
|
<center> |
centers text on a page |
</center> |
|
<p align="center"> |
Another way to center |
</p> |
|
<p align="left"> |
Aligns text to left (default) |
</p> |
|
<p align="right"> |
Aligns text to the right |
</p> |
|
<h1> |
Makes text "Heading 1" |
</h1> |
|
<h2> |
Makes text "Heading 2" |
</h2> |
|
<h3> |
Makes text "Heading 3" |
</h3> |
|
<h4> |
Makes text "Heading 4" |
</h4> |
|
<h5> |
Makes text "Heading 5" |
</h5> |
|
<h6> |
Makes text "Heading 6" |
</h6> |
I didn't stop typing headings because my carpal tunnel was acting up; there are only six headings in HTML. These styles are specifically used to make text stand out. You can create your own styles by using the FONT tag.
Introducing the FONT tag
The FONT tag is probably the most versatile when it comes to altering the style of your text. Just like the BODY tag, the FONT tag has a few parameters that can be used. Some of these parameters include SIZE, COLOR, and FACE.
Let's say that you wanted your text to be big, blue, and in an Arial font. The following line of code would produce such a result.
<font face="arial" size="5" color="blue">This is sample text.</font>
You'll need to remember a couple of important notes concerning the FONT tag. First, unlike the text heading styles, with FONT, the larger the number, the larger the text is going to be. Again, you don't have to close the parameters, only </font>.
In addition, not all browsers will be able to display all fonts that you want to use. For this reason, if you are going to use font faces, you should use a group of fonts that are similar. This way, if the end user's browser won't display one font in the group, it might display another. Based on recommendations by the folks who make Dreamweaver, here are some of the "good" font face groups:
You can group these fonts by separating them with a comma inside the tag:
<font face="Georgia, Times New Roman, Times, serif ">
Paragraphs and line breaks
You define paragraphs of text in HTML with the paragraph tag (<p>). Paragraphs will line-wrap according to the size of the browser window. By default, a blank line will appear between paragraphs. So, if you set up your HTML document with three paragraphs like the example below, a blank line will appear in between each.
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
Suppose you want to force a line break at a particular point in the text. To do so, you must use the break tag (<br>). Since <br> will cause the next line of text to move down to a new line, it's also a great way to insert blank lines in your document.
Keep in mind that if you are using HTML's predefined heading styles, each heading tag also acts as a paragraph tag. If you have three different lines of text, all in different heading styles, a blank line will separate each of the lines of text.
For example, the following HTML commands result in the display shown in Figure A.
<h1>this is a line of code</h1>
<h2>this is a line</h2>
<h3>this is a line</h3>
|
Figure A |
|
|
|
Closing a heading style has the same effect as closing a paragraph tag. |
Putting it all together
Let's review what we've covered so far. Figure B shows what the Web page will look like when your browser displays the following HTML:
<html>
<head>
<title>Title Goes Here</title>
</head>
<body bgcolor="white">
<center><h1>This title will be centered and use Heading 1.</h1></center>
<p><font face="verdana" size="2">This is my first paragraph. This one will be font size 2 and use a Verdana font. <b>This sentence will be bold.</B></font></p>
<p><font color="blue">This is my second paragraph. This one will be in all blue. <i>This sentence will be in italics.</I></font></p>
<p>This is my third paragraph.<br>
But, I want this on a separate line.</p>
</body>
</html>
|
Figure B |
|
Here's what our sample HTML document looks like under Internet Explorer 4. |
Tackling lists
Lists make an attractive addition to a Web page. Fortunately, they are also easy to create. There are two types of lists in HTML—an ordered list (numbered) and an unordered list (bullets). The tag for an ordered list is <ol>. The tag for an unordered list is <ul>. Between the point where you open the list and where you end it, simply place the list items to be displayed in between the list item tags <li> and </li> like this:
<ol>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
Linking to other pages
Of course, one thing you must know how to do is link to other Web sites. To link to another HTML document or another Web site, you'd use something like this sample code:
<a href="this is where you place the URL or HTML file name"> this is what will appear in the browser window</a>
An actual line of code might look like this:
<a href="page2.html">Click here</a>
Displaying an image
Of course, you can't just put up a page of flat text and expect to impress your friends, family, and co-workers. You can display an image on your Web page by using this sample code:
<img src="Image file name goes here">
In this case, img src stands for "image source."
Here is what that code might look like:
<img src="pic1.gif" width="250" height="200">
Displaying an image that links to another page
If you would like to be able to click on an image and have it take you to another HTML document or another Web site, simply embed the image source tag inside the hyperlink tag like so:
<a href="page2.html"><img src="next.gif"></a>
Fun extras
Here are some additional tips for formatting your HTML document that are sure to come in handy.
Indented text or lists. You can indent an entire paragraph or list inward into the Web page by using the blockquote tag <blockquote>.
Scrolling marquee. You can place a non-JavaScript scrolling marquee board on your Web page by using the <marquee> tag. You can even alter the appearance of the text and the background color. The following line of code would result in a marquee with a red background and yellow words (displayed in bold):
<b><font color="yellow"><marquee bgcolor="red">Type the message you wish to be displayed here.</marquee></font></b>
Putting your HTML on the table
Now that we've covered the basics of HTML formatting, you should be able to design a Web page to suit your needs. However, there is a lot more to HTML than meets the eye. For this short lesson, I saved the best for last. Once you've mastered formatting techniques discussed in this three-part series, you're ready to tackle tables.
Tables can be used for a variety of different purposes. First and foremost, it is extremely easy to organize charts using simple tables. You can also use tables to insert graphics with captions in convenient places within your text. You can even design some very attractive layouts with the use of tables.
But, enough about what tables are good for (I'll leave that to your creative imagination), and on to how tables work. Here is the HTML that creates a simple table with two rows and three columns. I'll discuss the tabs below.
<table border="0">
<tr>
<td> This is text in column 1 row 1</td>
<td>This is text in column 2 row 1</td>
</tr>
<tr>
<td>This is text in column 1 row 2</td>
<td>This is text in column 2 row 2</td>
</tr>
<tr>
<td>This is text in column 1 row 3</td>
<td>This is text in column 2 row 3</td>
</tr>
</table>
Table anatomy
Each table consists of rows and columns. You must start coding the table by opening the table tag and defining any parameters. In this example, the table has no border (the default border is 1, a visible, yet thin border line). A table is defined primarily by using rows. You must open the table row tag <tr> and within that tab, define the columns. The sample code above will result in the table shown in Figure C.
|
Figure C |
|
|
|
Here's what our sample table looks like. |
If you would like to change the style of the text within the table, you can open a font tag before you open the table. If you would like to center the table horizontally on a Web page, open the center tag before opening the table and close it afterwards. If you would like to center the information in the individual cells, open the center tag after the <td> and end the center tag before the </td>.
In addition to centering tables horizontally, you can align the table to the right. Doing so makes it easy to insert a graphic and text all along the side of it—just like in magazine page layouts. For example, the following section of code placed within the body of an HTML document will result in the aesthetically pleasing layout shown in Figure D.
<table border="0" align="right">
<tr>
<td><img src="me.jpg"></td>
</tr>
</table>
<p>Here is some sample text. Here is some sample text. Here is some sample text.
Here is some sample text. Here is some sample text. Here is some sample text.
</p>
<p>Here is some sample text. Here is some sample text. Here is some sample text.
Here is some sample text. Here is some sample text. Here is some sample text.
Here is some sample text. Here is some sample text. Here is some sample text.
</p>
|
Figure D |
|
|
|
Here's our revised sample table with a picture of your HTML tutor! |
Class dismissed
Once you've completed all three HTML 101 lessons, you're ready to take your test: Design a Web page using the information that you have learned here. Fill it up with all the HTML you know. Doing so will help you better understand how all the tags are supposed to be used. If you design a Web page up on the Internet with the assistance of this article, please
Using special characters in HTML
Have you ever wanted to put a little Français on your Web page? Perhaps you are interested in changing those dull bullets to some exciting characters to spruce up your site? In this lesson, I will cover all that I know about those special little characters in HTML, known as character entity references.
We'll start with some of the major languages
Do you know German, Spanish, French, or Italian? If so, you know that there are special characters that are contained within each language's alphabet that do not make up part of the English language. Such examples include the German umlaut, or the Spanish tilde.
There is a tilde key on your keyboard in the upper left-hand corner, under the [Esc] key. However, you would be hard pressed to find the ñ key anywhere near the home-row keys. So, we have to improvise when adding special characters to our Web sites.
The dissection
So how can you put a special character in your Web page? I'll explain the basic character entity reference by using this example:
ä
This little piece of code is all you need. When you type this small snippet of code into your HTML file, the result will be an umlaut–ä.
The ampersand (&) seen in the code above is a must. That is the clue to the HTML gods that the rest of the text is code for a special character. You'll see that the letter following the ampersand is the letter "a." This will be the letter we will perform the magic on. The characters located after the "a" represent what we are doing to the letter. In this particular case, we are putting an umlaut (uml) over the "a" character. Now to every beginning, there must be an end. This is where the semicolon comes into play. The semicolon tells the gods that you are done with the special character and ready to move on to normal text.
Keeping that in mind, to place an umlaut over a capital "a," the code would be:
Ä
I bet you never thought it would be this easy. But that's just the tip of the iceberg. Table 2 features most of the special characters for some of the most common languages.
|
Table 2 |
||||
|
ä |
ä |
Ä |
Ä |
|
|
ë |
ë |
Ë |
Ë |
|
|
ï |
ï |
Ï |
Ï |
|
|
ö |
ö |
Ö |
Ö |
|
|
ü |
ü |
Ü |
Ü |
|
|
ß |
ß |
|||
|
ç |
ç |
Ç |
Ç |
|
|
á |
á |
á |
Á |
|
|
é |
é |
é |
É |
|
|
í |
í |
Í |
Í |
|
|
ó |
ó |
Ó |
Ó |
|
|
ú |
ú |
Ú |
Ú |
|
|
ç |
ç |
Ç |
Ç |
|
|
ã |
ã |
à |
à |
|
|
õ |
õ |
Õ |
Õ |
|
|
ñ |
ñ |
Ñ |
Ñ |
|
|
¡ |
¡ |
¿ |
¿ |
|
A special character chart for common languages
IT person in math land
There is also hope for all of you mathematicians out there. There is a slew of mathematical symbols that can be used in HTML, most of which I have never comprehended (save the simple buttons on my calculator). If you are creating a Web page that contains some mathematical formulas, you might find that some of these characters could come in handy.
|
Table 3 |
|
|
° |
° |
|
± |
± |
|
² |
² |
|
µ |
µ |
|
¼ |
¼ |
|
× |
× |
|
÷ |
÷ |
|
° |
° |
A mathematical symbol chart for mathematicians
It's time to get creative. By looking at the table above, you'll notice that using ¼ creates the character 1/4. Wouldn't it stand to reason that you could display 3/4 by using ¾? You bet it would! If you play around with these entities a little bit, you might be surprised as to what you can and will discover. After all, the light bulb was an invention of experimentation; just think of what you might come up with! As one of my most memorable teachers once said, "The key to understanding is not memorization; it's understanding."
Time for a little pop quiz!
All right, boys and girls, it's quiz time! See if you can figure out how to display the following samples. The answers will be given at the end of the lesson.
Ÿ1/232°5×2=10
Alternatives to ordered and unordered lists
Although ordered and unordered lists do provide a more aesthetically pleasing look to your Web site, you may not like the numbers or bullets that are supplied when you type up your lists. Here are some HTML entities that you could use in place of the bulleted lists that you hold so dear to your heart.
|
Table 4 |
|
|
› |
› |
|
" |
» |
|
† |
† |
|
‡ |
‡ |
Above is a list of alternative characters than can be used in place of bullet lists.
If you don't like any of these, then create your own! That's right, what's stopping you? Simply create your version of "the bullet" in MS Paint, Photoshop, or some other piece of artistic software, save the file as a .jpg, and insert that image into your document every time you want a bullet to appear. Take a look at this sample.
<img src="mybullet.jpg">Item 1<br>
<img src="mybullet.jpg">Item 2<br>
<img src="mybullet.jpg">Item 3<br>
Pop quiz solutions
|
Table 5 |
|
|
Ÿ |
Ÿ |
|
1/2 |
½ |
|
32° |
32° |
|
5×2=10 |
5×2=10 |
Pop quiz solutions using special characters
Now it's your turn
I hope you enjoyed this HTML entity lesson; but keep in mind that the samples I provided for you here aren't the only HTML character entities at your disposal. If there is a particular character you have in mind that you would like to put on your Web page, I encourage you to search the Web for HTML character entities until you find it. Here is a good place to start and find a more concise listing of these special characters:
