Welcoccccccccx bvme!

Let's meet your instructors for this course: Karl Krueger, Kelly
Howard, and Abe Feinberg.

 Text files contain:

o Letters
o Numbers
o Symbols
o Spaces
 HTML is written in text.
o The layout of a web page seen by the user is put together by the web browser
based on the code in the text file.

Installing a text editor (optional)

If you don't have a text editor installed on your computer already, you may want to download
and install one now. This is entirely optional. If you don't want to (or can't) install a text editor
on your computer, don't worry—we will also provide a workspace right here in the Udacity
classroom that has its own built-in text editor.

If you do wish to install a text editor, here are a couple we recommend:

 VS Code(opens in a new tab) is a very popular editor created at Microsoft. It is available

for Windows, Mac, and Linux.

Only the third example is correct.

The first example starts with an open <p> tag, but then right after it has a closing </em> tag. But
there's no open <em> tag before it. It's not right to close an element that hasn't been opened. This
example actually has the closing and opening em tags backwards from how they should be.

The second one has open <p>, open <em>, open <mark>, but then it has a closing </em> without
a closing </mark> first. It's trying to make the mark element overlap with the em element. If we
give this to a browser, it will probably figure out what we mean, because browsers are actually
really lenient. But this is technically wrong HTML.
And the third one is just fine. It has an open <p>, open <em>, open <mark>, close </mark>, close
</em>, close </p>. Nice and symmetrical.

As you just discovered, the h1 element can be used for headlines, or section headings. There are
actually six of these heading elements: h1 through h6.

I'm an `h1` heading

I'm an `h2` heading
I'm an `h3` heading

I'm an `h4` heading

I'm an `h5` heading

I'm an `h6` heading

h1is used for the main heading on a page, while the rest are used for subheadings. We use a
smaller heading to show that one section is inside another section.

In contrast, if one section simply comes after the other then we use the same level of heading.

For example, suppose I have a page about animals, with one section about cats and another about
dogs. Here's what the headings might look like:

Animals ← h1
This is my super cool page about my favorite animals. For the main heading, I'm using an h1
element.

Cats ← h2
This part is all about cats.

Cat Behavior ← h3
This part is about cat behavior.

Cat Diet ← h3

This part is about what cats eat.

Dogs ← h2
This part is all about dogs.

Dog Behavior ← h3

This part is about dog behavior.

Dog Diet ← h3

This part is about what dogs eat.

There are a few HTML elements that are always used inside certain other [Link] don't
make sense on their [Link]'s an example, the list item or li element.A list item is one item on
a list,like a shopping list or a list of pictures or a table of contents.A list item can't just appear by
itself,it will always be part of a [Link] there are two different kinds of lists that an li can be part
[Link] can be part of an ordered list which usuallyshows up as a list with numbers or letters in front
of each item,or an unordered list,which usually shows up with bullets or [Link] HTML
element for an ordered list is ol,while the unordered list is [Link], why can't a list item stand on its
own outside of a list?Well, an ol list and a ul list are displayed [Link] the context of
one or the other kind of list,the browser wouldn't know whether to put a dot or a number on the
[Link] of that, HTML has a rule that li elementscan only occur inside either an ol or a
[Link] lists can be nested inside other [Link] is how you'd create something like an outline ora
task list where some tasks have multiple steps inside of [Link]'s a task list for moving to
California from across the country.I might have missed some steps but these are the big
[Link] a look at this list item here, kitchen [Link]'s an li element inside a ul element inside
another li inside an [Link] we render this in the browser,the ol makes these steps one,two and
three and inside the first step there are three bullet [Link] the way, here's a little
[Link] an li element can only occur insidea list and it cannot occur directly inside
another li,HTML doesn't actually require us to write closing tags for li [Link] reason this
works is the li element can never occur directly inside another li,it always has to be inside an ol
or [Link] means, if the browser is reading the text ofan li element and it encounters another li
opening tag,it knows the previous list item must be done [Link] you can choose to write closing
tags for li if you want to or [Link] web developers always do because they think it makes their
code more [Link] don't because leaving them out savesa little tiny bit of space in the file, it's
up to [Link] you always need to write closing tags for ul and ol,so the browser doesn't try to
stuff everything after them into the list

Here's a simple list with no nesting:

 Mammals
 Reptiles
 Birds

In the workspace below, see if you can nest additional lists inside this one, in order to achieve a
result like this:

 Mammals
1. Raccoons
2. Gorillas
 Reptiles
1. Iguanas
2. Cobras
 Birds
1. Ostriches
2. Ravens

Note: Some of you have written in to us to point out that, in the above example, the Udacity
classroom adds a little spacing to the list (after Gorillas and Cobras). This is because of extra
styling code that is applied to the page. Your result (below) will not have this extra styling and
you don't need to worry about that here—the point of this exercise is just to practice nesting the
lists. (But to those of you who noticed and wrote in, we appreciate that you are paying attention
to details like this! 😎)

Solution
Here is a solution to the nested list exercise above.
Remember, the closing </li> tags are optional. Here we've left them out, but if you included
them in your code that also works fine! (But, again, the closing </ul> and </ol> tags are not
optional---make sure to include those!)

<ul>
<li>Mammals
<ol type="a">
<li>Raccoons
<li>Gorillas
</ol>
<li>Reptiles
<ol type="a">
<li>Iguanas
<li>Cobras
</ol>
<li>Birds
<ol type="a">
<li>Ostriches
<li>Ravens
</ol>
</ul>

You may have noticed that in the provided HTML code, we are adding type="a" to <ol>
elements to specify that the ordered lists should use lowercase letters instead of the default
numerical ordering (just like in the example at the top of this page).

The type attribute for <ol> offers several options for list item markers:

 "1" for numbers (the default)

 "A" for uppercase letters
 "a" for lowercase letters
 "I" for uppercase Roman numerals
 "i" for lowercase Roman numerals

Feel free to experiment with these options to discover the different visual outcomes they
produce.

Solution
Note: There isn't a single "correct" way that you have to use when indenting your HTML code—
and different people often have somewhat different opinions on what to indent when. So don't
worry if your code doesn't match ours exactly. That said, there are some conventions that can
help you decide when to indent and when not to. If you're curious about these conventions and
the reasons for them, you can find a nice discussion of the topic here(opens in a new tab).

<p>Here is an example of a nested list:</p>

<ul>
<li>Mammals
<ol>
 <li>Raccoons
<li>Gorillas
</ol>
<li>Reptiles
<ol>
<li>Iguanas
<li>Cobras
</ol>
<li>Birds
<ol>
<li>Ostriches
<li>Ravens
</ol>
</ul>
<p>Indentation can help show the nested structure of the elements.</p>
<p>It can also make the code <em>much</em> easier to read!</p>

The web is built on the idea of [Link] means that you can have textual
documents,like web pages, but that they also have references between [Link] the web, those
are [Link] time you click on a link in a web page,you're making use of [Link] you
write HTML,you can link to other web pages,both your own and also someone else'[Link]'s how
a search engine works, for [Link], here's how to make a link in your own [Link]
element for making links is called <a>.Yes, it's not called link, it's called <a>.That stands for
anchor,because an <a> element anchors an address to a piece of text on the [Link], that
sounds weird to me too,but that's how it is, at least it's [Link] we can't just use <a> by
[Link] are a couple things we need an <a> element to include in order to make a [Link]
text that a user clicks on to follow the link,and the URL of the page we're linking [Link]'s how
we're going to do [Link] opening tag for the <a> element hasthis extra little bit in it that we
haven't seen in HTML tags [Link] href equals "a url" [Link] is an example of an HTML
[Link]'s an extra piece of data that comes alongwith the element and it gives it extra
[Link] part before the equal sign is the name of the attribute,and the part after,in double
quotes, is the value of the [Link], the name is href and the value is [Link]
name href stands for hypertext reference,and it's used with <a> tags and a few other tags that link
to another [Link] won't ever see it on a paragraph or an emphasis tag or something
[Link], there's the contents of the <a> element,which becomes the text that appears on the
[Link] there's the closing <a> [Link] might notice that it doesn't have any attributes in
[Link] like href always only go in the opening tag at the beginning of an [Link]'s
pretty much all there is to making links in [Link]'ve just made an <a> element with a start
and an end [Link] start tag has an href attribute with an equal sign,and in double-quotes, the url
of the page that we want to link [Link] contents of the element become the text the user clicks
on,and then there's a closing <a> tag.
Example HTML and CSS
Here's the HTML and CSS for the example shown in the middle of this video:

<!DOCTYPE html>
<html>
<head>
<title>Listy list</title>
<style>
p { color: red; }
ol { display: flex; }
li { margin: 20px; }
</style>
</head>
<body>
<p>These are some red red words.</p>
<ol>
<li>Apple apple berry berry sauce sauce sauce.<br>
Cook it on the stove and serve it to your boss.
<li>Betty bought a bit of butter,
but the butter's burning bitter.<br>
<li>Crisp cookies claim Charlie's cookout crown.<br> Clever Clara
clocked the crows at <em>c</em> (clearly connivance!)
<li>Daring drivers drove down Devil's Ditch in Dodges.
<li>Evil eggs explode everywhere. Eww!
</ol>
</body>
</html>