Bookmark + Share!

Print Designers, You've Dodged This Long Enough: It's Time To Learn About Web Design [ continued... ]

Now back to HTML. When we dig a little deeper, HTML is comprised of just two simple components: elements and attributes. Think of an element as an object that sits on your page, like a paragraph, an image, a heading, or a table. It’s just a page element, very much like the objects you’d have sitting in an InDesign or Quark layout. Now, most elements have opening tags and closing tags, that look like this:

<table> </table>

So, the table begins, and the table ends. In between the two, we could place whatever we want the element to contain, like text, images, or whatever else we want. Easy right? Stuff opens, and stuff closes.

Okay. Now for attributes. An attribute is simply a further description of an element—a way to further describe the element. They always appear inside an element’s opening tag. For example, lets say we want to insert a table, but we want to center the table too. The code would then look like this:

<table align="center"> </table>

So the align attribute is placed inside the table element’s opening tag. Follow? Okay. Now, you can place mulitple attributes within an element’s opening tag, so long as they’re all separated by a single space, like this:

<table align="center" width="500" border="1"> </table>

So the above code has three attributes—three further descriptions for our table. One tells the table to align in the center of the page, the next one tells the table to be 500 pixels in width, and the third tells the table to have a border thickness of 1. Isn’t that easy stuff?

So the guys who make this stuff out to be rocket science are just compensating for fragile egos and a lack of social skills…

Now here’s another concept for you. Back to elements for a second. What often happens in web design is that you wind up with all sorts of elements inside other elements (or containers inside other containers). They call this nesting. I often use the analogy of Russian dolls, or cardboard boxes inside bigger cardboard boxes. Web design is all about boxes inside boxes, and you can nest these boxes as deep as you need to go to achieve the layout you’re after. In fact, a table is a great example of this nesting stuff, because to build a table, you actually have to make use of three elements, <table>, <tr> for table row, and <td> for table data—geek-speak for what us normal humans call a table cell. So below, take a look at the code to create a very simple two-row by two-column table.

<table>
<tr> <td></td> <td></td> </tr>
<tr> <td></td> <td></td> </tr>
</table>

Now stay with me here, don’t get freaked out by the code and high-tail it back to InDesign! It’s actually real simple. Lets read it through, line by line. First, you’ve got the beginning of a table. Inside that table you have a table row which begins and ends on the same line (look for the </tr> tag), and then inside each row, you have two table cells, as indicated by the two pairs of <td></td>. Then on the next line, everything just repeats; another row with two more cells. Then finally on the fourth row, the table ends. Straightforward? Admittedly, it does start to get a bit more complicated, but remember, it’s all just containers inside containers.

[ Back to Web + Mag Articles ] [ Go to page: 1 | 2 | 3 | 4 | 5 ]