HTML Academy
An in-page link
Links and images6/17
Back to the list of tasks
  • 1. What is a link? The a tag
  • 2. Relative addresses
  • 3. Absolute addresses
  • 4. Link to the file
  • 5. An in-page link
  • 6. The img tag for images
  • 7. Image formats, SVG format
  • 8. JPEG format
  • 9. PNG format
  • 10. GIF format
  • 11. Image dimensions
  • 12. alt attribute
  • 13. Image link
  • 14. The figure and figcaption tags, demonstrative material
  • 15. Links with a blank href, title attribute
  • 16. Summary of “Links and Images”
  • 17. Test: Cat tours travel agency gallery
Image formats, SVG format
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

The img tag for images

We can easily see that on our Website of a Beginning Coder that there are no images at all. However, well-chosen images that are the right size and are displayed without errors are the key to a successful business. Therefore, Muffin gave us a new assignment: to understand all the formats and uses of images.

To do this, he sent us the layout of our blog with images. We have already saved them to the right folder. All you need to do is load them in their proper places within the layout.

So, let’s take a look at how to load images. To do this, we use the tag <img>. This is a single tag, which we already know about. It does not have a closing tag. The <img> tag by itself is useless without its src attribute, which indicates the path and the name of the image.

<img src="logo.png">

Let’s load an avatar image on the main page.

Comments

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The website of a beginning coder</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>The website of a beginning coder</h1> </header> <main> <!-- Load the thumbnail here --> <nav> <h2>Recent Posts</h2> <ul> <li><a href="day-1.html">Day One. How I forgot to feed the cat</a></li> <li><a href="day-2.html">Day Two. I want to become a coder</a></li> <li><a href="day-3.html">Day Three. My cat is offended at me</a></li> <li><a href="day-4.html">Day Four. How I almost got sick</a></li> <li><a href="day-5.html">Day Five. I am relaxing</a></li> <li><a href="day-6.html">Day Six. How I failed to understand anything</a></li> <li><a href="day-7.html">Day Seven. Muffin gave me an assignment</a></li> <li><a href="day-8.html">Day Eight. It’s getting very serious</a></li> <li><a href="day-9.html">Day Nine. Or more precisely night</a></li> <li><a href="day-10.html">Day Ten. Summing up</a></li> <li><a href="day-11.html">Day Eleven. Everything should be taken in moderation</a></li> </ul> </nav> <section> <p>Greetings to everyone! Welcome to my first site. Up until just recently I had no idea what a coder does for a living, but now I have found <a href="https://htmlacademy.org/courses">interactive courses in HTML and CSS</a> and I have set myself the goal of becoming one. I even was assigned an instructor, Muffin, who does not allow me to slack off and will track my progress.</p> <p>My first assignment is to keep a diary and honestly write about all of my accomplishments.</p> </section> <section> Skills section </section> </main> <footer> Website footer </footer> </body> </html>
CSS
body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 36px; line-height: normal; } h2 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } ul { list-style: none; padding-left: 0; } footer { margin-top: 30px; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Goalscompleted
0
    1. Add the avatar <img src="img/raccoon.jpg"> to the very beginning of the main content on the main page.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.