#file is used simply to include another file into the .html file. #html works the same way except it converts "&","<"; and ">" into "&", "<" and ">" so the file's display looks like a HTML file instead of treating these symbols in the way HTML normally treats them. #html may be useful in mathematical or code files containing "&","<"; and ">" symbols. #code is like #html except it uses a two column table and numbers each line. The these markers are use by simply putting either
#file fileName.ext #html filename.ext #code filename.ext
into the file as the first item on a line. #file is often useful for such things as headers and footers but was used extensively in preparing this website.
For example, suppose the file AddMenuFooter.html contains
<p><a href = "#top">Top of file</a></p> <p class = "smaller">Revised #date #time.</p> <p>Questions, suggestions or comments: <a href = "mailto:brinkje@plu.edu">James Brink</a></p>
Then the source code
#file AddMenuFooter.html
would be rewritten as
<p><a href = "#top">Top of file</a></p> <p class = "smaller">Revised 12/16/2019 14:45.</p> <p>Questions, suggestions or comments: <a href = "mailto:brinkje@plu.edu">James Brink</a></p>
assuming that the file was preprocessed at the specified date and time.
This footer file is used at the end of each page in this website. The blue "AddMenu" symbol on the top of each page is also put in with an included header file (AddMenuHeader.html) using a #file marker. The styles (including linked style sheets) used in these pages are put in by specifying the included file, "AddMenuStyles.html", in each of the website's files to make sure the styles are available on every page, are changed uniformally in the web site, and shorten the head section in the ...A.html source files. This file significantly simplifies changing styles in the web site.
If the specified file in a #file, #html, #code marker does not exist, the marker is ignored without any warning.
It is often useful to preserve line structure when one uses #html. If so, it is generally helpful to enclose the marker inside of a <pre> section. If you don't want the monospacing it automatically uses, you could tags like <span> to specify a different font.
Note: Because the prepossessor actually copies the included files into the published html document, if an included file is modified, the preprocessor will need to be run again.
#code uses a 2 column table format to display the specified file. The right side of the table shows the code using a <pre> section. The lines in the code are numbered in the left column. The following is an example although it has more style than is needed.
1
2
3
4
5
6
7
8
|
static void writeToFile(BufferedWriter out, String line) {
try{
line = makeSubs(line);
out.write(line);
} catch (IOException x) {
System.err.format("IOException in line %d: %s%n", lineCount, x);
}
} // writeToFile
|
The AddMenu uses the following structure for #code:
<table class = "AddMenuCodeTable">
<tr class = "AddMenuCodeTr">
<td class = "AddMenuCodeTd">
<pre class = "AddMenuCodeNum">
1
2
...
</pre>
</td>
<td class = "AddMenuCodeTd">
<pre class = "AddMenuCodeText">
included file
</pre>
</td>
</tr>
</table>
In order to allow the maximum amount of style, five different classes are named in the structure. In the above example, all 5 were used. But typically, only two or three style classes are needed: AddMenuCodeNum and AddMenuCodeText and sometimes AddMenuCodeTd. The following is the .css file that was used for the above example.
.AddMenuCodeTable {background-color: Brown;}
.AddMenuCodeTr {background-color: LightGreen;}
.AddMenuCodeTd {vertical-align: top;}
.AddMenuCodeNum {
background-color: LightGray;
color: Red;
}
.AddMenuCodeText {
width: 460px;
overflow-x: auto;
color: Blue;
background-color: PaleGoldenRod;
}
Several different colors were used to allow you to see the effect of each. If the color for the row is not specified, the table color will be used. Styles for the table and row are often not needed or desired. The style for the "Td" is not needed unless "width" is specified. In fact, all the style classes can be omitted if styling is not needed.
Note: The width of a table overrides any width specification applied to the body of the file. If the width is not specified, it is not necessary to include a style for ".AddMenuCodeTd" or include "overflow-x: auto;" in the style for ".AddMenuCodeText" because if the width is specified, then the scroll bar is automatically added if any line exceeds the available space). However, if the width is not specified, the table will be as wide as needed (even if it exceeds the page width) and the scrollbar would not be used.
Revised 12/16/2019 14:45.
Questions, suggestions or comments: James Brink