START A COURSE

The HTML and CSS Blog:

Mastering HTML Images

Learn HTML with Song Level 4: Images

You may have noticed that we’ve divided our tutorials into sections. This can help you track your mastery as you work your way through our course. If you’ve been following along with our new posts, this month you mastered adding all kinds of images to your HTML posts. If that’s you, congrats! Have a fancy coffee drink to celebrate!

Everyone else may wish to review the posts below so they too can be masters of adding images to their HTML. (If you only have a few minutes today, be sure to check out our music videos on using image tags, below.) Here’s what we covered:

The Image Tag: Insert a Picture in Your HTML

In today’s HTML lesson, you’ll learn how to use the mighty image tag ( <img> ), which allows us to put all those lovely pictures on the Internet. You’ll learn about the image tag’s many fine attributes, which make it such a long and cumbersome tag to write out. I’ll simply list the tag’s attributes for easy reference, then I’ll teach you what each attribute is for and why it’s useful…read more

Creating Accessible Websites

In this HTML lesson you’ll learn about how we use alt and title attributes to make images more accessible. We’ll talk about why giving your images title attributes and alt attributes improves both web content accessibility and search engine optimization. We’ll also cover some other basic accessibility standards and offer some resources that let you test just how accessible your site is…read more

Preparing Images for the Web

The HTML image tag

The HTML Image Tag

This lesson will help you prepare an image for use on your web page. You may want to use an image editing software program to adjust size, crop, and compress your picture before placing it into your web page with the HTML image tag (<img>)…read more

SVG graphics

I’m really excited about using images in the SVG format because they solve a lot of problems with making your images look great on devices of any size and resolution...read more

The Favicon: Create an Icon for Your Site

What is a favicon? It's this.

Our favicon: the pink H

In this HTML post you’ll learn how to make a favicon—that little icon next to the url. You’ll learn how to install the new favicon on your site. I’ll also point you in the direction of some useful favicon galleries in case you don’t want to take the time to make your favicon yourself…read more

The New Figure Tag Lets You Relate Images to their Captions

Learn how to use the new HTML5 <figure> and <figcaption> tag to contain pictures and their captions.

But wait, we already have an <img> tag, what do we need <figure> for? The <figure> tag is meant to contain pictures and their related captions. It’s a way to organize your page content by grouping together captions and their related images…read more

Learn HTML with Our Music Videos

LaeCharles Lawrence, Jr. – HTML Image Tag Music Video

Not sure how to memorize all the properties of the HTML image tag? Our image tag music videos will have you singing the rules of image tags in no time.

Claude Parnell – HTML Image Tag Music Video


Up Next: Mastering HTML Links

The next section of our tutorial will introduce you to cascading style sheets (CSS), the sister language to HTML that allows you to style your content. CSS is what makes the web beautiful. It’s the design counterpart to the practical nuts and bolts of HTML. Many of the changes people want to make to their websites are cosmetic—colors, fonts,shapes, etc.—so we know these will be lessons to get excited about. Stay tuned to Learn HTML with Song by subscribing by RSS, Facebook, Twitter, or with email using the form below.

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.
  • http://www.hub4tech.com/ Manmeet Kaur

    Great Post ! HTML5 tutorial with simple and easy examples, Covering HTML5 Introduction Attributes,Canvas,SVG,Multimedia,Video,Audio,Plug-ins,YouTube Videos, Geolocation, Drag and Drop, Local Storage, Coding Conventions / Style Guide. HTML5 Tutorial & CSS3 Tutorial.

HTML Lessons

©2013 Diane Presler. All rights reserved.