How to create images and links?

In the previous section, three villagers arranged their own products. This time, the first villager added pictures to the products in order to compete with other villagers. The graphical web page list is shown in code 1-3.

Open Notepad, enter the above code, save the file named "img. htm" to the desktop, double-click the "img. htm" file, and the display result is as shown in Figure 1.5.

Tip: You can't see any pictures at this time. Go online to find some pictures of winter melon, watermelon and pumpkin, then create a new folder "images" on the desktop, put the pictures you find in the folder "images", and re open img.htm to see them.

Website construction Code analysis: add the<img>tag to the page. In this example, the<img>tag has three attributes separated by spaces. The "src" attribute specifies the path of the image, the "width" attribute specifies the width of the image, and the "height" attribute specifies the height of the image.

Since the first villager added pictures to winter melons, watermelons and pumpkins, other villagers followed suit. Later, when everyone's products became more and more, one page could not hold all the pictures. At this time, the Lan villager studied hard for a few days and decided to revise it. The original picture was separated from the list page. The list was only used to display the name and description of the product. A link was added to the name. Click the name to see the picture.

The third villager has 4 pages of source code. Open Notepad, enter codes 1-4, and save the file named "links. htm" to the desktop.

Open Notepad, enter the following code, and save the file named "donggua. htm" to the desktop.

Open Notepad, enter the following code, and save the file named "nangua.htm" to the desktop.

After saving everything, return to the desktop, double-click the "links. htm" file, and the browser displays the results as shown in Figure 1.6.

The winter melon, watermelon and pumpkin on the page have colors and underline, which means that there is a link for them, and they will jump to another place after clicking. Click any link, such as winter melon, and the browser will jump to "donggua. htm". After reaching "donggua. htm", you can also click the "Back to List" link to return to "links. htm", as shown in Figure 11.7.