CLASS 6 : Designing with HTML
USING HTML ELEMENTS FOR VISUAL EFFECT
Web design is more than graphics and text, more than "translating"
a print layout into HTML and displaying it on screen. The Web
is a new medium with elements of design all its own.
Early HTML authors' backgrounds tended to be in engineering or
programming, and not graphic design. To create a striking
visual effect, many non-designer HTML authors use plain old HTML
elements in non-standard, but highly creative ways.
- the days...
Just a plain table, with careful attention to spacing,
font colors and choices can produce an attractive
result. (Note: This table actually uses some very
advanced HTML, but similar effects could be achieved with
the basic HTML you've learned in this class.)
- excite.com
Tables nested within tables, with different background colors
and careful use of cellpadding and cellspacing serve
to group and section off content into separate
elements.
- resound.net
Scroll down to the "Tech Notes" at the bottom of the
page to see a creative use of form elements to present
content interactively and with a sense of humor.
- chank.com
Scroll all the way down to the bottom and see how plain horizontal
rules, used creatively, create a striking visual effect.
- Birth of Venus
Even plain keyboard characters with a little bit of color
can (re-)create true art.
As you view Web sites from now on, look carefully at them and try
and figure out how they "did it." If you can't, view the source code
and figure it out for yourself. As you learn the ways that other
people write HTML, you'll become a better author yourself. The more
you practice writing HTML, you'll develop standard "expressions" that
you'll use again to develop your style. And, as you become more
and more fluent in HTML, you may find yourself stretching the
boundaries of the language and developing new ways to express yourself.
SKILL MASTERY
Designing with HTML
- See what kind of effect you can achieve with creative use
of font face, color, and size in a table.
- Try nesting tables, adjusting the cell padding and spacing
and background colors until you get an effect you like —
view the source code from excite.com and copy and paste it
in your text editor to get you started.
- Experiment with presenting your content in form elements —
what kind of content works best with the different types
of input elements?
- Try creating shapes and patterns with plain keyboard characters
or horizontal rules. Apply the blink tag to some elements and
see if you can create an attractive result.
FURTHER READING
Designing with HTML
NEXT CLASS
Wrap-up and review
Publishing and promoting your Web page(s)
|
