A graphic discussion

[DoctorDoom]

When posting images using HTML, there are possibilities that UBB cannot offer. Note: the space after each '<' prevents the code from being activated.


The first useful item is "align". This allows formatting the position of the graphic and the text. For the demo, we'll use Ralph up there at the top.


<font color="crimson">< img src="http://freeconservatives.com/pics/area51.jpg" align="left" /></font>

This locates the graphic at the left edge of the screen, and text that follows it will start at the top of the graphic and "wrap" around it if it extends beyond the bottom.

<font size="5">http://freeconservatives.com/pics/area51.jpgTesting align="left"</font><br clear="all" />


<font color="crimson">< img src="http://freeconservatives.com/pics/area51.jpg" align="right" /></font>

This locates the graphic at the right edge of the screen, and text that follows it will start at the top of the graphic and the left margin, again wrapping around it if it extends beyond the bottom.

<font size="5">http://freeconservatives.com/pics/area51.jpgTesting align="right"</font><br clear="all" />


<font color="crimson">< img src="http://freeconservatives.com/pics/area51.jpg" align="middle" />[/b]</font>

This locates the graphic at the left edge of the screen, and text that follows it will start at the middle of the graphic.

<font size="5">http://freeconservatives.com/pics/area51.jpgTesting align="middle"</font><br clear="all" />



This can be further refined by using the < center> < /center> codes on the text to be displayed. It will center them between the inner edge of the graphic and the opposite margin. This will NOT work properly with "align=middle".

<font color="crimson">< img src="http://freeconservatives.com/pics/area51.jpg" align="left" />< center>Text< /center></font>

<font size="5">http://freeconservatives.com/pics/area51.jpg<center>Testing align="left"</center></font><br clear="all" />

<font color="crimson">< img src="http://freeconservatives.com/pics/area51.jpg" align="right" />< center>Text< /center></font>

<font size="5">http://freeconservatives.com/pics/area51.jpg<center>Testing align="right"</center></font><br clear="all" />


One important thing to know is that if one wants to end the text before it reaches the bottom of the graphic, use this code:

< br clear="all" />

This terminates the alignment and resumes the text at the left margin on the next line after the graphic.



For the next step, note that the text abuts the graphic on align="left" and align="middle". The way around that is to leave space on the sides of the graphic. This is done by using "hspace="#" as follows (# is the desired space in pixels):

<font color="crimson">< img src="http://freeconservatives.com/pics/area51.jpg" align="left" hspace="8" /></font>

<font size="5">http://freeconservatives.com/pics/area51.jpgTesting align="left" hspace="8"</font><br clear="all" /><br clear="all" />

<font color="crimson">< img src="http://freeconservatives.com/pics/area51.jpg" align="middle" hspace="8" /></font>

<font size="5">http://freeconservatives.com/pics/area51.jpgTesting align="middle" hspace="8"</font><br clear="all" />

Using hspace on a right-aligned graphic will prevent the right end of the text from butting against it.


There is an equivalent "vspace=" tag for separating the graphic from text on the top and bottom. Note that for both hspace and vspace, it works on both sides at once. Ergo, hspace will move the whole graphic right that much from the left margin or vice versa.



The last useful code for the moment is "border=". This code puts a black border of the specified number of pixels high and wide around the entire graphic.

<font color="crimson">< img src="http://freeconservatives.com/pics/area51.jpg" align="left" hspace="8" border="4" /></font>

<font size="5">http://freeconservatives.com/pics/area51.jpgTesting align="left" hspace="8"</font><br clear="all" />

The border is useful if edges of the graphic are white or very light and don't show up in the post. Sometimes it's effective to omit it, and other times it's useful to isolate it.


Last notes:

• The new HTML standards will require that all HTML tags be in lower-case letters.
• All "arguments" must be enclosed in quotes, e.g., align="left" or hspace="8". These must also be lower-case.
• Tags that have no closing tag, e.g., < img...> without a corresponding < /img>, should be ended this way:

< img src="http://freeconservatives.com/pics/area51.jpg" />

< br />

The space and forward slash serve as a termination. It works properly with older browsers, and conforms to the newest standards. All codes above are shown that way.


Class is dismissed.

[DoctorDoom]

One very useful program for HTML tweaking is Color Detector (http://www.cosmin.com/colordetector/). This allow checking the exact hex and decimal color values for every pixel in an image.

One use that I've found for it is making text in a precise color rather than the nearest standard one to it. This can be done with the HTML font tag. For example, the center of Ralph's left nostril has the hex code 103552.

< font size="7" color="103552">THIS IS COLOR 103552< /font>

<font size="7" color="103552">THIS IS COLOR 103552</font>


One of the hues on his forehead is 4C82B0

< font size="7" color="4C82B0">THIS IS COLOR 4C82B0< /font>

<font size="7" color="4C82B0">THIS IS COLOR 4C82B0</font>


It adds spice to one's text.

[Rink]

< img src="http://freeconservatives.com/pics/area51.jpg" align="middle" />

I thought that was align="center" ????

[Rink]

PS: I dont see no borders Doc.

[DoctorDoom]

[ QUOTE ]
I thought that was align="center" ????

[/ QUOTE ]
It depends on the tag. Tables such as we heap on trolls, and a number of other tags, use align="center", but not graphics.

The border is there. Unfortunately, Ralph is surrounded by dark (it's an alien thing).

This will be clearer.

< img src="http://freeconservatives.com/ubbthreads/images/graemlins/trollhook.gif" />

http://freeconservatives.com/ubbthreads/images/graemlins/trollhook.gif

< img src="http://freeconservatives.com/ubbthreads/images/graemlins/trollhook.gif" border="8" />

http://freeconservatives.com/ubbthreads/images/graemlins/trollhook.gif

[Rink]

ah I see, thanks (Ralph?) I got an uncle by that name

[Longhorn_Platinum]

[ QUOTE ]
Rink said:
PS: I dont see no borders Doc.

[/ QUOTE ]

/ubbthreads/images/graemlins/icon115.gif <font color="blue">Are you saying that you see some borders?</font>

[DoctorDoom]

Cool! Jasper (http://www.jaspertx.org/index.html) has its own website.

Speaking of borders...

<center>http://www.jaspertx.org/images/highways.gif

[DoctorDoom]

Back on topic, here's an image with a 1-pixel border.

<center>http://www.jaspertx.org/images/operat1.jpg (http://www.jaspertx.org/operation.htm)

FIRST CITY COUNCIL OF JASPER, TEXAS 1926
Back Row: O.M. Stone (councilman), H.F. Lanier (councilman),
Jim Orton (councilman), Charles Brown (councilman)
Seated: Garland Smith (councilman), A.L Black (Mayor),
Bob Damrell (City Marshall)</center>

[Rink]

[ QUOTE ]
Longhorn_Platinum said:
[ QUOTE ]
Rink said:
PS: I dont see no borders Doc.

[/ QUOTE ]

/ubbthreads/images/graemlins/icon115.gif <font color="blue">Are you saying that you see some borders?</font>

[/ QUOTE ]

naw i thought the reason why I couldnt see the border comparisons that Doc gave was because of browser differences, as i use IE6 and as far as I know he uses Opera.

*shrugs*

NP I understood when he explained it to me.

[Longhorn_Platinum]

[ QUOTE ]
DoctorDoom said:
...A.L Black (Mayor)...

[/ QUOTE ]

/ubbthreads/images/graemlins/icon129.gif <font color="blue">Our first Black mayor.</font>