Electric Type

Multimedia

About Us

News

Help

Authoring   HTML Basics
Adding/Aligning Images

<img src="?"> places an image
<img align=?> aligns an image

Before you can put an image on a Web page, you need to know the name of the image file and where it's stored on your server (its source, of course.) That way you can instruct the browser on how to find the image it needs.

The easiest place to save the image is in the same folder or directory as your HTML source file, which is where the browser will automatically look for it. If you have many images to organize, you may want to place them in a single folder, called "imag es" or "stuff," then place that folder (or directory) in the same directory as your HTML file.

My image is called "picture_1.jpg," and it's in a folder called "stuff," which is in the same folder on our server as this HTML file.

The HTML for my monkey image will read like this:

<img src="/images/picture_1.jpg">

The picture looks like this:

Simple, huh? Now, using the image align tag, I can also control where the image is placed on the page. For instance, I can line it up on the left:

<img align=left src="/images/picture_1.jpg">

Which pushes it to the left:


Or I can line it up on the right:

<img align=right src="/images/picture_1.jpg">

Which - surprise! - pushes it to the right:

Centering an image is a little trickier, because <img align=center> doesn't work on most browsers. Instead, you'll have to first center the paragraph, with <p align=center> (even if you don't have any text), and then place the image.

So, to center our little monkey, we'd write:

<p align=center><img src="/images/picture_1.jpg">

And it would appear like this:


Got a handle on it? Now try it yourself.



Learn More
View Source
Paragraphs
Headlines
Links
Mailtos
Comment tags
Bold/Italics
Font color
Font size
Teletype
Blink
Preformatted text
Background image
Background color
Blockquotes
Line breaks
Aligning text
Adding/Aligning Images
Ordered lists
Unordered lists
Definition lists
Image borders
Wrapping text



Tutorials  

Authoring  

Teaching Tools  

Backend  

Multimedia  

Design  

E Business  

User Blogs

Screen Shots

Latest Updates

Contact Us

Valid HTML 4.01!
Valid CSS!

Breadcrumb

© ElectricType
Maintained by My-Hosts.com
Site map | Copyright | Disclaimer
Privacy policy | Acceptable Use Policy
Legal information.