Tip:
Highlight text to annotate it
X
What's going on everybody! Welcome to this seventh tutorial on HTML5 and CSS3. My name
is Jack Jenkins and this is Academy of One dot com. I just took a Scottish shower so
I'm really hyper today. Today we are going to talk about lists and hyper links. Get it?
Hyper today, hyper links, hehehe. Alright, I'm done.
In this lecture we are going to talk about four, that's right, four things. First one
is going to be Ul and Ol lists. Secondly is going to be definition lists. Thirdly is going
to be hyper-links... finally. And lastly we are going to switch over to desktop view so
you guys actually know how to use this stuff.
Unordered and ordered tags define, a list! Who would've thunk. They're double tags. The
main difference between the two is that the ordered tag has numbers and the unordered
tags has those little dots like the one showed on the slide right there. It's beautiful isn't
it, yeh, you dig it. Now they really do nothing without having list items within, or Li. For
instance if you look at the example, you have an unordered list that has lists are awesome
[it says cool]. So when the browser interprets it the browser says "Alright, were gonna give
it a dot". Pretty sweet hu.
Definition lists are used for [drum roll] defining. They work exactly like ordered and
unordered lists except different. Now dt stands for... dl, I'm sorry. I'm an idiot. Dl stands
for Definition lists. And just like ol and ul they do nothing on there own. However,
if you add a dt, which is just like the li for the other list. Instead of having just
a dl [supposed to be dt] you can have a dd which defines the definition term. WHATTTTT!
So if you can easily see in the example you start of your list with a dl, then you use
a dt to start a term. Then you can use a dd to describe the term. For instance if you're
making a restaurant, you can have the dt be ham sandwich. Then you can have the dd be
ham sandwich with sweet mustard, ketchup, onions, lettuce, tomato... oh god! Excuse
me, I'm going to be eating.
So it turns out that I don't have any ham or cheese so I don't feel like doing this
tutorial series anymore. But I still continue anyway. Next up is hyper-links, now a hyper-link
is a click-able link. Now we talked about links in some other tutorial, but these are
the ones [the user] can actually see. So when you're in a site and you see that blue thing
with the underline thats a link. Now a is for anchor. It would make sense if you start
it with link, but you start it with the a for anchor. An easy way to remember that is
you anchor a link like a pirate would anchor a ship. Not at all. But it's a way for me
to remember it. And there's one required attribute, which is the Href, or hyper link reference.
You start off, as you can see in the example, with the a href then the name of the site
you want to go to. In the future we will be linking our own pages throughout the site.
But that's way into unit three.
Alright so first off we are going to be making our basic ul and ol lists. Next we are going
to need a list item. I'm just going to put in two list items. Just copy and paste this.
lazy to write it twice. This ones gonna be... lets see. Pen. Pencil. This ones gonna be
ol. I'm showing you both so you know what the difference is between an ol and ul is.
Past those two list items again. This ones gonna be... cord. Pumpkin. Alright and this
one is the unordered list because it has the dots and this one is the ordered list because
it has the numbers. And you can change it and we will change it at some point in the
future. But for now just leave it like it should be, or leave it at the browser defaults.
And, I'm going to tell you this now, you mostly use unordered lists for navigation. And we'll
talk about navigation in the future. So if you want to work ahead then Google how to
make a navigation header with HTML5 and CSS3. Next we are going to be using the dl tag.
Then we're going to have a definition term. This ones going to be Winnie the pooh. You
gotta misspell it. Otherwise Disney will sue. Next we are going to add the dd which is going
to be... igor. Alright thats a character. Oh, igar. Again, copywrite issues. You gotta
change it. And you can see, it automatically indents it for you. Which is pretty nice and
cool. So if you want to make a dictionary for your words. Use dt and dd. And lastly
we are going to be anchoring a tag. a href which is the required attribute, google.com.
Click here. And you can change the href to whatever site you want. Click here and...
oops, forgot. When you anchor it you need the HTTP://. You have to specify the protocol.
And when you specify it'll take you to the site. When you link to your own page you're
not going to need the protocol. Because your calling on your own server. Where going to
be talking more on protocols in unit six which is the bonus unit. So. And I'm going to show
you one more thing. The mail to. It doesn't matter if it's a real email address or not.
As long as you click it, it will open up your mail, whatever program. In this case it's
going to be outlook. Open it up and you can send email using the mail to. And if you look
up my old videos you will see how to link to your own page, if you click this link it
will go down to a certain part of your page. We're going to be doing that when we make
our actual mock page in chapter 4. Or unit 4.
Well, that's it for todays tutorial. Tune in next week when we talk about... forms!
That's right, we are going to make our own mock up form. See you then.