 We're gonna learn in this video how to write basic html now html is one of the things that's most I don't know. It's everywhere. It's sort of like a background Thing that you've probably picked up even if you've just been on the internet But I did a series a couple weeks ago starting about like how do you have your own website? How to start your own website, but I didn't actually do anything about writing a website. It's a very easy process now Of course, I should say we're gonna learn html in this video You can do these fancy and complicated static site generators or You know all these other ways of generating a website, but I just think the Chad way of writing a website is just opening it up and writing HTML that's what I do. So that's what we're gonna do in this video I am gonna be using Vim as my editor because people on the internet told me it's cool And usually to start a website. You're gonna start an index html file Okay, and that's because if you go to like your website.com if you go to my website, which is lukesmith.xyz It's automatically gonna seek the index file That's gonna be the main page. Now. I'm gonna do something a little irregular Usually when you hear people doing tutorials on HTML or anything else They start by telling you okay You got to put in a doc type and all this other stuff. The thing about html is that how it's rendered in browsers You basically can be a Retarded boomer and still write HTML and it will still work in most browsers. You actually don't I mean now now of course This is don't do this, but I should just say you can actually just start writing. Oh, here's our header So here is you know the UNO boomers Cabin the name of my website and Or at least the one that I was making in the last video and so this is a sentence. Okay So technically speaking in order to have a properly formatted html page you need other things like this But most browsers if I open this up in my browser, it's actually gonna render it Okay, now first off. What does html usually look like now? I should say if you've just you got a stick to learn how to add in the the other information about a file But I just want to go into what this basic stuff means So if you look here, what have I done here now this? H1 thingy is gonna render as a big header. Okay, and this p thing this actually stands for paragraph It's rendering as a paragraph. Okay So Basically, you've probably seen people use tags colloquially on the internet, you know, people are probably like, you know Sarcasm, haha, I can't spell sarcasm, but who care who cares? That of course is imitating the tags of html So basically in order to say that something is a paragraph. We open the p tag. We put some stuff in it Here is another paragraph And then once we're done, we close the p tag. Okay, so that is in general how all of html is gonna work Now there are some tags that do not need to be closed. We'll talk about those as well But just to be clear, so let's play around with this a little bit So I can of course have multiple paragraphs. Okay, and you'll see that each one of them is gonna be formatted differently Let's say I delete let's say I delete these. Okay, let's say I'm a boomer and I don't know how to write html So I I like only have half of the syntax there one thing about html is that most browsers are gonna just try and guess You know, even if you have bad syntax like this, they're just gonna try and guess what you mean there Okay So you could delete the beginning of these tags or the ends of these tags at least in the case of the paragraph tag And it will render it correctly now. That's not gonna work for everything if you like to leave the end of the header tag It's gonna be like, okay, I guess those are all headers, but anyway or heading. I should say those are technically different things So anyway that but in addition to this so we know how to write paragraphs. We know how to write headers Or headings. So here's another one another Heading now notice, of course, both of these have h1 h1 is basically the The biggest heading so if I look at this now, you have a big heading you have a big heading the one here Just to be clear it does not mean the first heading at the top It means the biggest type of heading if we put in an h2 here that is basically a subheading so sub Heading okay, so if we put in an h2, let's see what that looks like it looks like a smut It's it's a heading, but it's slightly smaller. Okay, or if we put in an h3. That's gonna be the same deal Okay, so an h3 is like a sub sub heading. Okay Changes to h3. Let's look at that. So this is even smaller and I think it goes down to like h6 or something like that Okay, so in addition, let me actually move this over here because we're writing more stuff Let's say something like text formatting. So let's format bold text or Italic Text okay, or actually we can do or underline text Okay, so in each of these cases bold is just going to be the B tag I is gonna be the I tag and U is gonna be the or underline is gonna be the you tag you see in each of these cases It's produced the text that we want. Okay, and of course you cannot like the paragraph tags. You can't mess these up It's gonna get confused if you like delete the end of this It's probably gonna bold everything for the rest of the document. Yep And notice so actually I should say so you should know that you can like put bold tags inside of italic tags to make it Like a both bold and italic or something like that now It's usually thought of as slightly better form to use these however. Okay, so for example You know here is the strong Tag strong tag and the emphatic Tag okay, so I'm gonna show you what this looks like now strong text is basically gonna look exactly like bold It bait it is predefined as being exactly bold and emphatic is gonna look exactly like italic now technically now the reason there's a difference between strong and be and infinite talic is because Basically the bowl the B and the I and the you tag. They're not supposed to change. They're always gonna be the same But it's usually thought of as better form to use the strong tag or the emphatic tag because when you go into actually Changing the style sheet of your website. It's better form to be able to modify like the strong. Let's say you instead of Wanting something emphatic to be italic you want to change it to be maybe it's underlined or green or flashing or something like that You can do that in CSS by modifying the m tag. Okay, but it's sort of bad form to modify the I tag directly Okay, that's what that's for Now before we get to that though, let's do at least one more thing one thing you do pretty common is make lists How do you make a list in html? It's not too difficult Well, we'll make an ordered list now to make an ordered list I'm gonna use the ol tag ordered list and inside of that you can have li tags That means a list item. So here is a list item Okay, and I'm gonna close that tag and in fact I'm gonna multiply that a couple times and Let's see what that is gonna look like Now we have a list and we have seven items in it notice that html has automatically numbered all of these set of seven items That is part of the ordered list Now if you just want a unordered list or a bulleted list just use you L for unordered list And if you run that if you see what that looks like, oh, it's just gonna have bullets And in each of these cases you can actually let's say I copy this lit this entire list and I'm gonna paste I'm gonna paste it inside of this list. Okay, so now we have a list inside of a list. What is that gonna look like? Okay? Well, let's get you're basically gonna have a sub list and it has a slightly different annotation here a little You know dot without stuff filled in. Okay, so that is basic html formatting This is not just the kind of stuff you use in making a website But you also might you know use a web form that requires html formatting now all of you people who are web devs are Screaming right now because I have just been writing html without having a proper header Or heading with a doc type and all that other stuff now I said html as it's rendered in browsers is usually very very forgiving But there are certain things that you always want to include in your html documents Okay, one of the most important ones at the very top and the very first line should be this it should be exclamation point Doc type and then html and that's html is going to be a lowercase doc top is going to be capital Now that is basically just telling your browser or you know other people's browser when they look at your website This is a proper html document if it does not see this your browser is basically gonna guess Exactly how to format it and it might guess wrong or it might be something weird. I think if you don't include this It's like internet explorer at least will totally break. Okay, so that's something you don't want to happen additionally you want to set a An html tag and you want to include some information about this html that you're writing Okay, so for example, you might you're probably gonna want to do this html Set lang equal to in for English So we've opened this html tag at the top and I'm gonna end it at the bottom Okay, that is good for him to have and also the body text of your document is usually put into a body tag So I'm gonna open this tag up here and I'm gonna close it at the bottom right before HTML notice that the body tag is inside of html Okay, now the reason for this now the reason you usually do this is multi-fold actually But what one of the reasons is we might want to set when we start doing styling and coloring and stuff in CSS We might want to set specific Like traits for the text that's inside of the body and things like that And that also it also helps helps with rendering across platforms and things like that now last and not least you want to have a head Okay, or you know a header in here And you basically this basically contains metadata and other information about your document Okay, first off notice in my browser that this is named index dot html Now if I were to put this up on a website, it would probably show up there as index html Or maybe depending on what kind of server you have Displaying that might do something different, but really we want to set a title for this How do you set a title? Well, you set it in the head tag you say title The unit whatever you want to name your site the unit boomers cabin. Okay Title now if I refresh this you will see. Oh now it has a proper title. Okay, that's good Another thing that you are gonna want to do I have to write this down because I always get it a little wrong Okay, is that you are going to want to set to have Unicode character proper utf-8 characters. So that is meta Car set chair set however you want to say it char set utf-8 Okay, and a slash there and that is just telling your browser. Okay. I want to use that You know if you're using a non-English Language Everything is gonna show up as a mess until you have some this thing included. So that is something you are definitely gonna want Additionally now now that we've sort of got now This is basically what you need for a bare bones I've sort of formatted this ugly because I you know we could take this and I don't know move it out a little bit So it I don't know see I'm usually not the person who even tabs in on anything usually I just keep it all to the left side, but this is basically a bare bones web page. Okay, so we have our dock type We have our header here that tells us that we're using Unicode utf-8 And tells us what the title is and then we have the the text of the actual content of our website And again, as I said like sometimes HTML is a little forgiving But don't rely on that always make sure to write, you know, good HTML code Now let's talk about how you actually change what this like the colors and stuff Let's say you want to edit edit it Let's say you want to put it maybe in the middle of the screen instead of over here on the left side or something like that Well, what we do is we create a css style sheet css Stands for cascading style sheet. So a css style sheet, I guess is a Cascading style sheet style sheet, but you know, whatever You're probably not supposed to say it that way, but who cares now the thing basically what you do is you tell your web page? Okay, I'm gonna have a style sheet. It's gonna be this separate file and I am going to use that For I'm gonna put all the information you need there. So in your head tag here We're gonna have another thing here. We're gonna say link and it's gonna say ref Or rel, excuse me style sheet Style sheet and then I want to say it's I think I wrote it down. Yeah type It's gonna be text CSS I cannot type today at all And then also you're gonna give it the file name or really href But this is the file name and I'm gonna name my file style that css you can name it theoretically anything Okay, so now what this is gonna do if you just run it and see what happens. Nothing is gonna change on your website But now what this is gonna say is this HTML document is gonna look for this file styles dot css and it is going to look for All the you know extra settings that you set there for how it's gonna look Let's go ahead and start doing some of that. I'm gonna create this new file style dot css And let's start playing with it now. Let's modify our body tag Okay, so as I said, we have a body tag that we can modify. We can put you know information Different settings in there. Let's say I like everyone else on the internet hates having a light theme Light themes are utter cringe. I want to get rid of it I want this to be dark easy on the eyes, you know If you're a neat if you're in your dark room browsing, you don't want, you know All this white background all over the place So I'm gonna say this I'm gonna say color and color usually refers to the color of the text I'm gonna say color is gonna be white and I'm gonna say the background is gonna be black Okay, these are settings built into the CSS now if I run that you'll see that oh look at that now We have a nice dark site. Okay nice and readable. You can edit other things as well Let's say I want to edit the headings. Let's say I want them to stick out a little more Okay, you can do things like this. You can say h1 And I'm gonna say the color of that is gonna be red. Okay, that'll make it stick out very I don't know very strong. Okay, so now our h1s are sticking out. Okay, or you can do something I mean, let's say we want h2s to stick out as well. We have one of those second headings We can go in here and add a little block that says h2 was gonna be red Okay. Now, of course, there's an easier way to do this Let's say both h1 and h2 are gonna have the same settings. Well, I could just get rid of this and say You know comma h2 and that is actually gonna apply to both of those, you know None of it's gonna change but it's sometimes good form to keep them separate, especially if you want to later go in and change Let's say I want h2s to be green or something like that. Okay, so you can change things like that Let's see what else. So let's say I mentioned that you could change stuff like let's change What we want emphatic text to look like because we had this little emphatic stuff here Let's say I want that to be You know font size large, this is probably gonna look really ugly, but it can be done Okay, so that's gonna get a little bigger. Actually, let's make it extra extra large xx large Okay, so that is gonna be really big now that looks ugly, but that's just something you can do with the tag Let's say, you know, maybe something more realistic as you change the color to be Yellow actually that's still gonna look ugly, but who cares where this is an example video Okay, so this adds a little a little change to your site here Additionally, let's say we have a list items here. Let's say our list items are too big That's just something I want people to go over we can change the size of list items Let's say font size small, okay So that is gonna decrease the size of these list items just if you want that, okay? And this goes for anything now. I'm not gonna show you everything you can do with CSS I just want to give you an idea with it But you can go in and start changing how things look and how they're organized, okay? Another thing you'll probably you're probably gonna want is you know on this web page at least All of our text is on the left side. That is by default how everything is going to display in html Let's say we want to change that there are a couple things you're gonna want to do We're gonna set some settings to the body tag, but There are a couple things we're gonna want to do we want to say something like this So let's say max width We want it to be 800 pixels, okay? And I'm gonna do two other things. Let's say margin left is gonna be auto and Margin right is gonna be auto, okay? Now if I look at this document, I'm gonna refresh it now that what that's gonna do is it's sort of gonna display it in the middle Now what we've told using the CSS what we have told it to do is said this, okay? The body tag let's treat it as if it is only 800 pixels wide So instead of just automatically being the whole thing. It's only gonna be 800 pixels So it's gonna be let's say the 800 pixels in here We've also told it to when you give it to the margin left margin right thing that basically or the make them automatic That basically just says Well in this case, it's just gonna say center it and it's gonna so the body is just gonna be the 800 pixels in the middle If we change this to like 600 or something like that You're gonna notice that it moves a little in now It is only the 600 pixels in the middle or something like that or let's say You know a thousand or something like that, okay? So that is sort of a way of centering things now if you just want text to be aligned or something like that well let's say 800 that'll be that'll be what we stick with. Okay. Does that look okay? Well, you can also just align text You could let's say we want our headings to be In the middle of everything. So let's say we want h1 and h2 to be centered. You can say text Align Okay Center I think that's how you do it. Okay. Let's let's look at this. So I'm gonna refresh it Refresh it. Okay. So now all of our headings are in the middle This actually looks a little ugly and the reason it does is we don't have text that like goes through the entire Like normally paragraph text would be taken up like all this space over to this side So it would look sort of nice but since we're not writing that much at all looks sort of ugly But that's how you center text and things like that So HTML and CSS hopefully this is giving you sort of a view of how to do basic things in them But I want to talk about two more things that I think are pretty essential Now I will say this of course is not has not been exhaustive. You're gonna have to Learn some of this stuff on yours by yourself, but two more things. I think are important One is making links to other pages and the other is adding images. So let's do those really briefly Let's say I'm gonna make another I'm gonna make another page. I'm gonna call it another dot HTML. Okay, so here's a new blank HTML document I'm actually gonna go ahead and copy in most of this stuff that is required Okay, so we got our HTML Tag we got our Header up here. I'm gonna change this title to another page And we have our body tag and I'm gonna go ahead and write something in here You know here is another page Okay So in a paragraph here is some cool content exclamation point and Let's open this in a browser and we'll see that okay now we have another page So how do we link this page to our original page? Very very easy to do one or vice versa. It doesn't matter Let's say up here. I want to on our original page I'll say Check out this other page Okay, and let's say I want this to be the link so what you do is you use the a tag and What you do that is gonna look something like this okay, and a is basically for hyperlink and You give it the href option and the href is just gonna be what do you want this to link to? I want it to link to the page another dot HTML. It's in the same directory It's gonna be on the same directory in that website as this page So whenever we click on let's well, let's actually see how it looks You know so it's gonna show up with a little link here Look excuse me link here And if I click on that just to verify I'm gonna close this out But just to click on this it is gonna go to this other page excellent. Okay in addition If I go to that other page I can add a link back to the index. So let's say Href Index dot HTML remember that's the name of our main page and I'm gonna say return to the home page Okay, close Those tags there that paragraph tag and the a tag so it's gonna say return to home page I really need to change the CSS because it's hard to read here, but that is gonna return us to where we belong Okay, so that is how to do links now if you want to link to a website Let's say I want to link to I mean another website not just like a page that you've created Well, then you just put the URL here. Let's say I want to link to my website HTTPS colon slash slash Luke Smith dot XYZ you got to include HTTPS stuff like that if you're doing a foreign website So now there's this link and I can click on it and it is gonna take me to my website Okay, so there's my website another web page on the internet Which is lowing it loading slow because I'm out in the middle of nowhere and I have bad internet I need to get rid of all this all these pictures. I need to slim down my website I need it to look I need it to look more like this. Okay So that is how you add links and I mentioned adding images. Let's add images. I've actually in this directory I have included a little image cabin dot gif. It's actually a gif file as you can guess So you can of course had have moving gifs It's to include an image. You're gonna do this Obviously, it's the image tag. You don't need to close this tag You just say image source and then name the file cabin dot gif It needs to be in the same directory or if it's in another directory. Let's say it's in your pics directory Inside this website. It's gonna be like that but cabin That is just going to make the the image appear and it's a gif. It's moving around. Okay, great So working is according to plan. It's also a good habit to add in some other information. Let's say Alt which is gonna be let's say the image can't display It's gonna display this alternative text. So we'll just say this is cabin or something like that and you can also do title and You know, this is a Cabin, okay, so that is gonna do if I refresh this page if I mouse over it It's gonna say this is a cabin. Okay, that's how you do that. All right So I've done basically what I consider all the basics of HTML So again, remember to have all your bait your dock type all this kind of stuff up here Hopefully that is made I have made sense of how to do basic formatting linking images some CSS The world of CSS is very big. I encourage you to check it out yourself I cannot teach you all of it, but I might do another video maybe on divs and other things like that You know how to do more special stuff, but this will give you at least what you need to make a nice 1990s a boomer website like this. This looks so nice. I don't know. I wish the internet looked like this But you can do your part by having a simple HTML website Okay, so that's it. See you guys next time