ECEN 1200 - Telecommunications 1

Peter Mathys, Fall 2006, 10/27/06

Homework/Computer Lab 8: Using a HTML Editor on your Computer, More about the Use and Placement of Images

How to Submit Solutions for this Homework/Computer Lab
Due Date:	Friday 11-03-06
E-mail To:
Subject Line:	HWCL 08
1'st Line:	Your name and student number

This computer lab is written for Windows 9x/2000/NT/XT based PCs, with a Mozilla/Firefox Browser or an Internet Explorer. Those portions of the lab that are not platform-specific can also be run on a Mac.

Goals of this Lab

The goals of this computer lab are:

• Download your homepage to a PC for editing.
• Install and use an HTML editor.
• Include images in your homepage.
• Testing and uploading your homepage.
• Make GIF files with transparent background.
• Horizontal and vertical image placement in HTML files.
• Learn how to validate HTML/CSS code.
• Use images as backgrounds.
• Scaling of images in HTML.
• Make a homepage with background that illustrates the use of different image attributes.

Programs to Download

For this lab you will need the following programs. If necessary, download them, unzip them, and then install them on your computer.

7-Zip is a file archiver with high compression ratio. It supports the 7z, ZIP, GZIP, BZIP2 and TAR formats for both packing and unpacking. Unpacking only is supported for the RAR, CAB, ISO, ARJ, LZH, CHM, Z, CPIO, RPM, DEB, and NSIS formats. The home page of 7-Zip is at http://www.7-zip.org.

EditPlus V2.21 is an Internet-ready, 32-bit text editor for Windows. It offers many powerful features for Web page authors and programmers and has powerful syntax highlighting for HTML, JavaScript, Perl, Java, C/C++ and any other programming language, based on the default syntax files or user-defined syntax files, for both the screen display and the printing. A spell checker (US version) is also available. The home page for EditPlus is at http://www.editplus.com.
Note: If you cannot install EditPlus because you have no administrator privileges, then you should use the files in epp221run.7z after unpacking (with the 7-Zip program) to a directory of your choice.

LViewPro 1.D/32 is a very compact image viewer, editor, and file format converter. The home page of LViewPro is at http://www.lview.com.

Download and Install EditPlus

To download Edit Plus, click on the link and then save the file epp221_en.exe in a directory of your choice, e.g., d:/downloads. Then click on "Start" (in the lower left corner), select "Run", and then "Browse" for epp221_en.exe as shown in the following screen snapshot.

Click on "Open", then "OK" to run epp221_en.exe. The following message should appear next, and you choose "Setup".

The default directory where the setup program will try to install EditPlus is shown next.

Depending on how the permissions are set in Windows 2000/XP on the computer that you use, you may or you may not be able to write to this default directory. If you do not get an error message when you click "Start Copy", then you can skip the next step. If you do get an error message, saying that Setup cannot copy files into this directory, then change the directory name to D:\ or to the one shown in the following figure (instead of "mathys", insert your own user name).

Now you should be able to follow the default prompts for the rest of the installation. Don't worry if you get a "Could not write the shell extension settings" message. This is not essential for the correct operation of the program. To start EditPlus, click on "Start", "Programs", "EditPlus 2", and then select "EditPlus 2".

Select the option "HTML tags in lower case" and then click "OK".

Creating an HTML Document in EditPlus

In general, there are two types of HTML editors:

1. Wysiwyg (what you see is what you get) HTML editors let you drag, drop, and format elements such as graphics and multimedia right on the page with little or no knowledge of HTML. The editor software takes care of the actual HTML coding behind the scenes. Microsoft Word (in HTML mode) or FrontPage, Macromedia Dreamweaver, and Fusion from NetObjects are examples of this type of editor.
2. Text-based HTML editors offer more precision and control than their Wysiwyg counterparts. Most of them resemble word processors, but you write code directly to an HTML editing screen rather than using drag and drop of objects and icons. Text-based editors often have toolbars, tabs, and menus to provide access to code-generation features, such as tag entry, layout styles, and global search and replace. An example of this type of editor is EditPlus.

The image below shows how to start a new HTML document in the EditPlus V2.21 text-based editor.

The next screen shows the HTML skeleton code that EditPlus puts into the new document. You can access and modify any of the tags which you see on the screen directly. To insert new tags, you click on the appropriate menu item on the toolbar. From left to right (just above the main window) you can choose boldface, italic, underline, font, color code from palette, non-breaking space, break, paragraph, heading, image, anchor, horizontal rule, comment, special character, table, center, block quotation, preformat, lists, and some more specialized items.

To make a quick and simple example of an HTML document, start with a heading of size 3. Click on the "Heading" button in the HTML toolbar and then select H3 as shown in the following figure.

Type the text for the heading between the <h3> and </h3> tags that EditPlus put at the current cursor location in your document. Then insert a paragraph and type some text. To make an unordered list, click on the "List" button and choose "Unordered List" as shown in the next screen snapshot.

To insert the tag needed for making a link, click on the "Anchor" button. The result is shown in the next image.

Now you can fill in the URL for the link and the linktext on which users can click. The next figure shows the result after adding a second link. It also shows another handy feature for starting a table with a given number of rows and columns.

For the first three entries the "F" (Font) button was used to obtain the tags for specifying a font size and color. The "border=1" attribute was entered manually. The second row of the table was used to test the "Bold", "Italic", and "Underline" buttons. The completed table is shown next.

To see how the page looks in a browser (the default browser that EditPlus invokes is the Internet Explorer), click on the "Browser" button on the left side of the HTML toolbar. The result looks like this:

To return to editor mode, click on the pencil symbol in the HTML toolbar. Suppose you want to change the background color. To do so, highlight the bgcolor attribute value in the body tag as shown in the next image.

Then click on the "Palette" icon in the HTML toolbar. This brings up a "color picker" table as shown in the next screen snapshot.

Select the desired color and EditPlus will convert it to the correct hexadecimal number as shown next.

As you might recall, certain HTML tags like <u> or attributes, like size= and color= in <font>, are considered deprecated in HTML 4.01 and should be replaced by using CSS style declarations. The screen snapshot below shows example.html that was used in this section to try out EditPlus with the deprecated elements replaced by style declarations.

Download your Homepage for Editing

Before you can edit your homepage in EditPlus (or any other HTML editor that runs on your computer), you need to download it from your WebFiles account. Log in and change to the www directory. You should see a display similar to the following.

Then click on the "Edit" icon of the file you want to download and select a directory on your computer to save it, as shown in the figure below.

You can also select the file(s) you want to edit and then click on "Download" to download the file(s) in the form of a ".zip" archive.

Including Images with EditPlus

To include an image in an HTML document, you have to place an <img> tag in your HTML document. When you click on the corresponding button in the HTML toolbar of EditPlus (11'th button from the left, adjacent to anchor symbol), then a dialog box like the one in the following screen snapshot pops up:

Click on the image that you would like to include.

After clicking on the desired image (in this case in the same directory as the HTML file), the result looks like this in EditPlus:

Note the width and the height attributes whose values were automatically inserted by EditPlus. These attributes are optional but, when present and set correctly, can speed up the rendering of the HTML document in a browser.

If you do not have the actual image available when you edit the HTML document, then you can insert an empty img tag in EditPlus by holding down the shift key while clicking the "Image" button on the HTML toolbar. As a minimum, you need to enter the filename of the image. Browsers can in general display GIF, PNF, and JPEG images directly (don't use any BMP images!). You should also fill in a verbal description of the image in the alt attribute of the image tag.

To test how the HTML file, together with the image (if available), looks in a browser, click on the "Browser" symbol at the left end of the HTML toolbar. The result is shown in the following figure.

The main goal of this computer lab is to further explore the possibilities that you have in HTML for including and positioning images (without the use of tables). You will have to create a WWW page similar to myfishtank.html which uses the image tag with several different attributes for controlling the placement of images. The end result is shown in the following figure.

Test and Upload your Homepage

Before you upload your HTML document, test its appearance in a browser on the computer where you do your editing. Then upload it to the www subdirectory of your WebFiles account as shown in the following figure.

Note: If your WWW page also contains images (or audio files), then the corresponding files must be uploaded separately.

Validate your HTML/CSS Code

The World Wide Web Consortium (W3C) offers a free HTML Validator service at http://validator.w3.org. To validate the HTML code in example.html, for example, you enter the full URL http://ece.colorado.edu/~mathys/ecen1200/hwcl08/example.html in the address field of the validator as shown below.

If no errors in the markup code are detected, then you see a screen similar to the following, otherwise the validator tells you in which line(s) errors were detected.

A similar service is available at http://jigsaw.w3.org/css-validator to validate Cascading Style Sheets (CSS). You should always check your HTML code first and the validate the CSS declarations.

Transparent GIF Images

GIF images saved in the GIF89a standard allow the definition of a (single) background color that becomes transparent when the image is placed on a background or on top of a background image.

The image on the left was saved using the GIF87a standard. For the image on the right, light gray was first selected as background color and then the image was saved using the GIF89a standard.

To save an image with transparent background in LviewPro, you proceed as follows:

Under "Retouch" select " Background color..." as shown in the image on the right.

In the color palette window which is shown in the image on the left you can then select one of the displayed colors as the background color. If you are not shure which of the entries corresponds to the color you want to select, click on "Dropper" to pick up the desired color from the image. Then click on "OK" and select once more "Retouch" and then "Background color..." . The color that you picked up with the dropper will now be marked with a frame around it and its index and R,G,B values appear underneath the palette.

Next, select "File" and then "Properties" as shown in the image on the right. A screen, similar to the one shown below, will pop up. Select the "GIF" tab and make sure that the box "Save Transparent Color Information to GIF89a Files" is checked as shown below. Click on "OK". Finish the whole operation by saving the image as a GIF 89a file (click on "File", then on "Save as..." and select "GIF 89a" as file type).

Vertical Image Placement in HTML

Images, inserted with the <img src="image_filename"> tag, are considered inline elements and are treated like characters or words in a paragraph. The default vertical alignment of images is to align the bottom of the image with the baseline of the surrounding text. The following notions for describing different vertical positions within a line of text are used:

Top

The top of the tallest item (including both text and images) on the line.

Texttop

The top of the tallest text item on the line (this may coincide with the top defined above).

Baseline

The line on which text is written. Ascenders go above the baseline and descenders go below the baseline.

Middle

The middle of the image is aligned with the baseline of the sourrounding text.

Bottom

The bottom of tallest text item on the line. Often taken to be the same as baseline.

Absbottom

The bottom of the lowest item (including both text and images) on the line.

The following table shows the effect of the vertical alignment attributes top, texttop, and middle.

HTML Markup	Resulting Browser Display
<img src="t48b.png" alt="T"   align="bottom" />his image: <img src="stop.gif"   alt="STOP" align="top" /> uses <tt><b>align=&quot;top&quot;   </b></tt>	his image: uses align="top"
<img src="t48b.png" alt="T"   align="bottom" />his image: <img src="stop.gif"   alt="STOP" align="texttop" /> uses <tt><b>align=&quot;texttop&quot;   </b></tt>	his image: uses align="texttop"
<img src="t48b.png" alt="T"   align="bottom" />his image: <img src="stop.gif"   alt="STOP" align="middle" /> uses <tt><b>align=&quot;middle&quot;   </b></tt>	his image: uses align="middle"

The next table shows the effect of the vertical alignment attributes baseline, bottom, and absbottom.

HTML Markup	Resulting Browser Display
<img src="t48b.png" alt="T"   align="texttop" />his image: <img src="stop.gif"   alt="STOP" align="baseline" /> uses <tt><b>align=&quot;baseline&quot;   </b></tt>	his image: uses align="baseline"
<img src="t48b.png" alt="T"   align="texttop" />his image: <img src="stop.gif"   alt="STOP" align="bottom" /> uses <tt><b>align=&quot;bottom&quot;   </b></tt>	his image: uses align="bottom"
<img src="t48b.png" alt="T"   align="texttop" />his image: <img src="stop.gif"   alt="STOP" align="absbottom" /> uses <tt><b>align=&quot;absbottom&quot;   </b></tt>	his image: uses align="absbottom"

Horizontal Image Placement in HTML

Horizontal alignment options include alignment of the image with either the left or right edge of the page, centering an image between the left and right edge of the page, and control over the textflow around left- or right-aligned images. The default is to align images with the left edge of the page. The following table shows the different horizontal alignment options for the case when no text is flowing around the images.

HTML Element(s)	Resulting Display
<img src="designs.png"   alt="A Small Design">
<p align="center">   <img src="designs.png"   alt="A Small Design"> </p>
<p align="right">   <img src="designs.png"   alt="A Small Design"> </p>
<center>   <img src="designs.png"   alt="A Small Design"> </center>

By default, all text (within the same paragraph) following a left- or right-aligned image flows around that image. If both a left- and right-aligned image are specified, then the text typed after the img tags of the images flows between the images until the bottom of the images is reached. The following table shows an example for each case. Note that the attributes hspace=h and vspace=v, where h and v are integers, are used to add horizontal and vertical space (measured in pixels) around an image.

HTML Element(s)	Resulting Display
The French movie <img src="umbrella.gif"   align="left" hspace="10"   alt="umbrella" /> <i>Les Parapluies de Cherbourg</i> (The Umbrellas of Cherbourg) is a bittersweet romance that seems to say that people invariably marry the wrong person. <br clear="left" /> - Directed by Jacques Denny	The French movie Les Parapluies de Cherbourg (The Umbrellas of Cherbourg) is a bittersweet romance that seems to say that people invariably marry the wrong person. - Directed by Jacques Denny
The French movie <img src="umbrellar.gif"   align="right" hspace="10"   alt="umbrella" /> <i>Les Parapluies de Cherbourg</i> (The Umbrellas of Cherbourg) is a bittersweet romance that seems to say that people invariably marry the wrong person. <br clear="right" /> - Directed by Jacques Denny	The French movie Les Parapluies de Cherbourg (The Umbrellas of Cherbourg) is a bittersweet romance that seems to say that people invariably marry the wrong person. - Directed by Jacques Denny
The French movie <img src="umbrella.gif"   align="left" hspace="10"   alt="umbrella" /> <img src="umbrellar.gif"   align="right" hspace="10"   alt="umbrella" /> <i>Les Parapluies de Cherbourg</i> is a bittersweet romance that seems to say that people invariably marry the wrong person. <br clear="all" /> - Directed by Jacques Denny	The French movie Les Parapluies de Cherbourg is a bittersweet romance that seems to say that people invariably marry the wrong person. - Directed by Jacques Denny

To prevent (or stop from a certain point on) text from flowing around a graphic, you use the tags

<br clear="left">, or <br clear="right">, or <br clear="all">

to stop text flowing around a left-aligned, a right-aligned, or in-between a left- and a right-aligned image, respectively.

Images as Backgrounds

The attribute background="image_name" inside the body tag (at the beginning of an HTML tag) instructs the browser to use the file image_name for tiling the background of the browser window. Here are some examples:

Here are the images that were used for the above backgrounds, enlarged by a factor of 2 and placed inside a border for better visibility:

Either .gif or .jpg images can be used as backgrounds. When you use a background image, make sure it does not have too much contrast (which makes the text on top of it difficult to read). Also, keep in mind that the larger the image is that you use as a background, the longer it takes for it to download, especially through telephone connections to the Internet.

Image Size, Borders and Spacers

These properties are controlled by the use of the following attributes inside the img tag:

height=m

Specifies the height of the image to be m pixels. If necessary, the image will be reduced or enlarged to fit the height specification.

width=n

Specifies the width of the image to be n pixels. If necessary, the image will be reduced or enlarged to fit the width specification.

hspace=h

Adds h pixels of space on both the left and right side of the image.

vspace=v

Adds v pixels of space on both the top and the bottom of the image.

border=b

Draws a border of line width b pixels around the image.

Examples are shown below.

HTML Tag	Resulting Display
<img src="peng.gif" align="left" hspace="10" width="128" height="168"> How do you like penguins best? When they come in their original size?	How do you like penguins best? When they come in their original size?
<img src="peng.gif" align="left" hspace="10" width="64" height="84"> How do you like penguins best? When they are still small and cute?	How do you like penguins best? When they are still small and cute?
<img src="peng.gif" align="left" hspace="10" width="64" height="168"> How do you like penguins best? Perhaps when they are tall and skinny?	How do you like penguins best? Perhaps when they are tall and skinny?
<img src="peng.gif" align="left" hspace="10" width="128" height="84"> How do you like penguins best? Maybe when they are short and chubby?	How do you like penguins best? Maybe when they are short and chubby?
<img src="peng.gif" align="left" hspace="10" width="64" height="84" border="2"> How do you like penguins best? Only when they are small and framed?	How do you like penguins best? Only when they are small and framed?

Images to Download

bass.gif, GIF file, size 430 x 158 (9 kB)

bear.gif, GIF file, size 225 x 172 (3 kB)

flamingo.gif, GIF file, size 186 x 254 (3 kB)

kitten.gif, GIF file, size 199 x 234 (5 kB)

penguin.gif, GIF file, size 127 x 169 (3 kB)

snail.gif, GIF file, size 188 x 76 (3 kB)

Backgrounds to Download

pool.jpg, JPEG file, size 257 x 129 (13 kB)

rocks.jpg, JPEG file, size 300 x 200 (22 kB)

underwater.jpg, JPEG file, size 768 x 432 (53 kB)

leaves.jpg, JPEG file, size 197 x 197 (14 kB)

stars.jpg, JPEG file, size 142 x 142 (3 kB)

flames.jpg, JPEG file, size 250 x 250 (10 kB)

clouds.jpg, JPEG file, size 165 x 165 (4 kB)

girskin.png, PNG file, size 200 x 200 (3 kB)

puzzle.jpg, JPEG file, size 96 x 96 (7 kB)

Questions you Have to Answer

To obtain credit for this homework/computer lab you need to answer the questions stated below. Send your solution to .

Questions:

1. List all distinct image alignment attributes that appear in the sample HTML page myfishtank.html. How many image alignment attributes were used altogether in this HTML document?
2. The use of the "align" attribute to specify horizontal and vertical image placement is considered "deprecated" in the W3C HTML 4.01 Specification. Go to the W3C Website and find out what that means, and what an alternative way of specifying horizontal and vertical image alignment is. Hint: Go to latest version of HTML 4.01, select the chapter on "Objects, Images, and Applets", and then the section on "Visual Presentation of Images, Objects, and Applets". You can also look at the sample HTML page myfishtank_css.html which has been written using HTML language and visual presentation statements as favored by the W3C.
3. Use the HTML/CSS validator services to check the following Web pages:
   1. v_align.html (check HTML)
   2. CowJumps.html (check HTML and CSS)
   Report the errors that were found and interpret the results.
4. Choose one of the images from the section Images to Download. You will need this image in the next question with a transparent background. Use LViewPro as described above to designate the light gray background as transparent and save the image using the GIF89a standard. In your solution to this homework/computer lab, write down the index and the RGB value of the color that you made the transparent background color.
5. Make a WWW page that contains at least the following elements:
   1. A background image of your choice.
   2. A heading.
   3. One of the images from the section Images to Download. You must convert this image such that it has a transparent background.
   4. One of the horizontal image alignment attributes or styles.
   5. One of the vertical image alignment attributes or styles.
   6. One of the attributes or styles that scale the size of the image.
   7. A paragraph of text.
   An example of a HTML document that satisfies these requirements is myfishtank.html or myfishtank_css.html. Make sure you test your WWW page after uploading. Check that all images appear, none refers to a drive (like C: or F:) on your local computer (it is best to use a different computer from the one on which you used EditPlus for this purpose), and all images have the read permission turned on for everyone. Then e-mail the URL of where the page can be found together with the rest of your solution for this HWCL.
6. Use the HTML/CSS validator services to check your WWW page (the URL that you are sending in for the previous question). Make corrections as necessary and/or defend your use of HTML/CSS markup that does not pass the validators.

©1996-2006, P. Mathys. Last revised: 10-30-06, PM.