Including images in Tables

download the Melon.jpg file here, and save it to your computer
inside the Exercises01 folder, create a folder named Pictures
inside the Pictures folder, create an HTML file named Fruit.html
move the Melon.jpg image into the Pictures folder
open the Fruit.html in Notepad++ and add the following line of code:
<img src="Melon.jpg"> (with the double quotes).
save the Fruit.html file
open Fruit.html in a browser to view the image

Explain the contents of this tag <img src="Melon.jpg">:

1-12 Definition 1: The image tag

This tag: <img> is called the image tag.

1-12 Orientation 2: The image tag

Note the image tag comes as a single tag, not a tag pair.

1-12 Definition 2: src

In the image tag, src stands for source.

1-12 Example 1: Including images in HTML files

If both the Melon.jpg file and the HTML file are located in the same folder, you can embed the image in the HTML file like this:

<img src="Melon.jpg">

1-12 Explanation 1: Including images in HTML files

The image tag: <img> is used to embed an image into an HTML page. If both an image file and the HTML file are located in the same folder, you can embed the image into the HTML file by setting the src attribute of the image tag to the image file's name:

<img src="image file name">.

1-12 A 2 Discover

inside the Pictures folder, create a new folder named images
move Melon.jpg into the images folder
modify Fruit.html by replacing its current code with this line:
<img src="images/Melon.jpg">
open Fruit.html in a browser

Explain <img src="images/Melon.jpg"> here:

1-12 Explanation 2: Folder for an image file

If an image file that will be embedded in an HTML file is located in a subfolder, its location must be specified using the src attribute:

1-12 Example 2: Folder for an image file

Here, the image file that will be embedded in the HTML file is located in the images subfolder. Its location is specified in the src attribute:

1-12 Example 3: Case sensitivity of the images folder name

When image files, which will be embedded in an HTML file, are located in a subfolder named images, they are accessed with:
src="images/image file name".
However, using one of the following lines can cause the images not to display when the HTML file is uploaded to the internet:

<img src="Images /ImageFile.jpg">
<img src="IMAGES/imagefile.jpg">

This happens because, once your code is uploaded to the internet, folder and file names become case-sensitive. Therefore, for the images folder, the correct and functional link should be:

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

1-12 Explanation 3: Case sensitivity of the images folder name

The case of all folder paths and the image file names on the computer must match those specified in the HTML document.

1-12 Explanation 4: Various types of files

On the internet, there are various types of files, such as .jpg and .gif. So far, a .jpg file has been used for the images in the starfruit files. In the following exercises, the .gif file type will also be used, along with the .jpg files you have been using.

1-12 A 3

download the rice.gif file here, and save it to your computer
move the rice.gif file into the images folder, which is located within the Pictures folder
inside the Pictures folder, create an HTML file named Rice.html
embed Rice.html into the HTML file, to display the image

1-12 Example 4: Including an image in a table

Follow this example to include an image into a table:

<table>
             <tr>
                    <td>This is a house:</td>
                    <td><img src= "images/house.jpg"></td>
             </tr>
</table>

</body>
</html>

1-12 A 4

In the Pictures folder, create an HTML file containing this table with this image:

1-12 Definition 3: Extended definition of "table"

So far, this definition of a table was used: A table is an arrangement of text in rows and columns. But image elements and other types of elements can also be placed in a table. All of these - text elements, image elements, and others - can be called content. So the definition can be extended to: A table is an arrangement of content in rows and columns.

1-12 A 5

In the Pictures folder, create an HTML file containing this table with this image:

1-12 A 6

download these image files: RiceBrown.gif and RiceGreen.gif here, and save them to your computer
move the images into the images folder
In the Pictures folder, create an HTML file containing this table with the four images:

1-12 Orientation 3: Folder for the remaining exercises

From now on, use the Pictures folder for all remaining exercises in this workbook that require you to add images into HTML files. The starfruit files continue to be saved in the StarfruitJuiceFiles folder.

1-12 Orientation 4: Adding images to practice files I

For each of the following exercises follow these steps:

in the Exercises01 folder, create a copy of the corresponding previous HTML file
move each copy into the Pictures folder
rename the copied HTML file using the exercise number
download suitable images from the internet and store them in the images folder inside the Pictures folder
enhance the HTML file by inserting the downloaded images into its table

1-12 B 1 Cats

Enhance the most recent cats file you have created by adding images.

1-12 Orientation 5: Adding images to practice files II

As you add images to the tables, you may need to extend the tables' rows and columns as necessary.

1-12 B 2 Dogs

Enhance the most recent dogs file you have created by adding images.

1-12 Orientation 6: Adding images to practice files III

With images included in the tables, you can also add more text to improve the presentation.

1-12 B 3 Birds

Enhance the most recent birds file you have created by adding images.

1-12 Orientation 7: Adding images to practice files IV

Consider including additional styling to enhance the visual appeal.

1-12 B 4 Music

Enhance the most recent music file you have created by adding images.

1-12 Explanation 5: Image size

To adjust the size of an image as it appears in the HTML document, use the following syntax:

1-12 B 5 Games

Enhance the most recent games file you have created by adding images.

1-12 B 6 VegetrablesAndFruits

Enhance the most recent VegetablesAndFruits file you have created by adding images.

1-12 B 7 DreamsAndReality

Enhance the most recent DreamsAndReality file you have created by adding images.

1-12 B 8 BooksAndMovies

Enhance the most recent BooksAndMovies file you have created by adding images.

1-12 B 9 Your own HTML file

Enhance the most recent file you created with your own content by adding images.

1-12 A 7 Rereading the yellow sections

Now that you have gone through the exercises on this page, reread the yellow sections.

1-12 A 8 StarfruitJuice12.html

download the StarfruitJuice.jpg file here and save it to your computer
move StarfruitJuice.jpg into the images folder, located in the StarfruitJuiceFiles folder
within the StarfruitJuiceFiles folder, create a copy of the StarfruitJuice11.html file
rename the copy of the StarfruitJuice11.html file to StarfruitJuice12.html

At this point you have 2 identical files, named StarfruitJuice11.html and StarfruitJuice12.html.

modify StarfruitJuice12.html to make it look like this.
save StarfruitJuice12.html

This page was created by Hanspeter Amend

Previous page Table of contents

Solution proposals

1-12 A 3

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

1-12 A 4

             <tr>
                     <td style="border:4px; border-style:solid;border-color:red;"><img src="images/Melon.jpg"></td>
             </tr>
      </table>

</body>
</html>

1-12 A 6

<html>
<body>

<tr>
<td style="border-width:4px; border-style:solid;border-color:red;">Melon image</td>
<td style="border-width:4px; border-style:solid;border-color:red;"> <img src="images/melon.jpg"></td>
</tr>

<tr>
<td style="border-width:4px; border-style:solid;border-color:red;">Rice image</td>
<td style="border-width:4px; border-style:solid;border-color:red;"> <img src="images/rice.gif"></td>
</tr>

<tr>
<td style="border-width:4px; border-style:solid;border-color:red;">Brown rice</td>
<td style="border-width:4px; border-style:solid;border-color:red;"> <img src="images/RiceBrown.gif"></td>
</tr>

<tr>
<td style="border-width:4px; border-style:solid;border-color:red;">Green rice</td>
<td style="border-width:4px; border-style:solid;border-color:red;"> <img src="images/RiceGreen.gif"></td>
</tr>

</table>

</body>
</html>

1-12 A 8

<html>

<!- - Set style attribute for the color style of the page background. - ->
<body style= "background-color:lightblue;">

<!- - Title: Set style attribute for text style. - ->
<h1 style= "text-align:center;color:blue;">About the Star Fruit</h1>

<!- - Line break - ->
The starfruit, also called carambola, is a sweet and sour fruit that is in the shape of a five-point star.<br>
The skin is edible and the flesh has a mild, sour flavor that makes it popular in a number of dishes.

<!- - Paragraph - ->
<p>The starfruit is yellow or green in color. It comes in two main types: a smaller, sour variety and a larger, sweeter one.</p>

<!- - Two row table. Set style attribute for position style and table size style. - ->
<table style="border-width:5px;border-style:solid;border-color:blue;">

<!- - Placing the unordered list into the second row and left column of the table. - ->
<tr>

<!- - First row and first column of the table. Set style attribute for background color style. - ->
<td style="border-width:4px; border-style:solid;border-color:red;">

<!- - Set heading - ->
<h1>Starfruit Juice Recipe</h1>

<!- - Set style attribute for font styles. - ->
<p style= "text-align:center;font-weight:bold;text-decoration:underline;font-family:Courier;font-size:150%;">Starfruit Healing Properties</p>

<!- - Set style attribute for list style and font styles. - ->
                             <ul style="list-style-type:circle;font-size:110%;font-family:Verdana;">
                                     <li>low calories</li>
                                     <li>supports metabolism</li>
                             </ul>
                     </td>

<!- - First row and second column of the table. Set style attribute for alignment, background color and size styles. - ->
                      <td style="border-width:4px; border-style:solid;border-color:red;">

<!- - Linking an image into the first row and second column of the table. - ->
                               <img src="images/StarfruitJuice.jpg">
                       </td>
              </tr>

<!- - Placing heading, title and unordered list into the third row and first column of the table. - ->
              <tr>

<!- - Second row and first column of the table. Set style attribute for text and table styles. - ->
                     <td style="border-width:4px;border-style:solid;border-color:red;vertical-align:top;">

<!- - Set style attribute for the second title. - ->
                      <p style="text-align:center;font-size:150%;font-family:'Times New Roman';">Ingredients</p>

<!- - Ordered list. Set style attributes for font styles and for spacing style between list items.- ->
                           <ol style="font-family:Arial;font-size:115%;list-style-type:lower-alpha;">
                                      <li style="margin-bottom:6px;">3 starfruits</li>
                                      <li style="margin-bottom:6px;">1 cup of water</li>
                                      <li style="margin-bottom:6px;">1 cilantro leaf</li>
                                      <li style="margin-bottom:6px;">3 mint leaves</li>
                                      <li style="margin-bottom:6px;">2 cups of water</li>
                                      <li>some cinnamon</li>
                             </ol>
                     </td>

<!- - Second row and second column of the table. Set style attribute for background color style and width style. - ->
                     <td style="border-width:4px; border-style:solid;border-color:red;">

<!- - Set style attribute with styles for for the third title and subtitle. - ->
                               <p style="text-align:center;">

<!- - Set style attribute for font styles. - ->
                               <span style="font-family:'Times New Roman';font-size:200%;font-weight:bold;font-style:italic;text-decoration:underline;">Preparation of Starfruit Juice</span>
                              <br>

<!- - Set style attribute for font styles. - ->
                              <span style="font-family:'Times New Roman';font-size:150%">Set up a blender.</span>
                              </p>

<!- - Ordered list. Set style attributes for font style and for spacing between list items style.- ->
                                <ol style="font-family:'Times New Roman';font-size:150%;list-style-type:decimal;">
                                         <li style="margin-bottom:2px;">Blend the starfruits in the blender</li>
                                         <li style="margin-bottom:2px;">Pour fresh water and blend until smooth</li>
                                         <li style="margin-bottom:2px;">Add mint, cilantro leaves and cinnamon to taste and blend for another second</li>
                                         <li>Serve in a glass</li>
                                </ol>
                      </td>
              </tr>
</table>

</body>

</html>

This page was created by Hanspeter Amend

Previous page Table of contents