Hi, I'm Dr. B and welcome to my digital composing instructional video series.
In this tutorial, I will be covering the process used to add images to an HTML document.
I will also cover how to add attributes to an HTML element and why attributes are important.
After you've opened up your HTML editor and have started a new HTML document, the next step in the process is to gather together the content we're then going to mark up in this tutorial.
To do so, go back to the HTML tutorial homepage, find the link that says "click this link to access the text used in the following tutorials" and then Scroll down to where it says images and attributes.
Copy that part of the content and then head over to your HTML editor.
Once you've copied the content you're going to be using in this tutorial, the next step in the process is adding that content to an HTML document.
To do so, make sure to find the open and close body tag, give yourself a little room, and then simply paste the content in the space you created for yourself.
Next, we're going to give our page a title, I am going to call this sixth HTML document, and then we're going to save our work.
We're going to save this one as six and we're going to make sure that we put it on our desktop for easy reference.
Then we're going to go in and we're going to add some block level elements.
The first thing we're going to do is we're going to add our heading information
So, we're going to add the h1 tag around where it says images and attributes.
OK. The next thing we're going to do is we're gonna give yourself a little space, then we're going to start building our image tag.
Before we add our image tag to our document, however, it's important to note that in HTML we're not really adding anything to the document itself when we include an image.
Instead, what we do is we basically create a placeholder and then add a link to the image that we want to show up on our page.
This is important because you have to know where your image is located before you can include it inside your HTML document.
In other words, the first piece of information you will often need to find when adding images to an HTML document is the images URL, like the one displayed here.
once you've located the images URL we can then start adding some HTML elements to our page to form our placeholder where we want that image to be located within our content.
To display an image on a web page, then, we need to add what is known as the ima tag.
We do so by first adding an angle bracket, typing out img, adding a space, adding a / and then adding our other angle bracket.
It's important to point out here that like the br and hr tags that we used in an earlier tutorial, the image tag is an empty HTML element.
We don't need a start and end tag because we're not surrounding content.
Instead, we're simply telling an Internet browser to find and then display the image at the point where we include the img tag.
To get the image tag to work, however, we need to add what are known as attributes.
Attributes can be added to any HTML element and what they do is they provide the Internet browser with additional information about the tag or the element that we're working with.
They always have a pair, they always have a name and they always have a value.
We also always write our attributes in lowercase letters and we always surround their value, as I will show in just a second here, in quotation marks.
So to get our image tag to work, the first attribute that we need to add to our tag is the source attribute.
We basically need to tell the Internet browser where to go to find the image we want to get displayed on our page.
To do so, in the space that I included between the img tag and the / go ahead and type in src, which basically stands for source.
Add an = and then go ahead and add two quotation marks.
Next, go ahead and highlight the URL that's provided, simply copy it, and then paste it between those two quotation marks.
OK. Go ahead and save your document, head on over to your web browser, and then go ahead and open the document that we've been working on.
As you can see, we now have an image on our web page.
Also notice that because we didn't format the provided URL, it will show up next to our image.
So we're going to clean that up in just a minute and we're also going to add some additional attributes to our image tag.
So let's go back to our HTML editor and let's start formatting our image a little bit.
At this point in the process, it's important to point out that HTML tags can have as many attributes as you wish to add them.
You just need to know what the attribute is and what type of value you can include inside the value statement of the attribute.
When adding attributes, just make sure to include a space between the attributes name and what comes before it in our tag, like I did with the source attribute and the IMG tag earlier.
In this case, after the source attribute, after the quote, making sure to add a space after the quotation mark.
I'm gonna go ahead and type in the attribute called border, once again I'm gonna use the = and I'm going to put in two quotes.
I'm going to go ahead and put in 1, which is basically telling the Internet browser, around our image we want a border and we want that border to have a value of 1, or a width of one pixel.
I'm also going to go ahead and add some paragraph tags around this URL, so that it's no longer floating next to my image.
So if we save our work, head back to our browser, refresh our page.
As you can see, our image now has border around it.
The URL is now underneath the image and is no longer next to it.
So let's go back to our HTML editor, and let's do a little bit more formatting.
The next attribute I'm going to add is a width value. In other words, I am going to change the size of my image by changing its width.
So, I'm going to type out width, equals, quotation mark, 250, and then another quotation mark.
So we're telling the Internet browser we want our image to have a width of 250.
So let's save it, go back to our Internet browser, let's refresh our page, and, as you can see, the image changed.
I could also add a height value if I wanted to, but by simply changing the width I've actually changed the size of the image and the aspect ratio stays the same, which is pretty cool.
All right, let's go back to our HTML editor and the last thing we want to add to our image tag is what is known as the alt attribute.
So we're going to type in alt, alt, equals, and then we're gonna put our quotation marks in.
The alt attribute is something you want to add to every image that you include on a web page.
And, what it is, is it's basically alternative text that shows up on the page in case the Internet browser can't display the image.
So, in this case, I'm going to type in squirrel, so SQUIRREL.
Then, I'm gonna save and go back to my Internet browser and refresh my page.
As you can see, nothing happened, however, if the Internet browser can't find the image, or can't load the image, it will display the word squirrel instead.
To demonstrate that let's go back to the HTML editor, let's remove the URL from our source attribute, and then take a look and see what happens.
As you can see, instead of the image being displayed, the word squirrel is now displayed to help people understand that there should have been an image with a squirrel in it.
That's it that brings us to the end of today's tutorial.
I hope you enjoyed today's tutorial and that you are enjoying building your own digital compositions.
As I always say, thank you for playing along and for trusting in the process.
Dr. B’s instructional video series is brought to you in cooperation with the Bacha Design Group.
For more information about the Bacha Design Group, or to view more tutorials, please visit us online at jeffbacha.com.