Bookmark + Share!

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

Wanna know the secret to web design? You see guys looking at entire screens of code, and they look real savvy and smart, and may even behave like they’re just a tad smarter than you as they read through all that code. I’m about to blow their cover. They’re not reading full screens of code at all, and they're not smarter either. What they’re doing is looking for containers; there’s an image, there’s a table, there’s a paragraph, and so on. Reminds me of that scene in the first Matrix movie…blonde, brunette, redhead…So in the last bit of sample code I gave you above, don’t try to look at it all at once; don’t see it as an entire block. Look at it in tiny bits, one line at a time. Making sense? Great. See, it just ain’t that hard.

Next up, what you need to know too is that there are, of course, all sorts of different elements. Elements for tables, elements for paragraphs, elements for images, and on and on. And each element has a very specific set of attributes. So really, learning HTML boils down to finding out what you can stick onto a page, figuring out what elements are used to create them, and then finding out which attributes will work with each element.

Very often I’m asked if there’s a cheat sheet of some sort that lists out all of HTML’s elements and attributes. You know, there is. Here’s whatcha do. If you have Dreamweaver, fire it up, then choose Window > Reference. This’ll open Dreamweaver’s Reference panel. From the book menu in the top left, choose O’Reilly HTML Reference. Next, the Tag menu at the top lists out every single HTML element—every last one of them. Choose one to get a description of what it does, as well as some sample code to help you out. Sweet, huh? Finally, after you’ve chosen an element from the Tag menu, the next pulldown menu at the top lists out every possible attribute for the element you’d selected. Totally awesome! So there you go, it’s all in Dreamweaver.

So the next time someone comes off thinking they’re smarter than you cuz they know HTML, you say, “HTML? Why waste your time memorizing elements and attributes when Dreamweaver will do it for you? You use that as a pickup line or something? Now who’s the savvy one, smart ass?!”

Sorry, I get a little worked up. And of course, you’ll catch on to certain elements and attributes as you get better at all this, but for god’s sake, don’t think that you have to memorize anything. Dreamweaver’s already got things looked after.

Alright, so I hope all this is making sense. So you know about elements and attributes, and the basics as to what HTML does, but we gotta discuss specifically what HTML was built to do. Understanding this will really help as you make your way deeper and deeper into web design. Now way back in the day, we already know that HTML was designed build pages comprised of black text on a white background. But there’s just a wee bit more to it. It was built to perform two simple tasks: 1) Structure pages, and 2) Connect pages together via hyperlinks. By structure pages, I mean those Russian dolls—the boxes inside boxes. Using HTML to do anything other than these two tasks—including designing stuff to look good—is where you wind up in trouble. Remember, HTML was not created as a design tool.

Needless to say, though, it didn’t take long for people to start wanting more than black text and white backgrounds. As the internet started taking off, people started saying things like, “Ya know, we can use this whole internet thing for a hell of a lot more than just geeky research papers. How about doing other cool stuff, like being able to change the color of the text on our pages? Tha’d be awesome!” So the developers went to work and created new HTML code to handle color. Then someone else came along and said, “You know what would be mind blowing? If we could change the font!” So they cooked up some code to change fonts. Then people started wanting all kinds of stuff: graphics, tables, more text formatting, and even page formatting.

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