Chapter 8

COMPLETION

We've touched on some useful HTML and CSS.  They are versatile languages that can be put to an almost inconceivable variety of uses, as the very existence of the World Wide Web illustrates.  So we've a wide range of possibilities still ahead of us.

AUTHORITATIVE GUIDANCE

Gathering together some sources already referred to: ALSO

In developing the MAA website a deliberate choice was made to involve a suitably wide range of HTML and CSS options.  But there were no suitable opportunities to involve two important facilities, so they are added here.

1.  The MAA heading table had two cells in the top row, one cell in the bottom row.  The lower row cell had to span two columns: colspan="2" was used to achieve this.  As you may have deduced, there must be a corresponding rowspan to provide the vertical equivalent.  Life gets complicated when you mix up both facilities but it can be done: preliminary planning on paper helps.  Needing an example, I thought we might display some of the named colors that we've not come across in the main text.

Reducing the font size to keep the listing looking tidy:
<table style="text-align:center; color:black;">
<tr> <td rowspan="4" style="background-color:aqua; width: 100px; height:400px;border-style:solid;">Aqua </td>
<td colspan="4" style="background-color:fuchsia; width:1200px; height: 50px; border-style:solid;">Fuchsia </td></tr>
<tr><td style="background-color:green; width: 300px; height:100px; border-style:solid;">Green </td>
<td style="background-color:lime; width: 300px; height:100px; border-style:solid;">Lime </td>
<td rowspan="2" colspan="2" style="background-color:maroon; width: 600px; height:200px; border-style:solid;">Maroon </td></tr>
<tr><td rowspan="2" colspan="2" style="background-color:olive; width: 600px; height:200px; border-style:solid;">Olive </td></tr>
<tr><td style="background-color:purple; width: 300px; height:100px; border-style:solid;">Purple </td>
<td style="background-color:teal; width: 300px; height:100px; border-style:solid;">Teal </td></tr></table>

It's actually a table of four rows by five columns: without span commands that would accommodate twenty cells rather than the eight we see in the output -

The table of colors.

2. When first introducing links it was mentioned that links could point to specific identifiable parts of the same or a different website. The various sections of activities.html could have been identified with id codes, for example:
<a id=”Allotments"></a>
<a id="Birds"></a>
<a id="Chorale"></a>
<a id="Keep Fit"></a>
 could have been included at the start of their respective divs.

Then you could insert the following as a new div towards the end of the coding for index.html if you like.
<div><br>
Go direct to:
<ul><li><a href="activities.html#Allotments">Allotments</a></li>
  <li><a href="activities.html#Birds">Ornithologists</a></li>
  <li><a href="activities.html#Chorale">Saint Cecilia Chorale</a></li>
  <li><a href="activities.html#Fit">Keep Fit</a></li></ul>
(Use your browser's 'back' button to return here.)
<br><br></div>

I saved mine as indexPlus.html.  Then try going to and fro.

REFINEMENTS

As I said earlier, even the menus can be intimidating though they do provide access to all those wide open developments that we might want to explore at some future time.  One CSS menu I spotted gave ten controllable properties for backgrounds.  And you thought we were clever switching borders on and off, controlling their widths and varying their colors?  That same menu provided thirty-three border controls including such niceties as border-top-right-radius; border-left-width; and curiously border-image-repeat.  As regards border-top-style for example the options (apart from the default solid that we're used to and the none that we discovered) we can specify dotted; dashed; double; groove; ridge; inset or outset.  Like this?
<p style="text-align:center;">
<img src="MAA.jpg" alt="MAA logo." style="
border-bottom-style:dotted;
border-bottom-width:20px;
border-bottom-color:red;
border-left-style:ridge;
border-left-width:20px;
border-left-color:purple;
border-right-style:double;
border-right-width:20px;
border-right-color:teal;
border-top-style:groove;
border-top-width:20px;
border-top-color:yellow;
border-top-left-radius:60px;
border-top-right-radius:60px;
"></p>
Example borders. Padding can be added.
The right-hand version had had
padding:100px;
included in the style details.		 With padding.

FORMS

Absolutely everything we've been concerned with except the invitation to use the MAA email address was designed to present information.  But there's a whole other world of information collection as integral elements in commercial and some academic websites.  There have to be boxes into which you can insert your name and address; number boxes to record how many of the items you want; buttons you can press to select your style option; and so on and so forth.  Much of it can be done with HTML and CSS, but sophisticated versions have to use Javascript too.  That's all way beyond the scope of any Primer.  But if you're interested, the information is out there of course.  You might start at:
https://www.w3schools.com/html/html_forms.asp

EXPERIMENT - EXPLORE

You don't have to be limited to what w3c thinks you need, tremendously generous though that is.  Basics can be combined in limitless ways.  As a single example I'll assume you want an un-numbered list but you want to use your own mini-logo rather than any of the standard <ul> options.

The list with logos.

This was the coding:
&emsp; <img src="MiniMAA.jpg" alt="MAA"> &emsp;Reduce the size of your logo to a few tens of pixels.<br>
&emsp; <img src="MiniMAA.jpg" alt="MAA"> &emsp;Start each line with a wide space.<br>
&emsp; <img src="MiniMAA.jpg" alt="MAA"> &emsp;Display your mini-logo.<br>
&emsp; <img src="MiniMAA.jpg" alt="MAA"> &emsp;Add another wide space.<br>
&emsp; <img src="MiniMAA.jpg" alt="MAA"> &emsp;Insert your list item.<br>

(If you can't produce a mini-logo you'll just have to include the size details within each img specification.)

FINALLY

All that work only gets your wonderful website as far as the files on your computer (with emergency copies in the cloud somewhere, I hope).  If you've been working under the aegis of your firm you're now ready to upload all the material to their website host.  That's likely to involve accessing the host's 'dashboard' or their file handler.

Set up the new directories and then upload all the html, css and img files using whatever procedure the site requires.  Then just quickly check the resulting file list: it's not unknown for hosts to accept .jpg files but reject .JPG ones for example!  Subsequently, when you are uploading edited versions you may be asked whether the new version is to replace the existing one, globally or as each file is dealt with.  The host may even simply save each new file by adding a marker to the name: that can be prevented by initially deleting any file you intend to replace, otherwise it needs sorting out afterwards which is a bit of a pain.

You can check what has gone public, on another tab or perhaps on another computer or your phone, while you still have active access to the host: many a slip of the finger has been detected that way!

But what if you're acting independently?  Unfortunately, there are no universal directions as to how to get your pages into the public domain - onto the World Wide Web presumably.
In short, if you've got a friend or colleague with happy experience of invading the web be guided by them.  Otherwise, good luck!

The full, final version of maastyle.css is here >

<<<<<<<<<<end>>>>>>>>>>