Basic HTML – ASCII HTML Codes

I am always amazed at how often I come back to a table of ASCII HTML codes that I have on my computer. ASCII HTML codes allow you to enter characters into a web page that are not found on you keyboard. The codes can also be very useful for entering characters for other languages, special characters and you can use them just for fun. You can even use many of the these ASCII HTML codes on Twitter so you can send that special some one a ♥ on Valentines Day or their Birthday.

Hope this reference helps you. I usually only use the HTML codes so that is what I have in the table.

Symbol	HTML Number	HTML Name	Description

! “ # $ % & ‘ ( ) * + , – . / ♠ ♣ ♥ ♦	! " # $ % & ' ( ) * + , - . /	" & &spades; &clubs; &hearts; &diams;	space exclamation point double quotes number sign dollar sign percent sign ampersand single quote opening parenthesis closing parenthesis asterisk plus sign comma minus sign – hyphen period slash black spade suit black club suit black heart suit black diamond suit
Symbol	HTML Number	HTML Name	Description

0 1 2 3 4 5 6 7 8 9 : ; < = > ?	0 1 2 3 4 5 6 7 8 9 : ; < = > ?	< >	zero one two three four five six seven eight nine colon semicolon less than sign equal sign greater than sign question mark
Symbol	HTML Number	HTML Name	Description

@ A B C D E F G H I J K L M N O	@ A B C D E F G H I J K L M N O		at symbol
Symbol	HTML Number	HTML Name	Description

P Q R S T U V W X Y Z [ \ ] ^ _	P Q R S T U V W X Y Z [ \ ] ^ _		opening bracket backslash closing bracket caret – circumflex underscore
Symbol	HTML Number	HTML Name	Description

` a b c d e f g h i j k l m n o	` a b c d e f g h i j k l m n o		grave accent
Symbol	HTML Number	HTML Name	Description

p q r s t u v w x y z { \| } ~	p q r s t u v w x y z { \| } ~		opening brace vertical bar closing brace equivalency sign – tilde (not defined in HTML 4 standard)
Symbol	HTML Number	HTML Name	Description

¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯	¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯	¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ ® ¯	non-breaking space inverted exclamation mark cent sign pound sign currency sign yen sign broken vertical bar section sign spacing diaeresis – umlaut copyright sign feminine ordinal indicator left double angle quotes not sign soft hyphen registered trade mark sign spacing macron – overline
Symbol	HTML Number	HTML Name	Description

° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿	° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿	° ± ² ³ ´ µ ¶ · ¸ ¹ º » ¼ ½ ¾ ¿	degree sign plus-or-minus sign superscript two – squared superscript three – cubed acute accent – spacing acute micro sign pilcrow sign – paragraph sign middle dot – Georgian comma spacing cedilla superscript one masculine ordinal indicator right double angle quotes fraction one quarter fraction one half fraction three quarters inverted question mark
Symbol	HTML Number	HTML Name	Description

À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï	À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï	À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï	latin capital letter A with grave latin capital letter A with acute latin capital letter A with circumflex latin capital letter A with tilde latin capital letter A with diaeresis latin capital letter A with ring above latin capital letter AE latin capital letter C with cedilla latin capital letter E with grave latin capital letter E with acute latin capital letter E with circumflex latin capital letter E with diaeresis latin capital letter I with grave latin capital letter I with acute latin capital letter I with circumflex latin capital letter I with diaeresis
Symbol	HTML Number	HTML Name	Description

Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß	Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß	Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß	latin capital letter ETH latin capital letter N with tilde latin capital letter O with grave latin capital letter O with acute latin capital letter O with circumflex latin capital letter O with tilde latin capital letter O with diaeresis multiplication sign latin capital letter O with slash latin capital letter U with grave latin capital letter U with acute latin capital letter U with circumflex latin capital letter U with diaeresis latin capital letter Y with acute latin capital letter THORN latin small letter sharp s – ess-zed
Symbol	HTML Number	HTML Name	Description

à á â ã ä å æ ç è é ê ë ì í î ï	à á â ã ä å æ ç è é ê ë ì í î ï	à á â ã ä å æ ç è é ê ë ì í î ï	latin small letter a with grave latin small letter a with acute latin small letter a with circumflex latin small letter a with tilde latin small letter a with diaeresis latin small letter a with ring above latin small letter ae latin small letter c with cedilla latin small letter e with grave latin small letter e with acute latin small letter e with circumflex latin small letter e with diaeresis latin small letter i with grave latin small letter i with acute latin small letter i with circumflex latin small letter i with diaeresis
Symbol	HTML Number	HTML Name	Description

ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ	ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ	ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ	latin small letter eth latin small letter n with tilde latin small letter o with grave latin small letter o with acute latin small letter o with circumflex latin small letter o with tilde latin small letter o with diaeresis division sign latin small letter o with slash latin small letter u with grave latin small letter u with acute latin small letter u with circumflex latin small letter u with diaeresis latin small letter y with acute latin small letter thorn latin small letter y with diaeresis

Web Forms with Google Docs

I was working on a contact form for a client this last week, and while I have a PHP form processing script that I like to use there are other alternatives to add a contact and other forms to your website if you do not happen to know PHP or you just need a quick form to help collect information for a survey Google Docs Forms.

The form below is a sample form that I created for you to tell me what your favourite websites are. The form took only a few minutes to create and embed into this post using an iframe tag.
Loading…

By submitting the form the data is automatically inserted into a Google Docs Spreadsheet that you can view, edit and of course share with the world if you like. Below is the spreadsheet that the information that the form above is saved into.

This is a very simple example of what you could do with a Google Doc Form and Spreadsheet. It makes it very easy for anyone with a website to add a web form to collect information, run surveys, polls etc with out needing to know PHP, PERL or any other server side scripting. I can see myself using a simple Google Form and Spreadsheet to manage entries from the Subscriber Bonus contests each month.

Basic HTML – Ordered and Unordered Lists

One of the easiest ways to add some organization to your blog posts is to use a list. People like lists and they can help you make your points in a post or on your website clearly and quickly. In HTML there are three types of lists:

Ordered lists.
Unordered lists.
Definition lists.

For this post I will only look at ordered and unordered lists because those are the two most common types of lists. Definiation lists are useful as well and I will talk about them at a latter date.

Ordered Lists

An ordered list shows the list items starting with a number in front. A basic ordered list starts with the <ol> tag and each item in the list starts with the <li> tag. At the end of each list item you should close the <li> tag with a </li> tag and when you are done your ordered list close the list with a closing </ol> tag. A basic ordered list looks like this:
<ol>
<li>Item one.</li>
<li>Item two.</li>
<li>Item three.</li>
</ol>

and it would be rendered like this:

Item one.
Item two.
Item three.

Unordered Lists

An unordered list shows the list items starting with a bullet point in front. A basic unordered list starts with the <ul> tag and each item in the list starts with the <li> tag. At the end of each list item you should close the <li> tag with a </li> tag and when you are done your unordered list close the list with a closing </ul> tag. A basic unordered list looks like this:
<ul>
<li>Item one.</li>
<li>Item two.</li>
<li>Item three.</li>
</ul>

and it would be rendered like this:

Item one.
Item two.
Item three.

That is the basics of ordered and unordered lists in HTML. Lists are very flexible in HTML and can do some amazing things when combined with the correct styles in a cascading style sheet. For example the current main menu at the top of the site is actually an unordered list that is styled to display as a menu. The sidebar items are unordered list items styled without a bullet.

Visual HTML Jokes

I was surfing around a little last night and came across this visual HTML joke of the Leaning Tower of Pisa. I think you have to be a true HTML geek to think it is funny.

That photo reminded me of a couple of photos of a truck that is embedded into the ground at a small restaurant called the Black Top Cafe just south of Blaine Lake. I thought I would add the HTML to the photos and share them here with you. I could not decide which I liked better, the <i> or the <embed>. Which one do you like better?

Here are some other visual HTML joke photos I found on Flickr that gave me a smile.

HTML CANT DO THAT!

HTML vs CSS

<link>

<hr>

small

<strike>

What are your favourite visual HTML joke photos?

Basic HTML – Links

One of the great things about publishing on the Internet is the ability to link to other resources on the Internet. A basic hyperlink in the body of a page is created using the anchor tag and looks like this:

<a href="http://lgr.ca/">LGR Internet Solutions</a>

The href (Hypertext Reference) attribute is the resource on the Internet that you are linking to. The word(s) between the opening anchor tag (<a href="http://lgr.ca/">) and the closing anchor tag (</a>) are the words that will be highlighted as the link. In this case the link would look like this:

LGR Internet Solutions

That is the most basic link that you can create. If you are using WordPress there is a great tutorial on the WordPress website showing you how to create a link. It walks you through the basics of creating links with WordPress in the visual and HTML editor.

Basic HTML – Headings

If you are new to running your own website or blog you might not know a lot of HTML but there is some basic HTML that is easy to learn that will make running and managing your website and blog much easier now and in the future. By using headings in your web pages and blog posts you make it easy to style using cascading style sheets and the document is nicely formated in the event that you move to a new theme or you redesign your website. In the past I have not always used headings on the blog posts here and those are the posts that I am often going back and editing because they are not displaying properly.

How to use headings

The code to define headings in HTML are simple. Below is how headings are displayed here on this blog and the code to define them.

This is a heading one

<h1>This is a heading one</h1>

This is a heading two

<h2>This is a heading two</h2>

This is a heading three

<h3>This is a heading three</h3>

This is a heading four

<h4>This is a heading four</h4>

This is a heading five

<h5>This is a heading five</h5>

This is a heading six

<h6>This is a heading six</h6>

If you are not using the HTML editing mode in WordPress you can still use proper headings. Simply click the Show/Hide Kitchen Sink button and the format button will be shown. Simply select the text you want as a heading and choose the heading type you want.

Considering how well structured most WordPress themes are I am surprised that the bold button is still there on the editor and the headings are hidden in the kitchen sink. If you use something other than WordPress to manage your website, you might have to use the HTML code to insert the proper headings, but most content management systems do have an easy way of adding proper headings into a document. For example here is a screenshot of how to add headings using Joomla.

Adding headings in the Joomla HTML editor

Why use headings?

It is easy to use bold to define sections when you are writing a blog post but by using headings you make the post or page more structured. Headings are best used to introduce sections in a document. Web browsers generally render headings in different sizes making a heading one larger than a heading two and so on. Using proper headings in your blog post can also help boost your search engine rankings. For example a blog post title is probably best displayed as a heading one, with sections inside the blog post starting as a heading two. This gives a well structured document for the search engines to index. The search engines do not have to guess at what is a heading and what is suppose to be just bold text.

It is good practice to use headings. It will make your content easier to move from one content management system to another and it will be easier to redesign the presentation of your content by simply changing your cascading style sheet. I know that I have not always used proper headings here on the LGR Internet Solutions blog, and I am continually going back and editing posts to fix how things are laid out. Better to start from scratch doing things right than spending time fixing things.

DOMtab – Navigation tabs with CSS and DOMscripting

I have been wanting to redo a couple of my own personal websites to make more screen real estate available and make information more available in a compact space. I have seen tabs done of other websites and thought that would make a nice addition to a few of my own websites. I did not want to program my own and thankfully with a little searching I discovered DOMtab. It is an easy and convenient way of adding tabs of information to a website.

If you are looking for a way of making more screen real estate available take a look at DOMtabs. I am in the process of trying it out on one of my websites this week and the installation has been going well. I have not put the new look up yet, but I hope to this weekend if I get some time to finish off the changes.

Just so you know the license does not allow developers to resell the script.

Opening Links

I had a discussion today about how to open external links on a website. The question is, do you open external links in the same browser or do you open them in a new browser window?

I have to admit I hate it when websites open links in new windows. I find it as annoying as websites that resize my web browser or play annoying music in the background of the website. It is not in the best interest of your user to force a link to open in a new window. If you absolutely must open a link in a new window clearly mark the link as opening in a new window so users have some advance warning before they click the link.

Remember that ultimately users are in charge. If they prefer to open links in new windows they have the ability to do so by using either a right click on the link and choosing new window/tab or by clicking the link with their scroll wheel. There are still many users out there that are not using Internet Explorer 7 or Firefox 2 and don’t have tabbed browsing. Don’t force new windows on to your users, or you might not have them as users for long.

I open this up to you now. Should you or should you not open links in new windows?

Don’t Forget to Check That Older Browser

It happened to me again. I updated a site and did not go and check what it looked like in an older version of Internet Explorer on Windows 98. It does not matter how long you have been doing web updates, and how simple the updates are, somethings just do not work properly in some web browsers, which means you have to test in multiple browsers on multiple operating systems. That is one thing that makes web design challenging at times.

One site that can help you check sites and stop mistakes from happening is browsershots. Although, I did not see any options tonight to take screen shots of Internet Explorer, I know I have used it in the past and had Internet Explorer options.

If you regularly need to check what websites look like on multiple operating systems and web browsers and have the money you also might want to take a look at browsercam. They offer subscription plans from one day to one year and offer screen shots on Windows, Mac and Linux machines. I used them once and they are an excellent service.

So a reminder to check your web designs on those other systems, you never know when something that should be simple will break a page.

Nvu – A Tool for Novice and Experienced Webmasters

I suppose I am a little old school when it comes to writing html and css because I prefer to do it by hand. I use a decent programming editor with syntax highlighting and with tag helps, but I prefer to see the code. Not everyone is like me, so for those of you out there that are working on your own websites and are wondering what html editor you should use let me suggest you take a look at Nvu before going out and spending money on an expensive editor like Dreamweaver.

Nvu is available for Windows, Macintosh and Linux, offers an easy to use what you see is what you get (WYSIWYG) interface, has a built in css editor, is open source based on the Mozilla gecko engine and most important it outputs readable code! Nvu is a an excellent choice for those webmasters out there on a budget, or just want to get the job done.

I have also found Nvu an excellent tool to help clean up code from older websites that have unreadable html code. It can be a real time saver when you get a call from a new client that has an older website that just needs a small update done.

Nvu can be a real time saver for experienced webmasters and a great alternative for novice webmasters or webmasters on a budget. When you have time take a look at a great open source project.