DOI: 10.1148/rg.254045119
RadioGraphics 2005;25:1101-1118
© RSNA, 2005
Informatics in Radiology (infoRAD)
HTML and Web Site Design for the Radiologist: A Primer1
Anthony G. Ryan, FRCR, FFRRCSI, MSc, FRCSI,
Luck J. Louis, FRCPC and
William C. Yee, FRCPC
1 From Vancouver Imaging and Interventional Associates and the Department of Radiology, Vancouver General Hospital, 899 W 12th Ave, Vancouver, BC, Canada V5Z 1M9. Presented as an education exhibit at the 2003 RSNA Annual Meeting. Received May 20, 2004; revision requested July 21 and received October 22; accepted December 15. All authors have no financial relationships to disclose.
Address correspondence to A.G.R., Main Street, Ballinasloe, County Galway, Ireland (e-mail: jackoriain{at}yahoo.ca).
 |
Abstract
|
|---|
A Web site has enormous potential as a medium for the radiologist to store, present, and share information in the form of text, images, and video clips. With a modest amount of tutoring and effort, designing a site can be as painless as preparing a Microsoft PowerPoint presentation. The site can then be used as a hub for the development of further offshoots (eg, Web-based tutorials, storage for a teaching library, publication of information about one’s practice, and information gathering from a wide variety of sources). By learning the basics of hypertext markup language (HTML), the reader will be able to produce a simple and effective Web page that permits display of text, images, and multimedia files. The process of constructing a Web page can be divided into five steps: (a) creating a basic template with formatted text, (b) adding color, (c) importing images and multimedia files, (d) creating hyperlinks, and (e) uploading one’s page to the Internet. This Web page may be used as the basis for a Web-based tutorial comprising text documents and image files already in one’s possession. Finally, there are many commercially available packages for Web page design that require no knowledge of HTML.
© RSNA, 2005
|
Introduction
|
|---|
The World Wide Web has become ubiquitous in the office, the ward, and most significantly, the patient’s home (1). Becoming familiar with Web page design provides the radiologist with academic, professional, and commercial opportunities. Once one is familiar with basic page design (eg, putting together a page with text and images with the ability to link to other sites), the opportunities for producing cross-referenced documents become intuitive and so previously prepared text- and image-based tutorials can be converted to a Web-based tutorial format (2–4).
Previously prepared PowerPoint (Microsoft, Redmond, Wash) presentations can be introduced and scrolled through by using an Internet browser. These tutorials may then be viewed on stand-alone computers, for example, in a waiting room for patient information purposes or at international conferences as scientific exhibits, or most fruitfully, once uploaded to the World Wide Web, they may be disseminated to an unlimited audience (5–8).
Documents in hypertext markup language (HTML) format may be used to disseminate information containing text and radiologic data to referring physicians (9). In place of or in combination with tutorials, information regarding one’s practice (eg, procedures offered) may be disseminated, as can advertising for new partners, or in the academic setting, information can be gathered from multiple centers around the globe (10,11).
Why should a radiologist learn HTML in order to construct a Web page? Why not just pay someone else to do it? It was not so long ago that the same question was asked about PowerPoint, which has since become the default mode of presenting at the majority of national and international meetings. Although many of the functions of HTML code are now available in prepackaged form, the basics of HTML will be outlined, in workbook format, as this knowledge will ultimately provide the author with greater control (11,12). In particular, one will be better able to appreciate the facilities and limitations of Web authoring tools. A knowledge of the principles of Web page design will also enable one to explicitly communicate one’s desires if a third party is employed to create a site on one’s behalf.
|
Creating a Web Page: An Overview
|
|---|
The process of Web page construction will be described in a step-by-step fashion, with the objective of enabling the reader to produce a simple and effective Web page permitting the display of text, images, and multimedia files.
This process can be broken down into five steps: (a) creating a basic template with formatted text, (b) adding color to the background and text, (c) importing images and multimedia files, (d) creating hyperlinks, and (e) uploading one’s page to the World Wide Web.
Hyperlinks confer the ability to jump from one location to another in one’s own site (internal) or to others (external), either on one’s own computer or the World Wide Web. Hyperlinking from text or images (eg, to transfer to an image of greater resolution in another window, as used in the online versions of Radiology and RadioGraphics) will be described in some detail.
Finally, performing the same procedures by using proprietary software, including FrontPage (Microsoft) and Dreamweaver (Macromedia, San Francisco, Calif), will be discussed.
System and User Requirements
The discussion is based on Windows 2000 (Microsoft).
Internet Explorer (Microsoft) was used as the default browser, although the HTML described should also run smoothly in Netscape (Netscape Communications, Mountain View, Calif).
HTML has been revised on numerous occasions to keep up with increasingly complex commercial demands, which earlier versions could not meet. Although the World Wide Web Consortium now recommends that Web site authors use the April 1998 revision of HTML 4.01 or its latest incarnation XHTML (a new language constructed from HTML and XML [extensible markup language]), most of the code described in this article can be found in the previous version 4.0 (13–15). An understanding of basic HTML will make subsequent learning of XHTML less challenging for the interested reader.
Prior Knowledge and Experience Recommended
- The reader should be familiar with opening and closing programs in windows, specifically Internet Explorer and Notepad (Microsoft), and with minimizing and maximizing windows.
- The reader should be familiar with text and image editing packages, for example, Notepad and PhotoShop (Adobe Systems, San Jose, Calif).
A brief word on terminology: Although Web site and Web page are commonly used interchangeably, a Web page is a single page, whereas a Web site is a collection of linked Web pages.
|
What Is HTML?
|
|---|
HTML is an acronym for hypertext markup language, a nonproprietary universal standard for preparing text for transfer across the Internet in such a way that formatting and display instructions are encoded alongside the actual content to be read by the viewer. The term markup refers to the formatting instructions embedded alongside the text to be displayed.
Thus, an HTML document consists of two intertwined components: (a) the text information to be displayed in the browser window and (b) the formatting information desired for that text and its layout (ie, its structural divisions—title page, main body of text, section, date, author) or information about typographic elements (changes in typeface, line breaks, etc). When writing HTML to display a simple document, one writes the text in a normal fashion but with extra words (the markup) alongside.
The formatting instructions come in pairs, called tags, which by convention are enclosed in a pair of angle brackets (eg, <HTML> </HTML>). The tags are made up of plain text American Standard Code for Information Interchange (ASCII) characters, which means that no special software is necessary to create an HTML file or "translate" it on arrival at another computer. This helps ensure that the formatting rules applied are less likely to be corrupted or "misunderstood" by another computer.
Note that the members of the tag pair are not identical twins; they differ in that the end tag must commence with a forward slash. They function like sided bookends and will not work if reversed.
Thus, tags function as shorthand for the type of formatting instructions that are applied in everyday word processing. Typically performed by a single keystroke in Word (Microsoft), formatting in markup language requires instructions to be explicit. For instance, to make a word appear bold, one requires the <B> </B> tag pair on either side of the word (eg, <B>word</B>). Although this process may appear tedious, this formatting is less likely to be altered by variations in other individuals’ browsers or computers with display settings different to one’s own.
Some tags have names that are descriptive and actions that are intuitive; others do not. Although a tag defines an action to be performed on a piece of text or image, it generally requires further modification for more elaborate variations of the same action. These modifications are known as attributes and are contained in the space between the elements of the tag pair. Attributes may be described as adverbs to the tag’s verb.
|
Creation of a Basic Template
|
|---|
Basic Page Structure and the Introduction of Text
If using this article as a workbook, as is recommended, one should now open a text editor (eg, Notepad) and type the HTML code shown in Fig 1. This is the basic template for most HTML documents, to which all other modifiers are added.
The document should be saved in the usual fashion; however, one must ensure that it has the suffix ".html" or ".htm," identifying the file as HTML (Fig 1). When these files are saved, the file names should not contain spaces, as this may confuse some browsers. All documents and images intended for eventual display should be saved in the same folder, as this facilitates the creation of subsequent links.
Once the file is saved, one can access it by opening the browser (Internet Explorer or Netscape), clicking Open in the drop-down File menu, and typing in the hard drive address of the file (Fig 2a) or using the browse button to find the file and then clicking Open (Fig 2b).
When the file is opened, the saved HTML code yields a blank white screen but with "Web-site design" displayed in the title bar (Fig 3). After viewing the Web page via the browser, one can make changes to the background HTML by clicking the View button in the top menu and selecting Source from the drop-down menu (Fig 4a), which will then open the original text editor in front of the browser, which remains open behind (Fig 4b). After applying changes, one can now just click Save, return to the browser, and press the refresh button at the top of the screen. The changes most recently applied will then take effect. One can also use the View-Source function to view the HTML of any site already published to the Web, a useful means of seeing how other Web authors achieve their effects.
All HTML documents contain a number of basic structure tags, which help define the document type and its structure. The HTML text in Figures 1 and 4b can be used as an example: The <HTML> tag indicates that we are dealing with an HTML document. The information regarding text formatting will be found between the elements of the <HEAD> tag pair (ie, between <HEAD> and </HEAD>).
The <TITLE> tag identifies the name of the page to be shown in the bar at the top of the page but not in the actual window itself. This is equivalent to the running header seen at the top of journal pages, which is usually a shortened version of the full document title.
Adding text to be displayed in the window itself requires a further tag, the <BODY> pair, so that text typed between the elements of the pair will be displayed on screen. The <BODY> pair follows the <HEAD> tag pair (Fig 5a). This code will now display the simple text in Figure 5a on screen with default formatting (eg, Times New Roman and a font size of approximately 10) (Fig 5b).
View larger version (82K):
[in this window]
[in a new window]
[Download PPT slide]
|
Figure 5a. (a) Screen from Notepad shows the addition of the <BODY> tag to the HTML code and of "Website design" to the body text. (b) Screen from Internet Explorer shows the resultant display.
|
|
View larger version (65K):
[in this window]
[in a new window]
[Download PPT slide]
|
Figure 5b. (a) Screen from Notepad shows the addition of the <BODY> tag to the HTML code and of "Website design" to the body text. (b) Screen from Internet Explorer shows the resultant display.
|
|
Basic Text Formatting
To alter the appearance of the text (eg, font size and face), other formatting tags are required, the majority of which will be placed between the elements of the <BODY> pair.
The <FONT> tag permits attributes such as resizing and font face to be defined. The size of the font is defined by the SIZE attribute (eg, <FONT SIZE=20>Size 20</FONT>). The type-face is applied by the FACE attribute (eg, <FONT FACE=Arial>).
These two text formatting features can be written together within the FONT tags. By convention, no commas are required to separate the different attributes within a tag pair (eg, <FONT SIZE=20 FACE=Arial>).
Text may be made bold and italicized by the attributes <B> and <I>, respectively.
Adding further text of the same format is simple from this point forward: Within Notepad, one types the desired extra text between the elements of the <BODY> tag pair.
Basic Paragraph Formatting
The basic formatting described includes paragraph and line breaks, left to right alignment, and a heading hierarchy.
Line Breaks.—
To add new lines, one has a choice between the <P> (paragraph) tag and the <Br> tag. The <Br> tag enters a line break but, unlike the <P> tag, does not place a white line between the lines in question. Although an end </P> tag exists, it is not commonly used, as a new paragraph automatically indicates the end of the last.
Alignment is to the left by default, but if one wishes to center the text or align right, the HTML is as follows. The ALIGN attribute is used with the paragraph tag to apply alignment to the entire paragraph. (For example, <P ALIGN="CENTER" > centers the text, <P ALIGN="JUSTIFY" > justifies the text, and so on for "LEFT" and "RIGHT.")
Headings.—
HTML specifies six levels of headings, with H1 the largest and H6 the smallest. They are used as follows: within the body of the text, if one wants a piece of text (eg, "Main Heading") to be the largest, one uses the <H1> tag pair (eg, <H1>Main Heading</H1>).
This will apply this heading style to that piece of text alone (ie, between <H1> and </H1>). The use of headings ensures the relative sizes of the text elements, even if a browser alters the absolute size of the text.
Lists
Lists that use numbers (ordered lists) or bullets (unordered lists) are easily created. The HTML for an ordered list is shown in Figure 6. For bulleted lists, the style is the same but the <OL> pair is replaced by the <UL> pair (for unordered list).
Basic Tables
Tables are created by using a <TABLE> tag, which constructs sequential rows, and by using two further tags: <TR> (table row) and <TD> (table data). The <TR> tag is similar to the <Br> (line break) tag, as it initiates a new row. The <TH> (table heading) tag is added to supply individual column headings as required.
The HTML for a table is shown in Figure 7. Successive cells are filled in order until a new row is constructed. The <TD> tags specify the data for each cell individually, with the number of <TD> entries implying the eventual number of columns in the table.
|
Adding Color: Background and Text
|
|---|
Unless a color is specified, the default background color is white, which does not provide the optimal "viewing conditions" for gray-scale radiologic images. The default text color is black. In earlier versions, colors were not defined by name in HTML but were specified by a code number based on the hexadecimal numbering system, in which the combinations of red, green, and blue are each specified by a hexadecimal weighting. Thus, 00 with respect to red implies no red, whereas FF contributes maximum red weighting to a given pixel or area of the screen.
For instance, to set the background color of a Web page to dark blue, one has to include a BGCOLOR attribute within the BODY section of the HTML document (eg, <BODY BGCOLOR= "#000099">Body of text</BODY>). Of course, one then has to be careful that the text does not clash with the background, that is, is still easily visible and legible, as when preparing PowerPoint slides.
Adding Color to Text
To apply colors, other than the default black, to text, a TEXT attribute is used. For example, the HTML code TEXT="#FFD700" ALINK= "#FF8C00" VLINK="#FF9999" LINK= "#FF00FF" will set the standard text to yellow, an active link (ALINK) to gold, a viewed link (VLINK) to pink, and a standard link to magenta.
Owing to the old differences in browser displays, HTML authors used to refer to "Web-safe colors," that is, colors that were stable and consistent in appearance from browser to browser. The screen color resolution defined by the end user will also influence the appearance of a Web page: for example, if a screen is set to 16 colors or less, all other colors will be distorted, whereas with 256 colors, the chances are that they will be displayed reliably. This is rarely an issue with recent monitors but can happen when viewers have older models.
The purported Web-safe colors are those containing any combination of the following: 00, 33, 66, 99, CC, and FF.
Sixteen colors are now predefined within HTML 4, permitting assignment by name. They are black, gray, maroon, purple, green, olive, navy, teal, silver, white, red, fuchsia, lime, yellow, blue, and aqua.
Style Sheets
In fact, one no longer has to apply formatting instructions piecemeal to all text in a document, as recent versions of HTML (4.0 and later) support a tool known as style sheets. Style sheets permit one to construct an overall style to be applied to a whole page and to multiple pages within a given site. Creating style sheets and their recent incarnation, cascading style sheets, is beyond the scope of this article.
|
Introducing Images and Multimedia Files
|
|---|
After one’s images are manipulated and compressed (16–21), they are ready for inclusion. In general, images should be saved so that they are no larger than 600 x 400 pixels, as larger images will not fit on the screen and users will need to scroll with the browser to view the full image. However, this is not the case with the latest versions of Internet Explorer (6.0) and Netscape (6.0), which incorporate a tool called automatic image resizing. This tool makes large images fit the given screen size and automatically updates the size of the image if the user alters the overall size of the browser window.
As well as saving the image in a compressed format, one can specify in HTML the width and height in pixels that the image will take up on the screen. Because of their generally small size, the image file types that work best for the Web are the Joint Photographic Experts Group (JPEG) format and Graphics Interchange Format (GIF). Each format has its advantages and disadvantages, as outlined in the Table. A more recent image format, Portable Network Graphics (PNG), has been developed specifically for the Internet, combining some of the more useful properties of GIF and JPEG images (16.7 million colors, lossless compression, and capability for transparency). At present, this format is supported only by recent browser versions (eg, Internet Explorer 6.0 and Netscape 6.0); thus, at present, GIF and JPEG remain the most frequently used graphics formats.
Once the image is saved, it can be displayed by using the <IMG> tag, which requires an attribute, SRC (source), that specifies the file name and location. The <IMG> tag does not require a closing </IMG>. If further formatting is required (eg, centering the image or making it a particular size), this information is also included within the IMG tag angle brackets.
For example, the HTML code <IMG SRC= "crcmet.jpg"> displays a JPEG image whose name is crcmet.jpg (Fig 8). On the other hand, the HTML code <IMG SRC="crcmet.jpg" ALIGN="LEFT" HEIGHT="200" WIDTH="200"> displays the same image but specifies that it will occupy 200 x 200 pixels on the left side of the screen. It is important that the pixel dimensions are in proportion to the original image dimensions, otherwise such size prescriptions will induce distortion in the resultant image.
View larger version (97K):
[in this window]
[in a new window]
[Download PPT slide]
|
Figure 8. Web page shows a line of text and an image of a metastasis from colorectal carcinoma (arrow). The image was originally saved in JPEG format directly from a picture archiving and communication system (PACS) workstation.
|
|
A further advantage of specifying the height and width of an image is that the browser can quickly fill in all of the page text while the image is being downloaded, a more time-efficient process than having the browser wait until the full image file is downloaded before carrying on with the remainder of the text. To improve delivery of multiple images, one can spread the images out over many pages so that the entire directory does not have to be downloaded en masse.
Having imported a relatively low-resolution image for ease and speed of downloading, one can have the image itself, or adjacent text, link to the equivalent full-resolution image. Linking will be discussed later.
The process for including video or audio files is the same, with a potential difference arising if the computer or browser used to view the site does not have an appropriate application (eg, Microsoft Media Player) with which to play the clip. Although this is an infrequent problem, one should note that many browsers may open a new window to display such content. With more recent commercially produced Web pages, animation is frequently displayed by use of professional-quality programs such as Flash (Macromedia). Such programs often require the downloading of an appropriate plug-in: a small piece of software that permits the multimedia component to be displayed in the original window.
|
Creating Hyperlinks
|
|---|
Without question, the single most powerful feature of HTML is its ability to link a piece of text or an image with another piece of text, another image, another file in the same directory, or another Web page on the World Wide Web.
As cross-referencing is such an integral part of medical knowledge and research, one can intuitively see a myriad of applications of this hyper-linking capability (eg, accessing a teaching file, a database, or portions within a large review document). For an individual radiologist, the ability to link disparate teaching materials in multiple formats (eg, text, image, and multimedia) provides unlimited potential for composing Web-based tutorials.
To create a link, one first defines the starting point, which is known as the anchor. This is the piece of text or image that will function as the link to the next page of interest. The HTML code <A HREF="chapter1.htm">Chapter 1</A> is used to define an anchor. The A HREF portion signifies that an anchor is being defined (A) with a hyperlink reference (HREF), which will link to another Web page, saved as an HTML document (chapter1.htm in the same directory), that will open on clicking the on-screen text Chapter 1. The </A> tag signifies the end of content functioning as a link to chapter 1.
The link will usually be highlighted, typically by underlining and by a different-color text, as described earlier, so that the viewer can recognize it as a link. The highlighting, different coloration, and so on of the link are achieved by use of further attributes of the <A HREF> tag.
For example, if one is writing an online text with multiple chapters, the sample link given earlier will link to chapter 1. Most important, the chapter 1 file must exist or else the pointer will not function and you will get a "page will not display" response from the browser. This will also occur if a site to which one links is unmaintained and the old address rendered defunct.
The sample link given earlier is an example of relative linking, which refers to a link to another file in the same folder on the hard drive. Because the originating page and the linked page are in the same folder, no other addressing information needs to be supplied other than the file name, even if the entire folder is moved. If a Web page is planned with only internal links, one need include only the file name in the link, provided all related files are saved in the same directory or folder.
An absolute link is a link to a Web site address that is already published to the World Wide Web, whose location is permanent. An example is the Web site of the Radiological Society of North America (RSNA) (Fig 9).
Bookmarks
Particularly in long documents, it is useful to link to specific locations on a particular page (eg, further down in an especially long entry). The location to which the link points then becomes known as a bookmark.
The HTML code is straightforward: within the elements of the body tag, the HTML shown in Figure 10a is typed. Thus, in the actual Web page, the text appears as shown in Figure 10b. The word begin serves as a link to jump down the page to the word Educational.
The first line of HTML in Figure 10a serves to define the link and the point within websitedesign .htm. This point is defined in the second line of HTML by nominating (bookmarking) the word Educational with the NAME="Educational" attribute.
If one wanted to devise a simple radiology quiz, one could "hide" the answers further down the page, with a link to the answer or another Web page entirely, with the latter less conducive to cheating.
The small descriptive bars that pop up when one’s mouse passes over a link, giving an indication of the content of the link without actually following it, are particularly helpful to users with slow connections. This allows users to be selective in which links they follow. These are designed by inserting another attribute, the TITLE attribute, at the time of definition of the anchor (Fig 11). The TITLE attribute defines the text that will appear in the pop-up bar.
Using an Image as an Anchor
Setting an image link is similar to setting a simple text link, with an additional piece of HTML required to define the image in question. As mentioned earlier, the addition of the TITLE attribute provides a pop-up bar indicating the location to which the link connects (Fig 12). Linking to another file in the same folder on your hard drive and linking to an outside uniform resource locator (URL) have been described.
View larger version (27K):
[in this window]
[in a new window]
[Download PPT slide]
|
Figure 12a. (a) Screen from Notepad shows the HTML code for creating a link by using an image (the RadioGraphics logo) with an accompanying pop-up title bar. (b) Screen from the open-source Mozilla browser shows the resultant display. The pop-up bar indicates the location to which the link connects. (The location is self-evident in this instance, but that is not always the case.)
|
|
View larger version (47K):
[in this window]
[in a new window]
[Download PPT slide]
|
Figure 12b. (a) Screen from Notepad shows the HTML code for creating a link by using an image (the RadioGraphics logo) with an accompanying pop-up title bar. (b) Screen from the open-source Mozilla browser shows the resultant display. The pop-up bar indicates the location to which the link connects. (The location is self-evident in this instance, but that is not always the case.)
|
|
Image Maps
An extension of using an image as an anchor is the ability to create links originating from different points on a particular image. Such links are known as image maps. These are seen frequently on Web sites that contain geographic maps; clicking on the portion of the map representing a particular state connects one to another page with information relating to that state.
Similarly, one can apply this to radiology by constructing image maps based on a radiographic or cross-sectional image; passing the mouse over a particular organ or anomaly will then bring up a link that one can follow for further information (eg, anatomic or pathologic). The details of constructing an image map are beyond the scope of this article.
Interactivity: Forms, Buttons, and Bars
Creating interactive forms in HTML is straightforward. A form whereby a user can enter text is designed as shown in Figure 13a . The <FORM> </FORM> tag pair creates the general form, with the attribute ACTION defining where the information will go and the METHOD attribute defining how the data are transferred to the form processor.
The second line defines an input as a text box, tells the browser to expect a text entry, and gives it a name so it can be bookmarked and cross-referenced. The third line defines an input button for submission that will display the word (ie, the value) Submit (Fig 13b).
Text boxes produce free-form data, which are less easily processed than simple yes-or-no answers. The latter are more likely to be useful in a tutorial or quiz scenario.
Radio buttons are defined as shown in Figure 14a when a question is asked. The two TYPE= "RADIO" instructions define that two radio buttons will be placed on the screen with the word True beside one and False beside the other. By definition, only one radio button can be selected at a time, making them ideal for yes-no, true-false questions (Fig 14b).
Other input types permit the selection of an option form (eg, in the form of a drop-down menu) or permit the uploading of files (eg, online submission sites such as Manuscript Central). The processing of the submitted data is beyond the scope of this article. Briefly, however, it involves the common gateway interface (CGI), a piece of computer script that performs a prescribed action on the submitted data (eg, sends them to an e-mail address, searches a database on the basis of the information submitted, or enters the data in a database).
|
HTML Editors and Web Page Design Tools
|
|---|
In addition to writing one’s own HTML, there are three other methods of producing Web pages: (a) using Word (Microsoft) as an HTML compiler, (b) using tools to convert existing documents into HTML, and (c) WYSIWYG (what you see is what you get) Web page authoring tools.
Word as an HTML Compiler
In the latest versions of Word (version 7 and up), any text document can be typed and, instead of being saved as a Word document, it can be saved as an HTML file with the applied formatting intact (Fig 15a, 15b). This avoids the need to explicitly define the text formatting, as is required in HTML (although style sheets help greatly with this). Not only does Word have this feature, it also allows one to preserve color schemes, formatting, paragraphing, hyperlinks, and tables; to specify links and bookmarks by selecting the anchor text while still in Word format; and to insert forms, buttons, and so on from a drop-down menu (Fig 15c).
View larger version (77K):
[in this window]
[in a new window]
[Download PPT slide]
|
Figure 15a. (a, b) Screens from Word show the original document (a), which is saved as an HTML file (b). (c) Screen from Internet Explorer shows the resultant display. The complex formatting of the document, which includes a table, an image, and a hyperlink, is all intact.
|
|
View larger version (73K):
[in this window]
[in a new window]
[Download PPT slide]
|
Figure 15b. (a, b) Screens from Word show the original document (a), which is saved as an HTML file (b). (c) Screen from Internet Explorer shows the resultant display. The complex formatting of the document, which includes a table, an image, and a hyperlink, is all intact.
|
|
View larger version (71K):
[in this window]
[in a new window]
[Download PPT slide]
|
Figure 15c. (a, b) Screens from Word show the original document (a), which is saved as an HTML file (b). (c) Screen from Internet Explorer shows the resultant display. The complex formatting of the document, which includes a table, an image, and a hyperlink, is all intact.
|
|
PowerPoint also shares this feature, so that a presentation can be saved as HTML and a slide show viewed from within Internet Explorer. When this is done, an outline of the slides is shown in the left pane with hyperlinks to each slide, permitting the viewer to go directly to a topic of interest. The presentation may otherwise be navigated by use of the arrows at the bottom of the screen (Fig 16).
View larger version (90K):
[in this window]
[in a new window]
[Download PPT slide]
|
Figure 16. Screen from Internet Explorer shows a PowerPoint presentation that was converted to HTML by using the "save as HTML" function. One can open and scroll through the presentation by using the forward and back navigation buttons at the bottom of the screen or by selecting slides of interest from the left panel.
|
|
Document Converters
Any Word files older than version 7 can be converted to HTML by using the "save as Rich Text Format (RTF)" function. From there, they are converted to HTML by using a program called RTFtoHTML (Logictran, Minnetonka, Minn) (Fig 17). The program may be downloaded from www.logictran.net/products. In the past, this process has not been entirely robust, with complex table formatting and so on frequently lost in translation.
View larger version (56K):
[in this window]
[in a new window]
[Download PPT slide]
|
Figure 17. Screen from the Logictran Web site shows a number of products for converting old Word or Rich Text Format (RTF) documents to HTML or from HTML to Rich Text Format. XML = extensible markup language.
|
|
Other proprietary document converters include PageMaker (Adobe Systems), a desktop publishing package that permits direct to-and-from HTML conversion.
HTML Editors and Web Authoring Tools
There are proprietary packages that require no knowledge of HTML to begin authoring one’s own Web pages. In the design phase, these programs allow one to see the Web page as it will appear when uploaded to the Web. Thus, these packages are known as "what you see is what you get" (WYSIWYG) editors.
The latter are similar to preparing a Word document and are relatively intuitive as one becomes more familiar with their use. The two most widely used packages are FrontPage (Microsoft) and Dreamweaver (Macromedia).
FrontPage.—
As FrontPage is part of the Office (Microsoft) family of programs, people who have experience using Word, PowerPoint, or Excel can adapt to the similar-format FrontPage, which allows one to format text, insert images, and create interactive forms, all at the click of a button or a selection from a drop-down menu. Predesigned templates are available to choose from, similar to the design templates found in PowerPoint when preparing a presentation (Fig 18). In addition, FrontPage offers helpful features with regard to the overall structure of one’s Web site, organizing its layout by using a tree structure for all files and folders required for the site’s display. Also, if one has a Web page to which many other pages are linked and you rename that file, FrontPage will automatically update links in the other files.
View larger version (35K):
[in this window]
[in a new window]
[Download PPT slide]
|
Figure 18a. (a) Opening screen from FrontPage shows its striking similarity to the other programs in the Office family, with which many radiologists are familiar. (b–d) Text typed in the opening screen (b) may be viewed in HTML format (c) or as it will appear in Internet Explorer (d).
|
|
View larger version (44K):
[in this window]
[in a new window]
[Download PPT slide]
|
Figure 18b. (a) Opening screen from FrontPage shows its striking similarity to the other programs in the Office family, with which many radiologists are familiar. (b–d) Text typed in the opening screen (b) may be viewed in HTML format (c) or as it will appear in Internet Explorer (d).
|
|
View larger version (48K):
[in this window]
[in a new window]
[Download PPT slide]
|
Figure 18c. (a) Opening screen from FrontPage shows its striking similarity to the other programs in the Office family, with which many radiologists are familiar. (b–d) Text typed in the opening screen (b) may be viewed in HTML format (c) or as it will appear in Internet Explorer (d).
|
|
View larger version (45K):
[in this window]
[in a new window]
[Download PPT slide]
|
Figure 18d. (a) Opening screen from FrontPage shows its striking similarity to the other programs in the Office family, with which many radiologists are familiar. (b–d) Text typed in the opening screen (b) may be viewed in HTML format (c) or as it will appear in Internet Explorer (d).
|
|
For those who are not familiar with file transfer protocol (FTP), FrontPage has a tool that uploads one’s site to the Internet service provider (ISP) without the need for a separate FTP client.
Dreamweaver.—
Dreamweaver is a product that produces professional results and permits the use of complex Web display functions such as Flash for smooth animation effects. Reminiscent of PhotoShop is Dreamweaver’s ability to write code for the same page in layers and offering the Web author the capability of flipping between the layers and reviewing the changes instantaneously. The initial work screen is also reminiscent of PhotoShop in that it is densely packed with features that are not immediately intuitive in their usage (Fig 19).
View larger version (50K):
[in this window]
[in a new window]
[Download PPT slide]
|
Figure 19. Screen from Dreamweaver. Although some elements are similar to those of Office products, the Dreamweaver work sheet remains initially daunting, particularly for the beginner.
|
|
Among its many capabilities, Dreamweaver can create an interactive image map (an image with many different links, as described earlier) from a normal image inside the program itself.
In common with FrontPage, Dreamweaver also has a built-in FTP client, called the site manager, with which one can view, upload, or download local and remote copies of one’s files. The site manager permits renaming of one’s files and, after prompting, will rename all links in other files that point to the renamed files. Dreamweaver is also compatible with recent Web developments such as cascading style sheets, which can be created inside the program.
Beginners wishing to design a quick and easy Web site are advised to use FrontPage; however, for professional content and a Web site that will interact well with databases and provide e-commerce capabilities, Dreamweaver is recommended.
|
Publishing Pages to the Internet
|
|---|
In the discussion thus far, all the design features apply to files that reside in a particular folder on a hard drive or a compact disk (CD); apart from the absolute links mentioned earlier, a connection to the World Wide Web is not required. If one wishes to publish to the Web, the process is called uploading.
The first requirement is actual Web space, the "virtual address" from which to conduct one’s business. This is physical space on the server, which is the remote computer that routes Web pages to and from users. In general, Web space needs to be purchased, especially if the site is advertising or has commercial value. However, home Internet service provider accounts often have a Web space allowance that can be used by individuals who wish to publish a noncommercial site.
To ensure smooth operation, certain aspects of one’s site require reexamination before uploading. These aspects include file names, file size, links, and site navigation.
File Names
All file names should be lowercase and should not contain any spaces. All files should have the correct extension (eg, ".html" for an HTML file, ".jpg" for a JPEG file). As a rule of thumb, one should ensure that all files are in the same folder. Internet service providers usually permit the use of a default site name, which will generally be shorter, more intuitive, and less cumbersome than the full directory address, hence the short domain name used by companies such as Google or the RSNA (eg, www.rsna.org).
File Size
File size is probably the single most important factor for fast, efficient page downloading: Files, including images, should be as small as possible without excess degradation or resolution loss. As the entire directory containing the files is uploaded, redundant files in the account will slow the process down and should be deleted.
One should review the total size of the project. This is calculated by dividing the total size (in kilobytes) by the number of Web pages in the folder. The result should be no more than 50–60 kB for optimal download speeds. As memory-hungry images tend to take up a lot of space, most online publications initially offer a low-resolution version of an image with a hyperlink to a larger, full-resolution version, which the user may then choose with the knowledge that additional down-loading time will be necessary. As Broadband connections become more widely available, these size restrictions are likely to become less relevant.
Run-through
Posting a Web site is more like a recurring oral presentation than a static scientific exhibit, and so rehearsal is of great importance. The browser should be opened to run-through, making sure all the links function as expected. Ideally, one should do this using a number of different browsers in order to elicit browser-specific bugs or glitches.
Broken links may have several causes: (a) The file name in the document may not match the name of the file to which you wish to link. (b) The file may be lost or deleted by mistake. (c) The file may not be a correct HTML file. (d) An unmaintained external site may cease to exist.
Site Navigation
A Web site can be designed with different navigation structures. For example, a hierarchical model offers the viewer a choice of directions to follow, whereas a linear model permits only forward-and-back navigation.
Uploading the Folder
To upload the folder, an FTP program is required. For IBM PC–compatible computers, CuteFTP (Globalscape Content Management, San Antonio, Tex) (www.cuteftp.com/cuteftp/index.asp) is typically used. For Macintosh computers (Apple Computer, Cupertino, Calif), Fetch (Fetch Softworks, Etna, NH) (http://fetchsoftworks.com) is typically used.
When uploading files via CuteFTP, one is eventually presented with a pair of windows. One window represents the directory on your computer, the other represents the directory into which the files will be transferred. One can then "drag and drop" the required files or folders from one window to the other (Fig 20).
View larger version (88K):
[in this window]
[in a new window]
[Download PPT slide]
|
Figure 20. Upload screen from Cute-FTP. Files from one’s personal computer may be "dragged and dropped" into the upload window. From there, they are uploaded by CuteFTP to the World Wide Web.
|
|
Registering with Search Engines
To enable people to find one’s site if it contains information pertinent to their search, one can either wait for one of the widely used search engines (eg, Google or Yahoo) to eventually make a match, or one can inform the search engines directly. Search engines may be contacted individually or through a proprietary product such as Submit It (bCentral [a subsidiary of Microsoft]) (www.bcentral.com/products/si/default.asp?LID=34249). Submit It registers your page with multiple engines and also provides a "readiness check" of one’s site prior to publication (Fig 21).
View larger version (52K):
[in this window]
[in a new window]
[Download PPT slide]
|
Figure 21. Screen from the Submit It demonstration program. With this program, readiness checks are performed and keywords relating to the material on one’s site are sent to multiple search engines.
|
|
Search engines index the words that appear in the title bar of your site. There is also an HTML <meta> tag, which permits the main title to serve as a pointer to the other pages or bookmarks in your site by defining keywords in your site, similar to the use of keywords to cross-reference scientific publications.
|
Summary and Conclusions
|
|---|
The background of HTML has been described, and the desirability of acquiring a knowledge of HTML has been put forward as a means of understanding Web page construction, particularly when it comes to employing a professional to design a site for you.
The basic HTML for producing a simple home page from which one can link to text, images, multimedia files, and other Web sites has been provided (combined in Fig 22) and explained. Alternative Web authoring techniques have been reviewed, and the techniques for publishing the finished product to the Web have been described.
View larger version (33K):
[in this window]
[in a new window]
[Download PPT slide]
|
Figure 22. Screen from Notepad shows the combined HTML code for creating a simple Web page displaying text, an image, and a link to the RSNA home page. The image file (image.jpg) represents an image of your choosing that must be named and saved appropriately, as described in the text.
|
|
The potential of Web-based tutorials has been discussed. It is not so long since the preparation of a PowerPoint presentation was daunting; perhaps Web site design will soon appear as trivial as a PowerPoint presentation now appears. Conceivably, in the move away from paper-based scientific exhibits, PowerPoint presentations may in time become outdated and all exhibits at international meetings will be not only computer based but Web based. This article should aid readers in taking their first steps in this direction.
|
TAKE-HOME POINTS
|
|---|
A knowledge of Web page construction and HTML facilitates the production of Web-based tutorials, storage for a teaching library, publication of information about one’s practice, and information gathering from an unlimited variety of sources.
Many existing software applications now permit conversion of an original document or presentation into a Web page format at the press of a button.
PowerPoint presentations are likely to be replaced at major meetings by Web-based presentations, the production of which can be learned with minimal reading and effort.
|
Footnotes
|
|---|
Abbreviations: FTP = file transfer protocol, GIF = Graphics Interchange Format, HTML = hypertext markup language, JPEG = Joint Photographic Experts Group, RSNA = Radiological Society of North America
|
References
|
|---|
- Barnhardt LE. A Y2K imperative for radiology [editorial]. RadioGraphics
1999; 19:1671–1672.[Free Full Text]
- Weinberger E, Jakobovits R, Halsted M. MyPACS .net: a Web-based teaching file authoring tool. AJR Am J Roentgenol
2002; 179:579–582.[Abstract/Free Full Text]
- Goldberg DJ, DeMarco JK, Parikh T. Internet-based interactive teaching file for neuroradiology. AJR Am J Roentgenol
2000; 175:1371–1373.[Abstract/Free Full Text]
- Richardson ML. A World-Wide Web radiology teaching file server on the Internet. AJR Am J Roentgenol
1995; 164:479–483.[Abstract/Free Full Text]
- Jefford M, Phillips KA, Tattersall MH. An online educational facility for medical oncology trainees: www.vmotg.org. J Clin Oncol
2001; 19:2566–2569.[Abstract/Free Full Text]
- Tello R, Davison BD, Blickman JG. The virtual course: delivery of live and recorded continuing medical education material over the Internet. AJR Am J Roentgenol
2000; 174:1519–1521.[Abstract/Free Full Text]
- Frank MS, Dreyer K. Empowering radiologic education on the Internet: a new virtual website technology for hosting interactive educational content on the World Wide Web. J Digit Imaging
2001; 14(2 suppl 1):113–116.[Medline]
- Capusten B. Continuing professional development for radiologists using the Web as a delivery vehicle. J Digit Imaging
2000; 13(2 suppl 1):54–55.[Medline]
- Oberson JC, Welz R, Bovisi L. Development of an electronic radiologist’s office in a private institute. RadioGraphics
2000; 20:573–580.[Abstract/Free Full Text]
- Reid JR, Goske MJ, Hewson MG, Obuchowski N. Creating an international comprehensive web-based curriculum in pediatric radiology. AJR Am J Roentgenol
2004; 182:797–801.[Abstract/Free Full Text]
- Blackmore CC, Richardson ML, Linnau KF, et al. Web-based image review and data acquisition for multiinstitutional research. AJR Am J Roentgenol
2003; 180:1243–1246.[Abstract/Free Full Text]
- Willing SJ, Berland LL. A radiology department intranet: development and applications. RadioGraphics
1999; 19:169–182.[Abstract/Free Full Text]
- Coleman P, et al, eds. HTML complete. 2nd ed. San Francisco, Calif: Sybex, 2000.
- Powell TA, Whitworth D. HTML: programmer’s reference. 2nd ed. New York, NY: Osborne/McGraw-Hill, 2001.
- Musciano C, Kennedy B. HTML: the definitive guide. 3rd ed. Cambridge, Mass: O’Reilly & Associates, 1998.
- Halsted MJ, Moskovitz J, Johnson N, Perry L. A simple method of capturing PACS and other radiographic images for digital teaching files or other image repositories. AJR Am J Roentgenol
2002; 178:817–819.[Abstract/Free Full Text]
- LaBerge JM, Andriole KP. Digital image processing: a primer for JVIR authors and readers. I. The fundamentals. J Vasc Interv Radiol
2003; 14:1223–1230.[Medline]
- LaBerge JM, Andriole KP. Digital image processing: a primer for JVIR authors and readers. II. Digital image acquisition. J Vasc Interv Radiol
2003; 14:1365–1372.[Medline]
- LaBerge JM, Andriole KP. Digital image processing: a primer for JVIR authors and readers. III. Digital image editing. J Vasc Interv Radiol
2003; 14:1481–1487.[Medline]
- Caruso RD, Postel GC. Image editing with Adobe Photoshop 6.0. RadioGraphics
2002; 22:993–1002.[Abstract/Free Full Text]
- Corl FM, Garland MR, Lawler LP, Fishman EK. A five-step approach to digital image manipulation for the radiologist. RadioGraphics
2002; 22:981–992.[Abstract/Free Full Text]
This article has been cited by other articles:
|
|
|
|
 
D. Hoa, A. Micheau, and G. Gahide
Creating an Interactive Web-based e-Learning Course: A Practical Introduction for Radiologists
RadioGraphics,
November 1, 2006;
26(6):
e25 - e25.
[Abstract]
[Full Text]
|
|
|
eLetters:
Read all eLetters
- Blogging for a Radiologist: An Easy Method for Web Site Building and Information Exchange
- Sumer Kumar Sethi
- RadioGraphics Online, 29 Sep 2005
[Full text]
Top
Abstract
Introduction
