99Typicals

Lead-in sections are generally used at the start of a chapter; they have a thin line above and an optional side heading.

Lead-in sections generally adopt the h1 heading set in the title section of the <header>. Internally within the section there is a nominal h6 level (h6 headings do not display, they are used to satisfy HTML validation requirements — sections require a heading), this should be given a meaningful description applicable to the lead-in section.

If a side heading is used, this will have an h2 heading level. In addition to the side heading, lead-in can support both left and right side bars.

Each lead-in section is given an ID in the form js--XX0000 (where XX is the chapter number).

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).

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).

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).

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.

• First paragraph with note and hanging indent

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="01-00-introduction.html">Section 1</a>

It has the following appearance: Section 1.

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="04-02-starting.html#js--040202">Section 4.2.2</a>

The above links to Section 4.2.2 on the web page 04-02-starting.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="04-02-starting.html#js--040202">Section 1</a>

This places a bright red dot before the link: Section 1

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 4.2.2:

<a class="hlink utx" href="04-02-starting.html#js--040202">Section 1</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 748 px.

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

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

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

This section contains examples of typical figure arrangements that can be found throughout the website; these figures are all part of a lightbox gallery. That is to say, clicking the image will cause a larger (or even a different) version of the image to appear in front of the page text within a white frame with a caption (the page text behind the image will be greyed out).

Full width figures. Full width figures occupy a maximum width of 748 px.

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:

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".

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.