APRIL 2001
Creating a Web Page for the ACDM Website - Part II Pictures & tables...
In 'Part I' (July Newsletter 2000) I introduced some basic HTML (Hyper-Text Mark-Up Language) tags to get you started on your first web page hopefully bound for the ACDM website! If you are already able to create web pages these articles are probably too basic for you but I'd be glad to hear from you if you have any suggestions for the ACDM website or for topics for future webbie articles...
These days, many applications have a save as HTML option (eg. MSWord) which is a quick and easy way to create a web page. However, by recognising a little HTML you will be able to understand and improve the code that these applications write for you. This may be important if you wish to take advantage of the ACDM style sheet - you'll need to know whether the save as HTML function has inserted the correct tag for the style sheet to take affect.1
In the last article we covered the following tags:
<html>begining and end tag for any html document</html>
<head>start and end of header info</head>
<title>text written here will appear on the browser title bar</title>
<body>start and end of main body of web page</body>
<h1>Heading size 1</h1>
<h2>Heading size 2 etc..</h2>
<b>BOLD</b>
<i>ITALIC</i>
<tt>TEXT TYPE</t>
<u>UNDERLINE</u>
<big>BIG!</big>
<small>SMALL!</small>
<sup>SUPERSCRIPT</sup>
<sub>SUBSCRIPT</sub>
<s>STRIKE THROUGH</s>
<hr>will give you a line across your screen to divide up a document
<blink>TEXT WILL BLINK</blink>
<font size="1-7"> it is better practice to use the heading tags </font>
<font color="red"> you need to spell color with no 'u' </font>
<p> new paragraph </p>
<br>line break </br>
These tags give you enough capability to create a straightforward web page but it may appear a little boring. The next set of tags I will describe should help improve the composition and interest of your web pages.
It's all image....
You can spice up your web pages by adding in images. Although it's easy to go mad and add in loads of animated .gif files (there are loads available for free download on the WWW) try to think of the person trying to read your web page with all manner of creatures bopping about on the screen...
The most common types of image files used on web pages are bitmaps (.bmp) Graphic Interchange Format (.gif) or Joint Photographics Experts Group (.jpeg).
To add in an image to your web page use the image tag as follows:- In the body of your document type:
<img src="image_name.gif">
Of course you should replace "image_name.gif" with the actual name of your image file.
acdm.html
<html>
<head>
<title> Your title </title>
</head>
,body>

This is text that will appear on your web page.
<img src="acdm_log.gif">
some more text

</body>
<?html>

Text may not wrap around your image as you might like, but there are several solutions to this. One solution is to use tables to position text and images where you would like them on the page. If you wish you can make the borders of your tables invisible so that all you see are the text and pictures.
Top of the Table...
There are three tag pairs involved in creating a table in HTML:
The Table tag <table></table> (signals the beginning and end of each table)
The Row tag <tr></tr> (signals the beginning and end of each row)
The Cell tag <td></td> (signals the beginning and end of each cell)
These are arranged as follows: (here I have created a 2 column, 3 row table):
<TABLE>
<TR>
<TD><B>Date</B></TD>
<TD><B>Event</B></TD>
</TR>
<TR>
<TD>25Feb2001</TD>
<TD>ACDM e-Conference</TD>
</TR>
<TR>
<TD>04Apr2001</TD>
<TD>Senior Clinical Data Managers Forum</TD>
</TR>
</TABLE>
(note: the heading of each column has been bolded using the <b>,</b> tag pair.) This will appear on the screen like this:
C:acdm.html
Date
25Feb2001
04Apr2001
Event
ACDM eConference
Senior Clinical Data Managers Forum
You can enhance the look of the table by adding attributes into the <table> tag as follows:
<TABLE BORDER="7" WIDTH="70%" CELLPADDING="10" CELLSPACING="5">
Play around with the numbers until you reach the affect you like.
Border - specifies the width of the border around the table
Width - specifies the width of the table on the screen. This is best done in percentages. This table will cover 70% of the screen no matter the size of the browser viewing it.
Cellpadding - the amount of distance between the cell border and the text in the cell.
Cellspacing - the space between each cell.
The affect of this is on our table is:
Date Event
25Feb2001 ACDM eConference
04Apr2001 Senior Clinical Data Managers Forum
To add an image into the table simply add the image tag into on of the cells - eg:
<TABLE>
<TR>
<TD><B>Date</B></TD>
<TD><B>Event</B></TD>
</TR>
<TR>
<TD>25Feb2001</TD>
<TD>ACDM e-Conference <img src="acdm_logo.gif">
</TD>
</TR>
<TR>
<TD>04Apr2001</TD>
<TD>Senior Clinical Data Managers Forum</TD>
</TR>
</TABLE>
Hopefully these few tips will allow you to create a more inviting web page. If you need to refer back to the first article you can find it on the Website Sub Committee's page. In a future article I will cover some more ideas about images and tables and some further formatting ideas.
If you are interested in creating a web page for the ACDM website please contact me via webmaster@acdm.org.uk I'd be glad to hear from you.
Happy webbing!
Corinne Hedgley
ACDM Website SC