*** This is my practice website to learn and practice HTML, using Microsoft Step By Step book, by Faithe Wempen. ***
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" |
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 |
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:
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" |
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>