1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Advanced Text Formatting Demonstration</title>
6
7 <!--
8 http://cssdweb.edu/Student Resources/Website Development I/CodeSamples/AdvancedFormatting_2.html
9 Copyright (c) 2022 by Jesse Heines. All rights reserved. May be freely
10 copied or excerpted for educational purposes with credit to the author.
11 updated by JMH on May 16, 2022 at 7:59 AM
12 -->
13
14 <script>
15 var content =
16 "<h1>Corrections Special School District</h1>" +
17 "<p><em>(PRO Manual, pages 45-46)</em></p>" +
18 "<h2>What types of courses are available from CSSD?</h2>" +
19 "<ul>" +
20 " <li>Basic reading, language and math courses to help illiterate and special" +
21 " students.</li>" +
22 " <li>English-as-a-Second-Language (ESL) instruction for limited-English speaking" +
23 " education inmates.</li>" +
24 " <li>Intermediate instruction in reading, language mechanics, social studies, " +
25 " science, and mathematics designed to bridge the gap between basic skills and " +
26 " high school level work.</li>" +
27 " <li>High school level courses offering all the credits toward a high school" +
28 " diploma.</li>" +
29 " <li>A Resource Room to provide extra help for students who need individualized" +
30 " academic assistance.</li>" +
31 " <li>Career development, business and computer related instruction.</li>" +
32 " <li>Life skills instruction often offered in coordination with other departmental" +
33 " staff in subjects such as anger management, problem solving, personal finance," +
34 " health and nutrition.</li>" +
35 "</ul>" ;
36 </script>
37
38 <style>
39 .comment {
40 font-weight: bold ;
41 padding: 0 1em ;
42 background-color: yellow ;
43 color : red ;
44 }
45 @media print {
46 /* https://stackoverflow.com/questions/1664049/can-i-force-a-page-break-in-html-printing */
47 .pagebreak {
48 page-break-before: always ;
49 }
50 }
51 </style>
52 </head>
53
54 <body>
55
56 <div id="basic">
57 <p><span class="comment">BASIC TEXT</span></p>
58 <script>
59 document.writeln( content ) ;
60 </script>
61 </div>
62 <hr>
63
64 <!-- = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = -->
65
66 <p><span class="comment">VARIATION #1</span></p>
67 <style>
68 #Variation-1 * {
69 font-family: Verdana ;
70 }
71 #Variation-1 h1, #Variation-1 h2 {
72 margin-bottom: 0 ;
73 }
74 #Variation-1 p, #Variation-1 ul {
75 margin-top: 0 ;
76 }
77 </style>
78 <div id="Variation-1">
79 <script>
80 document.writeln( content ) ;
81 </script>
82 </div>
83 <hr>
84
85 <!-- = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = -->
86
87 <p class="pagebreak"><span class="comment">VARIATION #2</span></p>
88 <style>
89 #Variation-2 * {
90 font-family: Verdana ;
91 }
92 #Variation-2 h1, #Variation-2 h2 {
93 margin-bottom: 0 ;
94 }
95 #Variation-2 h1 {
96 text-transform: uppercase ;
97 color: blue ;
98 }
99 #Variation-2 h2 {
100 font-variant: small-caps ;
101 color: green ;
102 }
103 #Variation-2 p, #Variation-2 ul {
104 margin-top: 0 ;
105 }
106 #Variation-2 li {
107 text-align: justify ;
108 }
109 </style>
110 <div id="Variation-2">
111 <script>
112 document.writeln( content ) ;
113 </script>
114 </div>
115 <hr>
116
117 <!-- = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = -->
118
119 <p><span class="comment">VARIATION #3</span></p>
120 <style>
121 #Variation-3 * {
122 font-family: Verdana ;
123 }
124 #Variation-3 h1, #Variation-3 h2 {
125 margin-bottom: 0 ;
126 }
127 #Variation-3 h1 {
128 text-transform: uppercase ;
129 color: blue ;
130 font-size: 1.8em ;
131 }
132 #Variation-3 h2 {
133 font-variant: small-caps ;
134 color: green ;
135 }
136 #Variation-3 p, #Variation-3 ul {
137 margin-top: 0 ;
138 }
139 #Variation-3 li {
140 text-align: justify ;
141 line-height: 1.6em ;
142 }
143 #Variation-3 li:first-letter {
144 color: red ;
145 font-weight: bold ;
146 font-size: 1.2em ;
147 letter-spacing: 0.1em ;
148 }
149 </style>
150 <div id="Variation-3">
151 <script>
152 document.writeln( content ) ;
153 </script>
154 </div>
155 <!-- <hr> -->
156
157 <!-- = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = -->
158
159 <p class="pagebreak"><span class="comment">VARIATION #4</span></p>
160 <style>
161 #Variation-4 * {
162 font-family: Verdana ;
163 }
164 #Variation-4 h1, #Variation-4 h2 {
165 margin-bottom: 0 ;
166 }
167 #Variation-4 p, #Variation-4 ul {
168 margin-top: 0 ;
169 }
170 #Variation-4 li {
171 list-style-image: url( images/OldManInTheMountain_16x16.ico ) ;
172 list-style-position: outside ;
173 }
174 </style>
175 <div id="Variation-4">
176 <script>
177 document.writeln( content ) ;
178 </script>
179 </div>
180 <hr>
181
182 <!-- = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = -->
183
184 <p><span class="comment">VARIATION #5</span></p>
185 <style>
186 #Variation-5 * {
187 font-family: Verdana ;
188 }
189 #Variation-5 h1, #Variation-5 h2 {
190 margin-bottom: 0 ;
191 }
192 #Variation-5 p, #Variation-5 ul {
193 margin-top: 0 ;
194 }
195 #Variation-5 li {
196 list-style-image: url( images/OldManInTheMountain_16x16.ico ) ;
197 list-style-position: inside ;
198 }
199 </style>
200 <div id="Variation-5">
201 <script>
202 document.writeln( content ) ;
203 </script>
204 </div>
205 <hr>
206
207 </body>
208
209 </html>