Jump to Main Content

Create an HTML Web Page

Working with paths

When working with images, you have three choices regarding the path. The following paths are acceptable:

Absolute

<img src="http://www.domain.com/dragon2.gif" width="162" height="216" alt="Dragon Blowing Smoke">
  • The disadvantage to this method is that you have to be online to see your image because it’s using the HTTP protocol.

Relative

<img src= "images/dragon2.gif" width="162" height="216" alt="Dragon Blowing Smoke">
  • This method is typically used and recommended. In this example, inside your root folder (the folder you created earlier), you create an additional folder, images and place all images for your web page inside. The following illustration depicts this structure:

Image directory structure

Site-Root Relative:

 <img src= "/images/dragon2.gif"  width="162" height="216" alt="Dragon Blowing  Smoke">
  • This method is similar to absolute but uses a preceding forward slash before the images folder is referenced. The disadvantage with this method is you cannot view your images locally, since site root relative means the path will only work on web server.

Using the code from before, insert the image below our first paragraph tag:

<body>
<h3>Ryan's Page</h3>
<p>Lorem Ipsum is simply dummy text of  the printing and typesetting industry. Lorem Ipsum has been the industry's  standard dummy text ever since the 1500s, when an unknown printer took a galley  of type and scrambled it to make a type specimen book. It has survived not only  five centuries, but also the leap into electronic typesetting, remaining  essentially unchanged. It was popularised in the 1960s with the release of  Letraset sheets containing Lorem Ipsum passages, and more recently with desktop  publishing software like Aldus PageMaker including versions of Lorem Ipsum.  </p>
<img  src="images/dragon2.gif" width="162" height="216"  alt="Dragon Blowing Smoke">
</body>

Save your file and preview the results.

Image

Common Problems with images

If you can’t view your page on your computer or via your website, there are three potential problems:

1) Miss-spelled: One common problem is miss-spelling the word src. It’s easy to spell it scr.

2) Local problems (your computer): If you receive a red x in your browser while viewing your page on your computer, there are three possibilities. You could have src spelled wrong, you could have the path to the image incorrect, or the image doesn’t exist on your computer.

3) Remote problems:  If you receive a red x in your browser while viewing your page on your website, there are three possibilities. You could have src spelled wrong, you could have the path to the image incorrect, or the image doesn’t exist on your server.

Aligning the image

Aligning an image works a bit differently than headings or paragraphs. If we want to center our image in the web page, we add the following code: 

<body>
<h3>Ryan's Page</h3>
<p>Lorem Ipsum is simply dummy text of  the printing and typesetting industry. Lorem Ipsum has been the industry's  standard dummy text ever since the 1500s, when an unknown printer took a galley  of type and scrambled it to make a type specimen book. It has survived not only  five centuries, but also the leap into electronic typesetting, remaining  essentially unchanged. It was popularised in the 1960s with the release of  Letraset sheets containing Lorem Ipsum passages, and more recently with desktop  publishing software like Aldus PageMaker including versions of Lorem Ipsum.  </p>
<p align="center"><img src="images/dragon2.gif"  width="162" height="216" alt="Dragon Blowing  Smoke"></p>
</body>

By nesting the image in a paragraph, we make the image a block level element which can then be aligned in the same way as a paragraph tag. Save your file and preview the results.

Image Centered

Wrapping the image around text

If we want the image to wrap around text, then we adjust the code as follows: 

<h3>Ryan's Page</h3>
<p><img  src="images/dragon2.gif" width="162" height="216"  alt="Dragon Blowing Smoke" align="left">

Lorem Ipsum is simply dummy text of the  printing and typesetting industry. Lorem Ipsum has been the industry's standard  dummy text ever since the 1500s, when an unknown printer took a galley of type  and scrambled it to make a type specimen book. It has survived not only five  centuries, but also the leap into electronic typesetting, remaining essentially  unchanged. It was popularised in the 1960s with the release of Letraset sheets  containing Lorem Ipsum passages, and more recently with desktop publishing  software like Aldus PageMaker including versions of Lorem Ipsum. 
</p>
</body>

We moved the image right after the opening paragraph, and then we set alignment to left. You will notice in the project file that there are additional paragraphs. Our reason is simple — to show the image wrapping around segments of text and then returning to the normal flow once content height is larger than image height. Save your file and preview the results.

Block level and inline elements

In HTML, you have two types of elements, block and inline. Some examples of block level elements are:

  • Paragraphs
  • Tables

Some examples of inline level elements are:

  • Images
  • Anchors (links)

Block level elements have an invisible box in which they occupy. This box contains space which is reserved for content, which can be text, images, and links. Inline elements have no invisible box, therefore, there’s no space reserved for content. This is how we can nest an inline element (image) inside a block level element (paragraph) to simulate a wrapping affect. This is also how anchors (links) can reside inside a paragraph or table.

We'll continue with with lists next.

top of page