HTML Coding Solutions

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.

Creating an html File

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

Rendering Files Offline

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.

Writing Code to be Displayed as Text

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: &lt;
and all the '>' characters with: &gt;

and you can display '&lt;' code as text by writing it like this: &amp;lt; in your code.

Embedding Files

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.

Source html Files (to be embedded)

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>

Main (receiving) html File

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

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.

css File

We added the following code to our css file that called up the above-mentioned image:

.foot{background-image:url('/images/Blank.png');}

Our Other Coding Pages:

.css; .js; .htacces; SEO