Tutorial (designing your page)

  • 1
  • Question
  • Updated 8 years ago
As I have been heavily learning html and xhtml through books, forums, and chat rooms. I have learned the "better, more preffered" way of using code.

For starters, width:100% should never have to be used. width:100% is set by default.


Let's take a common attribute for starters... font color attribute is just "color"... example:

<p color="red"> or
<p color="#ff0000"> or
<p color="rgb(255,0,0)">

Let's not do it that way as the W3C has deprecated most attributes (color, size, background color, and so forth). The better way to get use to especially for newer versions of html and xhtml is to not use "color" or "font-family" as an attribute, instead, use it as a value...

<p style="#ff0000"></p>


<p> - paragraph should be used when your ending tag is expected to end the line.
<div> - divisions should be used when you want multiple columns, table like content, etc.
<span> - should be used when all else fails
<font> - should never be used since it has been deprecated by the W3C
<table> - should be used to start a table
<tr> - should be used when starting a new row in a table
<td> - should be used for each piece of data (or cell) in a table
<object> - should be used whenever inserting an object such as a form with input fields
<form> - should be used when starting a form

there are several options using an ampersand (&) prefix and semi-colon (;) suffix

&n b s p ; - adds a space. Whenever you add two or more spaces into html or xhtml, by default, the extra spaces will be ignored, to force a space, you would need to use this.
&c o p y; - adds a copyright circle - very valuable to know, some browsers do not understand the circle copied directly into the editor.
and many other options.

When designing table like content, it is highly recommended to not use tables. With a little manipulation, you can make a div code look just like a table.

Instead of...

<td>Data One</td>
<td style="align:center">Data Two</td>
<td style="align:right">Data Three</td>

Try using...

<div style="float:left">Data One</div>
<div style="float:left; align:center">Data Two</div>
<div style="float:right:">Data Three</div>

Like I said, with a little manipulation, a div can look exactly like a table. The difference between a table and div is that your content in a table is already contained into cells, whereas it isn't in a div. You may need to add padding to your div based on the content you're putting in it.

On one of my sites, I had created a sidebar (menu) to include the page names and an icon for each page. The icon was in one cell (td) and the page name was in another cell (the menu was in a form)... with a little bit of guidance, I created the same menu (with 26 pages) with a div. However, there was more leeway with the divs, divs tend to be less restricted and better read by browsers than tables. So I recommend divs instead of tables.

Always make sure your page has ONE <h1> tag, preferably no more than three <h2> tags (but more is fine, however, the more h2 tags you have, the harder it will be for a search engine to determine what is important on your site.

Please ask questions if you need to know more!

And yes, I did write this without any reference, so if there are any silly mistakes, please let me know. And thanks to the people at Yola, I have actually been able to learn it instead of just copy and paste. I have gotten to the point where I can create an entire website working in the code!


My sites...

  1. You Can Never Be Too Smart

  2. Jumping Jelly Beans

  3. 1stop Martial Arts

The second site is the site where I took the sidebar originally created in a table and made it into a div. But that's just as an example!
Photo of Donald


  • 2991 Posts
  • 37 Reply Likes

Posted 8 years ago

  • 1

There are no replies.