Patterns of Chaos
» HTML Tutorial » Images
Logo

Images

Our Solar System page is looking better now, but wouldn't it be nice if we could include some pictures of the planets? Well, pictures are easy to add, as long as you have the picture you want. You just use an image tag. But "image" isn't what's used. Instead, it's shortened to img. You also need to tell the browser where to find the image - or the image source (which is shortened to src)

An image tag looks like this: 

  <img src="images/poc.gif">

Here's how that would look:

Notice that the <img> tag is a single tag. Like <br>, <img> is a stand-alone tag. It doesn't contain anything, so it doesn't need a closing tag.

The src (source) tells the browser where to look. In this example, the image is in the 'images' directory on the same server. But you can even use images on other web servers, if you have the full URL:

  <img src="http://patternsofchaos.net/poc/images/poc_logo_med.png">

And here's that one:

Be sure you have the image owner's permission before you do this!

So, let's add a picture of Saturn and a picture of Mercury to our Solar System page:

<html>
  <h1>The Solar System</h1>
  <p>The Solar System consists of eight planets*. These planets all travel
    in circles around the sun. The four planets closest to the sun, known as
    the inner planets, all have hard surfaces and either no atmosphere or an
    atmosphere of relatively thin gasses. The four outer planets, because of
    their distance from the sun, have atmospheres made mostly of liquified
    gasses, and are known as gas giants</p>
  <p>The eight planets, in order of distance from the sun (closest to
    farthest) are:</p>
  <ol>
    <li>Mercury</li>
    <li>Venus</li>
    <li>Earth</li>
    <li>Mars</li>
    <li>Jupiter</li>
    <li>Saturn</li>
    <li>Uranus</li>
    <li>Neptune</li>
  </ol>
  <h2>The Inner Planets</h2>
  <p>The four inner planets are: Mercury, Venus, Earth, and Mars. They are
    all close enough to the sun to have gaseous atmospheres, although
    Mercury is so small that it has almost no atmosphere at all. All four of
    the inner planets have a solid, almost spherical crust.</p>
    <img src="images/mercury.gif">
  <h2>The Outer Planets</h2>
  <p>By contrast, the outer planets have thick atmospheres of gasses such
    as Hydrogen, Helium, or Methane. These planets are so cold that these
    gasses are all in liquid form.</p>
    <img src="images/saturn.jpg">
  <hr>
  <h3>Notes:</h3>
  <p>* Pluto used to be considered the ninth planet, until the
    International Astronomical Union changed the definition of a planet in
    2006. Now, we have eight planets and three dwarf planets:<br>
  <ul>
    <li>Pluto</li>
    <li>Ceres</li>
    <li>Eris</li>
  </ul>
</html>

And here's how that page looks:


 
Contact