A blank page | PracticalSeries: Web Development

Placeholder

This section is used as the start of a chapter, it has a thin line above and an optional side heading.

Chapters with only a thin line do not have a heading (the heading is set in the title section — usually level h2), a nominal h6 level (h6 headings do not display) is also given to satisfy HTML validation requirements (sections must contain a heading element).

If a side heading is used, this will have an h2 heading level.

98.1 Section

This is a typical section, it will be numbered X.Y.

Sections have an h2 heading level.

98.1.1 Subsection

This is a typical subsection, it will be numbered X.Y.Z.

Subsections have an h3 heading level.

Inline section

This is an inline section, it has no number but does appy emphasis to a distinct section of text

Inline sections have an h4 heading level.

98.2 Common examples

Numbered list

EntryA
EntryB

Unnumbered list

EntryA
EntryB

Hanging indent (note)

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

External link: Practical Typography:

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

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

Tables & footnotes

Standard table:

Area	Name	Purpose
1	Filter1	DescriptionNoBorder
2	Filter2	DescriptionBorder
Table 98.1 StandardTable

Dense table:

Symbol	Address	Rack/slot	Card	Signal	Range	Description
PM001_RUNNING	I00_0	1_104	32xDI	24VDC	0_1	InletPumpRunning
PM001_HEALTHY	I00_1	1_104	32xDI	24VDC	0_1	InletPumpHealthy
Table 98.2 DenseTable

Incidental table:

Incidental Table Heading
Word has a couple of undocumented features; just type =lorem() on a blank line and hit enter to get lorem ipsum padding text (add a number between the brackets to get that many lines of lorem ipsum)..

Basic footnote^†1:


†1		Footnotes usually provide additional information or references for particular items in the main body of the text — bibliographical information, clarification etc.

Footnote with additional paragraph^†1:


†1		Footnotes usually provide additional information or references for particular items in the main body of the text — bibliographical information, clarification etc.
		Additional paragraph here.

Multiple^†1 footnotes^†2:


†1		This is the first footnote
†2		This is the second footnote

Lightbox figures

Figure 98.1 - SingleFullWidth — Figure 98.1 SingleFullWidth

Figure 98.2 - HalfWidth — Figure 98.2 HalfWidth

Figure 98.3 - HalfWidth — Figure 98.3 HalfWidth

Figure 98.4 - OneThirdWidth — Figure 98.4 OneThirdWidth

Figure 98.5 - OneThirdWidth — Figure 98.5 OneThirdWidth

Figure 98.6 - OneThirdWidth — Figure 98.6 OneThirdWidth

Figure 98.7 - ThirdWidth — Figure 98.7 OneThirdWidth

Figure 98.8 - TwoThirdsWidth — Figure 98.8 TwoThirdsWidth

Code fragments

Standard HTML - line numbers, no wrap:

html

<nav>                            <!-- TOP NAVIGATION BAR -->
    <div class="top-nav">
        <div class="rg-row">
            <a class="nav-wide" href="#">Prev. section</a>
        </div>
    </div>
</nav>                            <!-- END OF TOP NAVIGATION -->

Code 98.1 CodeCaption

Standard HTML - forced line numbers, wrap and download:

index.html

<p class="main-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </p>

            <div class="side-area">
                <div class="side-box">
                    First side bar entry
                </div>
            </div>

Code 98.2 CodeCaption

a

Standard CSS - forced line numbers, wrap and download:

css

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

Code 99.3 — CodeCaption

Fixed height - line numbers and no wrap:

html

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

Code 99.4 — CodeCaption

Simple - single line

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

Simple - multiple lines:

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

Inline code fragment:

An inline <div class="top-nav"></div> code fragment.

Formula

Full formula arrangement:

Equation Header

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

(98.1)

EquCaption

Simple formula arrangement:

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

Full formula arrangement with background colour:

Equation Header

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

(99.3)

Equation caption

Simple formula arrangement with background colour:

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

(98.4)

Inline equations `f(a) = 1/(2pii) oint f(z)/(z-a)dz` are possibe too.

Inline styles

EmphasisInBold

AllCaps

Code

FirstUseItalic

Index10111213

InTextHeading

Menu

MonotypeFont

Notice

Red

SansSerif

SansSerifBold

Serif

SerifBold

SmallCapsSansSerif

SmallCapsSerif