XHTML and CSS Tutorial - 15 - Lists Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

what's going on everybody welcome back
to your 15th XHTML and CSS tutorial in
this tutorial I'm going to be covering
the lists but before I do I want to talk
to you guys about this doctype right
here because I thought I could get away
with it but I've been getting a lot of
hate mail and people are complaining
about this doctype for good reason you
know how I said that every XHTML
document needs to have a doctype to make
a valid well the truth is that this is
not a valid doctype and I shouldn't even
be telling you this but to be completely
honest if you go ahead and delete your
doctype altogether then your browser is
still going to read your webpage and
it's probably going to be just fine but
if you want to make a valid doctype and
valid XHTML document you know you might
want to do this if you're making a
website for someone or if you had a job
designing websites um you need to have a
valid doctype so let me go ahead and
grab one from over here that is what a
valid doctype looks like I think there
are three major kinds strict which is
like you need to write your code exactly
transitional which is the best of the
new XHTML in the old HTML and I think
there's one called frameset don't ever
use that because that has to deal with
using the old HTML frames and I'm not
even going to teach you guys what frames
are because they're worthless and I hate
them and no one uses them so um that is
what valid doctype looks like I just
didn't want to throw this on you guys in
the first tutorial because you guys are
back alright if this is the crap I'm
going to have to learn then I'm just
going to quit watching these stories
right now anyways I'm going to go ahead
and leave that in there right now so uh
yeah now I have a valid XHTML document
so now we can continue with the meat of
this tutorial and that is covering a
list not Lisp like
list like lis T so the first list I'm
going to cover is probably the most
common list and that's an unordered list
and whenever you make an unordered list
on your webpage it's just going to take
the items and make them appear as bullet
points so when would you want to use an
unordered list say you're making a
website of like things you want for
christmas
those things don't really need to be in
order um you know because you want all
of them so you don't need them numbered
or anything it's just like a bulleted
list so enough of me talking let's go
ahead and make that right now in order
to make an unordered list the keyword is
ul and of course the ending is ul so now
here is where your list starts and here
is where your list ends % Buckey there's
nothing in my list well let's go ahead
and change it so in between your tags
anytime you want to add an item to your
list you need to add the tag Li this
stands for a list item and of course the
ending li now anything you put in
between here is going to be an item in
your list and you can have as many items
as you want so let's go ahead and make
this my Christmas list so what do I want
for Christmas let me think real quick
new sunglasses because my older ones are
scratched up and let's just go ahead and
copy this because I'm lazy
and all right so we want new sunglasses
what else do I want a computer can never
have too many computers um I want some
paintings did I spell that wrong good
perfect paintings for my walls and by
the way why am i saying this because I'm
in my office right now and on my walls
there are like 4 hooks where paintings
or photos or something should go and I
don't have any paintings or anything to
hang on there so now I just have four
dumb looking hooks on my wall so anyways
I want some paintings for my walls
alright and last but not least I want a
hot pocket because hot pocket air hey
close enough everyone needs a hot pocket
on Christmas it's just like a rule so
let's go ahead and save this and now you
can see what a Norn under unordered list
looks like see like I told you it's just
a bunch of bullet points so anytime you
want to make a list and they don't need
to be in particular order this is what
type of list you would use again the
keyword is ul and the items in it are Li
so let's go ahead and I change this up
and now since they made something called
an unordered list you figure it only
makes sense for them to make an ordered
list well if you thought that then
you're right so an ordered list is
keyword Oh L and let me just go ahead
and end this Oh L and you put items in
here just the same as you would an
unordered list the only difference
between an unordered list and ordered
list is whenever you make an ordered
list things are going to appear numbered
first item is going to be 1 then 2 then
3 then 4 you don't need a number them
explicitly your browser is going to do
that for you automatically so let me go
ahead and show you again to add a list
item an ordered list is the exact same
as a nun or list just go ahead and put
Li and end it with end Li let's just go
ahead and copy this and paste this baby
right now paste paste paste so the first
thing into my order list so first of all
let's back up why would you use an
ordered list well say you want to give
someone directions or instructions how
to do something step 1 step 2 step 3
or maybe you know the top ten movies you
want to see this summer one two three
four five seven eight nine ten you know
anytime you want an order list use order
list
fair enough so let's go ahead and make
an order list in instructions on how to
have a wonderful day so number one go to
youtube and notice I'm not typing number
one anywhere because the my browser is
going to do that for me automatically
step two type in the new Boston step
three watch all the videos that pop up
and step four eat a hot pocket because
we got to throw a hot pocket in there
sometimes so that is the instructions
and how to have a wonderful day so let's
go ahead and save this and refresh it
and see what we got as you can see it
automatically numbered our list for us
so that saves us the trouble of you know
having to do it ourselves and it's also
convenient when you have to go back and
change something it's going to reorder
it for you automatically so that is the
basics of how to create an unordered
list and an ordered list um you're going
to be using them a lot more frequently
than you think in web design so get to
know them um they're pretty easy to
understand so that's it
so if you have any questions go ahead
and ask me on my forum at the New Boston
comm and either I or someone else or
answer for you so thank you guys for
watching don't forget to subscribe and I
will see you guys later