*** This is my practice website to learn and practice HTML, using Microsoft Step By Step book, by Faithe Wempen. ***

Notes about graphic elements


Basic tag to add a border: style="border-style: solid"
Available border styles (shown here in silver color, with 5px padding):

solid dotted dashed double groove ridge inset outset none

Format Tag
Padding style="border-style: solid; padding: 15px"
Width style="border-style: solid; border-width: 4px"
Color style="border-style: solid; border-color: blue"
Top, right, left, and bottom attributes style="border-style: solid; border-bottom-color: red; padding-left: 15px"
Specify side formatting in clockwise order: top, right, bottom, left style="border-style: dotted none dotted none; padding: 15px 0px 15px 0px"
Specify border attributes all at once style="border: 2px green solid"

Horizontal Lines

Default line (black, chiseled 2-pixel full-length line): <hr />

Format Tag
Color style="color: blue; background-color: blue"
Height style="height: 10px"
Width style="width: 50%"
Horizontal alignment (left, center, right, justified) style="text-align: left"

<hr style="color: blue; background-color: blue; height: 5px; width: 50%; text-align: left">


Format Color Depth Compression Animation Transparency
GIF 8-bit lossless Yes Yes
JPG 24-bit lossy No No
PNG 24-bit / 48-bit lossless Yes Yes

Graphic Size

A graphic's file size depends on its resolution (ex: 800px by 600px).
There are two ways to control the size of a graphic on a web page:

Graphic tags

To insert a graphic, place an <img /> tag where the picture should appear.
<img src="Seashell.jpg" style="float: left; margin-right: 10px" height="50px" title="Seashell" />

Format Tag
To force the image to the left or right side and wrap text style="float: left"
To move text down (style applied to the text's tag) style="clear: left"
To resize (using both will distort the picture) height="100px" width="200px"
Margin and padding arguments style="margin: 10px; padding: 5px"
To add a screen tip title="Seashell"

Image hyperlinks

To create an image hyperlink, insert the image tag in an <a> tag: <a href="http://www.writing.com"><img src="images/pen.gif" /></a>
To remove the default border for hyperlink graphics, add a border: none argument.
To create a thumbnail, save a small version of each graphic, and hyperlink it to a bigger image that opens in its own window:
<a href="Seashell.jpg" target="_blank"><img src="sm_seashell.jpg"></a>

Back to the top