In this page, you'll learn how to format an image. You will learn how to style and design an image.
Inserting an Image
Before we proceed to image formatting, You need to know first how to insert an image.
>To insert an image, you'll insert an tag. The code goes like this:
<img src="fileNameOfTheImageWithItsFileExtention" alt="theProperDescriptionOfTheGraphic">
Note: if you insert an image, the image must be in the same folder so that the browsers will determine that the image is a graphic.
Image Formatting
Image formatting is used for designs, colors, and float style attributes. Here is the list of attributes that are usually used when formatting an image.
- Width: This width attribute change the width of an image and its unit is px. This code goes like this:
width="200px; - Height: This height attribute change the height of an image. Just like the width attribute, its unit is px. The code goes like this:
height="200px" - float: This float attribute aligns the image to the left or right. The code goes like this:
style="float:left;"
Sample
This is the sample of an image formatting.
This image will float to the left.
This image will float to the right.
Try It
If you want to try what you have learned in this page, open a notepad and perform them.
-
Note:
- In saving the file, always put ".htm" as the file extention or else it will just be saved as plane text file.
- Make sure that the "file subtype" in the dialog box is set as "all files".
- Set the encoding to "utf - 8".
© CopyrightMMK 2017