Please don't look at these unless you are really struggling!
<html>
<head>
<title>Dr. Andrew C.R. Martin</title>
</head>
<body>
<h1 align='center'>Dr. Andrew C.R. Martin</h1>
<h2 align='center'>Lecturer in Bioinformatics, UCL</h2>
<p align='right'>
<font face='Courier,monospace'>martin@biochem.ucl.ac.uk</font>
</p>
<h3>Address</h3>
<img src='3hfl.gif' alt='3hfl' align='right' />
<p>Department of Biochemistry and Molecular Biology<br />
University College London<br />
Darwin Building<br />
Gower Street<br />
London<br />
WC1E 6BT
</p>
<h3>Interests</h3>
<p>
My research focusses on structural bioinformatics: developing tools to
investigate and understand the relationship between protein sequence,
structure and function. Within this general area, my main interests
are protein modelling, structural analysis, structural immunology,
effects of mutation on protein structure and disease, application of
relational databases, automation and software development.
</p>
<h3>Links</h3>
<ul>
<li><a href='http://www.bioinf.org.uk/'>http://www.bioinf.org.uk/</a>
My Bioinformatics pages</li>
<li><a href='http://www.ebi.ac.uk/'>http://www.ebi.ac.uk/</a>
The EBI</li>
<li><a href='http://www.ncbi.nlm.nih.gov/'>http://www.ncbi.nlm.nih.gov/</a>
The NCBI</li>
</ul>
</body>
</html>
This solution uses separate classes for each heading and paragraph.
<html>
<head>
<style type='text/css'>
<!--
body { background: #FFFFFF; }
.name { font: bold 24pt Helvetica, Arial, sans-serif;
text-align: center;
color: #FFFFFF;
background: #84032C;
padding: 0.25em;
margin: 10px 0px 2px 0px;
}
.job { font: bold 18pt Helvetica, Arial, sans-serif;
text-align: center;
color: #5270A2;
background: #F4E3F5;
padding: 0.25em;
margin: 2px 0px 4px 0px;
}
.email { font: 14pt Courier, monospace;
text-align: right;
color: #AA0000;
}
.address_head {padding: 5px;
font: bold 14pt Helvetica, Arial, sans-serif;
background: #E78F47;
color: #FFFFFF;
margin: 10px 0px 0px 0px;
}
.address {background: #F2D5A8;
color: #000000;
margin: 0px 0px 10px 0px;
padding: 10px;
}
.address_image {background: #F2D5A8;
color: #000000;
margin: 10px 10px 2px 2px;
padding: 0px;
float: right;
}
.interests_head {padding: 5px;
font: bold 14pt Helvetica, Arial, sans-serif;
background: #336699;
color: #FFFFFF;
margin: 10px 0px 0px 0px;
}
.interests {background: #B5CDE6;
color: #000000;
margin: 0px 0px 10px 0px;
padding: 10px;
}
.links_head {padding: 5px;
font: bold 14pt Helvetica, Arial, sans-serif;
background: #E78F47;
color: #FFFFFF;
margin: 10px 0px 0px 0px;
}
.links {background: #F2D5A8;
color: #000000;
margin: 0px 0px 10px 0px;
padding: 10px 10px 10px 30px;
}
-->
</style>
<title>Dr. Andrew C.R. Martin</title>
</head>
<body>
<h1 class='name'>Dr. Andrew C.R. Martin</h1>
<h2 class='job'>Lecturer in Bioinformatics, UCL</h2>
<p class='email'>
martin@biochem.ucl.ac.uk
</p>
<img src='3hfl.gif' alt='3hfl' class='address_image' />
<h3 class='address_head'>Address</h3>
<p class='address'>
Department of Biochemistry and Molecular Biology<br />
University College London<br />
Darwin Building<br />
Gower Street<br />
London<br />
WC1E 6BT
</p>
<h3 class='interests_head'>Interests</h3>
<p class='interests'>
My research focusses on structural bioinformatics: developing tools to
investigate and understand the relationship between protein sequence,
structure and function. Within this general area, my main interests
are protein modelling, structural analysis, structural immunology,
effects of mutation on protein structure and disease, application of
relational databases, automation and software development.
</p>
<h3 class='links_head'>Links</h3>
<ul class='links'>
<li><a href='http://www.bioinf.org.uk/'>http://www.bioinf.org.uk/</a>
My Bioinformatics pages</li>
<li><a href='http://www.ebi.ac.uk/'>http://www.ebi.ac.uk/</a>
The EBI</li>
<li><a href='http://www.ncbi.nlm.nih.gov/'>http://www.ncbi.nlm.nih.gov/</a>
The NCBI</li>
</ul>
</body>
</html>
This solutions uses slightly more advanced CSS with a div for each section and CSS constructs that allow the styling of a paragraph within a particular div class. This simplifies the HTML.
<html>
<head>
<style type='text/css'>
<!--
body { background: #FFFFFF; }
.name { font: bold 24pt Helvetica, Arial, sans-serif;
text-align: center;
color: #FFFFFF;
background: #84032C;
padding: 0.25em;
margin: 10px 0px 2px 0px;
}
.job { font: bold 18pt Helvetica, Arial, sans-serif;
text-align: center;
color: #5270A2;
background: #F4E3F5;
padding: 0.25em;
margin: 2px 0px 4px 0px;
}
.email { font: 14pt Courier, monospace;
text-align: right;
color: #AA0000;
}
.address, .links {background: #F2D5A8;
color: #000000;
margin: 0px 0px 10px 0px;
padding: 0px;
}
.address h3, .links h3 {padding: 5px;
font: bold 14pt Helvetica, Arial, sans-serif;
background: #E78F47;
color: #FFFFFF;
margin: 0;
}
.address p {padding: 10px;
margin: 0;}
.address img {margin: 1em 1em 0 0;
padding: 0px;
float: right;
}
.links ul {padding: 10px 10px 10px 2em;
margin:0;}
.interests {background: #B5CDE6;
color: #000000;
margin: 0px 0px 10px 0px;
padding: 0px;
}
.interests h3 {padding: 5px;
font: bold 14pt Helvetica, Arial, sans-serif;
background: #336699;
color: #FFFFFF;
margin: 0;
}
.interests p {padding: 10px;
margin: 0;}
-->
</style>
<title>Prof. Andrew C.R. Martin</title>
</head>
<body>
<h1 class='name'>Prof. Andrew C.R. Martin</h1>
<h2 class='job'>Professor of Bioinformatics and Computational Biology, UCL</h2>
<p class='email'>
andrew@bioinf.org.uk
</p>
<div class='address'>
<img src='3hfl.gif' alt='3hfl' />
<h3>Address</h3>
<p>
Department of Biochemistry and Molecular Biology<br />
University College London<br />
Darwin Building<br />
Gower Street<br />
London<br />
WC1E 6BT
</p>
</div>
<div class='interests'>
<h3>Interests</h3>
<p>
My research focusses on structural bioinformatics: developing tools to
investigate and understand the relationship between protein sequence,
structure and function. Within this general area, my main interests
are protein modelling, structural analysis, structural immunology,
effects of mutation on protein structure and disease, application of
relational databases, automation and software development.
</p>
</div>
<div class='links'>
<h3>Links</h3>
<ul>
<li><a href='http://www.bioinf.org.uk/'>http://www.bioinf.org.uk/</a>
My Bioinformatics pages</li>
<li><a href='http://www.ebi.ac.uk/'>http://www.ebi.ac.uk/</a>
The EBI</li>
<li><a href='http://www.ncbi.nlm.nih.gov/'>http://www.ncbi.nlm.nih.gov/</a>
The NCBI</li>
</ul>
</div>
</body>
</html>