“Links and Images” memo
What is a link?
A typical link is a fragment of text. When you click on it, you go to another page, open an image, start downloading a file, or move to some place on the current page.
You create links using the
<a> tag. For example:
<a href="https://htmlacademy.org">HTML Academy</a>
<a> tag can generally be used without an address, in other words, without the attribute
href. This tag stands for “stub link”, which under other conditions may become just a regular link. Often, stub links are used to show that we are on the current page:
<ul> <li><a>Page 1</a></li> <li><a href="2">Page 2</a></li> <li><a href="3">Page 3</a></li> </ul>
When we remove the
href attribute from the link, it is a best practice to leave a tooltip about why we did it. You can leave a tooltip using the title attribute. The tooltip will appear when you hover the cursor over the link for a little while.
If you need to create a link to another website on the Internet, then you need to use a “regular” address. This “normal” or full address is called the absolute address. It looks like the following, for example:
Absolute addresses consist of at least three parts: the protocol, server name, and path.
When you wish to link to a file that is stored locally on a computer, relative addresses are used. Unlike “regular” addresses, these relative links contain no website address. For example:
Relative addresses work not only for files on a computer, but also for pages on a network. If you place two files on the Internet (without changing their location relative to each other), then the relative links between them will still work.
If the address does not contain a server name or protocol, then this is a relative address.
Links to the file
Links not only take you places, but they also allow you to download files. To do this, simply write out the link to this file in the
href attribute. In order to prevent files from being opened directly in the browser, the
<a> tag should use
<a href="file.pdf" download>The browser downloads me, but it will not attempt to read me</a>
An in-page link is a regular link whose address contains the
# character, which is immediately followed by the element id. The ID is created using the
id attribute. It specifies where on the page you are taken when you click on the link.
<a href="#part1">Chapter 1</a>
The anchor link is used to scroll to a specified part of the page. It can also be used in absolute addresses.
<img> tag is used to load images. It has no closing tag, and the path to the image is assigned using the
src attribute. For example:
We have several basic image formats:
SVG format is used to present scalable vector graphics. The quality of such images does not change when they are resized, and they also have a small file size. This format is great for graphs, logos and icons that are not color intensive. This format is most often used in cases when it is necessary to scale an image in a lossless way, change the color of image elements, and animate parts of an image.
JPEG format is suitable for photos, drawings with lots of colorful details, and images with smooth transitions between different brightness and contrast levels. When the image is compressed, its quality deteriorates.
PNG image format allows you to save images with a high degree of clarity. The main feature of this image format is its support for transparency. It is suitable for images with transparency and translucency when it is necessary to preserve the increased accuracy of full-color images and for images with sharp color transitions.
GIF image format is used for the simplest animations. Recently, GIF images have started to be used less frequently, since they have been replaced by other, more optimal formats.
In order to control the width or height of the image, the attributes
height are used. The dimensions are specified without units in these attributes.
<img src="logo.png" width="200" height="100">
If you specify only one of the dimensions, whether width or height, then the browser will calculate the second dimension independently based on the image proportions. If you specify both the height and the width at the same time, then the browser may display the image disproportionally.
The alt attribute
Alternate text is specified for cases where the image cannot be displayed in order to make it clear what is being shown. In addition, alternative text helps websites remain accessible, for example, to the category of users who cannot see images.
The alternate text for the image is assigned using the attribute
alt. For example:
<img src="cat.png" alt="A cat that walks by himself">
Figure and figcaption
<figure> tag is suitable for any illustrative or demonstrative material that may supplement the content of the document, such as graphs, images, code examples, tables, and so on.
We also have the
<figcaption> tag that is used to mark up an explanatory comment to this illustrative material. This is placed as the first or last element inside
<figure>. For example:
<figure> Graph, image, diagram or code <figcaption>Caption for the content</figcaption> </figure>
You can create more than just text links. You can also format images as links. To do this, you need to wrap the
<img> tag in the
<a> tag. For example:
<a href="http://keksby.ru"> <img src="cat.png" alt="Muffin"> </a>