Chapter 4
Membership
Mainly About Lists
Now then, we're ready to start constructing the first of the MAA pages with some actual content. But we can't construct it until it exists. These are the preliminaries:
- Open a new blank .txt file.
- Copy all the html of index.html into it.
- Save it as members.html.
- Edit it as the new page -
♦ Change the title to MAA Membership
♦ Change the description to Membership details of the Mudcomb Activities Association.
But what about the menu section? We have got to include a link back to the home page instead of to the Membership page. There's no point in having a link to itself! Many websites have one standard menu which is used on every page regardless, but that's lazy programming, isn't it?
♦ In the menu listing change members.html to index.html
♦ Change Membership to Home Page
♦ Feel free to change any remark as appropriate.
♦ Delete unwanted stuff so it matches the listing below, perhaps using your own layout preferences.
- Re-save the file.
- Go to your files list and double click on members.html to check that it works alright.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>MAA Membership</title>
<meta name="description" content="Membership details of the Mudcomb Activities Association.">
<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 ACTIVITIES ASSOCIATION</td></tr>
<tr><td colspan="2" style="font-size:30px;">
<a href="index.html">Home Page</a>   •  
<a href="activities.html">Activities</a>   •  
<a href="pics/gallery.html">Our Photos</a>   •  
<a href="contact.html">How to contact us</a></td></tr></table>
</div>
<div>
The data the Association has given us lends itself to being displayed as various lists. HTML offers three alternative layouts: we'll use two of them for our first list by inserting the new text like this:
Membership of the Mudcomb Activities Association is open to residents in the whole Mudcomb Council area:<br>
<ul><li>Lower Mudcomb</li>
<li>Mudcomb Parva</li>
<li>Mudcomb in the Marsh</li>
<li>South Mudcomb including
<ol><li>Folk at the Roseacre Old Folks Home
<ul><li>Residents.</li>
<li>Day-care visitors.</li></ul></li>
<li>Sixth-form pupils of Mudcomb Academy in term times</li></ol></li>
<li>Mudcomb Trenthide</li></ul>
</div>
</body>
</html>
<!-- Website Primer, Chapter 4, members.html -->
ul stands for unordered list; ol stands for ordered list; and li stands for list item. Notice that you can have any kind of list as a list item within a list! The inner list must be terminated - </ol> or </ul> or whatever - still within the outer list, before the outer list's </li>.
So far so good. But it would look better if there was a gap below the menu before the text started: we just need to put a <br> after the menu. Then it's time to save and double-click on members.html.
Not bad, but plenty of room for improvement.
An ordered list is always numbered automatically. But if you have one ul inside an outer ul the inner list has hollow bullets (small circles) instead of black bullets. Not happy? If you want to be in total control you can dictate the type of bullet: "disc" is normal; "circle" is the hollow circle; "square" is what it says. We may as well opt for "square" for the outer and "circle" for the inner so that we remember how it's done. (The system is not as versatile as your word processor: just those three options. But despair not: wait till you see Chapter 8!)
So, back to members.html. Make the first (outer) ul
<ul style="list-style-type:square;">
and make the second (inner) one
<ul style="list-style-type:circle;">
We are going to be using more text from now on in. As I'm sure you know, it can be formatted to the left, to the right, to the middle (American center) or to fill the display width - to be justified. My personal opinion is that justified text is usually to be preferred as looking neater. If we set that as the norm with our external style sheet maastyle.css we can always counter it in any special cases that need centering or whatever else.
So let's go to it. Open up maastyle.css for editing. All we need to do is add
text-align: justify;
to the list of commands for body.
And while we're editing, our lists look too close to the left edge, don't you think? We don't want to center it but it would be good if we could slide the whole block closer to the middle of the page. This can be done by labelling the block as a blockquote with <blockquote> ahead of it and </blockquote> to cancel it in the usual way. To move it further in just double-up those controls.
Are you testing these improvements as you work through? The page is OK but the most obvious lack now is color. The first lines might as well continue the blue theme. Indeed, it may be sensible to have the whole page in blue, but for the sake of exploring possibilities we'll try another approach. As we are going to have quite a lot of text on other pages I think we should make blue text the default color: add -
color: blue;
to the body section of maastyle.css.
There's yet another facility that CSS can deliver - very classy! Much the easiest introduction is to see it in action.
1. Add this to form a new section in maastyle.css -
.red { color: red; }
2. Add class="red" to the html section involved -
<ul class="red" style="list-style-type:square;">
3. Re-check what's happened to the page.
That looks better. Add </div> to finish off this bit.
Next, the MAA tells us there are several categories of members. So now we can use another kind of html list called a description list, like this -
There are several categories of members:<br>
<div>
<dl><dt>Child</dt>
<dd>Members below the age of 11.</dd>
<dt>Student</dt>
<dd>Those over the age of 11 in full-time education.</dd>
<dd>Those over the age of 11 in an apprenticeship.</dd>
<dt>Adult</dt>
<dd>Members under the statutory retirement age, not on benefit.</dd>
<dt>Retirees</dt>
<dd>Those above the statutory retirement age.</dd>
<dd>Adults on long-term benefit.</dd></dl>
</div>
dl stands for description list; dt stands for description term; and dd stands for description description! Notice that it's possible to have more than one dd under any one dt.
That's got the material onto the page alright.
We'll turn the list itself green (just as an exercise) but this time we'll use div rather than the list itself. So add -
.green {color: green;}
to your maastyle.css and change the new div to -
<div class="green">
More blockquotes then? No: we'll try a different method. We can set a left margin for this div.
<div class="green" style="margin-left: 100px;">
In detail, the definition terms, the dt items, would probably look better if they were in bold, to stand out more. But there's no need to tell each one so: we can use a one-line internal style sheet. Insert -
<style> dt {font-weight:bold;} </style>
- immediately above </head>: every dt on this page will now be in bold.
And that's all the MAA data dealt with.
As with the Chapter 2 listing, we can finish off with a horizontal navy blue line -
<hr>
- but I think it would suit our new color scheme to change the line to the ordinary blue so we'll include -
hr {border-width: 4px; border-color: blue; border-style: solid;}
- in the external style sheet.
And we're done! In case you need to double-check, here's the final listing of members.html though the exact layout is up to you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>MAA Membership</title>
<meta name="description" content="Membership details of the Mudcomb Activities Association.">
<link rel="stylesheet" type="text/css" href="maastyle.css">
<style> dt {font-weight:bold;} </style>
</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 ACTIVITIES ASSOCIATION</td></tr>
<tr><td colspan="2" style="font-size:30px;"><a href="index.html">Home Page</a> &   •  
<a href="activities.html">Activities</a>   •   <a href="pics/gallery.html">Our Photos</a>   •   <a href="contact.html">How to contact us</a></td></tr></table>
</div>
<div>
<br>Membership of the Mudcomb Activities Association is open to residents in the whole Mudcomb Council area:
<blockquote><blockquote>
<ul style="list-style-type:square;" class="red"><li>Lower Mudcomb</li>
<li>Mudcomb Parva</li>
<li>Mudcomb in the Marsh</li>
<li>South Mudcomb including
<ol><li>Folk at the Roseacre Old Folks Home
<ul style="list-style-type:circle;"><li>Residents.</li>
<li>Day-care visitors.</li></ul></li>
<li>Sixth-form pupils of Mudcomb Academy in term times</li></ol></li>
<li>Mudcomb Trenthide</li></ul>
</blockquote></blockquote>
</div>
There are several categories of members:<br>
<div class="green" style="margin-left: 100px;">
<dl><dt>Child</dt>
<dd>Members below the age of 11.</dd>
<dt>Student</dt>
<dd>Those over the age of 11 in full-time education.</dd>
<dd>Those over the age of 11 in an apprenticeship.</dd>
<dt>Adult</dt>
<dd>Members under the statutory retirement age, not on benefit.</dd>
<dt>Retirees</dt>
<dd>Those above the statutory retirement age.</dd>
<dd>Adults on long-term benefit.</dd></dl>
</div>
<hr>
</body>
</html>
<!-- Website Primer, Chapter 4, html -->
WARNING:
Somewhere in this book - not at the beginning to scare folks off - somewhere there needs to be a terrible warning. When everything goes wrong it's no use kicking the cat or shouting at the kids: you've probably -
- typed a ; when it needed a :
- used a < when it needed a >
- typed a zero 0 in place of a letter O or vice-versa, or a 1 in place of an l or even an !
- doubled something up inadvertently ,, >> ""
- or left something vital out
- evenomittedamandatoryspace
- Put the </y> cart before the </x> horse.
I'm afraid having recourse to the validator.w3.org/ won't help: you'll get a list of errors as long as your arm. One simple typing error or omission often means that all the rest of the coding is out of phase: leave out a " and the machine interprets the next chunk of coding as the name of your photo. I know: I've done it. And I wasted a frustrating half-hour before I finally changed <style> dt {font-weight;bold;} </style> to <style> dt {font-weight:bold;} </style>.
The moral is: go steady; be very pernickety about what type of punctuation you're using, in what order.
There are software programs designed to help with this process of writing html and css. Easily available to many is Notepad++. It colour-codes the material you are writing in a way that you may find useful, or confusing. It is certainly helpful that it numbers your lines of code in the same way that w3c does, making it much easier to track down any reported errors. Opt for Word wrap under View on Notepad++. For a wider choice, search for 'HTML editor' online.
But of course, as we've already seen, once you've got one page to work and to gain w3c's approval you can happily re-use - copy and paste - sections of it in setting up similar bits of a new page: just update the data between the controls.
<<<<<<<<<<+>>>>>>>>>>
How would you code that?
There's much more about text and formatting in
Chapter 5 >