Chapter 4: Inserting Images and Tables

From NvuTutoriaWiki

Contents 1 Inserting Images 2 Creating Tables 3 Sample Text 4 Next

Inserting Images

Using relative paths is preferred over absolute paths.

Uptill now, we have used text in our HTML document and played with various formatting tools to make the text appeal to the user's eye. We have also used links to connect to other web documents. After text, the second most widely used feature in web pages is displaying or embedding images in a web page. Images or pictures bring your web page to life as it is much easier to show an image of something rather than having to explain in words.

Image:ImgProp.pngFig.4.1 Image Properties dialog box

To insert an image at the current position of the cursor, click on the "Image" button in the composition toolbar. This will open the "Image Properties" dialog box (see Fig 4.1). In the dialog box, type in the path for the image file or choose the file by clicking the Choose File... button. You should also write some relevant text in the Alternate Text text box. Alternate text will be displayed in case the image cannot be downloaded by the user. It helps the user know what kind of graphic should be there, and that something is wrong with the linked image (helpful in reporting problems with web page).

Creating images of display size is better than resizing using HTML.

You can do further customizations to the image by changing the options in the tabs in the Image Properties dialog box. In the Dimensions tab, you can change the size of the image when it is displayed in a browser. A better approach than change the size of image by the browser is to create the image to be of that size in the first place. The resizing of the image by the browser generally leads to a decrease in quality of the image and hence it should be avoided unless it is necessary. In the Appearance tab, you can choose the amount of spacing and size of a solid border around the image. There is an option of how to place the image with respect to the text surrounding it. The Link tab allows us to use the image as a hyperlink to work the same way as text links.

We have inserted images in our sample text below. The images are in cells of a table under the product they represent. To see just the images (without the table and other formatting) click <a href="sampleText-img.xhtml" target="_blank">here</a> to view the unformatted sample text in a new window. It also shows how alternate text comes into play (second image, the Mozilla logo, is absent) when an image link is broken or cannot be downloaded.

As the images inserted in a web page are just links to individual files, do not forget to upload the image files to the web server while publishing. Also, you should be careful to have the same directory structure on the web server as you have for your web pages and other files linked to these web pages. This is necessary as the links for files or images on your web page will break when viewed in a browser.

Creating Tables

After an introduction to inserting images in your web page, we present here another handy feature of HTML: tables. Tables are created in HTML by using the tabular environment tag <table> ... </table>. In addition to the normal use of tables for data tabulation, we can also use tables to position data in our web page, or use table as a base to design columns although it can be done much more efficiently with style sheets.

In this section we will concentrate on creating tables for text/images only. To insert a table at the current cursor position:

1. Click on Table button on the composition toolbar (opens Insert Table dialog box Fig 4.2)
2. Hover mouse over table matrix to indicate size of table to insert.
3. Click on the cell below the mouse to create the table of size indicated by selection.

Image:InsertTable.pngFig4.2 Insert Table dialog box

After creating the table, you can add text, links, images, etc to the table cells. As an example we created a table with 2 rows and 6 columns and copied the links in the "Interesting Links" section of our sample text. Cells in the second row were populated with images related to the links in each cell of first row.

Another way of creating a table is by converting selection. In this method, we select the text we want to put in a table and click on the Table button on the composition toolbar (or Table > Create Table from Selection). This opens the Convert to Table dialog box. You can select the character used to separate the selection into columns. The separator characters can be either comma, space, or user defined. Clicking OK will convert the selected text with a table. Each line of the selection is converted to a row in the generated table.

The Stats section of the sample text was converted to a table using the Convert to Table method, with "space" as the separator character. To view only the sample text with only the table, click <a href="sampleText-table.xhtml" target="_blank">here</a>.

Image:Convert2Table.pngFig4.3 Convert to Table dialog box

Sample Text

Below is the sample text. Unformatted text is greyed out till it has been formatted during the course of the tutorial.

UNIQ6548647a5c382fc4-HTMLCommentStrip44457874740e67a500000001

UNIQ6548647a5c382fc4-HTMLCommentStrip44457874740e67a500000002

Next

In the next chapter, we will learn how to publish our web page. Publishing your documents (web pages, images, and other files) to a web server is the final step. After the publishing process is completed successfully, users can see you web pages by visiting your website.

©2004-2006 KDS Sahambi