Is my HTML heading in the right direction?

Page 1 of 1

6 Replies - 1018 Views - Last Post: 04 February 2010 - 05:07 AM

#1 Allizoid  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 91
  • Joined: 09-November 09

Is my HTML heading in the right direction?

Posted 03 February 2010 - 04:43 AM

Recently I have started trying to learn HTML and a little bit of CSS. What I have written works as I expected, but would someone be able to look though my code snippet and check that I haven't done anything bad/awkwardly? I don't want to have bad practices/style from the start. 

<html>

<head>
<style type="text/css">
td {font-family:arial}
h2 {font-family:arial}
p {font-family:arial}
</style>
</head>

<body>

<body background="background.jpg">

<!--Defines the attributes of the table-->
<table
border="0" 
cellpadding="5"
cellspacing="5"
bgcolor="#E8E8E8"
align="center"
width="80%">

<tr>
  <th colspan="3"><h2>Welcome to this website</h2></th>
</tr>

<tr>
  <td width="20%" valign="top"><p>Links should go here.</p></td>
  <td width="40%" valign="top">Some content should go here</td>
  <td width="40%" valign="top">Here is some more content</td>
</tr> 

</table>

<p style="font-size:10px" align="center" > ® This site was created by Ally</p>

</body>
</html>



I also have 2 specific questions:
Q1

Quote

Search engines use your headings to index the structure and content of your web pages.

What if I have my heading in a table, as I do above? Would it be best to leave it the way it is, or get rid of the table heading ("th") completely? Or is "th" also indexed in search engines?

Q2 Why can't valign="top" just be incorperated in the definition of the table? For eg:
<table
border="0" 
cellpadding="5"
cellspacing="5"
bgcolor="#E8E8E8"
align="center"
width="80%"
style="font-family:Arial"
valign="top">



EDIT: I *think* I cleaned up the code a little by using an internal style sheet.

This post has been edited by Allizoid: 03 February 2010 - 05:18 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Is my HTML heading in the right direction?

#2 Lemur  Icon User is offline

  • OpenBSD Head
  • member icon


Reputation: 1111
  • View blog
  • Posts: 3,059
  • Joined: 28-November 09

Re: Is my HTML heading in the right direction?

Posted 03 February 2010 - 06:48 AM

First, table design is an immortal sin of web design, repent and look to the one true css layout.

Use external stylesheets, much cleaner, trust me. You can also use id's or classes in css which will be quite a bit of help.

As far as the headers think notes back in HS/College. H1 is a main title, h2 below that, h3 below an h2 and so on and so forth.

Look in the css tutorial section for my tutorial on layouts.
Was This Post Helpful? 1
  • +
  • -

#3 Allizoid  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 91
  • Joined: 09-November 09

Re: Is my HTML heading in the right direction?

Posted 03 February 2010 - 09:51 AM

Thanks for the reply.
I just added an external style sheet. Doesn't really make a big difference at the moment, but I know it will when I add more pages.
Everything else you mentioned is a little over my head at the moment, but I'm working towards fixing that :)
Was This Post Helpful? 0
  • +
  • -

#4 kinged007  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 35
  • Joined: 05-November 09

Re: Is my HTML heading in the right direction?

Posted 03 February 2010 - 10:12 AM

hey dude,

Love the passion. I remember when I first started. Was such an awesome feeling getting a website up and being able to see it, then you can tell everyone, "Yeah I know, I AM GOOD! " ;)

Few tips:

instead of using <body background="picture.jpg">

put this in your css :

body {background-image: url('background.jpg') ; }


Try seperate your images from your main folder.

Instead of the <table> tag, learn how to use the "float" attribute in CSS.

To attach an ID or a CLASS to an element, use id= or class= ...
eg.
<div id="header">
  <!-- header content -->
</div>
<span class="heading">
  <!-- Page heading -->
</span>


Keep in mind, ID can only be used for ONE element.
Classes can be used for multiple elements.
This applies to each page.

Attaching css code to a defined element.
div#header { border: 1px solid black; margin: 5px; }
.heading { font-size: large; font-weight: bold; }


Always close your HTML tags. Something that slips your mind now and then, just keep that in mind.

You also need a <title> tag. Search engines look a this first. And it gives your website a name in the info bar at the top of your browser.

Otherwise I think spot on. :)
Keep it up!!!

Josh
Was This Post Helpful? 1
  • +
  • -

#5 kinged007  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 35
  • Joined: 05-November 09

Re: Is my HTML heading in the right direction?

Posted 03 February 2010 - 10:22 AM

oh, didnt see your questiosn...

Answer to Q1.
Search engines basically read your code as you write it in Notepad or whatever you use. Doesnt matter where it is, but the closer to the top, the better.
It also has special preference to <strong> and <em> (emphasised) text, and obviously header tags (h1,h2,etc.)

Tables are ill practice, because of many reasons. But they are ok for when you learning the syntax of HTML and just messing about really. But do learn how to use <div> tags and the CSS "float" technique. I will save you some time, and tell you learn about the "clear" CSS attribute at the same time. (it clears the space so elements stop 'floating'. ) (Read it up )

Answer to Q2.
valign does not work on a table because its not up to the table to decide where to align itself. Thats my thought on it, the real answer is W3C dont allow it, full stop. :P
Try and apply your styling in the external stylesheet and not inside your HTML, reasons are this:
1. If you use the same style for another element on another page, then you have to go and change it twice!
2. If you have a shitload of html and code, and you need to change the color for a link. you have to scroll down the page and find it.
3. Its just better practice to seperate all your code. CSS in a different file/s, Javascript in a different file. and then the html that puts it all together.

Have fun

EDIT: Excuse my typos! :P

This post has been edited by kinged007: 03 February 2010 - 10:23 AM

Was This Post Helpful? 1
  • +
  • -

#6 Allizoid  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 91
  • Joined: 09-November 09

Re: Is my HTML heading in the right direction?

Posted 03 February 2010 - 11:37 PM

Thanks for your reply, I really appreciate the effort you put into it :)
I decided to leave this project as it is, and start a new one from scratch using everyones suggestions.

Just one more question from me!
Is it concerning that I have to look up the syntax for most things i'm doing?
For example, I'm looking up the syntax for all the CSS stuff and some specific HTML stuff (cellpadding, bgcolor, etc).
Was This Post Helpful? 0
  • +
  • -

#7 kinged007  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 35
  • Joined: 05-November 09

Re: Is my HTML heading in the right direction?

Posted 04 February 2010 - 05:07 AM

Concerning? No I dont think so. The fact you make the effort to look it up if you dont know or cant remember means you take it upon yourself to work harder to complete what you set out to complete. As you do it more and more you will get used to it and start remembering the syntax, and you wont need to look back on it as much.
Besides, I think most of the veterans on here have cheat sheets lying around their desk and look at it from time to time if they dont remember something. Especially for much more in depth languages. BUT the more you practice, the more you will remember. Simples.

:)
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1