Some Big Scrapbook Images

Here's some resized and reshaped scrapbook images, using the "width" and "height" attributes of the <img> tag. I also show images with "wrapped" text using the <img> tag "align=left | middle | right" attributes, and the <br> tag with the "clear=left | right | all" attributes.

A regular size, height-to-width ratio, WebTV logo
(width="50%")

A stretched WebTV logo
(width="500," height="150")

A squashed WebTV logo
(width="50%," height="500")

Note how the stretched and squashed logos lose some detail? This is due to the limited capability of our WebTV terminals' graphics hardware to redraw the gifs with different "aspect" (height-to-width) ratios. It's definitely noticable with "jpegs," and really looks bad with the low pixel density of "light" gif images. If you want to maintain the quality of your resized images; you should use an online imager, or let a computer using friend "tweek" your images for their specific application. Online Image Tools are at: ImageMagick, MyImager, and WebFX. There are many online image tools that you can search out using the major search engines.

If you are using published images, you should always put the image height and width "attributes" in your image HTML tags so your images will load as fast as possible. With the image dimension attributes present in the image tag, your browser can instantly draw the required image space and load the rest of the page before the image completely loads. Without these attributes; the browser must read the image file to know how much space the image requires, before loading the rest of the webpage.

If you are using scrapbook images, you should take them to an online imager to size them exactly as you need for their intended purpose, because scrapbook images are closed image files that you cannot add dimension attributes to with an image tag; unless, you publish the images on a webpage, and then place them on another webpage using the <img> HTML tag with height and width attributes – as I did with the big images above. Basically, your images should be a maximum of one-screen high – 378 pixels for WebTV on TV screens. Slide show photos should be this height at maximum, because you do not want viewers to have to scroll to see any slide show image.

If you want to resize published scrapbook photos by using the "height" and "width" lmage tag attributes; you must obtain the "original" photo "aspect ratio," so the resized photo will be exactly proportional to the original photo – or the resized photo will be distorted like the logos above. Go to an online imager and get the dimensions of the original photo, and use the simple "proportion" formula to compute the new image tag size attributes. As an example: the B&N banner is 392 x 72 pixels; so, to enlarge the image to full TV screen width (544 pixels), we use the formula: W1/H1=W2/H2 (a direct proportion) like this: 392/72=544/H2; which gives us; 392(H2)=39,168 (pixels); therefore: H2=100; which makes the new height 100 pixels, to maintain the same resized B&N banner aspect ratio. But hey, online imagers do this calculation for you, I just wanted to show you the basic image resizing math – yeah, I know grade school kids can do it; but, most of us have forgotten simple math, like "balancing our checkbooks," which our wives usually do for us, right guys?

If you have computer using friends or access to computers at your local Community College or University, you can customize your photos yourself. You or your friends can get graphics off the internet, or your webpages, by "right-clicking" an image and saving the image file on computer hard drives, floppies, or zip disks. You can then open the image file in a good graphics program and customize it anyway you like – change size, colors, backgrounds, etc. Then you can email the image file as an email attachment to your WebTV user name and add the image to your scrapbook. All our computer using friends do this for us, right? Yeah, after a case of Michelob and prime steak cookouts! Hey, I got tired of that crap and signed-up for a few Continuing Education classes, that along with my Student ID Cards, allows me access to many school computers with all the latest software to work with. Check your area out, folks; see if you can sign-up for computer courses in your area to learn this stuff. Hey, you may like it and buy one of the great computer bargains out their today!

Our WebTV screens are 560 pixels wide by 420 pixels high, with 36 pixels at the bottom for the "Title" bar. The side margins are 8 pixels each; and, the top and bottom margins are 6 pixels each. This makes the WebTV screen 560 x 384 pixels, and the "useable," after margin, WebTV screen space is 544 pixels wide by 372 pixels high. So why did I say images could be a "one-screen" maximum of 378 pixels high instead of the 372 "useable" pixel height in my comments above, especially for slide shows? Because; top margin is fixed at 6 pixels, while the bottom of a photo may be at the top of the title bar with the 6 pixel bottom margin space below the title bar. Yeah I know, that's "kinda cuttin' it close," folks; but, that's the pure math part of maximum photo size calculations. As a practical matter, remember: your title and caption heights have to be allowed for in this one-screen height calculation, especially for slide shows that should fill one screen with no-scrolling required. It's, just trial-and-error, folks – so use those online image tools to make your photos sized to fit as you want them displayed on your webpages.

The WebTV sidebar is 110 pixels wide, and 384 pixels high, including margins. So therefore our email page "useable space" (width, that is – height is infinite, up to maximum RAM) is 560 – (110 + 8 + 8) = 434 pixels. And, the maximum width of our signature box tables and images should be only 418 pixels, because our signature boxes also have the 8 pixel margins and goes inside the margin space of the email page; ie, 434 – (8 + 8) = 418 (pixels). But, it really doesn't matter about the width of emails from other domains (from computers), or other internet (www) webpages, our WebTV servers and client terminals resize external content into tables that fit our TV screens fixed (non-scrolling) widths. This causes heights to be variable, when widths are resized; but, it's OK, because our WebTV boxes can scroll vertically to read any height page, up to our box's maximum RAM. Webpages and email pages will be sized properly – even if the HTML code has different page size width dimensions, due to the WebTV browser's resizing capability.

Note: Signature box blinking marquees that use "scrollamount" attribute values that are based on marquee text length and signature box width in pixels, to calculate the marquee "scrollamount" attribute value, must use the exact signature box width noted above. Signature box blinking marquee "scrollamount" calculations are: (length of marquee text) + (side margin) = scrollamount (pixels) – basically, it's the distance in pixels from the side in the direction the marquee moves to the position of the first letter of the marquee text. Blinking marquees should always use "scrolldelay(s)" of 400 (milliseconds) or higher. If the marquee blinking text is longer (wider) than the signature box, or containing table, it will blink a short overlapping text. MSIE will see your blinking marquees; and you can put <blink> tags outside the marquee tags so Netscape browsers can see any marquee text blink. Thanks to Paul Erickson who helped me with this in summer '98.

Also, full width email signature box tables may look OK while you are writing an email or post; but, may cause table header and cells to "wrap" text when "sent" or "posted" because of the extra margin space required (16 pixels), as explained above. However; if you use the "nowrap" attribute in table <th>'s and <td>'s, WebTV will "squeeze" a few pixels (how much, I don't know – it varies) together from "cellspacing" and "cellpadding" to prevent minor wrapping of text in full width signature box tables.

Here's that "lovely" Barnes and Noble banner, with that "ugly" black part, we have at the bottom of every single PageBuilder webpage enlarged to "544 by 200 pixels (W x H). Notice that "sucker" didn't lose any detail!

OK, so it's not really that big; but, that big, ugly thing really stands out at the bottom of our webpages. It's just downright "tacky;" but, no way will WebTV and Barnes and Noble change it, unless we all complain about it to both WebTV and B&N! Here's another good reason to complain to WebTV and B&N about the banner. Hey folks, have you filed your complaint today?

Here's the other images enlarged to 50% page-width:

Here's the images as published on my Images webpage:

Below I use the image tag "align" attributes: "left," a flush left image; right," a flush right image; "middle," which aligns the baseline of the surrounding text with the middle of the image. Also, the "top" attribute aligns the surrounding text with the top of the image, and the "bottom" attribute aligns the text with the bottom of the image. WebTV's HTML support of the <img> tag is here.

Here's Beth's enlarged mailbox gif used as email links inside paragraphs with wrapped text:

This is just some long rambling text I wrote to show how to wrap around an image with HTML code, instead of letting PageBuilder wrap it for me. This is Beth's "light" mailbox gif that lost a lots of detail when I enlarged using the image tag width. She should have given us a good jpeg image. No, no, just kidding, Beth if you see this! It's a great image to use as an email link in our sig. boxes, or on our webpages. I've gotten a lots of images, midis, and other goodies from Beth since she started teaching us all about using PageBuilder ever since the program was first released. Bless her heart; she tells us all "like it is," and we all love her for it! I don't know where I'd be with PageBuilder if not for Beth. I probably would have given up on PageBuilder webpages long ago, lost interest because of not understanding it enough to make it fun. This happens to a lots of WebTV PageBuilders.

Hey, doesn't that right-aligned, left-wrapped image and text look like "crap?" Look at the jagged text line next to the images. This is the way right-aligned images and left-wrapped text work.

OK, now look below at that same image left-aligned, with right-aligned text. What an improvement. See the straight borders between the text and image. You should always use left-aligned images and right-wrapped text on your pages for best appearance. Note: In all the image paragraphs here, you can use the image tag attributes "hspace" and "vspace" to add aditional clearance space, in pixels, between the text and images.

This is just some long rambling text I wrote to show how to wrap around an image with HTML code, instead of letting PageBuilder wrap it for me. Hey, doesn't that look better? This is really neat! This is Beth's "light" mailbox gif that lost a lots of detail when I enlarged using the image tag width. She should have given us a good jpeg image. No, no, just kidding, Beth if you see this! It's a great image to use as an email link in our sig. boxes, or on our webpages. I've gotten a lots of images, midis, and other goodies from Beth since she started teaching us all about PageBuilder ever since the program was released. Bless her heart; she tells us all "like it is," and we all love her for it! I don't know where I'd be with PageBuilder if not for Beth. I probably would have given up on PageBuilder webpages long ago, lost interest because of not understanding it enough to make it fun. This happens to a lots of WebTV PageBuilders.

Now, lets put Beth's mailbox gif inside a paragraph and wrap text around the top, both sides, and the bottom. Also, note that I made the image a clickable email link. Try it, I put a comment in the subject line of your email message.

This is just some long rambling text I wrote to show how to wrap around an image with HTML code, instead of letting PageBuilder wrap it for me. This is Beth's "light mailbox gif that lost a lots of detail when I enlarged using the image tag width. She should have given us a good jpeg image. No, no, just kidding, Beth if you see this! It's a great image to use as an email link in our sig. boxes, or on our webpages. I've gotten a lots of images, midis, and other goodies from Beth since she started teaching us all about using PageBuilder ever since the program was first released. Bless her heart; she tells us all "like it is," and we all love her for it! I don't know where I'd be with PageBuilder if not for Beth. I probably would have given up on PageBuilder webpages long ago, lost interest because of not understanding it enough to make it fun. This happens to a lots of WebTV PageBuilders.

The above paragraph shows a problem with putting images in the middle of a paragraph of text. As I coded (see source code link below) it here, the image drops below the text above and breaks into the first line below. If I had put the "align="middle" attribute in the image code, a single line would drop down with the image centered, and half of the text line would center-align with the image on each side. But, that's just like simple inline image code that can be inserted anywhere on your webpage . I did it this way to show the image embed in the line below.

OK, now let's look below at the above paragraph with the "align=middle" attribute in the image tag. See what I meant by: "a single line will drop down with the image centered, in the paragraph below? That really looks "tacky" doesn't it? But, that's just the way HTML image "align" attributes works.

The <br> tag with attributes "clear=left," "clear=right," and "clear=all," can also be used after images to do similar image/text alignment, as noted below, respectively. The image tags contain "align" attribures, and by using the "clear" attribute, the text wraps the sides, or "clears" past the bottom of the image. View the source code, see how the attributes affect the alignment of text and images. WebTV support for the <br> tag is here.

This is just some long rambling text I wrote to show how to wrap around an image with HTML code, instead of letting PageBuilder wrap it for me.
This is Beth's "light" mailbox gif that lost a lots of detail when I enlarged using the image tag width. She should have given us a good jpeg image. No, no, just kidding, Beth if you see this! It's a great image to use as an email link in our sig. boxes, or on our webpages. I've gotten a lots of images, midis, and other goodies from Beth since she started teaching us all about using PageBuilder ever since the program was first released. Bless her heart; she tells us all "like it is," and we all love her for it! I don't know where I'd be with PageBuilder if not for Beth. I probably would have given up on PageBuilder webpages long ago, lost interest because of not understanding it enough to make it fun. This happens to a lots of WebTV PageBuilders.

It is suggested for good image page design, that you always include "alt" text messages inside all image tags. Browsers that do not display images – non-graphic browsers, and browsers with graphics turned-off, will see the alternate message describing the graphics. Browsers with graphics turned-off will see a small graphic "icon" beside the alternate text, letting the viewer know that a graphic is available. Our PageBuilder webpages cannot be certified for accessability by "vision-impared" persons who use special "text-reader" software to read the image tag "alt" attributes' text description of the image; because that ugly, black Barnes and Noble banner does not have an "alt" text code in its' image tag! Go to cast.org to read about their "Bobby" website accessibility certification program. So, come on, folks; let's get our complaints to WebTV and B&N, loud and clear, to change that damned, ugly, black part of the B&N banner image, and add "alt" text to the image tag!

Also, you should always include the "onError" and "onAbort" "event handler(s)" in your image tag HTML code. The "onError" event handler call a script for alternative action – other image, website, text, etc. – when an image fails to load because of problems with transmitting the image file. The "onAbort" event handler calls a script when computer using viewers hit their browser "Stop" button to halt the loading of a large image. Typically, the onAbort "event" will call a script for an "alert" pop-up that will say something like: "You really missed a great photo! Please return when you can view all my images."

When you use a webpage background "gif" or "jpg" image; you should always include the "bgcolor" attribute in the body tag, to provide a background color while the background image is loading. Typically, the bgcolor would be a close match to the background image color; as an example: for this webpage, I would use a "purple" bgcolor to match this "purple-weave" background. But, you could have a different, contrasting color for a splash effect. To illustrate the use of a bgcolor attribute with a slower loading background image; reload (Cmd-R) this webpage to see the "skyblue" bgcolor appear immediately, followed by the slower loading "purple-weave" background from my published images webpage. In fact, during peak hour heavy WebTV webserver loads, your background images may not even load from your image pages, or reload attempts will lose your background images. If you didn't have a designated "bgcolor" in the body tag, you would get a funky "default" bgcolor that may cause your text to disappear. So folks, always use a bgcolor with background image tag attributes.

This is all we can do using HTML image and paragraph alignment attribute codes. We can use tables, including "nested tables," with "colspan" and "rowspan" attributes to neatly embed images inside text – but, you will still have the "smooth left margin, jagged right margin" text I noted above. We can use CSS positioning with "nested" divisions, hidden (for mouseovers) images, and frames can be used for dazzling effects – but, is another subject(s) for later.

Click here to see these images on my published image page.

View my webpage about using "relative" URL's for images.

Click here to return to my "ImgMgk" webpage, or press your "Back" key if you just came from there.

JaxRed