Live coding video: more HTML5
Alright, we're going to pick up where we left off
from our previous video, and add a little more to it.
I'm going to try to put in some quotes, have this page be about quotes.
First we're going to write the instructions on how to do it.
We'll make an ordered list, so we get a nice numbered set of instructions.
First thing to do is find a quote,
and we'll want to add it to the Web page,
and repeat. Do the same thing until you're satisfied with the number of quotes you've got.
I'm going to put in a ‘Mark Twain’ quote. It's about learning so it seems appropriate.
I'm going to use a <blockquote> because it's long enough that it takes more than one line,
so it'll be helpful to have it as a <blockquote> rather than an inline quote.
Notice that the indentation for the <blockquote> is greater than it is for a paragraph.
It's a standard way to do <blockquote>.
Alright, so we've got our quote in there. It would be nice to have a little
visual separation to distinguish the quote from the stuff around it.
You'll notice when we're on a particular element there will be a blue box around it.
If I go up and click on the "doctype", it eliminates that so you can see what it looks like on a final Web page.
Now this <hr> is nice, but it's a little too long for my taste.
I'm going to put it inside the blockquote,
that way it will be just the width of the <blockquote> rather than the width of the body which is where it was before.
Then I think I'll add one at the end as well.
And that looks pretty good.
0 comments:
Post a Comment