HTML Entities\Special Characters

What are Special Characters?

The characters, other than the alphabets, numbers and common symbols, like © (copy right), ™ (trade mark), € (euro sign), ® (registered), ≥ (greater than), Ω (omega), α (alpha), and β (beta) are known as special characters.

We often need to put some of these special characters in our ordinary documents and especially in mathematics documents.
The bad news here is that you cannot insert these special characters in your document directly like alphabets and numbers. You need to put code to insert these characters in our document. These characters can be very useful for your webpages. If, for example, your website contains mathematical data or you want to show copy right or trademark symbols on your website then you need to learn how to insert these characters. A brief description on this is given below:

Special Characters in HTML

Even in ordinary documents we cannot put special characters directly using keyboard instead we’ve to do something else to enter such special character like to insert a symbol we insert it from the Symbols in MS Word 2010 or in Open Office. Same thing apply here for HTML documents in order to insert special character in your webpages. Unlike word processors you need to provide some special codes to enter these characters. The detailed table is given here below in which a code is given against each symbol.

Symbol	HTML Entity	Name
&	&	Ampersand
¢	¢	Cent
©	©	Copyright
÷	÷	Divide
<	&lt;	Less than
>	&gt;	Greater than
µ	&micro;	Micron
·	&middot	Middle dot
¶	&para;	Pilcrow (paragraph sign)
±	&plusmn;	Plus/Minus
€	&euro;	Euro
£	&pound;	British Pound Sterling
®	&reg;	Registered
§	&sect;	Section
™	&trade;	Trade Mark
¥	&yen;	Japnese Yen

Structure of a Webpage

No Need to Purchase Any Extra Software to Create a Webpage!

To produce or create anything in this world we first need to understand the thing itself and its structure. Understanding the structure of an object we can not only create it but also improve it. A webpage is a hypertext document and like every other thing a webpage also has a structure and consists of different parts such head and body. Each of these parts of the webpage is explained in the following paragraphs:

Document Type

A webpage can be written in any of the available versions of HTML. That's why, first of all the type (version) of the webpage is checked whenever a webpage is rendered in a web browser. Then the webpage is displayed according to the type of the HTML. To specify the type of the webpage we use the <!DOCTYPE> tag. This is the very first tag in a webpage. It tells a browser what version of HTML should be used to render the webpage. We can use any version of the HTML or XHTML (it depends upon available technology in a particular region). Different versions and there <!DOCTYPE> is given in the following table:

Version	Doctype
HTML 5	<!DOCTYPE html>
HTML 4.01	<!DOCTYPE HTML PUBLIC "-//W3C//DRD HTML 4.01//EN" "http:// www.w3.org/TR/html4/strict/dtd"&gt
XHTML 1.0	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"&gt
XHTML 1.1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Frameset//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt

Page Declaration <html></html>

If you wanna write, sketch or draw something you need to have a page whether it would be a hard page (a page having physical existence like a printed page) or soft page (a page white blank working area shown in word processors as a page). Same thing implements here in web development. You need to declare a (logical) page where you'll display your text and objects on it. To declare a (logical) page we use <html></html> tags. This is the second starting tag of our webpage and ends in the end. All other tags are put in between <html></html> tags. This page can further be divided in different sections and blocks i.e. head and body.

Head <head></head>

Now we have declared a page for displaying our data on a web browser. The next step is to divide this page in different portions to put our data for the user and for the server and Search Engine. All the tags and data (like version of HTML, title of the webpage, language, author etc) in head element is used either by the server, search engine or web browser. Nothing is pur here for user in this element.

Title <title></title>

When we are developing a website, it is possible that the site may consist of tens, hundreds or even thousands of webpages. It is necessary to entitle each and every webpage with a suitable title to distinguish it from the others (This is helpful for the Search Engines. You'll learn about it later in this tutorial). That's why, HTML provides us a tag to entitle a webpage. This title is shown on the title bar (in old web browsers) or on the tab (in advanced web browsers) of the web browser. This tag is put in between the <title></title> tags.

Body <body></body>

After Head the Body is the second portion of our webpage. All the elements mentioned above are very important for the servers, search engines and web browsers but are not displayed in a browser window for the users except the title tag. But data in between <body></body> tags is the actual data which is displayed in browser window for the users (if not hidden deliberately) i.e headings, text, tables, lists, images, etc.

Example of a Webpage:

Follow the following steps to check the example for better understanding.

1. Copy the following code.
2. Open Notepad.
3. Paste the code in Notepad. (Open the Edit menu --> Paste)
4. Save the file with .html extension. (Open File menu --> Save As --> Name the file as "Example.html" including double quotes)
5. Open the file in any web browser and Match the result in the given picture.

Exemplary Code:

<html>
  <head>
     <title> Exemplary Title</title>
  </head>

  <body>
    <b>This is the body of the webpage!</b></br>
    <b>Every thing, in this portion of the webpage, will be displayed in the browsers window</b>
  </body>
</html> 
                

Example Result:

This is the body of the webpage! Every thing, in this portion of the webpage, will be displayed in the browsers window

What Software Is Required to Create a Webpage

No Need to Purchase Any Extra Software to Create a Webpage!

The good news is that if you want to create your own hand-written webpages you need not to purchase any extra software to start your journey of the wonderful world of web development. The creators of HTML had worked hard for us in such a brilliant way that we can even use a simplest word processor i.e. note pad (for windows) to develop a webpage without facing any serious hurdle.

Software You Can Use to Create a Webpage

Two types of software can be used to develop a webpage which are explained here below:

Specially Designed Software:

You can create a webpage using specially designed software for web development i.e. Dream Viewer or any other. These type of software provide tow interfaces; HTML Interface, for HTML code writing or/and editing, and a Design Interface to provide the facility of creating a webpage without writing any code.

In the Design interface you need not to enter HTML tags and lengthy pieces of code to perform various tasks in your webpage such as formatting text and paragraphs, inserting tables, lists, form’s elements and other elements. All these tasks are done just by clicking on icons, selecting commands from menus and setting and providing some values like you do in advance word processors while working on your official or personal documents. These software also provide the facility of managing folders containing your webpages, images and sub-folders quite easily. Another facility provided by these software is auto word completion/suggestion for the words which are reserved by the language developers for the HTML language or reserved by the web developer who is creating webpages using HTML. Auto word completion/suggestion means when you type a few letters of these reserve words you are shown a list of words next to the ending letter of the word and you can select the appropriate word from that list instead of typing the complete word.
The HTML Interface, of such software, provides you an access to HTML code which is generated automatically at the back-end of the software while working on the fronted (in Design Interface). This interface is helpful when you want to gain more control for designing and securing your website or solve a problem which is not possible to solve by working with Design Interface. In my opinion, this is very useful tool. One important thing about such software which should be remembered is: "More ease causes less control/security i.e. in Design Interface, while less ease causes more control/security i.e. in HTML Interface".

Simple Word Processor

Using a simple word processor, like note pad, you have to write and manage the HTML code of your webpage yourself as the word processor will not do this job for you unlike in Dreamweaver's Design Interface (if you did not understand at this moment, keep reading, you’ll understand at the end of this heading). By writing HTML code and managing the folders containing your webpages and images yourself, you gain less ease but much control/security. Some word processors like Notepad ++ (a freeware software) are user friendly and provides you some facilities such as to show the code in different colors and inserting the line numbers on the start of each line to help the web developers and someone else who want to read and understand that code.

Beginners Should not Use Specially Designed Software for Web Development

If you want to become a top quality webmaster, I would recommend you not to use software like Dream viewer at beginning level. The reason is that when you use such a software you don’t write the code yourself, as a result you don’t get familiar of HTML syntax—the rules of any computer language which describes the way of writing statements to tell the computer what to do -- and coding style, you are not habitual of time consuming process of understanding and writing code. This could put you in trouble while you are working on a project and unfortunately you’ve faced a problem which is not getting solved with the Design Interface of your software and the only way to solve the problem is to use HTML Interface to overcome this problem. Working with the Design Interface of these software you could not solve it as you are not familiar of the HTML syntax, coding style and understanding code. But feel free to use Design Interface of such software when you’ve full control over HTML syntax and coding.

Use Simple Word Processor for Web Development

It is good for the beginners to use word processors or HTML Interface of such software to write code of a webpage. In this way you have to write the code yourself and you’ll get aware of what and how you are doing on your webpage. You'll learn HTML syntax, coding style, and understanding of code which will be useful in future. Notepad can also be used but you can download Notepad++ and install it on your computer.
After installation of Notepad++ you are ready to create your own webpage. Proceed to the next topics to understand the structure of a webpage and then start your coding properly to create a webpage!