2.5 Links and Images¶

Anchor Elements¶

<a>click me</a>

An HTML attribute gives additional info to the element that goes in the opening tag
Add a href (hyperlink reference) attribute to the opening anchor tag

<a href="https://www.theodinproject.com/about">click me</a>

By default, any text wrapped with an anchor tag without a href attribute will look like plain text.
If the href attribute is present, the browser will give the text a blue color and underline it to signify it is a link.
Can link to videos, pdf files, images, etc, but for the most part, you will be linking to other HTML documents

Links to other pages within our own website
Relative links do not include the domain name
Since it is another page on the same site, it assumes the domain name will be the same as the page we created the link on.
Relative links only include the file path to the other page, relative to the page you are creating the link on.

<body>
  <h1>Homepage</h1>
    <a href="https://www.theodinproject.com/about">click me</a>

    <a href="about.html">About</a>
</body>

This works because the index and about page are in the same directory.
We can simply use its name (about.html) as the link’s href value.
Normally we would only have the index.html at the root directory and all other HTML files in their own directory.

<body>
  <h1>Homepage</h1>
  <a href="pages/about.html">About</a>
</body>

To display an image in HTML we use the <img> element.
The <img> element is self-closing.
Empty, self-closing HTML elements do not need a closing tag.
Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a src attribute which tells the browser where the image file is located.
The src attribute works like the href attribute for anchor tags
It can embed an images using absolute or relative links

 <img src="https://www.theodinproject.com/mstile-310x310.png">

<img src="images/dog.jpg">

If you're in a subfoldered HTML file, you will have to get the images folder all the way from the parent directory
To go to the parent directory we need to use two dots in the relative filepath like this: ../

<img src="../images/dog.jpg">

To break this down:

First, we are going to the parent directory of the pages directory which is odin-links-and-images.
Then, from the parent directory, we can go into the images directory.
Finally, we can access the dog.jpg file.

Besides the src attribute, every image element should also have an alt (alternative text) attribute
The alt attribute is used to describe an image
It will be used in place of the image if it cannot be loaded.
It is also used with screen readers to describe what the image is to visually impaired users.

 <img src="https://www.theodinproject.com/mstile-310x310.png" alt="The Odin Project Logo">

There are 4 main image formats in use on the web and they all do different things:

JPG
- Designed for handling larger color palettes without massively increasing file size
- No transparent pixels, so you can see white edges
- Great for photos
GIF
- Low level of details
- Used for simple animation
PNG
- Allows for transparent pixels
- Great for icons, tech diagrams, logos, etc.
SVG
- Unlike pixel based above, SVG is vector based, which allows it to scale without loss of quality
- Great for responsive design
- Great replacement for PNG, EXCEPT:
  - There is one potential issue with SVGs: for them to display consistently across browsers, you need to convert any text fields to outlines using your image editor
  - If your images contain a lot of text (like the fancy screenshots in this tutorial), this can have a big impact on file size.