Getting started with html: using images in HTML

The inserted diagrams in HTML documents are common in web front-end development and are also necessary application methods. By inserting the corresponding images on the page, you can bring a good experience to the viewers and make the page content more intuitive and persuasive.

This section describes how to use img tags in HTML documents, and set the display format of images in HTML documents based on various attributes to ensure that images can better serve HTML pages.

How to use images in HTML

To insert an image into HTML, you must use the label to define the image. In the label, set the src attribute to specify the url address of the image to be loaded for the img label. The image url can be an absolute or relative address.

Note that the img label can only add attributes without closing tags. For example, the common img labels are:

Images can also be loaded to the page as backgrounds using css styles. This section does not describe how to use the css background call to display images. This content will be explained in future css courses.

 

label attributes

Alt attribute | when the alt attribute is displayed in the browser or the image cannot be loaded, a pre-set text is displayed to tell the viewer the approximate content originally displayed in the image. In this way, you can understand the general content of the original image when the image cannot be loaded. For example, a common mobile browser can block web images in 3G mode. Therefore, it is necessary to write alt text. The alt tag content also affects the seo search engine's recognition of images. Therefore, when writing alt, enter the text description that is more relevant to the image.

Example:

Display result:

 

Height attribute and width attribute | the height and width of the image can be forcibly defined, and the image will lose its original height and width, and be displayed by stretching according to the set height and width. By default, the browser automatically obtains the original height and width of the image file. However, in some cases, not specifying the image height and width will affect the display efficiency of the browser, so it is best to set the correct height for the image.

Example:
Display:

 

Set links for images

By setting links for images, you can make the entire image an anchor. In front-end development, users can be more easily concerned and click hyperlinks. Common applications include some graphic buttons. You can directly jump to the page by clicking the image area.

The method for setting the connection for the image is to apply a <a> label on the outside of the label, and the anchor of the label is set to the image.

Example: <a title = "from scratch in front-end development" from basic to in-depth practical tutorial "href ="/front_tutorial "> </a>

Display:

 

 

Image hot zone

In HTML, you can set different heat zones for a single image. Each heat zone can point to a different url address. The shape of the heat zone can be set by coordinate or attribute. You can click the mouse in the heat zone to trigger the corresponding jump event.

For example, if an instance is referenced below, the Heat Zone is set to the corresponding planet section. By clicking a different planet, the corresponding planet page is displayed:

To set a heat zone for an image, follow these steps:

1. Set the usemap attribute in the label and set a value. This value is used for hot zone encoding to identify which image is applied to the hot zone. For example, usemap = "# planetmap"

2. Use the <map> label to define the hot zone encoding on the page. The label ends with <map> start </map>. You must specify the image name for the map tag, for example, <map name = "planetmap" id = "planetmap">.

3. Use the <area> label to set the hot area shape, location coordinate coords, hyperlink href, and hyperlink opening mode target. It is complicated to define the coordinates of the heat zone, and it is difficult to repeatedly test the coordinates in the browser. We recommend that you use the image heat zone function in the dreameweaver design view.

For example, in the design View of dreameweave, click the image on the page to activate the hot zone function.

As shown in the following figure:

 

Conclusion: using images in HTML is the core application of front-end development. By setting different images in HTML, you can control the UI display of the page and optimize the user experience. By adding an anchor to an image, you can also guide users to focus more on the main content of your site.