Let's learn how to ALIGN our graphics, text with graphics, and put borders around our graphics. The default for alignment of graphics is Left...so they will always go to the left side of the screen unless you tell them otherwise.
First, though, I would like to teach you the CENTER tags. You can put this set of tags around anything to center it on your page. The tags: <CENTER> </CENTER> Very easy!
Let's center the email link we created in the last lesson...
The code: <CENTER><A HREF="mailto:htmlhelp@wcnet.org"><IMG SRC="em4.gif" ALT="Email 4" BORDER=0></A></CENTER>
Okay...let's see what the different ALIGN commands can do for our graphics. The tag is ALIGN=" " just like before, but this time we will be inserting it in our IMG SRC tag. In fact, it will be inserted between the IMG and the SRC of this tag...and will look like this:
<IMG ALIGN=" " SRC="graphicname.gif">
Now...what to put between this new set of quotes...here are the choices, descriptions and examples:
<IMG ALIGN="LEFT" SRC="htmlhelp.gif">
<IMG ALIGN="CENTER" SRC="htmlhelp.gif">
Notice that the above center command did not work correctly? With most browsers the center command will not work with a graphic. You can use the CENTER tags I gave you above or you can use this tag to get it centered:
<P ALIGN="CENTER"> <IMG SRC="htmlhelp.gif">
<IMG ALIGN="RIGHT" SRC="htmlhelp.gif">
Use one of the alignment methods above for the htmlhelp.gif on your page.
Graphics are great to add to your pages, sometimes we want to add pictures and put some text with them. There are several ways for wrapping text around your pictures and/or graphics. We are still going to use the IMG ALIGN tag but a little differently. Here will be our choices:
Please send me some email...send your comments, suggestions or questions and I will get back to you within a few days. Weekends might take a little longer for a reply. I am usually found on-line in the evenings and can also be reached via AOL Instant Messenger or ICQ.
See how the text starts right next to the graphic and keeps running down the side of it until it gets to the next line? This is the Left Alignment. Notice in the code below that the Paragraph <P> tag must be right before the image code for this to work like this.
Your code: <P><IMG ALIGN="LEFT" SRC="em4.gif">
What if you want the text to start on top of the picture? Just incorporate a part of your text between the Paragraph tag and the IMG tag. Like this:
Please send me some email... send your comments, suggestions or questions and I will get back to you within a few days. Weekends might take a little longer for a reply. I am usually found on-line in the evenings and can also be reached via AOL Instant Messenger or ICQ.
Actually you only have to insert a few of the words here and the rest will follow to complete the line before starting on the next line. Neat! :o]
Your code: Please send me some email...<IMG ALIGN="LEFT" SRC="em4.gif"> send your comments, suggestions.......
Please send me some email...send your comments, suggestions or questions and I will get back to you within a few days. Weekends might take a little longer for a reply. I am usually found on-line in the evenings and can also be reached via AOL Instant Messenger or ICQ.
This works in exactly the same way as the Left Alignment, but the image is on the other side of the screen.
There is no way to align a picture in the center of the screen and have text wrap around it on both sides. You can center the image on the screen and have the text centered below like this:
Please send me some email...send your comments, suggestions or questions and I will get back to you within a few days. Weekends might take a little longer for a reply. I am usually found on-line in the evenings and can also be reached via AOL IM or ICQ.
There are two ways to do this code, in staying with the Align tags here is the first way:
<P ALIGN="CENTER"><IMG SRC="em4.gif"> <BR> Please send me some email...send your comments, suggestions or questions and I will get back to you within a few days. Weekends might take a little longer for a reply. I am usually found on-line in the evenings and can also be reached via AOL IM or ICQ.
And here is the way I would do it, getting the same results:
<CENTER><IMG SRC="em4.gif"> <BR> Please send me some email...send your comments, suggestions or questions and I will get back to you within a few days. Weekends might take a little longer for a reply. I am usually found on-line in the evenings and can also be reached via AOL IM or ICQ.</CENTER>
See...here it is:
Please send me some email...send your comments, suggestions or questions and I will get back to you within a few days. Weekends might take a little longer for a reply. I am usually found on-line in the evenings and can also be reached via AOL Instant Messenger or ICQ.
This tag will put a single line of text near the top of the image and drop the rest of the text below the image. Going back to the left alignment tags, it's set up the same way but change left to TOP.
Please send me some email...send your comments, suggestions or questions and I will get back to you within a few days. Weekends might take a little longer for a reply. I am usually found on-line in the evenings and can also be reached via AOL Instant Messenger or ICQ.
This tag will put a single line of text near the bottom of the image and drop the rest of the text below the image. Going back to the left alignment tags, it's set up the same way but change left to BOTTOM.
Please send me some email...send your comments, suggestions or questions and I will get back to you within a few days. Weekends might take a little longer for a reply. I am usually found on-line in the evenings and can also be reached via AOL Instant Messenger or ICQ.
This tag will put a single line of text near the center of the image and drop the rest of the text below the image. Going back to the left alignment tags, it's set up the same way but change left to BOTTOM.
Choose one of these alignments and add a picture/graphic to your page with some text wrapped around it.
Do you want to add a border around your graphic or picture? Here is an easy way to do this...the tag is <BORDER=" "> and will again go inside our IMG tag. The image border is a line that will appear around all four sides of your picture. The border size can be from 1-99, with 1 being the smallest border size. Remember from an earlier lesson we used the BORDER="0" to get rid of the border placed around a linked image. Now we can force a border around any image. Most people use this border tag for around photos, it gives them a nice finished off look. Here is an example of that on my Pemberville, Ohio Photos page.
Here is one of the normal email buttons we saw earlier: 
Let's add a border of 5 around this image...
The code: <IMG BORDER="5" SRC="em5.gif">
Let's add a border of 15 around this image...
The code: <IMG BORDER="15" SRC="em5.gif">
See how the borders just keep getting bigger and bigger? I think most people would stick with a border of 10 or less, after that the border gets to large.
Please use the email link below if you have any questions about your lesson.
