Images make up a large part of the web - most websites contain
images. HTML makes it very easy for you to embed images into your web
page.
To embed an image into a web page, the image first needs to exist in
either .jpg, .gif, or .png format. You can create images in an image
editor (such as Adobe Photoshop) and save them in the correct format.
Once you've created an image, you need to embed it into your web page. To embed the image into your web page, use the
<img> tag, specifying the actual location of the image.Example of Image Usage
| Code | Result |
|---|---|
|
The
<img>
element above contains a number of attributes. These attributes tell
the browser all about the image and how to display it. Here's an
explanation of these attributes:| src | Required attribute. This is the path to the image. It can be either an absolute path, or a relative path (remember these terms from our last lesson?) |
| width | Optional attribute. This specifies the width to display the image. If the actual image is wider, it will shrink to the dimensions you specify here. Likewise, if the actual image is smaller it will expand to your dimensions. I don't recommend specifying a different size for the image, as it will lose quality. It's better to make sure the image is the correct size to start with. |
| height | Optional attribute. This specifies the height to display the image. This attribute works similar to the width. |
| alt | Alternate text. This specifies text to be used in case the browser/user agent can't render the image. |
Dimensions Using CSS
Instead of using the
width and height
dimensions as above, you could choose to set the size using CSS. This
can give you extra flexibility. For example, it can sometimes be useful
to specify a max-width or max-height
instead of an absolute size. This can prevent large images from ruining
your layout (eg, if it's too big to fit inside the content area). This
can happen especially if someone tries to view your website on a device
with a small screen (such as a mobile phone).
In the following example, we use
max-width:100% to ensure that the image is never too big for its context. When you only use max-width (without using max-height),
the browser will rescale the image proportionally. In other words, the
height will be rescaled along with the width, and the image won't become
squashed. When you do this, make sure you remove the HTML width and height attributes, otherwise they will conflict with the CSS.| Code | Result |
|---|---|
|
|
Image Links
You can make your images "clickable" so that when a user clicks the
image, it opens another URL. You do this by simply wrapping the image
with hyperlink code.
| Code | Result |
|---|---|
|
Removing the Border
Some browsers create a border around the image when it's clickable. If you don't want the border, specify
border="0". You can also use the CSS border property to remove the border (i.e. border:0;).| Code | Result |
|---|---|
|
|
Creating Images
The above examples assumed that you already had an image to embed into your web page. To learn about creating images for the web
0 komentar:
Posting Komentar