Add An Image
Let’s add an image, we’re going to add a picture of Larry, since it’s his page
after all. But you can add a picture of yourself, or anything you like. We’ve included a picture of Larry in your
To add our image, we’re going to use an
<img> tags belong to a special group of HTML tags called self closing tags. These as you’ve probably guessed, don’t have closing tags. Instead, we use attributes to tell our
<img> tags the information they need to display properly.
This an image that that will display a picture of a very cute kitten. The
attribute is how we tell our
<img> tag where to find the image it will display.
If for whatever reason, our image doesn’t load properly, the
alt text will be displayed.
alt attribute is also REALLY important for accessibility. If someone who
uses a screen reader visits your website, the alt text is read, so always remember
to add an
alt tag and describe your image.
Enough chit chat, let’s add this image already. We want to include an image tag
<header> block. Let’s put it right above your
<h1> tag, so your header looks
Let’s also add a class
.profile-picture so we can style our picture of Larry
to look exactly how we want it to.
In styles.css, add:
Save both styles.css and profile.html and refresh your page. You should see something like this:
Let’s add a little bit more CSS so our picture looks exactly how we want it.
.profile-picture CSS block, let’s add a
Save styles.css and refresh your page.
If you want to change the picture to something else, change the
src attribute on your
<img> tag. Can’t think of an image that is equally or more adorable than Larry? Here are some fun sites that will provide links to some great images: