new page... little help please?

[DaKitty]

Okay, so I've gotten the little bit if a hang on the Server Side includes
Here's the page I'm creating:
http://www.socalolympians.org/Page2.asp

This time it actually has a functional navbar.

I know, I know, it's a table based layout... I'm not up on CSS stuff yet.
Maybe I'll learn more about it on my next project.
oh, yea, if you're curious, the SSI page alone is:
http://www.socalolympians.org/navbar.asp

I ran it through the validator... it is complaining about alt tag missing on
shim image... I think I'll pass that one up. I relied on Fireworks to do the
layout, and didn't go creating the table myself, from scratch... I'm not
completely sure why it's using shims... when I remove them, the whole thing
gets jumbled up, so I'm not touching them (for now).

The part I don't understand is the 'doctype' declaration that the validator
got hung up on. What should my doctype be?

I'm wondering if the other messages about margin etc... won't disappear
after a correct doctype has been declared???

Thanks to the validator, I remembered to put alt tags in my navbar images...
I gather it's a very good coding practice to do that? What does it do?
Displays text tag for those who aren't seeing the images for one reason or
another? Is that correct? Is there more to it?

Another thing, I think across the bottom, in a little less conspicuous spot
I'll put a basic text navigation bar?
Much like I have on this site: http://mastersmvnswim.org/Main.htm near the
bottom. Is it a good practice to do those?
And... no looking at the code on this one.. I inherited that site... I don't
wanna know what you'll find there, I think it'll just give me a headache,
and I won't know or have much time to fix it all In few months I'll get
to redesign it from scratch, I hope!

Thanks,
Connie

 

[Steve Pugh]

Okay, so I've gotten the little bit if a hang on the Server Side includes
Here's the page I'm creating:
http://www.socalolympians.org/Page2.asp

This time it actually has a functional navbar.

But no content?

And are you going to do something about the fact that all the pages
link to themselves?

I ran it through the validator... it is complaining about alt tag missing on
shim image... I think I'll pass that one up.

Why? Is adding alt="" to the (frankly pointless spacer images) too
much work?

You also need to add alts to the header images. Turn off image loading
and your page has no heading. Whoops.

The part I don't understand is the 'doctype' declaration that the validator
got hung up on. What should my doctype be?

Based on your code, HTML 4.01 Transitional.

I'm wondering if the other messages about margin etc... won't disappear
after a correct doctype has been declared???

No. Your using code that doesn't exist in any published version of
HTML. So that will be reported as an error whatever doctype you use
(unless you fancy writing your own DTD and referencing that in your
doctype).

Thanks to the validator, I remembered to put alt tags in my navbar images...
I gather it's a very good coding practice to do that? What does it do?
Displays text tag for those who aren't seeing the images for one reason or
another? Is that correct? Is there more to it?
Correct.

Another thing, I think across the bottom, in a little less conspicuous spot
I'll put a basic text navigation bar?

Not much need for it as far as I can see.

Steve

 

[auntie_biotic]

Looks fine to me but I'm NO expert!

 

[DaKitty]

But no content?

Not at the moment... The powers to be just emailed me a bunch of word
documents with content. WIP

And are you going to do something about the fact that all the pages
link to themselves?

What do you mean by 'they link to themselves?'
It links to a different page each time, it's just that they all look the
same at the moment. I'm not sure I understand what you mean?

One thing I would like to do is have the navbar display a down image first,
depending on what page you're on... as a little indicator where you are.
in general programming terms, I suppose it would be an if/then loop, if
current page is:...... then initialy display down image, else.... (what's
there now)
I suspect that would have to be written insice the navbar.asp code.
I have no idea how to go by doing that. Does html have a conditional loop
that could do this, or does it need to be a javascript piece?

Why? Is adding alt="" to the (frankly pointless spacer images) too
much work?

I'm not fully understanding their function yet, but I suspected theyre not
necessary, at least that's what I'm starting to gather. So I put off dealing
with that later. I may end up rfemoving them completely... Although, on my
first try, the table layout got all jumbled up. Need to experiment more.

You also need to add alts to the header images. Turn off image loading
and your page has no heading. Whoops.

Good point! Thanks.

Based on your code, HTML 4.01 Transitional.

I don't know. At this point I use whatever dreamweaver mx comes up with. I
don't know enough yet to do straight HTML.
I keep the code window open, so I can slowly learn what does what.

No. Your using code that doesn't exist in any published version of
HTML.

So why does dreamweaver put it there? Will the page look diofferent if I
take that code out?
(Sorry.. I'm really *that* new to all this)

So that will be reported as an error whatever doctype you use
(unless you fancy writing your own DTD and referencing that in your
doctype).

What does DTD stand for?

I was reading somewhere that it's needed in case a user has images turned
off, or there are some other navbar malfunctions?
But, other than knowing that alt tags in images will help this, I haven't
got a clue what other 'malfunctions' could happen.
Does this mean any more to you than it does to me???

Thank you very much for your input!

 

[neredbojias]

Without quill or qualm, DaKitty quothed:

Okay, so I've gotten the little bit if a hang on the Server Side includes
Here's the page I'm creating:
http://www.socalolympians.org/Page2.asp

I get something completely different from IE in Mozilla. In the latter,
the menu is way down the page.

 

[Steve Pugh]

What do you mean by 'they link to themselves?'
It links to a different page each time, it's just that they all look the
same at the moment. I'm not sure I understand what you mean?

http://www.socalolympians.org/about_us.asp has a link to
http://www.socalolympians.org/about_us.asp

http://www.socalolympians.org/news.asp has a link to
http://www.socalolympians.org/news.asp

and so on.

It can be confusing to users, to be presented to a link to About Us
when they think they're already on the About Us page, so the follow
the link and reach the same page again. Pages should not link to
themselves. So modify your navigation include so that the navigation
image to the current page is not a link.

One thing I would like to do is have the navbar display a down image first,
depending on what page you're on... as a little indicator where you are.
in general programming terms, I suppose it would be an if/then loop, if
current page is:...... then initialy display down image, else.... (what's
there now)
I suspect that would have to be written insice the navbar.asp code.

Yes. Obviously this should be combined with my suggestion above.

I have no idea how to go by doing that. Does html have a conditional loop
that could do this, or does it need to be a javascript piece?

No. As you're using ASP for the includes you would do it with ASP.

I'm not fully understanding their function yet, but I suspected theyre not
necessary, at least that's what I'm starting to gather. So I put off dealing
with that later. I may end up rfemoving them completely... Although, on my
first try, the table layout got all jumbled up. Need to experiment more.

Removing the spacer images is likely to make the tables based layout
fall apart. Ideally you should aim to remove the tables based layout.

If you feel that you aren't skilled enough to do this then you should
add alt="" to all the spacer images. This helps to prevent a speech
browser from saying 'image' every time it encounters one of these
images.

I don't know. At this point I use whatever dreamweaver mx comes up with. I
don't know enough yet to do straight HTML.
I keep the code window open, so I can slowly learn what does what.

HTML comes in various versions. The version that comes closest to
matching what you have used is HTML 4.01 Transitional thus the doctype
you should include
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
as the first line of your code.

The specification for HTML 4.01 can be found at
http://www.w3.org/TR/html401/

As you become more skilled and less reliant on tools like Firewoks and
Dreamweaver you should aim to write to HTML 4.01 Strict rather than
Transitional.

So why does dreamweaver put it there? Will the page look diofferent if I
take that code out?
(Sorry.. I'm really *that* new to all this)

Yes, the page will look different. But you can replace this
non-standard HTML code with standard CSS.

body {
margin: 0; padding: 0;
}

will set the page margins to zero in browsers with decent CSS support
(IE4+, Opera, Netscape 6+, Safari, Konqueror, Mozilla, Firefox, etc.)
The only browsers that support the non-standard HTML but not the CSS
equivalents are IE3 and NN4. IE3 can safely be ignored these days and
more and more authors are deciding that NN4 can be ignored as well.

What does DTD stand for?

Document Type Definition

It's the formal definition of the HTML version being used.
e.g. http://www.w3.org/TR/html401/loose.dtd
and is what the doctype is referencing. This is what the validator
checks your code against.

I was reading somewhere that it's needed in case a user has images turned
off, or there are some other navbar malfunctions?

If your navigation was an image map rather than separate images, or
relied upon JavaScript or Flash or some other optional client side
technology then it might not work for some users. But as your
navigation is just simple links with suitable alt texts there's little
chance of it failing totally.

What you may need to consider is that some users may find the text in
your images difficult to read. A text only backup has the advantage
that the user can override the colour scheme or enlarge the text. And
if you are going to have pages with lots of content then some users
may prefer to find a duplicated set of navigation at the bottom of the
page (lazy buggers can't be botherd to go back to the top).

Steve

 

[DaKitty]

http://www.socalolympians.org/about_us.asp has a link to
http://www.socalolympians.org/about_us.asp

http://www.socalolympians.org/news.asp has a link to
http://www.socalolympians.org/news.asp

and so on.

It can be confusing to users, to be presented to a link to About Us
when they think they're already on the About Us page, so the follow
the link and reach the same page again. Pages should not link to
themselves. So modify your navigation include so that the navigation
image to the current page is not a link.

Oh, gotcha!
I would like to do that... except with making the navbar an SSI, I don't
know how to make the link inactive when on a particular page.
Don't know enough coding yet.

Yes. Obviously this should be combined with my suggestion above.


No. As you're using ASP for the includes you would do it with ASP.

Don't know how to do it in ASP ot Javascript or PHP either. My whole
point/question is, I need to see a sample of a code that does this.
I'm starting to gather that ASP uses some of the VBscript? At least that;s
what I read in an ASP tutorial yesterday.
Well, looks like I have little ways to go befor I can figure out hiw to do
it.
If you happen to know a shortcu to a piece of code that does this - or
something very similar, I'd really pappreciate a link. Seems like I pick up
on things and remember them quicker when I 'reverse engineer' them.

As for ASP vs. php vs. Javascript... I don't know which is better to use in
what case. Hoping to learn more as I go....

Removing the spacer images is likely to make the tables based layout
fall apart. Ideally you should aim to remove the tables based layout.

I hear ya.
I made a first attempt at CSS yesterday on the about Us page... Another one
I need to learn more about!

If you feel that you aren't skilled enough to do this then you should
add alt="" to all the spacer images. This helps to prevent a speech
browser from saying 'image' every time it encounters one of these
images.

Ah, good point about the speech browsers! This place does deal with
Olympians AND Paralympians, so there may be more handicapped access than
your usual run of the mill targeting general public website.

HTML comes in various versions. The version that comes closest to
matching what you have used is HTML 4.01 Transitional thus the doctype
you should include
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
as the first line of your code.

The specification for HTML 4.01 can be found at
http://www.w3.org/TR/html401/

As you become more skilled and less reliant on tools like Firewoks and
Dreamweaver you should aim to write to HTML 4.01 Strict rather than
Transitional.

Cool, thanks for that tidbit!!! I had no idea.

Yes, the page will look different. But you can replace this
non-standard HTML code with standard CSS.

body {
margin: 0; padding: 0;
}

will set the page margins to zero in browsers with decent CSS support
(IE4+, Opera, Netscape 6+, Safari, Konqueror, Mozilla, Firefox, etc.)
The only browsers that support the non-standard HTML but not the CSS
equivalents are IE3 and NN4. IE3 can safely be ignored these days and
more and more authors are deciding that NN4 can be ignored as well.

Thanks!

Document Type Definition

It's the formal definition of the HTML version being used.
e.g. http://www.w3.org/TR/html401/loose.dtd
and is what the doctype is referencing. This is what the validator
checks your code against.

Ah!? Gotcha!

If your navigation was an image map rather than separate images, or
relied upon JavaScript or Flash or some other optional client side
technology then it might not work for some users. But as your
navigation is just simple links with suitable alt texts there's little
chance of it failing totally.

What you may need to consider is that some users may find the text in
your images difficult to read. A text only backup has the advantage
that the user can override the colour scheme or enlarge the text. And
if you are going to have pages with lots of content then some users
may prefer to find a duplicated set of navigation at the bottom of the
page (lazy buggers can't be botherd to go back to the top).

Got it!

Hey, thanks for all the great input!
So much to learn... it will take me some time to process it all!
I hope my silly beginners questions aren't too annoying!
I really appreciate you taking the time to explain things!

-Connie

 

[DaKitty]

Without quill or qualm, DaKitty quothed:


I get something completely different from IE in Mozilla. In the latter,
the menu is way down the page.

oops, that's no good.
Thanks for pointing that out.
Any hints as to why? (Wile I'm off troubleshooting it)

 

[Nik Coughlin]

Hey, thanks for all the great input!
So much to learn... it will take me some time to process it all!
I hope my silly beginners questions aren't too annoying!
I really appreciate you taking the time to explain things!

You show a willingness to listen which people around here probably find
endearing.

 

[DaKitty]

You show a willingness to listen which people around here probably find
endearing.

Thanks
Well, I hope I don't look like I want you guys to do it all for me...
I try on my own too. There's just so much of it, especially when starting
out, it's hard to know where to even begin.
I have a pile of about 7-8 books I got in last few months...
It really helps tremendously when you have a resource where you can ask a
few pointed questions to get you over the hump... and you guys are being so
nice to me, even though I'm sure you've heard the same questions over and
over and over again!

 

[Kris]

It really helps tremendously when you have a resource where you can ask a
few pointed questions to get you over the hump...

What has been a lot of help to me is to continuously read this group
(and others), not just threads that I have started or contributed to. I
do that for over 1.5 years now and I am still learning. You can gain a
lot when you take half an hour per day skimming for topics that catch
your interest and read what experts have to say about it. It beats
watching Dr. Phil.

 

[rf]

oops, that's no good.
Thanks for pointing that out.
Any hints as to why? (Wile I'm off troubleshooting it)

You don't have a doctype specified, causing IE to function in quirks mode
and thus reproducing the box model bugs from IE5.x. You then produce your
page taking these bugs into account. When viewing the page with a real
browser that does not have the bugs you get all sorts of weird things.

In this case it looks like margin problems. IE in quirks mode thinks the
margin is part of the body of an element so the margins width is included in
the width: of the element. Other browsers correctly seperate margin from the
elements width.

So, with FF for instance, that big white area is too wide. Your top
background tiles to the right and also down, as the navigation has been
bumped to below the white area.

All this is theory, I then went to your HTML to have a look.

Oh my

What is all of that nasty dreamweaver stuff doing in there? *ALL* of that
silly mouseover stuff can be done quite readily with a couple of CSS rules.

You are also allowing dreamweaver to use deprecated things like <font>
elements. Don't. In fact don't let dreamweaver insert *any* code for you.
Whatever code it does insert is usually rubbish.

Start again by reproducing the page with a real editor. Not a WYSIWYDG one,
something text only like notepad or crimson. Really. You will be far better
off.

This time use real text for the navbar, not pictures of text.

<aside>
If I were given the page as it stands to change I would immediately ask the
client for enough money to re-write it totally. If the client refused I
would give him the yellow pages so as to find another developer.
</aside>

 

[DaKitty]

What has been a lot of help to me is to continuously read this group
(and others), not just threads that I have started or contributed to. I
do that for over 1.5 years now and I am still learning. You can gain a
lot when you take half an hour per day skimming for topics that catch
your interest and read what experts have to say about it. It beats
watching Dr. Phil.

oh, yeah, Dr. Phil... who was it that discovered him, was it Oprah...
Created a monster!

I need a TV channel that has Law & Order, Trading Spaces, Tech TV, Monk and
Carol Duvall show rotating every hour.

 

[DaKitty]

You don't have a doctype specified, causing IE to function in quirks mode
and thus reproducing the box model bugs from IE5.x. You then produce your
page taking these bugs into account. When viewing the page with a real
browser that does not have the bugs you get all sorts of weird things.

In this case it looks like margin problems. IE in quirks mode thinks the
margin is part of the body of an element so the margins width is included in
the width: of the element. Other browsers correctly seperate margin from the
elements width.

So, with FF for instance, that big white area is too wide. Your top
background tiles to the right and also down, as the navigation has been
bumped to below the white area.

I've seen that happen in the dreamweaver editor as well.
I suspect that has to do with rowspans...

All this is theory, I then went to your HTML to have a look.

Oh my

What is all of that nasty dreamweaver stuff doing in there? *ALL* of that
silly mouseover stuff can be done quite readily with a couple of CSS

rules.

I suspected that... Another thing to learn.
What do I do with people who want their website, and are totally in love
with the graphics, and won't go for the text only...
You need to be able to accomodate them somehow.

You are also allowing dreamweaver to use deprecated things like <font>
elements. Don't. In fact don't let dreamweaver insert *any* code for you.
Whatever code it does insert is usually rubbish.

Start again by reproducing the page with a real editor. Not a WYSIWYDG one,
something text only like notepad or crimson. Really. You will be far better
off.

Hah! I wish I knew how to do all that!
Maybe in a few months or so of learning, I'll know... umh.... 1/3 of it...

Well, looks like it will be a looong time before I have a 'perfect' html.
Yikes.

 

[Barbara de Zoete]

oh, yeah, Dr. Phil... who was it that discovered him, was it Oprah...
Created a monster!

I need a TV channel that has Law & Order, Trading Spaces, Tech TV, Monk
and
Carol Duvall show rotating every hour.

And how is that going to improve your html ablilities, hmm?
No, really. If you get the TV channel you want, there wouldn't be much
time left to try if Kris' advice can work for you. It is really an
excellent advise. I've read newsgroups on www authoring and design for
well over a year now, and my skills have improved drastically because of
that and I'm still learning something new almost every day.

I doubt if that had been the case had there been a TV channel, that has
all the great British detective TV series with atleast Morse and the Ruth
Rendell series, rotating every hour .

 

[Els]

And how is that going to improve your html ablilities, hmm?
No, really. If you get the TV channel you want, there
wouldn't be much time left to try if Kris' advice can work
for you. It is really an excellent advise. I've read
newsgroups on www authoring and design for well over a
year now, and my skills have improved drastically because
of that and I'm still learning something new almost every
day.

I doubt if that had been the case had there been a TV
channel, that has all the great British detective TV
series with atleast Morse and the Ruth Rendell series,
rotating every hour .

It's all a matter of what's interesting to you. I used to
watch TV several hours per day, all the sitcoms I liked had
repeats on some channel at some hour, but since getting into
webdesign / Usenet I seem to forget what's on telly, no matter
if it's my favourite show

 

[Barbara de Zoete]

Hah! I wish I knew how to do all that!
Maybe in a few months or so of learning, I'll know... umh.... 1/3 of
it...

Well, looks like it will be a looong time before I have a 'perfect' html.
Yikes.

If you look into html and css you will find it is more easy to learn how
to code by hand (a trade you'll have use for for as long as you code for
the www) than to learn how to use a program (which is only useful as long
as you use that program).

With html all you really need at first is knowledge on the basic page
structure and knowlegde on a handful of elements and their attributes. If
you master those, you can already write and code pages with solid
structure that are semantically right and that any browser can parse. And
you can write those pages fast too.
Depending on what you do in your page, for me those elements are:
- <h#>
- <p>
- <ul> and <ol>, with <li>
- <img>
- <a>
- <table>, with <colgroup>, <col>, <thead>, <tfoot>, <tbody>, <tr>,
<th>, <td>
- <div>
- <span>
- and an occasional <iframe> because my server doesn't allow me to
<!--#include

CSS is probably a bit different in that the possibilities for using css
seems indefinite. If you start out to style the basic elements for your
pages (even on an attribute level if you want, although Internet Explorer
doesn't support that) and once you know what you're doing there, you move
on to laying out the page itself (with <div> and [id] so you can do with
isolated and identifiable parts of a page what ever you want to), it
shouldn't be too long before you can come up with some pretty nice styling
and lay out too.

Anyway, I think that is the way to learn. Get the basical structure,
understand how to use semantically correct markup, style the elements you
use (instead of using a lot of [class]es and [id]'s), lay out the page
with unique [id]'s on some containing <div>'s. Done.
Not only is that the way to learn, it is also (I think) the correct order
to create any new page. So once you start learning in this order, you keep
learning with every page you create. At least, that is my experience.

 

[rf]

I used to watch TV several hours per day
Hmmm.

since getting into webdesign / Usenet I seem to forget what's on telly

Hooked

 

[Els]

Hooked

Ssshh!! <g>

 

[rf]

Barbara de Zoete

- <h#>
- <p>
- <ul> and <ol>, with <li>
- <img>
- <a>
Yes.

- <table>, with <colgroup>, <col>, <thead>, <tfoot>, <tbody>, <tr>,
<th>, <td>

Only of course if the data in that table is tabular in nature.

- <div>
Essential.

- <span>

Only if the content can not be styled *without* using that element.

- and an occasional <iframe> because my server doesn't allow me to
<!--#include

It is time for you to get a server that does support includes, preferable
one that suports server side scripting.

<stuff about id and class>

Class is the way to go. ID is for other things, like fiddling with the DOM
using javascript.