A common self-closing tag is the <img> tag. What would a website be without images? We also use CSS to set images, and that will be shown later. But for now, to add images to your site, we’ll use the <img> tag inside our HTML documents.
The image tag has two required attributes, src and alt.
<img src = “path to image or url link” alt = “some alternate text to display in case image does not load”>
Attributes provide more information about an html element. Sometimes, certain attributes are required with certain tags, like for <img>. Without both the src and alt attributes and their respective values, the <img> tag will not work properly. So, if you just had an <img> tag with a src written correctly, but no alt attribute/value, then your image will not load.
The value that goes between the “ ” in src is the path to the image file. If you remember paths from the second module, Intro to Command Line, you’ll know that you’re in your project folder, where your index.html file is. However, you will be saving your images (that you bring, or that you can download off the internet) to your images directory. So, to get to a given image, you would follow the path:
images/imageNameHere.png
Your images can be .png, .jpeg, .jpg, or .gif files. Make sure you put in the proper file extension and that your image files follow the file naming conventions, with no spaces in the name. Please try to rename your images short, descriptive titles if you’re downloading them off the internet.
Also, make sure you keep all images in this class PG.
Anyway, your image tag should look something like this:
<img src=“images/mindlessMeme.png” alt=“Another bizarre, mind-numbing, meme”>
In the body of your file (try to remember: what goes inside the body?) add an image!
The <meta> tag has many attributes, such as charset and name. Meta tags also require the use of some attribute(s).
Two of the most common attributes are class and id. Knowing how to use them effectively will be crucial to mastering HTML and using it to create professional-looking websites.
id’s are unique to an element and only used once in the document.
For example:
<p id=“about-dogs”>
This is a paragraph about dogs. Dogs are cool. Dogs are awesome. Dogs are the best. I love Dogs. Dogs are amazing.
</p>
That particular paragraph has an id called “about-dogs”, and the id tells us that that paragraph is … well, about dogs. Assuming that you’ll have many paragraphs in your website, it’s good to identify the only section where you’ll be talking about dogs. Perhaps you want there to be special glittery effects and background images for that one section, because dogs are special and deserve special recognition. The id is important when we want to select certain sections of our code later on and style/organize them.
On the other hand, we have classes, which are used to identify multiple elements you expect to all fall under a certain umbrella.
<p class=“animal-description”>
Dogs are cool.
I love dogs.
Dogs are AMAZING!!!!!!
</p>
<p class=“animal-description”>
Cats are evil.
Cats are manipulative and lazy and self-serving.
Cats attempt to take over the world. We must not allow that to happen!!
</p>
<p class=“animal-description”>
Zebras are weird.
From an evolutionary standpoint, I have no clue why they exist.
Their color combination is really ugly.
</p>
All of the paragraphs are descriptions of animals, so we give them the class attribute “animal-description”. This way, if we wanted to select all the paragraphs describing animals and surround them with a colorful border, we could do that very easily because they have the same class!
You can also combine id’s and classes, and have good, descriptive, HTML code that can easily be styled.
<p class=“animal-description” id=“about-dogs”>
Dogs are cool.
I love dogs.
Dogs are AMAZING!!!!!!
</p>
<p class=“animal-description” id=“about-cats”>
Cats are evil.
Cats are manipulative and lazy and self-serving.
Cats attempt to take over the world. We must not allow that to happen!!
</p>
<p class=“animal-description” id=“about-zebras”>
Zebras are weird.
From an evolutionary standpoint, I have no clue why they exist.
Their color combination is really ugly.
</p>
This way, we can make references to an entire class of elements, as well as specific individual elements. This might seem simple and somewhat pointless, but it’s extremely important that you group and label your elements correctly. You probably won’t see why now, but you will later on! We will be revisiting classes and id’s, so make sure you get into the practice of using them effectively!
To close off this reading, we’ll go over anchor tags. There are so many tags with so many attributes out there, that we couldn’t possibly cover them all, so please explore them on your own.
Anchor tags are how we link people to external sites/resources, or even to other parts of your site. The syntax for anchor tags is:
<a href=“urlhere”> This is a link </a>
href is a required attribute for anchor tags. What the above code does is create clickable links.
You can actually create clickable images that link elsewhere by nesting an <img> tag inside an anchor tag:
<a href="link here">
<img src="images/devleagueLogo.png" alt="DevLeague Logo">
</a>
You can combine id’s or classes with an anchor tag to create page jumps, aka jumping from one section of a long page to another section. We won’t show you how to do that here, because we’re just about exceeding reasonable reading length (such that we still have your attention), but you can look up how to do that yourself!
You’re just about ready now to do your first exercise! Using all that you’ve learned so far, you will create a personal profile. Click here to go the first experiential learning exercise in this module.
After you complete the exercise, move on to the fifth reading, “Linking HTML files”.