I've been asked to be honorary editor of an online magazine and I'm trying to bring it up to date. As well as writing and editing content, I want to look at using a css file for styling and to bring in Bootstrap for display on different devices. The magazine was born in an age when phones were dumb or dumber and everyone viewed pages on a desktop!
I only have basic knowledge of CSS and a reasonable familiarity with HTML, sufficient to know when something is grossly inefficient without necessarily understanding how to correct it! Some parts of the page I cannot change, ie the corporate style of everything in a box 728 wide in the page centre.
Currently the magazine page is just htm, created with frontpage 4, with each magazine item in a bordered box created using html table commands.
Is there a way to do this more efficiently with a CSS ="stylesheet" in the [head] area, describing the layout of each box.?
Checking the page on WC3, the current format has failed in every area, so I need to do something to bring it up to date, but wonder if I what I want to achieve is "barking up the wrong tree" and I should do something different?
Any help would be gratefully received. The existing html is below. There just has to be a better, easier way of doing this.
Thanks for reading
NW
I only have basic knowledge of CSS and a reasonable familiarity with HTML, sufficient to know when something is grossly inefficient without necessarily understanding how to correct it! Some parts of the page I cannot change, ie the corporate style of everything in a box 728 wide in the page centre.
Currently the magazine page is just htm, created with frontpage 4, with each magazine item in a bordered box created using html table commands.
Is there a way to do this more efficiently with a CSS ="stylesheet" in the [head] area, describing the layout of each box.?
Checking the page on WC3, the current format has failed in every area, so I need to do something to bring it up to date, but wonder if I what I want to achieve is "barking up the wrong tree" and I should do something different?
Any help would be gratefully received. The existing html is below. There just has to be a better, easier way of doing this.
Thanks for reading
NW
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Sun, 28 Jun 2020 13:30:49 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Magazine 335</title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body topmargin="0">
<p align="center" style="margin-top: 0; margin-bottom: 4"><img border="0" src="images305/crest.jpg" width="101" height="140"></p>
<div align="center">
<center>
<table border="2" cellpadding="0" cellspacing="0" width="728" bordercolor="#00CCFF">
<tr>
<td bgcolor="#c0c0c0">
<p align="center" style="margin-top: 10; margin-bottom: 10"><font size="6">Article title</font></td>
</tr>
<tr>
<td>
<p style="margin-left: 10; margin-right: 10; margin-top: 0; margin-bottom: 0">The body text goes here:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<p style="margin-left: 10; margin-right: 10; margin-top: 0; margin-bottom: 0">
<p style="margin-left: 10; margin-right: 10; margin-top: 0; margin-bottom: 10">Photo title if used</td>
</tr>
</table>
</center>
</div>
<p align="center" style="margin-top: 0; margin-bottom: 4"><img border="0" src="images305/crest.jpg" width="101" height="140"></p>
<!-- The next articles follow on, all the way down the page -->
<div align="center">
<center>
<table border="2" cellpadding="0" cellspacing="0" width="728" bordercolor="#00CCFF">
<tr>
<td bgcolor="#c0c0c0">
<p align="center" style="margin-top: 10; margin-bottom: 10"><font size="6">Article title</font></td>
</tr>
<tr>
<td> etc. etc. etc
<p style="margin-top: 0px; margin-bottom: 4" align="center"> </p>
<p style="margin-top: 0; margin-bottom: 0" align="center">©PMCC</p>
</body>
</html>
