Useful Technology Made Easy to Understand

Friday, November 17, 2006

Basic HTML Made Easy

What is HTML

HTML is HyperText Markup Language, the language designed for the creation of web pages.

In other words, HTML is the language web designers use to tell your web browser how to make a web page look. Using HTML, designers are able to specify how the text is to be displayed (bold, italics, underline, etc.), where images should be, the types of colors and fonts to use, and more.

Where is it used

First and foremost, HTML is used on each and every webpage you see. Yes, even the one you are looking at right now. HTML was used to tell your web browser how to display this text, that the text in the navigation bar should be links to other webpages.

You can also use HTML with some types of email, but not all email clients and providers allow you to view your emails in HTML. Have you ever seen an email that had a pretty background, different colored fonts and a very elaborate look to them? They do that using HTML.

Other places that might make use of HTML are forums, blogs and journals. Some forums, however, make use of their own type of language called BBC (bulletin board code), which I will not be covering here.

Basic commands and how they are used

- Line break. Works like hitting the "shift + return" keys to add lines to the displayed document.
 TEXT HERE - Paragraph. Starts and ends a paragraph. Effects certain paragraph only commands like justify (right, left, full). Works like hitting the "return" key.
 TEXT HERE - Bold.
 TEXT HERE - Strong Emphasis (or bold).
 TEXT HERE - Italics.
 TEXT HERE - Emphasis (or italics).
 TEXT HERE - Underline.
<del> TEXT HERE </del> - Deleted text (or strike-through).
<a href="http://www.urlhere.com"> TEXT HERE </a> - Makes a link.
<img src="http://www.urlhere.com/image.jpg" /> - Inserts image to display in the document (supported files: .gif, .jpg, .jpeg, .png). Image must be hosted on the internet, not just simply on your computer.
<blockquote> TEXT HERE </blockquote> - Indents the text.

Here are a few more slightly "advanced" html commands that I am including because they are used in the example below:

<HTML>WEBPAGE INFO</HTML> - Denotes that the file is written in HTML and all the text should be interpreted with the html language. (see example below for how to use it)
<header> HEADER INFO </header> - Denotes that the information between the commands contains the header information, such as page title and more. (see example below for how to use it)
<title> TEXT HERE </title> - The title of the document. Must be inside the <header> tags to work

Example Uses

Alright, let us take the above examples of HTML codes and put them into use. For this example, let us make a basic webpage and see how things work out.

First thing you want to do is open up a basic text editor program. Anyone running windows need only open "Notepad" (not wordpad, that is different). If you are running Windows XP, click your Start button, go to "All Programs" and look under "Accessories". Once Notepad is open, type in the following:

<html>
<head>
<title>BASIC HTML EXAMPLE</title>
</head>
<body>
This is a test. 
BOLD 
Strong Emphasis 
Italics 
Emphasis 
Underline 
<del>Deleted text (or strike-through)</del> 
<a href="http://technologymadeeasy.blogspot.com/">Tech Made Easy!</a> 
 
This is what happens
if you
don't
use
the "line break" command.
 
<img src="http://www.myfilestash.com/userfiles/lethann/test.gif"> 
<blockquote>See what the blockquote command does? Very nifty for making, well, quotes!</blockquote>
</body>
</html>

Now you go up to the top, click "File", then "Save As...". Once the box has appeared, you want to type in test.html into the File Name box. Congratulations, you just made a webpage. If you double click on the icon for the file you saved, it should open in your default web browser. Now you can see how all the various commands work. Feel free to now open it back up in your notepad and play around with all the rest of the commands. Get used to them, and have fun!

HTML references

http://en.wikipedia.org/wiki/Html

http://en.wikipedia.org/wiki/HTML_element

HTML Programs

Dreamweaver

Notepad

nVue open source

Thursday, April 06, 2006

How to change your Windows XP Background

One of the quickest and easiest way to customize your computer is to simply change the background (or Wallpaper) of your windows PC.

You can easily go from this:

Icky Background

To this:

Pretty Background

Step by step instructions on how to change your background.

Close or Minimize all your open windows, then RIGHT CLICK anywhere on your desktop.
A little menu will pop up with various options, you want to click "Properties".
(Note: If your menu doesn't look exactly as pictured to the right, don't worry, it all depends on what programs you have installed, but everyone will have 'Properties'.)
A window will pop up that is titled "Display Properties", typically with the "Themes" tab already selected.

(Note: Don't worry about Themes just yet, we'll cover that in a later article.)
Click the second tab that is labled "Desktop".
You'll see lots of options here, but right now we only want to look at two areas: "Background" and "Position".

Background - A listing of all the defaul backgrounds that come with your version of Windows XP.
Position - Various options of how to show the selected image.
- Center - Displays the selected image in the center of your screen, not adjusting it in any way. Depending on the size of the image and your screen resolution, there might be a border around your image where it is too small, or the image might not show properly because it is too large.
  (Note: the "Color" option is to select the color underneath your background image that will show through if you check "Center" and the image is smaller than your screen.)
- Tile - Puts the image in the upper right corner then repeats the image all around it like real tile flooring.
- Stretch - Windows will adjust the image to fit your screen resolution, by either 'streching' or 'shrinking' it so it fits the borders of your desktop. Not all images work with this as it could make it skew it out of proportion.
For now, find "Peace" and click on it. Selecting the "Stretch" position, then click "Apply" to change your desktop without closing the "Display Properties" window.

See how it changed? It should look like this now:
Feel free to now chose whatever background you want. Next we'll go into chosing a custom background that you've downloaded off the internet.

Changing your background to a custom image

Find an image you want to use as your background and save it to your computer. I suggest making a new folder in your "My Pictures" folder called "Backgrounds" and saving all the ones you like there. (Note: See below for links to places to download free backgrounds.)
Now, go back and open up the "Display Properties" window once more. (Steps #1-4 above)
This time, rather than scrolling through the list, click on the "Browse" button. This will open up a window where you can select the image you want for your wallpaper from anywhere on your computer.
Once you've opened up the "Browse" window (as pictured above), click the "My Documents" button, then open up "My Pictures" to find your new "Backgrounds" folder (or wherever else you put it). Once inside, locate the image you want to use as your background, then click "Open".
This will take you back to the "Display Properties" window, and you'll note the image inside the screen has changed to the picture you just selected. Chose what option you want for the "Position" (usually "Stretch") and then click either "Apply" or "OK". ("Apply" leaves the "Display Properties" window open so you can make changes if you find your choice doesn't look all that great afterall.)
Now you've got your brand new background all selected and ready to go!

(Like the background above? Click ~HERE~ to download it.)

Tips for chosing a good background

Make sure it leaves room for your Icons.
Often 'busy' or high contrasting backgrounds will make it almost impossible to read/see the icons you have on your desktop, so keep that in mind when selecting something to use.
Sometimes bigger is better. I have a background that at first looks kind of odd when I 'stretch' it to fit, however, by putting it in the 'center' it is actually bigger than my screen and looks even better! Other times, an image will get sharper if you use a bigger size then using "stretch" to make it shrink to fit your desktop.
Did you know you can also simply right click on any image that's saved on your computer and tell it to "Set as Desktop Background"? However this doesn't let you change any of the settings.. so use wisely.

Links for places to download backgrounds for free:

Wednesday, March 29, 2006

What is RSS?

Have you ever seen these and wondered what they were?

Or maybe you seen links like "XML," "RSS" or "Syndicate."

What happens is that some websites publish their information two different ways. One is html, which is what you're looking at now in your browser. The other is in a plain text format that you need another program, a "reader" or an "aggregator" to read.

Why would you want to use another program?

You subscribe to a site's feed in an aggregator the same way you would bookmark (or favorite) it. Then your aggregator will check to see if the site has changed without your having to go there every day. For instance, the feed for this website is http://technologymadeeasy.blogspot.com/atom.xml. If you use an aggregator to check your websites, then whenever we post a new article your aggregator will find it for you. For one website, it's not that useful but it's like potato chips, once you start, you can't stop. ;-) You can have daily weather forcasts, news, comics, photos and more all delivered to you as they're published.

So why are there so many ways of saying the same thing?

There are at least 4 different computer languages for publishing syndication files: RSS, RSS 2.0, RDF, and Atom. Many people have preferences for one language over the others but in general use, which one you subscribe to doesn't matter. Other differences come from the different programs used to read feeds.

All of these graphics indicate that clicking on them will automatically subscribe you to them in your aggregator without your having to do anything else.

There is a new standard way of marking a feed, with this icon: Feed icon

. It may be different sizes or colors but the general design will be the same.

Different feed types

Many syndication feeds include the full-text of the new information in the feed. Others only include a summary of the information and link to take you to the site for the whole article.

Others don't post textual information at all but audio or video files that you can download and play on your computer. These are podcasts.

Whatever you find that you want to keep up with, feeds make it much easier. The new information is brought to you instead of you having to look for it.