HTML
WEB DESIGN GUIDE – IMAGES
·
Let’s
add a header for our new document. Test it.
·
We
can add an image by using the <img>
tag. It requires that you use the src attribute where the value will be the
filename of the image.
·
You
can center your image by using the <center> tag just like we do with
text. Try it.
·
You
can resize your image by using either the width attribute or the height
attribute. The value for either is in
pixels. o By using just one of the two
attributes, your browser will scale your image the same amount in both the x
and y directions. o By using both attributes, your image
will be squished to the exact size. Try
making your image 300 pixels wide. Of
course, feel free to try a different size if you would like.
·
You
can also place a border around the image by using the border attribute. The value is the width of the border in
pixels. Try it.
Note
that if you do not like the border, you can set its size to zero. Or, you can remove the border attribute all
together. GOT EXTRA
TIME? Here are some extra details if you have extra time… ·
Enlarging
an image too much will lead to a poor quality image. ·
Reducing
an image’s size will not drastically impact on the image quality. However, when your website is downloaded
(if you were to put it online), everybody would be downloading an oversized
image for nothing. Ideally, you would
resize the images to the approximate size you need. ·
If
your website has a lot of images, your folder containing your site might get
messy. You can actually create a
subfolder that contains all of your images and other media. A common practice is to create a folder
named media and place all images in it. However, if you do this, your tags to your
images will be different as you need to specify the folder name in front of
the file name. For example, for the image
above, you would have to use: <img
src="media/roy.jpg" width="300"
border="3"> |