This is a complete section with left side bar.

Sections are numbered X.Y. With X being the chapter number and Y the section number within the chapter.

Generally, each section has its own web page.

Sections have a thick over-line and use the h2 heading level. Sections support both left and right side bars.

Each section is given an ID in the form js--XXYY00 (where XX is the chapter number and YY the section number).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus dolor et ante condimentum, eu rutrum turpis facilisis. Etiam vel massa ac tellus laoreet interdum nec vitae magna. Vestibulum sollicitudin consectetur enim quis interdum. Phasellus id arcu pretium, consequat mauris vitae, aliquet dui. Nam condimentum convallis lorem a tempus. Mauris arcu neque, fringilla vel viverra vitae, hendrerit id dui. Donec volutpat maximus arcu, eget vehicula lacus tempor eu. Phasellus sed neque hendrerit, scelerisque ligula in, vulputate augue. Curabitur finibus neque non varius convallis. In eu ex vel ligula cursus porta. Donec odio dolor, lacinia non nisl nec, lobortis laoreet justo. Sed hendrerit sodales neque at euismod. Vestibulum elementum ultrices commodo. Mauris leo odio, efficitur et ante non, molestie gravida mi. Vivamus congue augue ut orci fringilla, quis commodo diam consequat. Suspendisse a magna pretium lorem sodales ornare eu nec magna.

This is a complete subsection with left side bar.

Subsections are numbered X.Y.Z. With X being the chapter number, Y the section number within the chapter and Z the subsection number within the section.

Generally, each subsection will be included in the web page for its associated section.

Subsections have no over-line and use the h3 heading level. Subsections support both left and right side bars.

Each section is given an ID in the form js--XXYYZZ (where XX is the chapter number, YY the section number and ZZ the subsection number).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus dolor et ante condimentum, eu rutrum turpis facilisis. Etiam vel massa ac tellus laoreet interdum nec vitae magna. Vestibulum sollicitudin consectetur enim quis interdum. Phasellus id arcu pretium, consequat mauris vitae, aliquet dui. Nam condimentum convallis lorem a tempus. Mauris arcu neque, fringilla vel viverra vitae, hendrerit id dui. Donec volutpat maximus arcu, eget vehicula lacus tempor eu. Phasellus sed neque hendrerit, scelerisque ligula in, vulputate augue. Curabitur finibus neque non varius convallis. In eu ex vel ligula cursus porta. Donec odio dolor, lacinia non nisl nec, lobortis laoreet justo. Sed hendrerit sodales neque at euismod. Vestibulum elementum ultrices commodo. Mauris leo odio, efficitur et ante non, molestie gravida mi. Vivamus congue augue ut orci fringilla, quis commodo diam consequat. Suspendisse a magna pretium lorem sodales ornare eu nec magna.

Inline sections are unnumbered (the inline section title is left aligned with the edge of the central web page area).

An inline section is always included in the web page of its associated section/subsection &c.

Inline sections have no over-line and use the h4 heading level. Inline sections support both left and right side bars.

Each inline section is given an ID in the form js--XXYYZZL (where XX is the chapter number, YY the section number and ZZ the subsection number. L represents the letters a, b, c, d...&c., these are used in sequence).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus dolor et ante condimentum, eu rutrum turpis facilisis. Etiam vel massa ac tellus laoreet interdum nec vitae magna. Vestibulum sollicitudin consectetur enim quis interdum. Phasellus id arcu pretium, consequat mauris vitae, aliquet dui. Nam condimentum convallis lorem a tempus. Mauris arcu neque, fringilla vel viverra vitae, hendrerit id dui. Donec volutpat maximus arcu, eget vehicula lacus tempor eu. Phasellus sed neque hendrerit, scelerisque ligula in, vulputate augue. Curabitur finibus neque non varius convallis. In eu ex vel ligula cursus porta. Donec odio dolor, lacinia non nisl nec, lobortis laoreet justo. Sed hendrerit sodales neque at euismod. Vestibulum elementum ultrices commodo. Mauris leo odio, efficitur et ante non, molestie gravida mi. Vivamus congue augue ut orci fringilla, quis commodo diam consequat. Suspendisse a magna pretium lorem sodales ornare eu nec magna.

Lists come in two forms: numbered and unnumbered; unnumbered lists are also used to form hanging paragraphs (hanging indents) for notes.

With Numbered lists, each entry in the list is preceded by a number in a circle:

1. List entry 1

2. List entry 2

3. List entry 3

4. List entry 4

5. List entry 5

Up to 99 list entries can be made is using the Equity fonts. If using the PS-Index font, the list can only have 26 entries.

Numbered lists use the <ol> (ordered list) elements with class="list-num".

Applying <ol class="list-num" start="5"> will start the numbering at 5 (or any other number that is entered).

With unnumbered lists, each entry is prefixed with a bullet point:

• List entry

• List entry

• List entry

• List entry

• List entry

Unnumbered lists can have any number of list entries.

Unnumbered lists use the <ul> (unnumbered list) elements with class="list-no-num".

Hanging indents are used as notational paragraphs, these are unnumbered lists (<ul> elements) with class="note". Hanging indents are prefixed with the word “Note:” and are in italics and are indented:

• Supernatant is the water in the settling tank that sits above the sediment, this is decanted and returned to the works inlet for treatment.

Hanging indents can have multiple paragraphs:

• First paragraph with note and hanging indent — Supernatant is the water in the settling tank that sits above the sediment.

Second paragraph without the note inidcator

Links come in two broad categories: external links (links to other websites), internal links (links to other parts of the web site).

External links start with either http:// or https://. Internal links just have the path and filename within the directory structure.

The first of these, internal links, can be links to a point on another page within the website, or can be a link to a point on the same page. If the link is to a point on the same page, the browser will slow scroll to that point.

Examining each in turn:

The following is a typical external (offsite) link: Practical Typography. Such links have the following form:

<a class="hlink" href="http://practicaltypography.com/">Practical Typography</a>

All external links have the class hlink. This class applies a small capitals font and a light grey background that stands out clearly on a web page; hovering over the link will cause a dark grey bottom border to be displayed.

Linking to another page within the website will open that page with the top of the page displayed in the browser. Such a link has the following appearance:

<a class="hlink" href="98-00-blank.html">Blank Page</a>

It has the following appearance: Blank Page.

Internal links simply have an href to the HTML page in question. The web page is not preceded by http(s)://, if this is missing the browser knows to look in the current folder structure.

Links to other web pages within the same web site use the hlink class, just like external links.

It is possible to link to a particular point on another web page within the website if that point has been given a unique ID number. All sections within the website (lead-in, section, subsection, inline &c.) are given a unique number in the form js--XXYYZZ; to link to that particular point, the filename of the web page in the href attribute is followed by a # and the ID reference.

<a class="hlink" href="98-00-blank.html#js--980200">Section 98.2</a>

The above links to Section 98.2 on the web page 98-00-blank.html.

Again such internal links have the hlink class.

Links to a point on the same page are usually to sections (from the table of contents) or to figures, tables, code fragments &c. (in fact any numbered item). If the link is on the same page, the browser will visibly scroll to the specified point on the page in a given time period (rather than jumping instantly to it). This is called soft scrolling and is achieved with the jQuery scrollTop function contained in the local jQuery file (xx-xx-scroll.js).

For a link to work with the soft scroll function the <a> must have a jQuery class of js--sc-[ID] where [ID] is the ID number of the point to be scrolled to, this point must have an <id> with the same number, but without the sc- i.e. <div ... id="js--[ID]">. The [ID] has different formats for different items:

To enter a soft scroll link to a point within the same page enter a js--sc-[ID] class in the link:

<a class="xref js--sc-f99-01" href="#">Figure 99.1</a></p>

The href itself can be just the # placeholder; the browser will know to look on the same page.

Internal links to a point on the same page use the class xref; this is less noticeable on the page: Figure 99.1.

Other links are Table 99.1, Code 99.1 and Equation 99.1

When coding a web page, the links tend to be coded on the fly (possibly to some section further down the page that hasn’t been written yet) or copied from some parent document. Once the page is complete, it is prudent to test all the links on the page.

The problem here is knowing where the links are (it may not be obvious and it can be easy to overlook the more subtle ones); to get around this problem, the class utx should be added to the link when it is first coded:

<a class="hlink utx" href="98-00-blank.htmll#js--980200">Section 1</a>

This places a bright red dot before the link: Blank Page

Once the link has been tested, the utx class can be removed from the link. The class name utx (untested) has been selected because it is a combination of letters that does not naturally occur in English and this means that searching for it in the HTML only identifies untested links.

External link: Practical Typography:

<a class="hlink" href="http://practicaltypography.com/">Practical Typography</a>

Internal link to a point on another page: Section 98.2:

<a class="hlink" href="98-00-blank.html#js--980200">Section 98.2</a>

Internal link to a point on the same page: Figure 99.1:

<a class="xref js--sc-f99-01" href="#">Figure 99.1</a></p>

This section contains examples of typical table styles that can be found in the document.

The following is a standard table. By default it has borders at the bottom of each row, a header row and a caption row. Borders can be turned off if required (see the area 1 & 2 rows) by adding the .noborder class to the row, e.g. <tr class="noborder">.

The height of each row is set with <td> element with the leading (one per row) class, this holds a div with a style attribute that sets the height of the row (style="min-height: 3em").

The width of each column in set in the heading <th> element by adding a style="width: x%" attribute.

This is a dense table. It has borders just as the standard table above, but is slightly wider and uses a smaller font size — typically for things like IO tables

Column width and height is set in exactly the same was as for standard tables.

Incidental tables are used to add clarifications or additional points (in a similar fashion to sidebars) into the main body of the text.

Footnotes^†1 are used to reference a particular item in the text and add a clarification or explanation; e.g. explaining an acronym.

Additional paragraphs can also be added to footnotes:

It is possible to combine multiple footnotes^†1 in a single table as shown here. Footnotes^†2 are indicated using the † (&dagger;) symbol followed by a number (indicating the footnote) in superscript <sup>.

This section contains examples of typical figure arrangements that can be found throughout the website. These figures are not part of a lightbox arrangement (that is to say, clicking the image will do nothing).

Full width figure. Full width figures occupy a maximum width of 944 px.

Half width figure. Half width figures occupy a maximum width of 456 px each.

One third width figure. One third width figures occupy a maximum width of 295 px each.

Asymmetric display, ⅓ and ⅔. The first (narrow) image has a maximum width of 295 px, the second (wide) image has a maximum width of 613 px

Figures can be displayed in a "lightbox" arrangement, that is to say if the image is clicked, a full size version is displayed in (semi) full screen mode.

The lightbox uses a jQuery plugin (lightbox2) and has an associated CSS file that applies styling.

This lightbox mode can be used to scroll through all the figures that are selected for lightbox control.

Images are assigned to the lightbox by placing an <a> tag around the image, the <a>tag must have the attribute data-lightbox="name-of-group".

All images that have the same name-of-group will appear in the lightbox. The convention is (if only one group is to be displayed) that the name-of-group is set to "fig-set".

The image that appears in the lightbox is specified in the href attribute; this is generally the same as the <img src..., if a different (larger) image is required, it can be specified here.

The data-title attribute contains the title for the image (this should be set the same as the figure caption).

This is the second image in the lightbox.

The following figures are in the lightbox (showing different height and width responses).

Firstly, half width:

secondly, ⅓ width:

Finally, asymmetric display entries:

The following code fragments are displayed using google-code-prettify; a JS plugin that formats code for display on webpages.

This plugin can format various code languages (HTML, CSS, Java Script, C &c.); it does this by applying certain classes to the code section when the website loads.

These classes are formatted to try to reflect the colours used by the Brackets text editor (there are some differences, these are determined by the constraints of the plugin).

Code that is to be displayed must by within a <pre> element and this element must have the class="prettyprint" attribute.

The following are examples of code fragments:

HTML in a standard block with header (filename line) and caption.

The text is formatted in an approximation of the Brackets colour scheme. The background line shading is done within the prettifylines.css file.

<nav>                            <!-- TOP NAVIGATION BAR -->
    <div class="top-nav">
        <div class="rg-row">
            <a class="nav-wide" href="#"><span class="top-nav-icon">l</span><span class="top-nav-text">Prev. section</span></a>
            <a class="nav-wide" href="#"><span class="top-nav-icon">u</span><span class="top-nav-text">Prev. chapter</span></a>
            <a class="nav-wide nav-home" href="#"><span class="top-nav-text">Home</span><span class="top-nav-icon">h</span></a>
            <a class="nav-narrow js--sc-top" href="#"><span class="top-nav-icon">t</span><span class="top-nav-text">Top</span></a>
            <a class="nav-narrow" href="#"><span class="top-nav-text">Home</span><span class="top-nav-icon">h</span></a>
            <a class="nav-wide" href="#"><span class="top-nav-text">Next chapter</span><span class="top-nav-icon">d</span></a>
            <a class="nav-wide" href="#"><span class="top-nav-text">Next section</span><span class="top-nav-icon">r</span></a>
        </div>
    </div>
</nav>                            <!-- END OF TOP NAVIGATION -->

The code behind this is:

<pre class="prettyprint linenums lang-html" id="js--c99-01">

HTML with download link, text wrapping and false numbering
(numbering starts 25):

<p class="main-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            </div>
           
            <div class="side-area">
                <div class="side-box">
                    First side bar entry
                </div>
                <div class="side-box">
                    Second side bar entry
                </div>
                <div class="side-box">
                    Third side bar entry
                </div>
            </div>
           
            <div class="clearfix"></div>

The code behind this is:

<pre class="prettyprint linenums:25 lang-html wrap" id="js--c99-02">

Qualifying the linenums with a :nn starts the numbering at nn. Adding wrap to the class causes the lines to wrap without horizontal scroll bars.

CSS with scroll bar and false numbering
(numbering starts 10):

.list-num {                     /* TEXT STYLE - Numbered list */
    font-family: "conc-i3-r";
    margin-left: 5rem;
    /* font-feature-settings: 'liga' 1, 'ss01' 0; */
}
.list-num li p {
    font-family: "eqty-ta-r";
    padding-left: 1rem;
    margin-bottom: 0.85rem;
}

.list-no-num {                  /* TEXT STYLE - Un-numbered list */
    font-family: "conc-t3-r";
    margin-left: 5rem;
    list-style: none;
    /* font-feature-settings: 'liga' 1, 'ss01' 0; */
}
.list-no-num li p {
    font-family: "eqty-ta-r";
    padding-left: 1rem;
    margin-bottom: 0.85rem;
}
.list-no-num li:before {        /* prefix the list with a large dot and */
    content: "\25cf"; float: left; /* force the margin to the correct position */
    margin-left: -2rem;
}

.hlink {font-family: "eqty-ca-r"; } /* TEXT STYLE - hyperlink */
.hlink:link,
.hlink:visited{
    background-color: #f8f8f8;
    border-bottom: 1px solid transparent;
    -webkit-transition: background-color 0.2s, border-bottom 0.2s;
    transition: background-color 0.2s, border-bottom 0.2s;
}
.hlink:hover,
.hlink:active { background-color: #f8f8f8; border-bottom: 1px solid #404030; }

The code behind this is:

<pre class="prettyprint linenums:10 lang-css wrap" id="js--c99-03">

Line numbering has been set to start at 10. CSS code has the .pln and .lit classes overwritten by the prettifylines.css file to give a similar appearance to CSS in Brackets.

ANSI C and VB

#include <stdio.h>
int main() {
    char c;
    printf("Enter a character: ");

    // Reads character input from the user
    scanf("%c", &c);

    // %d displays the integer value of a character
    // %c displays the actual character
    printf("ASCII value of %c = %d", c, c);
    return 0;
}

Sub Main()

On Error GoTo Failed

Dim app As Netica.Application
app = New Netica.Application
app.Visible = True

Dim net_file_name As String
net_file_name = System.AppDomain.CurrentDomain.BaseDirectory() & "..\..\..\ChestClinic.dne"
Dim net As Netica.Bnet
net = app.ReadBNet(app.NewStream(net_file_name))
net.Compile()

Dim TB As Netica.BNode
TB = net.Nodes.Item("Tuberculosis")
Dim belief As Double
belief = TB.GetBelief("present")
MsgBox("The probability of tuberculosis is " & belief)

net.Nodes.Item("XRay").EnterFinding("abnormal")
belief = TB.GetBelief("present")
MsgBox("Given an abnormal X-Ray, the probability of tuberculosis is " & belief)

net.Nodes.Item("VisitAsia").EnterFinding("visit")
belief = TB.GetBelief("present")
MsgBox("Given abnormal X-Ray and visit to Asia, the probability of tuberculosis is " & belief)

net.Nodes.Item("Cancer").EnterFinding("present")
belief = TB.GetBelief("present")
MsgBox("Given abnormal X-Ray, Asia visit, and lung cancer, the probability of tuberculosis is " & belief)

net.Delete()
If Not app.UserControl Then
app.Quit()
End If

Exit Sub
Failed:

MsgBox("NeticaDemo: Error " & (Err.Number And &H7FFFS) & ": " & Err.Description)

End Sub

With code:

<pre class="prettyprint linenums lang-c">

Fixed height containers can be used to hold code fragments; these containers have both horizontal and vertical scrolling. Fixed height fragments are implemented by adding style="max-height: XXrem" to the <pre> tag; the table below has style="max-height: 5.3rem".

The scroll bars appear automatically as required:

<nav>                            <!-- TOP NAVIGATION BAR -->
    <div class="top-nav">
        <div class="rg-row">
            <a class="nav-wide" href="#"><span class="top-nav-icon">l</span><span class="top-nav-text">Prev. section</span></a>
            <a class="nav-wide" href="#"><span class="top-nav-icon">u</span><span class="top-nav-text">Prev. chapter</span></a>
            <a class="nav-wide nav-home" href="#"><span class="top-nav-text">Home</span><span class="top-nav-icon">h</span></a>
            <a class="nav-narrow js--sc-top" href="#"><span class="top-nav-icon">t</span><span class="top-nav-text">Top</span></a>
            <a class="nav-narrow" href="#"><span class="top-nav-text">Home</span><span class="top-nav-icon">h</span></a>
            <a class="nav-wide" href="#"><span class="top-nav-text">Next chapter</span><span class="top-nav-icon">d</span></a>
            <a class="nav-wide" href="#"><span class="top-nav-text">Next section</span><span class="top-nav-icon">r</span></a>
        </div>
    </div>
</nav>                            <!-- END OF TOP NAVIGATION -->

The code for this is:

<pre class="prettyprint linenums lang-html" style="max-height: 5.3rem">

Simple code fragments (single line and multiple line) look like the following

Single line:

<div class="top-nav"></div>

Multiple lines:

<div class="top-nav"></div>
<div class="top-nav"></div>
<div class="top-nav"></div>

The code for both of the above is:

<pre class="prettyprint lang-html">

Inline fragments

An inline fragment: <div class="top-nav"></div> this uses the <code> element instead of the <pre> element.

The code being:

<code class="prettyprint lang-html nohyp">

Formulae can be displayed in standard mathematical notation. The formulae are rendered from AsciiMath format to standard notation using MathJax (a Java Script application).

MathJax interprets any AsciiMath formula that is contained within back-tick delimiters (`) and converts it into a conventional looking formulae.

The formula box has a header line (optional), the equation itself, an equation number (optional) and a caption at the bottom (optional). The full arrangement is shown here:

The AsciiMath for the above is:

sum_(i=1)^n i^3=((n(n+1))/2)^2

Without the header and caption:

The AsciiMath being:

x=(-b +- sqrt(b^2 – 4ac))/(2a)

Background colouring can be added by applying class .formulae-bkgd to the header and container <div> elements:

AsciiMath:

f(a) = 1/(2pii) oint_gamma f(z)/(z-a)dz

Equations can be inline: `f(a) = 1/(2pii) oint f(z)/(z-a)dz` by using <span> elements.

I.e.:

<span >`f(a) = 1/(2pii) oint f(z)/(z-a)dz`</span>

There are several inline classes that can change the apperance of text within the main body area and in the side bars. The following styles are available:

There are several additional inline styles directly associated with the PAL (and contained in the style-pal.css file). The following styles are available:

This is all caps, the main text of the paragraph (what you are reading now) is the main paragraph style (p).

First use applies emphasis with italics (if this is used in a sidebar, it will also impose a serif font — italics should not be used with san serif fonts).

Code highlights are indicated with the code class. Emphasis is given in bold with the <em> tag.

Other styles that can be applied to main paragraphs are: small caps serif, small caps sans, standard sans serif and , monospaced.

Any text can also be highlighted in red.

And this is notice text.

Special paragraph breaks, like the one above can be added; these are a graphical object (a flourish) and are used to definitively separate two sections of text without the need of adding section numbering.

It is just an empty <div> with class="flourish".

The end mark below (the Yorkshire rose with two flourishes) is used to mark the end of the page. It also applies some whitespace and a bottom grey border to finish the page prior to the footer. It is an empty <div> with class="section-last".

Inline styles

  em — Emphasis Italic

  emph — EmphasisBold

  all-caps — AllCaps

  code — Code

  first-use — FirstUseItalic

  index — Index10111213

  in-head — InTextHeading

  menu — Menu

  mono — MonotypeFont

  notice — Notice

  red — Red

  lorum — faint text

  sans — SansSerif

  sans-b — SansSerifBold

  serif — Serif

  serif-b — SerifBold

  sml-caps-ns — SmallCapsSansSerif

  sml-caps-s — SmallCapsSerif

Additional PAL inline styles

  abs — absolute signals

  signal — connection signals

  block — block names

  tia — general TIA font usage

  tia-em — emphasised TIA font usage

There are several central and sidebar styles associated with the Git version control system (VCS). Examples of these styles are given in this section.

We do this by initialising the repository. The blue colour is achieved with the class .git-cmd.

Exactly the same class can be used in the sidebar and in figure and table captions.

The Git VCS site uses red text in incidental tables, the san-serif is class .git-cmd. The red serif text is.git-incid.

This is a simple video entry:

The headline banner (hero section) fits at the top of the page and has a background image that spans the width of the page, it is usually overlayed with the logo and logo text.

The bottom banner preceeds the page footer at the botom of the page and has a background image that spans the width of the page, it is usually overlayed with some text.