1 IT Tips by David KC COLE (1.html)

         as of 2023 E May 24

Note: Some of My Other Programming Tips and Solutions can be found at Web Source 02


Table of Contents


Tip 1. To indent a paragraph in HTML

Eg. Use the blockquote tag, as in the following code:

<blockquote> The paragraph text to be indented goes here. Such a paragraph is sometimes called a `long quote`. This is one of the best ways to indent a long text block. Non-indented text permits the insertion of some text into what appears as the left margin. This might be called `exdenting`. The less efficient `pre` tag could also be used to achieve similar results. </blockquote>
&nbsp;&nbsp;This text (without blockquote tags) will only be indented the width of 2 spaces.
This normal text is not indented at all

Output will be:

The paragraph text to be indented goes here. Such a paragraph is sometimes called a `long quote`. This is one of the best ways to indent a long text block. Non-indented text permits the insertion of text into what appears as the left margin. This might be called `exdenting`. The less efficient `pre` tag could also be used to achieve similar results.
  This text (without blockquote tags) will only be indented the width of 2 spaces.
This normal text is not indented at all

    End of Tip 1 (Go back to TOP)

Tip 2. Full list of HTML Tags

A full list of the HTML tags (with explanations and examples) can be found at
w3schools.com

    End of Tip 2 (Go back to TOP)

Tip 3. Recommended HTML development environment

         thumb Two Screen HTML Development
Two Screen HTML Development
A very good HTML development environment makes use of the following items. The software is all free.

The Ubuntu operating system is relatively virus-free, operates faster than Windoze and supports the use of the Geany text editor. This text editor is designed for programmers and in most cases will automatically insert the trailing tags. Filezilla is used to upload the html files to the server. The Chromium browser (by Google) with Gmail now permits a very useful list of bookmarks. The w3schools.com webpage is one of the most useful support sites for html code. It lists all the html tags and provides explanations and working examples. w3schools also shows which browsers support each tag. It is not recommended to use tags that are not widely supported. Support by each of the following 5 browsers is shown: Chrome (Chromium), IE, Firefox, Safari and Opera. The Globat web site hosting server is one of the least costly. It permits hosting of more than one web page at no additional cost. The Globat Technical Support help desk is immediate and excellent.

A second video monitor definitely saves programming time. A small directory list of the file being editted should be displayed on one monitor. Web page browsing (ie testing of the html routines) and access to w3schools technical information is done on the 2nd monitor.

It should not be necessary to emphasize the importance of regular backups to programmers. Fortunately, the nature of html programming causes copies of the html code to be uploaded to a server, which provides an on-going backup. The code being developed should be coded on the Flash Drive, not on the hard drive. This ensures portability and is operating system independant. Regular backups to a hard drive (and less frequently to an external hard drive) are good practise.

This environment facilitates the testing of html. A series of changes can be tested with 2 operations:

  1. ctrl-S to save the changes.
  2. Double Click on the file to be tested (in the Files directory) to show it in the browser.
The image of the 2 monitors above shows how all the necessary information is available to the programmer.

Testing only needs FileZilla if php routines are used. In fact, repeated testing using a server is not recommended because of web-caching problems. Many people find that coding changes are not visible due to the latency of the web cache, which is only rectified by time. So the best way to test HTML code is to click on the html code file in a local drive directory. This ensures that the most recent version of the html code is sent to the browser. To test a new version of html code on the server, the best way to ensure that the modified code is tested is to rename it (even adding a suffix). Then the browser cache doesn't use an old version (which has the same name). Simply reloading the web page is NOT sufficient. Another way to clear the browser's cache is to close and reopen the browser, use a different browser, or to restart the computer. This works because the web browser cache is live data within the browser.

    End of Tip 3 (Go back to TOP)

Tip 4. Always allow full window viewing of images

It is a courtesy to the users of your web pages to allow them to click on an image to view it in full screen mode. It is very simple to do so. The following code shows how:
Code to NOT permit full screen (really full window) viewing:
<img src="Screen2a.jpg" alt="thumb Two Screen HTML Development" height="200" border=0>
<br>Two Screen HTML Development
Which Produces:
thumb Two Screen HTML Development
Two Screen HTML Development
Preferred code: to permit full screen (really full window) viewing:
<table><tr><td>
<center>(To enlarge .....Click it)</center>
<a href="Screen2a.jpg"
rel="alternate" title="Two Screen HTML Development">

<img src="Screen2a.jpg"
alt="thumb Two Screen HTML Development" height="200" border=0> <br>
<center>Two Screen HTML Development</center> </a>
</td></tr></table>
Which Produces:

(To enlarge .....Click it)
thumb Two Screen HTML Development
Two Screen HTML Development

Note that some users will need to be told to hit the back button (the < in the top left hand corner) to return to the previous page after viewing the full screen image.

    End of Tip 4 (Go back to TOP)

Tip 5. SQL Search: Use LIKE and "%"

MySQL wildcard syntax

SELECT `object` FROM `userData` WHERE `object` LIKE ``Ubuntu%.jpg``
or
SELECT `id`,`object` FROM `userData` WHERE `id` BETWEEN "1" AND "100"
Source:StackOverflow Article

    End of Tip 5 (Go back to TOP)

Tip 6. Address tags including Mail To

<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at: <br>
Example.com <br>
Box 564, Disneyland <br>
USA <br>
</address>

    End of Tip 6 (Go back to TOP)

Tip 7. Colored Text

To display red text, enclose the text in the following tags:

<font color="red">
search phrases - list of SUGGESTED SEARCH PHRASES
</font>

will be displayed as:

search phrases - list of SUGGESTED SEARCH PHRASES

    End of Tip 7 (Go back to TOP)

Tip 8. Left Arrow

To display a left arrow, use "&#8592 " :

"&#8592 " (Go back to TOP.)

will be displayed as:

← (Go back to TOP.)

    End of Tip 8 (Go back to TOP)

Tip 9. Bullets

To display a list of text, each with a bullet, use "<ul>..<li></li></ul>" :

<ul>
<li>bullet line 1</li>
<li>bullet line 2</li>
</ul>

will be displayed as:

A numbered list will be created if the "ul" tag pair is replaced by "ol".

    End of Tip 9 (Go back to TOP)

Tip 10. Display "As Is"

This will display text "as is" (retaining all the spaces and "returns").

When you "cut & paste" columns of data, "returns" and multiple spaces are removed. To retain the text "as is", enclose it in <pre> and </pre> tags.

The following table is a good example
		Number   Spelled
		1        one
		2	 two
		3	 three
If "cut " from a normal text document (or web page) and "pasted" into an html source document (without using the <pre> and </pre> tags), it will be displayed on the web as shown below:

Number Spelled 1 one 2 two 3 three


The same table (as it will appear in the html source page, using the <pre> and </pre> tags) is:

<pre> 
		Number   Spelled
		1        one
		2	 two
		3	 three
</pre>

On the final web page, it will appear unchanged as shown below

		Number   Spelled
		1        one
		2	 two
		3	 three
It should be noted that, anywhere in the text within the <pre> and </pre> tags:
-any html tags (text enclosed within " < " and " > ") will still function as html tags
-any html entities (text enclosed within " & " and " ; ") will still function as html entities
-any single " < " in the text will cause no further text to be displayed on the web page
The solution is to replace each " < " by "&lt;" between the <pre> tags in the html source

    End of Tip 10 (Go back to TOP)

Tip 11. Insert Multiple Spaces

Any number of spaces can be inserted in an HTML source file using the entities: &nbsp; and &emsp; .

    End of Tip 11 (Go back to TOP)

Tip 12. Keep Line Feeds with a Font Change in HTML

         This is another use of the < pre > and < /pre > tags.
		There are many times when a block of text should keep its Line Feeds.  
		An example is this group of text that you are reading.  
		It might be a selected block of text, such as a quote, 
		Or even a snippet of programming code such as

		if (isExample) :
		    print("Hello World")
		#if end

		These lines of text can include some other tags
		(All of the above were copied and pasted including CR, LFs.)
The above appeared in html code as follows:
< pre >
There are many times when a block of text should keep its Line Feeds.
An example is this group of text that you are reading.
It might be a selected block of text, such as a quote,
Or even a snippet of programming code such as

if (isExample) :
        print("Hello World")
#if end

These lines of text can include <b>some</b> other tags
(All of the above were copied and pasted including CR, LFs.)
< /pre >

    End of Tip 12 (Go back to TOP)

Tip 13. More html Entitities

—       &mdash;
•       &bull;
·       &middot;
Œ       &OElig;
œ       &oelig;
°       &deg;
£       &pound;
€       &euro;
©       &copy;
¦       &brvbar;
²       &sup2;
µ       &micro;
é       &eacute;
÷       &divide;
π       &pi;
∞       &infin;
◊       &loz;
| |       &emsp;
| |       &ensp;
| |       &thinsp;
|±|       &plusmn;
|¶|       &para;
|Æ|       &AElig;
|æ|       &aelig;
|×|       &times;
|™|       &trade;
|ſ|      &#383; "long s without any -"
|ẜ|      &#7836; "long s but with diag-"
    There is no known html entity for the true "long s" (search iGalri.com for "long s"

    End of Tip 13 (Go back to TOP)

Tip 14. Embed Two Equal Columns

1. Create col2.html containing the 2 columns of data.
2. Optionally insert a single header over the 2 columns of data.
3. Embed the col2.html as shown below.

Before<embed type="text/html" src="col2.html" width="500" height="200">After<br>
BeforeAfter

    End of Tip 14 (Go back to TOP)

Tip 15. Use "c", the common image IX repository

When an image is referenced by mulitple articles, it can be stored in a folder common to all articles. The image can then be accessed by any article using the code below. An example of such use is in Article 184.

Beware when testing this code.
I was surprised to discover that the image to be displayed from the "c" folder did not appear on the web page during testing. However, when the webpage being tested was displayed by my main ePhotoCaption menu page, it worked fine. I concluded that I had caused a "glitch" by the way that I had invoked the test webpage. I had invoked it by editing the URL in my Chrome browser. Say that the web page begin tested was 203.html. I had viewed web page 202.html and then edited the "202/202.html" to become "203/203.html" and hit enter. By doing this, I had effective removed the "ephotocaption.com/" from the "current URL". This caused the "current URL" to be loaded to be "" instead of "ephotocaption.html/". Then the "http:/c/PiPico.jpg" was seen to be only "c/PiPico.jpg" which Chrome could not find. Doh! 

			(To enlarge .....Click it)
<a href="http:/c/PiPico.jpg" title="http:/c/PiPico.jpg">
<br>
<img src="http:/c/PiPico.jpg"
alt="thumb: http:/c/PiPico.jpg" height ="100" border=0><br>
Pi Pico </a><br>	<br>

    End of Tip 15 (Go back to TOP)

Tip 16. How to type Æ or æ

Using a laptop with a number pad that is in "numbers" mode:
For Æ , type Alt-0198 (without the "-")
For æ , type Alt-0230 (without the "-")

    End of Tip 16 (Go back to TOP)

Tip 17. Next Tip

tba

    End of Tip 17 (Go back to TOP)

---------------------------------------------------------------------------------------------

A full list of the HTML tags (with explanations and examples) can be found at Web Source 01 below.
More (non-html) Software Problems (with solutions) can be found at Web Source 02 below.

Web Sources

Web Source S001:01: some Useful HTMLentities by W3Schools.com
Web Source S001:02: IT: Software Problems and Solutions (150) by David KC COLE on 2021BFeb 24
Web Source S001:03: Full list of HTML entities by github on 2023 E May 23


    ← (Go back to TOP.)

Return to ePC Articles

WebMaster: David@ColeCanada.com

There is a way to "google" any of the part-numbers, words and phrases in all my articles. This "google" search limits itself ONLY to my articles. Just go to the top of "ePC Articles by Old King Cole" and look for the "search" input box named "freefind".

Created: 2015 F Jul 04
Updated: 2023 F Jun 14

/1.html