Let's look at the basic HTML design elements. We're not going to look at the HTML coding, but just what are the capabilities of HTML are. It's these basic design elements which you use to put together web pages. Just like learning to play the piano means learning "the scales", so does building web pages mean learning the basics.
The <TABLE> element
Let's first look at the HTML table. The original purpose was to present tables of data, but web designers in the quest for something that would give them some kind of precise control over page layout have latched onto tables as the method. Except that, more recently the "DIV" and "SPAN" tags are now available to take some of the role of HTML tables, but those tags are beyond the scope of this discussion of basic HTML design elements.
| State | Capital | Weather |
|---|---|---|
| California | Sacramento | Fabulous |
| Alaska | Juneau | Cold, with dark winters, and long summer nights |
| Kansas | Topeka | Hot, Cold, Mild, Dry, Tornadoey, Snow in Winter, and long vistas in the plains |
| Kentucky | Frankfort | Cold and snow in winter, muggy and humid the rest of the year, with cold cold rain in the fall (seems someone wrote a song about that once) |
Okay, nice and straightforward isn't it? However, consider that this page you're reading is using a large table as the main design structure. The text you're reading is in one cell of the table, while the advertising column to the right is another cell of the table. Further, the stuff in the footer is yet another table, with different elements in different cells.
Tables offer quite a bit of flexibility in their presentation. You can completely turn the borders off, or make them very wide. You can increase "cell padding" to spread the contents out. The color of each cell's background can be different, as can be the color of the tables' border. Individual cells can be made to span multiple columns or rows, allowing for more complex layouts. You can specify the size of the table, or individual cells, or leave them to size dynamically based on their content.
The <H1>, <H2>, <H3>, etc tags
The next to look at are the "header" tags. These are meant to be used as "section headers" in a text document, such as I'm doing on this page.
Header 1 |
Header 2 |
Header 3 |
Header 4 |
Header 5 |
Header 6 |
The <P> tag
Paragraph types and alignment are the last of the basic design elements to discuss. This is just like the typical word processor paragraph styles:
| Left alignment | Center alignment | Right alignment |
|---|---|---|
| "Left" alignment is what you typically use in english text, and is the default paragraph alignment when nothing else is specified. The words are flush with the left. | Centered alignment has the words in the paragraph aligned with the center of the page, rather than the left or right side of the page. |
Right alignment is, of course, the opposite of left alignmeent. In right alignment, the words are flush with the right side of the page. |
The <OL> and <UL> tags
The next type of paragraph alignment are lists. Again, this is just like the typical lists in word processors, though not as flexible.
| Numbered lists | Un-numbered lists | Nested list |
|---|---|---|
|
|
|
The <BLOCKQUOTE> tag
Another type is an indented paragraph, formally known as the "blockquote".
The idea of a "blockquote" is the typical practice when quoting a long section of writing from another document. In such cases you indent the quoted section from the general flow of the text, and return to the regular text layout when the quoted section is ended.