CSCI 102T

The Socio-Techno Web

Home | Schedule | Labs | CS@Williams

Lab 3: Decimal, Binary, and Hex

For this week's lab assignment, you are to add another page (or two) to your web site.  The goal this week is to continue to gain familiarity with HTML and also learn about how numbers (and letters) are represented in a computer.

Start by adding links on your web site to your writing assignments from our first two tutorial meetings.  You might want to create a new page on your web site (linked off of your main page) for keeping track of your weekly assignments.  It's up to you.  Just make sure your pages are nicely organized and easy to maintain.  You may decide to link to your partner's papers/responses as well (if you both agree to do so--there is no requirement to do so and no penalty for chosing to not).  You might find a "table" (described below) useful for organizing your class documents.

Then you should read through the information below regarding HTML tables and number conversion.  You should add information on your web site (again, feel free to make another page on your site if you'd like) that describes your name first in ASCII, then in binary, and finally in hexadecimal.

Adding Links to Documents

Last week we learned how to add links to other web sites on our web page.  We learned that we use relative links to link to other pages that we create (if you need a refresher, see Lab 1), and absolute links to link to "external" web sites.  To add links to your documents, you first need to transfer a copy of the document (PDFs work best since many browsers can display them directly) into your www folder.  Then, you need to link to the document using a relative link.

For example, this is the HTML code that I used to add a link to the course syllabus.  Note that this link only works because I have the file "syllabus.pdf" saved in my www/cs102t directory. 

<a href="syllabus.pdf">Course Syllabus</a>

You can see the link in action on the course web page.

HTML Tables

A common way to organize content on web pages is to use an HTML table.  Tables are relatively straight forward, and some of you may have used them last week.  Rather than telling you exactly how they are used, this week you are going to learn how to use the Web to teach yourselves about HTML tables.  The Web contains tons of information about HTML and other tips and tricks to make your web pages pretty. 

A quick Google search for "HTML tables" brings up many relevant links.  For example, check out this one, which has a cool editor that allows you to experiments with tables directly on the webpage. 

Experiment with different formatting options until you find one that will work well for your web page(s).

Representation of Numbers

Inside a computer, numbers are represented using the binary number system, which represents everything as a sequence of 0s and 1s. Binary is also called base-2. (We typically represent numbers in decimal, which is base-10.) Let's start exploring binary by looking at the first 10 powers of 2.

Now let's look at the first 16 decimal and binary values:

Hexadecimal is another number system. It is base-16, and employs 16 symbols: the numbers 0, 1, 2, ..., 9 and the characters A, B, ..., F. Here is a chart that shows binary, hex, and decimal:

Part 1. Binary to Decimal

The key to representing numbers in binary is to find out how many multiples of the powers of 2 are needed to add up to the desired value. This is the same as decimal, except decimal uses base-10 instead of base-2. For example, in decimal:

1*10 + 9*1 = 19.

Now let's look at 19 in binary, which is 10011. The biggest power of 2 that is not bigger than 19 is 16, so let's start with that. Then we just move through the smaller powers of 2 as shown.

1*16 + 0*8 + 0*4 + 1*2 + 1*1 = 19

Let's practice. Do not use a web converter, and email your responses to Bill. (FYI there are a few more questions in the next section.)

1. 00000000 -->
2. 00001111 -->
3. 01101011 -->
4. 11111111 -->
5. 00000000 00000000 -->
6. 00000000 11111111 -->
7. 00000010 01100011 -->
8. 00000001 01100011 -->

Part 2. Decimal to Binary

To convert a decimal number to the binary equivalent, we need to express the decimal number as a sum of powers of 2. Based on this, write down an 1 for every power that appears in the sum, and a 0 for each that does not. Pad it up with leading zeros so that you get a complete byte (8 bits). Here is an example:

113 (decimal) = 1*64 + 1*32 + 1*16 + 1*1 = 1*64 + 1*32 + 1*16 + 0*8 + 0*4 + 0*2 + 1*1 --> 01110001 (binary)

Convert the following decimal numbers into binary (without a web converter) and email Bill your results:

1. 70 -->
2. 25 -->
3. 49 -->
4. 63 -->
5. 231 -->
6. 513 -->
7. 623 -->
8. 640 -->

ASCII Codes

We know how to represent numbers inside a computer: using the binary system. Every number, as far as a computer is concerned, is a sequence of 0s and 1s. How about a character? Well, if we map each character to a number, then we have the means to represent characters as well. That's what the ASCII code was invented for. It uses 1 byte (or 8 bits) for each character. So 256 different characters can be represented, since 2 to the 8th power is 256.

(Actually, there only 128 of them, since the 8th bit is used as a parity bit, to check correctness during transmission. But you can ignore that detail for now.)

Here is a (partial) ASCII code table:

Unicode

Unicode is an extended ASCII, which employes 4 bytes (or 32 bits) per character encoded instead of 1 byte, for a total of more than 2^32 or 2 billion possible characters to be encoded. Take a look at some Unicode Charts for fun.

Tasks for lab

1. Continue editing your web site that you started last week.
2. Add links to your previous writing assignments (and optionally your partner's assignments). Create a new page for posting weekly writing assignments. It must be clear to any visitor of your home page where to find your readings (including Bill and your tutorial partner).
3. Add an HTML table to your web site.
4. Go through the tutorials above for learning about number systems. Email Bill with responses to questions in Parts 1 and 2 (please put all of your answers into one email).
5. Convert your name into ASCII, and then to binary, and then to hexadecimal. Add this information to your web site somewhere.
6. As you make changes, be sure to save your file frequently, and reload in the browser to see the results.
7. Commit your lab as changes to your website in your personal github repository.

You can use an HTML Validator to verify that your web page contains valid HTML!