The benefits to a practice of having a presence on the World Wide Web are obvious. What may not be obvious is just how easy and inexpensive it is to create a web site.

Creating a presence on the web can be achieved in three steps. First, you need to find a hosting service, or ISP, and register a domain name (see Web Site Basics sidebar). Some companies will do both of these for you, making the process much easier. Second, you should assemble your content, create a map or a story board of your site, and actually construct your pages. This article will mainly focus on page construction. The third step is to upload your content and advertise your site.

Constructing web pages can actually be quite easy once you understand the mechanics of how the web works. Web pages are delivered to your browser over the Internet (through the Hyper Text Transfer Protocol, or HTTP) from a computer dedicated to doing this task, often called a web server. Most pages are simply text files, constructed in a computer language called Hyper Text Markup Language (HTML), and they should have a .html extension. HTML is not a programming language; it can better be classified as a document description language. In brief, the markup tags instruct your browser how to render the content of the document. This includes, but is not limited to, text formatting, arrangement of objects such as images, and choice of colors for most page elements, including background and text. For example, to render certain text using an emphasized font, you would surround it with “Bold” tags, like this:

The second half of <B>this sentence will be emphasized.</B>

The structure of a tag consists of the element content (in this case, the letter B for “Bold”), which is surrounded by “less than” and “greater than” characters, often referred to as angle brackets. Notice that the tags are used in a pair, with a start tag and an end tag—the end tag is distinguished by an added backslash. Many tags also have attributes, which describe the structure of the tag. For example, the FONT tag has attributes to describe its size, color, and family, like this: <FONT FACE=”Verdana” SIZE=”2″ COLOR=”Blue”>

For a complete list of HTML tags, visit: the World Wide Web Consortium ( www.w3.org/TR/html401/ ) and HTML for Beginners Starter Guide (http://wiht.link/htmlstarterguide).

Web Site Basics
1. Register a domain name. Create a unique domain name with a domain service for about $35 per year. Several services to choose from include:

2. Organize your web site’s content like you would a brochure. Creating an effective web site requires you to determine what your specific goals are. Some goals might include building a positive practice image; being able to disseminate information to current and potential customers; and being able to sell services and products online.

3. Target your customers. Define the group of customers you want your site to speak to; know what you want to accomplish with that communication; assemble focused content; provide a way for customer feedback; and listen to and always respond to their communications. What makes a web site effective includes making your site a source of patient education; increasing administrative efficiency through your site; being able to communicate with other physicians through your site; making a graphically appealing site; getting the visitor to sign in; involving the user; and having a FAQ section.

4.Choose a host. There are thousands of web hosts to choose from, and most will provide a complete answer to helping you get your site started for a minimum fee at $20 per month. Web hosts will electronically store your web pages on a server; maintain connectivity of your site to the Internet; and, in some instances, will help build your site. Some hosts to choose from include:

The above was adapted from the “Work the Web” seminar, presented by Adam E. Flanders, MD, professor of radiology, Thomas Jefferson University, during the 2004 annual meeting of the Radiological Society of North America.
—Morgan Tharp

Every HTML page has a minimal structure that looks like this:
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>

Dissecting this structure, there is a language tag (<HTML>…</HTML>), which contains a header section (<HEAD>…</HEAD>) and a document body (<BODY>…</BODY>). The header contains information about the document, including the title, and may include other meta-data such as a description and a list of keywords that are used by some search engines. Information included in the document header is not displayed in the browser. The body of the document is where the content of the page is placed; everything between these tags will be rendered by the browser.

With this knowledge of the structure of an HTML document and a list of possible HTML tags, you could easily open up a text editor like NotePad on a Windows system or SimpleText on Mac and copy the sample HTML code above to use as a starting point. To add an image to your page, use the Image tag and set the source of the image file in the appropriate attribute, like this: <IMG SRC=”myimage.jpg”>. To add a hyperlink, surround the text to be active with the link tag, like this: <A HREF=”newpage.html”>this is a link</A>. Notice that the Image tag does not have an ending tag—it is one of the few that does not. Be sure to place these new tags within the body of the document. Once this document is saved, it can be viewed in your browser by selecting the Open… command under the File menu.

If this all seems too complex, there are a number of WYSIWYG HTML editors on the market. WYSIWYG stands for “what you see is what you get,” and it allows you to graphically manipulate elements on a web page without having to write a single line of code. Examples of WYSIWYG editors are Microsoft® FrontPage and DreamWeaver. Each of these applications has features to preview the page in any browser and to view the HTML code being generated by the editor, so you can easily correlate back to the HTML source.

Those familiar with applications like Adobe PageMaker and Microsoft PowerPoint will find designing web pages a bit more tricky. For example, it is not always possible to arrange text exactly in relation to image as you might like. This is because HTML was not designed as a page design tool—it was simply meant as a way to richly describe documents. For this reason, tables were introduced into an early version of the HTML standard. Tables are commonly used to display tabular data similar to a spreadsheet, but they can also be used to create a master template for your pages by dictating a set number of rows and columns in which page elements are arranged in relation to each other. There are a number of wonderful tutorials available on the web for working with tables, but a good place to start is W3Schools HTML Layout page ( www.w3schools.com/html/html_layout.asp ). Most web sites today use tables in one form or another, so be sure to become familiar with them.

Once a page has been constructed, the next step is to upload the content to a web server. The ISP that is hosting your site (see sidebar) will provide instructions on how to upload the pages. Most likely, the ISP will provide File Transfer Protocol (FTP) access to your web server. This will enable you to drag and drop files from your desktop to your server through Internet Explorer or another FTP client—there are many free FTP clients available at download.com. Keep in mind that HTML pages are simple text files, and therefore graphics and images are not embedded into these files like they are in Word and PowerPoint. It is important to remember that you need to upload all media files to your server while you upload the text files.

Because HTML is interpreted by your browser, your pages might look different on certain platforms and on certain browsers. It is recommended that you preview your pages in all of the browser/platform combinations that you anticipate your audience will use.

Web Design Resources

David M. Lionetti is senior software architect, University of Pittsburgh Medical Center,.