• Quick note - the problem with Youtube videos not embedding on the forum appears to have been fixed, thanks to ZiprHead. If you do still see problems let me know.

HTML Tips

Brian-M

Daydreamer
Brian-M
Joined
Jul 22, 2008
Messages
8,044
I'm looking for advice for how to make plain-HTML webpages that don't look like garbage.

I only know a little HTML, so I'm mostly figuring it out as I go. Here's a generic sample page I've put together just to test out a few different ideas... can anyone offer tips on how to improve it? (General-purpose tips I can apply to proper web-pages I might make later.)

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
   <meta name="keywords" CONTENT="insert list of keywords here">
   <title>Sample page</title>
   <STYLE type="text/css"> <!-- A{text-decoration:none} --> </STYLE>
</head>
 
<body bgColor="#ffffff">

  <b>OOOOKKKKKKKAAAAAAAAAAYYYYYYY......</b><p>
  <a name="top"></a>

  <center>
    
    <TABLE cellSpacing=5 cellPadding=0 border=0 bgColor="#ffffff" width="100%">
    <TBODY><TR><TD vAlign=Bottom align=center bgColor="#ffffff" width="20%">
        <big><b>EXAMPLE</b></big>
      </TD><TD vAlign=bottom align=center bgColor="#d0e0ff">
        <b>Home</b><br>
      </TD><TD vAlign=bottom align=center bgColor="#e8d0c0">
        <A HREF="page1.html">Page 1</A><br>
      </TD><TD vAlign=bottom align=center bgColor="#e8d0c0">
        <A HREF="page2.html">Page 2</A><br>
      </TD><TD vAlign=bottom align=center bgColor="#e8d0c0">
        <A HREF="page3.html">Page 3</A><br>
    </TD></TR></TBODY></TABLE>

   <TABLE cellSpacing=5 cellPadding=0 border=0 bgColor="#ffffff" width="100%">
   <TBODY><TR><TD vAlign=top align=center bgColor="#ffffff" width="20%">
      <big><b>PAGE</b></big><p>    
      <TABLE cellSpacing=0 cellPadding=5 border=1 bgColor="#ffffff" width="100%">
      <TBODY><TR><TD vAlign=top align=left bgColor="#fafaff" width="100%">
         <br><center><small><b>LINKS</b></small><p></center>
         <A HREF="http://www.talkorigins.org"><small>TalkOrigins Archive</small></a><p>
         <A HREF="http://whywontgodhealamputees.com"><small>Why Won't God Heal Amputees?</small></a><p>
      </TD></TR></TBODY></TABLE>

      </TD><TD vAlign=top align=left>
      <hr>
      <center>
         <h1>Home Page</h1>
         <b><big>This site is still under construction</big></b><br>
         <small>(So I'll copy-paste some text to take up space)</small>
         <p>
         <h3>The Magic of Oz</h3>
         
          A Faithful Record of the Remarkable Adventures of Dorothy<br>
          and Trot and the Wizard of Oz, together with the<br>
          Cowardly Lion, the Hungry Tiger and Cap'n Bill,<br>
          in their successful search for a Magical<br>
          and Beautiful Birthday Present for<br>
          Princess Ozma of Oz<p>

          by L. Frank Baum<br>
          "Royal Historian of Oz"<p>
      </center>

      <a name="CONT"></a>

      <TABLE cellSpacing=0 cellPadding=5 border=1 bgColor="#fafaff" width="50%">
      <TBODY><TR><TD vAlign=top align=left>
         <center><b>Contents</b></center>
         <p>
         <A HREF="#00">To My Readers</A><br>
         <ol>
             <li> <A HREF="#01">Mount Munch</A><br>
             <li> The Hawk<br>
             <li> Two Bad Ones<br>
             <li> Conspirators<br>
             <li> A Happy Corner of Oz<br>
             <li> Ozma's Birthday Presents<br>
             <li> The Forest of Gugu<br>
             <li> The Li-Mon-Eags Make Trouble<br>
             <li> The Isle of the Magic Flower<br>
             <li> Stuck Fast<br>
         </ol>
      </TD></TR></TBODY></TABLE>

<p>
<a name="00"></a>
<h3>To My Readers</h3>

Curiously enough, in the events which have taken place in the last
few years in our "great outside world," we may find incidents so
marvelous and inspiring that I cannot hope to equal them with stories
of The Land of Oz.
<p>
However, "The Magic of Oz" is really more strange and unusual than
anything I have read or heard about on our side of The Great Sandy
Desert which shuts us off from The Land of Oz, even during the past
exciting years, so I hope it will appeal to your love of novelty.
<p>
A long and confining illness has prevented my answering all the good
letters sent me--unless stamps were enclosed--but from now on I hope to
be able to give prompt attention to each and every letter with which
my readers favor me.
<p>
Assuring you that my love for you has never faltered and hoping the
Oz Books will continue to give you pleasure as long as I am able to
write them, I am
<p>
Yours affectionately,
L. FRANK BAUM,
"Royal Historian of Oz."
"OZCOT"
at HOLLYWOOD
in CALIFORNIA
1919
<p>
<a name="01"></a>
<h3>1.  Mount Munch</h3>
On the east edge of the Land of Oz, in the Munchkin Country, is a
big, tall hill called Mount Munch.  One one side, the bottom of this
hill just touches the Deadly Sandy Desert that separates the
Fairyland of Oz from all the rest of the world, but on the other
side, the hill touches the beautiful, fertile Country of the Munchkins.
<p>

          </TD>
         </TR>
        </TBODY>
       </TABLE>
      <p>
    </center>
  </body>
</html>

Code was validated here: http://validator.w3.org
 
Last edited:
You appear to be using tables for purposes other than tabulating data. And this despite the fact that you are linking to a stylesheet. You are also style attributes directly on elements, such as the bgcolor attribute on the body element. Both of these things are bad.
 
To elaborate on Rat's post slightly:

Things like this:
cellSpacing=5 cellPadding=0 border=0 bgColor="#ffffff" width="100%"

Should be defined in your stylesheet, so that they can be reused and applied to specific types of elements. Later on, should you want to change the look, you just change the stylesheet, without having to edit every single HTML file that contains a table with that particular layout.

You seem to be making extensive use of tables which is probably the easiest way to get a tabular style layout, however the trend these days is away from <table> and towards nested <div> elements to achieve the same effect. The main benefit of this is you get a much more flexible, relative layout. The main disadvantage is that you can spend days trying to figure out why IE renders it correctly but FF refuses to (or vice-versa).
 
A third bad thing is this:

<b><big>This site is still under construction</big></b><br>

You are using HTML-Tags to change the appearance of a bit of text. You should be using CSS.

Generally speaking,

HTML structures a document It gives logical order to the information contained on the site. It tells us about image dimensions and gives meta-information to bits of text: (This is a link to http://www.randi.org/, this bit is important, that bit is a 3rd level headline, and that bit over there is a link to http://http://www.internationalskeptics.com/forums in a bullet item under a 4th level headline that is part of a thing known as "current news".)

CSS tells us how any of these things can look like, under various circumstances. (Make text green if it's a link, and underline it; unless the link is in a numbered list, in which case, make it purple and bold. Headlines should be 120% the size of all other text. If you are printing the document, apply this completely different sent of rules ...)

This approach ensures that the document and information structure is unambiguous and can be understood by any software that wants to make use of it. The layout information tells the software how the information is intended to be displayed - but the software or the user can override that. (A screenreader e.g. wouldn't have much use for "blue, underlined and 120% the size")

Putting the CSS in external documents rather than embedding it as part of the HTML files has various advantages:

You only need to download the CCS information once, and you can change the layout of all pages that use it centrally. (Want your links to get a different shade of blue? You change the one definition for link-colour that you have, rather than try and find every individual file, or worse: link.)
 
Rat said:
You appear to be using tables for purposes other than tabulating data.
Click to expand...

And when that is fixed, he can move from 4.01 transitional to 4.01.

Table layout through tables is now needed for less than .1% of browsers in use (IE 6). I have 4.01 sites with css table layouts that degrade gracefully under IE 6 (not easy to do), but those were created when IE 6 use was still 1 or 2%. At .1% and falling I would not worry about it. Anyone still using IE 6 deserves to see a jumbled mess.
 
I was hoping for tips on how to get a nice layout, but given your comments it seems pretty clear that the first step I should take it to read through a tutorial on the subject, instead of applying my current method of trial-and-error, looking up occasional examples, and playing around with it until I get something that looks a bit like I wanted, then running it through a HTML validator and tweaking it until it no longer returns a list of errors.
 
Brian-M said:
I was hoping for tips on how to get a nice layout, but given your comments it seems pretty clear that the first step I should take it to read through a tutorial on the subject, instead of applying my current method of trial-and-error, looking up occasional examples, and playing around with it until I get something that looks a bit like I wanted, then running it through a HTML validator and tweaking it until it no longer returns a list of errors.
Click to expand...

Well, by running it through a validator you're doing better than almost all of the websites out there. I doubt that 1% of pages on the web could pass validation.
 
Brian-M said:
I was hoping for tips on how to get a nice layout, but given your comments it seems pretty clear that the first step I should take it to read through a tutorial on the subject, instead of applying my current method of trial-and-error, looking up occasional examples, and playing around with it until I get something that looks a bit like I wanted, then running it through a HTML validator and tweaking it until it no longer returns a list of errors.
Click to expand...
First stop is w3schools. Second stop is w3fools, which will tell you why w3schools may have been a bad choice, despite its appearing first on many Google searches.

I learned originally by trial and error and similar processes. What got me on a better track was the HTML Bible, which is presumably still available, albeit in a later version than the one I had. If you run pages through the validator, then you are familiar with the w3c, and they have a lot of pages of guidance, as do Mozilla.

The problem with the validator is that it will tell you whether your code/markup technically fulfills the requirements of the standard, but it will not tell you whether you've written in the spirit of the standard. It is perfectly possible to write a page of complete nonsense, and in terrible style, and still pass the validator. I do still use the validator quite often, but it's really to catch where I've missed an alt attribute or similar. Of course, you can (and many people do) pass the validator by adding alt="" to all of your image elements, but that doesn't mean you've done what you were supposed to.
 
Personally I like my element names to be lowercase, but YMMV.

+1 on the other comments about use of HTML tables for display of non-tabular data.
 
HTML Tips go well with gravy on French Fries - just braise them with a little bacon. While you are doing that, braise everything else with a bit of bacon too. It's hard to go wrong if bacon is involved.........
 
I'm just going to replace the index page with some simple filler up for now. Something like...

HTML: 
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
  <title>Site not ready yet!</title>
</head>
<body>
  <center>
  <img src="images/notready.jpg" alt="Site not ready yet!">
  </center>
</body>
</html>

It's one of those cheap accounts where you pay a tiny annual fee and get a registered domain name, 20MB website hosting, and an email address using the domain name.

I've had it for years, mostly for the sake of a personalized email account. Haven't got much on there, the only thing I've updated in the last couple of years is a links page. I was thinking I might turn it into something resembling a proper website sometime.

Hmmm, the links page is pretty outdated. Some of those sites no longer even exist. I'll have to go through my bookmarks and update it sometime. Probably completely re-write it while I'm at it. Here's the current code...
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
  <title>Links</title>
 </head>

<body bgcolor="#0000aa">

<a name="TOP"></a>
<center>

<TABLE cellSpacing=0 cellPadding=5 width=600 border=2>
<TBODY> <TR><TD vAlign=top align=center bgColor="#ffffff">

<iframe src="http://free.timeanddate.com/clock/i200wep0/n152/tlau/tct/pct/ftb/tt0/tw1/tm1/td1/tb1" frameborder="0" width="215" height="18"></iframe>
<br><small>(Melbourne Time)</small>
<p>

<b>Favourites</B>
<p>
<A HREF="http://depletedcranium.com">Depleted Cranium</A><br>
<A HREF="http://www.radioaustralianews.net.au/topstories.htm">ABC Radio News</A><br>
<A HREF="http://cheezburger.com/sites">Cheezburger.com - Sites</A><br>

<p>
<br>
<b>Forums</B>
<p>
<A HREF="http://www.randi.org">JREF</A>
<A HREF="http://www.internationalskeptics.com/forums">Forums</A><br>
<A HREF="http://www.plentyoffish.com">Plenty Of Fish</A><br>
<A HREF="http://www.ausphotography.net.au">AusPhotography</A><br>

<p>
<br>
<b>Internet Accounts</B>
<p>
<A HREF="http://www.mail.com">mail.com</A><br>
<A HREF="http://www.name.com.au">name.com.au</A><br>
<A HREF="http://myph.us">MyPH - My Pic Host</A><br>
<A HREF="http://www.bigpond.com/internet/mybigpond/?ref=Net-Head-MyBigPond">BigPond</A><br>
<A HREF="http://en.gravatar.com">Gravatar</A><br>
<A HREF="http://www.ebay.com">eBay (Australia)</A><br>
<A HREF="http://www.paypal.com">PayPal</A><br>
<A HREF="http://www.youtube.com">YouTube</A><br>


</td><TD vAlign=top align=center bgColor="#ffffff">

<p><br>
<B>Job Sites</B>
<p>
<A HREF="http://jobsearch.gov.au/default.aspx">JobSearch.Gov</A><br>
<A HREF="http://www.jobseeker.com.au/j?l=traralgon&r=100">jSeeker</A><br>
<A HREF="http://mycareer.com.au/jobs/gippsland">MyCareer</A><br>
<A HREF="http://www.seek.com.au">Seek.Com</A><br>
<A HREF="http://employment.byron.com.au/">Byron</A><br>
<A HREF="http://australia.jobisjob.com">Job is Job</A><br>
<A HREF="http://www.simplyhired.com.au">Simply Hired</A><br>
<A HREF="http://www.indeed.com.au">Indeed.com</A><br>
<br>
<A HREF="http://www.skilled.com.au">Skilled</A><br>

<p><br>
<b>Misc</B>
<p><small>
<A HREF="http://www.wikipedia.org">Wikipedia</A><br>
<A HREF="http://www.wiktionary.org">Wiktionary</A><br>
<A HREF="http://www.latrobe.vic.gov.au/Events/Calendar/">Latrobe City Calendar</A><br>
<A HREF="http://www.efa.org.au/">Electronic Frontiers Australia</A><br>
<A HREF="http://www.atheistguidebook.org">Atheist Guidebook</A><br>
<A HREF="http://www.fallacyfiles.org">Fallacy Files</A><br>
<A HREF="http://www.whatstheharm.net">What's The Harm?</A><br>
<A HREF="http://tvtropes.org">TV Tropes</A><br>
<A HREF="http://www.snopes.com">Snopes.com</A><br>
<A HREF="http://validator.w3.org">HTML Validation</A><br>
<A HREF="http://www.cqcounter.com/whois/">Whois - IP Addresses</A><br>
<A HREF="http://www.onlinevideoconverter.com/">Video Converter</A><br>
</small>

</td><TD vAlign=top align=center bgColor="#ffffff" width="30%">

<p><br>
<B>Comics</b>

<p><b><small>Daily</small></b><br>

<A HREF="http://www.webcomicsnation.com/shaenongarrity/skinhorse">Skin Horse</A><br>
<A HREF="http://wapsisquare.com">Waspi Square</A><br>

<p><b><small>Mon-Wed-Fri</small></b><br>

<A HREF="http://freefall.purrsia.com">Freefall</A><br>
<A HREF="http://www.elgoonishshive.com">El Goonish Shive</A><br>
<A HREF="http://xkcd.com">xkcd</A><br>
<A HREF="http://www.eeriecuties.com">Eerie Cuties</A><br>
<A HREF="http://www.krakowstudios.com/spinnerette">Spinnerette</A><br>
<A HREF="http://www.gunnerkrigg.com/index2.php">Gunnerkrigg Court</A><br>

<p><b><small>Monday</small></b><br>

<A HREF="http://www.sakanacomic.com">Sakana No Sadness</A><br>

<p><b><small>Wednesday</small></b><br>

<A HREF="http://sidekickgirl.comicgenesis.com">Sidekick Girl</A><br>

<p><b><small>Tue-Fri</small></b><br>

<A HREF="http://www.drunkduck.com/Far_Out_There/index.php">Far Out There</A><br>

<p><b><small>Wed-Sun</small></b><br>

<A HREF="http://supernormalstep.com">Supernormal Step</A><br>

<p><b><small>No Schedule</small></b><br>

<A HREF="http://www.drunkduck.com/Synthea/index.php">Synthea</A><br>
<A HREF="http://www.giantitp.com/comics/oots.html">Order of the Stick</A><br>
<A HREF="http://suicideforhire.comicgenesis.com">Suicide For Hire</A><br>
<A HREF="http://www.intragalacticcomic.com">Intragalactic Comic</A><br>
<A HREF="http://www.msfhigh.com">MSF High</A><br>
<A HREF="http://thetwat.comicgenesis.com">The Twat</A><br>
<A HREF="http://www.undefined.net/1/0">1/0</A><br>

</TD></TR></TBODY></TABLE>

</center></body></html>
 
Wudang said:
Also the developer tools in Firefox are your friend. Especially the style editor.
Click to expand...

Okay, that's an interesting suggestion. I hadn't realized those tools existed. I don't think I've ever looked in the tools tab with writing HTML in mind before. I've just been using Geany in my sporadic attempts to create web-pages (and mostly because it's the default text-editor on my notebook, the code-highlighting features were an extra bonus).
 
Last edited:
Rat said:
First stop is w3schools. Second stop is w3fools, which will tell you why w3schools may have been a bad choice, despite its appearing first on many Google searches.
Click to expand...

Except that they don't. Perhaps I missed it, but I dug around that site, and all I could find were claims that W3Schools teaches bad stuff, but not what that bad stuff actually was.

Brian-M said:
Okay, that's an interesting suggestion. I hadn't realized those tools existed. I don't think I've ever looked in the tools tab with writing HTML in mind before. I've just been using Geany in my sporadic attempts to create web-pages (and mostly because it's the default text-editor on my notebook, the code-highlighting features were an extra bonus).
Click to expand...

I love Geany. It's lightweight, and has tabs, smart indenting, highlighting, and all of that other code-editor stuff. You can even run a terminal out of it! As for learning, aside from the ubiquitous W3Schools, there are some pretty good lessons at Codecademy.
 
You must log in or register to reply here.

Back
Top Bottom