Wikipedia:Image markup with HTML: Difference between revisions

Revision as of 12:22, 19 June 2003

Latest revision as of 21:08, 13 July 2018

(44 intermediate revisions by 34 users not shown)

Line 1:

{{historical}}

[[Wikipedia:Image use policy]]

{{hatnote|'''Note: this page is deprecated – never format images like this!''' It is provided purely for historical interest. For a quick guide to adding images, see [[Help:Pictures]]. For a comprehensive guide, see [[Wikipedia:Extended image syntax]].}}

----------

<div styleclass="float:right;margin:0 0 1em 1em;floatright">[[Image:SunflowersA thumbnailsunflower.jpg|140px|alt text]]

Caption</div>

== Right-floating image with caption ==

<code><nowiki><div class="floatright">[[Image:image name|alt text]]</nowiki></code>

<code><nowiki>Caption</div></nowiki></code>

<br clear="all">

--------------

== Column of images, floated ==

See the [https://en.wikipedia.org/w/index.php?title=Floppy_disk&oldid=2071852 2003 version of Floppy disk] for an example.

----

Markup for images is quite complicated. This may be improved in the future: see [[meta:image pages]]. Here are some examples of typical markup ("'''image'''" for an image in the page, "'''media'''" for just a link):

{| border="1" cellpadding="2"

|left float, no caption

|<code><nowiki><div class="floatleft">[[Image:NAME|Alt text]]</div></nowiki></code>

|-

|right float, no caption

|<code><nowiki><div class="floatright">[[Image:NAME|Alt text]]</div></nowiki></code>

|-

|left float, with caption

|<code><nowiki><div class="floatleft">[[Image:NAME|Alt text]]<br>Caption</div></nowiki></code>

|-

|right float, with caption

|<code><nowiki><div class="floatright">[[Image:NAME|Alt text]]<br>Caption</div></nowiki></code>

|-

|left float, with larger

|<code><nowiki><div class="floatleft">[[Image:SMALL|Alt text]]<br>[[Media:LARGE|larger version]]</div></nowiki></code>

|-

|right float, with larger

|<code><nowiki><div class="floatright">[[Image:SMALL|Alt text]]<br>[[Media:LARGE|larger version]]</div></nowiki></code>

|-

|large central picture

|<code><nowiki><center>[[Image:NAME|Alt text]]<br>''Caption''</center></nowiki></code>

|}

If your caption is longer than a few words, you may need to explicitly set the <code>div</code> width. Some browsers adjust the width of the <code>div</code> based on the width of the text, and if there is a large caption, the <code>div</code> may become too large. To solve this problem, simply set the width of the <code>div</code> to the width (in pixels) of the image, like so:

:<code><nowiki><div class="floatright" style="width: 250px">[[image:NAME|alt text]]<br>''Caption''</div></nowiki></code>

(replacing <code>width: 250px;</code> with the correct width of your image. The inclusion of this specification is optional, but recommended if you have a caption longer than a few words. For large amounts of caption text, use <code>text-align:left;</code> to make it left-justified.

Alternate text is optional but recommended. See [[Wikipedia:Alternate text for images|Alternate text for images]] for hints on writing good alternate text.

To have some text to the left of an image, and then some more text below the image, then put in a single <nowiki><br clear="all"></nowiki>. This will force following text down until the margins are free of floating images.

''Caption''</div>

Some recommend using &lt;small> for captions, so they appear <small>like this</small>.

A right-floating image with caption:

== Link to the image description page ==

<pre><nowiki><div style="float:right;margin:0 0 1em 1em;">[[Image:image name|alt text]]

If you want to make a link to the description page for an image, use a leading colon before "image:" in an intra-wiki link, like this: <nowiki>[[:image:STS-32 crew.jpg|STS-32 crew]]</nowiki> which yields: [[:image:STS-32 crew.jpg|STS-32 crew]]

''Caption''</div></nowiki></pre>

==Blank line after image code==

The sunflower (Helianthus annuus) is a flower with a typically large head which turns to face the sun. (Some recently developed varieties have drooping? heads. These varieties are less attractive to gardeners growing the flowers as ornamentals, but appeal to farmers, because they may reduce bird damage and losses from some plant diseases.)

Always put a blank line after the image code to avoid an ugly indentation of the text with Internet Explorer.

==See also==

<table border="1" cellpadding="2" cellspacing="0">

*[[Wikipedia:Image use policy|Image use policy]]

<tr>

*[[Wikipedia:Picture tutorial|Picture tutorial]]

<td>left float, no caption</td>

*[[Wikipedia:Finding images tutorial]]

<td><tt><nowiki>&lt;div style="float:left;margin:0 1em 1em 0;"&gt;[[image:NAME|alt text]]&lt;/div&gt;</nowiki></tt></td>

</tr>

<tr>

<td>right float, no caption</td>

<td><tt><nowiki>&lt;div style="float:right;margin:0 0 1em 1em;"&gt;[[image:NAME|alt text]]&lt;/div&gt;</nowiki></tt></td>

</tr>

<tr>

<td>left float, with caption</td>

<td><tt><nowiki>&lt;div style="float:left;margin:0 1em 1em 0;text-align:center;"&gt;[[image:NAME|alt text]]<br>''Caption''&lt;/div&gt;</nowiki></tt></td>

</tr>

<tr>

<td>right float, with caption</td>

<td><tt><nowiki>&lt;div style="float:right;margin:0 0 1em 1em;text-align:center;"&gt;[[image:NAME|alt text]]<br>''Caption''&lt;/div&gt;</nowiki></tt></td>

</tr>

<tr>

<td>left float, with larger</td>

<td><tt><nowiki>&lt;div style="float:left;margin:0 1em 1em 0;text-align:center;"&gt;[[image:SMALL|alt text]]<br>[[media:LARGE|larger version]]&lt;/div&gt;</nowiki></tt></td>

</tr>

<tr>

<td>right float, with larger</td>

<td><tt><nowiki>&lt;div style="float:right;margin:0 0 1em 1em;text-align:center;"&gt;[[image:SMALL|alt text]]<br>[[media:LARGE|larger version]]&lt;/div&gt;</nowiki></tt></td>

</tr>

<tr>

<td>large central picture</td>

<td><tt><nowiki>&lt;center&gt;[[image:NAME|alt text]]<br>''Caption''&lt;/center&gt;</nowiki></tt></td>

</tr>

[[es:Wikipedia:Cómo se añaden imágenes]]

</table>

[[sv:Wikipedia:Bildmallar]]