/ ~hypervariety /

Text (7048 bytes)
Saved 2 months ago
tags
Push esc to read the page. Hold Ctrl/Alt/Opt to edit elements on the page.
Or drag a box to create new ones.
Sign in and out   Your home page ~ / Your files

Declaring a Tiny Typeset

So how are pages made? Pages are text files, usually containing a few tags. Tags are typed into the text: <tag>. Tags do things.

1. Pages

Text files that have simple HTML in them are downloaded from my server. This text you're reading is being drawn, right now, by the browser, using its default style information.

The main thing is how tags are typed, and it's pretty self-explanatory. The four most famous tags are B (bold), I (italic), U (underline), and S (strike out).

bold text
italic text
underlined text
strike out the text

The tags begin and end within each other, and work across line breaks:

Here is a long sentence with a lot of words that shows you...
...can even...
...nest
the tags
if you want.

2. Formatting

A line of text sits on a "baseline". Taller text reaches higher above it, and the tails of p's and q's dangle below it. You can also request that text go up and down a little.

Text with p's and q's This tag moves text above the baseline and SUB moves below the baseline and done.

The appearance of the text isn't the only thing tags can change. The button tag watches for mouse clicks or finger taps, and the Details tag opens up a helpful reading area.



Open me and close me!
The details tag opens and closes when the user clicks. Just for fun, I made this text editable by using a field tag. The field tag allows the reader to edit the text directly.

There are a few other neat ones:

The code tag prints text as a typewriter (a personal device for typesetting) would.
Marking text makes it really obvious that you want the reader to see it.

  1. Use the <OL> tag for ordered lists.
  2. The items are called list items and tagged as <li>.
  3. The browser is helpful enough to number the items for us.

3. Headlines

The average reader scans through your text using their eyes in well-known patterns. Newspapers knew this and invented the headline in various strengths.

Headline 1 the Most Powerful

That was maybe too powerful. #2 is mellower.

Headline 3

Headline 4

Headline 5
Headline 6

4. Linking and moving around

The web has interesting web sites (I guess) and you can decorate them with interesting page titles:

A link to a site you've heard of.
A link to a file of yours in the same directory.
A link to a third file in a different folder.

For more, see a page I put up about links.

5. Font Face, Size, and Color

A page operates in a linear way as it displays. The tags could be cosmetic or functional, but what stands out is a need to connect a logical series of interesting points. Formalish headline style draws the broad strokes but you might need more to get your message through, like font changes.

cursive font big letters
text without serifs small letters
fantasy characters normal letters
text with serifs bigger letters
monospaced text tiny letters
wow awesome. super big letters
mega big letters
Editing is enabled
Learn about instructions Hide the box