More Commands

So now we know some more facts about web pages:

You can add new HTML code and check it easily by using two windows: Notepad and a Browser ("Save-Reload-Check")
You can add attributes to HTML commands for more interesting changes

Now you are ready to add a few more interesting commands to make your web page look better!

Font Styling

In addition to the H1-H6 commands, you can use the FONT command to make text larger, smaller, or use different fonts and colors.

As I mentioned before, the FONT command, by itself, does nothing. But add attributes, and you can made three important changes:

Attribute	Value(s)	Explanation
color=	"(color name)"	Sets the color of the font; overrides the TEXT attribute in the BODY command.
size=	-7 ~ -1, +1 ~ +7	Sets the size of the font, the smallest being "-7" and the largest being "+7".
face=	"(font name)"	You can choose a font or fonts, but you must choose a font which almost everybody has! Common choices: Arial, Verdana, Georgia, Courier. Possible fonts: Garamond, Helvetica, Arial Narrow, Impact, Comic Sans MS, Webdings.

For example:

<font size="+3" color="darkred" face="Verdana">

A sample of what that looks like:

This is Verdana, +3-sized, Dark Red

Remember, you can also use the commands for bold and italic. There are two versions of each:

Bold:	<b> </b>	<strong> </strong>
Italics:	<i> </i>	<em> </em>

In addition, there are other commands to control font sizes:

Smaller:	<small> </small>
Larger:	<big> </big>

With the <small> and <big> commands, you just repeat the commands again and again to make the fonts smaller and smaller, or larger and larger. These are often used, but I find them a bit clumsy; the FONT command is easier to use.

This is pretty much the only font styling you can do with normal HTML code. If you learn CSS, you can do much, much more.

Live HTML Exercise

Use the commands B, STRONG, I, EM, BIG, SMALL, and FONT (with all attributes) in the exercise window below.

Images

Next, let's learn to put images in the web page. Two things you must check BEFORE placing an image in your web page:

Make sure the image is already saved in the same folder as the web page; and
Make sure the image name follow the rules (lowercase, no spaces, etc.)

If all os OK, then let's look at the image command. The command is simply <img>. However, like the FONT command, the IMG command does nothing by itself; it must have attributes.

The most important attribute is src="filename". This is necessary, telling the browser where to find the image. The most basic image command must have this:

<img src="myphoto.jpg">

That's the basic command.

Location Complications

If the image is located in another folder, then that information must be included. Let's say you have a folder inside your web site folder; the second folder is called "images." The command would then look like:

<img src="images/myphoto.jpg">

Note the "/" after the folder name. A "/" means that the previous name is a folder name.

If the image is in a folder "above" (or "outside") the folder with the web page, they you need to add "../" before the image name:

<img src="../myphoto.jpg">

"../" says to go "up" one folder.

However, it is best for now to simply put all your images in ONE folder, and avoid the troubles of more complex addresses.

You can modify an image with a variety of attributes:

Attribute	Value(s)	Explanation
alt=	"text"	Gives text which is displayed when the image cannot be seen.
height=	"number"	Changes the height from the actual number of pixels to a number you set. If you do not set the "width," then it automatically changes by the exact same percent to keep the picture balanced.
width=	"number"	Like "height," but sets the width. Again, if you set only the width and not the height, the height changes in correct proportion.
border=	"number"	Sets a solid color border of x pixels around the image.
align=	"left", "right"	LEFT align will put the image on the left side of the area, and any text or toher objects will WRAP around to the right. RIGHT align will do the opposite. If you don't set any alignment, then the image will try to stay inline with the text, with only one line of text on the image's left or right.
hspace=	"number"	sets a margin on the left and right sides by x pixels.
vspace=	"number"	sets a margin on the top and bottom sides by x pixels.

An example of an IMG command using all attributes:

<img src="myphoto.jpg" alt="my photo" align="right" height=320 width=480 border=1 hspace=6 vspace=4>

Notes on Images

File Types: Only three file types are allowed for web pages: GIF, JPG, and PNG. You should never use BMP, TIF, or PSD files--they are much too large.

Image Sizes: People with slow Internet connections can't wait around for huge images. Make sure that your images are 100 KB or less. Image size is also measured in pixels; even large images should not be bigger than 800 pixels wide. 400 pixels width is a medium-sized image, and 200 pixels wide is rather small.

Ownership: Technically, you should only use public-domain or private images which you own. However, most people use images they find on the Internet, without asking permission. It's not 100% OK, but it is widely practiced and most people accept it. In an academic web page, you should at least cite where you got the image. For this class, I do not require citation, but a link to the source would not be a bad idea. Images found on WikiPedia are often free for non-profit use.

Hotlinking: "Hotlinking" is when you put a full web URL in the "src" attribute instead of linking to an image in your web site folder. Hotlinking is considered bad netiquette, worse than "stealing" an image. Please do not do this in this class.

Live HTML Exercise

Use the image command and all of its attributes in the exercise window below. Use the following image file names (I have included them in this site so they will appear when you call them): cat.jpg, luis.jpg, sachi.jpg.

Links

Links are the heart of the World Wide Web. Links are what made the web popular--you can so easily jump from one page to another. Links can be text or images; with special coding, even table images can be links.

The link command is simple: "a". That's it, one letter. Like the FONT and IMG commands, by itself it won't work; you need at least one attribute, "href" (the "reference"), which describes where the link goes to. An example of a link command would be:

<a href="page2.html">

If the reference is a simple filename, such as above, then the link will go to a web page located in the same folder.

If the reference is a full URL, then it can jump to any page on any web site:

<a href="http://blogd.com/wp/index.php/archives/3749/">

Notice that the above link dpes not specify an HTML file, but a folder. If the link ends in a "/", then it is pointing to a folder. When a browser is directed to look in a folder, it automatically seeks out the "index" file (usually "index.html"). Otherwise, it will give a "directory (folder) listing" of files, or it will return an error.

Link Attributes:

Attribute	Value(s)	Explanation
href=	"filename or URL"	Tells the browser which file to jump to.
target=	"_blank"	Makes the linked file open in a new window or tab. Other target values include "_self", "_top", and "_parent". Those last three, however, are used only for web pages with frames, which we will not use.

Live HTML Exercise

Use the link commands in the exercise window below. If you click the links you make, they will appear in the lower part of the window. Try using the attribute target="_blank" to make the link open in an new window or tab. Don't forget the underscore before the word "blank".

Now You Know

Now you know how to use pretty much all the HTML commands you will need for this class. You are ready to start making more complex web pages using software like Composer.