Chapter Text
Note: No CSS skin has been added to this work. What you see below is the default A03 formatting for each of these HTML tags.
The page formatting tagssupported by A03 are listed below, with examples of how to code them and what they look like. If you want to learn more about them, they are usually referred to as "HTML Block Formatting." Like text formatting, most act on the enclosed text between the opening tag <tag> and a closing tag </tag>. However, there are two unclosed tags introduced at the end of the page. Unlike with text formatting, a block of text can only be in one tag at a time (e.g. Header 1 or Header 3, never both)
, with the exception of the 'div' tag, which is used to group and format multiple blocks (headings, paragraphs, etc.) of text.
The most common way of structuring an HTML document - for A03 - is by using paragraphs (the 'p' tag) or paragraphs within divisions (the 'div' tag). The code for this is shown below:
| Sample Code | Results |
|---|---|
| All of the text for Paragraph 1 All of the text for Paragraph 2. This is a much longer Paragraph. |
Like the 'span' tag introduced in Chapter 1, Text Formatting the 'div' tag is primarily used to apply formatting to it's child elements - paragraphs and text by setting it's attributes. (It can use align and all of the HTML global attributes.) Sample code for this is shown below:
Note: Remeber that A03 members can select their own site skins - if you force a color, it may look great compared to the default black-text on a white background, but could be very hard to read in other cases.
| Sample Code | Results |
|---|---|
| All of the text for Paragraph 1 All of the text for Paragraph 2. This is a much longer paragraph. |
In addition to applying formatting directly to an attribute of the 'div' or 'p' tags, we can think of the following as special, 'pre-formatted' paragraphs. Text within the following tags will make a new line/section and apply the tag format. As with most HTML, the tag adds meaning to the text that can be picked up by readers and web-spiders.
| Sample Code | Result | ||
|---|---|---|---|
Headings (w3schools tutorial link) | |||
| heading 1 | <h1>Text Inside 'h1' Tag</h1> | ||
| heading 2 | <h2>Text Inside 'h2' Tag</h2> | Text Inside 'h2' Tag | |
| heading 3 | <h3>Text Inside 'h3' Tag</h3> | Text Inside 'h3' Tag | |
| heading 4 | <h4>Text Inside 'h4' Tag</h4> | Text Inside 'h4' Tag | |
| heading 5 | <h5>Text Inside 'h5' Tag</h5> | Text Inside 'h5' Tag | |
| heading 6 | <h6>Text Inside 'h6' Tag</h6> | Text Inside 'h6' Tag | |
Alternate Formats | |||
| see below | blockquote | <blockquote>Text Inside 'blockquote' Tag</blockquote> | Text Inside 'blockquote' Tag |
| see below | center | <center>Text Inside 'center' Tag</center> | |
Blockquote:
section quoted from another source (L & R indented)
The key thing to remember about blockquote is that while it doesn't apply any traditional formatting - this isn't larger or smaller; bold, itallic, or underlined, it is (usually) inset on both the left and right margins by about a tab-stop (roughly 5 characters). Of course, this can change, depending on the CSS applied to the page.
Center:
a center-aligned "paragraph"
The center tag simply centers the text.
If there are multiple lines of text, all will be centered.
While useful for centering titles and prophecies;
the 'center' tag has been retired in HTML 5<div align="center"> ... </div>
is the future
Unclosed Tags....
Almost all HTML tags, as introduced in Chapter 1, need to be closed. These tags modify the enclosed text content. On A03, there are two 'unclosed' tags that you can use to format your works: 'hr' and 'br'.
Look up! Is it a bird? A plane? No, it's the 'hr' tag. 'HR' originally stood for "hard-rule" and that's what it does: puts a rule (line) between paragraphs or divisions. The 'hr' tag does have a width atribute, however, it does not work with the default A03 formattings. To use the 'hr' tag simply add <hr> to your html formatted story - no need to close it or enclose text. There's another two below:
The other (unclosed) tag to make a new line is the br tag. 'BR' stands for break and it adds a break (new line) within a paragraph. This is is especially useful when writing poetry or addresses.To use the 'br' tag simply add <br> to your html formatted story. Note that the 'br' tag is a simple break, space is not added between lines until the paragraph is closed
| Sample Code | Results |
|---|---|
shall I oft compare thee <br> to truly awful poetry? <br> 'tis true, thou art as fair <br> as a sleek and fecund mare </p> <p> on now for the second stanza! <br> to serenade from your credanza <br> this should've ended with just one <br> but the 'br' tag is just too fun! </p> | shall I oft compare thee on now for the second stanza! |
Because of the way A03 formats imported text or rich text, the spacing shown between paragraphs or sections may not be what you want. In this case, it is usually worth reviewing the HTML. One common thing is for there to be an empty paragraph (<p></p>) which will cause the visual spacing to include the bottom padding for the prior text, the top padding for the next text, and a row PLUS top and bottom padding for the blank paragraph. I highly recommend re-reading your after it's posted to ensure that the text is formatted the way you want.
