Quick Links
[Basic Tables] [1stPage] [!Virus Writers!] [Color Tables]
[Colors Comparison] [Learning HTML] [Graphics Primer] [Rantz'n'Ravz]
Graphics: An HTML Primer
<CENTER><H2>Graphics: An HTML Primer</H2></CENTER><HR WIDTH="50%">'Morning (signified with an eye-opening gulp of coffee...)!' Today, I'm going to start trying to teach how to get the most out of GIFs and JPGs, the most widely used picture formats on the Internet. Although I'm using .gifs for all of my examples on this page, these instructions will work the same for files with a .jpg extension. If you are familiar with web pages that I've written, you'll know that I'm not too big on using background graphics...but, this page does have a background graphic, in order to use it as an example for how I coded it, later on. All of these examples are shown as they're written, from the source code side of things, so, feel free to copy & paste these examples into documents you're crafting, tailoring them to the names of files that you have. Of course, if you are successful at pulling up the source code for this page, you can check it out right now!
The reason that I'm not the biggest user nor fan of gratuitous graphics, despite more graphics seeming to make 'coolness', is because I'm tired of putting my browser on graphics-heavy web pages, that take 10-15 minutes to load...the worst part about those long-loading pages is that although they might be more cool (rad, bad, whatever...) than a low-graphics page, boredom while waiting isn't cool. Also, most graphics usually don't live up to the old-time sentiment that 'a picture is worth a thousand words', so, I guess that keeping my graphics usage to a minimum is also a plea for a high bandwidth (value) to noise (wastage) ratio -- which will always be a concern with the Internet. If the graphics you use aren't adding anything to the page, what are they being used for, at all? Although I like a few animated GIFs, I'm of the opinion that having moving pictures often makes reading text a bit more difficult because you seem to have something pulling your eyes elsewhere! Ok, I'm crawling down from my soapbox.
Graphics
<CENTER><H3>Graphics</H3></CENTER><HR WIDTH="33%">Here's a simple one, a graphic centered on a page: <CENTER><IMG SRC="back.gif" WIDTH=55 HEIGHT=55 ALT="[Running Man Gif]"></CENTER>
![[Running Man Gif]](back.gif)
Ok, Centered, with a simple table around it: <CENTER><TABLE BORDER="3"><TR><TD><IMG SRC="back.gif" WIDTH=55 HEIGHT=55 ALT="[Running Man Gif]"></TD></TR></TABLE></CENTER>
|
Now, Centered, in a table with a slightly larger border, and, as a link, to the bottom of this page: <CENTER><TABLE BORDER="5"><TR><TD><A HREF="#BOTTOM"><IMG SRC="back.gif" WIDTH=55 HEIGHT=55 ALT="[Running Man Gif]"></A></TD></TR></TABLE></CENTER>
|
If you want to get rid of the link-color border, inside the table, you need to add a BORDER="0" to the IMG SRC tag: <CENTER><TABLE BORDER="5"><TR><TD><A HREF="back.gif"><IMG SRC="back.gif" BORDER="0" WIDTH=55 HEIGHT=55 ALT="[Running Man Gif]"></A></TD></TR></TABLE></CENTER> This graphic is linked to itself, without the page, to make it easier to save a copy of it...linking gets easier the more it's practised, just as does HTML, so, grab these graphics, save this page, and practise taking the various parts of it apart, and try putting them together, differently!
|
Now that you've got pictues, tables, links, and 'centered' down pat, let's try graphics placement. Here we go, ready or not: This graphic is aligned left. Here's how the code looks: <IMG SRC="back.gif" ALIGN="LEFT" WIDTH=55 HEIGHT=55 ALT="[Running Man Gif]">. I don't use too many graphic files, so, I'm not as much an 'expert' in HTML & graphics as I probably should be. However, from what I've read, the text should scroll around the edges of graphics using the ALIGN tag, at least until you add a <BR>. Oops, getting a little far ahead there. A <BR> is what is called (at least by me) a hard break. For old-timers, it's easiest to think of as hitting the return-carriage bar on a manual typewriter; the page ends the line it's on, and gets ratcheted to the next line. A double <BR> would end the line you're on, and take you down two lines, thusly...
<BR><BR>Yes, this graphic is aligned to the right. Same coding as the left alignment, except replacing the 'left' with 'right'. Since I'm trying to demonstrate the way the text will wrap, I can use this room for some further instruction! There are still people out there using text-only browsers. To make a page both faster-loading, and, more comprehensible to text-only browsers, there are ALT tags used to label your graphics, and WIDTH & HEIGHT specifications (in pixels) that makes your graphics almost 'pre-formatted'; so the browser can make space for them before they even start downloading. Like this: <IMG SRC="back.gif" ALIGN="RIGHT" WIDTH=55 HEIGHT=55 ALT="[Running Man Gif]">. Go ahead and let your mouse rest on any of these graphics, and see what comes up in the browser window...in the ALT tag, everything between the quotes shows.
Let's try aligning graphics to text: -- -- -- -- (text center-line).
Here's the coding, for all three graphics, as they appear: <IMG SRC="back.gif" ALIGN="TOP"><IMG SRC="back.gif" ALIGN="MIDDLE"><IMG SRC="back.gif" ALIGN="BOTTOM">. What these commands do is align graphics to the text. TOP aligns the top of the graphic with the top of the text; MIDDLE aligns the middle of the graphic with the middle of the text, and; BOTTOM aligns the bottom of the graphic with the bottom of the text. Simple, no? But sort of backwards...
Background Graphics
<HR WIDTH="25%"><CENTER><H3>Background Graphics</H3></CENTER><HR WIDTH="25%"> |
An alternative to using any graphics from your own web directory is to instead link to others' graphics, either for general graphics or backgrounds. For example, I could change my BACKGROUND tag to read BACKGROUND="http://www.geocities.com/SiliconValley/Pines/6986/m0od8g8i.gif", and, I'd have the exact same background, although it took a few more typed words to get it. Anyone, who's web page is on a server anywhere, could use the above coding, and use this background graphic as theirs...this linking of graphics is usually frowned upon, because you can effectively use someone else's images, and, at the same time, tie-up that web pages' Internet server! If you're a WebTV user, without a computer users' ability to upload graphics, your best option for images is to link to others' graphics, or, to give a good, trusted, computer using friend your password, and hope that they upload graphics for you, without any shenanigans!
As a variation on this theme, anyone who has a web page through GeoCities could link to this background graphic using BACKGROUND="/SiliconValley/Pines/6986/m0od8g8i.gif", because we all share the http://www.geocities.com part of the URL, since we're on the same Internet server computer! If you choose to use others' graphics and server resources, it's best Netiquette to ask them if you can use their images on your pages...that way, you're covering your bases, and, if someone knows that their images are being used, they might be less likely to change them as often! The downside to linking others' graphics to your pages is that you're relying on those graphics to remain at that Internet address/URL, instead of relying on something located within your own web pages' directory...also notice how your browser's downloading time gets lengthened as this location/server needs to go out and grab an image from another location!
Here's an example of what I'm talking about: (<CENTER><TABLE BORDER="3"><TR><TD><A HRE="http://home.earthlink.net/~jsbarta7/index.html"><IMG SRC="http://home.earthlink.net/~jsbarta7/relax.gif" BORDER="0" WIDTH=125 HEIGHT=122 ALT="['Relax' Graphic]"></A></TD></TR></TABLE></CENTER> - Thanks, Jeff!):
![['Relax' Graphic]](http://home.earthlink.net/~jsbarta7/relax.gif) |
If you would like to check to see if a certain image file is actually in my directory, such as 'dzr.gif', all that you need to do is to move your cursor up to the Internet address/URL entry line, near the top of your browser window. It's the line that has this typed into it: 'http://www.geocities.com/SiliconValley/Pines/6986/gprimer.html'. Anyway, put your cursor in that window, click to highlight it, then, click it again (not a double-click, but two slooow clicks). This should leave you with a window, the above address/URL, and a cursor blinking on the right end of it. Now, using your backspace button, clip the gprimer.html off of the end of the URL, making sure to leave the front slash (/). Next-to-last, type-in dzr.gif, or, marbled.jpg, where gprimer.html used to be, and, finally, hit your enter button. If a specific file is residing in my directory, that file should pop-up in a window by itself. If a certain file isn't in my directory, you will always get an Internet Error Message; basically that the server cannot find the file you're looking for.
![[Animated Mail Picture]](mail.gif){kind=small}
I hope that this page has made some bit of HTML and web page writing a shade clearer, and, perhaps answered some questions that you've been having. If, instead, this page has made things more confused and befuddled, go ahead a drop me a line because I need to clarify the things that are wrong! Here is the source code for this page; go ahead and click it if you're curious. I think that you'll find the way that I begin and indent paragraphs pretty unusual. BEWARE! it's messy!! <FONT COLOR="CHARTREUSE">BEWARE!</FONT> it's messy!!<BR><HR WIDTH="75%">
Basic Tables
To remember the TABLE commands, like TR, TH,and TD, I convert them to TableRow, TableHeader, and TableData. The TR starts all of the rows, and a /TR will end all of those rows. The THs & TDs are the containers that make up the rows.
| TH | TH | TH |
|---|---|---|
| TD | TD | TD |
Note how the contents of a TH cell are bolder than those of a TD cell.
Here's a simple table: <TABLE BORDER WIDTH="50%"><TR><TH>Head</TH></TR><TR><TD>Simple Table </TD></TR></TABLE>
| Head |
|---|
| Simple Table |
Okay, let's add an ="6" to that TABLE BORDER tag:
| Head |
|---|
| Simple Table |
Now, if you remove BORDER, all together:
| Head |
|---|
| Simple Table |
You still have a table, but, the BORDER isn't there...let me change it's BGCOLOR:
| Head |
|---|
| Simple Table |
Above shows the text default, justified to the left. If you add either ALIGN= "RIGHT" or "CENTER" to the TD tag, the text changes position:
| Head |
|---|
| Simple Table |
| Head |
|---|
| Simple Table |
If you put the ALIGN= command inside the TR tag starting that row, the text in every TD in that row will be justified that direction.
The TH tag apparently centers it's enclosed text automatically.
You can specify the size of your tables by choosing COLSPAN (Columns), and/or ROWSPAN (Rows, duh), but, those are beyond the scope of this mini-tutorial. I guess that the easiest way to size tables is determined by the contents put into them. Your tables will fit themselves perfectly to the text you type in, or the graphic inside!
| ©1997 Tim Folker, all rights reserved |
![['Designed with Microsoft Notepad' GIF]](notepadc.gif){kind=small}
<IMG SRC="notepadc.gif" WIDTH=300 HEIGHT=40 ALT="['Designed with Microsoft Notepad' GIF]">
Back to the 1stPage
<BR>Back to the <A HREF="index1.html">1stPage</A><BR><HR WIDTH="30%">
