Learn to Code: Episode 007 – Images and Chrome Dev Tools – Intro to HTML Part 4

In the last episode, we’ve talked about more common HTML tags like self-closing tags and lists. We also covered a cool Visual Studio Code function to generate a non-sense text called “lorem ipsum” by just typing in “lorem” and hitting TAB. This is useful for testing purposes as a placeholder text.

Now we will discuss how to insert images to our HTML document. A good HTML document almost always has an image. We will learn what is the difference between relative source and absolute source (sounds familiar?).

Here are things we will learn:

• <img> – Image
• HTML attributes: src, alt, width, height
• How to inspect an Element using Chrome developer tools.
• Formatting using line breaks (<br>)
• HTML nesting
• Proper code indention for readability

The next episode talk about how to create new HTML file and use an HTML tag to link to that new page and back. Till next time!