HTML Tutorial 05 - Images and Links Video Lecture - HTML Basics- Create a designed webpage from Scratch - Software Development

hey guys what's up this is Brian again
I'm continuing our HTML tutorial thought
it was about time we got into images if
you've been following along in the
tutorial so far we've learned how to
make and manipulate different font
attributes hyperlinks and linking
between pages and just general how to
build a simple web page so let's learn
what it takes to add an image an image
is quite literally an image there's
nothing real hard about it let's go find
one let's go to images google.com and I
don't really know what to look for so
we'll just random and let's see what we
got here is Albert Einstein kind of
boring Oh
Chuck Norris oh yeah
we're going to add Chuck to our web page
mm-hmm
now we'll just make a new folder cloth
images and if you're wondering you store
your website in a directory on your hard
drive I don't know if I covered that
before but it should be kind of
self-explanatory we'll save this is
Chuck jpg in our images subfolder and we
go back to our web page now for the
actual fun part editing images is
actually extremely easy we're just going
to add in a couple hard returns here
image is another one of those weird tags
that does not have a start to finish
it just has a start now in some of the
newer languages like asp.net which is
actually Microsoft's version of ASP and
all that fun stuff you haven't learned
about yet they do have certain closed
tags but for standard HTML there's no
closed tag now do you remember what we
named this Chuck dot j PG save it
flip over to our web page hit refresh
now where's Chuck hmm he didn't appear
instead we have this
annoying little box with the red X well
if you remember right what happened is
we made a folder called images here's
our index page or page - and this folder
of images with Chuck Norris inside of it
I'm sure my daughter is watching this
laughing hysterically because I put
Chuck Norris in here anyways we have
what's called a virtual path it's a very
complex topic I'm gonna make very simple
if you just put the filename Chuck JPEG
it's going to look for it in the same
path as the webpage in this case
index.html so if chuck was here it would
appear fine but he's not he's in images
so we have to just quite simply modify
the path
we'll put images / Chuck that JPEG
now there's another snazzy command
called a base path which we won't go
into because it's rarely used anymore
it's pretty much industry standard to
use the virtual path save our work
refresh and Shazam there's Chuck Norris
in all of his 1970s glory as you notice
there's nothing special about this
picture it's just Chuck Norris well
let's turn Chuck Norris into a link to
do that we can just take our link
command we've learned in another
tutorial and we're just going to link to
youtube.com
why not I'm out of ideas it's been a
long day save this so now we have a
hyperlink going to youtube.com and we're
using Chuck Norris as the link now
remember the last set of links we did we
use text click here to go to page 2 you
can actually use an image or pretty much
any other object as a link so we'll save
our work flip back over refresh now you
notice how Chuck's got this big box
around them all of a sudden well I'm
using an explorer and yes I know a lot
of people out there hate ie
I'm just using it because it's the
industry standard browser that comes
with Windows which is you know 92
percent of the base installs across the
world so if you're using Windows you're
going to have Internet Explorer it's
probably what you know love it or hate
it
it's what I'm using anyways when you
click Chuck Norris it goes to
youtube.com so let's go back now let's
say we want to get rid of this annoying
box how do we do that we want to keep
Chuck as a link but we want to get rid
of this box that's simple
the image attribute or I'm sorry the
image link has an attribute called
border we'll just set it to zero now we
haven't actually talked about the
structure of this tag yet let me move
some of these out here so you can see
it's just you know bracket IMG denotes
an image SRC stands for source the
source is the path in quotes the virtual
path images slash check dot jpg and
we're setting an attribute a border
equals 0 when we go back here and we
refresh there's Chuck Norris still a
hyperlink no border tada it works so
that's our image tutorial kind of
combined with a little bit of advanced
hyperlinks I hope you found this video
and enjoying and Chuck Norris if you're
out there I'm sorry buddy that's your
not your best picture
but that's the best I could do on such
short notice thanks for watching