XHTML and CSS Tutorial - 6 - Adding Links to our Webpage Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

what is going on everybody it's Bucky
and welcome back to your 6th XHTML
tutorial now in this tutorial as
promised we're going to be starting to
cover links now if you never heard of a
link before then first of all you're an
idiot because a link is the main concept
behind the Internet basically it's the
idea that you could link one page and
connect it to another page so it's
basically a section of text or a picture
or anything that you click and it takes
you to another webpage so you guys know
what a link is so why am I even
explaining this so let's go ahead and
learn how to make a basic link the first
thing you need to make a link is
something that you're going to create a
link and this can either be text or a
picture in this case I'm just going to
use plain old text so let's go ahead and
type this will be a link now if we saved
it and looked at it right now then that
would just be text on the screen and
when you click it it does nothing but
highlight it pretty dumb so in order to
make this a link what we need to do is
we need to surround it with tags in the
element name or the tag name for a link
is a and this stands for anchor why they
named it a for anchor and not L for link
or H for hyperlink I don't know but it's
pretty much the dumbest naming
convention ever but a means link or
anchor whatever you prefer so anyways
that is going to make your text a link
but you're saying alright Bucky
something's wrong with this right here
that text is a link but what's it a link
to is the link to another web page on
our site is a link to Google is a link
to eBay Amazon com well let me introduce
another topic and that is attributes in
some tags in this one especially you
need to have something called an
attribute an attribute is basically more
information that that tag needs in order
to work so not only are we telling this
text that needs to be a link but we also
need to tell
where to link so the attribute that goes
in here and here's how you create
attributes in your opening tag the one
without the forward slash go ahead and
press space now go ahead and write the
name of the attribute the location is
href so this is hyperlink reference I
think that means it's pretty much means
what's the location of the website that
you want to link it to so instead of a
and href it would be a lot easier if it
was link and website but you know they
had to be dumb and name it all sorts of
weird stuff so it's a and href so we got
href all we need to do now is set it
equal to input quotation marks so
anytime you have attribute write the
attributes name set it equal to
something and in between the quotation
marks right what you're going to make it
equal so in this case the information
that we need to give href is a website
what website do we want to link this
text to so let's just go ahead and put
HTTP Google google.com so let's go ahead
and save this and see our baby in action
refresh this and check it out our text
is now a link and when I click it it
takes me right to Google how awesome is
that
so anyways to recap one last time
whenever we want to link something we
first need to surround it with these a
tags a stands for link pretty confusing
huh and in order to tell it what website
we want to link it to
we need your right href which is the
attribute stands for hyperlink reference
equals the website name and make sure
you write the full name just don't write
google.com or else it's probably going
to mess up so with that being said let's
go ahead and we know how to link to
sites like Google eBay on Amazon YouTube
but what if we want to link to another
file or another page in our website well
let's go ahead and create another page
first of all and in order to do that
just go ahead and copy this and go ahead
and hit this new button or actually
easier just go to file
file new and we get this new file now
let's just go ahead and paste this in
and in our body just right this is the
second page and for the title just right
second page and now let's go ahead and
save this file save as not index on just
go ahead and save it as second and my
computer is freezing that's just great
second HTML just like that so save this
page is second so now in our directory
or in our folder we got two pages let me
tighten this up just a tad loopy and
this is the index page this is our main
page and this is our secondary page so
now our website has two pages pretty
cool huh
so let's go ahead and in our main page
we're going to want to go ahead and make
this a link to our second page so let's
change the text first of all this will
link to the second page so now as a href
all we need to do is since these two
files are in the same directory and let
me show you what I'm talking about
here's my folder I'm working on in here
is where the websites are here's where
I'm you know saving them on my computer
the index is right here and the second
is right here so they're in the same
folder as long as all your web pages are
in the same folder you can easily link
them by just writing the name of the
website so if we want to link this to
our second not HTML file let's just go
ahead and href instead of Google just
put second dot HTML so anyways the
basics is this look a whooping cough or
something so in order to link to a
website that's not yours just go ahead
and write the full name like HTTP Google
com
if you want to link to a webpage that is
yours you just need to go ahead and
write the name of the webpage dot HTML
so let's go ahead
and we already saved it let's see what
we got this will link to the second page
go ahead and click it this is the second
page so that's how you make a link
between pages again what you could do
maybe if you wanted to start off with
some navigation is you could make a link
on this back to the first page so maybe
we'll do that in the next tutorial give
you some nicer connectivity is that even
work connectivity I don't know but I'm
going to say so oh oh so now you know
how to create a basic link and if you
guys are still a little bit confused
then uh either watch this tour again or
just keep watching the rest of my
tutorials and I promise it'll clear up
for you guys so anyways thank you guys
for watching and don't forget to
subscribe and I'll see you guys later