Hey, welcome back.
Our website has two pages currently the home page and also the about page.
However, it's not easy to access those pages because you should know the exact URLs in order to visit
those pages as a user.
As a visitor.
That's not user friendly, of course.
So we need to have a navigation bar here on top where we show the links to all the important pages on
our website.
Let's do that.
So in the previous video we set up a base dot HTML file and also an about.html file and we modify the
index.html file.
So now to add a navigation bar, can you guess where we should work?
So should we add it to a boat to base or index?
Of course we should add it to base dot html so that we can write it once and all the other pages will
inherit that navigation bar.
So the code for the navigation bar goes above the contents of the web page, right?
So the content of the web page is this correct?
So the navigation bar goes above this, right?
Which is in here.
So between the body tag and the first div tag.
So in here we have to type in all that code, but I will not type it in because there's so many bootstrap
classes and it will be a bit too boring perhaps to type those in.
So I'm just copying them.
And pasting it here.
And you can you can also find the code.
I'll copy here.
Attached in the lecture resources.
So please copy that in your clipboard.
Place the cursor.
Somewhere in here, so indent under body and paste.
So this is what I pasted.
Let me select everything that I pasted.
So it starts with an opening nav tag and it ends with a closing nav tag.
Right.
Let me unindented this here and I'll select it again and press tab to indent it under the body tag.
So that's the code.
Let me explain what this code is now.
But before we do that, I want to go to the page and reload.
And there's the sides.
So it's working.
That's the about page we can go to about we can go to Python.
How this contact page has not been implemented, but you can implement, you can add contact dot HTML
file in your templates directory and connect it to this if you like.
So it's up to you.
And now let's me let me explain the code.
So we start with nav tags here and here.
Those nav tags are specialized to create this bar.
Then we continue with a div tag.
It opens here and it closes here so that div tags contains all the contents of the nav bar.
So it's like a wrapper and that's a bootstrap class.
Then we have a elements.
So with an opening, a tag and a closing, a tag and an a element, create, it's a link.
So Python, how.
Is the first a element, right?
You see, the content of the link is Python.
How?
And then we have this class Navbar brand, how you want to stylize the the link based on bootstrap.
Then we have h.r.f.
This defines the link where python.
How should bring the user when python how is clicked.
So the link here is a dynamic link.
So meaning that we are using jinja.
So you have this quotes and inside quotes you have the jinja code.
So we use the URL keyword followed by the name of the URL.
What is the name of the URL?
Well, if you go to job applications and your URLs.
So the URLs of your app, you'll see that we have two URLs and each of them have a name.
So a name is equal to index and name is equal to a boat.
So this string index is what we're using in here.
So URL for index.
So when this is clicked, take me to the URL of the index.
Path.
Right?
So then we have this button.
The button is this thing here, which shows up when we make the window smaller so we can click that.
To show up the menu items.
So we have some classes there that define how that button should look like.
Then we have the other elements, right?
So it starts with this div.
Which closes in here.
So this div has a UL element which defines a list.
So that UL contains several li elements.
One li element here, one li element in here.
And each li element contains an a element.
So there we go.
We have the about page.
The URL points to the about name, which I showed you in Urls.py.
And then we have the other list elements.
And so we have the contact item, which is this one here contacts.
And the link for H.r.f has not been implemented.
So in that case, we simply pass quotes and a hash tag.
You can implement this later if you like, as I mentioned.
So then we have the closing text and that's makes a navigation bar.
So that's our final version of the website.
I hope you like it and I really hope you learned a lot from this so that you have a good start in web
development.
You need more practice, but with practice you'd get better and better.
So thanks a lot for following.
See you later.