HTML QuickStart Guide: The Simplified Beginner's Guide To HTML by Martin Mihajlov & ClydeBank Technology

Author:Martin Mihajlov & ClydeBank Technology [Mihajlov, Martin]
Language: eng
Format: azw3
Publisher: ClydeBank Media LLC
Published: 2015-04-07T16:00:00+00:00

Table 2. HTML Character Entities

Inserting Images

We can place all kinds of images on our web page, from logos to photographs. Web images appear automatically when the visitor jumps to our page, as long as the browser is configured to view them.

To place an image in a web document, we use the <img> element. The image does not reside in the web page. It is stored as a separate file, and the HTML code points to its location. Technically, an image element is an empty element, as it will be replaced by the actual referenced image content. As an empty element, it consists only of attributes and is opened and closed in a single tag.

To point to the actual image that we want to display, we use the src attribute to insert the relative or absolute path to the image.

<img src="images\cv_picture.jpg">

When a browser reads this <img> element, it sends out a request for the cv_picture.jpg file from the images folder. After retrieving the file, the browser will insert that picture into the page in the location of the <img> tag.

We are also strongly encouraged to use the alt attribute along with the <img> attribute. Short for alternate text, this attribute is used to describe the image and its meaning in words in order to give it context in the document.

<img src="images\cv_picture.jpg" alt="Scott Johnson profile picture">

Usually, alternate text doesn’t show up on the web page with the image, but it provides several important features. First, in keeping with the semantic importance of markup, it lets the image provide some meaning to the document. Without the alternate text in the <img> element, the image would be essentially “meaningless,” and the document would lose some of its semantic value. Second, from a more functional perspective, the browser will display the alternate text if it can’t display the image itself for any reason. Finally, and most importantly, the alternate text acts as an accessibility tool for visitors who are visually impaired and use a screen-reading program to access our website.

Note: While alternate text can theoretically be as long as we like, most browsers don't automatically wrap long lines. Therefore, it's a good idea to keep it under 50 characters.

When working with web images, we have to consider two variables: image dimensions and image file size. Image dimensions determine how much screen real estate an image occupies in pixels. The image file size will determine the time it will take for that image to be transferred over the Internet from a web server to a browser client. While parsing the code, when a browser reaches the img tag, it must first load the image to see how big it is and how much space it will consume on the screen. If we specify the image's dimensions, the browser can reserve some screen space and load the rest of the page content as the image loads.

The <img> element lets us specify the image dimensions through its optional height and width attributes. If we want to use the

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.