RadioGraphics
HOME HELP FEEDBACK SUBSCRIPTIONS ARCHIVE SEARCH TABLE OF CONTENTS
QUICK SEARCH:   [advanced]


     

DOI: 10.1148/rg.254045119
This Article
Right arrow Abstract Freely available
Right arrow Full Text
Right arrow Full Text (PDF)
Right arrow Submit a response
Right arrow View responses
Right arrow Alert me when this article is cited
Right arrow Alert me when eLetters are posted
Right arrow Alert me if a correction is posted
Right arrow Citation Map
Services
Right arrow Email this article to a friend
Right arrow Similar articles in this journal
Right arrow Similar articles in PubMed
Right arrow Alert me to new issues of the journal
Right arrow Download to citation manager
Right arrow reprints & permissions
Citing Articles
Right arrow Citing Articles via HighWire
Right arrow Citing Articles via Google Scholar
Google Scholar
Right arrow Articles by Ryan, A. G.
Right arrow Articles by Yee, W. C.
Right arrow Search for Related Content
PubMed
Right arrow PubMed Citation
Right arrow Articles by Ryan, A. G.
Right arrow Articles by Yee, W. C.
Related Collections
Right arrow Informatics

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.


View larger version (45K):

[in a new window]
  		Figure 1.  Screens from Notepad show the HTML code for the basic Web page template (rear screen) and the file being saved with the extension ".html" (front screen).

 


View larger version (98K):

[in a new window]
  		Figure 2a.  Screens from Internet Explorer show the saved file being opened by specifying the directory (a) or using the browse function (b).

 


View larger version (64K):

[in a new window]
  		Figure 2b.  Screens from Internet Explorer show the saved file being opened by specifying the directory (a) or using the browse function (b).

 


View larger version (62K):

[in a new window]
  		Figure 3.  Screen from Internet Explorer shows a blank page with "Website design" in the title bar.

 


View larger version (76K):

[in a new window]
  		Figure 4a.  Screens from Internet Explorer show selection of Source from the View drop-down menu (a) and the browser and Notepad open simultaneously (b).

 


View larger version (94K):

[in a new window]
  		Figure 4b.  Screens from Internet Explorer show selection of Source from the View drop-down menu (a) and the browser and Notepad open simultaneously (b).

 


View larger version (82K):

[in a new window]
  		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 a new window]
  		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.

 


View larger version (21K):

[in a new window]
  		Figure 6.  Screen from Notepad shows the HTML code for creating an ordered list.

 


View larger version (28K):

[in a new window]
  		Figure 7.  Screen from Notepad shows the HTML code for creating a table.

 


View larger version (97K):

[in a new window]
  		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.

 


View larger version (29K):

[in a new window]
  		Figure 9a.  (a) Screen from Notepad shows the HTML code for creating an absolute link to the RSNA home page. (b) Screen from Internet Explorer shows the resultant display.

 


View larger version (77K):

[in a new window]
  		Figure 9b.  (a) Screen from Notepad shows the HTML code for creating an absolute link to the RSNA home page. (b) Screen from Internet Explorer shows the resultant display.

 


View larger version (27K):

[in a new window]
  		Figure 10a.  (a) Screen from Notepad shows the HTML code for creating a bookmark. (b) Screen from Internet Explorer shows the resultant display.

 


View larger version (58K):

[in a new window]
  		Figure 10b.  (a) Screen from Notepad shows the HTML code for creating a bookmark. (b) Screen from Internet Explorer shows the resultant display.

 


View larger version (27K):

[in a new window]
  		Figure 11.  Screen from Notepad shows the HTML code for creating a pop-up bar.

 


View larger version (27K):

[in a new window]
  		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 a new window]
  		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.)

 


View larger version (37K):

[in a new window]
  		Figure 13a.  (a) Screen from Notepad shows the HTML code for creating a form for data submission. (b) Screen from Internet Explorer shows the resultant display.

 


View larger version (63K):

[in a new window]
  		Figure 13b.  (a) Screen from Notepad shows the HTML code for creating a form for data submission. (b) Screen from Internet Explorer shows the resultant display.

 


View larger version (30K):

[in a new window]
  		Figure 14a.  (a) Screen from Notepad shows the HTML code for creating radio buttons for use with a true-false quiz. (b) Screen from Internet Explorer shows the resultant display.

 


View larger version (63K):

[in a new window]
  		Figure 14b.  (a) Screen from Notepad shows the HTML code for creating radio buttons for use with a true-false quiz. (b) Screen from Internet Explorer shows the resultant display.

 


View larger version (77K):

[in a new window]
  		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 a new window]
  		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 a new window]
  		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.

 


View larger version (90K):

[in a new window]
  		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.

 


View larger version (56K):

[in a new window]
  		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.

 


View larger version (35K):

[in a new window]
  		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 a new window]
  		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 a new window]
  		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 a new window]
  		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).

 


View larger version (50K):

[in a new window]
  		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.

 


View larger version (88K):

[in a new window]
  		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.

 


View larger version (52K):

[in a new window]
  		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.

 


View larger version (33K):

[in a new window]
  		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.

 




HOME HELP FEEDBACK SUBSCRIPTIONS ARCHIVE SEARCH TABLE OF CONTENTS
RADIOGRAPHICS RADIOLOGY RSNA JOURNALS ONLINE
Copyright © 2005 by the Radiological Society of North America.