Tip:
Highlight text to annotate it
X
Hello and welcome.
In this video I'm going to show you how to create a simple
and effective menu
using CSS and HTML. It's going to look like this when we're done
I'm going to start from scratch and I am going to use a tool like Notepad++.
you can see I'm starting out from nothing here so I'm going to create an HTML tag
then give myself some room
and I am going to close that HTML tag and then I will
head on up here and give myself a HEAD tag,
give myself some room,
close that head tag
and I am going to create a BODY tag
give myself some room, and close that body tag. Now have a skeleton of what
would be a web page.
I guess this is probably a pretty good time to save my file.
I am going to call this...
demo2.html
now notice that by default it wants to save it as a text file that's
not gonna work for me
I need to make sure that it is an html file
I am calling it demo2 which is a horrible name but
it's too late now...
Notice that now we have the syntax highlighting - this is good
inside of my head tag, I have a title tag
and this in the title of my page and it's called demo
close that title tag right there
and then I'm going to have my style tag and this is where all of my CSS is going
to go
eventually... and I'm going to close that style tag
the style tag will have a bunch of stuff in it.
Now the body of my document is nothing more than an unordered list and the tag for an
unordered list is, guess what? UL
Alright, so I create my list
and I close my list then my list can be filled up with
list items. Alright it's an LI tag
and I'm going to close that right there and so whatever goes between
those is what's gonna show up as the list item
and I believe I had something like home page displayed...
next list item...
I think I had some text like, page two
close the list item, and I had a third list item
which was... page three
all right
so now we've got a baseline and so let's see what this looks like. If I save this
press CTRL+S, then
I'm going to open this up in
Firefox. Let's see what I've got... I've got a bullet list but it looks goofy
they're not even links and we need to make them links
so there's always a balance between explaining things and and taking too
long and not explaining anything and finishing in five minutes
I'm trying to walk the line between both of those
I'm going to create an anchor tag and I am going to set the HREF
attribute to a # which is a good way of writing a dummy link that
doesn't go anywhere
it's going to behave like a link and I am going to style it like a link
but
it's not really a link
that does anything particularly
I've done enough of these today to where
uh... I'm just getting worse at this point but I'm
trying to make this video with no mistakes and that looks pretty clean to me. The syntax
highlighting is kind of telling me that I think I set that up right
so now I can save this and I can preview it
and I've got
a list full of links and looks pretty goofy and really we are going to use CSS
to make this look pretty
uh... so I head back on over to Notepad++
then I head up here and I am going to do this easiest way that i know how and I am going to redefine
some tags
I will redefine all
list items, so I do that like this,
I want to redefine the list tags, LI, notice te curly braces.
Everything I do in here
will apply to all list items
so one of the things that I want
is I want to get rid of
these bullets
alright, so that is
list-style-type
and I want
none
and that = sign doesn't belong so if I do that
I save this and I refresh the page
I have now gotten rid of the bullets which is actually a pretty big step towards getting
this thing looking decent
another thing I want to do is I want to set the width to
125 pixels i've just done this before that saying
that I don't want these taking up my entire screen ecause by default these
elements are going to be the width of my screen which is not what I want
and I'm also gonna set the background color to a hex value and I'm going to go with #ABC
which is kind of a nice
light blue color, and if I refresh
you can see that did something wrong
uh...
my guess is going to be that
the background
is spelled...
I spelled background wrong
sorry about that
funny how one little character can mess things up
it was only effecting one attribute but now you can kind of see something's
happening. So some other stuff that I want to do before we move on
is I am going to center that text and that text
is... that's the text-align property
and I want it to be centered
and now we go to preview and now we're looking OK
the thing that's really bad about this right now is that the text is underlined
which looks goofy I would also like to point out how
if I'm on the side of my list you would think that they should be a link right
here, this should link me to my home page and this should bring me to page three but
right now you have to mouse over the text
we are going to address all that
right now
so the other thing i wanted to define here
is I want to re-define all of those links that are within my list and that's why
write that out I'd say every anchor tag which is within a list, I want to do something
to it. One of the things I want to do is get rid of the text decoration
now this
If I set this to none it will get rid of the underlines which is a
pretty big step for us
another thing that I want to do
is I want these to display
as block elements
and this is also a bit... this is also something that I was just referring to I
do this, I refresh and nothing happens
except for now it's gonna be treated like a button instead of some text. It is
just text but now
the link is the entire
list item itself not just the text which is a big deal
Now the last thing we are going to do to fancy this guy up
is I am going to say, all anchor tags
within my list
I'm going to set their hover attributes
This means that when i hover over it, if you remember my example I showed you in the beginning
when you hovered over them the background-color was turning to brown
so that is going to be...
background
color
and I did brown, so I am just going to write brown
and the other thing I did is I made the text color yellow so that's not text-color...
it's just called color which is kind of misleading, you might think it does
something else
but if you just write color that means text color
I save, head on over here nothing happens
but now when i have a hover over my links they change colors and this is good
because the user can actually tell what's going on
now there's one more thing they had in my final example and that was anunderline on the
bottom of every element so let's do that real quickly
So for list items,
I want
a border and it was just on the
bottom of every item
and so I am going to say two
pixels,
it was solid and it was black, so kind of a weird set of properties - this is the width
of the border
this is the type of the border and this is the color of the border
this indicates there's only a border on the bottom
I am going to save this,
get a preview
you can see this is the menu that I started off with
and then we took about
uh... you know it's hard to say because there's been a lot of time just
talking
but you can see with
relatively little code
we've created
a menu that is both functional
and it looks decent and you could do whatever you wanted with this, you can make
all kinds of improvements but just as far as bare minimum list
this should get the job done
hopefully this helps you guys get started
developing some web pages and creating navigation menus
thanks for watching