Chapter 5

Activities
Text and Formatting

We're making progress.  Our MAA website has two pages of html listings as well as our maastyle.css format controller.  Having edited index.html to make a start on members.html in Chapter 4, it's relatively simple to repeat the procedure by copying members.html into a new .text file, saving it under the name activities.html, and editing it ready for the Activities page, like this -

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>MAA Activities</title>
<meta name="description" content="Mudcomb Activities Association range of activities.">
<link rel="stylesheet" type="text/css" href="maastyle.css">
</head>
<body>
<div class="header">
<table><tr><td><img src="MAA.jpg" alt="MAA monogram." style="height:60px;"></td>
<td style="font-size: 55px; font-weight: bold;">MUDCOMB&emsp;ACTIVITIES&emsp;ASSOCIATION</td></tr>
<tr><td colspan="2" style="font-size:30px;"> <a href="index.html">Home Page</a> &emsp; &bull; &emsp;
<a href="members.html">Membership</a> &emsp; &bull; &emsp;
<a href="pics/gallery.html">Our Photos</a> &emsp; &bull; &emsp;
<a href="contact.html">How to contact us</a></td></tr></table>
</div>

<hr>
</body>
</html>
<!-- Website Primer, Chapter 5, activities.html -->

- including the necessary changes to the menu.

Each of the Association's group leaders was asked to provide a brief text introduction to the group's activities for inclusion on this page.  Four have been received so far.

An extremely common structural feature of html as of any text display is the paragraph.  In html it is simply <p> and with </p> its corresponding closer.  For the sake of illustration we'll try a variety of layout controls with and without <p>.  In this rather rare case, ignore what the text says but note how it says it!

(Just a suggestion: I like the gap between sentences to be a bit bigger than the gap between words.  Type &ensp; once and then 'copy' it so that it's in your clipboard ready to 'paste' an extra n-wide space at the end of each sentence.)

THE ALLOTMENT SECTION:

<div style="text-align: left;">
<h2>ALLOTMENTS</h2>
<p>Each of the communities within the ancient fiefdom of Moodcoombe now Mudcomb is proud to make best use of the residues of their common lands as allotments rented out to local residents.  Such is the demand for this limited resource that even though we have to impose strict residential qualifications there is still a waiting list within each community - <b>twelve years</b> in the case of Mudcomb Parva.</p>

<!-- Leaving lines of white space has no effect. -->

The communities come together for a hard-fought Autumn Show.  There is a wide range of classes including:
<div style="text-align: center;">Trug of mixed vegetables<br>Bridal bouquet<br>Longest runner bean<br>Tomato with the greatest circumference<br></div>Of course every entry must have been grown by the exhibitor.</div><br><br>
</div>

 The coding starts with a new div ahead of the hr.  It features the default color and the text is mostly left-aligned rather than justified.  The heading is h2.  The paragraph <p> is inside a div, but in the next bit (which is not 'officially' a paragraph) there's a div in among the text (inside a div) - allowing a change of alignment.  Of course you're free to leave out the <!-- comment -->: we'll not carry it forward to a final version.

Allotments.

THE ORNITHOLOGISTS SECTION:

<div style="background-color: blue; color: #ffffcc;"><br>
<h3 style="text-align: center;">THE &ensp;ORNITHOLOGISTS</h3>
<p>Bird-lovers of the Mudcomb area are fortunate to enjoy an enviable environment. Members of "ORNITHOLOGISTS" have free access to our bird hide on the ridge between Moodwater Lake and Mudsand Warren.</p>
<p>Summer meetings usually take the form of expeditions to venues of interest in the county or beyond. Winter meetings are based around illustrated talks by visiting speakers. They are held in The Drovers at Mudcomb Parva.</p>
<p>Members can make use of a special discount scheme for the purchase of binoculars, telescopes and tripods.</p>
<br>
</div>

The most obvious feature of the section is the reversal of the color scheme - now with pale yellow text on a standard blue background.  The heading is h3, with &ensp; extra spacing between words.  The coding is then absolutely bog-standard with text in <p> </p> paragraphs, which automatically puts a blank line between those paragraphs - but not after: it took a <br> to add the terminal blank line.  And there are only single spaces between sentences of the text, just as typed: no &ensp; additions.

Allotments.

THE SAINT CECILIA CHORALE:

<div style="margin-left:100px; margin-right:100px;"><h4 style="text-align:center;">THE SAINT CECILIA CHORALE</h4>
<span style="font-size:25px;">Can you sing? - in the bath at least? &ensp;There's a group of us who get together in the Great Hall of Mudcomb Academy every Thursday evening of term time to let rip for a couple of hours - in a disciplined fashion, you understand. &ensp;There's no audition to worry about, and help can be provided with the early stages of reading musical scores (what else is an Academy for?).<br><br>
Our repertoire/bill of fare extends from the almost mandatory Christmas carol concerts in each of the Mudcomb churches in due season to Bach - you can't have a choir and not sing Bach - right up to such contemporaries as <i>The Armed Man</i> (Karl Jenkins) which you've probably heard on radio.<br><br>
So will you join us? &ensp;At the very least, watch out for our concert details on all the village noticeboards.</span> <br><br> </div>

Here the heading is h4, with no extra &ensp; spacing between words.  Margins have been produced, 100px each side.  Then the text just runs on, broken only by <br><br> where necessary and sentence-end extra spaces: it is justified but there are no structural paragraphs.  I thought it looked better with a slightly smaller font - 25 instead of the default 30 set in maastyle.css.

Allotments.

Contrast the tidiness of this display with that of the allotments above.

But everything doesn't have to be blue and yellow like the UK police force.  If you search online for 'the color wheel' you'll see that blue and yellow are almost opposite one another: that's why they contrast well.  It's a bit overpowering if both are at full intensity, but OK if one or other is relatively pale.  Anyway, greens are opposite reds: let's try those.

KEEP FIT !

<div style="color:red; background-color:LightGreen;"><br>
<h1 style="text-align: center;">KEEP   FIT !</h1>
There's no excuse for not keeping fit in Mudcomb!  There are free public exercise machines and structures adjoining the carparks of <b>The Red Lion</b> and the <b>The Harcourt Arms</b>. &ensp; Each of the kiddies' play areas has a miscellany of equipment to encourage fat-burning activities.<br><br>
There is a programme of afternoon sessions, 2.30 pm to 4.30 pm, aimed principally at housepersons and retirees:

<table style="border-spacing: 10px; margin-left:auto; margin-right:auto;">
<tr><td>Monday</td><td>Lower Mudcomb</td><td>Keep Fit, Keep Slim, Keep Active</td></tr>
<tr><td>Tuesday</td><td>Mudcomb in the Marsh</td><td>Scottish Country Dancing</td></tr>
<tr><td>Wednesday</td><td>Mudcomb Academy</td><td>Field Sports</td></tr>
<tr><td>Thursday</td><td>Mudcomb Trenthide</td><td>Disabled Disco</td></tr>
<tr><td>Friday</td><td>Mudcomb Parva</td><td>Music and Movement</td></tr>
</table><br>
</div>

The heading is the largest, h1.  Apart from the color-scheme, the only other novelty here is the tabulation: it's a table with no borders.  Yet we need to specify border-spacing: 10px; otherwise some text in column 1 would actually touch the text in column 2 and so on.

But we want that table to be central.  If we use the usual text-align it does just that - it centralises each bit of text within its cell but leaves the whole table on the left-hand side.  And we can't say how wide the margins should be because we don't know the width of either the table or the page.  The acceptable alternative in css is to make the left and right margins equal: crafty, eh?  It's achieved with -
margin-left:auto; margin-right:auto;
- in the style.

Allotments.

We've used an awful lot of in-line CSS on this Chapter.  Why did we set up maastyle.css as an external style sheet and then not use it?  Well, it's in the nature of this exploration of the languages that this page was designed to show lots of different local variations, and local changes need in-line CSS.  Once a layout has been decided on it can sensibly be added to the external style sheet which will then be implemented on every page.  In any case, maastyle.css did set the defaults for the whole site: did you notice the pale yellow background edges to the blue and green sections?

Next, incorporating photos, images in general in Chapter 6 >

<<<<<<<<<<+>>>>>>>>>>