XHTML and CSS Tutorial - 9 - Adding Images to the Webpage Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

alright guys welcome to your ninth XHTML
tutorial and this tutorial is going to
be awesome because we're going to
finally cover how to add images to our
web page
I mean how dumb is a web page without
any images
pretty dumb so let's go ahead and learn
how to add images to our web page now in
order to add an image to our web page we
first need an image of course so go on
your computer it doesn't matter anywhere
and grab the dumbest image you could
find um this chicken is pretty dumb but
uh something a little dumber than that
ah here we go look at this big old dummy
let's go ahead and copy that
that's me by the way and remember the
file name it's my face ping and if you
don't know the file name um all you need
to do is this right-click any image like
it's a little inappropriate like this
YouTube logo and click properties and
the file name is going to be this and
the extension is going to be the type of
file right there so anyways if you don't
know how to look up your file a name or
extension that's how you do it but
anyways what we did is I copied that
image of my face now where I need to put
it is in the same folder where the HTML
file is so I'm working from this folder
right here you can see that index file
that's this right here and let's just go
ahead and paste that my face image right
in there so now the picture and the
website are in the same folder so don't
forget this is named my face dot ping
that's what type of file it is so in
order to add an image to the website a
you need to have them in the same folder
done the next step is to add the image
tag to your website and the special tag
or a special keyword for an image is I M
G and you know how I said before that
there are two basic types of text a
double tag which has an opening and
closing tag in a single tag well an
image is one of those single tags makes
sense because it's just one image you
don't need to surround text with there
or anything so in
each has one attribute that you
absolutely need
that's absolutely required and that's
the SR C it stands for source I believe
and it basically means what file do you
want to use as this image in in here you
type the name of the file that you want
to use and mine was my face dot ping
yours is probably going to be different
but that's what mine is so that's all
you need to do in order to take an image
and place it on your website so let's go
ahead and save this run and launch in
Chrome so now check it out this is
probably one of the greatest websites
I've ever seen just a website with my
face on it if I made this it would get
like a thousand hits a day because
that's how awesome I am
I mean look at this face you don't see
that every day anyways so that is how
you create a basic image and put it on
your website but since we learn how to
make links let's go ahead and combine
the two to make something just
incredibly awesome see now we just have
a dumb old face on the website we can't
click it it's not interactive well say
we want to take this image and turn it
into a link and of course we're going to
link it to the New Boston comm because
that's the best website ever so what you
can do is outside of your image tag go
ahead and add your anchor tags opening
and closing at the end now in your
opening tag you need one attribute and
that's of course if you remember the
href attribute and this is pretty much
what location or what website do you
want to link it to and I want to link
this to HTTP the New Boston comm so
let's go ahead and save this and refresh
this and now you can see when we hover
over our image it turns it into a little
pointer finger which means we're
hovering over a link so let's go ahead
let me Center this click that and check
it out it's now going to take you to the
new boston.com Wow
what an awesome website check out all my
tutorials here
Wow this guy's a genius I wonder who
made this one so anyways that is how you
make a basic image and you can also turn
it into a link this way some images you
might not want to turn into links but uh
you know in this case we did so now that
you understand the basics of images we
can begin diving in a little deeper and
learning some other cool neat tricks
that goes along with them but for now
that's all you get five minutes I'm
tired I'm going to go eat a hot pocket
or going to McDonald's or something so
for now thank you guys for watching
don't forget subscribe don't forget to
check out my other videos don't forget
to go to my website and you know don't
forget anything and I'll see you later