Some advice for an HTML novice please


G

Gordon Levi

A friend is currently constructing his own web site. He programs
process control computers for a living so he is not going to have
trouble understanding CSS and HTML. I would like to point him to a
short document that explains the basics and prevents him making the
classic errors. Any suggestions?
 
Ad

Advertisements

J

j

A friend is currently constructing his own web site. He programs
process control computers for a living so he is not going to have
trouble understanding CSS and HTML. I would like to point him to a
short document that explains the basics and prevents him making the
classic errors. Any suggestions?

I'm not the best source for these, but I have few to get started.Yukka has this:

http://www.cs.tut.fi/~jkorpela/www.html

Which explains in some technical detail some of the whys and why not.

The ultimate reference is here:

http://www.w3.org/community/webed/wiki/HTML

I've found the info here to be good,although I have never looked through
the site. Just when I hit a Google reference to there that the info is good:

http://css-tricks.com/

I don't have a reference to Dorayme's work, but she has a lot on floats
and many other topics. Dorayme?

Just because you find your html/css works doesn't mean it will work in
another browser. This is the resource for that:

http://caniuse.com/

You'll find a lot of references to W3 Schools. Unfortunately there is a
lot of bad information there. Stay away.

Certainly there are others...

Jeff
 
C

Christoph Michael Becker

Gordon said:
A friend is currently constructing his own web site. He programs
process control computers for a living so he is not going to have
trouble understanding CSS and HTML. I would like to point him to a
short document that explains the basics and prevents him making the
classic errors. Any suggestions?

Did your friend consider using a content management system for this purpose?
 
D

dorayme

j <[email protected]> said:
I don't have a reference to Dorayme's work, but she has a lot on floats
and many other topics. Dorayme?

You talking to me?

I am dorayme, if I ever get my hands on Dorayme, I will ... I will ...
O... I dunno... have a drink with it maybe and tell it to bugger off
and stop confusing folks. <g>

Just a few random thoughts:

I have a piece on floats at

<http://netweaver.com.au/floatHouse/>

And as for other bits and pieces, best I can do for now is:

<http://dorayme.netweaver.com.au/>

But mostly, I would not recommend any of my stuff to someone just
starting out. About floats, it is probably a good idea for a beginner
to see what he can do without floats for a while.

In fact, I would recommend getting to see how much the beginner can do
with some basic HTML:

Block elements: headings (H1, 2, 3...), paragraphs, DIVS, UL and OL

Inline elements: SPAN, IMG

And some basic CSS: paddings, margins, borders, colors, backgrounds.

And some general overall things about how to link CSS to HTML docs,
the importance of a doctype to avoid quirks.

Best to stay away from *positioning* (e.g. position: absolute;) for a
while. In fact, stay away from things out of the normal HTML flow.
When limitations are felt, this is the time to learn more things, when
there is hunger, the new appetite will cause a resolve of the spirit.
 
G

Gordon Levi

Christoph Michael Becker said:
Did your friend consider using a content management system for this purpose?

No. Should he? It's a simple site with a few pages describing what his
one-person company does, his qualifications and experience and how to
contact the company.
 
G

Gus Richter

A friend is currently constructing his own web site. He programs
process control computers for a living so he is not going to have
trouble understanding CSS and HTML. I would like to point him to a
short document that explains the basics and prevents him making the
classic errors. Any suggestions?

Perhaps this will help:

<https://developer.mozilla.org/en-US/>
 
Ad

Advertisements

T

Tim W

No. Should he? It's a simple site with a few pages describing what his
one-person company does, his qualifications and experience and how to
contact the company.


He totally should. If I am making a site of more than a single page then
I use a Content Management System. This is why:

If you can work an ftp program you can set up a CMS in five minutes.
Cost is nil
Knowledge of css and html is not necessary (but an advantage)
It's quicker and easier to theme a cms than to adapt an html template.
Future maintenance and editing is a cinch.
Upgrading the design in the future is a cinch
You will get ready-made plugin stuff like forms and slideshows
Backups are a cinch
Organising pages on nav menus is a cinch
You will get a much better site.

Wordpress is obviously popular but I would recommend GetSimple CMS as
the best quick, easy, and lite system. there's also CMSimple and Pluck
CMS used to be good but I think is abandoned now.

It has nothing to do with the number of pages. A CMS is just the
sensible way to run any site these days.

Tim W
 
J

j

Then it's probably overkill for him at this time.

I'd say so, getting ready to do something (setting up a CMS) shouldn't
take longer than doing it (having a web page).
One of my sites has over 300 pages and I've yet to see any advantage to
a content management system.

You must have some kind of server processing? Otherwise adjusting the
template or navigation would be a bitch.

I've seen sites that have grown and the changes never get migrated
through. That is where a CMS helps.

Jeff
 
S

se

Ed Mullen said:
The two different templates for unique sections of the site are all styled
via external CSS files. Changing the style sheet changes every page
automatically.

The navigation menus are contained in a plain-text file and "included" via
PHP. To change the navigation I change that one file and all pages are
updated.

This page explains:

http://edmullen.net/menu_example.php

In case you don't know:
In IE6 your table based drop down has a flaw. Menu-cell background-team
are layered above text so to hide it.

Rgds
/se
 
J

j

In case you don't know:
In IE6 your table based drop down has a flaw. Menu-cell background-team
are layered above text so to hide it.

He probably doesn't know, I didn't.

Although there is a lot of IE6 out there, few of us see it unless we use
something like browsershots.org

How is it that you have IE6? Not so easy to run two versions of IE on a
single OS.


I gave up on IE6 a year or so ago. I even took out the easy hacks like
PNG transparency and inline-block. IE6 dates to 2001, which in internet
years makes it 306. I suppose in Microsoft years that would be 12.

Jeff
 
Ad

Advertisements

B

Ben Bacarisse

j said:
How is it that you have IE6? Not so easy to run two versions of IE on
a single OS.

The "you" is not me but I venture to reply anyway... I have a
Microsoft- supplied VM that runs IE6. You can get IE6-IE11 in that
form, if I recall correctly. I rarely check things on IE6 anymore, but
since the VM is the smallest of the lot so it does not seem worth
throwing it away just yet.
 
S

se

j said:
He probably doesn't know, I didn't.

Although there is a lot of IE6 out there, few of us see it unless we use
something like browsershots.org

How is it that you have IE6? Not so easy to run two versions of IE on a
single OS.


I gave up on IE6 a year or so ago. I even took out the easy hacks like PNG
transparency and inline-block. IE6 dates to 2001, which in internet years
makes it 306. I suppose in Microsoft years that would be 12.

Jeff

I've installed XP-mode on win7. A free program from ms. It can
only be installed on Window 7 -Ultimate and Professional.
Alternate, as told by Ben, you can install a VM (Virtual Machine).
Using VM requires an XP with lisence, though. Whereas XP-mode
has XP build-in to it. XP-mode is not suited as an alternative to a
real XP-box, as it loads and unloads incredible slow. XP-mode
comes with IE6 build-in. One have to take care that updates not
update it to IE8.

The reason I told "Ed" is because, Stu Nicholls table based drop-down
is meant as a remedy to the absence of list-hover in older IE-browsers,
Ed's use of it implies an interest of taking care of the few visitors
still using IE6. Enthough, perhaps a former interest, that could be gone
by now. The problem does not relate to the table based menu. It relates
to IE6. Don't remember, but have a vague memory of setting the
background-color of the <li> having the team in it, is required to remedy
a problem of a kind.

/se
 
S

se

It's not what I first thought. You have some errors in you menu-styles as
seen
here. Besides those style-errors, you probably forgot to set the color to
"white".
The color is black, a bad contrast to the dark-green image "sig_bg_s.jpg"
(the last style shown). There possibly are more style-errors than I saw.
You should look for possibly more. I'm not allowed to attach a screendump.
/se

/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t\op:31px;
}

/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {
width:150px;
w\idth:128px;
}


/* style the third level hover */
..menu ul ul ul a:hover {
background: #fbf9ef url(/images/sig_bg_s.jpg);
}
 
J

Jonathan N. Little

Ed said:
Jonathan N. Little wrote:
Jonathan, does it also do that on other pages other than that test?

Nope, your website looks okay in MSIE6. You must have something
different in your demo page. I didn't have time to check deeper...
 
Ad

Advertisements

S

se

Jonathan N. Little said:
Nope, your website looks okay in MSIE6. You must have something different
in your demo page. I didn't have time to check deeper...

You got that wrong. I can't imagine that this error in the
links (<a></a>) of the drop-down menu could possibly
be displaying in my IE6, and be none existing of another IE6 -
in your IE6. How can the typos in the websites css-styles
I posted in my previous post be in conformity with your
conclusion. Looking at his demo, you posted a screendump
of, it displays differently from the site-menu. But it is still
impossible to read the hovered ancher-text in the drop-downs
listes, because, as can be seen in the last one of my posted
copies below of styles from the websites menu css-stylesheets,
the ancher-text needs a color change at hover. And those
typos in it "t\op:31px; w\idth:128px;" is hardly insignificant.:
Please check it out.:

/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t\op:31px;
}

/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {
width:150px;
w\idth:128px;
}


/* style the third level hover */
..menu ul ul ul a:hover {
background: #fbf9ef url(/images/sig_bg_s.jpg);
}

/se
 
J

Jonathan N. Little

se said:
You got that wrong. I can't imagine that this error in the
links (<a></a>) of the drop-down menu could possibly
be displaying in my IE6, and be none existing of another IE6 -
in your IE6. How can the typos in the websites css-styles
I posted in my previous post be in conformity with your
conclusion. Looking at his demo, you posted a screendump
of, it displays differently from the site-menu. But it is still
impossible to read the hovered ancher-text in the drop-downs
listes, because, as can be seen in the last one of my posted
copies below of styles from the websites menu css-stylesheets,
the ancher-text needs a color change at hover. And those
typos in it "t\op:31px; w\idth:128px;" is hardly insignificant.:
Please check it out.:

/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t\op:31px;
}

/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {
width:150px;
w\idth:128px;
}


/* style the third level hover */
.menu ul ul ul a:hover {
background: #fbf9ef url(/images/sig_bg_s.jpg);
}


Okay first of all those are not typos, but css hacks. Not that I am
condoning the use of hacks, I don't. Hack always bite you in the end.

Those hacks rely on different versiona of MSIE did not properly handle
invalid css rules. A browser is supposed to IGNORE an invalid rule where
MS incorrectly had IE "overlook" the syntax errors, a sort of "best
guess auto-correct" and apply the rule where conforming browsers would
ignore it...
 
S

se

Jonathan N. Little said:
Okay first of all those are not typos, but css hacks. Not that I am
condoning the use of hacks, I don't. Hack always bite you in the end.

Those hacks rely on different versiona of MSIE did not properly handle
invalid css rules. A browser is supposed to IGNORE an invalid rule where
MS incorrectly had IE "overlook" the syntax errors, a sort of "best guess
auto-correct" and apply the rule where conforming browsers would ignore
it...

Thanks,
Another error shows up in Chrome:
Borders around the links on some of the last level drop-downs
disappeares. Not saying it relates to use of hacks.
None considerable errs, indeed.

/se
 
Ad

Advertisements

S

se

Ed Mullen said:
se said:
Thanks,
Another error shows up in Chrome:
Borders around the links on some of the last level drop-downs
disappeares. Not saying it relates to use of hacks.
None considerable errs, indeed.

/se

Sigh. Well, IE6 eh? Only so much effort I'm willing to expend for that
ancient and defective browser.

Generally it's not fair to compare ancient tools or articles of everyday use
with newer in terms of mockery, sorry. Take care of your old Guitar.

/se
--
Ed Mullen
http://edmullen.net/
A fool-proof method for sculpting an elephant: First, get a huge block of
marble; then chip away everything that doesn't look like an elephant.

A welknown and funny elephant-technique when creating
moulding-die-tools by chiping away excess material.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top