Wikipedia:Image markup with HTML: Difference between revisions

Revision as of 21:40, 8 October 2003

Latest revision as of 21:08, 13 July 2018

(38 intermediate revisions by 32 users not shown)

Line 1:

{{historical}}

''See also [[Wikipedia:Image use policy#Markup]]''

{{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]].}}

----------

'''The markup gallery page is still under construction.'''

----------

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

''Caption''</div>

== rightRight-floating image with caption ==

<code><nowiki><div styleclass="float:right;margin:0 0 1em 1em;floatright">[[Image:image name|alt text]]</nowiki></code>

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

<br clear="all">

Line 20 ⟶ 19:

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

== columnColumn of images, floated ==

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

----

Line 28 ⟶ 27:

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):

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

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

<tr>

<td>|<code><nowiki>&lt;<div styleclass="float:left;margin:0 1em 1em 0;floatleft"&gt;>[[Image:NAME|Alt text]]&lt;</div&gt;></nowiki></code></td>

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

|-

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

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

</tr>

<td>|<code><nowiki>&lt;<div styleclass="float:right;margin:0 0 1em 1em;floatright"&gt;>[[Image:NAME|Alt text]]&lt;</div&gt;></nowiki></code></td>

<tr>

|-

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

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

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

<td>|<code><nowiki>&lt;center&gt;<div class="floatleft">[[Image:NAME|Alt text]]<br>''Caption''&lt;/center&gt;</nowikidiv></codenowiki></tdcode>

</tr>

|-

<tr>

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

<td>|<code><nowiki>&lt;<div styleclass="float:left;margin:0 1em 1em 0;text-align:center;floatright"&gt;>[[Image:NAME|Alt text]]<br>''Caption''&lt;</div&gt;></nowiki></code></td>

|-

</tr>

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

<tr>

<td>|<code><nowiki>&lt;<div styleclass="float:left;margin:0 1em 1em 0;text-align:center;floatleft"&gt;>[[Image:SMALL|Alt text]]<br>[[Media:LARGE|larger version]]&lt;</div&gt;></nowiki></code></td>

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

|-

<td><code><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></code></td>

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

</tr>

<td>|<code><nowiki>&lt;<div styleclass="float:right;margin:0 0 1em 1em;text-align:center;floatright"&gt;>[[Image:SMALL|Alt text]]<br>[[Media:LARGE|larger version]]&lt;</div&gt;></nowiki></code></td>

<tr>

|-

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

<td>|large central picture</td>

<td><code><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></code></td>

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

</tr>

|}

<tr>

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

<td><code><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></code></td>

</tr>

<tr>

<td>large central picture</td>

<td><code><nowiki>&lt;center&gt;[[Image:NAME|Alt text]]<br>''Caption''&lt;/center&gt;</nowiki></code></td>

</tr>

</table>

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>&lt;<div class="floatright" style="width: 250px; float:right; margin:0 0 1em 1em; text-align: center;"&gt;>[[image:NAME|alt text]]<br>''Caption''&lt;</div&gt;></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.

Line 71 ⟶ 62:

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

== Link to the image description page ==

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]]

==Blank line after image code==

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

==See also==

''See also *[[Wikipedia:Image use policy#Markup|Image use policy]]''

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

*[[Wikipedia:Finding images tutorial]]

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

[[sv:Wikipedia:Bildmallar]]