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 elements.They don't
make sense on their own.Here'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 list.But there are two different kinds of lists that an li can be part
of.It 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 dots.The HTML
element for an ordered list is ol,while the unordered list is ul.So, why can't a list item stand on its
own outside of a list?Well, an ol list and a ul list are displayed differently.Without 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
item.Because of that, HTML has a rule that li elementscan only occur inside either an ol or a
ul.But lists can be nested inside other lists.This is how you'd create something like an outline ora
task list where some tasks have multiple steps inside of them.Here's a task list for moving to
California from across the country.I might have missed some steps but these are the big
ones.Take a look at this list item here, kitchen stuff.It's an li element inside a ul element inside
another li inside an ol.When we render this in the browser,the ol makes these steps one,two and
three and inside the first step there are three bullet points.By the way, here's a little
shortcut.Because 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 elements.The reason this
works is the li element can never occur directly inside another li,it always has to be inside an ol
or ul.Which 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 with.So you can choose to write closing
tags for li if you want to or not.Some web developers always do because they think it makes their
code more clear.Some don't because leaving them out savesa little tiny bit of space in the file, it's
up to you.But 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 hypertext.Hypertext means that you can have textual
documents,like web pages, but that they also have references between them.On the web, those
are links.Every time you click on a link in a web page,you're making use of hypertext.When you
write HTML,you can link to other web pages,both your own and also someone else's.That's how
a search engine works, for example.So, here's how to make a link in your own HTML.The
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 page.Yeah, that
sounds weird to me too,but that's how it is, at least it's short.But we can't just use <a> by
itself.There are a couple things we need an <a> element to include in order to make a link.The
text that a user clicks on to follow the link,and the URL of the page we're linking to.Here's how
we're going to do that.The opening tag for the <a> element hasthis extra little bit in it that we
haven't seen in HTML tags before.This href equals "a url" part.This is an example of an HTML
attribute.It's an extra piece of data that comes alongwith the element and it gives it extra
meaning.The part before the equal sign is the name of the attribute,and the part after,in double
quotes, is the value of the attribute.Here, the name is href and the value is http://example.net.The
name href stands for hypertext reference,and it's used with <a> tags and a few other tags that link
to another document.You won't ever see it on a paragraph or an emphasis tag or something
else.Then, there's the contents of the <a> element,which becomes the text that appears on the
page.Then there's the closing <a> tag.You might notice that it doesn't have any attributes in
it.Attributes like href always only go in the opening tag at the beginning of an element.That's
pretty much all there is to making links in HTML.You've just made an <a> element with a start
and an end tag.The start tag has an href attribute with an equal sign,and in double-quotes, the url
of the page that we want to link to.The 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>