Apostate Café


By joshua

Pubished:

Posted in: programming

HTML Entity Codes Test Page

<span class="caps">HTML</span> Entity Codes Test Page

Palette Sample


 —FDF8EA  —54454A  —B08558  —2D6F6D  —B7A960  —D9C89C ———- ———- ———- ———- ———- ———-


Tests for common HTML elements

Paragraphs & Inline Markup

This paragraph contains elements. Up first is the anchor tag, which can occur as an <a> a + href, or an <a> a + name, followed by an ABBR with a title value, followed by an ACRONYM with a title value, followed by a b (for bold) element, followed by a big element, followed by a Citation (cite) element, followed by a Computer code text (code) element, followed by a ~~Deleted (del)~~ element, followed by a Definition term (dfn) element, followed by Emphasized text (em), followed by an italics (i) element.

This next paragraph also contains elements. Up first is the <ins> element, followed by keyboard text (kbd), followed by a <mark> element, followed by a “Q” element and a “double ‘nested Q’” (a quotation inside a quotation), followed by

sample text (samp)

, followed by a small element, followed by a span element, followed by a strike element, followed by strong text (strong), followed by text in monospace font (tt), followed by an underlined element (u), followed by a Variable element (var, compared to code), all within a containing P. In order to test subscripts and superscripts inside running text, we need constructs like x1 and H2O and Mlle and 1st, and then some mathematical notations: ex, sin2 x, and nested exponents too: ex2^^ and f(x)^g(x)^a+b+c^^ (where 2 and a+b+c should appear as exponents of exponents).


Copy in Lists & Tables

Copy in lists can differ from default styles depending on its wrapping; unless you wrap the contents in a <p> tag, don’t expect your <li>s to respect your font and paragraph width settings.

  • As an example, the contents of this <li> are not wrapped in a <p>: Professionally monetize timely ROI via B2B alignments. Efficiently pursue orthogonal models vis-a-vis superior catalysts for change. Quickly promote viral best practices for collaborative paradigms.
  • Or wrapped in a <p>: Professionally monetize timely ROI via B2B alignments. Efficiently pursue orthogonal models vis-a-vis superior catalysts for change. Quickly promote viral best practices for collaborative paradigms.

Similar to list elements, tabular data is does not inherit the style settings from <p>, so you must define the <td> style or wrap cell contents in <p>.


<td> copy without a <p>: Professionally monetize timely ROI via B2B alignments. Efficiently pursue orthogonal models vis-a-vis superior catalysts for change. Quickly promote viral best practices for collaborative paradigms. <td> copy in a <p>: Professionally monetize timely ROI via B2B alignments. Efficiently pursue orthogonal models vis-a-vis superior catalysts for change. Quickly promote viral best practices for collaborative paradigms. ————————————————————————————————————————————————————————————————————————————-


Preformatted Text

Typographically, preformatted text is not the same thing as code. Sometimes, a faithful execution of the text requires preformatted text that may not have anything to do with code. Most browsers use Courier and that’s a good default — with one slight adjustment, Courier 10 Pitch over regular Courier for Linux users. For example:

“Beware the Jabberwock, my son!
The jaws that bite, the claws that catch!
Beware the Jubjub bird, and shun
The frumious Bandersnatch!”

One can use the <code> tag inside a <pre> block to maintain the formatting of source code. For example:

 #container { float: left; margin: 0 -240px 0 0; width: 100%; } 

Blockquotes

Let’s keep it simple. Italics are good to help set it off from the body text (and italic Georgia is lovely at this size). Be sure to style the citation.

Good afternoon, gentlemen. I am a HAL 9000 computer. I became operational at the H.A.L. plant in Urbana, Illinois on the 12th of January 1992. My instructor was Mr. Langley, and he taught me to sing a song. If you’d like to hear it I can sing it for you.

HAL 9000

And here’s a bit of trailing text.


Address

Finally, we have the <address> tag, which renders thus:

\

Donald Duck Box 555 Disneyland

Forms

The following two radio buttons are inside
a fieldset element with a legend:

Legend

Check those that apply


Heading Tags: Standalone Headings

H1: Lorem ipsum dolor sit amet

H2: Lorem ipsum dolor sit amet, consectetur elit

H3: Lorem ipsum dolor sit amet, consectetur adipisicing elit

H4: Lorem ipsum dolor sit amet, consectetur adipisicing elit adipis

H5: Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit
H6: Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit

Heading Tags: Headings followed by rules

Heading 1


Heading 2


Heading 3


Heading 4


Heading 5

Heading 6

Heading Tags: Headings followed by copy

Heading 1

Uniquely pursue reliable schemas and visionary infrastructures. Credibly recaptiualize diverse manufactured products through visionary catalysts for change. Rapidiously foster next-generation platforms rather than value-added data.

Heading 2

Monotonectally enable impactful architectures rather than world-class markets. Collaboratively target high-payoff expertise through emerging total linkage. Competently foster frictionless total linkage through B2B methods of empowerment.

Heading 3

Professionally monetize timely ROI via B2B alignments. Efficiently pursue orthogonal models vis-a-vis superior catalysts for change. Quickly promote viral best practices for collaborative paradigms.

Heading 4

Energistically network sustainable e-services whereas corporate potentialities. Assertively optimize adaptive sources via maintainable e-markets. Professionally iterate optimal relationships for installed base manufactured products.

Heading 5

Dynamically conceptualize proactive e-markets through bleeding-edge materials. Seamlessly create reliable growth strategies after front-end partnerships.

Heading 6

Dynamically conceptualize proactive e-markets through bleeding-edge materials. Seamlessly create reliable growth strategies after front-end partnerships.


Heading Tags: Adjacent headings followed by copy

1st level heading

2nd level heading

This is a test paragraph.

2nd level heading

3rd level heading

This is a test paragraph.

3rd level heading

4th level heading

This is a test paragraph.

4th level heading

5th level heading

This is a test paragraph.

5th level heading
6th level heading

This is a test paragraph.


Lists

  • Unordered list test

  • Another list element. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • Yet another element in the list

  • Some long text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • Ordered list test

  • Another list element

  • Yet another element in the list

  • Ordered list

  • Here’s a nested unordered list
    • Nested Unordered list
    • Nested ordered list
      1. The first
      2. And the second
  • Ordered List item

  • Nested Ordered list
    1. Some point
    2. Nested Unordered list
      • The first
      • And the second
definition list dt
definition list dd definition list dt
definition list dd Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit

Tables

The following table has a caption. The first row and the first column contain table header cells (th elements) only; other cells are data cells (td elements), with align="right" attributes:

Sample table: Areas of the Nordic countries, in sq km
Country Total area Land area Denmark 43,070 42,370 Finland 337,030 305,470 Iceland 103,000 100,250 Norway 324,220 307,860 Sweden 449,964 410,928

 

The following table has thead and tfoot sections. Note that in HTML the tfoot comes before tbody, yet it still renders at the bottom of the form.

This is a CAPTION in a TABLE
This is a TH in a TR in a THEAD in a TABLE This is a TD in a TR in a THEAD in a TABLE
This is a TH in a TR in a TFOOT in a TABLE This is a TD in a TR in a TFOOT in a TABLE
This is a TH in a TR in a TBODY in a TABLE This is a TD in a TR in a TBODY in a TABLE

 

*A standard test table with a caption, tr, td elements*
Table Header One Table Header Two
TD One TD Two
TD colspan 2

 

*A test table with a thead, tfoot, and tbody elements*
Table Header One Table Header Two
tfoot footer
TD One TD Two
TD One TD Two
TD One TD Two
TD One TD Two