Getting Started with HTML

Article ID: 56726

Posted May 22nd, 2008

Other Languages

By:

Clearly, web pages and web-based applications are the standard way of displaying information in computers today. This trend is now more than 10 years old and shows no sign of stopping. HTML is the screen-layout language of the web. Regardless of whether you're developing static web pages or computer programs in RPG, Java, PHP, .NET, or NET.DATA, you need to understand HTML. No matter which language you choose, HTML will be an integral part of your user interface, either today or in the future.

This article, adapted from an internal document that I wrote for Klement's Sausage, is an introduction to the HTML language.

What Is HTML?

HTML stands for Hypertext Markup Language. Basically, it's a way of telling a web browser how things should be displayed. Where does text go on a page? Should that text be bold or italicized? Should there be pictures? Where do they go? HTML tells the browser about all these things.

What Are Tags?

Consider the following text:

Klement's Cares for Kids
Famous Sausage Racing Sausages™ Snow Globe Offer

To receive a free collector's edition Klement's Famous Racing Sausage™ snow globe, purchase any Klement's product during November and December and send in a completed entry form and three (3) UPCs from Klement's product packages (any retail variety or size).

Not only does this text display words, but the words are formatted in a particular manner. The title of the text is bold, italicized, and centered across the width of the page. The paragraph below it is not bold, italicized, or centered, except for the word "free," which is printed in bold.

To see what I mean, right-click your desktop and choose New|Text Document. Name the document test.html. Next, right-click the document icon again, choose Open With, and select Notepad.

In the Notepad window, type the following:

Klement's Cares for Kids
Famous Sausage Racing Sausages&trade; Snow Globe Offer

To receive a free collector's edition Klement's Famous Racing Sausage&trade; snow globe,
purchase any Klement's product during November and December and send in a completed 
entry form and three (3) UPCs from Klement's product packages (any retail variety or size).

Note: The ™ is a special code that displays as the "trademark" character. This type of special code is called an "entity" in HTML. Entities are used to display special characters such as the < and > characters (to prevent them from being intepreted as a "tag" by the browser), as well as characters that don't exist in all flavors of ASCII, such as the trademark symbol. Because of space restrictions, I don't cover entities in this article, but you can learn more about them at http://www.w3schools.com/HTML/html_entities.asp.

Save your changes and double-click the test.html file on your desktop. You'll see the following in your web browser:

It's not very attractive, is it? That's because you haven't inserted HTML tags to format it. An HTML tag looks something like this:

To receive a <b>free</b> collector's edition Klement's

The "b" tag is the one that makes text display as bold. Where you see in the preceding text, it's the start of text that should be bold. The (the same tag, but with a slash in front of the name) is the end of the text that should be bold. In other words, everything between the and will be displayed in bold by the web browser.

If you think about it, this concept isn't that different from what you do in a program such as Microsoft Word. Instead of highlighting text with a mouse and clicking the B button, you insert tags. But it's conceptually the same.

The browser looks for these tags in the document to tell it how to format things. In this example, it's making things bold -- but there are lots and lots of other things you can do with HTML. Here are a few of the common HTML tags (there are many, many more) that you might want to use:

<html>               Denotes an HTML document.
<head>               Denotes the header section of an HTML document
<body>               Denotes the  body (the main part) of an HTML
<p>                  Denotes a paragraph
<br>                 Inserts a line break (does not have an "ending" tag)
<b>                  Makes text bold
<i>                  Makes text italicized
<u>                  Makes text underlined
<table><th><tr><td>  Used for laying data out in a table format
<ol> <li>            Creates a numbered list of items
<ul> <li>            Creates a bulleted list of items
<img>                Inserts a picture into an HTML document
<a>                  Inserts a link to another HTML document

Trying Out Tags

It's always helpful to try HTML tags to see what they look like. The test.html file that I created earlier is a perfect way to do that! Let's reopen that file in Notepad and fix up the spacing a bit. Try changing the document to look like this:

<html>
<body>
 <p>Klement's Cares for Kids<br>
   Famous Sausage Racing Sausages&trade; Snow Globe Offer</p>

 <p>To receive a <b>free</b> collector's edition Klement's
   Famous Racing Sausage&trade; snow globe, purchase any
   Klement's product during November and December and send
   in a completed entry form and three (3) UPCs from
   Klement's product packages (any retail variety or
   size).</p>
</body>
</html>

I've inserted tags to tell the browser where the HTML data starts and where the BODY of the HTML document is located. I've also inserted tags to tell the browser what should be organized into paragraphs, and I inserted a BR tag to break the first paragraph into two lines.

Save your changes and double-click the test.html file again. Now the HTML looks like this:

It looks a lot better than the first example. But the title still needs to be made bold and italicized and centered. In HTML it's possible to nest tags, that is, put tags inside other tags. In my preceding example, notice that I have the tag inside the tag. This lets me have bold text inside a paragraph. The same technique works for centering, bolding, and italicizing the title of the document.

<html>
<body>
 <center>
   <p><b><i>Klement's Cares for Kids<br>
   Famous Sausage Racing Sausages&trade; Snow Globe Offer</i></b></p>
 </center>

 <p>To receive a <b>free</b> collector's edition Klement's
   Famous Racing Sausage&trade; snow globe, purchase any
   Klement's product during November and December and send
   in a completed entry form and three (3) UPCs from
   Klement's product packages (any retail variety or
   size).</p>
</body>
</html>

Because the <center>, , and tags in the preceding example are all in effect at the same time, the text will be bold, italic, and centered when viewed in the web browser, as follows:

I hope that you can see how these HTML tags make it easy to create documents that are formatted the way you want them to be formatted.

One last note about this: tags should not be "crossed." For example, the following is not legal HTML:

. . . To receive a <b><i>free</b></i> collectors . . .

The reason it's not legal is because the and have been crossed. The key thing to understand is that the computer thinks of as "inside" the tag. Because it was created inside the bold tag, it cannot end outside of the bold tag! The italics must be ended first, and then the bolding, otherwise it's considered an error. Some browsers might display it correctly, and some might not!

Links

One of the most powerful features of a web page is the ability to provide "links" that you click, and they take you to a different page. A link is just another HTML tag. You tell it which section of your text should be a link, and you tell it which address on the web the link should point to. For example:

<html>
<body>
 <center>
   <p><b><i>Klement's Cares for Kids<br>
   Famous Sausage Racing Sausages&trade; Snow Globe Offer</i></b></p>
 </center>

 <p>To receive a <b>free</b> collector's edition Klement's
   Famous Racing Sausage&trade; snow globe, purchase any
   Klement's product during November and December and send
   in a completed entry form and three (3) UPCs from
   Klement's product packages (any retail variety or
   size).</p>

  <p>Visit our <a href="http://www.klements.com">Home Page</a>
    for more information!</p>
</body>
</html>

Note the <A> tag in the above text. <A> is short for "anchor" for historical reasons . . . but it basically provides a means of creating a link. The <A> tag takes a parameter (named "href") that references another document on the web. In the preceding example, I told it to reference http://www.klements.com.

When viewed in a web browser, the page looks like this:

And if you click the words "Home Page," the browser takes you to the Klement Sausage home page, which is located at http://www.klements.com on the Internet.

URLs (Web Addresses)

The preceding example used a URL (or "web address," in popular slang) to direct a link to a particular place on the Internet. A URL looks like this:

http://www.klements.com/products/fresh_products.html

http:

The http: tells the browser which network protocol to use. Here are some of the common network protocols used on web pages:

   http:   = hypertext transport protocol (the default protocol of WWW)
   mailto: = send to an e-mail address.
   ftp:    = file transfer protocol
   file:   = access a local file on your hard drive.

When data is stored on a web server, you use the http: protocol to access it. When you have a test file on your desktop (like the one I've been using to demonstrate HTML in this article), it uses the file: protocol to access it. The basic idea is that a browser can access any type of file using any sort of protocol; all it needs is a different identifier. It's very powerful.

//www.klements.com

The //www.klements.com in my example URL tells the web browser which computer to get the document from. The file: protocol won't need that part, because it always accesses a local hard drive, but other protocols such as http: and ftp: can access any computer connected to the Internet. For instance, in my previous "link" example, the HTML document is stored on your desktop, but it references a link to an HTML document located on Klement's web server.

The name "www.klements.com" is nothing more or less than the name of a computer on the Internet.

/products/fresh_products.html

This part of the URL designates the folder and file name of the file to be accessed on the www.klements.com server. The browser connects to that computer and asks for a file named fresh_products.html and tells the computer that the file is located in the /products folder.

On the www.klements.com computer, we use the Apache web server. In the configuration for Apache, we've told it that web requests will always be served out of the /www/apachedft/htdocs directory. So, when someone requests /products/fresh_products.html, it will actually look for a file named /www/apachedft/htdocs/products/fresh_products.html in the IFS on that server.

Images and Pictures

Obviously, web pages can contain pictures as well as text. There's an HTML tag named <img> that tells the browser where to insert an image on a web page. That tag (like the link one) takes a URL ("web address") parameter that tells the browser where the image is located on the web. The browser connects to that URL, downloads the image/picture, and inserts it into the page at the correct spot.

For the sake of example, consider the following picture:

This picture is stored in a file on our web server. The file is located in the /www/apachedft/htdocs/images/products/ folder on the server and is named products03.jpg. Klement's web server always prefixes image names with /www/apachedft/htdocs, so that should not be listed as part of the URL.

Consequently the URL should be:
http://www.klements.com/images/products/products03.jpg

With that in mind, consider the following HTML code:

<html>
<body>
 <center>
   <p><b><i>Klement's Cares for Kids<br>
   Famous Sausage Racing Sausages&trade; Snow Globe Offer</i></b></p>
 </center>

 <p>To receive a <b>free</b> collector's edition Klement's
   Famous Racing Sausage&trade; snow globe, purchase any
   Klement's product during November and December and send
   in a completed entry form and three (3) UPCs from
   Klement's product packages (any retail variety or
   size).</p>

  <p>Visit our <a href="http://www.klements.com">Home Page</a>
    for more information!</p>

  <center>
  <img src="http://www.klements.com/images/products/products03.jpg">
  </center>
</body>
</html>

Notice the <img> tag at the bottom, and notice that it's located within a <center> tag. This tells the browser to insert that image into the web page and to make it centered across the width of the page. It also tells it where to get the image from. When you display that HTML, it shows up like this:

Important Considerations When Using Images

All web browsers can display JPG, GIF, and PNG image formats.
Many browsers do not support other formats aside from these three.
JPG works best for photographs.
GIF works best for simple diagrams, logos, or cartoons.
PNG is a newer/better version of GIF.
Remember that these images need to be downloaded into the browser, and people have to wait while they load. Keep them under 100 KB.
Use image editing software to make them small so they don't take up the entire screen.
The <img> tag has height and width parameters that let the browser resize the image. However, this does NOT make the download smaller!

More Advanced Layout with Tables

So far, everthing we've looked at has had a very simple layout. However, most web sites aren't that simple, and they have different parts located side-by-side with other parts. For example, you might want to have a navigation bar running down the left-hand side of your screen, or you might want to position two paragraphs so they sit side-by-side on the screen.

Note: I learned to do this type of advanced layout with tables, and I demonstrate that in this section. However, it's worth noting that many experts feel that Cascading Style Sheets (CSS) are a better way to do this sort of formatting and that tables should be used strictly when displaying data in a tabular format. I provide a very brief introduction later in this article, as well as a link to a site where you can learn more about CSS syntax. For a discussion of arguments for and against using CSS instead of tables, please read the following article on About.com:
http://webdesign.about.com/od/layout/a/aa111102a.htm

A table is a group of HTML tags used to divide text, pictures, links, and so forth, into rows and columns. You declare each section, row-by-row, and within each row you put cells that make up the columns. There are four different HTML tags used to implement tables:

<table>   Starts a new table.
<tr>            Starts a new row within a table.
<th>      Starts a "heading cell" within a table
<td>            Starts a "data cell" within a table.

Let's say I wanted to take my preceding example and put the image to the left of the title (instead of being centered below it). I could write HTML like this:

<html>
<body>

  <table border="0">

  <tr>

    <td width="111">
<img src="http://www.klements.com/images/products/products03.jpg">
    </td>

    <td>
      <b><i>Klement's Cares for Kids<br>
         Famous Sausage Racing Sausages™ Snow Globe
         Offer</i></b>
    </td>
   </tr>

   <tr>
     <td colspan="2">
      To receive a <b>free</b> collector's edition
      Klement's Famous Racing Sausage™ snow globe,
      purchase any Klement's product during November
      and December and send in a completed entry form
      and three (3) UPCs from Klement's product packages
      (any retail variety or size).
     </td>
   </tr>

   <tr>
     <td colspan="2">
       Visit our <a href="http://www.klements.com">Home
       Page</a> for more information!</p>
     </td>
   </tr>
   </table>

</body>
</html>

Remember, the <table> tag starts a new table, <tr> starts a new row within that table, and <td> starts a new cell (or "column") within the row. Here's what the preceding HTML will look like on the screen:

In the preceding example, notice that I specified border="0" because I didn't want the HTML to draw a border around each cell in my table. After all, the goal of this table is to control the page layout, and not to draw an actual table of data. However, if you want to see what it looks like with the borders turned on, try changing the HTML to read border="1".

As you can see, the image is in a cell by itself. The title is in another cell, to the right of the image. The paragraph describing the free snow globe is in a new row directly below the image and the title. This is how I can control the layout of text relative to other text and images on the screen.

Notice that the top row has two columns, but the other rows have only one. I made that happen by specifying colspan="2" in the definition of the second and third rows. This told the browser that the cells in that row should span two columns.

In the top row where there are two separate columns, notice that the first one containing the image is smaller than the second one, containing the text. To accomplish that, I specified width="111" for the first column in that row. 111 is the size of the row in pixels. I used that width because the image itself happens to be 111 pixels wide, and I wanted the cell to be the same size as the image.

You can also specify widths as percentages. For example, specifying width="25%" would tell the browser to make a given column be 25% of the width of the table.

Furthermore, you can specify the width of the table itself simply by putting the width parameter in the <table> tag instead of the <td> tag. The default is 100%, meaning that the table is the full width of the browser screen. However, I could specify 80% if I wanted the table to be narrower than the screen.

Style Sheets (CSS)

Style sheets are another really useful tool when writing HTML pages. They provide very fine-grained control over how elements of the page are displayed. For example, in the preceding example, all the text was displayed in a 16-point Times New Roman font. It was all displayed in black with a white background. What if I wanted to change that?

Style sheets are introduced using the <style> tag, and they're placed within the heading of a document (not in the body, which is where the other stuff I've demonstrated has been placed). Stuff in the heading isn't displayed on the screen, but instead, provides instructions for the browser.

The following example code should be inserted between the <html> tag and the <body> tag of the preceding test.html document. Here's the code to insert:

<head>
<style type="text/css">

body {
   background-color: #c0f0f0;
}

td {
   font-family: arial;
   font-size: 12px;
   color: red;
}

</style>
</head>

The preceding example tells the browser that the body of the web page should be displayed with a background color of #c0f0f0. When a color begins with #, it means that it's a hexidecimal RGB value. This means that you're telling the computer how much red light, how much green light, and how much blue light to display. By blending these three different colors, you can make just about any color imaginable. Each RGB component can vary between 00 (none) and FF (full intensity). In this case, I told it that I want C0 (192, or about 75%) of the red light and F0 (240, or about 95%) of the green and blue lights to be turned on. This makes a cyan color. The easiest way to decide on a color using the RGB components is to open up an image editor or an HTML editor and pick the color in there. Image editors and HTML editors tell you what the RGB components of the color are. You can also search the web for "hexadecimal color charts" and find plenty of charts that list the colors and their respective hexadecimal values.

So the background of the web page will be a cyan color. I also told the style sheet to change the formatting of the cells of the table. I told it to use an arial font that's 12px in size, and I told it to print the text in red. (For simple colors, you can use names such as "red" and "blue" instead of using a hex RGB code). The result looks like this:

XHTML, Case Sensitivity, and the Future

The current standard for HTML says that HTML tags are never case-sensitive. Some HTML tags, such as the and <img> are designed to exist without closing tags, whereas for others, the closing tag is manditory. This version of HTML is still the standard today and is based on the SGML language for writing markup.

However, the direction of the future is to change to a new standard called XHTML. XHTML is based on XML instead of SGML, which has much simpler and more consistent rules. In XHTML, the names of HTML tags are case sensitive and should be typed in all lowercase. Likewise, tags such as and <img> should actually be coded as and <img src="url" />, respectively. In XHTML, when you place the slash immediately before the greater-than sign, it means that there is no associated closing tag.

Many people today are coding their HTML according to the XHTML specifications so that when XHTML does become the standard, they're ready.

For More Information

I hope that this article has given you enough introduction to HTML that you can get started. For more detailed information, and information about every HTML and Style-Sheet code available, I recommend that you visit the following site:
http://www.w3schools.com.

For HTML information, click the "Learn HTML" link on the left-hand side.
For style sheet information, click the "Learn CSS" link.

Another great resource is Jennifer Kyrnin's work on About.com.
http://webdesign.about.com/

Bookmark/Search this post with:

System iNetwork

Head Nav

Primary links

Join Network

Categories

Site Links

Getting Started with HTML

What Is HTML?

What Are Tags?

Trying Out Tags

Links

URLs (Web Addresses)

Images and Pictures

Important Considerations When Using Images

More Advanced Layout with Tables

Style Sheets (CSS)

XHTML, Case Sensitivity, and the Future

For More Information

ProVIP Sponsors

Featured Links

Sponsored Links

Footer Site Links

System iNetwork

Head Nav

User login

Primary links

Join Network

Categories

Site Links

Getting Started with HTML

What Is HTML?

What Are Tags?

Trying Out Tags

Links

URLs (Web Addresses)

Images and Pictures

Important Considerations When Using Images

More Advanced Layout with Tables

Style Sheets (CSS)

XHTML, Case Sensitivity, and the Future

For More Information

Related Links

ProVIP Sponsors

Featured Links

Sponsored Links

Footer Site Links