Wikipedia:Image markup with HTML: Difference between revisions

Revision as of 09:51, 30 June 2003

Latest revision as of 21:08, 13 July 2018

(40 intermediate revisions by 33 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]].}}

'''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 19:

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

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

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

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

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

|-

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

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

|-

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

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

|-

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

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

|-

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

|<tdcode><ttnowiki><nowiki>&lt;div styleclass="float:left;margin:0 1em 1em 0;text-align:center;floatleft"&gt;>[[imageImage:SMALL|altAlt text]]<br>[[mediaMedia:LARGE|larger version]]&lt;</div&gt;></nowiki></tt></tdcode>

|-

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

|<tdcode><ttnowiki><nowiki>&lt;div styleclass="float:right;margin:0 0 1em 1em;text-align:center;floatright"&gt;>[[imageImage:SMALL|altAlt text]]<br>[[mediaMedia:LARGE|larger version]]&lt;</div&gt;></nowiki></tt></tdcode>

|-

<td>|large central picture</td>

|<td><ttcode><nowiki>&lt;<center&gt;>[[imageImage:NAME|altAlt text]]<br>''Caption''&lt;/center&gt;</nowikicenter></ttnowiki></tdcode>

|}

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:

:<tdcode><ttnowiki><nowiki>&lt;div class="floatright" style="float:left;marginwidth:0 1em 1em 0;text-align:center;250px"&gt;>[[image:NAME|alt text]]<br>''Caption''&lt;</div&gt;></nowiki></tt></tdcode>

(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.

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 [[Floppy disk]] for example)

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