Mouseover the bunny
Easy site to upload too... Tinypic.com They will host the pic or video... and once it is uploaded provide the html etc to post to websites.. very easy to use.
the image has to be already stored ON THE INTERWEBS some where
It cannot be on your computer- it has to be on a webstie
Then you just link to it”
< img src=”http://www.someplace.com/img.jpg"; >
[no spaces except after the word img]
One of those is HTMLSandbox
Thanks for asking.
With the proliferation of display devices, screens now come in a wide variety of sizes and aspect ratios. The image below illustrates the range of screens possible. Differing aspect ratios are shown on the diagonal lines with the ratio in circles towards the lower right.
Given the wide variation in screen resolution and size when we step from mobi to fondleslab to display to HDTV it is lunacy to specify screen position in term of pixels. There is no way to know what sized screen you are imaging to so it is best to reference screen sizes and positions in percentages instead. The resulting size is the percentage of the width (or height) of the enclosing container. This is most useful when specifying positions and sizes of tables and images. The HTML for the image above looks like:
<img src="http://upload.wikimedia.org/wikipedia/commons/4/44/Vector_Video_Standards5.svg" width="95%">The
width="95%"part sets the image width to 95% of the width of the enclosing container. We leave the height unspecified so that the computer will figure out the correct value so as not to distort the image. If you wish to distort the image you may specify a height as well.Things that are text related, such as the whitespace around a paragraph or header and text sizes are best specified in
em. Oneemwas originally the width of an M in the current font. In a multi-lingual world where not all alphabets have an M in them, the meaning has evolved to mean the height of the current font. As the user changes the magnification on a page the size of anemchanges with it. This produces a pleasing scaled effect to the eye not possible when spacing objects in pixels.Other unit values available are
ininch,cmcentimeter,mmmillimeter,exx-height of a font (x-height is usually about half the font-size),ptpoint - 1/72 of an inch,pcpica - 12 points andpxpixels - a single dot on the screen. If no units are specified pixels are used by default. Best results across the broad spectrum of displays are achieved by exclusively using em and percent to specify size and distance. Try not to do anything else.
Any element (anything between tags) can be explicitly positioned by either putting it in a table or centering it <center></center>. Beyond that, explicit positioning is purposefully made as difficult as possible so that you won't do it. Your page will be displayed on a variety of devices of differing sizes and the less you constrain where the elements are positioned the better the general result will be across the broad spectrum of displays.
Inside tables you can use the attribute
<td align="right"> ("left|right|center|justify|char")are acceptable values. The "char" option is mishandled by all the major browsers so it doesn't see much use. Align can also be used with images and horizontal rule,<img src="http://mumble.com/image.jpg" align="right">will work. So will<hr align="right">This is all in the HTML 4.01 idiom that we are trying to make go away.To summarize, using HTML you can Center an element or put it in a table to control its position. This is why tables are wildly overused. Images:
<img src="http://upload.wikimedia.org/wikipedia/en/a/a3/Bobdobbs.png"><p> <img src="http://upload.wikimedia.org/wikipedia/en/a/a3/Bobdobbs.png" width="30%"> <img src="http://upload.wikimedia.org/wikipedia/en/a/a3/Bobdobbs.png" width="15%"> <img src="http://upload.wikimedia.org/wikipedia/en/a/a3/Bobdobbs.png" width="7%"> <img src="http://upload.wikimedia.org/wikipedia/en/a/a3/Bobdobbs.png" width="4%"> <img src="http://upload.wikimedia.org/wikipedia/en/a/a3/Bobdobbs.png" width="2%"> <img src="http://upload.wikimedia.org/wikipedia/en/a/a3/Bobdobbs.png" width="1%"> .Yields:
J. R. "Bob" Dobbs receding into infinity...
<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 flickr and picassa accounts. You can easily find out the URL of an existing picture on the web by right-mousing over it and selecting Open Image In New Tab. This will open a tab on your browser containing only that image. The URL of that tab is the one to use as your src="" value.
Some of the photo storage sites on the web (flickr) try to drive web traffic to their site to harvest advertising by providing a convenient pointer to their site that isn't a URL to a .jpg To get the proper URL try right mousing over the image and select Open Image in New Tab. This should get you the naked image itself, without all of the surrounding advertising. This is the URL you want to use.
Access Denied! - No Hotlinking - Occasionally you will see an image that looks good on the site of origin but won't show up if you use it in a posting. Many sites block what they term as "hot-linking" thinking that people who link to their images from pages that are not theirs are stealing their hard paid for bandwidth. They have a point. Either use another image or host it on your own site to fix this problem.
Often the poster will see the image that hot-linking is not allowed for while other users are whining about no image present and red X's. This is because the poster's browser has cached the image and doesn't have to go to the blocked site to get it. A refresh of the page should show what is what.
Size: You can easily vary the size of a given image by specifying it. You may specify size in terms of pixels, em (one character height-width), or percent of enclosing container. Given the wide variation in display platforms the best results are usually obtained by using percent to specify size.
<img src="http://upload.wikimedia.org/wikipedia/en/a/a3/Bobdobbs.png" width="15%"> Yields:
The native size of the J. R. "Bob" Dobbs picture above is 324x216 pixels. Typical screen pixels per inch numbers for normal displays are in the range of 75 to 150 so the original Dobbs'Head will likely appear on your screen somewhere between 2.88 to 1.44 inches wide.
The next row of Dobbs'Heads are scaled to the width of the enclosing container. We use the width because its value is mostly apparent on the screen. The value of the container's height is less so. The first Dobbs'Head is scaled to 30% of the width of the container. The next at about half that, and so forth... This produces a line of attractive Dobbs'Heads receding into infinity that occupies about half the width of your page, all without needing to know how wide your page is. The size of the images will change if you grab the edge of the page and make it wider or thinner. This is the reason you want to scale images (and anything else, really) by percentages rather than pixels.
In the past it was best to keep your scaling to powers of 2 to minimize scaling artifacts. Current smoothing algorithms and processor speeds make that pretty much unnecessary. Remember that scaling up will not introduce new detail into the existing picture.
Stationary images usually end with .jpg or some variation. Moving images are 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. Another common format is .png which is a static image format from Microsoft. You will also see images that are .pdf Postscript Document Format. Images in .pdf format will often not post on websites because the .pdf file can easily be a virus container.
You can position an image relative to its surrounding elements by adding the attribute align="middle" to the tag. Recognized attribute values are top, bottom, middle, left and right.
<p><img src="http://enemiesforeignanddomestic.com//sj/images/61cb2_zQLMZ.gif" align="right" alt="Kittie doing its nails."></p> Yields:
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 browser width seems to help illuminate the behavior of the flow. Perhaps a smaller picture in the x-axis? But it's sooo cute.
Does adding a paragraph move the text 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 club following "priceless", but it is aligned right so it starts on the line with the club ♣ and hangs to the right.
In general, if you are posting images it is beneficial to place the image in a paragraph of its own and use a closing tag with <p> </p> as it helps the browser software properly place images.
The alt="Kittie doing its nails." specifies the text that appears when you mouse over the image. Some folks use these descriptors by running them through vocal-synthesis software. The blind using computers find these descriptors quite helpful. It's important to remember that an image (as well as any other element) can be used as the clickable part of a hot-link.
Freedom ≠ Free Stuff☭ 
I, for one, welcome our new Cybernetic Overlords /. Mash Dobbshead® for HTML, bop Hello_Cthlhu for XAMPP
![http://www.someplace.com/img.jpg"](http://www.someplace.com/img.jpg"){kind=link}