The Computer Guy

HTML Post #5: Tables & Whitespace

Tables  are one of the fundamentals of html. At one point in time, everyone’s site was built inside a table. It was really easy to do this. Also, whitespace, including spaces, tabs, and new lines, don’t matter much in html, but there are ways to get the whitespace you desire.

Tables

Here’s a 2×2 basic table:

<table border="1">
 <tr>
  <td>Row 1, Cell 1</td>
  <td>Row 1, Cell 2</td>
 </tr>
 <tr>
  <td>Row 2, Cell 1</td>
  <td>Row 2, Cell 2</td>
 </tr>
</table>

Which looks like this:

Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 1	Row 2, Cell 2

Note that I put border=”1″. If I put border=”0″, no border would be added, like this:

Row 1, Cell 1	Row 1, Cell 2
Row 2, Cell 1	Row 2, Cell 2

Spanning

Each cell in the table can span across, down, or both directions. This is very similar to the merge cell function in Excel. There are a few points to keep in mind. When you span several columns, the next cell in the html code will be the next cell on the screen. Likewise, when you span several rows, you have to skip that cell on the following row(s). Here’s an example:

<table border="1">
 <tr>
  <td rowspan="2">I span 2 rows.</td>
  <td colspan="2">I span 2 columns across.</td>
 </tr>
 <tr>
  <td>I am a single cell.</td>
  <td>I am a single cell.</td>
 </tr>
</table>

I span 2 rows.	I span 2 columns across.
	I am a single cell.	I am a single cell.

Whitespace

Did you notice that the table in the last example could use some text alignment? Maybe vertically align the rowspan cell to the top? Maybe center the colspan cell? How about making the rowspan cell into two lines? Let’s take a look.

Here’s how to vertically align to the top:

<table border="1">
 <tr>
  <td rowspan="2" style="vertical-align: top">I span 2 rows.</td>
  <td colspan="2">I span 2 columns across.</td>
 </tr>
 <tr>
  <td>I am a single cell.</td>
  <td>I am a single cell.</td>
 </tr>
</table>

I span 2 rows.	I span 2 columns across.
	I am a single cell.	I am a single cell.

You could also set vertical-align: bottom for the bottom or middle for the middle.

Centering the colspan cell:

<table border="1">
 <tr>
  <td rowspan="2">I span 2 rows.</td>
  <td colspan="2" style="text-align: center">I span 2 columns across.</td>
 </tr>
 <tr>
  <td>I am a single cell.</td>
  <td>I am a single cell.</td>
 </tr>
</table>

I span 2 rows.	I span 2 columns across.
	I am a single cell.	I am a single cell.

Other possibilities are “left”, “right”, and “justify”.

And finally, inserting a line break:

<table border="1">
 <tr>
  <td rowspan="2">I span<br />2 rows.</td>
  <td colspan="2">I span 2 columns across.</td>
 </tr>
 <tr>
  <td>I am a single cell.</td>
  <td>I am a single cell.</td>
 </tr>
</table>

I span 2 rows.	I span 2 columns across.
	I am a single cell.	I am a single cell.

HTML Post #4: Divs & Classes

Div Tags

A div tag is very similar to a paragraph tag. The difference from a rendering perspective is that paragraphs have a padding at the top and bottom by default. You can use div tags just like p tags.

Float Style

A div, and other tags, can have a float style. This can float the element on the left or the right. Here’s an example:

<div style="float: right">This floats on the right</div>
<div style="float: left">This floats on the left</div>
<div style="clear: both">This displays under the floats</div>

Yes, “clear: both” will clear all the floats above it. You can do “clear:left” to place is below the lowest left floating element. Float styles can be used with images as well.

CSS Classes

Styles can be declared once and referred using the class attribute. These styles can be declared using a stylesheet file or a style element. A stylesheet is better because it can be used by multiple pages by adding one line inside the html header:

<link rel="stylesheet" type="text/css" href="http://example.com/main.css" />

If you want to just play a little bit, you can put a style section in the html header:

<style type="text/css">
/* This is a style comment. */
/*

Put your stylesheet here in the html header!

*/
</style>

You can take this:

<div style="float: left; color: red;">Red Left</div>
<div style="float: left; color: red;">Red Left</div>
<div style="float: left; color: red;">Red Left</div>
<div style="float: left; color: red;">Red Left</div>

And turn it into this:

<style type="text/css">
.left-red { float: left; color: red; }
</style>
...
<div class="left-red">Red Left</div>
<div class="left-red">Red Left</div>
<div class="left-red">Red Left</div>
<div class="left-red">Red Left</div>

Note that the class in the style starts with a period and in the div doesn’t. This is because you are telling the browser that left-red is a class. If it started with a letter, the browser would think it was an element, like a “div” tag. Also, curly braces surround what would be in the style attribute.

Now, go play around for 30 minutes with some html. If you have a question, feel free to ask.

HTML Post #3: Images

Image Tag

<img src="http://example.com/image.jpg" alt="Example Image" />

That will give you just an image, plain and simple. The alt tag is important for people who have images disabled and for search engines. Here’s how to center or left align an image:

<img src="http://example.com/image.jpg" alt="Centered Image" align="center" />
<img src="http://example.com/image.jpg" alt="Left Aligned Image" align="left" />

When using an image inside a link, there will be an automatic blue broder. To remove this:

<a href="http://example.com/">
<img src="http://example.com/images.jpg" alt="Link Image" border="0" />
</a>

Background Images

We’ve all seen images used as backgrounds. It’s fairly simple. To put a background image for the whole page, change the opening body tag to this:

<body style="background: url('image.jpg');">

You can change the repeat by adding the repeat-y keyword like this:

<body style="background: url('image.jpg') repeat-y;">

The image will fill the page top to bottom, but not left to right. There are plenty of options for you background image. Here are the repeats:

• repeat — tiled to fill completely (default)
• repeat-y — repeats top to bottom
• repeat-x — repeats left to right
• no-repeat — does not repeat

You can also make it scroll with the page or fixed to the screen and does not scroll. Scroll is the default.

You can also set the background of a p, or paragraph, tag the same way.

<p style="background: url('image2.jpg');">I've got a background image!</p>

The full image will not show if there is not enough text.

Colors

You can set the background color, similarly to using an image:

<p style="background-color: red;">I've got a background color!</p>
<p style="background-color: red; color: yellow;">I've got a foreground color!</p>

In the second example, the text will be yellow on red, while the first is black on red.

HTML Post #2: Lists & Links

Lists

There are two basic types of lists in HTML: ordered and unordered. Unordered lists are bullet lists. Ordered lists are numbered. Each item in the list is housed in between opening and closing “li” tags.

Ordered Lists

A simple numbered list is surrounded by opening and closing “ol” tags. Here is a quick example:

<ol>
<li>Step 1.</li>
<li>Step 2.</li>
</ol>

This looks like:

1. Step 1.
2. Step 2.

You can use a different marker, just as lowercase letters, uppercase letters, and roman numerals.  This is done by styling the list. Here’s how to do roman numerals:

<ol style="list-style-type: upper-roman">
<li>Step I.</li>
<li>Step II.</li>
</ol>

1. Step I.
2. Step II.

Here are the different ordered list style types:

upper-letter	Uppercase Letters
lower-letter	Lowercase Letters
upper-roman	Uppercase Roman Numerals
lower-roman	Lowercase Roman Numerals
upper-greek	Uppercase Greek Letters
lower-greek	Lowercase Greek Letters
decimal	Regular Numbers
decimal-leading-zero	Leading Zero

Unordered Lists

These are almost identical to ordered lists. Instead of “ol”, you use “ul”. The default list style type is a bullet. Here are the unordered types:

• none
• circle
• disc
• square

Here’s that unordered list in HTML:

<ul>
<li>none</li>
<li>circle</li>
<li>disc</li>
<li>square</li>
</ul>

Links

A link is super easy to do.  It’s an “a” tag.  The tag has an “href” attribute that contains the url, just like the “style” attribute contained the styling information. Here’s a quick example:

<a href="http://example.com/">Example.com</a>

Which would like like:

Example.com

You can also tell the browser to open the link in a new window/tab by using the “target” attribute:

<a href="http://example.com/" target="_blank">Example.com in a new window/tab</a>

Example.com in a new window/tab

You can even style the “a” tag to set the color and  remove the underline:

<a href="http://example.com/some_web_page.html" style="color: black; text-decoration: none">Example.com</a>

Example.com

Yes, you can set the color of any text with that style attribute. Also note that multiple styles are separated by a semicolon, and it does not matter the order of the styling when put in the “style” attribute, so long as there’s nothing conflicting.

Well, that’s pretty much it for lists & links. The next post is all about images, so check back!

HTML Post #1

More and more people are starting their own websites. Whether it be a blog, an e-commerce site, or a tribute to their pet, learning HTML will help tremendously. Sure, there are those nice little editors, but they cannot do everything. Plus, sometimes you’ll want to tweak that HTML so everything displays properly. In this series, I’ll cover the basics of a webpage, images, tables, lists, styles, and some other topics.

Base Document

I have setup a base HTML document to show the basics that will be covered in this series. You can find it here. It contains a lot of comments which are ignored by the web browser. An HTML comment starts with “<!–” and ends with “–>”, quotes for clarity.

HTML Tags

Tags are special markers that tell the web browser how to display the page. Tags always start with a less than symbol “<” and  end with a greater than symbol “>”. There are three types of tags: opening, closing, and self-closing. Closing tags start with “</”. Self-closing tags end with “/>”. Every opening tag should have a closing tag. An HTML document will display everything between the “<body>” opening tag and “</body>” closing tag.

DOCTYPE

All HTML documents should start with a DOCTYPE tag. This tag tells the browser which version of HTML you are using and determines how it will render the page. There are serveral different doctypes, but for this series, we’ll be using XHTML Strict.

Basic Tags

The basic tags are:

• html
  This should open immediately after the doctype and close at the very end of the file.
• head
  This follows the opening html tag. It contains the title, meta data, and links to stylesheet and javascript files.
• body
  This follows the closing head tag. Its contents will display as the webpage. Update: Javascript should be placed as close to the end of the bottom as possible.
• title
  This contains the title of the page, it shows in the tab and/or the titlebar of the browser.
• p
  This is a paragraph. Each paragraph will have a bit of whitespace before and after them.
• b
  This bolds the text between the opening and closing b tag.

Sample

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>This is just a sample</title>
</head>
<body>
<p>This is a paragraph.</p>
<p><b>This is a bold paragraph.</b></p>
<p>There is only <b>one</b> word bold in this paragraph.</p>
<p>It is <b>important</b> to close tags in <b>reverse</b> order they were <b>opened.</b></p>
</body>
</html>

Is GHz per Watt the new measure?

We have reached a plateau when it comes to speed limits for CPUs. We may not see anything higher than 4 GHz in the near future.  This doesn’t mean that the computer can’t be better or faster. Multicore processors are fairly common today, allowing more than one section of code to run simultaneously. Computers are also dropping their power requirements, and let’s face it, we all want to be green, especially if it means a small electricity bill and keeping some green in our pocket.

Chip manufacturers are now touting about their CPU’s power consumption. Laptops are where this is the major selling point. Less electricity used means a longer battery life. Also, if it can do the same amount of data processing, you can have the same level of productivity for a longer amount of time. Wouldn’t we all want a laptop that can play 4 flash movies and not stutter a single one?

The desktop market hasn’t seen anything to the point of GHz/Watt. That’s because the folks in marketing think no one really cares how much electricity that computer’s going to use, unless you’re a computer dork like me running around the house with your brand new kill-a-watt.  I found an article on Wikipedia, they’ve listed pretty much every known CPU, their power requirements, speed and MHz/Watt or GHz/Watt.

Sure, there’s more to that computer than a CPU. There’s RAM, a hard drive, monitor, keyboard, mouse, USB ports and devices, network connections, fans, and other chips to support everything from video to audio to that fancy SATA II interface blu-ray burner you just had installed. Where are the power requirements, in Watts, for all these devices? Can it be found? Is it even available?

If the data can be found, could a normal high school graduate understand it? Would they even care? I’m betting most people won’t.

Wipe & Reload Windows Every 6 Months

Most people think a computer runs slower and slower as it ages. This is entirely false. In fact, with updated drivers for your hardware being released, your computer should run slightly faster as it ages. So, why does your computer slow down? There are many reasons:

• Adware
• Viruses
• Startup Programs
• Uninstalled Programs
• Hard disk fragmentation

The list just goes on and on. Any computer tech can tell you that all of these problems can be handled without formatting the hard drive and reinstalling everything from scratch. I agree, so long as you are willing to spend days, possibly weeks, tracking down that illusive virus and running all sorts of programs to clean the registry, defragment, etc.

There is a quicker and easier way. Wipe & Reload. It may sound scary, but in fact it’s not. Doing this will guarantee there is no virus left lurking on your computer. On top of that, you’ll have a fresh backup of all your files, so if a disaster happens, you’re prepared.

NOTE: I recommend having another computer connected to the internet and a jump drive, so you can download the network drivers in case Windows doesn’t install them by default.

Prep

The first step is to back up all your data. I do not mean creating a full backup of your hard drive. 99% of the files you will want are in My Documents. If you backup everything under “C:\Documents and Settings”, you should be well covered. DO NOT backup the “temp” or “Temporary Internet Files”, as viruses live there and you don’t need anything in those folders.

NOTE: I take no responsibility for lost files you forgot to back up!

The second step is to look in “Add/Remove Programs” and write down anything you want to reinstall.

The third step is to locate your Windows key. This is a 25 character code. It is usually written on a sticker on your computer.

Reinstalling Windows

Once all your data is backed up and you have a list of programs to install, slide your Windows XP CD into your computer and restart. Press any key when it tells you to. Now, go through step by step.

1. No, you do not want to recover.
2. Yes, you agree.
3. Delete the partition.
4. Install to the “free space”.
5. Format using NTFS. NOT QUICK!
6. Let it do it’s thing. It will reboot do not press any key when prompted.
7. Enter your code when asked.
8. Answer any other questions.

That’s it. Windows XP is now reinstalled.

Installing Drivers

Now, to see what drivers need to be installed:

1. Right click on My Computer.
2. Click on Manage.
3. Click on Device Manager.

Anything with a yellow exclamation point needs a driver. Most manufacturers will offer drivers on their website. I recommend going this route instead of installing them off a disc because driver updates are common and you ever knows how old that driver disc is.

Installing Software

1. Install your anti-virus software.
2. Install all Windows updates available.
3. Install any programs you had that you wanted to keep.

The Data

Special attention is required during this step to keep the viruses and other malware off your computer. Put in each backup CD/DVD one at a time for a virus scan. This may take a while, if you have more than 1 disc.

If there is a virus, the software won’t be able to heal/remove/fix it because the CD/DVD is read-only at this point. Make a note of any file containing a virus. Now, just copy over any file that didn’t make the infected list.

OK, your wipe & reload is now complete. Now, do a few more tweaks to get the most performance.

Recycling Your Old Electronics

We all try to be environmentally conscious, but what do you do with that old TV that stopped working? No, there is no recycle symbol on that TV. That doesn’t mean you should put all that plastic, glass, gold, mercury, copper, silicon, etc. in the landfill.

Odds are that there is an electronics recycling day every 6 or 12 months in the closest major city. You can find out by searching the local newspaper’s website. Usually, the TV news will overlook such valuable information. Here in Augusta, GA, there is one on Fort Gordon, an army base, and another downtown at Fort Discovery, a science museum.

They will take TVs, computers, monitors, keyboards, mice, speakers and stereos. Usually, they will not take stoves, ovens, microwaves, refrigerators, or any other large appliances. Make sure to check what they will and won’t take.

MP3 CDs

OK, so you bought a new CD player and looking at the box, you see MP3 CD. What is an MP3 CD, you ask. It’s just a CD with MP3s on it. No, this is not the same as a traditional audio CD. Let’s look at the differences.

	Traditional CD	MP3 CD
Playtime	80 Minutes Max	1450 Minutes Max
Bitrate	1200 Kbps	64-320 Kbps
Number of Tracks	99	?????
Embedded Track Info	Yes	Yes
Audio Format	WAV	MP3
Burnable	Yes	Yes
Computer Playable	Yes	Yes

To burn an MP3 CD, just put the mp3s directly on the cd. In windows, you can drag the files directly to the CD drive in my computer. Then right click on the CD drive and select “Burn these files…”.

jQuery Intro

jQuery is a very useful javascript library. It provides unified methods to assign event handlers, perform ajax requests, change CSS classes, etc. All of these operations, using jQuery, are performed the exact same way no matter what web browser the end user is running.

Selecting DOM Elements
Before you can do almost anything, you’ll need to select an element to work with. Normally, this is done by by using

document.getElementById('some-element')

But jQuery has an easier way.

$('#some-element')

This  does the same thing as the previous example. When using a #, you are selecting by id. This is just like a CSS selector.

Keeping with the CSS selectors, using a period (.) at the beginning selects all elements with that class name. Also, putting an element name selectes that element. Separating selectors with a space, denotes a ancestor/descendant relationship. Separating selectors will a comma, elements matching any of the selectors will be selected.

Event Handlers
Assigning an event handler is a lot easier using jQuery. Once you have selected your element(s), run the function mousedown to add a mousedown event handler. For example,

$('td').mousedown(handler);

Adds a mousedown event handler (handler) to all td elements.

In addition to the ease of assignment, the event object passed to the handler is the same across various browsers. There are a few caveats, but the jQuery crew is working to resolve these.

Manipulating Classes
There are several functions for manipulating classes, including removeClass, addClass, and toggleClass. These are fairly self-explanatory. Running removeClass with no arguments removes all classes from the selected element(s).

Ajax
jQuery makes Ajax very simple. To do a post, all you need is:

jQuery.post('/path/to/post',{data1:'hello',data2:'world'})

Gets are even easier:

jQuery.get('/path/to/get').

That’s jQuery in a nutshell. There is much more you can do with jQuery that wasn’t covered. jQuery has a whole set of UI controls available, but these increase the amount of code & CSS that your end user has to download.

For more information, visit http://www.jquery.org/.