Implement Banner image and buttons to HTML page, make 3 pages navigation

By | January 25, 2020

Let’s start with the navigation next. Right before the word home in the TD, we’re gonna put an A tag and
then close the A tag. A is for anchor and
that makes a hyperlink. H reference, [LAUGH] hyperlink
reference equals quotation marks. Homepage is always index.html. I’m going to copy this code, paste it right before What Is a Storm and
Damages. And then I’ll copy that closing A tag. And paste it after What is a Storm,
and after Damages From a Storm. I’m going to re-link the What Is a Storm. I haven’t made this page yet but
I’m gonna write what.HTML and then for damages I’m gonna do damages.HTML, haven’t made those pages yet,
but I will, okay. Let’s do a command-s to save it. Now when we open up our web page and
refresh we’ll see links here. Home, What Is a Storm,
Damages From a Storm, if you look at the bottom down here when I
hover over those links you’ll see it says, index of HTML, what.HTML and
Damages.HTML, okay? But we’re gonna put, instead of
the word home, we’re gonna put an image source tag. And in there, we’re going to
put an images folder, right? That’s where our images are. And the home, home.jpeg. So I’ll put a forward slash
after the word, images. And then write, home.jpeg. Cmd+S to save. Refresh the page. Now the word home isn’t there anymore,
but the image is. See? Image source, image/home.jpeg. Let’s do that same thing for
the What is a Storm. Copy the image source,
highlight What Is a Storm, paste. And where it says home,
we’re gonna write what. Save it. Refresh the page. And now we have what. We have two buttons now. And then we’re gonna highlight
Damages From a Storm and paste again. And instead of home.jpg,
we’re gonna write damages.jpg. I’m gonna open this up a little bit so
you can see what’s going on. Cmd+s and save. Refresh, there we go. Now we wanna put the banner in
where the banner is, right? So up here where we have the word
banner let’s paste again. Now we’re gonna put the word, what was it? I don’t remember. Let’s bring this down. It was stormdrain_banner. So what I’m gonna do is I’m
gonna click on it once. Click on it twice, and
then I’m going to select>copy>select>paste>save. So the word banner is not
gonna be there anymore, but there’s gonna be a banner there now. Refesh, [SOUND]. There we go.
So we’ve got our banner. We’ve got our Home. We’ve got our What. We’ve got our Damages. All right, we’re almost done. Now we have to save this
as the what.html and the damages.html. Okay, so save this and then do File, Save As, Wait a sec. We’re gonna save the index
page as what.html and we’re gonna save it as damages. It’s the exact same page,
it’s a duplicate. But we’re gonna fix
the content of the body, once we say that what.html, Save>Enter. And then do File>Save As. Damages and Save. Now if we push this down here,
we’ll look in here and now we have you’ll notice an index page,
a what page and a damages page. But they’re all the same right? So we have to open up each one of these. I’m gonna drag my damages is already
open here, so if I drag my index over. Oops, don’t do that. I might not have my
preferences set properly. Let’s do a File>Open. Or Cmd+O. You may click on Index, click Open. And then do File>Open again,
Cmd+O, and then click on what. So I have all three of my pages open. I have my index, my damages and my what. They’re all the same,
so they look the same. So click on damages page and where it says Storm Drains are great for
Cities, write Damages From A Storm!, Cmd-S. Click on what over here, and then we’re gonna highlight Storm Drains
are great for Cities again and then write What Is A Storm, Cmd-S to save. So now when I go to my
browser when I click on What you’re gonna see this change right here
and you’re gonna see it change up here. What, What Is A Storm. And up here it says what.html. Click on Damages. We get Damages From A Storm. We’ve got the word damages. Click on Home. It goes to my index page. And Storm Drains are great for Cities! So now you’re done with the banner,
you’re done with the Home, the What, and the Damages. Now all you have to do is
fill in this information for the What page, the Damages,
and the Home page.

Leave a Reply

Your email address will not be published. Required fields are marked *