[Music] hello and welcome hi i'm dave this tutorial is part of a beginner's html

series i'll be using the chrome web browser the visual studio code editor and the
live server extension for visual studio code to view the web page there are links
to these tools starter code files and all resources in the description below
let's move on to creating links on our web page hypertext is the ht in html and
it's what links together everything on the web it's really what makes the web
work so well think about spider-man or really any type of spider that's throwing
out strands of web and linking things together that's essentially what we're
doing when we create hypertext links we're linking the web together now as we say
link there can be some confusion because notice here in visual studio code on the
left that i've got link tags that we created in the head part of the page that's
from lines 4 to 11 and these link tags are pulling in resources from other parts
of the web whether it's something we have on our server with our web page like
this fave icon or we could pull in something from another part of the web like
a font from google fonts and things like that which we haven't done yet but it's
possible with the link tag but that's not what we use to link pages to each other
i'm going to collapse this head section by clicking on the arrow over here by
number four so we have a little more room and now we're looking at the body area
in visual studio code by the way i'm running the live server extension and have
our page from our starter code that's available for download at the github link
in the description and i'm running that with the live server you can see it
running here it says click to close the server shows port 5500. okay in visual
studio code let's scroll down a little bit and let's add what is called an anchor
tag that will create a link to another page on the web so in our list where it
says let me tell you how and we're talking about the different things we do to
learn web development we have an abbreviation for the mozilla developer network
maybe this would be a good place to go ahead and link to the mozilla developer
network and we can insert a link around this mdn abbreviation inside the inline
element that is the abbreviation element so i'm going to press enter here to
start a new line now i'll just type a and this is well i guess because it's
followed by mdn it's not doing it so i'll start out with the less than sign and
then a and this is the anchor tag that i'm starting but by itself if we just put
the anchor tag while you can do that by itself it will not link to anything it
needs a specific attribute that tells it where to go so i'm going to press enter
here and we have it surrounded by this anchor tag we need to add the href
attribute and now we're going to reference an address on the web so this is where
we would put that address in over here in the chrome browser i have the mozilla
developer network open we can see up here at the top it's developer.mozilla.org
and then there's a slash after that that gives the specific language for the site
i believe it will default to the browser choice so i'm going to remove that part
go ahead and select the rest and now that i have copied that with control c i'm
going to click here inside of visual studio code and put that address right
inside the href attribute now i am wrapping the code down to another line so you
can see it all it doesn't go off the screen i could expand visual studio code
here and now you can see the full address without that line wrapping so we're
linking to the developer.mozilla website with this link and we can save this
and now i'm going to go ahead and bring visual studio code back to the size i had
it the code lines will wrap but if we look at our code or our page in chrome that
should have now updated because we're using live server you can see we have a
link and it turned purple it's a little hard for me to see right now but we can
change that color in just a little bit but that purple means a visited link if
you have not visited that site it's probably more like a royal blue or a bright
blue color and that means it's not visited yet and those are the default colors
for links but something about this link that we need to acknowledge this is the
full address to that website and it's a specific address this is what you would
call an absolute reference this has the full address for the web page where we're
going but when we link to something that's already on the same server as our page
where we're hosting our website then let's go ahead and expand this head section
again notice we're not giving an absolute reference we're giving what's called a
relative reference right now we don't even have a slash here because we know
this html5.png file is in the same folder as our index.html file and the same
with this main.css file it's in the same folder we don't even need to provide a
slash it's not in another folder even so but it is a relative reference and
that's the difference so we have an absolute reference here to a place on the web
and then we can provide a relative reference to something that's on the same
server that we're on so now let's go ahead and create a relative reference to
another page and i'll scroll down to do this we haven't created the page yet
we'll do that next but if you have your name here here at the bottom i have my
name where we have the copyright symbol and in chrome i can scroll down and we
can see this at the very bottom let's go ahead and link with a relative reference
so i create that anchor tag that a tag and then href and equals and let's link to
about html and notice i'm putting quotes around that file name just like i did
for the full address in the absolute reference above and now i want to put my
name of course between the opening and closing anchor tag and now that will link
this to the about page that we haven't created yet i'll save and notice now this
is that bright blue or dark blue that i was mentioning earlier a link that has
not been visited this page doesn't even exist yet so we need to create this page
if you don't have the file explorer open in the top left of visual studio code
you can click that and you'll see the files that we have here in the file tree
what i want you to do is click on the new file icon name this page about.html
now this is a good place to go ahead and pause the video you can click on the
file explorer tree over here the file explorer to hide the tree if you need more
room but go ahead and create an about page you know everything we've already
learned from the index.html page so what i want you to do is pause the video
create your own about.html and then come back and i will create one with you okay
i hope that went well for you i'm going to help you create an about.html page now
or you can watch how i do it and compare to what you did now i've been doing this
for a long time and i'm going to take a few shortcuts so you don't have to see me
type everything out i'm at the index.html page i'm going to press ctrl a to
select everything then ctrl c to copy everything click the about.html page again
and i'm going to paste everything in with control v now as you're learning how to
do this i think it's important that you type everything but i don't want to take
up your time by having you watch me type everything out so i'm just going to
make some changes here the doctype is the same the html elements the same and of
course we have a head section the meta tag for the character sets the same the
author's the same now this description meta tag right here on line 7 that could
be just a little different i'm also going to press alt z to get this page to wrap
lines that are longer so now you can see line 7 wraps down to a second line here
and we see the space to the left now in this description i can change this just a
little bit and i'm going to say hi i'm dave gray this page is about me so we've
given an accurate description for the page now and instead of my first web page
in the title i'm just going to call it about me in the title and now we still can
use the same fave icon and we're going to use the same style sheet so this page
will look like the other page as far as the styles and now we can change the
heading for the page and here i'm just going to say hi i'm dave gray after that
i'm going to eliminate most of what we see here on the page so i'm going to
highlight everything from line 17 all the way down to 63 i pressed shift and i
clicked on my mouse there and i've selected all of that specifically and now you
can see we're left with the horizontal rules and the space in between and so now
i'm just going to put a paragraph that's not really about me i'm just going to
create some lorem text and i can do that with a p element let's try lorem times
one i just want one paragraph click that there we go one paragraph of information
so it's still kind of formatted that strange i'm going to go ahead and enter
before and after there we go and now we've got that single paragraph here anyway
this is a basic about html and we have linked to it so now let's downsize visual
studio code back here with the button you see right here the square not
minimized but downsized it's not maximized either and now our link to the
about.html should work so i'm going to click that link and here we're on the
about page and now notice my name is this dark purple again so we have gone to
the about page that we just created it says about me here in the top tab i'm
going to click the back button to go back to the original home page
here now back on the home page there is a third type of link that we can create
and this is a link to an area on the same page on the page we're already on we
can create shortcuts to different areas of the page so we've had our absolute
references we've had our relative references and now this is what i would call an
internal reference or it's an anchor link directly to a portion of the page that
we want to go to in order to do this we're going to add just a little bit more to
our page so i want to click on the index.html there we are i'm going to go ahead
and collapse the head again and we've got a couple of topic areas besides our big
hello world at the top so we've got the part where we're ready to learn html and
we've got the part that we're discussing planning a vacation so we're going to
organize this into sections and there's a semantic html element called section so
i'm going to type the word section press tab and then i'm going to highlight the
closing tag of the section ctrl x to go ahead and cut that out i'll come down
here before the horizontal rule used as a divider i'll paste that closing section
tag in and if i save yes we got some auto formatting there so now we have our
section separated and we've got horizontal rules in between i'll go ahead and add
a space between each of those i'm going to do the same thing for the vacation
planning area so type section press tab go ahead and highlight the closing tag
control x scroll down to the bottom where we're finished discussing the vacations
and go ahead and paste in that section now i'll save once again took advantage of
the auto formatting and we'll leave a space of course before the section here
between the horizontal rule and the section and the same at the end just so we
can see it a little better after the closing section tag we have a space so now
we've created semantic html sections and that's not all we need we also need to
give these sections an id attribute so i'm just going to give the first id value
for the i'm ready to learn html area and id of html and then in the next section
i'm going to give an id attribute and that value is going to be vacation and
once again ctrl s to save or you can go to the file menu and choose save that way
as well now that we've done that we still haven't created the links but we have
created the destination for each of the links that we want to create so now let's
create one more semantic html element and to do that after our hello world
heading i'll go ahead and press enter to come down a couple of lines type hr for
one more horizontal rule and now between the horizontal rules i'm going to type
nav and this is a semantic html element it says we're creating a navigation area
inside the nav i'm going to type ul we learned how to create unordered lists
already and so now we've added an unordered list and now we can add list items
and the first list item that we're going to create is a link and there it
absolutely after i pressed a and tab it knew we needed the href in visual studio
code so now it's waiting for me to fill in this href now to link to our html
section here on the page we need to add the hashtag and then the id value so
there's html and so now we can put learn html for this link and then let's go
ahead and add one more a lowercase press tab and now hashtag vacation and
we'll put here planning a vacation as a matter of fact let's change this from
learn html to learning html and now at the top instead of hello world i'm going
to put my goals for the year and now we have my goals for the year at the top
and we've got learning html and planning vacation but i put them both in the same
list item and that's not what we want so i'm going to go ahead and highlight
planning a vacation press control x to cut that out and now let's put it in its
own list item so li press tab we've got a new list item and we can paste that
planning a vacation if we save that looks much better on our page even though the
blue isn't looking great on the darker background we'll still change that in the
future so now if we click learning html on the page it goes ahead and scrolls
the page directly up to the i'm ready to learn html section we can click back and
we go back to where we were now if we click planning a vacation it doesn't take
us all the way to the planning and vacation area because there's no more content
there's no more space it can't scroll any higher but it scrolled as far as it
possibly could to take us to that area and once again we can press the back
button to go back and that dark purple's not looking too well so we're going to
need to change those colors very soon before we change any colors though let's
scroll down and create one more link that's an internal link on our same page
here just to another area of the page so at the very bottom underneath our name
and the link to the about page let's go ahead and return and add one more line
here and this will be a paragraph so we can press p and tab inside the paragraph
let's start an anchor tag and there has the href attribute and let's just link
to the hashtag itself now what we want to put in here for text is back to top
and we can save now if we scroll down in our page here we'll see the back to top
link and if i click it it loads the page and takes us back to the top it's
worth noting what we have up here in the address bar of course live server gives
us our ip address which is our own computer 127.0.0.1 nobody else on the web can
see what you're seeing this is just on your computer and then you've got a colon
and the port number 5500 where live server is serving your page and we've got our
index.html file then notice you've got the hashtag after that we could actually
remove the index.html and the index page will still show by default just like you
see right here and now once again if we click learning html notice in the
address we get the hashtag html when we click back it disappears if we click
planning to vacation we get the hashtag vacation in the address bar and if we
click back it disappears in previous tutorials i had mentioned switching the
theme over to this dark mode that's easier on my eyes was entirely optional so if
you're still using a white background with black lettering probably the purple
and blue links look just fine to you and you could just leave it that way if you
have switched to the dark mode theme that i have provided with some basic css
already let's go ahead and make those changes so the links look better as well so
we're here in the main.css file now in the file file explorer so we're just going
to change the color of our anchor tag and i'll switch that color to a color named
alice blue after that i also want to change what the link looks like when it's
been visited right now it's that purple color so i'm going to change that color
to a light gray and there's also another thing that we can change and that is
when you hover over the link or when the link is active and then i'm just going
to change that color to hashtag ee not three e e e there we go and save that
and so now it's changed the color of our links you can see this is the light gray
we visited these links but when i hover over it gets a little lighter and so
that looks good i think we've visited every link here no we haven't visited back
to the top yet so you can even see the alice blue color right here and let's go
ahead and visit back to the top and now if we go back you can see it's a little
darker until i hover over it so we've just changed those colors we're not really
covering css yet we eventually will after we get through all of the html but just
for now if you want those of course these will be downloadable as well in the
source code let's go back to the index.html file and let's hide this file
explorer by clicking on the icon in the top left this is a good spot to talk
about some link naming conventions and things you don't want to do so for now i'm
just going to use this link at the very bottom that has my name as an example
and one thing you wouldn't want to do would be instead of my name just put in
the file text like this or what would be worse would be a full url like
www.google about.html and if i save this of course that's not to google that's
just ugly and of course you don't need all of that you can pare that down to just
actually a short description of what is there you don't really want the full url
there so i'll put this back to my name and there we go and another thing you
really don't want to do is say this links to info about because really that's
redundant so if i save that and we go this links to info about and i didn't have
a space there i guess but either way saying this links to is really redundant
just saying this is a link a screen reader knows it's a link you already know
it's a link when you see something underlined like that so you don't need to say
this links to or this is a link about that's just unnecessary you also want to
keep your link text as short as possible so imagine if i had that same sentence
before this links to information about dave gray and you just put the whole
sentence in the link that's way too long just keep it to the exact topic so if
the page is about you as in our about page just put your name in there for the
link you don't want the whole sentence about that and now the very worst one of
all really would be to say something to learn more about me comma and then
instead of having your name right here for the text you put click here we've
probably all seen a link on the web that says click here that has no description
whatsoever for what's on the following page that's not good for the context of
what you're linking to it's not good for a screen reader as it tries to get
context from what the link says so really a link that says click here and of
course you can imagine there could be several links that say click here all on
the same page linking to different things and that's just confusing so you always
want to avoid something like that that says click here so once again i'll remove
all of this and we'll just go back and we'll put our name here at this link but i
hope those pointers give you some guidelines about naming just keep it short and
of course say what is on the following page a very brief description not a full
sentence and definitely not something generic like click here okay i'm going to
save the index.html and we're going to go back to the about.html page and we'll
add a few more link types so we've got a section that we're really saying this is
about me let's just add one more area here so we can add another horizontal rule
press tab and now let's add an unordered list and inside this unordered list
we'll have list items and this first list item should be a download so we have a
favicon file that we can offer for downloads so let's say download in and then
i'll give the anchor tag so a href equals and now let's link to that fav icon
file that we have so that would be html5.png [Music] and now inside of this we
can put our html5 fave icon text but this won't allow us to download the file
yet we need to add the download attribute and now this is a download link so if
we save this and we go ahead go back to the top over here in chrome and well i
guess not back to the top we need to go ahead and click your name or my name
whatever you've got on your page and that takes us to the about page now we have
download an html5 icon and remember this icon is in our folder over here as i
click the file explorer so we've got html5.png and that's what we're going to
download so if we click this link we instantly get a download of that file so
that is a download link now let's add another type of link so add another list
item here and inside our list item now let's say contact me at and now let's go
ahead and do another anchor tag with the href and we can add an email link even
though these are not advised and i should say before we add this these are not
advised because there are so many spiders out there that crawl the web really
search spiders if you will and what they do could harvest these email addresses
and so these have kind of become a thing of the past most people at a contact
form which we'll talk about forms in the future instead of just putting their
email address directly in the page to be harvested but to add an email link you
start with mail 2 and after that you would just have your email address so i'll
just put random at email.com and if that's your email address i'm sorry but it
seems random to me and then i can just put my email address which would
complete the sentence rather than actually typing the email address there as well
so i like something like that as far as being descriptive contact me at my email
address and that's what the link is the link is describing your email address
okay then there's one other type of link we can have oh let me save that by the
way and if you click this link that says my email address it would ask you what
type of email client you want to open these types of links with is what it should
do at least okay the next link type that we have in our list item will be
dialing a telephone number so now i'll say oops spell it right dial and now let's
put our anchor tag with the href and we start out with t-e-l for the telephone
number and you can experiment with this many examples i've seen add the plus
symbol and i've also got it to work without the plus symbol so i'll put the plus
symbol here in the united states most phone numbers are ten digits so i would
have like one two three would be the first set of digits then four five six and
the last set of digits seven eight nine zero something like that and that is the
telephone link so i could say dial and then i could just put my phone number just
like i did with my email address and now especially on a mobile phone if this
was a mobile website this would be very handy you could tap this and it should
open up the dialer if i click this link now in chrome it wants to make a call
it's asking me how to do it and pick an app to do it because i'm here on my
laptop but on a mobile device this would probably open up the dialer right away
now let's look at one more type of attribute here so i'm just going to put one
more list item inside that one more anchor tag with the hrep attribute and
we're going to link directly to google so we need an absolute reference this
would be https colon slash www.google.com and we can put the slash if we want to
as well and this is an absolute reference but the attribute oh and i haven't
really put in any text let's go ahead and just put google up because we're not
really adding any extra context to this so the attribute that we need to consider
that we haven't used yet is target and what i want to do is have this open in a
new tab so i'm going to use quotes then you put underscore blank and save and
now we have a link to google so let me maybe add a little context here i'll put
open google and a new tab period save that and now we've got our link to google
if we click this we opened up a new tab and i don't have internet right now i
guess i need to check my connection internet's back up and running let's click
this link again and there's google so we've opened it in a new tab and all is
well so i'll go ahead and close that there's the one that didn't work and now
we're back to our page now there's one more type of link i want to add before we
finish today let's scroll down in our about.html and underneath our copyright
line let's go ahead and press enter add a paragraph and inside here we'll add
the link that we want to add so type a for anchor and now the href is just going
to have a slash value what this does is link back to the root of our website and
that is our index.html it's the page that loads by default remember i had said we
don't even have to have the index dot html up here in the address it's just the
slash after the ip address and the port here on our local server and if we had a
domain name like google.com well then the slash would essentially be the home it
doesn't have anything else after the slash it loads a page by default so that's
the same thing we're doing for our website so here we can just put back to home
and save this and now we have a link that will take us back to our index page so
let's click this link and we're back to our index.html but notice in the web
address it doesn't even have the index.html up here it doesn't need that because
it loads this page by default this is the first page of your website now that
we've made all of these changes to our web page and we've actually added a second
web page let's go to validator.w3.org and validate make sure that we don't have
any errors in our index.html and our about.html we're going to choose validate by
file upload and choose file and for me i'm going to have to go into my html
tutorials folder click html course and i'm in the zero five lesson here so
index.html open the file and check and document checking complete no errors or
warnings to show now we want to do the same thing for the about.html and let's
check that as well and once again document checking completed no errors or
warnings to show if you have errors or warnings of course follow up on what it
shows you here in the validator and i hope you've learned a lot about the
different kinds of links you can create in your html files remember to keep
striving for progress over perfection and a little progress every day will go a
very long way please give this video a like if it's helped you and thank you for
watching and subscribing you're helping my channel grow have a great day and
let's write more code together very soon