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
close

Latest Updated LinksValid XHTML 1.0 Transitional Valid CSS!Nu Html Checker Firefox53 Chromena IExplorerna
IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 7

Culture

Chinese 1097

English 337

Reference 67

Computer

Hardware 149

Software

Application 187

Digitization 24

Numeric 19

Programming

Web 761

CSS 1

ASP.NET 1

Regular Expression 1

HTML

Knowledge Base

Common Color 1

Html Entity (Unicode) 1

Html 401 Special 1

OS 389

MS Windows

Windows10 1

.NET Framework 1

DeskTop 7

Knowledge

Mathematics

Formulas 8

Algebra 20

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 11

Biology 1

Geography 1


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