HTML

Introduction

The web is the most popular feature of the Internet and HTML is the backbone of the web. Everything that we see on the web is used with HTML. With out HTML, JavaScipt, CGI, PHP, all other fancy technologies would cease to function. Yet, HTML is so easy to learn and use.

Eventhough there are a million HTML editors out there, you still should learn HTML because it will pay off handsomely when you move on.

Before we begin, I just want to say that HTML is not difficult. If you do not know anything about computers besides how to get on and off the Internet, do not panic. I will guide you through each step in detail.

You Can Do This!

Let's begin

I am assuming at the beginning of this tutorial that you know nothing about HTML or have any computer knowledge. To continue with these Lessons, you will need...

1. A computer (doesn't have to be your own computer, you can use your campus' computer)

2. A browser like FireFox or Opera, If you're looking at this page, you obviously have one. It is always recommended to upgrade to the latest version of the browser. Why not? Its free anyway.

3. A word processor. If you have access to Window's "Notepad" or "WordPad" program, you can get started.

If you have those three things, you can write HTML with the best of them.

What is HTML?

HTML are initials that stand for HyperText Mark-up Language. Let me break it down for you:

Hyper is the opposite of linear. It used to be that computer programs had to move in a linear fashion. HTML does not hold to that pattern and allows the person viewing the World Wide Web page to go anywhere, anytime they want.
text needs no explanation
Mark-up is what you will do. You will write in plain English and then mark-up what you wrote.
Language is simple enough too.

The Word Processor

When writing HTML code, you should choose an editor which has very few or no fonts. These fonts could interfere with your code. If you have windows 95/98/NT, click on start -- programs -- accessories -- notepad. Then just begin writing the code. When you write to the word processor you will need to follow a few steps:

1. Type the HTML code.

2. When you go to save the document , ALWAYS choose SAVE AS.

3. When the SAVE AS box pops up, you will need to save the page in a specific format. Look at the SAVE AS dialogue box when it pops up, there will be somewhere, usually at the bottom, where you will be able to change the file format.

4. Save your file with a ".html" extension.

You see, when you save your document in WORD, or some other word processor format, other than text, you are saving much more than just the letters on the page. You're saving the margin settings, the tab settings, specific fonts, and a whole lot of other setting the page needs to be displayed correctly. You don't want all of that. You just want the text.

NotePad, WordPad, and SimpleText already save in text-only format so if you use one of them as your word processor, you'll get the correct format simply by saving your document.

Opening the Document in the Browser

Once you have your HTML document on your flash stick or hard drive, you'll need to open it up in the browser. It's easy enough. Since you're using a browser to look at this lesson, follow along.

1. Under the FILE Menu at the very top left of this screen, you'll find OPEN, or OPEN FILE, OPEN DOCUMENT or words to that effect.

2. Click on it. Some browsers give you the dialogue box that allows you to find your document right away. Internet Explorer, and later versions of Netscape Navigator, require you to click on a BROWSE button or OPEN FILE button to get the dialogue box. When the dialogue box opens up, switch to the A:\ drive and open your document. If you saved the file to your hard drive, get it from there.

3. You might have to then click an OK button. The browser will do the rest.

Text Formatting

Formatting text involves many different things, so there are many different tags. None of the tags in HTML are case sensitive so you should not worry whether the tag is in capital letters or not. Below is a list of tags, their syntax, and description:

<P>

This tag is for paragraph. Whenever you are starting a new paragraph, start the paragraph with this tag. It will leave one line blank so as to indicate that the following is a new paragraph. <P> tag does not require a </P> tag.

<br>

This tag is used whenever you want to leave a line blank. Wait a minute, doesn't the <P> tag do just that? Yes and No. Yes, it leaves a blank line. Now suppose you want to leave two lines blank. The logical thing to do would be to type <P> twice or <br> twice or each exactly once. <P><br> or <br><P> will give you two blank lines, <br><br> would give you two blank lines, but <P><P> will give you only one line. The reason being that two paragraphs do not need to have more than a blank line in between them. So, now you can rest assured that <br> has its purpose and use. There is no </br> tag so it is not used.

<hr>

This tag is used to draw a horizontal line like the one below the heading of this page. It also does not require an ending tag </hr>.

<center>

This tag does exactly what is says, it centers. It centers text, images, tables, frames, lists and a lot more. The syntax is as follows:

<center> This text shall be centered </center>

Can I use <font> tag with it? Yes definitely! Now observe:

<font color="#123456" size=+2><center><b> Donkey </b></center></font>

is equivalent to

<center><b><font color="#123456" size=+2> Donkey </font></b></center>

which is also the same as

<b><center><font color="#123456"><font size=+2> Donkey </font></font></center></b>

As you can see there are many ways of doing the same thing. You can also get the same result with a different combination. Try it! Remember, web design is all about creativity. The tools are easy and user friendly so that anyone can use them.The only thing that will make your web page stand out is creativity.

<div>

This is another important tag. You will come across this tag in the a few other lessons. For now let's see how we can use this with text. This tag lets you align to the right and left. Here is the syntax:

<div align="right">This text will appear on the right </div>

<div align="left"> This text will appear on the left </div>

Below is what you will see on the page:

This text will appear on the right

This text will appear on the left

<div> is rarely used for centering because it is more convenient to use <center>. You can use the align attribute inside <body>, <p> and many more which we will cover in the later lessons. The syntax is the same for all of them.

<p align="right">This paragraph should be on the right </p>

<p align="left"> This is the default </p>

You might be wondering why I used </p>. It is not used, but when you used align attribute with <p>, you have to specify where the <p> (the paragraph) ends.

Font tags:

All of the following tags have the same syntax are all are involved in changing fonts. The following is the syntax. I did not include a description because it is self evident.

<b> bold </b>

<i> Italics </i>

<tt> Typewriter Text </tt>

<blink> blinking text </blink>

<sup> superscript </sup>

_{<sub> subscript </subscript>}

<strike> ~~strikethrough~~ </strike>

<nobr> nonbreaking </nobr>

<u> underline </u>

Note: <blink> tag does not work in Internet Explorer. It might not work on the newer versions of netscape.

Reference Table

You do not have to memorize all these tags. I myself do not remember all these tags. I however constantly have to go back and look at the tags and their description. I suggest that you do the same. To make it easy to go back and refer, I have included this reference table.

Item	Syntax	What it does
<b>	<b> bold </b>	make the text bold
<i>	<i> italics </i>	italicizes the text within
<TT>	<tt> Typewriter Text </tt>	`Typewriter Text`
<blink>	<blink> blinking text </blink>	blinking text
<sup>	<sup> superscript </sup>	^superscript
<sub>	<sub> subscript </sub>	_subscript
<strike>	<strike> strikethrough </strike>	~~strikethrough~~
<nobr>	<nobr> nonbreaking </nobr>	nonbreaking
<u>	<u> underline </u>	underline
<p>	<p> or <p align="right"> </p>	start a paragraph
<br>	<br>	leaves one line blank
<hr>	<hr>	make a horzontal line
<center>	<center></center>	center the text
<align>	<align="left"> </align>	aligns the text according to the attribute

Image

Internet is full of graphics and pictures. You will also want to add pictures to your website. In this lesson, you will learn how to add pictures and graphics to your webpages and how to do different things with them.

Image Formats:

There are many image formats but only three are commonly used on the web. These three are bmp, jpg, and gif. Most pictures or graphics that you post on your page would have one of these three in it. Now let me give you the syntax before you get confused.

<img src="xyz.gif">

To post an image you have to use the <img> tag. <img> tag is never used alone and there is no </img> tag. It is always used with an attribute. Src stands for source (source of the image). Inside the quotation marks, you have to input the source (or location) of the image file. In this case, the image file is in the same directory as this html file, so I just type the name of the file. If the file is in a subdirectory, then you have to type the name of the subdirectory / name of the file. If you do not understand the previous sentence, follow the example below:

Suppose you saved your files in a directory by the name of main directory and the image is in a subdirectory by the name of images then you should do the following:

<img src="images/xyz.gif">

If the images are in a very remote directory, then you would have to type the entire address into into the source field. Your computer probably has hundreds of pictures and images which you do not know about. Let me show you how to find them. If you have windows 95/98/NT/2000, go to start--find--my computer. Now type *.jpg and click on find. You will see a bunch of files accumultating below. Retry this with *.gif and *.bmp. To view these images, just doubleclick on them. You can post them on your web page.

Now suppose you come across a really nice picture or a very neat graphic on the someone else's site and you want to post it on your website. If you have Netscape or Internet Explorer, take you mouse pointer over the image and click the right button on your mouse. I will refer to this maneuver as right clicking on the image. When you right click on it, you will see a list appear on the window. One of them should be Save image as. Try it on the image above. Click on this menu and it will open a window. In the window you can specify the name of the file and where you want to save it on your computer. You can leave this image on the computer, set it up as a wallpaper or use it on your website. This neat little trick is a copyright nightmare. An image that a person places on his/her website is his/her property. No one can legally take it without permission. Luckily most things on the web are free and anyone can take them.

Pictures align to the left of the page by default. Suppose you want it to be on the right or center side of the page. Well, you can use align and center.

<img align="right" src="images/logo.jpg">

<center> <img src="images/logo.jpg"> </center>

<img scr="images/logo.jpg">

So far all you have seen are either text or image, one at a time. If text occupies a line, image couldn't vice versa. Suppose you want to have both at on the same line and want to align it the just the right way. Here is how you do it.

<img align="top" src="images/logo.jpg"> This text is on the top right side of the picture.

<img align="middle" src="images/logo.jpg"> This text is on the middle right side of the picture.

<img align="bottom" src="images/logo.jpg"> This text is on the bottom right side of the picture.

This text is on the top right side of the picture.

This text is at the middle right side of the picture.

This text is on the bottom right side of the picture.

I am using what we learned in this lesson. Let's see if you can figure out how I did these.

Text, text
and more text

Text here and finally

Did you know that you can also change sizes of your images and can show only a chosen piece of a picture. On the web if you make post a reduced-size image or show a piece of an image, it is called a thumbnail. Thumbnailing is a very useful tool. You might have noticed that while surfing the net, if you ever come across a website with lots of nice graphics and pictures, it takes forever to download. The reason is that images require a lot of memory and therefore take more time to download. Usually the first thing to appear on your screen is text. Now if you reduce the size of your image, or show only a piece of it, you are reducing the amount of memory it requires and also the amount of time to download. Remember, if your site takes too long to download, most people will just move on to a different site. Waiting is the most undesirable part of websurfing. Now let me show you how to change sizes of your images. Here is the syntax:

<img src="images/logo.jpg" height=200 width=100>

<img src="images/logo.jpg" height=100 width=200>

<img src="images/logo.jpg" height=200 width=200>

You can put in any positive value for width and height. No negative value are allowed. Why? Because a physical object can not have a negative size, which means that its image can not have a negative size. What if someone decides to defy the laws of physics and put in a negative value anyway? Try it and find out! It will be a good learning experience. You can see below what the code above did the the picture.

As you can see changing sizes can make the picture look very different. I specifically chose this picture to magnify the difference. In most pictures you would not see that much of a difference.

Image take a lot a memory, but suppose you want to make a website which would offer all kinds of pictures and graphics for free or for a charge. In this situation you still have some hope. The following are some simple techniques that you can apply.

Spread the images over a lot of pages
Minimize the images considerably to display them on one page and link them to the real picture
Post a piece of the each image and then link it to the real image.

Tables

Tables are used in almost every commercial web site and most of the time you would not know that there are table in the page until you see the html source. Table are so universally applicable and very useful. I measure a web designer's command over HTML with his usage of table.

Look at the table below and its HTML code on the right:

**Table1**
row # 1, column # 1	row # 1, column # 2
row # 2, column # 1	row # 2, column # 2

**Table2**
row # 1, column # 1	row # 1, column # 2
row # 2, column # 1	row # 2, column # 2

<table background="backMain.jpg">

<caption> Table1 </caption>

   <tr>

      <td> row # 1, column # 1 </td>

      <td> row # 1, column # 2 </td>

   </tr>

   <tr>

      <td> row # 2, column # 2 </td>

      <td> row # 2, column # 2 </td>

   </tr>

</table>

Every table starts with a <table> and ends with a </table>. Do you notice a familiar attribute inside <table>? In the previous lesson, you saw how an image can be placed in the background. The same syntax applies for <table>. You can also use bgcolor attribute as in the table below the original one.

As you can see, <caption> is table's version of heading. I strongly recommend that you use <caption> instead of <h1>...<h6> tags. I do so because <caption> is table's version of heading. To prove my point, I would like to mention that the line below the second table which says "Table2" is also a caption. Why did I suggest that <caption> is table's version of heading and then contradict myself with a proof? <caption> is very often considered to be the same as <h1>..<h6>, even though it is different. <caption> is a label for the table. A table can have its label on the top, bottom or may not have a label. I wanted to present this fact in a way that all readers will remember. You can't blame me for trying!

Below are the HTML codes for the two table above:

Table1	Table2
<table background="images/backMain.jpg"> <caption> Table </caption> <tr> <td> row # 1, column # 1 </td> <td> row # 1, column # 2 </td> </tr> <tr> <td> row # 2, column # 2 </td> <td> row # 2, column # 2 </td> </tr> </table>	<table bgcolor="666666"> <tr> <td> row # 1, column # 1 </td> <td> row # 1, column # 2 </td> </tr> <tr> <td> row # 2, column # 2 </td> <td> row # 2, column # 2 </td> </tr> <caption align=bottom> Table2 </caption> </table>

Notice that the the align attribute is used in Table2 and <caption> is located just above </table>. The codes above are in table. This table does not have a caption, background image or color. If you do not specify something for the background, then background of the page is the default. In this table <font> tag is used to change color and <b> is used on "Table1" and "Table2". All the tricks you learned about can be used in the table. Can all the tricks you learned about images be also used? Yes.

If you look closely you will see some very interesting things on the table to the left, besides the image. The pidulcture on the top left is picture posted on a black background. The picture on its right is the same sized picture but posted on a white background. The box below (these boxes are called cells) has the picture posted with the same picture as the background.

Now why did I do that?

Note: The top two cells of the table on the left would not show a background if you are using Internet Explorer.

Are you wondering how I got this green background in the middle of the page. Very simple, the green colored thing above is a table and in the top right cell, is another table. But where the frame of the table? Do you see a thin line of the background between the green background. Well, that is the frame of the table. You see the table1 and table2 that we talked about at the top of the page. They are also inside a table! Only this time the thin line is invisible because the background of the table and the web page is the same. Wait a minute! I see a frame around the table just above the green table and this one also shares the same background image! You got me this time. Here is how it is done.

<table border="0">

This border attribute defines the thickness of the border. 0 means a thickness of zero, in other words no border. Now how about a thick border example.

Cool ain't it!

Pyramid

of

Tables

Let's backtrack to the table with 3 images. The top row of that table has two cell, but the bottom has only one cell. This is accomplished by the colspan attribute. The assigned to the attribute tells how many columns you want to cover. What do you think a rowspan attribute would do.? Try it.

Hint: Same syntax

Links

The Anchor Tag and the Href Attribute

HTML uses the <a> (anchor) tag to create a link to another document.

An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.

The syntax of creating an anchor:

<a href="url">Text to be displayed</a>

The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.

This anchor defines a link to W3Schools:

<a href="http://www.w3schools.com/">Visit W3Schools!</a>

The line above will look like this in a browser:

Visit W3Schools!

The Target Attribute

With the target attribute, you can define where the linked document will be opened.

The line below will open the document in a new browser window:

<a href="http://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>

The Anchor Tag and the Name Attribute

The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for.

Below is the syntax of a named anchor:

<a name="label">Text to be displayed</a>

The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use.

The line below defines a named anchor:

<a name="tips">Useful Tips Section</a>

You should notice that a named anchor is not displayed in a special way.

To link directly to the "tips" section, add a # sign and the name of the anchor to the end of a URL, like this:

<a href="http://www.w3schools.com/html_links.asp#tips">
Jump to the Useful Tips Section</a>

A hyperlink to the Useful Tips Section from WITHIN the file "html_links.asp" will look like this:

<a href="#tips">Jump to the Useful Tips Section</a>

Forms

On your website, for the most part, you the host do the talking and the viewers do the listening. Sometimes, however, you would want to hear from your viewers. Sometimes you want specific information from your viewers. Information like, their email address, how often they visit, their age, etc. For this you should use forms.

<form method="post" action="mailto:sciences@molecularsciences.org">

Each form starts with the <form> tag and ends with </form>. Method="post" tells the browser that you want to post this form. Action="mailto:sciences@molecularsciences.org" tells the browser that all the information collected from this form will be mailed to this address. You can put any email address inside the action but be careful not to leave any space between mailto: and the email address.

Textbox

Textbox is a small box of a defined size where the viewer can type something.

Name: <input type="text" name="name" size="30">

The attribute type gets text to specify that this is a text box. The attribute name is very important. When you will receive something from the person who mailed you some information, you will get a chunk of unformatted text. For example if someone sent you their name and email, you will receive something like: (MrSizzler)(MrSizzler@usa.net)(I think that your site is ...). This mail can very easily become very confusing. If you, however, use name attribute you will get something like name=(MrSizzler) email=(MrSizzler@usa.net),etc. The size attribute defines how many characters long the box is.

Radio Buttons

The radio buttons allow the user to either choose or not choose an item. This could become useful in many situations. For example you want the gender of the viewer.

Male <input type="radio" name="selection" value="item">

Female <input type="radio" name="selection" value="item">

Selection

Notice that the user can either choose Male or Female but not both. That makes sense. Notice that inside the input tag, value of type is now "radio". This tells the browser to draw a radio button here. One tag for each button. Notice that the values for name and selection are the same.

Married <input type="radio" name="common" value="item">

Male <input type="radio" name="condradictory" value="item">

Female <input type="radio" name="contradictory" value="item">

Note that now you can choose married and male or married and female but not male and female at the same time. This is because male and female are assigned the same name in the input tag but married is assigned a different name. The trick is that you can only choose one item from with the same name in the input tag at a time.

Checkboxes

Checkboxes are another form of radio. Actually, it isn't, it just performs a function very similiar to them. Unlike radio buttons, checkboxes are boxes (square in shape) and when you click on them, you do get a black dot, but an 'X' or a checkmark depending on the brand and version of your browser. You can click on more on options in the checkboxes below. Try and see if you can make an option contradictory to another. In other words, if you choose cocoa, you can not choose nutmeg.

<input type="checkbox" name="extras" value="cinnamon"> Cinnamon

<input type="checkbox" name="extras" value="nutmeg"> Nutmeg

<input type="checkbox" name="extras" value="cocoa"> Cocoa

<input type="checkbox" name="extras" value="sugar"> Sugar

Textbox

Textboxes are very useful and are found in almost every form on the website. They allow the viewer to give comments and information which they could not in other fields of the form. Here is how to make a textbox.

<textarea name="comments" rows=10 columns =30 wrap> default text <textarea>

Note that unlike <input>, <textarea> has an ending tag. The name field is the same and the name field of <input>. Rows, and columns attributes defines size of the textfield. Numbers refer to the length in characters. Default is 1 row and 40 columns.

Wrap is an optional attribute which allows word-wrapping. If you do not use this attribute, the user will have to hit return.

Lists

HTML provides three different kind of lists. Bear in mind that there is no <list> tag.

Ordered Lists:

Sports Car:

<ol>

<li> Porsche

<li> Lambourgini

<li> BMW

</ol>

Sports Car:

Porsche
Lambourgini
BMW

Ordered lists start with <ol> and end with </ol>. <li> marks each listing. By default, lists created with <ol> use arabic numerals starting with 1. That can be changed.

<ol type = A> Number list A, B, C, D

<ol type = a> Number list a, b, c, d

<ol type = I> Number list I, II, III, IV

<ol type = i> Number list i, ii, iii, iv

<ol type = 10> Number list 10, 11, 12, 13

If you want to pick something out of hte blue, you can use the value attribute:

<ol start = 101>

<li> html

<li> javascript

<li value=14> cgi

<li> java

</ol>

html
javascript
cgi
java

Note that the value attribute placed a 14 in a pattern of 101, 102,.... Also take a look at the item after 14. What do you think happened?

Unordered Lists:

Cats:

<ul>

   <li> Lions

   <li> Tigers

   <li> Pumas

   <li> Leopards

</ul>

Cats:

Lions
Tigers
Pumas
Leopards

The only difference between ordered and unordered lists is that the unordered lists use bullets instead of alphanumeric characters. You do, however, have a few choices regarding the shape of the bullets.

<ul>

   <li type = disk> disk

   <li type = space> space

   <li type = circle> circle

</ul>

Note: newer browsers do not support some of these functionalities.

disk
space
circle

Definition Lists:

Definition lists are useful for tasks like defining terms.

<h3> Glossary </h3>

<dl>

<dt> Alphanumeric:

<dd> Alpha is short for alphabet and numeric refers to numerals. So, alphanumeric characters simply mean letters and numbers.

<dt> Binary:

<dd> Binary is a base-2 numbering system. It means that it uses only two characters (0 and 1) to represent numbers.

<dt> Hexadecimal:

<dd> Hexadecimal is a base-16 numbering system. The characters are 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.

</dl>

Glossary

Alphanumeric:: Alpha is short for alphabet and numeric refers to numerals. So, alphanumeric characters simply mean letters and numbers.
Binary:: Binary is a base-2 numbering system. It means that it uses only two characters (0 and 1) to represent numbers.
Hexadecimal:: Hexadecimal is a base-16 numbering system. The characters are 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.

Definitive lists (another name for definition lists) start with <dl> and end with </dl>. <dt> is the heading and <dd> is the detail.

Can you mix the three lists? Yes. You can also list tables and images but I haven't seen any website do this skillfully. If you manage to create a great effect by listing images/tables, please do email me the URL.

HTML entities

Character	Entity	Decimal	Hex	Rendering in Your Browser
Character	Entity	Decimal	Hex	Entity	Decimal	Hex
Latin small f with hook = function = florin	&fnof;	ƒ	ƒ	ƒ	ƒ	ƒ
Greek capital letter alpha	Α	Α	Α	Α	Α	Α
Greek capital letter beta	Β	Β	Β	Β	Β	Β
Greek capital letter gamma	Γ	Γ	Γ	Γ	Γ	Γ
Greek capital letter delta	Δ	Δ	Δ	Δ	Δ	Δ
Greek capital letter epsilon	Ε	Ε	Ε	Ε	Ε	Ε
Greek capital letter zeta	Ζ	Ζ	Ζ	Ζ	Ζ	Ζ
Greek capital letter eta	Η	Η	Η	Η	Η	Η
Greek capital letter theta	Θ	Θ	Θ	Θ	Θ	Θ
Greek capital letter iota	Ι	Ι	Ι	Ι	Ι	Ι
Greek capital letter kappa	Κ	Κ	Κ	Κ	Κ	Κ
Greek capital letter lambda	Λ	Λ	Λ	Λ	Λ	Λ
Greek capital letter mu	Μ	Μ	Μ	Μ	Μ	Μ
Greek capital letter nu	Ν	Ν	Ν	Ν	Ν	Ν
Greek capital letter xi	Ξ	Ξ	Ξ	Ξ	Ξ	Ξ
Greek capital letter omicron	Ο	Ο	Ο	Ο	Ο	Ο
Greek capital letter pi	Π	Π	Π	Π	Π	Π
Greek capital letter rho	Ρ	Ρ	Ρ	Ρ	Ρ	Ρ
Greek capital letter sigma	Σ	Σ	Σ	Σ	Σ	Σ
Greek capital letter tau	Τ	Τ	Τ	Τ	Τ	Τ
Greek capital letter upsilon	Υ	Υ	Υ	Υ	Υ	Υ
Greek capital letter phi	Φ	Φ	Φ	Φ	Φ	Φ
Greek capital letter chi	Χ	Χ	Χ	Χ	Χ	Χ
Greek capital letter psi	Ψ	Ψ	Ψ	Ψ	Ψ	Ψ
Greek capital letter omega	Ω	Ω	Ω	Ω	Ω	Ω
Greek small letter alpha	α	α	α	α	α	α
Greek small letter beta	β	β	β	β	β	β
Greek small letter gamma	γ	γ	γ	γ	γ	γ
Greek small letter delta	δ	δ	δ	δ	δ	δ
Greek small letter epsilon	ε	ε	ε	ε	ε	ε
Greek small letter zeta	ζ	ζ	ζ	ζ	ζ	ζ
Greek small letter eta	η	η	η	η	η	η
Greek small letter theta	θ	θ	θ	θ	θ	θ
Greek small letter iota	ι	ι	ι	ι	ι	ι
Greek small letter kappa	κ	κ	κ	κ	κ	κ
Greek small letter lambda	λ	λ	λ	λ	λ	λ
Greek small letter mu	μ	μ	μ	μ	μ	μ
Greek small letter nu	ν	ν	ν	ν	ν	ν
Greek small letter xi	ξ	ξ	ξ	ξ	ξ	ξ
Greek small letter omicron	ο	ο	ο	ο	ο	ο
Greek small letter pi	π	π	π	π	π	π
Greek small letter rho	ρ	ρ	ρ	ρ	ρ	ρ
Greek small letter final sigma	&sigmaf;	ς	ς	ς	ς	ς
Greek small letter sigma	σ	σ	σ	σ	σ	σ
Greek small letter tau	τ	τ	τ	τ	τ	τ
Greek small letter upsilon	υ	υ	υ	υ	υ	υ
Greek small letter phi	φ	φ	φ	φ	φ	φ
Greek small letter chi	χ	χ	χ	χ	χ	χ
Greek small letter psi	ψ	ψ	ψ	ψ	ψ	ψ
Greek small letter omega	ω	ω	ω	ω	ω	ω
Greek small letter theta symbol	&thetasym;	ϑ	ϑ	ϑ	ϑ	ϑ
Greek upsilon with hook symbol	&upsih;	ϒ	ϒ	ϒ	ϒ	ϒ
Greek pi symbol	ϖ	ϖ	ϖ	ϖ	ϖ	ϖ
bullet = black small circle	•	•	•	•	•	•
horizontal ellipsis = three dot leader	…	…	…	…	…	…
prime = minutes = feet	′	′	′	′	′	′
double prime = seconds = inches	″	″	″	″	″	″
overline = spacing overscore	&oline;	‾	‾	‾	‾	‾
fraction slash	&frasl;	⁄	⁄	⁄	⁄	⁄
script capital P = power set = Weierstrass p	&weierp;	℘	℘	℘	℘	℘
blackletter capital I = imaginary part	&image;	ℑ	ℑ	ℑ	ℑ	ℑ
blackletter capital R = real part symbol	&real;	ℜ	ℜ	ℜ	ℜ	ℜ
trade mark sign	™	™	™	™	™	™
alef symbol = first transfinite cardinal	&alefsym;	ℵ	ℵ	ℵ	ℵ	ℵ
leftwards arrow	←	←	←	←	←	←
upwards arrow	↑	↑	↑	↑	↑	↑
rightwards arrow	→	→	→	→	→	→
downwards arrow	↓	↓	↓	↓	↓	↓
left right arrow	↔	↔	↔	↔	↔	↔
downwards arrow with corner leftwards = carriage return	&crarr;	↵	↵	↵	↵	↵
leftwards double arrow	⇐	⇐	⇐	⇐	⇐	⇐
upwards double arrow	&uArr;	⇑	⇑	⇑	⇑	⇑
rightwards double arrow	⇒	⇒	⇒	⇒	⇒	⇒
downwards double arrow	&dArr;	⇓	⇓	⇓	⇓	⇓
left right double arrow	⇔	⇔	⇔	⇔	⇔	⇔
for all	∀	∀	∀	∀	∀	∀
partial differential	∂	∂	∂	∂	∂	∂
there exists	∃	∃	∃	∃	∃	∃
empty set = null set = diameter	∅	∅	∅	∅	∅	∅
nabla = backward difference	∇	∇	∇	∇	∇	∇
element of	∈	∈	∈	∈	∈	∈
not an element of	∉	∉	∉	∉	∉	∉
contains as member	&ni;	∋	∋	∋	∋	∋
n-ary product = product sign	∏	∏	∏	∏	∏	∏
n-ary sumation	∑	∑	∑	∑	∑	∑
minus sign	−	−	−	−	−	−
asterisk operator	&lowast;	∗	∗	∗	∗	∗
square root = radical sign	√	√	√	√	√	√
proportional to	&prop;	∝	∝	∝	∝	∝
infinity	∞	∞	∞	∞	∞	∞
angle	&ang;	∠	∠	∠	∠	∠
logical and = wedge	&and;	∧	∧	∧	∧	∧
logical or = vee	&or;	∨	∨	∨	∨	∨
intersection = cap	∩	∩	∩	∩	∩	∩
union = cup	∪	∪	∪	∪	∪	∪
integral	∫	∫	∫	∫	∫	∫
therefore	&there4;	∴	∴	∴	∴	∴
tilde operator = varies with = similar to	&sim;	∼	∼	∼	∼	∼
approximately equal to	&cong;	≅	≅	≅	≅	≅
almost equal to = asymptotic to	≈	≈	≈	≈	≈	≈
not equal to	≠	≠	≠	≠	≠	≠
identical to	&equiv;	≡	≡	≡	≡	≡
less-than or equal to	≤	≤	≤	≤	≤	≤
greater-than or equal to	≥	≥	≥	≥	≥	≥
subset of	⊂	⊂	⊂	⊂	⊂	⊂
superset of	⊃	⊃	⊃	⊃	⊃	⊃
not a subset of	&nsub;	⊄	⊄	⊄	⊄	⊄
subset of or equal to	&sube;	⊆	⊆	⊆	⊆	⊆
superset of or equal to	&supe;	⊇	⊇	⊇	⊇	⊇
circled plus = direct sum	&oplus;	⊕	⊕	⊕	⊕	⊕
circled times = vector product	&otimes;	⊗	⊗	⊗	⊗	⊗
up tack = orthogonal to = perpendicular	&perp;	⊥	⊥	⊥	⊥	⊥
dot operator	⋅	⋅	⋅	⋅	⋅	⋅
left ceiling = APL upstile	&lceil;	⌈	⌈	⌈	⌈	⌈
right ceiling	&rceil;	⌉	⌉	⌉	⌉	⌉
left floor = APL downstile	&lfloor;	⌊	⌊	⌊	⌊	⌊
right floor	&rfloor;	⌋	⌋	⌋	⌋	⌋
left-pointing angle bracket = bra	&lang;	〈	〈	⟨	〈	〈
right-pointing angle bracket = ket	&rang;	〉	〉	⟩	〉	〉
lozenge	&loz;	◊	◊	◊	◊	◊
black spade suit	&spades;	♠	♠	♠	♠	♠
black club suit = shamrock	&clubs;	♣	♣	♣	♣	♣
black heart suit = valentine	&hearts;	♥	♥	♥	♥	♥
black diamond suit	&diams;	♦	♦	♦	♦	♦