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
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
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
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.