Build your own Website: Session 6 
Meta tags
Some odd tags which you might see at the start of a web page (in the <Head> section). My Home page has: <Meta Name="Keywords" Content="Colin Hume, Colin Hulme,
colinhume, dance, ECD, folk dance, english country dance">
<Meta Charset="utf-8">
<Meta Name="Description" Content="Notes on teaching dance technique,
shareware Dance Organiser program, dance instructions">The Keywords entry is for search engines, though none of the major search engines now look at these. Most people feel they should still put them in “just in case”. The Content-type entry tells the browser what's in the web page and what character set it uses; UTF-8 is the standard and WebEdit adds this line automatically if it's not present when you validate the file. The Description entry might be picked up by a search engine or some other program which indexes web pages. I don't know how important any of this is.One which I actually have found useful is<meta http-equiv="refresh" content="0; url=..\elizabeth.htm">which immediately redirects you to another page — if you want it to display briefly and then redirect, change the 0 to a larger number of seconds.
Printing
If someone prints a page from my site, they don't want the menu and [Back] button at the top or the Feedback button at the bottom. Some sites provide special “printer-friendly” versions of pages, and I've done this on other sites using dynamic code on the server, but it really isn't necessary. The secret is to use a style-sheet designed just for printing. So you need to refer to two style-sheets in the <Head> section of every page: <Link Href="style.css" Rel=stylesheet>
<Link Href="prstyle.css" Rel=stylesheet Media=print>I would put them that way round, but it doesn't matter; the specific with media=print overrides the general. Here is the Print style-sheet prstyle.css:Body, .Body {
Background-color: White;
}
#Header, .NoPrint, .BBlock, #Feedback {
Display: None;
}
#All {
Position: Static;
}
#Main {
Margin: 0;
}and here are the changes to the main style-sheet style.css:.NoPrint {Margin-right: 24px}
#Feedback {Text-align: Center}You can see that in the Print style-sheet I'm saying that the Header division (which includes the logo and all the menu buttons) is not to be displayed. Similarly the block of buttons which you can see at the top of dt.htm. I've specified zero margins for the Main division, because the normal style-sheet specifies 8 pixel margins and I want to override that when printing — the browser will create print margins anyway. I've added a division called NoPrint for the “Back” button which appears just before the page title, and specified that it's not to be printed. Originally I had the Back button, then a couple of spaces, then the title. When I stopped printing the button I was still giving the two spaces before the title, so I've removed the spaces from the source and generated them in the Display version using Margin-right — I originally used Padding-right but that meant when you clicked on the button the outline was wrong! Similarly I've added a division called Feedback for the centred button which is displayed at the end of every page but is not to be printed.I added the #All section when I discovered that Firefox would only print the first page (60 or so lines) — indeed the Print Preview said it was page 1 of 1. In my main style sheet I use Position: Absolute for this section, which somehow means that Firefox takes it out of the main flow and doesn't do anything clever like splitting the division into pages!
The bottom line is — if you've used my suggested way of putting the menu down the left-hand side, you really do need a Print style-sheet to negate the Absolute positioning.
Your browser will have a Print Preview command, possibly incorporated in the Print command. From WebEdit you can display the page and then right-click for the menu which includes Print Preview. Alternatively here's an easy way to test your print style sheet without wasting time and paper. Just put an “x” in front of the Media keyword so that as a temporary measure your page says: <Link Href="style.css" Rel=stylesheet>Now you're applying the style sheet to display, not just print, so your page will display as if it were being printed. Juggle with prstyle.css until it looks the way you want to see it on a printer, then remove the “x”. For this you do need the style sheets in this order, as you want the second to override the first when there are conflicts.
<Link Href="prstyle.css" Rel=stylesheet xMedia=print>
After some years I switched to a single style sheet by adding a section such as@media print {
Body {
Background: White None;
}
#Header, H2 A, .NoPrint, .BBlock, .Button, .Help, #Feedback {
Display: None;
}
#All {
Position: Static;
}
}
I found that my dark purple headings print out much lighter, so I specify a darker (and bluer) colour in my Print style-sheet. For the HTML examples which display on-screen as dark brown I found I had to make the colour darker and specify Font-weight: Bold; in the Print style-sheet to get the printout looking reasonable. I use the font FixedSys, which I think is a good solid monospaced font. IE and Firefox display this as I would expect. IE seems to print it OK, once I've added Bold, but Firefox prints complete rubbish, and I think it's because it's not a TrueType font — it isn't even listed if you go into the Control Panel and click on “Fonts”. So I remove it from the font list in prstyle.css.
The other thing you might want to do with printing is page breaks. Most of my web pages are like the one you're reading now — they just flow on and the page breaks fall where they will. But in addition to the computer stuff I'm heavily involved in Folk Dancing, and I have a set of web pages containing instructions for dances. I don't want the instructions for any dance to cross a page boundary; I'd rather have some empty space at the bottom of the previous page. Each dance starts with an <H2> tag, so if I realise the next dance will overflow I start it with<H2 Class=Page>and in prstyle.css I add:.Page {which does what you would expect; there's a page break immediately before the heading. I don't need to mention this element in the standard style.css — it has no effect on the displayed page, and it's not an error to refer to a style-sheet element which doesn't exist. Of course I don't actually know what size the user's printed page will be, but it's a fair bet that if it's someone in Europe it will be A4 and if it's someone in the USA it will be Letter which is a little wider and shorter.
Page-break-before: Always;
}
In fact I no longer do this, as I now have a [Print] button at the start of each dance and some ASP.Net code which grabs just that dance and prints it out, but the principle is still valid.
If you're really determined, you can print a footer of sorts on each page. A browser isn't a word processor, so it's not designed to do that sort of thing, but you can try:<div class=Footer style="Position: Absolute; Top: 950px">Footer for page 1</div>which will print near the bottom of the first and second pages assuming that they are using A4 paper and their printout doesn't have wider margins than yours. I feel this is somewhat risky, so I would just put the footer a couple of lines after the final text on the page, possibly preceded by a horizontal rule:
<div class=Footer style="Position: Absolute; Top: 1920px">Footer for page 2</div>Last line of text on printed page
<P>
<HR>
<P>
<Div Class=Footer>Footer for page 1</Div>
<H2 Class=Page>Header for page 2</H2>
Of course you don't want the footers to display, so the requirement is the reverse of that for buttons. In your main style sheet you put:.Footer {Display: None}and in your print style sheet you over-ride this by:Footer {Display: Inline}
One catch (which baffled me for an hour) — you can't use Page-break-before on absolutely positioned elements. And I was working on a website where the main part of each page was a division with the following CSS:div.mainPart {At first I thought this meant I would have to reorganise the way I laid out the pages, but then I realised that the absolute positioning (to move it away from the left-hand menu) was irrelevant when printing, since I wasn't printing the menu anyway! It's the same fix that I've mentioned earlier — all I had to do was add to prstyle.css:
Position: Absolute;
Left: 160px;
Top: 0px;
Right: 3px;
Padding: 10px;
}div.mainPart {
Padding: 0;
Position: Static;
}
Grabbing stuff from other people's websites
If you see something clever on another website, you can usually find out how they do it. The exception is Flash, which is a proprietary system for displaying moving graphics. But if it's done with HTML and CSS, you can see it and copy it. You can right-click on the page (anywhere except over an image) and then click “View source” or “View page source”. This will take you into Notepad for IE or an internal viewer for Firefox or Google Chrome, though for all three you can specify your own editor such as WebEdit if you wish. If you haven't specified WebEdit you will then need to “Select All”, copy the page to the clipboard, then in WebEdit click File | New | HTML, Select All, then Edit | Paste. Some web pages have special code in them to stop you using right-click. In that case copy the URL from the address bar to the clipboard. Then in WebEdit click File | Open and paste the URL into the Web address area on the second line of the Open dialogue. This is also the way to pick up a page which immediately transfers to another page, such as a FrameSet page. And incidentally it's useful for picking up a MIDI file which you want to save to disk rather than play over your loudspeakers, or a PDF file which you want to save rather than display. WebEdit will see that it doesn't look like a text file and ask whether you would like to save it to disk instead.You can also pick up a style sheet or a JavaScript file. If you look at the source for my home page you will find the lines:<Link Href="style.css" Rel="stylesheet">This means that in your browser's address bar you can put
------
<Script Src="edecrypt.js"></script>https://colinhume.com/style.cssorhttps://colinhume.com/edecrypt.jsand download these files for your own use.
And of course you can right-click on a graphic in a web page and then click “Save Picture As…” or “Save Image As…”.
I'm no expert on copyright, but if the HTML contains a Copyright notice, or the Home page says that the contents are copyright, I wouldn't touch it.
If you want to grab an entire website, there used to be a free program called WebReaper from webreaper.net which will do that. Last time I looked the page was still there but the links to the program didn't work, so I found another one at httrack.com.
Displaying Tables with CSS
I set up my website before CSS became popular, and later I discovered that it's much better to use CSS to control the table display. I'm not going to talk about the HTML table attributes because you are definitely better off using CSS, even though you may find the HTML way quicker at first. In fact I've now gone through my entire site removing HTML table attributes to prove that I really do practise what I preach! So I'm going to ask you to remove Border=1 from your table definitions (and anything else you may have sneaked in while I wasn't looking). Basically it's a mistake to mix formatting options in HTML and CSS, so stick to CSS even if it initially seems more complicated; it will pay off in the long run.I like a coloured border round my tables, unless they're just being used to position other elements. So first decide whether you want all (or nearly all) of your tables to have the same border. I'd say that's a good idea — you don't want each page to look as if it was designed by a different person. In that case put the CSS into the main style-sheet. You may have two different types of table on many pages, in which case you'll need to use Id or Class to distinguish them. When you're giving this element a name, a general principle is that the name should say what it's used for, not what it looks like. So if several pages need a table with a red border giving error information, don't call it Class=Red — call it Class=Error.
Of course, if one or two pages need a table with a different border colour you can specify that at the start of the individual page in a Style section <Style>To get a border you specify <Table Class=Box> in the HTML, and in the CSS you need to set three separate values:
Table { .. .. .. }
</Style> .Box {Border-color: Blue; Border-width: 2px; Border-style: Solid}for which I would certainly use the shorthand notation (and let's add a background colour too) .Box {Border: 2px Solid Blue; Background: LightBlue None}which means exactly the same — the three values can be in any order. This should work the same on any modern browser, and will look like this:
| Left 1 | Right 1 |
| Left 2 | Right 2 |
| Left 3 | Right 3 |
Box TD, Box TH {
Padding: 4px 6px;
Border: 1px Solid #000000;
}Don't be tempted to leave out the colour: I think IE and Firefox will make different assumptions. That puts in a black border round each element, which is what I want in some tables; in others I might just specify Border-left and Border-right. But then there are two pixels of padding round each of these borders, and the blue border for the whole table is outside the whole lot:| Left 1 | Right 1 |
| Left 2 | Right 2 |
| Left 3 | Right 3 |
Border-collapse: Collapsewhich is designed to deal with this problem:| Left 1 | Right 1 |
| Left 2 | Right 2 |
| Left 3 | Right 3 |
Several years after writing these notes I looked into web pages for a hand-held device or smartphone and discovered a problem with using tables. I'd known for ages that some people get worked up into an almost religious frenzy against using tables, but I had dismissed their concerns. However, I'd taken for granted that a user would have a reasonable-sized browser window, and on a smartphone that's not true. For instance, I had a table with just one row and two elements — the first element was an image of a book cover and the second was a table listing the contents. This is fine on a bigger screen, but on an android device the whole thing was unreadably small, so I've now changed my approach. I'm not going into detail, since there doesn't seem any prospect of running this course again (2015), but if you're interested see dwad5.htm for an example — if the two won't fit side by side, the second one automatically goes below the first. Or see the bottom of dewildthyme.htm — two photos appear side-by-side on a big screen but one above the other on a small one.
In fact I'm still occasionally specifying a Width value for a couple of tables, but not nearly as many as I used to! I had lots of tables with Class=Box but I wanted some of them to be the full width of the screen. For instance, if you look at chouse.htm you will see three tables one above the other, the middle of which (“Our wall and steps”) has only one photo. The other two will naturally go to full width unless you are using a very high resolution, but the middle one won't, and it looks wrong with a gap on the right. I didn't really want to create a new class WideBox with almost all the same values as Box. Then I remembered that you can specify more than one Class for an HTML element. So I created a new CSS item,.Wide {and specified the table as
Width: 100%;
}<Table Class="Wide Box">and it worked first time! But this has also now been changed to look good on a hand-held device.
The basic principle is to establish some standards early on. When I originally wrote my website CSS wasn't in use: the book I learnt from (published in 1996) didn't mention it. You're having it easy; I had to go back and change lots of things. So decide on one or more table layouts and get the CSS right. I'm not saying every table has to look the same, but having every table looking different is worse! And if you've centralised the layout in your style-sheet, it's easy to decide (having seen your website on a small screen) that you'd like a little more padding around the table elements — it's just a one-line change.
If you want your table centred on the screen (not to be confused with centring the text within the table cells), Margin-left: Auto;which you can abbreviate:
Margin-right: Auto; Margin: Auto;or if you're using Position: Absolute you may need to remove any width and specify Margin-left: 10%;
Margin-right: 10%;
For more information, see the section on centring on the “Other topics” page.
One final hint: for simplicity you can define Table, TH and TD in one element if you wish:.Session, .Session TD, .Session TH {
Border-collapse: Collapse;
Border: 2px Solid #4242FF;
Background-color: #DDD7FD;
Padding: 6px;
}
That's all I can fit into a six-session course, and I know there are lots of things in the notes that I didn't have time to mention in class, but I recommend you reading them all through. And what I say at the end of all my courses is Now go away and use it! If you don't put it into practice fairly soon, it will disappear from your brain and the course will have been a waste of time. Have a look at the next section of notes, which talks about tools for checking your website, and don't be afraid to try things out — you'll make plenty of mistakes, but that's the best way to learn. The final section is called “Other topics for further study” and is fairly disorganised, but you may find some useful stuff there too. I wish you all the best of luck!
Homework: Create a display like the one I have at colinhume.
