In many cases, once an image is inserted into a web page it may require changes to its format. You may want to center the image, wrap text around the image, change the size of the image, vertically line up several images, or apply a border around your images.
In order to follow the tutorials below you will need a HTML text editor of your choice, an image to manipulate, somewhere to upload the code and image, and an Internet browser to view them. Click here to use an online HTML editor1 with these tutorials.
Align an image
There are two key ways to align or reposition an image on a web page. The easiest way is to center an image using HTML markup2. This is a depracated method, which means it may not work in newer browsers and could render differently across various browsers. The second method is to align images with CSS3 using a few lines of simple code. Because Cascading Style Sheets (CSS) is separate from HTML, you will also need to learn the three ways to link CSS style rules to HTML4 pages.
Wrap text around an image
There are a couple of ways to achieve this effect in your web pages. If you are a beginner then you may look to position images with the align property5. You can also use the table alignment method to position images6 though this requires more knowledge of HTML markup and is slightly harder. The third method which has the most compliance across all browsers is to use CSS and the float property to align images7.
Change image size
You may also be interested in changing the size of images to better control their display on browsers. A helpful tutorial on image size attributes8 can be found here. You may also need to resize an image using a graphics program9.
Align several images
For a more sophisticated look like an image gallery, a more complex approach to the layout of images is needed. If you have mastered the previous steps however then this tutorial on how to make a CSS image gallery10 should be within your ability.
Apply border around an image
To apply simple style effectsto distinguish images on the web page, borders can be helpful. The easiest way to apply a border around an image is to apply the border attribute to an image11. A more complex but reliable method is to apply a border to an image using CSS inline styles12. Also, when using an image as a link you may also see a blue border around the image. Here is a tutorial to help resolve image links with blue borders13.
- use an online HTML editor
- center an image using HTML markup
- align images with CSS
- three ways to link CSS style rules to HTML
- position images with the align property
- use the table alignment method to position images
- use CSS and the float property to align images
- tutorial on image size attributes
- resize an image using a graphics program
- tutorial on how to make a CSS image gallery
- apply the border attribute to an image
- apply a border to an image using CSS inline styles
- resolve image links with blue borders