Witam, piszę na swoje potrzeby niewielką stronkę:
<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta charset="utf-8"/>
<title>TheBrackets</title>
<style>
body {
color: #000000;
}
.title {
color: #9f6ec0;
font-size: 40pt;
text-align: center;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-top: 25pt;
margin-bottom: 50pt;
padding-bottom: 25pt;
border-bottom: 3pt #000000 dotted;
}
.logo {
color: #13a79a;
font-size: 60pt;
}
.emot {
font-size: 60pt;
}
.art {
font-size: 15pt;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin-left: 20pt;
}
.title2 {
font-size: 25pt;
color: #9f6ec0;
}
.exampleIntroduction {
color: #13a79a;
font-weight: bold;
}
.example {
font-style: italic;
white-space: pre;
text-align: left;
}
.exampleResultIntroduction {
color: #9f6ec0;
font-weight: bold;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
font-style: italic;
}
</style>
</head>
<body>
<header>
<h1 class="title"><span class="logo">{...} TheBrackets</span> programing language <span class="emot">:)</span></h1>
</header>
<section>
<article class="art">
<h2 class="title2">1) Running programs</h2>
<code class="example">TheBrackets *.ps</code>
</article>
<article class="art">
<h2 class="title2">2) Print communique</h2>
<p><span class="exampleIntroduction">example:</span></p>
<p><code class="example">?Hello world!?|</code></p>
<p><span class="exampleResultIntroduction">You should watch: </span></p>
<p><code class="example">Hello world!</code></p>
<p>We write text between '?' operators, if we want to go to the next line we use ";" or "|" otherwise.</p>
<p>If you want to write '?' as printed character, write '\?', or if you want write '\' ( e.g. before the end of the text ), write '\\', otherwise character '\' will be printed normally.</p>
<p><span class="exampleIntroduction">example:</span></p>
<p><code class="example">
?What's your name\??;<br/>
?That's how we write '\?' character: '\\\?'?;<br/>
?\text\\?;<br/>
</code></p>
<p><span class="exampleResultIntroduction">You should watch: </span></p>
<p><code class="example">
What's your name?<br/>
That's how we write '?' character: '\?'<br/>
\text\<br/>
</code></p>
</article>
<article class="art">
<h2 class="title2">3) Variables and expressions</h2>
<p>We can declare variables two ways:</p>
<ul type="square">
<li>
Assign<br/>
<span class="exampleIntroduction">for example: </span> <code class="example">n:10</code>
</li>
<li>
Read from keyboard<br/>
<span class="exampleIntroduction">for example: </span> <code class="example">$n</code>
</li>
</ul>
<p>When we assign something to variable we can use a single constant or the whole expression.<br/>
If variable earlier existed, it will be update, else it will be create.</p>
<p>Operator priorities in expressions: </p>
<table>
<tr><th>1</th><td>subexpression in parentheses</td><td><span class="example">()</span></td></tr>
<tr><th>2</th><td>multiplication, division, modulo and power operator</td><td><span class="example">*, /, %, ^</span></td></tr>
<tr><th>3</th><td>sum and difference operator</td><td><span class="example">+, -</span></td></tr>
<tr><th>4</th><td>logic operator</td><td><span class="example">=, >, <, !</span></td></tr>
</table>
<p>To do print variable value we use '#' character.</p>
<p><span class="exampleIntroduction">example:</span></p>
<p><code class="example">
a: 10
#a ??;
a: a+1
#a ??;
b: a>3
#b ??;
c: a=(10-2.5)
#c ??;
d: b!c
#d ??;
e: a^2
#e ??;
f: (a-3)*10-3+(2.3/2)
#f ??;
g: 8
g: a%8
#g
</code></p>
<p class="exampleResultIntroduction">You should watch: </p>
<p><code class="example">
10
11
1
0
1
121
78.15
3
</code></p>
<p>For logical expressions 1 is true and 0 is false. The '%' operator is interesting, it determines the remainder of the division, but first converts both values into integers. If you know about it you can convert for example, number 1.67 to 1 (cut the value after the decimal point).</p>
<p><span class="exampleIntroduction">for example:</span></p>
<p><code class="example">
value: 1.67
?value = ?| #value ??;
value: value%(value+1)
?value = ?| #value ??;
</code></p>
<p class="exampleResultIntroduction">You should watch: </p>
<p><code class="example">
value = 1.67
value = 1
</code></p>
</article>
<article class="art">
<h2 class="title2">4) Conditional instructions and loops</h2>
<ul type="square">
<li>
condition<br/>
<span class="exampleIntroduction">for example: </span> <code class="example">@ 1<2 , ?true?; , ?false?;
&</code>
</li>
<li>
loop<br/>
<span class="exampleIntroduction">for example: </span> <code class="example">i:3 [ i>0 , { #i ? ?| i:i-1 } ]</code>
</li>
</ul>
<p>If after any comma you plane put more than one instruction that place these inside '{' and '}' brackets...</p>
<p>You can use additional instructions, '`' who end the loops and '~' who do nothing ( for example, when you do not want to do anything in a given place but there must be a instruction there - conditional or loop)</p>
</article>
<article class="art">
<h2 class="title2">5) Program examples</h2>
<p class="exampleIntroduction">the parity of numbers: </p>
<code class ="example">
?enter n: ?|
$n
n:n%(n+1)
i:1
n:n+1
[i<n ,
{{ @ (i%2)=0 , { {?number ?|} {#i} {? is parity?;} } , {{ ?numer ?|} {#i} {? in not parity?; }} & } { i:i+1 }}
]
</code>
<p class="exampleIntroduction">prime numbers: </p>
<p code="example">
?enter n: ?|
$n
n:n%(n+1)
@ n>0 , {
@ n=1 , { ?1 is not a prime number?; }, { @ n=2 , { ?2 is prime number?; } , {
i:n-1
prime:1
[ i>1 , {
@ n%i , ~ , { prime:0 ` } &
i : i-1
}]
@ prime , { #n ? is a prime number?; } , { #n ? is not a prime number?; } &
} & } &
},
{ ?n must be greater than zero! ?; } &
</code>
<p class="exampleIntroduction">fibonacci sequence: </p>
<code class="example">
?enter n: ?|
$n
n:n%(n+1)
@ n>0 , {
@ n=1 , { ?1 ?| }, { @ n=2, { ?1 1 ?| } , {
?1 1 ?|
a:1
b:1
c:0
i:2
[ i<n ,{
c:a+b
{ #c ? ?| }
a:b
b:c
i:i+1
}]
} & } &
}, { ?n must be greater than zero! ?; } &
</code>
</article>
</section>
</body>
</html>
Dla fragmentów prezentujących kod dałem taką właściwość:
.example {
font-style: italic;
white-space: pre;
text-align: left;
}
Generalnie zależy mi na tym żeby w tym tekście występowały sztywne spacje oraz żebym nie musiał używać ciągle <br/>
Jest jednak pewien problem, tekst należący do tej klasy znajduje się praktycznie na środku ekranu, a zależy mi żeby był oddalony od lewej krawędzi jakieś 20pt ( tak jak reszta ). Wiem że by to zrobić wystarczy po prostu przesunąć tekst tej klasy na lewo :
<p><code class="example">
a: 10
#a ??;
a: a+1
#a ??;
b: a>3
#b ??;
c: a=(10-2.5)
#c ??;
d: b!c
#d ??;
e: a^2
#e ??;
f: (a-3)*10-3+(2.3/2)
#f ??;
g: 8
g: a%8
#g
</code></p>
Ale moim zdaniem wygląda to tragicznie i jest to bardzo nieprofesjonalne rozwiązanie... Margines też nie jest dobrym rozwiązaniem bo jeszcze bardziej przesuwa tekst na prawo. jak można to zrobić inaczej?
Pozdrawiam i dziękuje za pomoc :)
