 Welcome to Intro to HTML, Just the Basics with me, Doku EdTech. Let's get started. It's been a while since I've done a video, so please bear with me. So today what we're going to do is we're going to learn the absolute basics of HTML, what it is, how we can use it, and just some of the basic tags that you can use. So HTML is one of the languages that is used on web pages. We have HTML, which controls the content. It controls, for example, text and images that you see on a web page. We have CSS, which does the design, which is colors and layout, things like that. And then we also have JavaScript, which does the interactivity. But today we're going to be working on HTML. So to get started, what we need to do is to create a folder where we're going to put our code. So I'm going to create a folder. I'm going to call it Tokyo EdTech. And that's going to be, for now, it's just going to be on my desktop, and you'll see that down here. Those of you that are curious, I'm using the Genie text editor, and I'm writing this on Ubuntu Linux. So I need to create a new file. And if you don't have a new file, you just click create new file here in Genie. Then I'm going to go to file, save as, and this is really important. This is where, especially my students, because they're younger, they're not good at file management. So I'm going to go to desktop, and I'm going to make sure I click into that Tokyo EdTech folder. And I'm going to call this index.html. And the reason is that traditionally web servers would start, if you'd look into a directory, they would look for index.html. Now, things are much more advanced now. You don't see this quite as often, but this is kind of a basic from the ground up tutorial. And notice it's .html. Don't misspell that and don't put an extra space at the end. So I'm going to hit save. And now Genie knows that this is an HTML file, and I can start typing it. Now, HTML pages are made up of different sections. So there's a top section called ahead, and there's a bottom section called the body. And in between that, or they are in between HTML. And you notice here how when I typed the HTML, Genie automatically added this HTML. Notice it has a little slash. So these are what we call opening and closing tags. So what this says is everything from here to here is HTML. Now, there are some exceptions that as you'll see probably in future tutorials. But today we're just going to be doing some HTML. So as I said, our page has a head. And notice again, it's been added. And inside this head, I'm going to put a title. And I'm going to call this, you know, all, let's say I'll call it Tokyo EdTechs. That's one word I usually use, EdTechs webpage. I'm going to hit command S or control S depending on what computer you're running. And when I hit this little gear thing here, and that will should open it in a web browser on your computer. So let's go ahead and try that. And you can see it did open. I'm just going to drag this over so we can see what's going on. And you'll see up here the path. This is on my desktop in the Tokyo EdTech folder. The file is called index.html. Now, you notice there's nothing here on the page because we only did the head. You notice this title Tokyo EdTechs webpage is displayed up here in the tab. So if you want to change this text here, you change it here in the head. So our next thing is to go ahead and do the body. So I'm going to go ahead and make my body and watch again. It's going to auto complete for us. I'm just going to hit enter. I'm going to put these two together because basically at this point, the webpage is going to end with the body and end with HTML. So HTML has a lot of tags. These are called tags. I got HTML, closing HTML, opening head, closing head, opening title, closing title. So opening body, closing body. So what I'm going to do is I'm going to make something called an H1 tag. And this is called a heading. I'm going to put my name here Tokyo EdTech. And then I'm going to go ahead and make a new tag called H2. You'll see what that does in a second. And this is going to be called about. So I hit command S to save or control S to save. Now I can go ahead and click this again and it will open up a new tab or I can just go ahead and click refresh. So you notice here now it says about and I've got about here. Now notice this is an H1. So H1 is bigger. H2 is a little bit smaller. There's also an H3, H4, H5 and H6. But we're going to get into that tonight. So what I want to do here is I want to create a little list about me. And so I'm going to do something called UL. And that is what's called an unordered list. I'll show you what that means in a second. And I'm going to have three list items. So I am a computer science teacher. I teach at a school in Tokyo, Japan. As some of you know, I am a YouTuber. I assume you know that since you're probably watching this on my YouTube channel. And I'm also an amateur musician. I don't know if you know that about me, but I am an amateur musician. So I'm going to hit save and I'm going to go ahead and refresh over here. Now you can see computer science teacher, YouTuber, amateur musician. Now I said earlier this is an unordered list. What I mean by that is that there are no numbers here. It's just bullet points. Now if I want to change it to an ordered list, I can just change these both to OL. Save it and refresh. You can see it adds some numbers. I don't really like that. I like unordered lists. I'm going to stick with that today. I'm just going to fix that and check that. Okay, so there we go. Next, I'm going to create a section also using H2. I'm going to call this links. So this will be links to various things that I've done. Again, I'm going to make a new UL. I'm going to make some list items. Now, just to make my life easy, I know there's going to be, I think I've got three things here I'm going to do. And so I'm going to make a link to my YouTube channel. I'm going to make a link to my Twitter account. And I'm going to make a link to, I'll tell you what, one of my bands, the complaints department. I play bass and occasionally do backing vocal. And this is our sound cloud, which I'll link to. Okay, so now I'm just going to go ahead and save that and test it. Okay, so now I've got some link text here. What I want to do is I want to change this text into links. I'm just going to go ahead and do that one real quick. So first I got to do is get the actual link. So I think I have a link to YouTube. And I'm just going to go ahead and click on up here. You guys will have to search, but I'm going to go ahead and click on to my channel. And I'm just going to go ahead and copy this. I'm going to control A or command A and copy command C. And you can see some stuff I've done recently. So watch what I do here. So to make a link, I put an A, which is an anchor, and it's H-R-E-F equals quote, quote. Okay, you'll see there's a little bit of a miss there, which I don't like, but that's what it does. So I've just pasted that in. And I got to put the slash A here. Now Genie does a little bit of autocomplete, which is usually a good thing. But in this case, it's just a little bit off sometimes. So it's a little hard to see because it's such a long link. But you'll see we have A, H-R-F equals quote, H-G-T-P-S, et cetera, et cetera, et cetera. Don't forget this. Then our text, then our closing A tag. I'm going to go ahead and save that. I'm going to go back here. I know I'm going a little fast, but you can just go back and watch it when I hit refresh. You can see how now it has become a link. So if I click that, and I use control click there, or command click, depending on what operating system you're on, I'm on Linux, and it takes me right to that page. So I'm going to go ahead and do the same thing with Twitter. And I'm going to go ahead and I'm going to do Twitter and just search for Tokyo EdTech. And you'll see that's me, Christian Thompson, Tokyo EdTech. And it automatically added the language. We can leave it there or not. Again, I'm going to copy it. I'm going to go back and do the exact same thing. And it's H-R-F equals quote, quote, oops, that's not a quote. Control V. You just got to be real careful with where everything goes because you can get some errors in there. I'm going to save it and go ahead and test it. And now that's a link. And again, the color, oops, I'll close that accidentally. And now the color thing we can change later. That's not a big deal. But you see how that will take you to my Twitter account. And then finally, I want to do the complaints department. Let's see if we can find it. Departments. And I want to find our SoundCloud. And there we are. So you can see I've been listening to my own band, which may not be a good thing. And that's actually a picture of me. And that's the rest of the band. I'm going to accept those cookies. So I'm going to control A, control C, and go ahead and put this link in here. Um, A, oops, for the H-R-F equals quote, quote. Again, and just don't mess up these, the balance here. So you've got to have your links done, your code done just right. I'm going to go back to here, refresh. Again, just test it, make sure it's working as expected. And that will take you to our page. And now the album that I'm on is called Everyone's a Critic. I wasn't on the other album. Check it out. Hopefully you will like it. Okay, so that is how we create links from one web page to another. So again, I know I'm going quickly, but again, you can go back and watch this again. Now the next thing I want to put in here is I want to go ahead and put a picture into my page. And I'm going to put a little meme in. So to put an image, there's a couple of things you've got to kind of be aware of. So let me go back to my Tokyo EdTech folder over here. Now you can see how there is just this index.html file. I've already downloaded a meme. So I'm going to go ahead and just copy it, close that and paste it in there. So what you see here, and this is something, again, my students have trouble with because they're used to phones and tablets. What you see here is there's a folder on the desktop called Tokyo EdTech. I've put the index.html file in there and I've put this meme. And what I'm going to do is link this picture into my HTML page. So I'm going to go ahead and just hide that, pull this back out, and get us our preview. So let's close that little gap for us. And now to do that, the tag is image and it's SRC, not SCR, which a lot of students do for some weird reason, SRC and it was meme.jpg. Now this is a weird one because image does not have a closing tag, although we can actually put slash image and it won't cause any problems. But you don't need it. So I've saved it, I'm going to refresh it and there is my meme says HTML cannot do that. Now again, I am skipping a lot of things just to kind of get you up and running with HTML. I think the last thing I want to show you about HTML here and just keeping this quick is how to embed a YouTube video. So what I'm going to do is I'm going to go ahead and put another H2 in here. I want to say YouTube video. And this is different to a link. What I want to happen is I want the video to actually appear in this page. And so what I'm going to do is I'm going to go to YouTube, I'm going to actually go to my channel. I'm going to show you this plug and you can see I'm a Star Trek fan. I'm going to go to my channel and I'm going to go ahead and, let's see, we'll go ahead and embed, let's go ahead and embed the snake game in here. So I'm going to click this and I'm going to skip that ad. I'm going to see a little link here. Where's that? Down here it says share. And I'm going to go ahead and click share. And what I want to do is I want to embed. So I'm going to click embed and you get this big long code thing. So what you need to do is click copy and it actually copies it to the clipboard. Then you just come here and command V or control V to paste it and save it. That's it. It's pretty straightforward. Now if I refresh it and I scroll down you can see that this page is now inside of my web page which is pretty, pretty darn cool if you ask me. So that is basically all that I wanted to show you today. There is a lot more obviously that you can do with HTML but this was what I wanted to kind of get you started on with this nice short video. So far about 13, 14, 15 minutes, something like that. Just as a review, HTML has a bunch of tags. We need to save our file as something.html. I chose index in this case just because of the way the internet works traditionally at least. And then we have our head section which you don't really see but you can see the title appears up here. Let me pull it over a little bit. Let me see that a little better. And then we've got our body and this is where our content goes. So everything between here and between the body, opening and closing you'll see on this page. Now, again, I've got an H1 here which is big H2 which is a slightly smaller heading. I've got an unordered list. Don't forget to open it and close it. And we've got list items opened and closed and I've got some more another unordered list with list items. I've added an anchor which is also kind of referred to as a hyperlink. So again you've got anchor href equals and then the web page you're linking to. And don't forget to slash a to close that. Just for example if I forget to close that, I'm not sure let's see what happens here. Yeah, you can see how this now still links to because this never closes. So basically the entire rest of the page links to my soundcloud which is the bandsoundclouds.me slash a. I just play the base and let's get rid of that. Make sure we close it and then we can see that that has returned to its normal type. And then, yeah, we've got a meme which we put in again as a reminder. It's saved into the same folder as index.html which I mentioned earlier. And then the YouTube video you just go to YouTube copy the embed code it can be a playlist, it can be a video. Now some videos it'll say you can't watch it on your computer. You have to click on to YouTube. That's just the way the content creator prefers it which is fine with me. And then you can have your embedded video. Now I prefer to have it open and because that's just my style. Yeah, that's about it. So hopefully this video at least will get you started if you've never done any HTML before. So I'm sorry I didn't get my member shout out slide up and running but I'll try and get that for next time. It's been a long time since I did a video like this and I'm just happy to be back. So thanks to everybody that stuck by me and sent me some nice messages. I do appreciate it. Take care and as I like to say, keep on coding.