Baz

This page demonstrates how some common HTML elements are styled with the current stylesheet.

Code Block

Here is a code block that displays the famous "hello, world" program written in C:

#include <stdio.h>

int main()
{
    printf("hello, world\n");
    return 0;
}

On a Unix or Unix-like system, this program can be compiled to a binary executable with the following command:

$ cc hello.c && ./a.out
hello, world

The command displayed above denotes keyboard input entered by a user. The above code example was created with the following HTML code:

<pre>
<samp>$ <kbd>cc hello.c &amp;&amp; ./a.out</kbd>
hello, world</samp>
</pre>

Here is a code block with a wide ruler that can be helpful to see how much horizontal and vertical space a certain amount of code consumes:

1---5---10---15---20---25---30---35---40---45---50---55---60---65---70---75---80---85---90---95--100--105--110--115--120--125--130--135--140--145--150--155--160--165--170--175--180--185--190--195--200--205--210--215--220--225--230--235--240--245--250--255--260--265--270--275--280--285--290--295--300
2
3
4
5
6
7
8

The <kbd> elements are styled with a slight 3D effect. Here are some examples:

ctrl+p ctrl+n

Blockquote

This section shows a few examples of the <blockquote> element.

In a letter to Robert Hooke in 1675, Issac Newton famously wrote,

If I have seen further it is by standing on the shoulders of giants.

In a later memoir, Newton wrote:

I do not know what I may appear to the world, but to myself I seem to have been only like a boy playing on the sea-shore, and diverting myself in now and then finding a smoother pebble or a prettier shell than ordinary, whilst the great ocean of truth lay all undiscovered before me.

To read more about Newton, see the Wikipedia entry on Issac Newton.

Image

This section shows an example of <img> nested within a <figure> element. The caption is created with <figcaption> within the same <figure> element.

Table

This section shows an example of an HTML table.