When creating and maintaining this website, we occasionally come across coding information that is either confusing or difficult to find from internet sources.
Whilst we do not profess to be coding experts, we have worked out some solutions you may find helpful.
This page includes some of these solutions for 'cascading style sheet' codes.
html files are text files, plain and simple.
You simply create the file in Notepad and save it as a text file (using the UTF-8 formal option) and then change the extension from .txt to .html
The only two things that distinguishes it from other text files are:
Its file extension (.html)
and
Its content is in html code
You normally precede a file-path with a "/" to signify the root folder, e.g.; "/Resource/styles.css" or "/Resource/javafile.js"
which works online if the file's full address is "https://www.yoursite.com/wwwroot/Resource/styles.css" or "https://www.yoursite.com/wwwroot/Resource/javafile.js"
because the server recognises 'wwwroot' as your parent folder, which is automatically called if you precede the file-path with a single '/'
But on your computer, the parent (or root) folder is probably 'C:'
So, if you try to open an html using a browser on your computer with the same path-file(s), your address(es) will be wrong and your browser will not be able to find your style or java files.
So, should alter your css and js file-paths in your html file to ensure that it can find them on your computer.
But don't forget to put the file-paths back again before uploading the html file to your website server.
To summarise;
If you are having trouble displaying styles and/or javascript offline, check your file-paths.
The principal difference between html code and text is the presence of '<' and '>' symbols.
Everything you write in between these symbols '<' and '>' is treated as code, and everything you write between '>' and '<' is treated as text to be displayed.
You cannot simply write '<' and '>' and expect them to appear as text (in html code).
If you want to display some code as text, you simply replace
all the '<' characters in your code with: <
and all the '>' characters with: >
and you can display '<' code as text by writing it like this: &lt; in your code.
Embedding creates a page within a page. If you embed a body of code with links in an 'html' page, all the activity associated with that code will appear inside, and be limited to, that embedded region.
For example, if you open a page using one of these [embedded ] links, that page will open inside the embedded region.
The two embedding methods are <embed></embed> and <iframe></iframe>
The only difference between the two is:
<embed></embed> will not change the appearance of the page. You cannot define the boundaries of the embedded body except by the obligatory white-space it generates (see White-Space below).
<iframe></iframe> puts a border around the element. But the obligatory white-space is still generated (see White-Space below).
If you want to embed some common html code into another of your web-pages, for example a footer;
First you create a stand-alone source (or secondary) html document with the text you want to embed,
not forgetting to add all references to any css-files in this embedded code see # below.
When creating a source html file with text, code and/or images that are to be embedded in another html file, if you wish to include formatting in the code, you must include the appropriate references to the css and/or js files.
However, you don't need all of the 'meta' and 'tag' coding in the html's header.
As an example, we have shown (below) CalQlata's footer code as a source html file, in which we have called the css 'foot' style that eliminates the 'white-space' (see below):
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<meta name="author" content="CalQlata"/>
<meta http-equiv="content-language" content="en-gb"/>
<link href="/Resource/mainstyles.css" rel="stylesheet" type="text/css"/> #
</head>
(note: below is the code that will be transferred to the main html page)
<body class="foot">
<div id="footerpage">
<table class="rowc">
<tr>
<td>Copyright ©2011-2020 CalQlata™</td>
<td><a href="/sitemap.html" class="light">site map</a></td>
<td><a href='/search.asp'>Calculator Search</a></td>
<td><a href='/about.html'>about us</a></td>
<td><a href='/acknowledgements.html'>Acknowledgements</a></td>
</tr>
<tr>
<td>Terms & Conditions:</td>
<td><a href='/terms-of-website-use.html'>Website Use</a></td>
<td><a href='/license-agreement.html'>License Agreement</a></td>
<td><a href='/privacy-policy.html'>Privacy Policy</a></td>
<td><a href='/contact.asp' class="menulink">Contact Us</a></td>
</tr>
</table>
</div>
</body>
(note: above is the code that will be transferred to the main html page)
</html>
We added the following code to our main web-page into which we wanted the embedded code to appear:
<embed src="/Resource/source.html" width="100%" height="105px"></embed>
You can size the width and height attributes in percentages (%) or pixels (px) as you wish, and the source html file can be located anywhere in your website, as long as you include the path in the filename.
White-space is not 'white-space'. It is a transparent region that emulates the Window background. You will see in this 'white-space' the pattern/design displayed by the Window behind your page.
The problem is that this 'white-space' is rarely wanted. And none of the solutions we found on the internet worked for us, but we did work-out a solution you might like to try:
We created a plain blank white image (it can be any size or colour you wish) and called it up in the source 'html' page via the css file (see below).
The reason that the image can be any size you wish is because the html code repeats the image.
We added the following code to our css file that called up the above-mentioned image:
.foot{background-image:url('/images/Blank.png');}
The following code enables you to embed a '.pdf' file inside an html webpage (e.g. The Liberty Belt on this website):
<iframe src="FileName.pdf" width="XX" height="YY">
<p>This browser does not support PDFs. Please download the PDF to view it: Download PDF</p>
</iframe>
Where;
FileName: is the name of the '.pdf' file you wish to display
width="XX: is the width of the display screen
YY: is the Height of the display screen
width="XX and YY can be defined in terms of percentage of page width (e.g. "80%") or pixels (e.g. "350px").
The following code enables you to embed a '.mp4' file inside an html webpage (e.g. a short lecture on physics on this website):
<video width="XX" height="YY" controls>
<source src="FileName.mp4" type="video/mp4">
<p>Your browser doesn’t support HTML5 video.</p>
</video>
Where;
FileName: is the name of the '.mp4' file you wish to display
XX: is the width of the display screen
YY: is the Height of the display screen
XX and YY can be defined in terms of percentage of page width (e.g. "80%") or pixels (e.g. "350px").
You can carry out special operations, such as insert an online calculator, within an html web page by using a form. You simply include the following in the Body of your web page (the form's name is "calq"):
<body>
<form style="border-style: double; padding: 0px 20px 20px 20px; background-color: #FFFFFF; color: black; font-size: 12pt;" name="calq">
//do your special operation in here
</form>
</body>
Despite all the JavaScript and php recommendations issued by the world's computer geeks, it is easy to calculate in html without resorting to such complications.
We have provided some code (below) that calculates data from a text-box and a drop-down list, inserts the selected drop-down value in a text-box, calculates two answers using this data and puts them in other text-boxes.
The colour-coding is provided to show you where the relevant data is taken from and/or displayed.
Create a form into which you put your text-boxes and drop-down lists:
<form name="input" >
π: <input type="text" name="pi" value="3.14159265358979" />
Radii:
<select name="radii" id="radii" onchange="input.radius.value=(radii.options[radii.selectedIndex].value)">
<option value="1">Rad-1</option>
<option value="2" selected>Rad-2</option> {"selected" means that this name (Rad-2) will appear in the list-box on start-up}
<option value="5">Rad-3</option>
<option value="9.5">Rad-4</option>
<option value="23">Rad-5</option>
<option value="6.8">Rad-6</option>
</select>
Radius: R = <input type="text" name="radius" value="" /> {when you select an item from the above drop-down list, it will appear in this box}
</form>
Create a button to calculate: {you can add as many calculations as you like in here, just add each new calc as a new line in place of {etc.}}
<input type="button" value="Click to Calculate" onClick=";
output.circ.value=2*input.pi.value*input.radius.value;
output.area.value=input.pi.value*Math.pow(2*input.radius.value,2);
{etc.};
" />
Optional: Create another form to display your results: {this is optional because you do not need to create a new form for your calculation results if you don't want to}
<form name="output" >
Circumference: <input type="text" name="circ" value="" />
Area: <input type="text" name="area" value="" />
</form>
Whilst the numerous mathetical functions available for html code work well with the 'formname.inputname.value' method of specifying a numerical value, the 'plus' (+) function can produce problems. But this can be overcome as follows:
formname.inputname0.value=Number(formname.inputname1.value)+Number(formname.inputname2.value).
You can alter the appearance of your buttons, drop-down lists and text-boxes by adding more information such as:
<input style="border-style: none; background-color: #FFDCDC; color: red; font-size: 16pt" type="text" name="pi" value="3.14159265358979" />
You can create a special button using the input function. For example:
<input class="pushbutt" type="button" value=" Calculate " onClick=";
//do something in here (as a result of clicking the button)
"/>;
The appearance and movement of the button is designed in your css file (e.g. "styles.css")
we have provided an example button style below:
.pushbutt {
background-color: #00afff;
border-top-width: 1px;
border-left-width: 1px;
border-bottom-width: 2px;
border-right-width: 2px;
border-top-color:#A8D8FF;
border-left-color:#A8D8FF;
border-bottom-color:#2EA1FF;
border-right-color:#2EA1FF;
border-radius: 6px;
padding: 0;
color: white;
cursor: pointer;
font-size: 16pt;
outline-offset: 4px;
box-shadow: 5px 3px 5px #888888;
}
.pushbutt:active {
transform: translateY(1px);
}
We use this button style in our own online calculators.
If you want to put a button somewhere on your page, you can simply add the following code;
<div id=iconbuttons>
<a href='00001-QandA.html'><img src="/images/QandA.png" alt="go to the QandA page" title="go to the
Q&A"/></a>
</div>
in which the shape and colour of the button (<img src="/images/QandA.png") is a a simple .png image, and
the link is defined thus; <a href='00001-QandA.html'>
You may occasionally find that some web browsers do not respond to the "windows.location.reload()" function.
This is easily corrected by simply adding the 'true' statement, thus: "windows.location.reload(true)"