Vance's e-Zguide "10 steps to creating simple HTML files" Step 6 Inserting pictures
<-- Back to 5 | Next: On to Step 7

Try it: Compare step 5 with this page.

Concept: Adding pictures on your page

Explanation:

• The picture is a separate document to your HTML file. The HTML page has the information that tells the browser where the picture is and where to put it, what size to make it, and so on.
• The IMG tag tells the browser to imbed a picture at this place on the web page.
• The SRC stands for source, or where the picture is on the disk
• The picture can be almost anywhere. The most convenient place is in the same folder at the HTML document calling it.
• The source location in this example is understood to be in the same folder as this file is in (otherwise there would be a 'path' prepended to the file name inside the quote marks).
• The file written here has to have the same upper/lower case structure as the file on the disk (keeping everything lower case is easiest, and no spaces in file names either!). This rule might not be rigorously applied in the environment of your computer or network, but it's hard and fast on the Internet, so keep it in mind if you develop web pages locally with intent to move them to the Internet later.
• The dot.jpg is an extension that tells your computer what kind of file it is, but you can call it what you like as far as the Internet is concerned.

What's coming: Now that you've got the idea of 'linking' (to a picture in this case) let's look at how you link to other files in your project ...

• 1. The basic structure tags
• 2. Putting your document title in the blue bar of the browser
• 3. Formatting text: getting the browser to display text in paragraph form
• 4. Formatting text: breaking the text into lines with line breaks
• 5. Formatting text: bold and italics
• 6. Inserting images <-- You are here!
• 7. Linking to other html files in a web project
• 8. Linking to other URLs on the Internet
• 9. More text formatting: changing font size
• 10. More formatting: centering text and images, and drawing lines across the page