Ive been avoiding html for a while..

Lyon85

Lyon85

Lyon85

Associate
Joined
26 Aug 2006
Posts
1,884
Location
London
Having only graduated a couple of months ago as a Graphic Designer Ive been pretty much free to attack web design however I wanted, and I attacked it with Flash.

I don't need to know html in my current job, but it's a skill I want to learn. It's not that I don't know any html, the problem is the last time I used it was about 4 or 5 years ago. This consisted of an absolute minefield of tables. I kind of get the impression this is very much old fashioned :p

I've done a little bit of googling on the subject but a lot of tutorials and explanations out there seem fairly old fashioned and just plain dodgey. I was just wondering if some of you could help point me in the right direction.

I'm pretty sure I understand how CSS works. Would I be wrong in saying it is like creating a master page which the site refers to on most pages, only fetching new content to place into it? Is it more complicated than I probably think it is?

What's a div? I've talked to people with similar html knowledge as me which is probably the most confusing way of learning, as most people have a tendency to half fabricate information to appear as if they know the full story! Do divs replace tables now? If I was to go and set up a site now, I would just slap tables all over the show. I know this is wrong, so I'm trying to find out the modern way of doing things.

I have more questions, but I know too many questions in the first post tends to throw people off, so they will come a little later when I'm more comfortable.

Feel free to bring anything else up that I should be considering at such an early stage, I don't want to pick up any bad habits.

I'm just about to start a little project, so it shouldn't be hard to show you how I develop.

Thank you.

PS Please no "google if your friend" posts, I'm after a discussion here.
 
From what ive learnt a CSS page is a sort of "Master" page that contains code that can be linked to several pages, this cod only has to be changed once for the effect to be seen on all the linked pages. Only have a few months knowledge of HTML and the like tho.
 
The purpose of CSS is to separate presentational code from structural code (i.e. HTML).

HTML defines the structure of a web page by way of tags. For example, a paragraphs are wrapped in <p> and </p> tags, unordered lists in <ul> and </ul>, etc.

CSS is used to tell the browser how to render these elements. Before CSS was widely used, people would use various presentational tags and attributes mixed into their HTML to control the appearance of the page (e.g. <font>, <b>, etc.). The idea behind CSS, however, is that you factor all of this styling information out into a separate file.

For example, if I wanted to make all text in <h1> tags blue and give it a font size of 14pt, I'd use the following CSS:

Code: 
h1
{
    font-color: blue;
    font-size: 14pt;
}

You're sort of right about CSS being a 'master' page, in that you can put all of the code in one file so that you don't have to include it in every page, but the important thing to remember about CSS is that it's purely for styling purposes.

As for tables/divs, divs (or spans) should be used whenever there's no other HTML element that describes what you want to do. Essentially, divs are just semantically empty boxes; they have no styling information associated with them and are just plain containers. Obviously, in order for them to be any real use you have to apply your own styling to them, preferably by way of CSS.

Tables are not obsolete. They have a single, completely legitimate use: for tabularly formatted data. If people tell you never to use tables, don't listen to them; just make sure you use them when appropriate :)
 
Last edited:
Just to clarify - don't use tables for lists, just tabulated data. i.e. very very very rarely if ever. If you're a graphic designer then css will be so much better for you than just html.

A div is just a way structuring content which can then be styled and positioned using css. They can normally be thought of as invisible boxes which you can move about, resize and add content/colour/images or other div boxes to.

Check out www.csszengarden.com to see how much design can be affected by css. All the pages have the same html, only the css files change.
 
people are SO afraid of using tables, it's like hanging out with the ugly kid at school - no one wants to be seen doing it! they are just as relevant as h tags and p tags. they're not very very very very rare - if you're making a cms, you pretty much use them all the time!
 
Sic said:
people are SO afraid of using tables, it's like hanging out with the ugly kid at school - no one wants to be seen doing it! they are just as relevant as h tags and p tags. they're not very very very very rare - if you're making a cms, you pretty much use them all the time!
Click to expand...

Yeah gotta agree with you there sic. There's a real snobbery to web design lately. Sure I can see that they are bad practice and best to be not overused, but there are times when you MUST use a table because the hacks and workarounds to achieve the same effect in CSS is just a joke.

Use tables properly, but don't avoid them.
 
I don't think it's snobbery - there are a lot of practical reasons not to use tables - and I know when I started out that I used too many tables because it was easier for me so I think if you get it drummed into you not to use them at the start then you'll probably use them the right amount. Obviously there was a bit of exaggeration involved! This guy is a graphic designer so it's unlikely he'll be making a cms or using tabulated data much, therefore I think it's right to stress that he's not gonna have much reason to use tables.

Newer versions of popular cms like joomla 1.5 are using fewer and fewer tables or none at all (check out drupal homepage).
 
yeah, for their frontends, but when you look at the admin, logically there will be tables everywhere! and graphic designers don't just do brochures. If he's got reason to do web design, then one can assume that he might come across tabulated data at least once - there it's viable to use tables but because people harp on about how bad they are, he could end up not using them without any real justification for it
 
Last edited:
Tables = bad mmm'kay.

The purpose of HTML is to mark up the document. Not to lay it out.

Imagine that you are looking at an essay, and they decided to use a very weird layout to mark up the essay. It would be distracting, and it would infer relationships or structure within the document that didn't exist.

This is what you are doing by using tables. Marking up a document as HTML should be a simple exercise - mark up a document using headers, paragraphs etc etc. Tabulated data can be put into a table, however *that* is all. When you look at the web page, it will look *extremely* simple, mostly text and a few embedded data types (images/tables etc).

When you apply style to the page to turn it into a "design", that should be done in the CSS. There are many *many* reasons rather than just snobbery, here are a few :

- Semantic seperation of mark up and design is more manageable.
- Ease of DDA-based analysis (ie the disabled who use screen readers, and ofc Google).
- Simplification of applying multiple designs to a single markup (see http://csszengarden.com/ as a demo).
- Simple to apply multiple levels of style/seperate stylesheets for different parts.
- Far, far, far smaller file sizes, due to
- Reduction in the duplication of data.

And this is just the *start*.
 
I think it's funny how people avoid tables. HTML is simply a way to 'display' information in a certain order. The idea is to display this information using relevant tags and standards compliancy. In other words, the more it makes sense the better.

If you have a paragraph of text, you wrap it in <p></p>, if you have a list, you specify the list type (<ul><ol>) then use the list tags <li></li> for each list item.

This should not be any different with tables. If it makes sense to use a table, then use one. The mistake a lot of beginners make, is that they choose 'easy' over 'correct', and they're all pulled into this anti-tables thing without ever given a proper reason.

To the OP, CSS (Cascading Stylesheets) is a document that you link to in HTML. Using CSS you can apply style information to every tag of HTML.

So, if you have a list, you can style the <ul> tag to maybe have some padding, set a background colour, a position and much more. Then style the <li> tags that go inside it.

And if you're wondering about PHP, ASP, etc... think of them as a way of 'playing' with the site content.

Then we have the arrival of Ajax. A lot people make a mistake about that, too. First and foremost, I believe Ajax should be used to make a website more user friendly, e.g. loading content as opposed to having to refresh/move away from the page.

Ajax (in another form) is also used to add page effects to a site. For example, you can make it so that when a link is clicked, a previously styled DIV can slide out of the side of a page. But don't make the mistake that many people do; most of the time, it's a pretty pointless 'feature'.

Using all of these things though, properly, can make a website extremely dynamic and gives a lot of creative freedom when it comes to design. If you're even more careful, all of this 'pretty' content will be viewable by Search Engines - something that isn't true for Flash based sites.

In my opinion, a decent web 'developer' would have experience of at least one of each type of these languages. And not just knowledge of the language code, but the understanding and acknowledgement that things should be done as 'correct' as possible - only ever using workarounds when they really have to, and not using them on vital/important content that may be missed by search engines.​
 
OvertoneBliss said:
I think it's funny how people avoid tables. HTML is simply a way to 'display' information in a certain order. The idea is to display this information using relevant tags and standards compliancy. In other words, the more it makes sense the better.​
Click to expand...


So... you're agreeing with me, that tables should be used for tabular data?

HTML is for document mark up. The "certain order" relates to the structure of the document. Non-tabular data is non-tabular, so why would you put it into a table unless "to give it a table structure". So is it tabular or not?

Its perfectly acceptable to lay out a table of content, and use HTML tables to do so. What isn't so acceptable is to embed table after table into a website to "structure" the document so as to "look nice". The aesthetics should not affect the structure.​
 
I agree with you 100%, OvertoneBliss; very good post :)

One thing though:
OvertoneBliss said:
Ajax (in another form) is also used to add page effects to a site. For example, you can make it so that when a link is clicked, a previously styled DIV can slide out of the side of a page. But don't make the mistake that many people do; most of the time, it's a pretty pointless 'feature'.
Click to expand...

This is just plain JavaScript, not necessarily AJAX. AJAX is when you make an asynchronous request to the server via JavaScript between main page requests in order to update the page or the data on the server in real time.

Shoseki said:
So... you're agreeing with me, that tables should be used for tabular data?

HTML is for document mark up. The "certain order" relates to the structure of the document. Non-tabular data is non-tabular, so why would you put it into a table unless "to give it a table structure". So is it tabular or not?

Its perfectly acceptable to lay out a table of content, and use HTML tables to do so. What isn't so acceptable is to embed table after table into a website to "structure" the document so as to "look nice". The aesthetics should not affect the structure.
Click to expand...

You're 100% correct, but you were implying in your previous post that tables were universally bad and should never be used, which is wrong.

There's absolutely nothing wrong with tables. The thing that is wrong is when they're misused for laying out a page.
 
Also if you're coming from a background of HTML then it is worth reading up on XHTML which is the new standard for page markup. Don't be scared of it, it's esentially HTML with defined rules and an attempt to standardise it across all browsers. The main differerances between HTML and XHTML are that some tags have been deprecated, normally because there is a way to do it using CSS and tags must always be correctly nested and closed.

It's easy to pickup if you know HTML, it's more of a set of rules than a new language.
 
Shoseki said:
So... you're agreeing with me, that tables should be used for tabular data?

HTML is for document mark up. The "certain order" relates to the structure of the document. Non-tabular data is non-tabular, so why would you put it into a table unless "to give it a table structure". So is it tabular or not?

Its perfectly acceptable to lay out a table of content, and use HTML tables to do so. What isn't so acceptable is to embed table after table into a website to "structure" the document so as to "look nice". The aesthetics should not affect the structure.
Click to expand...

I got the impression from you that you were saying using tables, at all, is bad practice.

I agree, 100%, that tables should only ever be used for tabular data. Let the content choose the element, not the element choose the content. :)
 
Inquisitor said:
I agree with you 100%, OvertoneBliss; very good post :)

One thing though:

This is just plain JavaScript, not necessarily AJAX. AJAX is when you make an asynchronous request to the server via JavaScript between main page requests in order to update the page or the data on the server in real time.
Click to expand...

Oops, my bad. Learn something new everyday. :)
 
OvertoneBliss said:
I got the impression from you that you were saying using tables, at all, is bad practice.

I agree, 100%, that tables should only ever be used for tabular data. Let the content choose the element, not the element choose the content. :)
Click to expand...

Sorry didn't mean that :) I originally meant it to mean *numerical* tabulated data, and then backtracked.

My bad :D /slaps own wrist
 
You must log in or register to reply here.
Back
Top Bottom