element contains some text. In our case, it contains “Literature Works” because that’s the title of our site. This is the text that shows up at the top of your browser tab, or when you bookmark the site, or when the site appears in Google search results. It looks like some of the contents of our box shifted in a new order during transit. But anyway, this is the <meta> element with the attribute "charset=utf-8". This element specifies the document’s character encoding, or the character set the document can use. UTF-8 is a universal character set, meaning you can use almost any character from any human language. So by default, it’s a good idea to put this on your pages. Here’s another <meta> element, this time with two attributes. So this line isn’t required, but it’s good now that we’re in the age of mobile devices. So whenever a mobile device views this HTML page, this line of code in the <head> makes sure the device doesn’t automatically resize the page but lets it appear the size it automatically is. So having this line will eventually give you more control over how the webpage looks on mobile devices. Here’s a <link> element, and this is the line of code that helps you have a favicon. A favicon is a small picture that appears next to the title of your site. So here we’re telling the link element to look for an image we called "pebble.png", which we saved in the same directory as this index.html page. Now let’s look at the <body> element. This is where all the visible stuff goes, or the things that actually appear on your webpage. So the <body> is unlike the <head>, and if you remember before the <head> contains all the invisible information or the metadata. So you can put stuff inside your <body> that will show up, like paragraphs or images or headings. Those all go inside the <body> So first we have an image element, followed by an h1, followed by a p, followed by another another p, followed by a third p. Let's look at these in order. The first is the image. And it has an attribute of src="pebble.png". And that basically says, "Hey, display an image here and find pebble.png." Next we have an <h1> element. <h1> is the biggest heading you can possibly have, which is basically the title. Inside of it is the "The Pebble". There are other heading elements. It goes h1, h2, h3, h4, h5, h6. h1 being the biggest, h6 being the smallest. Our first paragraph says inside, "(An excerpt)" The second paragraph has a lot more text. Here it is. And the third paragraph has two things actually. It has some text, the source of the excerpt, and then it has an <a> element, which is a link. And it has a little pink paper which is an attribute. The attribute says, href=" and then a link where the poem was sourced from. And inside of the <a> says Source, and this is the text that by default turns blue and underlined, and go to the link we mentioned in the attribute. So to review, the <body> contains all the visible things, and the <head> contains all the invisible things or the metadata. And both of these, the <head> and the <body>, are inside of the <html>. Now let's make our own HTML page from scratch. Let's first find an HTML skeleton. This might not look like much, but if we view the source, it has everything we need. It's very similar to what we had before. Let's copy it and open up our text editor and paste it. I like to create a new folder for each of my sites in my Sites folder. So I'll do that, and then I'll save this as index.html inside. You'll notice that when you save something as .html, the colors change. This is called syntax highlighting, and it's different for each language and it's really helpful. So you can start inserting your own content. You'll want to replace the default title with your own title. Then I have some pictures ready I want to put on the page, so I'll put them in the site folder. I'll use the <img> element to place them on the page. I can drag the .html file into a web browser to preview it. FAQ How do I look at any website's HTML? You can look at any website's source code by going to View / Developer / View Source in Google Chrome. You could also use the shortcut. Another important way to view code is by going to View / Developer / Developer Tools. This is called "web inspector". It's a little window, and you can size it however you want. You can put it on the bottom or pop it out into a little window. But I like it on the side. Using this arrow key in the upper left, you can mouse over different things on the page and see what HTML element it corresponds to. Why is HTML important if I plan on changing my page's style anyway? It's important to note that most sites you see have "style" on top of their HTML skeleton. As an experiment, we can use this bookmarklet called "Kill Styles" to see what webpages look like with only their HTML. This is all to say that having styles for webpages is totally natural. But you should still care about your HTML, and you should use the most specific element you can depending on the content. Sometimes you'll hear this phrase "semantic HTML". And semantic just means "meaning" and of course meaning helps in communication. So using the right element adds another layer of meaning to your webpage. It's also important to use the correct elements just in case someone is on a bad connection and your stylesheet doesn't load. So the website should still communicate and it should still function. How can I tell if I made an error in my HTML? What causes errors in HTML? 1) Unclosed elements 2) Badly nested elements 3) Unclosed attributes https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML Knowing why errors occur in HTMl will help us write better HTML. What's wrong with this HTML? The head element wasn't closed. That's like a two-sided box. Which example is badly nested? What's missing on this attribute? Sometimes you'll find while using your text editor, that syntax highlighting, or the colors of the words, will help you find these errors. W3C has an HTML validator (https://validator.w3.org) And here it's telling us that we didn't close our <title> element. Are there two different ways (that both work) to end empty elements? Like I said before, empty elements are edge cases that don't have an opening and a closing tag. And yes, both of these work. Why is the sky blue? Why is the hyperlink blue? I don't really have the answers to these questions, but blue has a rich history in computing. What's up with indentation and HTML? These both result in an identical looking webpage. So a computer reads these exactly the same. So indentation mostly helpful for humans so we can tell what elements are inside of what elements and for general organization purposes. Music: Yo Yo Ma playing Bach Cello Suites (1998) Surf music songs The End

*cello music* Basics of HTML So maybe you guessed by now, but today we're going to talk about HTML, which stands for HyperText Markup Language. HTML is used to structure a webpage and all of its content. All webpages are made up of HTML. What you're looking at now is a webpage that I made. We can view the source to see the HTML code of this webpage. All HTML documents have the same general structure. First there's a section followed by a section, and those two are nested inside of an . So you could say the way HTML elements are nested are kind of like boxes. One goes inside the other. So let's look at all the parts of this webpage. First, there's this , and that basically says "Hey! This is an HTML5 document." And that just goes at the top. This whole webpage is enclosed in an element. And like we said before, the element contains the element and the element. You know you're looking at HTML when you see elements, which are used to enclose, wrap, or or differentiate parts of content to make them appear or act a certain way. For example, you can create a paragraph by writing some text in a

. Most elements are made up of two parts: the opening tag and the closing tag. The opening tag begins the HTML element, while the closing tag closes the HTML element. The closing tag has a slash in it. It's important to note that not all elements have opening and closing tags. These are called "empty elements," and there is a full list of them on Mozilla's website (https://developer.mozilla.org/en-US/docs/Glossary/Empty_element). Mozilla also has a reference page for every HTML element that exists (https://developer.mozilla.org/en-US/docs/Web/HTML/Element). So you can scroll down this page and see what each one does. That said, you can't make up your own HTML elements. As a general guide, I really recommend Mozilla's documentation (https://developer.mozilla.org) because it's very thorough. If you're looking for something, I encourage you to google "MDN" which stands for "Mozilla Developer Network" and plus whatever you're curious about, so "HTML", "CSS", "JavaScript" ... and you should get some pretty great content. Elements can also have attributes. Attributes contain extra information about the element which doesn't appear in the visible content. So in this example, we're giving the paragraph a class of "special”. And it might not make much sense now, but with this identifying name, we can target this element for style... maybe later when we learn CSS. Another example of an attribute but on a different element might be here. This is a link, an element. The "href=" in the link tells you where the link goes if you click it. Back to our HTML element box. Try guessing what’s in this box by looking at the code. The element always goes before the element, which is why it’s on top in this box. Let’s talk about the section first. All the invisible or metadata type stuff goes inside the section. The element contains some text. In our case, it contains “Literature Works” because that’s the title of our site. This is the text that shows up at the top of your browser tab, or when you bookmark the site, or when the site appears in Google search results. It looks like some of the contents of our box shifted in a new order during transit. But anyway, this is the <meta> element with the attribute "charset=utf-8". This element specifies the document’s character encoding, or the character set the document can use. UTF-8 is a universal character set, meaning you can use almost any character from any human language. So by default, it’s a good idea to put this on your pages. Here’s another <meta> element, this time with two attributes. So this line isn’t required, but it’s good now that we’re in the age of mobile devices. So whenever a mobile device views this HTML page, this line of code in the <head> makes sure the device doesn’t automatically resize the page but lets it appear the size it automatically is. So having this line will eventually give you more control over how the webpage looks on mobile devices. Here’s a <link> element, and this is the line of code that helps you have a favicon. A favicon is a small picture that appears next to the title of your site. So here we’re telling the link element to look for an image we called "pebble.png", which we saved in the same directory as this index.html page. Now let’s look at the <body> element. This is where all the visible stuff goes, or the things that actually appear on your webpage. So the <body> is unlike the <head>, and if you remember before the <head> contains all the invisible information or the metadata. So you can put stuff inside your <body> that will show up, like paragraphs or images or headings. Those all go inside the <body> So first we have an image element, followed by an h1, followed by a p, followed by another another p, followed by a third p. Let's look at these in order. The first is the image. And it has an attribute of src="pebble.png". And that basically says, "Hey, display an image here and find pebble.png." Next we have an <h1> element. <h1> is the biggest heading you can possibly have, which is basically the title. Inside of it is the "The Pebble". There are other heading elements. It goes h1, h2, h3, h4, h5, h6. h1 being the biggest, h6 being the smallest. Our first paragraph says inside, "(An excerpt)" The second paragraph has a lot more text. Here it is. And the third paragraph has two things actually. It has some text, the source of the excerpt, and then it has an <a> element, which is a link. And it has a little pink paper which is an attribute. The attribute says, href=" and then a link where the poem was sourced from. And inside of the <a> says Source, and this is the text that by default turns blue and underlined, and go to the link we mentioned in the attribute. So to review, the <body> contains all the visible things, and the <head> contains all the invisible things or the metadata. And both of these, the <head> and the <body>, are inside of the <html>. Now let's make our own HTML page from scratch. Let's first find an HTML skeleton. This might not look like much, but if we view the source, it has everything we need. It's very similar to what we had before. Let's copy it and open up our text editor and paste it. I like to create a new folder for each of my sites in my Sites folder. So I'll do that, and then I'll save this as index.html inside. You'll notice that when you save something as .html, the colors change. This is called syntax highlighting, and it's different for each language and it's really helpful. So you can start inserting your own content. You'll want to replace the default title with your own title. Then I have some pictures ready I want to put on the page, so I'll put them in the site folder. I'll use the <img> element to place them on the page. I can drag the .html file into a web browser to preview it. FAQ How do I look at any website's HTML? You can look at any website's source code by going to View / Developer / View Source in Google Chrome. You could also use the shortcut. Another important way to view code is by going to View / Developer / Developer Tools. This is called "web inspector". It's a little window, and you can size it however you want. You can put it on the bottom or pop it out into a little window. But I like it on the side. Using this arrow key in the upper left, you can mouse over different things on the page and see what HTML element it corresponds to. Why is HTML important if I plan on changing my page's style anyway? It's important to note that most sites you see have "style" on top of their HTML skeleton. As an experiment, we can use this bookmarklet called "Kill Styles" to see what webpages look like with only their HTML. This is all to say that having styles for webpages is totally natural. But you should still care about your HTML, and you should use the most specific element you can depending on the content. Sometimes you'll hear this phrase "semantic HTML". And semantic just means "meaning" and of course meaning helps in communication. So using the right element adds another layer of meaning to your webpage. It's also important to use the correct elements just in case someone is on a bad connection and your stylesheet doesn't load. So the website should still communicate and it should still function. How can I tell if I made an error in my HTML? What causes errors in HTML? 1) Unclosed elements 2) Badly nested elements 3) Unclosed attributes https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML Knowing why errors occur in HTMl will help us write better HTML. What's wrong with this HTML? The head element wasn't closed. That's like a two-sided box. Which example is badly nested? What's missing on this attribute? Sometimes you'll find while using your text editor, that syntax highlighting, or the colors of the words, will help you find these errors. W3C has an HTML validator (https://validator.w3.org) And here it's telling us that we didn't close our <title> element. Are there two different ways (that both work) to end empty elements? Like I said before, empty elements are edge cases that don't have an opening and a closing tag. And yes, both of these work. Why is the sky blue? Why is the hyperlink blue? I don't really have the answers to these questions, but blue has a rich history in computing. What's up with indentation and HTML? These both result in an identical looking webpage. So a computer reads these exactly the same. So indentation mostly helpful for humans so we can tell what elements are inside of what elements and for general organization purposes. Music: Yo Yo Ma playing Bach Cello Suites (1998) Surf music songs The End