I had some excellent feedback here from people about a document I put
together for a year 10 class (i.e. fourth formers) I teach. I've done a
lot more work on it since then, and I'd welcome further feedback.

There are some strong restrictions on what I am able to do - see the
thread "Teaching HTML & CSS to 15-year-olds - advice sought" in this
group (December 2005) for more information about this. Please bear it in
mind - some of the things I could do, or would like to do, or that you
may think I should do simply can't be done - not at my school, anyway.

The document is at <http://itsrighthere.net/PDFs/HTMLandCSS.pdf>.

An example website based upon the instructions in the document is at
<http://itsrighthere.net/subsites/bid/>.

Any comments would be greatly appreciated, particularly from a
pedagogical point of view. As a trainee teacher I am still somewhat
stabbing in the dark when it comes to judging the right level to pitch
things at for kids. Oh, and typos. Please tell me about any typos you
see.

Many thanks,

Daniele

In message
<1h8k45j.885unn1nd5qmdN%real-not-anti-spam-address@apple-juice.co.uk>,
D.M. Procida <real-not-anti-spam-address@apple-juice.co.uk> writes

Just a few brief thoughts:

(a) Looks and sounds OK.

(b) Only 1 typo that I could find:
".....From large commercial contracts to domestic properties, we have
the skills and the flair to transfor your working or living space..."

'transfor" --> 'transform'

(c) The <title></title> entry should reflect the contents of *that*
page. The main reason for this is that people that need to listen to
your site would like confirmation from their text-to-speech reader that
they've arrived on the correct page -- and the <title> entry is the
first thing they hear.

So (for example):
<title>The Barry Interior Design Company -- staff details.</title>

(d) There's only a <br> separating the post code from the phone number,
with the result that text-to-speech readers will run the two together.

I'd suggest using either the word 'telephone: ' or 'tel: ' (an example
to your students on coding an <abbr>) as a prefix to the number -- or
alternatively, a phone icon with the alternative text set to 'telephone
number: '.

(e) On each page, 'deactivate' the link in the menu that points to
itself.

E.g. On the home page, don't have 'home' as an active link in menu.

The reason for this is that many text-to-speech agents can provide the
listener with a 'list-of-links'. Links that point to themselves could be
confusing (although in this case there's only 4 pages with few links --
but it's good practice, anyway).

(f) Some text-to-speech agents will announce a graphic, but some won't.
I would usually extend the alternative text slightly with a few words
that describe what the listener is hearing when the alternative text is
spoken (if relevant).

E.g. alt="Computer-generated image of: Luxury apartment interior."
alt="Photo of: All the team."

(The alternative text on the image on the CAD page seems to blend in
quite well with the text, so I would probably leave it as it is:

"...We are able to produce detailed and realistic 3D renderings of our
designs. From sketches to space plans, elevations, concepts, schedules,
details and blueprints for manufacturing, our entire process is now
assisted by computer technology. The systems we use allow us to work
more efficiently and effectively...." )

I'm sure others will have more comments.

Regards.



--
Jake (jake@gododdin.demon.co.uk -- just a 'spam trap' mail address)

Jake wrote:

Agreed.

That's hardly the *main* reason. Title is important to visual browsers
too - it's what you see in your history stack, your bookmarks, or on
the desktop if you have a browser that's iconised or behind another
window.

Exercise for the reader: find a site that's of genuine interest to you
(so you have a real reason to read it) but which has the same title on
every page. Or just titles starting with the same few words. After
browsing for a while over a number of pages, try to find your way back
to something you remember from some page you saw earlier.

Bloody nightmare!

Well-considered titles can make all the difference.


If the website is "The Barry Interior Design Company", that should be
reversed, so the two distinguishing words don't get truncated out.

--
not me guv

In message <ugdq83-fo8.ln1@asgard.webthing.com>, Nick Kew
<nick@asgard.webthing.com> writes
It is, IMO.

In a visual context I can see immediately the page loads that I've come
to the right page/Web site. In a non-visual context I need to be told
that I've come to the right page/Web site.

Sure.

True.
I think I'd survive -- just so long as my browser's 'Back' Button
continued to work ....... ;-)

Indeed they can.
on in the proceedings.

In any case, the name isn't going to be truncated on IE (which allows
about 100 chrs as a bookmark) , Opera (about 70) or Firefox (about 50).

Which browser would give you a problem in this case?


regards

--
Jake (jake@gododdin.demon.co.uk -- just a 'spam trap' mail address)

D.M. Procida wrote:

A few things, then:

Why is <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=
iso-8859-1" > in capitals, when all your other tags are lower case?

I can't see the point of marking the nav up as <div>, when you later
mark it as <ul>.

All very well to show text-align:justify; as an example, but it is
generally bad practice to use it. Fully justified text works in long
paragraphs of print, especially when used in wide columns a/o with
hyphenation. It doesn't work well for short paragraphs, and it doesn't
work well on screen.

You mention colours very briefly, and give the hex code for one
colour, but (I don't think) you've explained how they can generate
these themselves. If hex is likely to be beyond them, they can
generate the colours they want in Paintbrush and use the
rgb(255,255,255) notation.

Section 11 - I would capitalise 'id' because that's how it is used in
prose. And you are adding *attributes*, NOT tags. I would mention at
this point that an ID can only be used once - refer forwards to
classes. And I think you need to elaborate on the difference between
class and ID - I don't think this is very clear at the moment.

Section 13 - I would mention that <em> is normally rendered as italic,
but you can ask the user's computer to display it in a different way,
as in the example.


A few design things about that site:

You refer in the teaching materials to custom bullets for the nav -
but there aren't any.

The bright orange text of <em> looks, to me, more like a link than
they very dark shades of your actual links. Good practice is still
that you underline links other than where there is a clear reason not
to or, for example, in an unmistakable nav list.

The design page would be an ideal spot to introduce thumbnails as an
"extension" activity.

It is increasingly common practice that the main logo acts as a link
to the home page. It is also good practice not to include an active
link to the current page. Using a <link rel="home" ...> would be a
nice touch as well.


And finally ...
.... good luck!

--
Stevie D
\\\\\ ///// Bringing dating agencies to the
\\\\\\\__X__/////// common hedgehog since 2001 - "HedgeHugs"
___\\\\\\\'/ \'///////_____________________________________________

Nick Kew wrote:

Disagree.

Discard "the" and probably "company". Keep it short, and remember that
if it is alphabetised, you don't want it filed under "the".

If the page has fairly generic content - such as "staff details", it
is good practice to include the website name. If the page has content
that is self-explanatory and won't be found on any other website, you
may not need the website name.

The first bit of the title should refer to the web_site_, because this
is what people will see first in the search engine rankings or when
they're flicking between four tabs in the browser.

There should then be a separator of some sort - a pipe is the most
common, but a colon or dash is just as good - and then the
page-specific title.

The whole lot should be less than (approx.) 60 characters, so it won't
be truncated by most browsers and most search engines.

F'rexample, the top news story on the BBC website has a title of:
: BBC NEWS | World | Europe | German rescuers halt rink search
This is 61 chars long, so is unlikely to be truncated. The increasing
specificity of the title is useful when you have a list of pages and
you want to find the most appropriate one.

--
Stevie D
\\\\\ ///// Bringing dating agencies to the
\\\\\\\__X__/////// common hedgehog since 2001 - "HedgeHugs"
___\\\\\\\'/ \'///////_____________________________________________

Jake wrote:

Yes, but with respect Jake, you are in a small minority. The reason
why most people benefit from the <title> being set out in a certain
way is in terms of search engine rankings, bookmarks and browser tabs/
windows. What's great is that exactly the same thing helps people
using non-visual browsers as well, though for slightly different
reasons, so we have no conflict of demands.

But when you're looking at (or listening to) a list of links in
Google, or flicking between four or five browser tabs, or looking out
a bookmark, you haven't got the page in front of you. And these are
all done far more often than someone with a non-visual browser needing
to check what site he is looking at.

You can survive - but if you want to go back a few pages, it becomes
frustrating, because you have to either guess how many to go back or
keep loading each page through the history. It _is_ a bloody nightmare
- trust me, I have seen several sites (usually Fotopic-type sites)
that have exactly this problem.

--
Stevie D
\\\\\ ///// Bringing dating agencies to the
\\\\\\\__X__/////// common hedgehog since 2001 - "HedgeHugs"
___\\\\\\\'/ \'///////_____________________________________________

On Tue, 3 Jan 2006 16:28:08 +0000, Jake put finger to keyboard and
typed:

Actual truncation of the text is unlikely, but visual truncation will
take place if the width of the display isn't enough for the full
length. That's particularly important when viewing favo(u)rites in a
browser sidebar.

Mark
--
http://www.GoogleFun.info - fun and games with Google!
"I'm so tired of acting tough"

On Tue, 03 Jan 2006, Mark Goodge wrote:

Or if you use a tabbed browser

Robert
--
La grenouille songe..dans son château d'eau

In message <m1sls51406.fsf@chezmarshall.freeserve.co.uk>, Robert
Marshall <spam@chezmarshall.freeserve.co.uk> writes
Until you place the mouse pointer over the tab ...... at which time the
tooltip will display the complete title contents.

regards.

--
Jake (jake@gododdin.demon.co.uk -- just a 'spam trap' mail address)