HTML help

[Hurley]

I am learning HTML in my accounting class and I am looking for some help. I have got it down pretty good and I am able to do everything the teacher has asked us to do but she said she would give extra credit to people who added something special to thier webpage.

She has already asked us to:
have a picture,
paragraphs,
2 lists, one ordered, one unordered,
a link to another website(this one of course! : ),
an H1 heading,
another size heading of our choice,
some italic writing,
some bold writing,
some text that is centered,
2 different fonts,
2 different font colors,
and a background color or picture.

Now, I have done all that but what else is there for me to do that will add something special to my page? I can't use front page or any other program other then wordpad or notepad. Thanks! :read:

 

[tomdkat]

Hmmm.. maybe use CSS for the fonts and font colors, instead of the outdated font tag? I know, you could use CSS to make the size of the font adjust when the mouse hovers over it.

Have you learned CSS or just basic HTML?

Peace...

 

[Hurley]

She only taught us basic HTML so I don't know what she would say if I put CSS in with it.

 

[tomdkat]

Well, I would add a title to the image so if the mouse moves over it, a tool-tip with a message will appear. Maybe you could also put the page in a table so you could have borders along the sides and top of the page, kinda like on the Pat's Web Graphics site?

Just a thought.

Peace...

 

[Roan Art]

I'd add a very small and simple table to the page. Think of a table as a spreadsheet, or a sheet of graph paper. The codes as thus:

<TABLE> <-- says your table starts here

<TR> <-- table row start

<TD> <-- table cell start
</TD> <-- table cell end​

</TR> <-- table row end​

</TABLE> <-- table end

Keep it simple, maybe two rows with two cells in each row. Here's a quick example:
http://bowheads.org/stuff/simpletable.html

You can VIEW SOURCE with your browser to see the codes I used.

The cell in the middle is just a blank cell 50 characters wide and is only there to help separate your cell items.

You can get fancy by using bold in the headers to make them look nicer. Of course, there are a lot more complex codes you can learn to use with tables, but if you are at the level you've indicated, I think it's best to keep it simple to avoid confusion.

HTH
Roan

 

[Hurley]

Thanks for the help! The VIEW SOURCE is something I didn't know about and it is a nice feature that will come in handy. If I want to put a side bar in, do I do that with a table or is that something that is way above my head at the moment?

 

[tomdkat]

If I want to put a side bar in, do I do that with a table or is that something that is way above my head at the moment?

You could put the bar in a column (a tall cell) in the table.

Using Roan's HTML as a start:

<TABLE> <-- says your table starts here

<TR> <-- table row start

<TD> <-- table cell start
*** The side-bar goes here ***
</TD> <-- table cell end
<td>
*** The page body goes here ***
</td>

</TR> <-- table row end

</TABLE> <-- table end

So, it might look like this:

<table border="0" cellpadding="2" cellspacing="2"
 width="100%">
  <tbody>
    <tr>
      <td valign="top" width="20%">
      <ul>
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>
        <li><a href="#">Option 3</a></li>
      </ul>
      </td>
      <td>
      <h1>Here is a heading!</h1>
      <br>
Here is some text!</td>
    </tr>
  </tbody>
</table>

Peace...

 

[OrionGirl]

I'd definitely go with the table--I can't believe that the teacher didn't include tables in an accounting class! That's absolutely crazy.

 

[Roan Art]

I'd definitely go with the table--I can't believe that the teacher didn't include tables in an accounting class! That's absolutely crazy.

I agree! They're probably going to get into that later on, I hope.

Tom -- didn't include the tbody or pads or anything to keep it simple. IMO the stuff is pointless if you don't know what they do or what they are for. Maybe a quick explanation for her since you added them?

Kinda wack writing that earlier. I used to teach HTML and computer stuff eons and eons ago. Brought back some memories

Roan

 

[tomdkat]

Tom -- didn't include the tbody or pads or anything to keep it simple. IMO the stuff is pointless if you don't know what they do or what they are for. Maybe a quick explanation for her since you added them?

I didn't even notice. Sorry about that.

Bunny13, none of what I posted above is non-standard or "magic" HTML. Here is the explanation:

<table border="0" cellpadding="2" cellspacing="2"
width="100%">

As Roan Art posted above, this starts the table definition. The "border" attribute (the xxx=y stuff are called attributes) determines whether or not your table will have a border. A setting of "0" means the table will not have a border. We can leave this attribute off. The "cellpadding" and "cellspacing" attributes control how the stuff in the table gets displayed. "cellpadding" controls how much space there is between the data inside the table cell and the edge of the cell. "cellspacing" controls how much space there is between the table cells, themselves. They can also be eliminated, since you don't really care about them. The "width" attribute controls how wide the table will be on the page. You might or might not care about that depending on how you want your table to look.

So, the simplest table tag would look like what Roan Art posted above:

<table>

***************************

<tbody>

This the official start of the body of the table, or the rows (which go across) and the columns (which go up and down). This also isn't needed and can be eliminated completely for simplicity sake.

***************************

<tr>
This starts a new table row, as Roan Art described above.

***************************

<td valign="top" width="20%">

This defines a table cell, as Roan described above. The "valign" attribute means "align the text (or whatever is in the cell) along the top" instead of centering it or aligning it along the bottom. That helps the side bar menu look right when there is other stuff on the right side of the table. The "width" attribute controls how wide that table cell can be. In this case, I wanted it to be 20% of the table width, so the remaining 80% of the table width would be used for whatever you want to display there.

*********************************
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
<li><a href="#">Option 3</a></li>
</ul>

This is a standard un-ordered list, which you should recognize. The 'a href="#"' allowed me to make the list items links without having to specify actual pages to link to. You can replace "#" with any link you want or leave it as it is. When you click it, nothing will happen.

****************************************

</td>

This marks the end of the table cell, as Roan indicated above. Since you wanted a side-bar, we've completed the definition of the side-bar and can now move on to defining the body of the table, which could include text, pictures, etc.

*****************************************
<td>
This starts a new table cell, which will appear next to the one we just defined above.

*****************************************

Now, we start putting in the text (or whatever) you want in the body of the table.


<h1>Here is a heading!</h1>
This is a standard heading one, which will appear in a large, bold font.

<br>

This is a basic line break.

Here is some text! (This could be anything)

</td>
This marks the end of the second table cell, which contains the text or picture of whatever. We've completed defining the body of the table.

*****************************

</tr>
This marks the end of the first and only row our table has.

*****************************
</tbody>

This marks the end of the body of the table. Since the "tbody" above isn't needed, we can skip this tag too.

*****************************
</table>
This marks the end of the table definition.

Here is the simplified version:

<table>
    <tr>
      <td valign="top" width="20%">
      <ul>
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>
        <li><a href="#">Option 3</a></li>
      </ul>
      </td>
      <td>
      <h1>Here is a heading!</h1>
      <br>
Here is some text!
     </td>
    </tr>
</table>

You should copy and paste this in a HTML page and see what happens when you view it in your browser.

I apologize again for not explaining what I posted earlier. I must admit I "cheated" a bit and used a web development tool to generate the table (for convenience) BUT I can code HTML using Notepad about as well as anyone else.

Peace...