|
Microsoft
Office Training > HTML/CSS Training > Free
Computer Training >HTML related to Web Graphics
HTML related to Web Graphics
Images File Types
JPEG – best for photographic images – allows compression
progressive JPEG – appears blurry at first and gradually comes into focus
GIF – best for images with a limited amount of colours, also allows transparent colour and animation
interlaced GIF – appears blocky at first and gradually adds detail
PNG – allows varying degrees of transparency, as opposed to a single colour
interlaced PNG - appears blocky at first and gradually adds detail
HTML for inserting images
<img src= “myimage.gif” alt= “Text for no image”
title= “description of image” />
Both the scr and alt attributes are required. Relative addresses apply to images as they do with links to web pages.
alt attribute is used for alternative text, when an image can’t be shown
title attribute is used for descriptive screen-tip and overrides the alt value for this
HTML for linking with images
Linking to a webpage:
<a href= “mywebpage.htm”>
<img src= “myimage.gif” alt= “My Image” /></a>
With Swap behaviour: (see swapbehaviour.htm)
<a href= “mywebpage.htm”>
<img src= “myimage.gif” alt= “My Image”
onmouseover= “this.src = ‘myimagehover.gif’;”
onmouseout= “this.src = ‘myimage.gif’;” />
</a>
Linking to another image (eg from a thumbnail):
<a href= “myimage.gif”>
<img src= “mythumbnail.gif” alt= “My Image” /></a>
Getting rid of the blue link border:
<img style= “border-style:none” />
Borders in general:
<img src="image1.jpg" style="border-style:solid; border-width:thin; border-color:green" />
HTML for aligning images
You can use the same alignment style rules for aligning paragraphs:
Division tag:
<div style= “text-align:center”>
<img src= “myimage.gif” alt= “My Image” /></div>
Other values are right, and left(default)
Paragraph tag:
<p style= “text-align:center”>
<img src= “myimage.gif” alt= “My Image” /></p>
HTML for image dimensions
<img src= “myimage.gif” alt= “My Image” width= “100” height= “100” />
The width and height don’t have to match the actual size of the image. The spacer.gif is often manipulated using the height and width settings.
HTML for text wrap around images
Use the float style property:
<img src= “myimage.gif” alt= “My Image” style= “float:left” />
Aligns the image to the left margin and causes text to wrap around the right side of it.
<img src= “myimage.gif” alt= “My Image” style= “float:right” />
Aligns the image to the right margin and causes text to wrap around the left side of it.
HTML for vertical alignment of images
<img src= “myimage.gif” alt= “My Image”
style= “vertical-align:text-top” /> or top
Aligns the top of an image with the top of the tallest image or letter on the same line
<img src= “myimage.gif” alt= “My Image”
style= “vertical-align:text-bottom” /> or bottom
Aligns the bottom of an image with the bottom of the text
<img src= “myimage.gif” alt= “My Image”
style= “vertical-align:middle” />
To align the middle of an image with the overall vertical center of everything on the line
<img src= “myimage.gif” alt= “My Image”
style= “vertical-align:baseline” /> the default
To lign the bottom of an image with the baseline of the text. If there is a margin on the image, the text will appear to be aligned below the image (to incorporate the image).
Please not all tags are HTML 5 compliant. HMTL 5 differences
|
