Sideway
output.to from Sideway
Draft for Information Only

Content

CSS Code and Pre Tags
 Equation Block
 Equation Inline Block
 Equation Example

CSS Code and Pre Tags

In general, a html <code> tag is used to define a block of inline computer code and a html <pre> tag is used to define a block of preformatted text block. Usually, a block of preformatted computer code is tagged by the nested html <pre><code> tag pair.
HTML Document Input:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div {font-size:1em;line-height:1.2em}
code,pre {padding:3px; outline: silver solid 1px;}
pre>code {outline: cyan solid 1px;}
</style>
<title>Sample Page</title>
    </head>
    <body>
<div>
This is <code>an
inline code
</code>
This is <pre>a
preformatted block
</pre>
This is <pre><code>a
preformatted
code block</code></pre>
</div>
    </body>
</html>
HTML Web Page Embedded Output:

not support

Equation Block

Since a computer code is usually rendered as a preformatted block, the html <code> tag can therefore be used to tag a block of equation by redefining the attribute of <code> tag.
HTML Document Input:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div {font-size:1em;line-height:1.2em}
code, pre {display:block; padding:1px; outline: silver solid 1px;}
pre>code {outline: cyan solid 1px;}
</style>
<title>Sample Page</title>
    </head>
    <body>
<div>
This is <code>a
code block
</code>
This is <pre>a
preformatted block
</pre>
This is <pre><code>a
preformatted block of
a code block</code>new text</pre>
</div>
    </body>
</html>
HTML Web Page Embedded Output:

not support

Equation Inline Block

Besides, the html <code> tag can also be used to tag an equation as an inline block by redefining the attribute of <code> tag.
HTML Document Input:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div {font-size:1em;line-height:1.2em}
pre {display:block; padding:1px; outline: silver solid 1px;}
code {display:inline-block; padding:1px; outline: silver solid 1px;}
pre>code {outline: cyan solid 1px;}
</style>
<title>Sample Page</title>
    </head>
    <body>
<div>
This is <code>an
inline code block
</code>
This is <pre>a
preformatted block
</pre>
This is <pre><code>a
preformatted block of
an inline code block</code>new text</pre>
</div>
    </body>
</html>
HTML Web Page Embedded Output:

not support

Equation Example

Examples of an inline-block equation and an equation block
HTML Document Input:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div {font-size:1em;line-height:1.2em;}
p {clear:both;}
code {display:block; width:90%; margin:0 auto; padding:1px; outline: silver solid 1px;}
span {display:block;}
span>code {float:left; width:90%; margin:0 3%; outline: blue solid 1px;}
p>code {display:inline-block; width:auto; outline: cyan solid 1px;}
</style>
<title>Sample Page</title>
    </head>
    <body>
<div>
This is <code>a
code block
</code> new text
<div>This is <span><code>a
code block
</code>88</span></div>
<p>This is <code>an
inline code block</code> new text</p>
<p>This is <code style="width:50%">an
inline code block</code> new text</p>
<p>This is <code style="width:70%">an
inline code block</code> new text</p>
<p>This is <code style="width:90%">an
inline code block</code> new text</p>
<p>This is <code style="width:95%">an
inline code block</code> new text</p>
</div>
    </body>
</html>
HTML Web Page Embedded Output:

not support


©sideway

ID: 190300026 Last Updated: 26/3/2019 Revision: 0 Ref:

close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close
IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 8

Culture

Chinese 1097

English 337

Reference 67

Computer

Hardware 149

Software

Application 198

Digitization 119

Numeric 19

Programming

Web 283

Unicode 494

HTML 65

CSS 58

ASP.NET 97

OS 389

DeskTop 7

Python 19

Knowledge

Mathematics

Formulas 8

Algebra 25

Number Theory 206

Trigonometry 18

Geometry 18

Calculus 67

Complex Analysis 21

Engineering

Tables 8

Mechanical

Mechanics 1

Rigid Bodies

Statics 92

Dynamics 37

Fluid 5

Fluid Kinematics 5

Control

Process Control 1

Acoustics 19

FiniteElement 2

Physics

Electric 27

Biology 1

Geography 1


Copyright © 2000-2020 Sideway . All rights reserved Disclaimers last modified on 06 September 2019