HTML BOX TEST

HTML's display is based on nested rectangles. So, what better way to get a grasp on HTML's nested rectangles than to throw a bunch of nested rectangles up on the screen?

Splitting the Screen

Near endless recursion; or, you know, taken ten layers deep.

Cool stuff, huh?

The above graphic is composed entirely of nested <div> tags with the display attribute alternating between block; and inline-block; along with differing call outs for the background-color attribute.

Bunching the Bands

The same, only different.

Floating text in the center of a division is a lot harder than it should be. So hard, in fact, it's not worth doing in my ever so humble opinion. Sometimes, I think it would be easier to make a .png out of any text and center the image, instead.

On the other hand, centering the text in this division is easy, because the division is sizing itself around the text rather than in the above where the size of the divisions are determined first and then the text is inserted later.

Eh, probably not technically correct, but that's the essence of it all.

Also, in the above, since returns (i.e. '\n') between div tags counts as white space, unless the div's are all jumbled together on one line, white gaps will appear between the vertical bars (but not the horizontal ones) throwing off the spacing.

There is no JavaScript running on this page and the CSS is on the same page as the HTML, both of which are easy enough to read if the page is opened in a text editor.

Skeleton

Harder to see... even harder to do.

s
p
a
c
e
r

The division boxes can be defined in terms of absolute pixels (px), as a percentage of the screen(%, vw, or vh: the later two standing for view-width and view-height). However, the border lines can only be defined in terms of pixels (px) and occur at the edge of the box. This means if two side by side divisions have width: 50%; with border: 1px solid; the second division will overrun the screen, which typically means it falls further down the page. Couple this with different screen sizes and the fact that the frame rotates from phones to desktop environments (phone layouts stretch vertically, while computer screens are typically wider horizontally); and suddenly, making those border lines play nice for all devices quickly becomes a problem I have no interest in solving.

Lists

Nested Constructions

<ul><li></li></ul>
and the like,
same as here.

Tables

So easy, it often feels like cheating.

PINK	ORANGE	LIME	PLUM
WHITE	TEAL	RED	BROWN
BEIGE	AZURE	SILVER	INDIGO
BLUE	CYAN	YELLOW	BLACK

There are something on the order of 140 named colors in the spec. I use very few of them. Most of these, I had to look up.

Grid patterns are easy to achieve using the visibility: hidden; tag. However, inserting the tags where needed can get tedious...

Going Too Far

Organization of data is at the heart of HTML. Design is secondary. Personally, design isn't that important to me; in that, I seldom try to override the defaults.

It's easy to change the font size.

However, overriding the defaults seems silly to me.

For the most, I feel it's easy to overdo the presentational features and best to let users decide what they want.

The Big Send Off

Having accomplished what I set out to do, it's time for the grand finale.

div's with radius borders.

But we only need three.

Now, we're getting somewhere.

I've enjoyed myself and learned a great deal. I hope you have, as well.

This is my idea of a tutorial. If interested in more, you might want to check out

Brett Code

Or I like to think there's plenty of other interesting stuff to be found about the site.

Brett Home