Transcripts
1. HTML Everyone Promo Intro: All right. Welcome to the course. My name is John Elder from Cody me dot com and I'll be your instructor today and this course I'll teach you html coding from the ground up. When you're finished, you'll be able to read, write and understand. HTML. The fundamental building block of every single website on the Internet in the first half of the course will learn. HTML. I'll teach you the HTML syntax and all the major element tags in their attributes in the second half of the course will learn to use the bootstrap CSS framework to style or Web pages and make them look amazing. So if you've always wanted to build websites, this is the course for you. If you have little or no coding experience, this is the course for you. And if you don't want to spend a whole lot of time learning but really want to understand how this all works, this is definitely the course for you. My name is John Elder. I have 35 courses here, you, to me over 42,000 students and overwhelmingly positive reviews. But if you aren't satisfied for any reason whatsoever, I offer 30 day money back guarantee, no questions asked. And unlike many instructors here, I'm here answering questions all day, every day. So if there's something you just don't quite understand, or if you have a question of some sort, shoot it on over. I'm happy to help in any way that I can. HMO's one. The most important parts of Web development and learning is never minis year. Sign up now let's code some html.
2. HTML Everyone 1 Intro and Sublime: All right. Welcome to the course. My name is John Elder from Cody me dot com And I'll be your instructor today. This video I want to spend just a couple of quick minutes talking about all the tools that we're gonna need for this course. Now. Luckily, HTML requires absolutely no special tools. You know, with most programming languages. Ruby, you have to download and install Ruby. I thought you have to download install Python database stuff. My sequel. You have to download Install my sequel, Django. Same thing, node. Same thing. Each demos totally different. It is built in baked into every single Web browser in existence. So doesn't matter if you're using chrome Firefox safari opera, anything at all. HTML is already in there. It's already ready to work. There's nothing you need to do. So in order to write H demo quote code, all you need is some sort of text editor, some sort of no pads, something to write on. And it doesn't even have to be a special text editor, though it should be, uh, you know, you can use windows No pad, which is sort of ridiculous. But you could if you wanted to. So in this video, I'm gonna recommend the text editor that I'm going to use throughout this course. It's the sublime text editor. So if you go to sublime tex dot com, you see, it's sort of a picture of it here. And this is nice because it's a coating. Text editor Doesn't matter what programming language you're using. It'll sort of you see here change color based on the different code that you write, and that's really nice and sort of useful in order to keep your code more readable and stuff like that. So go ahead and download this. It's available for Windows. Mac Lennix doesn't matter what operating system you're running. It's completely free, Um, but if you don't like sublime text for whatever reason, and it's one of the most popular ones. But another alternative is no pad plus plus in Google. That, and you'll notice the big difference is this is sort of a white background where sublime was black and you could change the color of both of these. But by default, sublime comes black. No pad plus plus comes white. I'll see Adam is another popular text editor. Vim have a little bit more complicated. There's a visual studio code editor if your Microsoft person, I'm not sure if it's free or not. But like I said, I'm going to use sublime text for this course. In fact, I could pull it up right here, and this is It's just a basic text editor. You can write stuff and you could see already it's starting to change colors, which is cool. One of the nice things about this is if you go to view and then syntax, you can see you can use this for any programming language you like. Right now we've got HTML selected. I didn't even need to do that. It just sort of guessed that I was doing HTML. So that's cool. I see rails, python, PHP, pearl have a script, whatever you like. You can do in sublime text. So definitely check that out. You're gonna need to use some text editor. Might as well use this one sorted to follow along with me. And so it's just easier to follow. So I think that's all for this video. In the next video, we're gonna jump right in and start learning html
3. HTML Everyone 2 What Is HTML: OK in this video. We're gonna talk a little bit about HTML before we jump right in and actually start writing any of it. And I want to talk about it because sort of important to understand exactly what it is. HTML stands for a hypertext markup language, and most people think of it as a programming language, a computer programming language. But technically, it's not. It's not really like PHP or Pearl or Ruby or Python or Java script. It's not a programming language, but it acts a lot like a programming language. So we tend to just sort of be like, OK, yeah, it's a programming language, but technically it's not. It's a mark of language, and and, ah, that difference is important. Basically, HTML is just a series of tags, opening tags and closing tags. And then whatever's in between, the tag that gets marked up gets something gets done to it. You know, if you want to make something ah, title, you can see right here we have a title tag on open tag and a closed tag closes designated by a little slash and then inside of here, that's what is your title, you know, If you want to do a heading, we do this. H one tag. Anything inside of this tag is the heading. So that's all HTML really is. It's just a series of nested tags opening and closing tax. Now, not all HTML tags close, and we'll talk about that in a little bit. But for the most part, they all open and close, and that's all it is. So learning HTML is really just a matter of memorizing all of the tags and then just using them. Whenever you want to do something to something, you wanna make text big, you put it in a big text tag. You know, we'll talk about all the different tags going forward. I don't wanna really sort of get into any of that just yet, but HTML powers absolutely every single website. There is not a website that exists. It isn't made out of HTML. All Web pages are made out of HTML. So you go to any website you want and just right click and click this view page source, and you can see the actual HTML for that page. All of its just ready to view it's not hidden is not secret. You know, it's not proprietary where they don't want you to see it. It's very obvious. And it's just right there now, all right, off the bat, especially before you've taken this course. This isn't any of it gonna really make any sense. But as we go forward, you'll start to understand All these different tags are how they're used and, ah, it's actually very, very easy and you should pick it up very quickly. Like I said, it's just a matter of memorizing all the tags. And there's not that many tags, so we can knock it out fairly quickly. Now there's basically two parts to a website. There's the HTML. And then there's the CSS, and the CSS is what makes things pretty right. CSS stands for cascading style sheets, so it has style. HTML is like the framework, the bare bones, you know, the skeleton of the Web page, and then CSS makes it like I said, Makes it pretty. Adds color, adds form, things like that. So excuse me, This is not a course in CSS. Well, sort of touch on it here and there, because you really can't do h demo without CSS. Really? but just in learning HTML, you don't need to even look at it. It CSS. So we're not going to spend much time, if any, talking about CSS. A lot of times people don't learn CSS. They just use the CSS framework like Bootstrap. And later on, we'll probably look at bootstrap very quickly and show you how to do that. So that's kind of that's kind of fun. And we'll look at that towards the end of the course so very quickly before you move on. You know, I mentioned HTML is just a matter of opening and closing tags, right? Each tag is called an element in HTML Element and each element can have attributes, attributes, air just basically mawr information in the side of the tag, and we don't really have any attributes here yet. So we look at these, you know, a couple of videos from now, once we really dive in and start to learn this stuff. But that's pretty much it, um, elements and attributes right, a tag and have many attributes. There's several sort of common ones that you see often. We'll talk about that, and the only other thing really is just tags open and close, and they close with this little forward slash You could see, like, right here And right here, here and right here. Uh, right here and right here. You can see here is a tag, and it has a tag inside of it. I mentioned earlier that html is nested. This is a tag nested inside of a tag which is itself is nested inside of this tag, and you can see we usually in Dent to show that nesting now, html is not really case sensitive. So I mean, you can you could do it like this, right? Oops. HTML does not know the difference. This is just a valid is what we had before. But this this way is just a lot easier to read for stupid humans. Right? So this is the convention that we usually use. So and that's all for this video. In the next video, we're gonna jump right in and start learning the different tags and should be fun
4. HTML Everyone 3 HTML Page Structure: OK in this video. I want to talk about the structure of an HTML page, and we've already kind of looked at this, but I want to talk about it in a little bit more detail. But before we do that, I want to talk about how to view this thing. So we've got some stuff here and we'll talk about what all this is in a minute. But in order to sort of utilize this to save it and view it in a Web browser, we come up here to file and then save as and I'm just saving this on my desktop, you could save it absolutely anywhere. We're not gonna push this code up to a Web server at all. In this course. We're just gonna learn HTML and we're gonna do everything locally on our computer. So save this wherever you want, But like I said, I'm going to save it on the desktop and just save it as page dot html and you could see I don't have to do that because, ah, html is already selected. Just see like that, and all HTML pages end in dot html. It's just the convention, so that's what designates them as HTML pages so we can minimize this here. And then you could see right here it is paged at HTML little chrome icon right on my desktop. And to view this in a Web browser. I just dragged this over and do this and click, enter and boom here it ISS so you could also just type in file. See users flatlining desktop page HTML. This flat planet is the name of my computer, so years will be different. I don't think the world was flat. I just think it's funny that some people still do that. So that's why I named my computer. I have a weird sense of humor, so ah, anyway, so he received. This is a heading, and this is a paragraph which corresponds to this stuff right here, and we'll talk about this in more detail in just a second. So that's how to save an HTML page. How to view the view it in a Web browser I'm using. Chrome doesn't matter what Web browser you use. Firefox Safari, any Web browser at all. It's all the same. So for the rest of this video, I want to talk about the structure of a web page, and all Web pages have this same structure. They start with the DOC type and this just tells the file, Hey, this is HTML And in fact, you can get rid of this file of this line. You don't have to do it, but if you want sort of standard code, you should put that in there. Next, we have an HTML tag, and all Web pages are basically HTML tags, and you see everything else is nested within this HTML tag. In fact, if I click on it, you can see this closing HTML tag highlights down here. So everything inside of here is age demo. Next, we have this head tag and the head tag is not visible on a web page. It contains information. Um, if you know s CEO, sometimes you'll put s CEO tags in their meta tags. You could put like, open graph social media tags and things like that. They don't show up on the page, but they're used for things like Oh, Google. In order to excuse me categorizing you list your site on Google. They're used for certain social media sites. You know, if you post a link on Facebook and the little picture automatically pops up. You can designate that inside your head tag and, like said, it doesn't show up on your page, but it's used for other things. The main thing inside of a head tag is this title tag, and you can see here it says my Web page. If we go back over to our site, that's right up here. The top here. You see this, the browser bar. It says my Web page up here. That's the site title. And, um, that's important for ah, specifically for surgeons like Google and Bing will use that sort of list on their search engine what the title of your site is, and that's really the only used for this. Also, it shows up right here on this bar. But if you're like me, I usually have 1000 tabs open and you can't even hardly read it When there's so many tabs open. I think a lot of people do that, so it's not a super, you know, important thing, but you should still do it. So then we close the head tag and then the body tag starts, and this is probably the most important thing, everything inside the body tag and you could see here's where it closes. Everything inside of here shows up on the page, right? So in our case, we have two things. We have this H one tag in this P tag and H one stands for heading, and we'll talk about more headings more, probably in the next video or the one after that. And this is a paragraph tab, and this just designates text as a paragraph, and we'll talk about that more later, too. But you can see it just corresponds to these two things on the screen. This is a heading. This is a paragraph Very cool, Very easy. Um, and that's really all there is to it. So, like I said, all Web pages follow this basic format. Now, inside this body tag, you could have 50 lines of code 100 lines of code, 2000 lines of code, but it's all inside this body to and then finally, at the end, we just close up our HTML tags. So head back over to any sort of website that you like and view the page source and you'll see around at the top. We have the doc type. Here's the head. Here's one of those meta tags I talked about. Ah, here's some other tags I didn't talk about. These are CSS things. We'll talk about those later. Something right here. This is the CSS link. That's where CSS goes. We'll talk about that later. Like I said, um, all kinds of social media things and see the body. Here's finally the head tag ends. So inside your head tag, you can have a lot of stuff and most websites do, and we'll see this going forward. But here's where the body tag starts. So here is all the body stuff for this Web page, and it just keeps going and going. And you could see we haven't even gone halfway down the page and then down to the bottom. The body tag closes in the HTML tag closes. So that's the basic format of ah in HTML Web page. And like I said, all Web pages follow this format. This is very standard and a pretty simple. So, you know, we'll use this sort of template as a starter template almost always and so that's cool. So that's all for this video. In the next video, we're gonna jump in and start learning individual HTML elements
5. HTML Everyone 4 Header Tags: Okay, so we've got the basics out of the way. Now it's just a matter of learning all these tags. So we're gonna start. We've already got a couple of on the screen, so let's just start with this first H one tag. Like I said earlier, this stands for a header one. And it's sort of a very common thing, especially for, you know, like websites that are blog's. They always have a title of the top or news websites with a you know, a story that has a title of top. You'll often use this H one and header tags are important because they make text standardized big, but also because search engines like Google a sign importance to an H one tag. You know, Google knows that if you put something in an H one tag, you're saying, Hey, this is important. This is a headline, you know, it's header number one, the most important header, and it it sort of uses that in order to categorize websites. So also it's just cool visually, so there are many header tags of six, actually, if you could call that header or call that many, but let's just go through there. These are all numbered, right? So let's just go. This is head or two and just copy this. So if you save this and I'm gonna hit control ass on my keyboard to save its command s I believe you're on a Mac or you can go up here and just click file save every time. So if I come back here, we see this is header to and you'll notice it's slightly smaller. Right? And that's the main designation here that each one is the biggest one. H two is slightly smaller, H three, slightly smaller all the way down to H six. So let's just really quickly come through here and go H three, this is header three on each four. This is header for and h five. This is header or five. He knows I'm opening and closing each one. H six, this is header six. And the nice thing is about sublime. I just put the bracket in the Ford Slash and it automatically auto Kerekes to the closing tag. It doesn't always do it correctly. You have to pay attention, but normally it it knows which one you're trying to close, so and save this head back over to our page and click Reload and you could see above above all the way down to header six. Now, what happens if we try and do an H seven? This is header seven. Save this. Come back. We just get normal text, right? This is very much like this text right here, because there isn't an h seven tag, so nothing really happens. In most computer programming languages. If you do something wrong, you get a big angry error on the screen or the program just doesn't work at all. HTML is very forgiving. You know, we just invented a tag just now h seven. It doesn't exist. And instead of getting a big, angry error, it just said, uh, it just kind of ignored it and spit out standard text instead. So HTML like I said, very forgiving. And, ah, one of the reasons why it's so easy to work with. Especially for beginners. You can make lots of mistakes and a lot of times get away with it. So those air the age tags and come back here real quick and just sort of say, a couple of things here In reality, you'll hardly ever use most of these tags. You'll use H one always you'll use age to sometimes for, like, subheadings. You know, um, I can imagine a scenario where you would use an H three tag, but each four age 586 I've been doing this 25 years. I don't think I've ever used those tags. Um, it's good to know that they exist, but excuse me, you're just not often going to use them. So that's all for this video. In the next video, we'll look at the paragraph tag.
6. HTML Everyone 5 Paragraph and Line Break: OK in this video, I want to talk about the paragraph tag or P tag. And the P tag has an opening tag and a closing tag. And inside here is just text. Now, you can put stuff on the screen by itself without a P tag, but you don't want to. You're gonna always want toe sort of wrapped blocks of text in P tags. It really helps keep things organized and together, and we'll see why here in just a second. But first back over to our page here, and I just went over to this website lips some dot com and this generates dummy text. So we need to generate some text here. So I want a paragraph like that. And so I'm just gonna lives. Highlight all this and copy Control seed a copy, or you can right click and select Copy. And this is just some dummy fund tex that we can play around with while we're learning. So instead of this, I'm gonna control V to paste, or you can right click and click paste, and I'm just gonna paste in all of this text. Right? So if we save this head back over to our page and click Reload. It's asking if we wanted trans translate. No. So we have all this dummy text and it stretches all the way to the from end to end of our page. Now, with CSS, we could style this and we could say, OK, put this in a block. That's only, you know this wide or whatever. We're not gonna look at that now, but just notice how this all goes together and it's maybe not obvious. But if I come down here and just paste this stuff without a P tag and save this, see what this looks like? It basically looks this year, But let's take the P tags offer here and see the difference. Okay, so here we just have to these paragraphs without P tags. And if we load this again now, it's all smushed together, you see? And we don't want that because here we clearly have two paragraphs. We want them to be separate. So we want to wrap them always in he tags I'm inventing. And if I was really, really serious, I would probably of see in Dent No, no, come back. It's not letting me in debt for some reason. Anyway, There we go. Yeah. Indented to make it a little bit easier to read. Um, you could do that. So and come back here and reload. And now hello. This translation. Now, we have two paragraphs again. So very important to separate different blocks of text. And this is important because html doesn't really understand formatting. Right? So we could go Hello on their own. Different line there. My name is John Elder, right. So this stuff is all over the place. Our text editor. If we save this and come back here and hit reload, it puts it all in one line. HTML does that. Now. They're tags that we can override that, and we'll talk about that shortly. But by default, even if you wrap these things in a p tag and save this, it doesn't change. It still puts everything on one line s so keep that in mind when you're writing html code and get rid of this well, we'll save this for later. Um, the piece of most popular way to break up stuff. But you don't always want to do that. We'll talk about that a little bit later. But otherwise shake this very quickly. So if we say this, we know what's gonna happen. Is gonna smush these two together and we don't want that. So one thing we can do is use a line break and the line break is just be are like this now line breaks from one of those tags that don't have an opening and a closing tag. Like I said, most tags have opening and closing, but there are a handful that are just one tag and this is one of them, and it's designated by this forward slash inside the opening tag. So this is basically ah Kong Canton ation of the opening and the closing tag into one tag by sort of doing this shorthand with the forward slash right in there. You know, when you have a normal open tag and a closed tag, you close it with this forward slash. That's what we're sort of doing here anyway, though a line break just does what it says. It makes a line break. So here you can sort of tell because it's not all one paragraph, so this is the 1st 1 and this is the 2nd 1 It's taken it was the 2nd 1 did start right here , but it's come down now into this next line. That's what the line break tag does, and you can use more than one right we can do to if we want to sort of but a little space in between now. This works and it looks very similar to the P tag, but it's sort of best practices not to do it like this, but instead wrap everything in a P tag. So just sort of keep that in mind. So that's paragraph that's, uh, line break in the next video. I think we'll look at the pre tag.
7. HTML Everyone 6 Pre Tag: OK in this video, I want to talk about the pre tag. And in the last video, we head all this gobbledygook down here, and we sort of formatted it here. But that formatting didn't translate onto the page. It put everything on one line. Now, Like I said, we can override that. And we can do that with the pre tag. So to do that. First of all, let's just get rid of all of this goofy text here. And instead of wrapping this in a p tag, we want to lap wrap it in a pre tag, all right? And the pre tag has an open and close, so we close it like that, and there we go. So, inside the pre tag, it maintains all of this formatting as best as it can. So now if we come back here, we see this. Hello there. My name is John Elder, and it's sort of in the same general, wacky format that we put in the text editor. Now, you're not often going to do something like this because it's kind of weird, but there are uses for the pre tag, right? Um, offhand, I can think of one poetry, for instance. If you want to put a poem on your website and you know each line you wanted on a separate line, so you know we could go. We are the music makers. We are the dreamers of dreams. Silly poem, I know, wondering by alone see breakers and sitting by desolate, baseball desolate eso. Let's maybe sees. Okay, so if we save this and come back here, whom we get everything, each line is on its own line and you notice the text is a little bit different, right? It's, you know, slightly smaller. And that's sort of what the pre tag does Now. We could likewise just take all of this, hobby it and paste it again. But instead of the pre tag, we could use the P tag. If we save this, I think we know what's gonna happen. It's all gonna be on one line. That's no good. But you could, you know, do something like, um, slap a line break on each at the end of each line, right? That'll put each line on its own line. And that sort of works. But notice the difference in the tax. This is sort of normal text. Um, and this is, you know, slightly smaller, weird or looking text. Now you can override that. This weird text size with CSS. Like said, we're not gonna get into CSS and its course much at all. But that's how you would do that. So that's the pre tag. Um, pretty simple. Not a very common tag. You're not gonna use it all that often, but it's It does have his uses from time to time. So in the next video, we're gonna look at the quotation tag.
8. HTML Everyone 7 BlockQuote: Okay. This video I want to talk about quotations and quotations were very common, especially for, like, news websites and articles and block posts. You often quote things. You want those quotes to be around your quotation. And you could do that with something called the block Quote tag. And let's go block quote. Perhaps we do not want to end it. There you go. Um, okay. So I like other quotes. It has an open and close tags. So let's save this and take a look and see what it looks like here and again. It goes all on one screen. They're all on one, uh, line here. We don't want that so we can nest inside of a block. Quote our preach ag. All right, and not type. Now, when you nest, you want to close the nearest thing. So, you know, we opened it and closed it. You don't really want to do something like this, right? Right. This is wrong. Or even this is wrong, right? It probably will still work back. There we go. But you want to close the closest thing. So, uh, the end of this the closest tag is the pretax. We close it. The next closest is the block quote. So we close that. So if you say this and head back here, boom, we get the same thing. Now there aren't any quotation marks, actual quotation marks around this thing. But that's just because we haven't designated quotation marks in the CSS. And you would do that? I said it began. This is not a course in CSS, so we're not gonna talk about that. So that's the block quote. Now, there are other ways to quote things. Um, we could go. The motto of Kuta me dot com is. And if you have just a small quote, you can use this. Just the cue tag. Um, learn to code at kota me dot com. All right. So you could do something like this. And the quotation marks actually do show up for this smaller one. So that's kind of cool, and you'll notice it puts it all on one line, which is what we want in this particular instance, Um, so those recordation marks those air quotes, I should say, and black black quote and the small que or what? You want to look at their 01 thing I might mention you can put a citation in here. This is an attribute, right? We talk about attributes very briefly earlier on inside oven, html out element. You can have attributes. And one of the attributes is the citation attributes. So, you know, we could do something like Arthur. Oh, Sean in the sea on I spell that, but some like that or often you'll see, um, like, down here, we could go. Site equals equals, um, http or forward Kotomi dot com. Right. So we save this, come back here and hit. Reload. Oftentimes with attributes, you can't actually see them. You There's nothing. You know, even if we hover are mouse over here. Little Citation box doesn't pop up or anything, but this is good for, like, search engines. If Google scans this thing when Google scans a website, they look at the page source and they take all that information. And, uh, so they might do a little something with it. If you want to put Citation, um, that's just sort of how that works. So in the next video, we'll start to look at links
9. HTML Everyone 8 Links: OK in this video. I want to talk about links. And links are an important part of any website. If we head back over here, and let's just go back to, say Kotomi dot com links are like these things up here, right? You click on a link, goes to another page, or it goes to some external website, those air links and, you know, links are everywhere in html. Uh, just, you know, as common as you can get our page back here. All right, So how do we do? These links are super super easy. We just used the A tag and links the A tag has a closing tag forward slash a Now, inside here, we need an attribute. And the link attributes is h r e f don't really know why that is no h r e f stands for ref . Um, yeah, I have no idea what that stands for, but inside here, you put wherever you want this thing to point. So if you want a pointed to an external website, we could go http or colon for slash ford slash um Kotomi dot com, for instance. Now, inside, here is where your link text goes, so we could just type kodori dot com or just coated me. Right? So this is what's going to show up on the web page. So if you save this, come back here and hit reload, we see coated me. If we click on it, it goes to Kotomi. Very cool. Now, you could also do internal links if you have your own website. So, for instance, we have We're on page dot html. We could have, you know, page two dot HTM. Oh, that's perfectly fine to in our case, we don't have a page two, so if we click on this, we get a file not found. But if we had a page to it, would goto page do right? So very cool? Um, there are other attributes or for links. Um, you could put in fact, let's take this back they go. Another attribute is target. And let's try new. I think that's what it is. It's been a while since I've done a Yeah. See, a new a new tab pops up, right? So if you want your link to open in a new to Web browser tab, you just use that attributes which is target equals new. Pretty cool. Now inside a Here we have text, but you can also obviously linked to images. Let's get rid of this target. Save this. Come back and hit. Reload. Go to this website, for instance. Up here. Right. This is a logo. If I click on it, it goes to the website. Um, this image right here. If I click on this, it goes to this web page. So we haven't talked about images yet. We'll talk about those in the next video, but same thing. You just put your image tag right here. Rapid in an A tag and it becomes link Herbal. It comes clickable. Basically. So that's all there is to links. Very simple. Remember the A tag H R E f is the link attributes. Nobody remembers what h r e f stands for, but that's how you do a link. In the next video, we'll look at images
10. HTML Everyone 9 images: OK in this video, I want to talk about images and images or super simple. We just use an image tag and the image tag is I I am G S R C. Now image tags are another one of those tags that don't have a closing tag. And usually when that happens, we do this. We don't have to do that. You can. That's valid, html if you want, but you don't have to. So the HTML element is I m G. This is the image tag. Inside of that. We have an attribute called SRC and SST. SRC stands for source. So you wanna point this too, Whatever source your images. So I have this picture of my dog Aspen right here on my desktop. And since it's in the same directory, we can just type in the name of it. It's a PNG file, and that's it. Um, if we had this in a special directory called Images, you know, we could do something like that, right? If this is sitting on 1/3 party websites somewhere like a cdn of some sort content delivery management A to B s aims, I need a B s or Cloudflare or something like that, You could go, you know, Kotomi dot com slash images slash aspen dot PNG. All right, so But like I said, we're doing this locally on our computer, and that file is just sitting on my desktop so we could just save this and come back to our page and click, Reload and boom. Here is the image. Now, this is a gigantic image, right? So it doesn't It's kind or even hard to see it even if we scroll. This is aspirin. She is a baby. Husky, baby, She's, I don't know, 18 18 months old. Maybe in this picture, something like that. She's a hurricane, so Okay, this is cool, but this is kind of useless, right? This is gigantic. Now, normally, you could edit the image and some sort of, you know, photo shop or gimp or something like that and make it smaller. Or you could use another attribute, which is the height in the with. So we go height equals and with equals. And we could just, you know, make something up so we could go, um, 500 by, um, 700. I don't know. See how this looks save this, and that looks a little bit better, but obviously it shows up on the screen. But the aspect ratio might not be correct for this image, so we might get distortions. And what I what I mean by that is, for instance, instead of 700 What if I picked ah 900? Well, it did it automatically. For us. It's overriding it. But one way to to make sure you get the correct aspect ratio every time is to just use one of these. So if we just use with of 900 this will keep the original aspect ratio of the image intact . If you don't know what aspect issues are, that's the actual dimension. The thing is originally it will keep those intact and make it look good. So that's cool. One more thing about images. There's another attribute, and that is the all text A L T. And this is just Well, let's just play around with this. Let's go. Uh, say hello to Aspen. Save this back here and hit reload. And like most you know, attributes, nothing really is visible out. All tag actually does not show up in any way shape or form. But this is good for search engine search engine, especially Google. Love out all tags. If you want a little thing to pop up, you can use the title tag. Save this and hit. Reload. Now, if we hover over there, we get a little box that pops up that says, Say hello to Aspen. So that's kind of cool. So those are images? Um, Like I said earlier, we can make this into a link so we could go a horrific equals. Http. Kotomi dot com and then something like this, right. If we say this back here in hit reload No, you see, we click on it. Movement goes to Kotomi dot com. So it's just that easy to make links out of images or to make images link herbal. If you want to say it like that, um, pretty cool. So those air images, those air linking images. In the next video, we'll start to look at tables
11. HTML Everyone 10 Lists: OK in this video. I want to talk about lists Now. We're gonna talk about tables in this video, but I think I'm gonna save that for the next. Video is a little bit more advanced, and before we do that, I want to slide and list. So lists are super important, much more important than you would think. And basically, what is a list list is just a bulleted list, right? So there's mainly two types of list. There's ordered lists and a new ordered lists, and an A Norden list is just like a dot next to each item. It's just bullet dots there, unordinary. Just a list. An ordered list is, you know, like 12345 They're in order. So how do we make these things? Well, let's just jump in here and let's create, um, my unordinary list and let's put we don't have to put anything here, so to create a list, we just start out with you. L and that stands for Anno ordered list, and we can close it with the closing tag now, inside here, each list item is an L. I tag right l I and basically every line you want becomes an ally object. So I'm just gonna copy this. And 2345 So this is, um, uh, tasks for today. So let's we need to walk the dog, wash the motorcycle. It's very, very dirty at the moment. You live in the desert dust, always. Let's see. Read a book, see what else we need to do the laundry and then buy groceries. Okay, so if we save this head back over here and click reload, we get this nice little on ordered list and you notice there's little bullet points next, each one very cool and very useful. Now you think so What? Well, in each demo, you'll use bullets for a lot of different things. And that's because when you add CSS two lists, you can do all kinds of weird things. A lot of times when you see like a knave bar at the top of ah website, you know, like, um, go back my website, this knave bar of the top of here. I don't remember, but I believe this is created with a new order list and then with CSS. We just told the browser to ignore the little dot You can make it invisible type of thing, a set of very common for things like that and just a bunch of other things. As you start to become more advanced with Web development, you just you will use lists. Ah, lot, it's It's weird because you know who uses lists, but, um, it is true. And like I said, with CSS weaken style, these dots, we could make the dots disappear completely. We can change them too. Little diamonds. We can change them to anything we want. Really? And ah, that's pretty cool. So those are a Norden lists. Let's make an ordered list. So my ordered list. And to do that, we just changed us from a U L to an ol o stands for ordered list, right? Super simple. So we save this, come back here and click Reload when we see 12345 and you'll notice that the browser put these numbers in itself, right? We did not have to, you know, put a one next. Each 123 etcetera. Um, it did it all for us. And you'll also notice, uh, there's, you know, this a little bit of formatting here. Right. Here's where our text is Here. All this stuff has sort of been indented a little bit. And that's what in or a list order Doran ordered will do. So it's pretty cool now. Like I said, you can change all kinds of things about these with CSS. Uh, we're not gonna get into that, But you can sort of do a shortcut around here by using the type attributes. So if we go on ordered list, um, type equals a capital. A suit that looks like boom. Now it turns from 12345 I went to a B C d e. Right. So that's kind of interesting if we go lower case A, we get lower case letters that's gonna go. Um, we can go. Let's see. Here you go. Type one. They would get back to numbers. That's sort of the default. Um, we can dio This is a fun one. Weaken do capital. I you get Roman numerals. Remember? Roman numerals from grade school? I, I v and V um Likewise Weaken Do lower case. I see this back here and hit Reload. We get lower case Roman numerals. Very cool. Now we can also do nesting of these things. So let's get rid of this and let's changes back to an unaltered list. And so we save this real quick and just look at it, get our regular honored list. But let's say we want to add a little something. So let's create another list inside of here for buy groceries. And just to show you sort of how this looks, I'm gonna copy this whole line and put it sort of up here. So it's inside of our list. And so to do that, we just like this and inside of this l I weaken, just create a whole other lists. Let's create an ordered list. And then inside of that, we want, um, hamburger. We want, um, cheese. We want ah, buns. And we want I don't know, orange Use weird orange juice with hamburgers and then we can close this. So you see, this is nested inside of this a Norden list. So what does this look like? Moon, We just get 1234 inside of here inside. You know, in this list item so very, very cool and ah, super useful. So I think that's all for lists. In the next video, we'll start to look at tables
12. HTML Everyone 11 Tables: OK in this video, I want to talk about tables and tables are sort of a more advanced HTML topic. But there's something you're gonna use, probably forever. Um, they're just sort of always used in HTM. Oh, and here I've created a very basic table. Right. So we have a table is basically just rows and columns. So this is a row. This is our lips. This is a row. This is a row, You know the rose go left to right. Columns go up and down. So favorite color. This is a column email address. This is a column name. This is a column. So when you're thinking of tables, basically you're just thinking of rows and columns. So how do we build this thing? Well, it's not that difficult. A little bit tricky, but not too bad a table starts out. I've already written the code, so we'll just sort of walk through this. Now A table starts out with a table tag and you can see the table tag closes. And inside of here, I've given it a style with a with of 50%. Now, technically, this is probably a CSS type thing. CSS is cascading style sheets. I've referenced it several times throughout this course, Um but for this case, I just had a little a little bit of CSS. We'll talk about this. Probably the next couple of videos, but I've given it a with of 50%. So if we come back here, you can see it goes about halfway across the screen here. That's 50%. If I left that off, it would stretch all the way across the screen. And I don't have that much data here, that many columns, so that would look kind of weird. So next, Like I said, tables have rows and columns. And to create a row, use a table row tag, a TR tag right here to create a column you create you, ah, created T D tag, which stands for table data. Now, Tedy Tag goes inside of a TR tag, and we'll talk about this in just a second. So let's just walk through here. Let's look at this first bit right here. I've created a row table row and I have set a line left. Um, if we take this off and save it and hit reload, you could see all these headers get bopped over, so I want them to line up left. So I just gave it in the line left and you can do a line left. You can do a line, right? You could do a line center. I think those are pretty much it. So save that. Now we this we have these th tags open and close. And what are these? Well, th stands for table head and that's just what it sounds. It's It's this sort of head or a row. You could see the colors bold, slightly different, and basically, this just sort of names, the different columns. You don't have to have this. You could leave this off. In fact, if we do that, we take out this whole TR section and save it. This is still completely valid. We just don't have the nice little table headings to explain what this data is so important to use your th tags. And like I said, you every row is inside a TR tag. Every all the data of a row goes inside a tr tag. So of the opening TR and the closing tr everything in here is a column. So we have three columns. So then we close this. Now if we want another row underneath that, we create another TR tag and you can see open and close. And inside of this tag we want. We need three columns because we have three table header columns, right? So each of these corresponds to a th so the 1st 1 is the 1st 1 here. Name. The 2nd 1 is the 2nd 1 here email address, and the 3rd 1 is the 3rd 1 So they have to match up, right? If we, for instance, created another TD tag and just type something and save this, you can see everything is thrown out of whack, right? Cause there isn't an extra column here, and that just looks weird. Everything gets scrunched together. It's just it's just weird. So you gotta make sure that in every single t are you create has the same number of TD's and there are some, um, exceptions to that and we'll talk about that. Maybe the next video, I think. But for the most part, keep them all consistent. So save this So we have this TR tags the table row inside, we have TV s T D stands for table data are basically columns. And so we have one road, John John's email address and John's Forever color. If we want another row underneath that, we have to just create a whole nother er and fill it with same data. Same thing if we want another row after that. So we have three rows here and then it ends. Then we have our closing table tag and taking a look at this again whom we just have just that. So that's really all there is to tables. Um, now, this is a very basic table. It's very simple looking. There's no styling of any kind. You can. You can style tables in a zillion different ways, and you probably see straight. You know, striped Rose borders, different colors. And we're not going to talk about that in this video or the next video. That's a CSS thing, but you can do some very basic sort of things like appear for table. We want to give this a basic border. You go. Border equals one now, Like you said, you would normally do CSS for this and you'll see why here right now. If we save this boom, we get this border. But you know, that's pretty ugly. And you can style this a little bit with HTML. But I'm not going to show you how, because it's sort of a deprecate ID thing. You're not ever going to do that. You're always going to use CSS. We're not really gonna talk about CSS, so there's not much else for me to say about it, but just just sort of understand that you can change things in a table, make it look all kinds of different ways, and we might talk about it a little bit more later on. But for now, we'll just leave it like that. So, um, what else can we dio much? All I want to talk about in this video In the next video, we'll talk about a couple of slightly more advanced table topics Call span and Rose span and, uh, see what that's all about. So that'll be in the next video
13. HTML Everyone 12 Advanced Tables: OK in this video, I want to talk about a couple of more advanced table topics. We did basic table stuff in the last video in this video. I want to talk about Roe spanning call span. So here we have just basic sort of rose and columns, right? But you might want certain fields to stretch over. For instance, all the columns are all the roads. So how do you do that? What we're gonna look at in this video. So let's come back here. And first, let's say we want a header across the entire top of this and we want the whole thing to stretch over all three of these columns. So that's pretty simple. We just come back over here and we want this above right here the very first thing. So let's create a new TR open and close the tag and let's create a th and we want it to span three columns. So we use the call span and said that equal to three and close that And let's say we just wanted to say, um, my table, right. So let's save this and take a look when we get it stretched all the way across and you notice there's no, um, lines in the middle here. Like for all the rest of them. Right now, we can see this very clearly because we still have this sort of goofy, um, border. So if I take this out and save this, it becomes a little bit harder to tell. But I can throw a little color in here, so, um, let's go. BG color equals, and I'm just gonna give this, ah, sort of a gray color. Save this. And boom. Now we get, you know, it stretches all the way across that school. Like I said, you you'll use usually color things like this using CSS sometime. Just sort of using a kind of an old throwback way. We used to do it this way before CSS was invented. That will tell you how long ago. I mean, 20 years ago, I used to do it, um, so I don't recommend you do it that way. Let's put this border back here real quick. Take a look. Okay, so that's call span. We also have a row span, so let's come back here and let's say right here in our main header we want another table head and let's just call this data and we want to stretch this around. I just won't stretch it. Three rows, I think. Take a look here. So 1234 rows. We want this to to stretch all the roads here. So how do we do that? Well, we want to stretch it. We wanted to span arose. We used the row span. Um and we want to set this equal to four. Now, this will give us sort of ah problem. Because now this doesn't stretch all the way across because we've added another column. Right? So we also then need to tweak this one up top to call span four if we wanted to stretch the whole way, right? The boom that fixes that. Now, finally, this data thing is smushed to the left. We can change that as well. Just like we did earlier. With this align, we can also let's see, just adding a line equals But say center, save this. Come back Did not work. What did I do? Do not save it. Call spanned four. Align equals center. Save is not working. It should work. Oh, wrong area That's what we wanted on the data thing. So Okay, so line equals center anymore. Coffee this morning. Okay, Boom. Now the data gets smushed to the center, and that looks much nicer. So these were some basic, well, not basic, more advanced table topics. And you can, you know, mix and match these all kinds of different ways. We could add color to this one if we wanted to. It we're not going to, but yeah, those are basic tables in the next video. I've been talking about CSS and how we're not gonna learn CSS. There's a couple of things we need to learn about CSS. So we're gonna look at that in the next video. I'm basically just gonna show you we're not gonna learn CSS. I'm just going to show you how to use CSS. How to incorporate it into an HTML page. You definitely need to know that. So we'll look at that in the next video
14. HTML Everyone 13 CSS: OK in this video. I want to talk about CSS. Now, I know I've been telling you all throughout this course we're not going to deal with CSS. And we're not really I'm not gonna teach you CSS. I'm just going to show you the three main ways that we can integrate CSS into a web page and this is important. You actually do need to know this. So there's three ways and let's just go through The first way is in line and we've already looked at this a little bit. We see right here in our table, we have this style attributes and then this and then closing quotation marks. This is in line CSS. We've found in html element and inside of it in line. We've added CSS, and you can do this pretty much to any CIA html element. Here's our H one tag. We could go style and then just write some CSS color blue try and maybe spell it right. Uh, and you could see CSS is usually a thing on the left with colon, and then I think on the right with semi colon. So these are the sort of how CSS often look. So if we save this, come back here and hit Reload. Boom! This turns blue. Very, very simple. Right? So we could do that. Get rid of this for now. Um, you can also do it. Um, let's see. I don't know how I want to say this, um, internally, I guess. And internally not to be confused with in line is it appear in the head section of our our document. We can just create a style tag and it opens and closes and anything inside of here, this is just you just write CSS right here. Now, uh, here, I'm gonna write some, and we'll talk about this in just a second. But you could see the problem here. I've done just a little bit, and it's already starting to get cluttered up here. When you see assess, you use pages and pages of it. I mean a lot. And you don't want to put all of that in your head Document on every single page of your website, you know? Plus, if you have 1000 pages on your website, you have to do 1000 times with CSS, and you don't want to do that So this is not sort of ah method you want to use unless you've got just a little thing that you need to dio. So here, um just wrote some real quick CSS We're gonna style our table. The table, that th tag and the TD tag. I want to give this a border of one may get solid, make it black, and then collapse it. And by collapse, it we could see it sort of looks raised here. It almost looks like it has a three dimensional. You know, there's two you know, there's a little like a border, right? You can sort of see it sort of looks different. The collapse gets rid of that. We just want to solve of line. I'm gonna come down here to our table. I'm going to get rid of this border tag that we put on there. Let's save this and take a look and see what this looks like. Boom. Now it looks sort of sleeker, a little more modern, and that's always CSS. Now, that's all. Internalised is all on the page itself. And let's go ahead. I'm gonna copy this and get rid of it. You don't normally want to do that. Like I said, unless it's just a little bit. Just a small snippet of CSS code normally, what you're gonna want to dio and this is sort of the main way to do CSS is external, and by external, I mean, we want to create a CSS style sheet externally and then linked to it. So I'm gonna come over here to file new and let's just say this file save as, and we gonna save it on the desktop same directory where we saved our page. And I'm just gonna call this style dot CSS In all CSS files ending dot CSS stands for cascading style sheets. We don't care. So I wanna paste in that same table code right here, and I'm going to save this now. If we come back here, nothing happens because we've created the file. We've put our CSN CSS in it, but we haven't linked it back to our actual web page. So how do we do that? Well, again, back in the head section of our page here, it doesn't really matter where we just need a CSS tag. So this link rail and then the name of it is style sheet. And then Herath, this is just like a link. Like when we talked about links earlier. We want this to point to wherever this file is. It's in the same directory. So we could just write style this bill style that CSS whatever. We name this file. Right? So you say this come back here and now it's linked. If we hit reload. Boom, We can see that, Um that CSS so very cool. Um, you know, we can go h one like we did earlier in line color blue, right? We do that right here. And then if we hit reload whom this turns blue, you know, you notice we didn't change the h one tag at all. That's why this is so cool. CSS and HTML work together, but they're not. You don't have to make any changes to your HTML in order for the CSS to sort of take effect , which is really cool. So you just add this CSS link at the top of your page in the head section and that's it. So you see, this is CSS. You may be familiar with it. I'm not gonna go any into any further detail on CSS, I could teach a whole course on CSS. In fact, I have in the past, uh and, uh, we'll just leave it at that for the most part of the reason why I do that is because, to be completely honest, nobody writes CSS anymore. There are so many CSS frameworks where you can just download it, slap it right in linked to it and boom. It works that nobody writes. CSS CSS is a pain. It really is. It's very tricky, you know. Historically, CSS all works a little bit different in each version of a browser. So you know you have Firefox. You have chrome. You have Internet Explorer have so far you have dozens of other browsers, and they all use CSS a little bit differently. So you had to do a version for Firefox. Aversion for chrome aversion for safari. Over time, those started to unify a little bit. But there's still little things that tweaks and things you have to do for different browsers, and it's just a pain, and nobody likes to do it. That's why we have CSS frameworks that you can just copy paste boom. It works and we'll start to talk about those in the next video. We're gonna look at the bootstrap framework, which is by far the most popular one out there. And yeah, so that's all for CSS in this video. In the next video, we'll look at Bootstrap.
15. HTML Everyone 14 Intro To Bootstrap: Okay, so we've gone through most of the main HTML elements now there a couple of fringe things here and there. We didn't talk about, but by and large this stuff that I talked about in the first half of this course, up until now it's gonna get you, like, 85 90% of what you're ever gonna do with HTML. The rest is just sort of adding a style with CSS, and we're not really gonna get into that in this course. What we are gonna get into is using a CSS framework. Now, I'm not gonna teach you CSS, but I'm gonna show you how to use how to integrate a CSS framework into your HTML document and the one we're gonna look at where to start looking at it right now is called bootstrap . So if you had over to get bootstrap dot com, here it is. It's completely free. This is created by some guys at Twitter and I don't know, maybe 10 years ago or so and it became so massively popular, the guys quit Twitter and they just do this full time now and they sort of spun it out a twitter. I don't think Twitter owns. This is open source, but we're on version 4.1 right now. And if the version is different by the time he watched this course, that's fine. Doesn't really matter. You can often toggle through older versions if you want to use the one I'm specifically using in this course, but it doesn't really matter. Um, so let's take a look at this. Clip the documentation and this is it, and we'll get into all this in a bit. I'll show you how toe install it and how to use it and stuff like that. But let's look through here and let's go down to components and let's just see some of the things you can do. So right off the bat, we get this big list of stuff, right? So here these air alerts. If you want an alert on your page, here's the code. All you have to do is copy this pasted on your page and boom, you've got that alert. Very cool. Um, buttons. If you like buttons, you want different colored buttons. Here's the code for all that. Once this is installed, you should have to copy and paste this and tweak it to, you know, say whatever you want the button to say. And that's it. Um, cards, meet little cards. You can add an image to it. Kind of cool. Uh, carousel. You've seen these before? Sliders. They're called. You know, you can add this to your website just by copying this code. Hasting it in, tweaking it a little bit. And boom, it just works. Very cool. Um, let's see. Jumbotrons just this big box. That's fun. We will play around with that, uh, nab our You know, these nah bars of the top. Every website has a knave bar. All right, here is an AB are you can use, and you could change the color. I'll show you how to do that stuff just by copying and pasting it and then sort of tweeting it. So these are all the different things. And see, what else do we have? Those with components. If we go to lay out Ah, you might want to read this. If you're interested in actually using this thing, this shows the it's a called a grid system. How you can position things on a page. You know, our page. We just have. You know, it's very bland. Just boom right there on the page. But if you wanted this table, you know, over here with an image wrapped around it and all that sort of thing Ah, you would do that using different containers and different grid system things. And you can read about it here. Not really gonna get that in depth into this. Like I said, I'm not teaching CSS. I don't even really want to teach you Bootstrap. I just want to Should it sort of show you what's possible? Gets you started, show you how to learn if you're interested in learning and I'll walk you through a few things so you can see you know what it's capable of? That's cool. So that's really I want all I wanted to talk about in this video, just ah, quick introduction to what this thing is and what it can dio in the next video. We'll go through this section right here. I'll show you how to actually use this on your Web page. You can see and a little starter template. You know, this should probably look familiar. Now it has a lot of the things that we've been doing already. HTML the doctor tag head on the title. The body. There's an H one, you know, closing tags. So it's very you should be familiar with the HTML of this already, so that'll make using it a lot easier, so we'll get in all that in the next video.
16. HTML Everyone 15 Install Bootstrap: Okay, So in the last video, we talked about bootstrap a little bit in this video on a show you had actually start using it. So there's basically two ways to do it. So head over to get bootstrap dot com and click on documentation, and you can either download this and its stall it and then use it, or you could just linked to it. So those were the two ways and getting on how serious you are, you might want to download it. The only reason to download it is if you want to tweak it and you probably don't, right. If you want to tweak it, you already know CSS and you want to sort of modify it to do very specific things. And you could do that. And I'm not gonna talk about it. That's way beyond us in this course. But for most people, you can just linked to this And what do I mean by linked to it? Well, remember when we created our fake little style? Well, it wasn't fake, it was real. But cheesy little style sheet here style dot CS says we linked to it appear the top with this tag Well, you can use the same tag, but instead, point this at you know, cdn dot Get bootstrap dot com slash start. Whatever it is, this is not the actual your l will look at that in a minute. But you could just do this, and then that's it. That's all you have to do. Just start using this. Well, there's one more thing I'll talk about that in a second. So that's what we're gonna dio. I'll just leave this for now. And so let's just go ahead and do that. So how do we do that? Well, head down here and look for this starter template. And basically, what you want to do is copy this whole thing. Now, I'm not going to do that because we've already got the bits of our own starter template, but I am gonna grab this stuff at the bottom. Now, you want to make sure you grab this J query in this javascript stuff in this bootstrap javascript file. And these air just links to external CD ends, content delivery networks, that house these things. So I'm just gonna highlight all this right. Click and copy and head back over here. and I'm just gonna delete our bottom two lines and just paste this in right click and paste or control V on your keyboard so you can see we've got that and we've got our closing tags here. So we're halfway there now. We just need this stuff at the top. So see? Probably want this in this. See, this is the link rail style sheet and then the ref and then the link to the actual thing, right? Just like we've got here. Same exact stuff. Basically, it's just pointing to a different you, Earl. So very cool. Very easy. And we can just This is Ah, Vieux port that makes your site mobile ready. So if you want your website to look good on a cell phone, all you have to do is add this line and it will. It's magic. It is actual magic, because otherwise it takes a lot of coating to make a website mobile ready? But not if you use a framework like bootstrap, which is one of the main reasons why people use this because it's just so easy. So let's just copy these two lines control, see, to copy and head back over here. And I'm just gonna get rid of this line and paste in these two lines and weaken in dent a little. If we like. It doesn't really matter. Okay, so let's save this and let's see, just by doing that, what has happened to our little web page here? If we click reload now, first, take a look. Everything burn this into your mind because it's gonna change slightly, and you're gonna want to notice that. So ready? 123 Reload! Boom! Everything is slightly different, right? Our tables all messed up, and we'll tweak that a bit. This is scrunched over to the side, but this tells us the bootstrap has been installed. So first things first very quickly. I'm just gonna get all this stuff off the corner there. And to do that, I'm gonna use a bootstrap container. So we just create a div. Let's do it over here. Div, with a class of container. You said earlier bootstrap has containers as their sort of grid system. Part of it. So now we need to close this. So just go down to the end here and close it. So we save this. Come back here and hit. Reload. Okay, that's a little bit better. Uh, let's add lime break or two. Let's get rid of this style. Save this back here. Okay? That's not much better. But we'll tweak this in the next video next few videos and show you exactly how to use these different things. So, uh, yeah, so that'll be in the next video.
17. HTML Everyone 16 Bootstrap Tables: Okay, So what do we want to do here? Well, we've got this table reminds. We'll play around with and make it look nicer. So how do we do that? Well, first things first. Let's come back here and look at our table, and we get rid of all the styling we've done so far. And that's pretty much all of the styling we've done. So for her, um, what else? Let's get rid of the that row span. Let's change this one back. 23 This is the my table thing that stretches along the top. And let's get rid of see this data thing. It's just I really need that. So let's save this and take a quick look and see. Okay, so that's a little bit better. Get rid of this. My table. Think to really need that. We're just gonna get rid of that entire table row. Okay, so we're back to basics. Very basic little table here. Name, email, address. A favorite caller. Everything smooshed together. Not very great. What do we do? Well, let's head back over here. Let's start at get boost, dr dot com, and you always want it. Just click the documentation. And then you want to come down almost always two components. And then you just want to look through here for the thing that you want to do. And we want to do tables and I'm looking and I don't see tables anywhere. So then I try the next one up content. And sure enough, there it is. Table. So we click on it. And here we see table. So to do a table in bootstrap. All we do is the same thing is before we create our table tag, but we give it a class of table, which is pretty simple. Copy that. Come up here to our table tag and paste it in. Save this and let's see what that did. Boom. Right off the bat. This is looking pretty good, right? Yes. We've got nice little things here. That's not great, but weaken. We can play with it now. Now, what can we dio? We'll just scroll through here and look at stuff. If you want it dark, you give it a class of table dark. We don't want that. That's ugly table head options. We could dio, um let's say table headlight now let's just leave that for now. Yeah. Okay. So first things first. Well, they're striped Rose. We'll come back to that. We want a border, Right? Because there's no border right here and right here, there's nothing. So let's just you see this table class, it also puts this little thing in there. So it's copy this head back over here. Let's give it a space and pace that right and save it and boom. Awesome. Very cool. So we could do that. Um, Say we want Striped Rose. Right? We could do that. See? Yeah. Inside the table class again. We just add this next little thing table dash striped. So copy that. Give it a space. And that's the thing with CSS. You could just give a space to things and just keep adding stuff. That's always fun. All right, so now we have striped. Very cool. What else can we dio order table. We did that border less stable, huh? Verbal rose. So when you hover your mouse over the color changes, that's cool us. And that we just give it a table. Dash, hover, save other space, Another paste. And now boom. Very cool. Normally you need java script to do this. But remember, we added all the JavaScript stuff down here and ah, it just it does it all automatically in bootstrap. Very, very cool. So let's see what else? We're probably getting towards the end of what we could do. We could do a small table. Oh, it's just at this. I see this is kind of big. If instead we want able small. Is that right on in? And boom. Now it's kind of you might like that might not. Whatever you like you can do, we can change different colors, right? Do that. We add each one of these things. So primary is this color secondary. Is this color successes this color? So let's add table success, and we just we want to give this to a specific TR, right? So let's just find the tr that we want. Let's say this middle one and we just give it a class of that thing. Save this, come back and hit. Reload. Boom! Now it's green. How cool is that, right? That is just so easy. And so you could do all of the things you captions. I'm not really sure what this is doing no responsive tables, those air first cell phones and things you can read about that if you want, if you want to. So very cool. Um, so that's how we sort of use boost draft. When Whenever you wanna thing just come to the documentation, start with components. It'll probably be there in there if it's not try different section content has a typography that's, like font stuff. Each one stuff, um, images. You do different things with images, um, tables and figures. Not sure what this figure thing is, but for the most part, everything he wants gonna be in this component section. So in the next video, we'll start to go through this component section to look at some different things. I think maybe we'll look at buttons next to see how those work, so that'll be in the next video.
18. HTML Everyone 17 Bootstrap Navbar: Okay, So what else do we want to look at in bootstrap so we can go through and look at all these things, but I'm just gonna pick a few of the most for more common things that you're gonna deal with it. We have buttons. Um, I was gonna show you how to do that, but it's really just this simple. Uh ah. You can add a button to a link. So it's the having a text link. You can just inside your h r F tag at a class with one of these things, and the link becomes a button so very, very simple there. But what I really want to look at is knave bars. That's this bar at the top of the screen. Every website has a knave bar these days, it seems like So how do we create one with bootstrap? Well, you can scroll through here and they have a bunch of different options with images without images. I'm just gonna grab the very 1st 1 has a school search bar in it, and, ah, some drop down stuff. So let's just copy this head back over to our web page, and we want to come up right below the body tag. We want this to be the very first thing on our page. So I could just control V or right click Excuse me and click Paste. And we put all that in there. So I'm just going to save this control s and take a look and see what we've got here. And boom, we've got this cool thing. Now, um, this drops down the javascript for that works. Very cool. This is a search bar. It doesn't actually go anywhere because we haven't programmed it to do anything. We're not going to you, but a very cool Now, I'm not a big fan of this very, very light gray. So the first thing I usually do is come up to the top of her nab our here no worse, hasn't have our light. Just change it to nab our dark and right next to it as well. Two spots. Save this and reload. And boom, We get this dark one. Very, very cool. And the green sort of matches the green here. We've got a theme going on about that. Right. So this is starting to come together. This is starting to look like an actual real website. And all we do is copy and paste some things. Now we can change this around so we don't want it. State knave bar. Let's say so. Let's just go through here. We see this link right away, nab our brand, and there says nab are when we just change. Let's change the John Elder gonna make it a personal website. I don't know Whatever. Boom, John. Older. Very cool. Um, this drop down, I don't really want to drop down. I don't have that many pages on my little web website, so I don't want to get rid of that. So how do I do that? Well, I just can't scroll through here and look for drop down. And here I see drop down. Here's a l. I remember earlier I talked about using allies in knave bars. Ever seen an example? Um, right away. So that's cool. So we can click here and we could see this down here or the closing Ally highlights. So we can just get rid of this whole thing, save it and reload it. Boom! And now it's gone. Very cool. Um, also this home and this disabled. I want to get rid of those two as well just because we don't need him and just cause I want to show you how to do it. So looking through here, I see this home again. Find the AL I open and close, and I just delete it. Same thing with the disabled since you know HTML. Now, it makes it very easy to sort of come in here and modify this in any way you want, which is very cool. So we say this now, this link, I'm gonna change this to say about me. We don't have an about me page, but nobody knows that yet. All right. So, John Elder about me starting to look pretty good. So he really is just that easy to use. Bootstrap. This is why I mean literally millions of people millions of websites use bootstrap. Um, it's just so easy and it's completely free. So very, very cool. In the next video, I think we'll play around with this a little bit more. Maybe we'll look at these cards, Say how to use that cause That's really very cool. And that will be in the next video
19. HTML Everyone 18 Bootstrap Cards: Okay, continuing on Let's look at these cards. So just click the card button here and here we have it. So just gonna copy this whole thing, come back to our site and let's put this under our table. So I have put a couple of line breaks here just for good measure. And I'm just gonna pace this whole thing in, and we can that if we like. So let's save this and take a look at this. So Okay, we've got this. There's no image here. So let's add that picture of my dog that we played around with earlier. And we could do that just with this SRC thing. And I think that was what Aspen to maybe p and G. Was that the name of it? Can't remember. We'll soon find out. I could look it up. All right. Very cool. And you could see a resize. Is it for us on on its own? Maybe it was just aspirin, That is. I'm just playing at this point, cause this is very fun. She's looking looking the other way. Avery stately, very regal hurricane. Okay, so we have this card title, we can change this and Let's just change this to say, as been chillin home and then Hello. My name is Aspen and I rule all that I see in every direction. Yeah, pretty much sums it up. And now we have this. But now I'm not a big fan of this button. Um, So let's head back over here to our buttons and let's pick a different color. So we've got a sort of a dark theme going on here. May we use the green? Maybe we just stick with the dark, so I'm gonna go secondary. So to change that, we just hit over here and we see this btm btm primary. We just changes to secondary and, um, feed aspen. I don't know. So very cool. So you know, just that easy to do these things with bootstrap. You know, it's just a matter of finding the thing that you want to play with copying it, tweaking it a little bit. Now that you know, html, you can sort of read through here. Here we ch five tag. We know what that is. The P tag. We know what that is. There's Aneha, Ref tag at the link. Obviously. You know what that is the only thing that's sort of not familiar are these div classes and this just pure CSS everything in CSS Ah, Div divider. Um, that's just what you wrap everything in and CSS and then you give it a class sort, like the attribute of CSS that tells it exactly which part of CSS you want to style that thing. So you know, the class of card body, the class of card image, the class of card to class up here of table, just sort of how that works. Very, very simple and very cool. So in the next video, I think we'll look at one or two more boot strappy things and then call that done. And so that'll be in the next video.
20. HTML Everyone 19 Bootstrap Jumbotron: Okay, so we're pretty much done here. Let's just do a couple more little things just to sort of play around with this and get a little bit more experience using this. So appeared at the top. We have this welcome to my website. That's OK, but what else could we dio? Well, let's look through here. We have a jumbotron. That's kind of cool. I like the Jumbotron here. We have a fluid jumbotron. Let's just go ahead and copy this guy and let's see instead of our H one. Let's just some space here and paste all this in. Save this and take a look and see what we got here. All right? Maybe that's cool. Maybe that's not I don't know. Um, so let's tweak this. Let's get rid of this button. We don't need it. And we don't need this line here in this little bit of text. So let's get rid of some of this stuff. So first things first, I'm gonna highlight all this and sort of have it over a bit. Okay, so we don't want the button. So let's get rid of this button. Boom gone. And we don't want this HR we didn't talk about HR tags H R stands for horizontal rule and those air pure html tags. And that just makes a line, you see, right? Like, I can't really highlight it. But right above this blue, highlighting this line right here, that's a horizontal rule. That's cool. Um, or if embarrassed to say, I use those more than I should, so let's get rid of that. Let's get rid of this P tag. Okay, So what else do we have here? Three. Load and see. All right, let's looking good. Um, let's change Hello, World to I don't know. Welcome to my website. This is my czar Little corner of the Internet. We should spell Internet, right? Internet still looks wrong. Uh huh. Exclamation point. Um, check out my amazing table below, and if you're really cool, you can feed Aspen. All right. Okay. So all right, this is kind of lame, but, you know, just another example of how you could do things with boots draft, and ah, I'm also sort of embarrassed to say I have used the Jumbotron on websites more often than I should do. Is very kind of dumb looking, but, you know, That's how it is. So looking through here breadcrumbs. Those were sort of useful buttons we already looked at, Um, drop downs. That's cool. Need forms. We don't really talk about Web forms more of a backend programming type of thing, but you can style forms. Bootstrap. Very easy. Um, naff bars, pagination. Very cool. Easy to add stopovers. Interesting progress bars, more programmatic. Really tool tips. We'll hover things, and that's pretty much it. So, yeah, that's bootstrap. It's really just that easy. And I hope it's sort of interested you to see how to use this. And I hope you go play around with it yourself. Just dive in and start testing things. Just start playing with it. That's the best way to learn Bootstrap and, ah, very cool. So I think that's pretty much it. We've got a very basic understanding of HTML. Um, it's really not that hard, You know, I think you've seen it's not really a programming language. It's just a matter of opening tags and closing tags. And then inside the tag, the text gets marked up to whatever the tag is. And then, if you want toe style eyes, it make it pretty used colors, layouts, things like that. That's all CSS. That's a lot more advanced sort of thing. Um, you can learn CSS and I actually recommend that you do that. Don't become an expert at CSS, but just learned enough. Um, sort of like you've learned. HTML. You've just now learned enough to be dangerous, right? You've learned enough to sort of be able to read it, be able to do basic things and, more important, to be able to understand it when you see it somewhere else. Like if you want to use bootstrap, you know you can look through here and there's a lot of See if there's a lot of HTML in Boots draft. Well, you know all of this. HTML Now you know what it means, what it does, the purpose of it, how to tweak it, how to make it. You know, do exactly what you want, and that's really, really all you want in this day and age of modern Web development. So I think that's it. In the next video, we'll say a few things. Wrap this up and move on from there
21. HTML Everyone 20 Bonus: All right. So I think we're gonna call this one done. Now, you've got a very, very solid basic toe. It's a intermediate level understanding of HTML. It wasn't that hard. I mean, this is a very short course, but html is very easy. There's just not a lot to it. Like I said, way back at the beginning, HBO is not really a programming language. It's a markup language. Just gonna memorize the tags and learn how to use them. That's pretty much it. So, um, fun course. I hope you had a good time. I had a good time teaching it. If you like this course, if you like my teaching style, whatever and you want, take other courses from me. Head over to kota me dot com. This is my website and it has all of my courses. There's over 30. I'm adding new courses every week and you can see we've got some really cool stuff. Ruby on rails, python, Django, JavaScript, PHP. You name it. We've probably got it over over 1000 videos at this point over 30 courses. 50,000 plus students at this point. Yeah, I think we're still at 50. We haven't quite hit 60 yet somewhere in there, but yeah, this this course right here. Um, just to give you an example, we create a clone of the website Pinterest using ruby on rails. Very cool stuff. Um, here we create a crypto currency desktop portfolio app with python. Very cool, Django for building websites. Like I said, JavaScript, some database stuff. Microsoft sequel server got Ah, my sequel. Server course. Somewhere down there, too. Ruby programming or Kryptos stuff or ruby on rails. Stuff Ruby for game development, Roku, and go more PHP PHP some crypto currency stuff. Very cool, Lennox, if you've ever been curious on what Lennox is and how to use it, it's a great course for that. And we got a little bit of marketing s CEO and email marketing were coders. We build stuff, you still have to market the stuff that you build. So sort of teach you how to do that as well. More database stuff, more PHP stuff. So very cool. If you're interested, click this enroll today. But now, normally, membership is 49 bucks. That covers absolutely everything. One time fee, money, back guarantee. Of course. Um, you also get future courses. So I had new courses every week or two and you get those free as a total member. They just show up in your account. Nothing to sign up for whom they just. They just appeared as if by magic. So no extra fees for that. And that's very cool. But as a bonus first were suffering through this course. I want to give you this coupon code. If you click the check out thing here and type in, let's see Super Coder, which I know is a really dorky code. But I'm too lazy to change it. It will knock off another 22 bucks. So you paid $27 for all of my courses. You can't even buy a pizza for that much. I basically just have to cover the cost of my band with. For all the videos I have to church something, um, that's pretty much a slows Aiken G. O. Um, I said money back guarantee you could access to me and ask me questions. You can access other students ask them questions interact. It's ah, it's a cool little community, and after 27 bucks, I think it's ah really good steal If you like you to me If you just like watching courses on you to me I have all my courses from Kota Me on you know me eso If you head over to john elder dot org's ford slash you to me dot PHP This is my personal website, and it has all the same courses, but with links to you to me. And there's coupon codes on here, I think 11 or 12 bucks her courses what you pay. They sort of locked me into how low I can go there. Granted, that's a lot more expensive than taking all my courses for $27. But some people just like you to me. Um, for whatever reason, maybe you have some credits build up there. Some people gifted you courses or whatever. Uh, if that's the case, you could check out all my courses here, click the link in a boppy over to you to me. So, Like said, I hope you enjoyed the course. Leave a review If you feel like it. Good, bad or otherwise. Always appreciate getting feedback. And that would be really helpful. And, uh, I think we're gonna call this one. Done. So my name is John Elder. Hope you enjoyed the course, and we'll see you next time