How to put a photo in a message? (vanity)

It's what I've got on this...

HTML Paragraphs & Whitespace Characters Fonts Images Hot Links
HTML in general: top
HTML is an acronym for HyperText Markup Language. It was born out of a need to format the presentation of text, images and data on screens of various and arbitrary sizes. A page of raw HTML can be thought of as having two types of information, text and formatting. Formatting appears between two angle brackets <formatting> and never literally appears on the rendered page. Formatting is used to control the appearance and placement of text and other objects on the page. Anything that isn't formatting is text and is on the page. Formatting can contain images, which also appear on the page and Hot Links which are clickable text pointing to other pages.
It is often interesting to look at the raw HTML when you see something amusing. Most browsers have a menu item that is something like View Source which allows you to look at the HTML directly. I am currently using Chrome as it provides a particularly sweet view of the tricks involved by right mousing over the item you wish to inspect and selecting Inspect Element. Firefox provides control-u as a quick way to get the entire page of HTML source and in Firefox 10 at least right mousing over an element will also allow you to Inspect Element. I haven't looked at IE in years, maybe you could tell me.
Conventions: In general, anything that appears in bold between angle brackets as in <bold> is HTML and needs to be typed exactly including the angle brackets and any quote marks. If you see quoted text containing mumble it means this entire quoted bit is variable and you need to substitute the correct text for it.
Nearly all HTML tags (what we call the bits between the angle brackets) come in pairs. This makes sense as usually you want to do something, like make a chunk of text bold, and then not do it anymore. So we see a tag that opens the new formatting, some text, and then a closing tag. The closing tag generally looks like an opening tag with a forward slash in front of the text part, thusly: <tag>sample text</tag>. One exception to this is the paragraph  tag, which can be used on its own without a closing tag. Using a closing tag with  Your paragraph here  is considered good form though. The gods of HTML will smile on you if you do...
The tag-type is the first text after the left angle bracket that opens the tag. There must be no space between the angle bracket and the tag-type, if there is then HTML treats the whole business as text. There can be additional information in the opening tag that is not a part of the tag-type. This is shown as an attribute="value" pair following the tag-type separated by a space. The equal sign and the quotes are mandatory parts of the attribute/value pair.
Anchors are tags which pin down a location. An anchor looks like <a name="top">. This one is used to define the top of this page and is the first line in the raw HTML that renders into it. The tag-type is the a after the left angle bracket, the name="top" is an attribute/value pair which serves as an identifier for this particular anchor so that it can be referred to by other bits of HTML. A closing tag would be nice, but it isn't required for this anchor. Adjacent to the major headings on this page there is another anchor <a href="#top">top</a> which is also a hotlink. This does have a closing tag, which serves to delimit the text that is to be the clickable hotlink. The # in front of "top" in the href tells the software that the anchor referred to is located on the current page. This is not optional. The second top is text which is being formatted into a hotlink by the HTML that surrounds it.
Another thing that it is good to know is how to nest (order so as to do what you want) the tag pairs. These examples:
<tag_A> some text </tag_A> or
<tag_A><tag_B> some text </tag_B></tag_A> or
<tag_A> some text <tag_B> some more text </tag_B> even more text </tag_A>
are all legal and useful nestings.

<tag_A><tag_B> some text </tag_A></tag_B>
and similar broken orderings are not legal or useful. In general, the rule is that you can not close a tag with an open tag inside. Most browsers will handle this gracefully and close all of the open tags inside the one being closed, but you won't see the behavior that you desire.
Paragraphs & White-space: top
HTML eats excess white-space. If you type two or more spaces in a row between words HTML will reduce all of the spaces and tabs to a single space or tab. Carriage returns (the Enter key) won't do you any good either. Without special care it is easy to end up with a wall of unreadable text. It's quite cruel. If you want white-space beyond a single space you need to insert it explicitly by typing   or  for a CRLF and a paragraph, respectively.
Break   works like your expect Enter (or Carriage Return) to work. It gets you a single LFCR (Line Feed Carriage Return, just like an ancient typewriter). Paragraph   makes what follows into a paragraph set off by linefeeds. Neither  or   requires closing tag. Closing a paragraph actually makes good sense, closing a break seems like a waste of perfectly good characters.modulo the HTML gods referenced above.
Blockquotes are another useful trick. This entire paragraph has been enclosed in blockquotes. Anything you put between <blockquote> the example text <blockquote> gets indented and set off by linefeeds before and after. This example, rendered, will look like
the example text
the text above. Blockquotes can be nested (placed one inside another) and are a great way to distinguish the source of a quote from your own text.
Preformatted, or the <pre> tag provides a way to grab a bunch of text that is already formatted with tabs and spaces and not have HTML eat all that lovely white-space. As usual a closing tag is required with this </pre>. You can use this trick on a webpage but you need to realize that if the text you are copying wraps because it runs into the edge of the page and not because there is a CRLF present it will behave the same way in the preformatted chunk.
Lists are another way to order chunks of text and white-space. Lists can be either ordered, with numbers or letters preceding the list items or unordered with selected dingbats (disc, circle, square) fronting the text. The default dingbat is a disk; losing the dingbats is unfortunately not an option. An unordered list looks like:
<ul>
 <li>Coffee</li>
 <li type="circle">Tea</li>
 <li type="square">Milk</li>
</ul>
which yields:

Coffee
Tea
Milk

Tables are yet another means of generating white-space. People used to make extensive use of tables to control placement of objects on a page. It was really quite dreary and something had to be done so <div> was invented. If you want to play with tables and div you really need to go here http://www.w3schools.com/html/default.asp .
Horizontal Rule <hr> generates a horizontal line the width of the page. People often use this to separate their comments from those being commented upon. This also does not need a closing tag.
Characters: top
Quick things you can do with characters are bold and italic. You get bold with  bold stuff  which looks like bold stuff. Italic works the same way with a different letter:  italic stuff  gets you italic stuff. Other things you can do are <del> delete stuff </del> ~~delete stuff~~, which replaces the deprecated <strike> There is an underline tag as well that should not be used as it confuses people who think it is a link.
There is also a <big> bigger stuff </big> which yields bigger stuff and  smaller stuff  which rolls like smaller stuff. You can get your readers to really squint at your stuff by  really small stuff  really small stuff. If you are a fan of the typewriter there is also a <tt> typewritten stuff </tt> and it types out typewritten stuff as expected.
Superscripts and subscripts are also available. He3 gets He³ H2O makes H₂O
There are some characters that are special in HTML, like the left and right angle brackets <> and a few others. Obviously there has to be a way to render those characters on a page. This is done with another pair of special characters, the ampersand and semicolon ( & ; ). These are used as delimiters for either a numeric value or a short and specific reference to the character desired. See http://www.w3schools.com/tags/ref_entities.asp for a more complete treatment.
Another means of generating white-space is non-breaking spaces,   This creates a space that HTML won't eat. You can put multiple of these in a row for spacing but it is considered poor form. Mostly because the spacing depends on the current font and if it is a proportional rather than a fixed pitch font it gets even more complicated. Notice that the ampersand and the semicolon are used as delimiters (boundaries) for the value between them. A variation on this technique is how these delimiters appear on this page.

Fonts: top
Fonts are deprecated since HTML 4.01 (the standards boffins are working on 5.0 now) CSS (Cascading Style Sheets) is the current preferred method for coloring and shaping text in HTML. Because of the way the forum software works CSS style formatting gets eaten and discarded so Fonts must be used here to manipulate text.
 Red Courier slightly Larger  gets you Red Courier slightly Larger What you can change about a font is its color, the typeface and the size.
Color is the value contained in quotes after the color= part of the opening font tag above. Most normal names are supported, 147 total. For finer control hexadecimal values can be specified. For a full color treatment mash here.
Face is the typeface that you want the browser to render. Types available to most browsers include "arial" "times" "helvitica" and "sans-serif". You can specify multiple names with the preferred fonts first like this 
Size is a numeric value between 1 and 7 inclusive with 7 being largest. Three is the default value and is used in the majority of this document.
Images: top
<img src="http://upload.wikimedia.org/wikipedia/en/a/a3/Bobdobbs.png"> gets you:
<img src="http://mumble.com/image.jpg"> substitute the actual source of the image for http://mumble.com/image.jpg This image must be out on a server on the web someplace, not on your machine. This is why people have flicker and picassa accounts.
Stationary images usually end with .jpg or some variation. Moving images on this forum are only possible using images which end in .gif The .gif format allows for short sequences of stationary images to be presented like a very tiny movie. Currently the forum does not appear to allow embedded video.
You can position an image relative to its surrounding elements using the attribute align="middle". Recognized attribute values are top, bottom, middle, left and right.
<img src="http://jc-evans.com/wp-content/plugins/wp-o-matic/cache/61cb2_zQLMZ.gif" align="right" alt="Kittie doing its nails."> gets you:
This is some text to show how it flows around the image. This is before the image in the source HTML with a paragraph called out before the text. Isn't the expression of the cat's face just priceless? And this is text right after the image. I have found left and right attributes to be useful, the rest not so much. You really seem to have to have quite a bit of text for the behavior of the flow to come out. Dinking with the window width seems to help. Perhaps a smaller picture in the x-axis? But it's sooo cute.
Does adding a paragraph move the header down below the image? Nope, sure doesn't. Think of the anchor as the upper left corner of the image and as far as HTML is concerned that corner goes right after the word "priceless", but it is aligned right so it starts on the line with "priceless" and hangs to the right.
Hot Links: top
<a href="http://mumble.com/index.html"> Hot Text </a> Here, mumble.com points to the page you want to link, Hot Text is the stuff you want to be clickable.
Here is a hot link for a Google search on "furlongs per fortnight" that opens in a new tab. <a href="http://www.google.com/search?q=furlongs+per+fortnight&btnG=Search" target="o" title="Search furlongs per fortnight">Google</a> gets you this cute little mashable text:
G o o g l e
It's pretty and clickable. Let's look at the individual elements.
<a href="http://www.google.com/search?q=furlongs+per+fortnight&btnG=Search" target="o" title="Search furlongs per fortnight"> The first a is the anchor for this hotlink.
href="http://www.google.com/search?q=furlongs+per+fortnight&btnG=Search" target="o" title="Search furlongs per fortnight"> The href points to the Google search page with the search term following ?q= in quotes with the spaces replaced by +. The &btnG=Search part is a directive to the Google website to push the Search button. target="o" is the bit that makes it open in a new tab. title= doesn't really appear to do anything useful in this forum, or maybe Google overrides it, I'll check later.
This next bit prettifies the clickable text. It's pretty because of all of the  manipulation. It's clickable because it lies between the opening tag for the hotlink and the closing </a> tag
That's all folks! top

Disclaimer: Opinions posted on Free Republic are those of the individual posters and do not necessarily represent the opinion of Free Republic or its management. All materials posted herein are protected by copyright law and the exemption for fair use of copyrighted works.