twitter
217
edits
How and when do I use images?: Difference between revisions
→How to use images
| Line 2: | Line 2: | ||
How to use an image varies between platforms. HTML and WordPress are among the most common platforms, and have similar methods. | How to use an image varies between platforms. HTML and WordPress are among the most common platforms, and have similar methods. | ||
===HTML=== | ===HTML=== | ||
HTML uses the <img> tag for marking up a document to include an image.<ref>http://dev.w3.org/html5/markup/img.html</ref> Images are included through the use of the image's URL. | |||
'''Usage Examples''': | '''Usage Examples''': | ||
*Minimal Use Structure: <code><img src=”http://litmuse.mga.edu/litwiki/images/0/0f/Wordpress-3.7.1-upload-multiple-files.png” /></code> | *Minimal Use Structure: <code><img src=”http://litmuse.mga.edu/litwiki/images/0/0f/Wordpress-3.7.1-upload-multiple-files.png” /></code> | ||
| Line 8: | Line 8: | ||
*<code><img src=”http://litmuse.mga.edu/litwiki/images/0/0f/Wordpress-3.7.1-upload-multiple-files.png” alt=”Dialog showing multiple file upload option.” align=”middle” width=”348” height=”50%” /></code> | *<code><img src=”http://litmuse.mga.edu/litwiki/images/0/0f/Wordpress-3.7.1-upload-multiple-files.png” alt=”Dialog showing multiple file upload option.” align=”middle” width=”348” height=”50%” /></code> | ||
ALT means ''alternate text''. If an image becomes unavailable, the text tells the viewer what the image would have been. For vision impaired users, the alt text is used by the screen reader software to describe the image.<ref>http://webdesign.about.com/od/beginningtutorials/a/aa122004.htm</ref> | |||
Note: It is not recommended to use the width and height attributes. If the image is smaller than the coded dimensions, the image will be enlarged, possibly deformed. If the image is significantly larger then the full-sized image will be downloaded. A common mistake is to take a very large image and use the width and height attributes to make it appear smaller.<ref>http://sixrevisions.com/web-development/decrease-webpage-load-times/</ref> | Note: It is not recommended to use the width and height attributes. If the image is smaller than the coded dimensions, the image will be enlarged, possibly deformed. If the image is significantly larger then the full-sized image will be downloaded. A common mistake is to take a very large image and use the width and height attributes to make it appear smaller.<ref>http://sixrevisions.com/web-development/decrease-webpage-load-times/</ref> | ||
---- | ---- | ||
===WordPress=== | ===WordPress=== | ||