Like HowStuffWorks on Facebook!

How Web Pages Work

Adding Images and Graphics

Place any digital image on your page using the following tag:

<img src="name of picture file.extension">

Images on Web pages are either GIF files (pronounced "jiff") or JPG files (pronounced "jay- peg"). Any image will contain one of those extensions, so if you have an image called "logo," it will be labeled either "logo.gif" or "logo.jpg."

Be sure to store the images and graphics that you will be displaying on your Web page in the same folder or directory that you have your "html" file stored into. Otherwise, your computer will have trouble finding the picture you want displayed. Also, be sure to type the picture name exactly how it is saved into that folder -- file names are case sensitive.


By default, your text and images are left-justified when displayed in your browser, meaning that text and graphics automatically line-up on the left margin. If you want to "center" any portion of your page instead, you can use the following tag:


You can end the centering with the corresponding closing tag:


You can also code "divisions," anything from a word to a line of text to an entire page, to be justified a certain way.

Start your division with the division alignment tag, including the justification you wish the text or images to take on (i.e. right, left, center):

Example: <div align="center">

End the division justification alignment with the tag:


With the information you have just learned in this article, you can begin to create very interesting and eye-catching Web pages. Try creating a Web page or two using the tools and tags we just discussed. If you're eager to have the world view your masterpiece, then skip to the article "Getting Your Page Online" to learn how to publish your new Web page.