Tip:
Highlight text to annotate it
X
0:00:00.000,0:00:13.633 Welcome back! Last time, we covered what HTML
means to a browser, and how to use the < , / , and > ("open bracket", "slash", and
"close bracket" symbols). We also picked up our very first HTML "tag" - < strong
>.
0:00:13.633,0:00:26.554 This time around, let's take a look at exactly
what goes into an HTML page. Knowing the basic structure of an HTML document will help us
start to map out how we'll structure our webpages.
0:00:26.554,0:00:37.017 Open your text editor, and create a new document.
Save it as "Video 2 Exercises.html", or something equally revolutionary and unique.
0:00:37.017,0:00:49.740 If you're using a dedicated web page editor,
you probably have some text that looks like mine. If not, you'll need to add it in yourself.
You can either type it, or copy it from the description below this video.
0:00:49.740,0:00:52.371 Let's see what we've got here:
0:00:52.371,0:01:64.724 First, we have our "!DOCTYPE" label. This
tells the browser that this is an HTML document (in our case, it's technically "XHTML" - think
of this as a further evolution of HTML.
0:01:64.724,0:01:79.135 It also tells us what validation to use. In
this case, we want "strict", as it will help enforce good coding habits. If your text says
"transitional", just replace "transitional" with the word "strict" in both places where
it appears.
0:01:80.142,0:01:87.303 Next, we have our < html > tag. This tells
the browser to get ready for the html code that is to follow.
0:01:87.804,0:01:98.027 Under our <html> tag, we have the <
head > tag. This tells the browser that what is in this section is NOT to be printed
in the browser viewing window.
0:01:98.027,0:01:105.798 Below that, we have the < meta > tag.
We'll skip this for now - maybe we'll come back to it in a later installment, if there
is interest.
0:01:105.798,0:02:126.359 Our < title > tag contains what will show
up in the browser title bar. Notice the < /title > on the other side of the text - this
tells the browser that only what is between the two is the title. Since we're here, let's
change the title: replace the text between < title > and < /title > with whatever
you want - but leave the brackets!.
0:02:126.359,0:02:134.630 The < /head > closes the "head" section.
There's a lot more stuff that we could add into this "head" section, but that's for later
on in the series!
0:02:134.630,0:02:144.473 Now to the good stuff: the "body" section
includes what we'll be seeing in our browser window. Notice the < body > and < /body
> bookending this area.
0:02:144.974,0:02:155.255 Beneath the "body" section is the final bit:
the < /html > is the browser equivalent of reading "The End" at the end of a book
- it knows that there's nothing else after that point.
0:02:155.255,0:02:158.818 Let's use the "body" to start planning out
our website!
0:02:158.818,0:02:169.469 First, click underneath the < body > tag.
Skipped lines and hitting "Enter" doesn't matter in HTML (it determines space between
things based on code and the CSS we create later;
0:02:169.469,0:02:175.610 however, it's very useful for us to keep our
workspace neat, in case we have to find code in it later).
0:02:175.610,0:03:191.656 First, let's make a heading. For this, we'll
need a new HTML tag: the < h1 > tag! This creates large text, which is handy for telling
the audience of your webpage that they are about to read a section of information on
a specific topic.
0:03:191.656,0:03:210.457 For us, that topic will be a list of webpage
elements. Type < h1 >, and then type "List of structural elements in our webpage:". (Remember,
"open bracket" is the "less than" symbol, and "close bracket" is the "greater than"
symbol.)
0:03:210.457,0:03:220.368 Don't forget to finish the tag, with < /h1
> ! This should be after the text that you want to be the heading.
0:03:220.368,0:03:227.129 If we previewed our page now, we'd see the
words we typed in big, bold letters. We'll skip that for now, though.
0:03:227.129,0:03:234.452 Hit "Enter" (remember, that's for us not for
the browser), and we'll start making our list.
0:03:234.452,0:04:252.325 Lists are a bit trickier than the heading
we just did. First, we have to tell it what kind of list we want. The < ol > tag (ordered
list) will give us a list with numbered "bullet-points"; the < ul > tag (UNordered list) will give
us non-numbered "bullet-points".
0:04:252.325,0:04:266.996 Choose whichever you want - but don't forget
to finish it! For my example, I'm going with < ol >, which means I'll finish it with
< /ol > .
0:04:266.996,0:04:276.267 A list is no good without items, though! Place
your cursor BETWEEN the two things we just typed, and hit "Enter" twice (skipping
one line between them).
0:04:277.270,0:04:282.791 Place your cursor on this skipped line - it's
time to enter our first list item!
0:04:282.791,0:04:299.102 For items in our list, we use the List Item
tag; predictably, this is started with < li > , and finished with < /li > .
0:04:299.102,0:05:312.325 For our first item, type < li > , then
"Webpage Container", then < /li > .
0:05:312.325,0:05:319.846 Now, let's preview! Save the document, navigate
to where you saved it the first time, and open it in the browser.
0:05:319.846,0:05:321.587 SUCCESS!
0:05:321.587,0:05:324.838 Now, back to the editor, to finish our list.
0:05:326.347,0:05:328.848 Let's add 5 more elements:
0:05:328.854,0:05:338.077 A "Primary Intro" area, a "Navigation Bar",
a "Side Menu", a "Content" area, and a "Footer".
0:05:338.077,0:05:353.430 Go ahead and add those into our list (between
the < ol > and < /ol > ), each as a new list item ( < li > < /li > ). Pause
this video while you complete the task, and then return to it when you're done.
0:05:353.430,0:05:359.003 All right! Let's take a look at what we've
got. Your code should look like my code on the screen.
0:05:359.003,0:06:363.004 When it does, save your document, and head
back to the browser.
0:06:363.507,0:06:368.820 Refresh the document, and voila! Our BIG heading,
and our multi-item list!
0:06:368.820,0:06:374.951 Now that we've laid some plans out, check
back next time for when we start the actual website building!
0:06:374.951,0:06:376.504 Until then: </profbeaudin>.