creating space in a webpage

7,435

Expert 4TB

Always use CSS.
hr {
margin:20px;
padding:20px;
}

Never, ever use tables for layout.

Feb 15 '07 #4

My last question of the night:

I can't locate any information on indenting HTML. Are there any general guidelines to follow. I understand that it will not affect the actual text, but all HTML seems to be indented for the simplicity of keeping track of it.
<code>
<code>
<code>
<code>
<code>
<code>
Is there any loose structure as to where the indentions occur?

Feb 15 '07 #5

AricC

1,892

Expert 1GB

Is there any loose structure as to where the indentions occur?

What you are talking about is indenting to show scope it helps with debugging and is great for readability.

Feb 15 '07 #6

Are you familiar with any guidelines as to how debugging is generally relegated? Do guidelines exist or are they arbitrarily determined by the designer? I just think it is kind of an important topic and I cannot find any info in it. My last example didnt survive transmission. I meant to write:

code
..code
..code
.......code
.......code
..code
code
(ignore the dots)

Feb 15 '07 #7

In the previous post, I meant to type indenting where the word debugging is typed. Sorry.

Thanks Aric

Feb 15 '07 #8

AricC

1,892

Expert 1GB

In the previous post, I meant to type indenting where the word debugging is typed. Sorry.

Thanks Aric

Yeah I know what your talking about this site ignores most of the white space, but if you do it in notepad or an editor it could look something like this:

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <html>

        <head>

            <title>Test</title>

                <style type="text/css">

                body

                {

                /*background-color: lightblue;*/

                }

                .clsBanner

                {

                height: 60px;

                top: 0px;

                left: 0px;

                right: 0px;

                width: 100%;

                position: absolute;

                }

                img.clsBanner

                {

                background-repeat: repeat;

                }    

                </style>

        </head>

            <body>

               <div class="clsBanner">

                    <img src="images/testimage.jpg" class="clsBanner" alt="Test" />

               </div>

            </body>

</html>

I think this helps when the page starts getting ridiculously long.

HTH,
Aric

Feb 15 '07 #9

What would you consider to be the next logical step following HTML/CSS as to learning how to build webpages? Probably the luckiest thing I have had happen to me was not being able to afford Dreamweaver because it has forced me to learn html. I want to continue avoiding html editors, etc. I just want to work in Notepad and to learn structure, vocabulary and rules. So, what would I want to think about incorporating next - javascript maybe?

Feb 15 '07 #10

AricC

1,892

Expert 1GB

Yeah, Javascript would be a logical step to take.

Feb 15 '07 #11

3,406

Expert 2GB

A friend gave me a book - Using HTML 4 by Molly Holzschlag - several years ago. I have found it invaluable. It teaches a very structured and purist method of web design, but brings up several points of compliance (how to get sub-standard browsers to show the same thing). It even introduces some javascript basics. I still use it as a reference.

I generally just code in note pad, but I stumbled across Netscape's html editor a while ago and was very impressed. It allows you to code "manually" with a plain text editor if you want, or it can go into full wysiwyg mode.

Incidentally, I disagree with Dr. Howard on his point above (never use tables in formatting). Yes, css positioning is much more elegant, and browser support is improving, but I still use transparent gifs as spacers, and fall back on tables regularly. They force browsers to show what you want rather than crossing your fingers and hoping they parse the page according to w3c guidelines.

Feb 15 '07 #12

Could you provide the code for a simplified example? I usually copy the code and run it on notepad to get a feel the advice I get on this forum.

Do you have any idea how to get a wider array of background colors with html? I seem to be stuck with yellow, blue, red, purple, etc. For some reason my computer will recognize names of colors and ff0000 styles for colors. But not 256,256,256 styles of colors. Any idea why the latter is not cutting the mustard?

Feb 15 '07 #13

7,435

Expert 4TB

I disagree with Dr. Howard on his point above (never use tables in formatting).

From the W3C:

Tables should not be used purely as a means to layout document content

and elsewhere.
Another favorite link is this one.

Tables are for data such as spreadsheets and similar layouts. CSS works fine in browsers and the only problematic one is usually IE but the problems with it are known and fixable. There is no need for spacer gifs anymore. That's what margins and padding are for.

I have never, ever used tables for layout of any page I have ever created.

Feb 16 '07 #14

7,435

Expert 4TB

Could you provide the code for a simplified example?

Example of what?

To do numeric values of colors you need to do this:
rgb(255,255,255) in CSS.

Feb 16 '07 #15

Here is the code I put on notepad, but I still get a blank screen. Perhaps you can see where my error lies.

<html>
<head>
<body style="background-color: 255,255,255">
</head>
<body>
... life's but a walking ...
</body>
</html>

as to - example of what? I was referring to jhardman from the previous post.

Feb 16 '07 #16

7,435

Expert 4TB

Like I said:
<body style="background-color: rgb(255,255,255)">

But your numbers will make it white so change the values to something pretty.

Feb 16 '07 #17

d3vkit

Thought I'd give my 2 cents on an editor - I use notepad++. It's a simple editor with tabs and code colors. And for the next step past html/css, I went to php, which I found to be really helpful. Javascript is nice, but mostly provides little error checks and functionality things. PHP allows you to really create content dynamically. But both are good tools to have at ones disposal.

Feb 16 '07 #18

I am embarrassed to say I was working with 255,255,255 (white), which explains why the background would not change. Thanks for noticing that - a huge help.

I read one of your articles and ran my code through the validater you linked. I am not sure I understood the mistakes exactly, but I will figure them out.

Feb 16 '07 #19

3,406

Expert 2GB

Tables are for data such as spreadsheets and similar layouts. CSS works fine in browsers and the only problematic one is usually IE but the problems with it are known and fixable. There is no need for spacer gifs anymore. That's what margins and padding are for.

I have never, ever used tables for layout of any page I have ever created.

Yes, I was aware of the w3c's position on table usage, but if you read further, their only objection is that they might not display right for non-graphical browsers (screen readers etc) which makes it a moot point if you are talking about positioning pictures or if all your page is in a table. Screen readers still have a problem reading css positioned text, because they read in the order the text appears in the code, not necessarily the order in which it is positioned on the screen.

Last time I tried, neither the accursed IE (still the standard as far as sheer usage was concerned) nor the w3c's own Amaya browser (supplied for the purpose of testing your validated HTML) fully supported my validated css positioning, though every browser does a good job supporting css fonts.

I choose to use the w3c guidelines as an ideal, and I agree that we should try to follow them, but not at the expense of making our sites look goofy.

Feb 16 '07 #20

3,406

Expert 2GB

Ok, drhoward, I went to the seybold site and it was really funny. I've seen code that bad (empty cells just to pad the table!, a nested table rather than a bullet list! Honestly!) I see your point, but I'm not sure I'm ready to concede entirely.

I don't think I'm as bad as those examples, I'm really a minimalist, and minimal code is easier than padding a table out to make a pretty bullet list

Feb 16 '07 #21

7,435

Expert 4TB

I choose to use the w3c guidelines as an ideal, and I agree that we should try to follow them, but not at the expense of making our sites look goofy.

Of course, and if you follow the W3C, your pages will not look goofy. Unfortunately, IE has chosen not to keep their browser up to date with the W3C of which they are a member and advocate (so they claim).

If you have any markup which validates but doesn't work in IE, then show it so we can fix IE. Valid code almost always works in every other browser.

Feb 16 '07 #22

3,406

Expert 2GB

Could you provide the code for a simplified example? I usually copy the code and run it on notepad to get a feel the advice I get on this forum.

Do you have any idea how to get a wider array of background colors with html? I seem to be stuck with yellow, blue, red, purple, etc. For some reason my computer will recognize names of colors and ff0000 styles for colors. But not 256,256,256 styles of colors. Any idea why the latter is not cutting the mustard?

Do you mean a simplified code of using spacer gifs? I feel a little ashamed giving that example after drhoward put me n my place, but it's really easy. For example:

Expand|Select|Wrap|Line Numbers

 
<img src="myPony.gif" height="75" width="50" alt="a cute pony"><img

src="spacer.gif" height="1" width="50" border="0"><img src="myPuppy.gif"

height="75" width="50" alt="a cute puppy">

The spacer.gif works because it is really just one transparent pixel (so is easy to load) that the browser stretches to fit. But since it is transparent, it is obviously not visible, so you should see your pony picture and your puppy picture separated by 50 blank pixels. w3c says not to do this, and the seybold site drhoward linked to shows good examples of why not to do this: it is too easy to bog your code down with unnecessary markup when there is a straight-forward solution. I wouldn't fret too much over a little thing when you are just spacing pictures out like in my example above, but you could easily get carried away. So, if I'm not mistaken, drhoward and the w3c would say to code it like this:

Expand|Select|Wrap|Line Numbers

 
<img src="myPony.gif" height="75" width="50" alt="a cute pony" style="margin: 0px 25px 0px 0px">

<img src="myPuppy.gif" height="75" width="50" alt="a cute puppy" style="margin: 0px 0px 0px 25px">

byt the way, in hexidecimal format you should still be able to use all of the same colors as rgb. You can use any hexidecimal number from 00 to ff. some browsers dither some colors, but there are at least 216 colors recognized by all (considered "web-safe"). These should be like 00 33 66 99 cc & ff in all combinations. The same applies to colors in RGB format (safe numbers would be 0, 51, 102, 153, 204, 255)

Feb 16 '07 #23

AricC

1,892

Expert 1GB

Here is a link to some colors. If you page through there are a lot of colors.

Expand|Select|Wrap|Line Numbers

background-color: #400000;

Feb 16 '07 #24

Do you mean a simplified code of using spacer gifs? I feel a little ashamed giving that example after drhoward put me n my place, but it's really easy. For example:

Expand|Select|Wrap|Line Numbers

<img src="myPony.gif" height="75" width="50" alt="a cute pony"><img

src="spacer.gif" height="1" width="50" border="0"><img src="myPuppy.gif"

height="75" width="50" alt="a cute puppy">

Expand|Select|Wrap|Line Numbers

<img src="myPony.gif" height="75" width="50" alt="a cute pony" style="margin: 0px 25px 0px 0px">

<img src="myPuppy.gif" height="75" width="50" alt="a cute puppy" style="margin: 0px 0px 0px 25px">

I'll try it out tonight to get an idea. I do understand the concept. Thanks also to Aric and yourself for the color information as well as to Dr Howard. The next user document I design for my tech writing class is going to have a much more interesting layout than the last.
Also I read a bit about ASP. What is it about ASP that you attracts you to it? (ATTN Moderators. Am I allowed to ask this question in an html forum?)

Feb 17 '07 #25