WEBVTT 00:07.200 --> 00:11.440 Hey guys, welcome to the first video of my Web Development for Absolute Beginners 00:11.440 --> 00:11.840 series. 00:12.060 --> 00:16.160 This entire series is meant for anyone wanting to learn basic web design and web 00:16.160 --> 00:18.860 development, and there's absolutely no prerequisites. 00:19.020 --> 00:22.440 I'm teaching this course as if I'm talking to someone that's never written a line of 00:22.440 --> 00:23.340 HTML before. 00:23.560 --> 00:26.760 So don't worry about having any kind of prior web development knowledge. 00:26.760 --> 00:31.380 This will be an ongoing course, or ongoing series, and each video will 00:31.380 --> 00:32.720 focus on a different topic. 00:32.880 --> 00:36.760 So in this particular video, we're going to be focusing on HTML only. 00:37.060 --> 00:39.640 Then we'll move on to CSS and possibly some JavaScript. 00:40.140 --> 00:42.880 I also want to show you how to upload a website to the internet. 00:43.800 --> 00:45.880 Alright, so just a couple things before we begin. 00:46.020 --> 00:50.960 So I want to stress that this course and this video, this series, is for beginners. 00:51.580 --> 00:54.740 If you've been a subscriber for a while, I can almost guarantee that you're going 00:54.740 --> 00:57.400 to know everything in this video and in this series. 00:57.420 --> 01:00.040 Well, maybe not in this series, but in this video at least. 01:00.680 --> 01:03.600 If you've been building websites, then you're going to know the basics. 01:04.280 --> 01:07.800 I'm doing a series like this because I don't really feel like I have a place to 01:07.800 --> 01:09.800 start on my channel for absolute beginners. 01:09.940 --> 01:12.740 People that really don't know anything about web development. 01:13.520 --> 01:18.640 So hopefully my advanced programmers that have subscribed to me can understand that. 01:18.740 --> 01:24.020 And just know that this isn't going to be an ongoing thing for the next 20 videos. 01:24.080 --> 01:25.100 It's just this series. 01:25.800 --> 01:29.920 Also, there's going to be little to no CSS in this particular video. 01:30.260 --> 01:32.760 That's going to be covered most likely in the next video. 01:33.220 --> 01:36.520 And just to warn you, HTML without CSS is very, very ugly. 01:37.000 --> 01:39.240 We're not focusing on the style at all here. 01:39.280 --> 01:41.160 We're focusing on HTML syntax. 01:42.240 --> 01:45.260 Alright, so we will be sticking to HTML5. 01:45.380 --> 01:51.220 I don't want to confuse anybody by throwing in standards from HTML4 or XHTML 01:51.220 --> 01:52.340 or any other derivative. 01:52.800 --> 01:53.840 Anything like that. 01:53.980 --> 01:55.820 So we're going to stick to HTML5 only. 01:56.800 --> 01:58.500 So we will be working with examples. 01:58.720 --> 01:59.920 We'll be building a cheat sheet. 02:00.140 --> 02:02.740 But we're also going to take a look at some slides along the way. 02:03.720 --> 02:08.300 Alright, now you're not going to learn HTML or anything for that matter in 5 or 02:08.300 --> 02:08.820 10 minutes. 02:09.160 --> 02:12.780 I've actually seen videos called, you know, learn HTML in 5 minutes. 02:13.000 --> 02:14.740 And that's just absolute bullshit. 02:15.180 --> 02:17.580 If you're going to be a web developer, you have to be patient. 02:17.580 --> 02:20.420 And you have to really enjoy learning. 02:20.580 --> 02:23.120 Because you're going to be learning, even when you land a good job. 02:23.440 --> 02:25.120 You're going to be learning every single day. 02:25.240 --> 02:26.220 So try and be patient. 02:26.360 --> 02:27.300 Try to follow along. 02:27.620 --> 02:31.520 I know people can get a little aggravated with videos that are over, you know, 02:31.540 --> 02:32.420 25 minutes. 02:33.020 --> 02:38.280 But, you know, if you're that impatient where you can't watch an hour-long course, 02:38.660 --> 02:40.460 then you're probably in the wrong profession. 02:40.600 --> 02:43.840 And I don't mean to sound harsh or anything, but I don't want to steer 02:43.840 --> 02:45.360 anybody down the wrong path. 02:45.360 --> 02:47.520 And I really do mean that wholeheartedly. 02:48.080 --> 02:49.640 Alright, so enough with the preface. 02:49.800 --> 02:50.960 Let's go ahead and get started. 02:51.220 --> 02:52.580 So what is HTML? 02:52.960 --> 02:55.200 It stands for Hypertext Markup Language. 02:55.820 --> 02:59.240 And a lot of people just starting out don't realize that HTML is not a 02:59.240 --> 03:00.860 programming language at any level. 03:01.260 --> 03:04.380 It's a markup language for creating webpages and documents. 03:04.840 --> 03:05.980 Okay, HTML documents. 03:06.400 --> 03:09.520 One of the key elements of a programming language is logic. 03:09.820 --> 03:13.460 So you can have things like conditionals where you can say, if this is true, 03:13.540 --> 03:14.280 then do this. 03:14.280 --> 03:16.760 HTML, however, doesn't have any of that. 03:17.000 --> 03:20.360 HTML is used to just display and format elements of a webpage. 03:21.020 --> 03:25.080 That may be a text paragraph, or a heading, a bullet list, or an image, 03:25.200 --> 03:26.560 or many other things. 03:26.880 --> 03:28.260 It's strictly presentational. 03:28.380 --> 03:29.280 Just try to remember that. 03:29.340 --> 03:30.180 There's no logic. 03:30.420 --> 03:32.040 There's no actual programming. 03:32.840 --> 03:37.620 So an example of a programming language would be JavaScript, or PHP, or C Sharp. 03:37.980 --> 03:41.320 These are intricate languages, and they're responsible for things like 03:41.320 --> 03:46.800 connecting to a database, for an online store, something like that, user login, 03:47.140 --> 03:49.280 dynamic functionality, things like that. 03:49.700 --> 03:53.320 Now, with that said, that doesn't make any programming language more important than 03:53.320 --> 03:53.760 HTML. 03:54.300 --> 03:57.980 In fact, if you're getting into web development, HTML, at least in my opinion, 03:58.200 --> 03:59.560 is much more important. 03:59.960 --> 04:02.280 Because HTML is the building block of the web. 04:02.640 --> 04:07.620 Every single site that you see outputs HTML to the browser, no matter what kind 04:07.620 --> 04:10.000 of advanced programming it uses on the back end. 04:10.000 --> 04:13.420 You can build a website using just HTML and CSS. 04:13.920 --> 04:17.580 CSS, of course, is a styling language, and we'll get into that in another video. 04:18.100 --> 04:22.840 But you can have just an HTML site without any JavaScript, or any PHP, or anything 04:22.840 --> 04:23.440 like that. 04:23.800 --> 04:25.600 It will be purely presentational. 04:25.840 --> 04:29.640 You can't have an online store or anything with just HTML. 04:29.800 --> 04:34.180 But you can have a basic business website with information about the company, 04:34.300 --> 04:34.880 and so on. 04:34.880 --> 04:39.500 Now, it is harder these days to get a job with just HTML and CSS knowledge, 04:39.660 --> 04:40.540 but you can do it. 04:40.580 --> 04:45.680 There are still companies that are purchasing websites that are strictly 04:45.680 --> 04:46.480 presentational. 04:47.160 --> 04:50.360 Alright, so I don't want to spend too much time on this stuff, so let's move on to 04:50.360 --> 04:51.960 what we actually need to get started. 04:52.360 --> 04:55.240 So to get started building websites, you only really need two things. 04:55.280 --> 04:59.220 You need a browser to view the HTML, and you need a text editor to write the 04:59.220 --> 04:59.620 HTML. 05:00.160 --> 05:02.140 Now, don't worry about what kind of computer you have. 05:02.140 --> 05:05.460 If you're on Windows, Mac, or Linux, it doesn't matter as long as you have 05:05.460 --> 05:06.340 these two things. 05:06.520 --> 05:09.880 Everything that I'm doing in this series and in this video is completely 05:09.880 --> 05:10.840 cross-platform. 05:11.500 --> 05:13.320 So for a browser, it can be whatever you want. 05:13.400 --> 05:14.880 I highly suggest Google Chrome. 05:15.100 --> 05:18.360 It's the fastest, and in my opinion, it's the best for any web developer. 05:18.700 --> 05:22.460 But of course, you can use Firefox, or Safari, even Edge. 05:22.560 --> 05:25.300 Just please, for God's sakes, don't use Internet Explorer. 05:25.580 --> 05:28.600 If you're using something less than Windows 10, please download a different 05:28.600 --> 05:29.000 browser. 05:29.620 --> 05:33.140 Alright, so you can also use any text editor you want. 05:33.380 --> 05:34.920 Which one is up to you. 05:35.300 --> 05:38.240 You could even use Windows Notepad, but I wouldn't suggest it. 05:38.500 --> 05:41.560 You want to use something with line numbers and syntax highlighting, 05:41.740 --> 05:42.440 stuff like that. 05:42.780 --> 05:46.220 I'm going to be using an editor called Sublime Text, which is available for 05:46.220 --> 05:47.560 Windows, Mac, and Linux. 05:48.180 --> 05:49.520 So feel free to download it. 05:49.540 --> 05:51.460 I'm going to show you where and how to download it. 05:51.580 --> 05:53.680 I'm using Sublime Text because it's very simple. 05:54.020 --> 05:54.900 It's very light. 05:54.900 --> 05:58.700 When I'm working with other technologies and languages, I usually use something 05:58.700 --> 06:00.920 called Atom or Visual Studio Code. 06:01.320 --> 06:03.820 But I think that those are overkill for what we're doing here. 06:04.260 --> 06:08.000 So before we move on, let's go ahead and install Sublime Text so that we can start 06:08.000 --> 06:08.780 writing HTML. 06:09.480 --> 06:14.320 Alright guys, so you want to go to www .sublimetext.com to get this program, 06:14.440 --> 06:15.120 if you want it. 06:15.140 --> 06:16.740 If you want to use something else, that's fine. 06:17.140 --> 06:18.780 Now this program is free to try. 06:18.880 --> 06:21.400 If you want to keep using it, I'd suggest buying a license. 06:21.400 --> 06:24.880 If you use it without a license, it doesn't have any limitations or 06:24.880 --> 06:25.540 anything like that. 06:25.620 --> 06:28.280 You're just going to get a popup every once in a while that says you should 06:28.280 --> 06:29.460 probably buy a license. 06:30.060 --> 06:31.760 Alright, so let's go ahead and download this. 06:31.820 --> 06:33.460 I'm going to click the big download button here. 06:36.700 --> 06:39.400 Alright, so once that's done, we can go ahead and open it. 06:39.880 --> 06:42.120 It's just going to be a simple installer for Windows. 06:43.200 --> 06:46.040 And of course you can grab this for Mac or Linux. 06:47.140 --> 06:48.640 So let's go through this. 06:49.220 --> 06:50.620 Default location is fine. 06:50.620 --> 06:53.680 I'm going to choose to add it to the Explorer context menu. 06:54.080 --> 06:58.380 What that'll do is it'll allow us to right-click on an HTML file and say open 06:58.380 --> 06:59.580 with Sublime Text. 06:59.980 --> 07:01.440 So we definitely want that checked. 07:01.820 --> 07:03.060 And then we're just going to install. 07:04.300 --> 07:05.700 Alright, so it should be all set. 07:05.760 --> 07:06.560 Let's click finish. 07:07.040 --> 07:09.180 And now we should be able to open it up. 07:09.300 --> 07:11.780 I'm just going to search for it down here in my search bar. 07:13.020 --> 07:14.780 If it opens... 07:14.780 --> 07:16.560 And let's just see right here. 07:16.600 --> 07:17.560 Sublime Text 3. 07:17.560 --> 07:21.560 There's also Sublime Text 2, but 3 obviously is the newer version. 07:22.220 --> 07:24.300 Alright, so this is what a text editor looks like. 07:24.380 --> 07:26.240 I'm not going to go through all the features. 07:26.680 --> 07:29.440 I just want to strictly focus on HTML syntax. 07:30.220 --> 07:34.480 So now that we have our editor installed, we can go ahead and we can start to create 07:34.480 --> 07:35.600 our HTML file. 07:36.180 --> 07:40.420 So one great thing about HTML is we don't need any kind of special server or hosting 07:40.420 --> 07:42.380 company to write and test HTML. 07:42.380 --> 07:46.640 You can simply create a file right on your computer, you can give it a .html 07:46.640 --> 07:49.160 extension, and you can open it up with your browser. 07:49.660 --> 07:53.280 Now, when your site is ready to deploy to the internet, you will need to buy a 07:53.280 --> 07:56.400 domain name, you'll need a hosting package, and then you'll need to upload 07:56.400 --> 07:57.860 everything to your web host. 07:57.960 --> 08:00.040 And I'll get into that in a later video. 08:00.480 --> 08:04.640 But for now, we can build our site or build our cheat sheet locally without that 08:04.640 --> 08:05.000 stuff. 08:05.120 --> 08:08.740 So to create an HTML file, it has to have an HTML extension. 08:08.740 --> 08:12.240 You can call it whatever you want, you just have to end it with .html. 08:12.440 --> 08:15.420 This will allow it to be displayed correctly in a web browser. 08:15.920 --> 08:19.340 Now, one thing to remember is that your homepage should always be called index 08:19.340 --> 08:19.740 .html. 08:20.480 --> 08:26.660 If you go to a domain like, let's say, www.something.com, and you upload a file 08:26.660 --> 08:30.700 called index.html, that's the file that's going to show on that root domain. 08:31.080 --> 08:35.760 If you upload a file, let's say, about.html, that's going to show when you 08:35.760 --> 08:39.320 go to something.com slash about.html. 08:40.100 --> 08:43.020 So the index file will always be the root file of the homepage. 08:43.360 --> 08:46.040 Unless, of course, you're messing with server settings and you change it, 08:46.140 --> 08:47.980 but by default, that's the behavior. 08:48.080 --> 08:49.840 It's going to look at index.html. 08:50.520 --> 08:53.660 Alright guys, so we're going to go ahead and create our first HTML file. 08:53.740 --> 08:56.060 Now I'm going to put this in a folder, so I'm going to create a folder, 08:56.180 --> 08:59.280 and I'm going to call this HTMLCheatSheet. 09:00.140 --> 09:04.200 Okay, and then inside that folder, let's create a new file by going to New 09:04.200 --> 09:04.960 Text Document. 09:05.640 --> 09:09.440 And we're going to call this index.html. 09:10.160 --> 09:13.040 Okay, and we'll just say yes, we want to change the file extension. 09:13.820 --> 09:18.340 And notice that mine has a Chrome icon by default because Chrome is my default 09:18.340 --> 09:20.940 browser, and that's what opens up the HTML files. 09:21.060 --> 09:21.960 Yours may be different. 09:22.680 --> 09:28.480 Now, if you're using Windows, you may have an issue where you don't see the .html. 09:28.480 --> 09:31.920 Okay, if you're not seeing that, what you want to do is you want to go to 09:31.920 --> 09:35.540 View, Options, Change Folder and Search Options. 09:36.220 --> 09:41.160 Alright, you want to go to View, and then down here you want to uncheck 09:41.160 --> 09:43.980 Hide Extensions for Known File Types. 09:44.020 --> 09:47.300 Okay, you want to make sure that's unchecked, and then click Apply. 09:47.540 --> 09:50.460 And then you're going to see the extension, and it may say something like 09:50.460 --> 09:52.260 index.html.text. 09:52.460 --> 09:54.260 Just make sure you get rid of the .text. 09:56.100 --> 09:59.020 I'm sure most of you know that, but just in case there's people that 09:59.020 --> 09:59.420 don't. 10:00.080 --> 10:03.120 Alright, so what we want to do now is we want to open this with Sublime Text. 10:03.280 --> 10:06.820 So we can actually just right-click and say Open with Sublime Text. 10:07.280 --> 10:08.340 Let me just bring it over. 10:08.560 --> 10:09.920 It opened up on a different screen. 10:10.420 --> 10:11.340 And that's going to open it up. 10:11.380 --> 10:13.660 You can see up in the tab it says Index .html. 10:14.640 --> 10:17.700 Now, another thing you could have done is you could just go to File, Open, 10:17.840 --> 10:21.440 and you could find that on your computer, that HTML file, and open it. 10:21.920 --> 10:25.360 Alright, so now that we have that open, what I'm going to do is just type in Hello 10:25.360 --> 10:26.080 World here. 10:26.240 --> 10:28.160 Just text, no tags or anything yet. 10:28.540 --> 10:30.200 And you want to make sure you save it. 10:30.320 --> 10:34.460 So you can either go to File, Save, or you can just hit Ctrl-S, which is what 10:34.460 --> 10:35.100 I would suggest. 10:35.180 --> 10:35.800 It's much quicker. 10:36.240 --> 10:37.240 And then it saves. 10:37.400 --> 10:39.440 Okay, now what we want to do is open it up. 10:40.320 --> 10:42.480 So let's go ahead and let's open it up with Chrome. 10:42.580 --> 10:45.440 And that's the default, so all I have to do is double-click. 10:45.820 --> 10:49.360 And then that's going to open it up in the Chrome browser, and you can see it says 10:49.360 --> 10:49.980 Hello World. 10:50.940 --> 10:54.940 Alright, so even if we put just text in here with no HTML tags at all, 10:55.040 --> 10:56.860 it's still going to show the text in the browser. 10:57.460 --> 11:00.200 Alright, now what I'm going to do is just snap this to the edge here. 11:00.680 --> 11:03.600 And then we're just going to open up Sublime Text on this side. 11:04.040 --> 11:07.120 Okay, I'm going to make Sublime a little bit bigger than the browser for now. 11:08.300 --> 11:10.260 Just so we can see everything, all the code. 11:11.420 --> 11:14.300 And I just want to talk a little bit about HTML tags. 11:14.860 --> 11:18.340 So an HTML tag is the basic building block of any webpage. 11:18.340 --> 11:22.320 Different tags format the way that information and text is displayed. 11:22.980 --> 11:26.880 So element names are surrounded in angle brackets, or greater than and less than 11:26.880 --> 11:27.360 symbols. 11:27.740 --> 11:29.240 And tags usually come in pairs. 11:29.400 --> 11:31.380 One's a start tag, one's an end tag. 11:31.480 --> 11:35.180 If we look over here, we have the start tag, the end tag, and then we have content 11:35.180 --> 11:35.860 in between. 11:36.400 --> 11:39.400 Alright, in this example here, we have About Us as the content, 11:39.580 --> 11:40.200 or the text. 11:40.440 --> 11:43.900 And it's surrounded in H1 tags, which stands for Heading 1. 11:44.080 --> 11:46.580 And I'm going to get into the specific tags later on. 11:47.160 --> 11:50.100 Alright, here's another example with a paragraph tag. 11:50.200 --> 11:51.960 And we just have the text, this is a paragraph. 11:52.680 --> 11:56.740 Now, notice with the br tag here, there's no opening and close. 11:56.820 --> 11:57.920 It's just one tag. 11:58.000 --> 11:59.800 This is called a self-closing tag. 12:00.080 --> 12:03.540 And these are basically tags that don't have any content within them. 12:03.880 --> 12:07.720 Notice that the slash is actually after the element. 12:08.140 --> 12:09.900 So br slash, it's after. 12:10.320 --> 12:12.920 And this is an XHTML style. 12:13.100 --> 12:15.500 So we don't really need to do this in HTML5. 12:15.500 --> 12:18.920 You can if you want, but you can just use simply br. 12:20.080 --> 12:24.440 And br is a line break tag, so it's basically going to push it down a line. 12:24.880 --> 12:28.460 And there's no reason to have any content like this inside of a line break. 12:28.620 --> 12:31.480 So that's why it's considered a self-closing tag. 12:32.520 --> 12:36.360 Alright, now there's a very specific structure to an HTML document. 12:36.960 --> 12:39.060 So this is a quick diagram I just want to look at. 12:39.140 --> 12:42.320 You'll see that everything is surrounded in HTML tags. 12:42.340 --> 12:43.680 We have the start and ending tag. 12:43.680 --> 12:47.760 Inside that we have a head area and we have a body area. 12:48.240 --> 12:52.180 Now the head has nothing to do with the output that's in the browser. 12:52.400 --> 12:54.620 The head has things like the page title. 12:55.040 --> 12:59.340 It has things like links to CSS files and JavaScript files that you want to use. 12:59.940 --> 13:03.480 Metadata such as the description and keywords, things like that. 13:03.840 --> 13:08.400 The description and keywords are actually used by search engines like Google so that 13:08.400 --> 13:12.340 it knows some more information about what's actually on the webpage. 13:12.760 --> 13:16.800 Alright, and then in the body we have the actual markup that's going to display in 13:16.800 --> 13:17.300 the browser. 13:17.520 --> 13:19.940 So headings, text, images, things like that. 13:20.960 --> 13:23.600 Now this is an example of a very simple webpage. 13:24.180 --> 13:26.860 Notice that we have the HTML tags, the head, the body. 13:27.140 --> 13:28.440 We also have this thing at the top. 13:28.520 --> 13:32.280 This is a doc type and it's not technically an HTML tag. 13:32.520 --> 13:35.760 It's just a declaration and it should always be the first thing on the webpage. 13:36.400 --> 13:41.420 And what this does is it tells the browser what type of HTML this is actually written 13:41.420 --> 13:41.680 in. 13:41.680 --> 13:44.900 Now this is the standard doc type for HTML 5. 13:45.060 --> 13:46.840 Let's take a look at some of the other ones. 13:47.500 --> 13:49.440 So, as I said, this is HTML 5. 13:49.520 --> 13:55.700 If you were using HTML 4.01, it would have to be a doc type like this. 13:55.780 --> 13:59.800 And you start getting into different types, whether it's strict or 13:59.800 --> 14:00.360 transitional. 14:00.800 --> 14:02.180 And it can get very complicated. 14:02.380 --> 14:03.780 Same thing with XHTML. 14:04.140 --> 14:06.860 I'm not going to get into that because I don't want to confuse you guys. 14:07.100 --> 14:09.160 We're going to just stick with HTML 5. 14:09.160 --> 14:12.240 Just know that other doc types are a lot more complicated. 14:12.860 --> 14:15.660 Alright guys, so we're going to get started on the structure of our HTML 14:15.660 --> 14:16.180 document. 14:16.460 --> 14:20.420 So I made this bigger so there's no doubt that you guys can see this. 14:20.660 --> 14:22.420 I'm going to get rid of the hello world here. 14:22.620 --> 14:25.580 And like I said, the first thing we want to put in here is the doc type. 14:25.660 --> 14:29.660 So we want to put an angle bracket or a less than and then an exclamation. 14:29.880 --> 14:33.580 And then we just want the word DOCTYPE, usually in all caps. 14:33.820 --> 14:36.320 And then HTML and then the closing bracket. 14:36.320 --> 14:40.220 Okay, so this is the official doc type for HTML 5. 14:40.840 --> 14:43.240 After that we want to put in our HTML tags. 14:43.860 --> 14:45.280 Okay, that's going to wrap everything. 14:45.420 --> 14:50.300 Now notice in Sublime, when I put the angle bracket and then as soon as I hit 14:50.300 --> 14:55.820 the forward slash, it actually gives us the ending tag automatically so we don't 14:55.820 --> 14:56.580 have to type it out. 14:57.260 --> 15:01.280 Alright, another thing we can do is, let's say for the head tag here, 15:01.280 --> 15:05.660 we can just put the text HEAD and click TAB and it will give us both the beginning 15:05.660 --> 15:06.840 and the end tag. 15:07.460 --> 15:12.860 Alright, so just a helpful shortcut in Sublime and most text editors at that. 15:13.720 --> 15:15.860 Alright, so in addition to the head we need the body. 15:16.020 --> 15:18.440 So let's go ahead and put the body tags in. 15:19.420 --> 15:22.000 Alright, now in the head all I want is the title. 15:22.520 --> 15:30.860 So let's go ahead and do that and we'll say HTML Cheat Sheet. 15:31.640 --> 15:32.440 Save that. 15:32.860 --> 15:36.200 And then over here I'm going to reload and notice there's nothing in the actual 15:36.200 --> 15:38.620 browser here because we have nothing in the body. 15:38.960 --> 15:42.140 But if you look at the tab, you'll see it says HTML Cheat Sheet. 15:42.580 --> 15:45.880 Okay, so whatever we put in the title here is going to show in this tab. 15:45.880 --> 15:49.640 Now, a lot of times when you're building websites, you're going to want to see the 15:49.640 --> 15:51.860 exact source code that's running in the browser. 15:52.420 --> 15:54.160 And for that we can do a CTRL-U. 15:54.620 --> 15:58.020 And this is going to show us the exact HTML that's being parsed. 15:58.320 --> 16:02.200 Now, what we're doing here is building just a static HTML site. 16:02.280 --> 16:04.020 So it's going to look exactly like this. 16:04.200 --> 16:08.300 But when you're using languages like, let's say, PHP, where you have dynamic 16:08.300 --> 16:12.500 programming that's kind of generating the HTML for you from variables and things 16:12.500 --> 16:16.500 like that, this is very helpful because you can see the exact HTML that's being 16:16.500 --> 16:16.980 parsed. 16:17.100 --> 16:18.960 And you can't see it in your actual code. 16:19.740 --> 16:24.200 Alright, so another thing that is very helpful in Chrome and other browsers is 16:24.200 --> 16:25.200 the developer tools. 16:25.320 --> 16:29.060 So if we hit F12, we get this little console down here. 16:29.500 --> 16:31.180 And there's different things here. 16:31.300 --> 16:32.760 There's the JavaScript console. 16:33.240 --> 16:37.260 There's networking, so you can see what pages are loading and so on. 16:37.320 --> 16:39.120 There's a lot of advanced stuff here. 16:39.120 --> 16:42.560 But for now, we're just going to look at the Elements tab, which just shows the 16:42.560 --> 16:43.000 HTML. 16:43.620 --> 16:46.640 We don't have anything in the body, but if we did, we could hover over things 16:46.640 --> 16:50.300 and it'll actually give it a highlight up here, which is very helpful. 16:50.380 --> 16:54.140 And you can even edit stuff down here, which I might get into later. 16:54.840 --> 16:59.420 Alright, it's not going to stick if you edit down here, but it will until the page 16:59.420 --> 17:00.040 is refreshed. 17:00.880 --> 17:04.740 So let's go back to our body over here, and we're going to start to look at some 17:04.740 --> 17:05.260 tags. 17:05.400 --> 17:06.640 So we're going to start with Headings. 17:06.640 --> 17:10.040 Now before we go into tags, I just want to mention Comments. 17:10.320 --> 17:14.900 So with HTML, you can have these comments with the less than exclamation and then 17:14.900 --> 17:15.640 two hyphens. 17:16.120 --> 17:17.940 And then let's give this a comment. 17:18.080 --> 17:20.640 We'll just say, this is where our headings are going to go. 17:20.900 --> 17:24.220 And then we want to end the comment with double hyphen and then greater than. 17:24.560 --> 17:26.680 Now this is not going to be parsed by the browser. 17:26.820 --> 17:29.940 If I save this and reload, you're not going to see it show up here because it's 17:29.940 --> 17:30.440 a comment. 17:32.980 --> 17:35.600 It's just for the developer to see. 17:36.600 --> 17:40.380 Now when it comes to headings, there's six different tags we can use. 17:40.480 --> 17:42.380 We have H1 through H6. 17:42.740 --> 17:44.800 So let's go ahead and put an H1 in here. 17:45.380 --> 17:47.120 And I'm just going to say, Heading 1. 17:47.680 --> 17:49.480 And save, and let's reload. 17:49.640 --> 17:52.260 And notice that it gives it a bigger text. 17:52.640 --> 17:56.280 So the browser by default has some core styling in it. 17:56.540 --> 17:58.580 And an H1 is going to make the text bigger. 17:58.580 --> 18:03.920 It's also going to add some padding around the edges so that the next piece of 18:03.920 --> 18:05.580 content will be pushed down a little. 18:06.140 --> 18:08.800 So that's an H1 and that's the biggest heading there is. 18:09.080 --> 18:10.780 So let's take a look at an H2. 18:11.800 --> 18:13.140 So we'll say, Heading 2. 18:13.900 --> 18:14.800 Let's save that. 18:15.100 --> 18:16.680 And you'll see that it's a little smaller. 18:16.780 --> 18:18.440 Notice the padding in between the two. 18:19.380 --> 18:21.540 So what I'll do now is just copy this. 18:22.200 --> 18:24.760 And let's do 3, 4, 5, 6. 18:25.340 --> 18:29.740 So this will be an H3, 4, 5, and 6. 18:30.560 --> 18:34.400 This will be 3, 4, 5, and 6. 18:34.580 --> 18:36.260 And I'm just going to change these as well. 18:38.020 --> 18:41.320 Alright, now I want you guys to have this to look back on if you need it. 18:41.660 --> 18:49.860 2, 3, 4, 5, and 6. 18:50.660 --> 18:53.520 Alright, so let's go ahead and save and reload the browser. 18:53.520 --> 18:56.380 And you'll see the different sizes of the headings. 18:57.200 --> 19:01.480 Now you can change the sizes of these texts through CSS, which we're going to 19:01.480 --> 19:06.760 get into probably in the next video of the series, where we can change the font, 19:06.860 --> 19:08.620 we can change the size, whatever you'd like. 19:09.220 --> 19:12.500 You could even make all of these headings the same size through CSS. 19:13.620 --> 19:15.780 Alright, so the next thing we're going to look at are paragraphs. 19:16.520 --> 19:17.940 So let's put a comment here. 19:18.440 --> 19:19.820 We'll say, Paragraph. 19:21.020 --> 19:24.000 And a paragraph is just a P. Okay, it's just a P tag. 19:24.600 --> 19:26.200 Now I'm going to give you a little hint in Sublime. 19:26.240 --> 19:31.120 If you ever want to generate dummy text, which is just sample text to use for 19:31.120 --> 19:35.880 development, you can actually just type in LARM, the word LARM, and then TAB. 19:36.300 --> 19:38.080 And that's going to give you some LARM ipsum. 19:38.380 --> 19:41.660 Now if you wanted a certain amount of words, like let's say we wanted 10 words, 19:41.720 --> 19:43.680 you could say LARM 10 TAB. 19:44.800 --> 19:46.400 I guess you can't do that in Sublime. 19:47.800 --> 19:49.440 I actually haven't used Sublime in a while. 19:49.440 --> 19:52.600 I usually use Atom or Visual Studio Code and you can do that there. 19:52.700 --> 19:54.220 I'm not sure why it doesn't work here. 19:54.980 --> 19:56.860 Anyways, we'll just generate some text. 19:57.480 --> 19:58.280 And we'll save that. 19:58.860 --> 20:03.460 And a paragraph, just like the headings, has some default styling. 20:04.020 --> 20:08.260 For one, it has a display block, which means it's a block-level element. 20:08.480 --> 20:14.480 So if we were to take another paragraph and go ahead and paste that in and reload, 20:14.620 --> 20:17.080 you'll see that it's automatically on a new line. 20:17.080 --> 20:18.740 It also has some margin. 20:19.140 --> 20:22.780 It has, I believe, 1EM of margin, or 1M. 20:23.260 --> 20:28.500 An M is a measurement in CSS, just like pixels, except it's used for more 20:28.500 --> 20:29.480 responsive stuff. 20:29.940 --> 20:33.620 So if we hit F12 and look at the developer tools, I'm just going to make this a 20:33.620 --> 20:34.060 little bigger. 20:35.120 --> 20:38.380 And we look down in Elements, now you can see we can hover over everything, 20:38.580 --> 20:40.120 and it'll show us it up top. 20:40.620 --> 20:45.300 And if we look at the paragraph here, and I just click on it, over here you'll 20:45.300 --> 20:49.860 actually see any CSS or any styling that is associated with this particular 20:49.860 --> 20:52.200 paragraph or whatever tag we're hovering over. 20:52.840 --> 20:56.620 And when you see this User Agent Style Sheet, this is the default browser 20:56.620 --> 20:57.180 styling. 20:57.380 --> 21:02.040 So you can see a paragraph is displayed as a block, so it's block-level, and then it 21:02.040 --> 21:03.600 actually has some default margin. 21:03.720 --> 21:07.240 Now I'm not going to talk about margin and padding and stuff too much in this video, 21:07.240 --> 21:08.720 because this is strictly HTML. 21:08.920 --> 21:10.440 Margin and padding is CSS. 21:10.440 --> 21:14.420 So this is going to be very little to no CSS in this video. 21:14.860 --> 21:17.860 But just know that margin is spacing around the element. 21:18.940 --> 21:23.540 And you'll see that this before and after is actually the top and bottom, 21:23.980 --> 21:26.040 so that's why you see this space right here. 21:26.300 --> 21:30.780 It's actually 1em, which is a measurement in CSS. 21:31.460 --> 21:33.880 So we do have margin on the top and bottom by default. 21:34.060 --> 21:37.900 And then 0 pixels on the start and end, which is the left and right of the 21:37.900 --> 21:38.240 paragraph. 21:38.240 --> 21:40.900 And it even gives us a little diagram here. 21:40.980 --> 21:44.160 You'll see we have the paragraph, and if you look up in the body it shows it 21:44.160 --> 21:48.100 highlighted padding, which there isn't any, border, and then the margin. 21:48.380 --> 21:51.140 And you'll actually see the margin highlighted up above. 21:51.420 --> 21:53.160 So this is really helpful. 21:53.820 --> 21:57.700 Again, I couldn't imagine doing web development without the Chrome tools. 21:59.020 --> 22:02.400 Now tags can either be inline or block-level elements. 22:02.600 --> 22:07.300 So inline elements do not start a new line when you use them. 22:07.300 --> 22:10.140 They take only the necessary width they need. 22:10.520 --> 22:13.800 Block-level elements, however, start a new line, and they take the full 22:13.800 --> 22:14.760 width of that line. 22:15.240 --> 22:17.100 So if this is confusing, don't worry about it. 22:17.160 --> 22:18.420 I will give you some examples. 22:19.000 --> 22:24.460 Block-level elements include tags like div, heading, or headings, sorry, 22:24.580 --> 22:26.920 h1 through h6, paragraphs, form. 22:27.760 --> 22:32.060 Inline elements include spans, images, links, and I'm going to go over 22:32.060 --> 22:33.480 all this stuff in a little bit. 22:33.480 --> 22:37.260 But just know that some tags are block-level, some are inline. 22:37.820 --> 22:42.200 So let's go into our paragraph here, and I'm going to add some other tags here. 22:42.380 --> 22:43.760 And these are all going to be inline. 22:43.840 --> 22:46.720 They're not going to make us start a new line when we use them. 22:47.000 --> 22:48.800 So let's take a look at strong. 22:49.600 --> 22:55.020 So strong is basically, you want to surround something and say that this text 22:55.020 --> 22:56.600 should be strong in some way. 22:56.700 --> 22:58.440 Now by default, it's going to be bold. 22:58.440 --> 23:02.260 So if we save this and I reload, you'll see that the text we surrounded the 23:02.260 --> 23:05.460 strong tags with is actually going to be bold by default. 23:05.740 --> 23:08.840 But that doesn't necessarily mean that it has to be bold. 23:08.940 --> 23:12.800 You can grab onto this from within your CSS, and you can change the font size, 23:12.860 --> 23:15.380 you can make it italic, whatever you want to do. 23:15.500 --> 23:19.460 Just know that it's a semantic tag for making the text stick out. 23:19.460 --> 23:26.740 And this will usually replace the old bold tags, which are not semantic at all and 23:26.740 --> 23:28.220 not recommended anymore. 23:28.720 --> 23:30.240 Same thing with em. 23:30.580 --> 23:34.020 So em is for emphasize. 23:34.520 --> 23:37.640 So let's surround this text right here with em. 23:39.240 --> 23:40.700 And we'll save and reload. 23:40.920 --> 23:46.620 And again, by default, it's going to be italic. 23:47.000 --> 23:48.080 So you'll see right here. 23:48.080 --> 23:53.380 But again, you can grab onto this in CSS, and you can change it to whatever style 23:53.380 --> 23:53.900 you want. 23:54.180 --> 23:57.720 It just basically means that this part of the document should be emphasized, 23:58.000 --> 23:59.340 or this text should be emphasized. 24:00.520 --> 24:02.860 Alright, so now let's take a look at links. 24:03.160 --> 24:07.100 So what I'm going to do is I'll go... let's go to the second paragraph here. 24:07.460 --> 24:11.980 And let's say we want to wrap this text in a link to go to either another page on our 24:11.980 --> 24:13.580 site or an external website. 24:13.920 --> 24:15.960 So a link is actually an a tag. 24:15.960 --> 24:17.000 So let's say a. 24:17.140 --> 24:18.780 And we're going to give it an attribute. 24:19.020 --> 24:20.780 And I'm going to talk about attributes in a second. 24:21.360 --> 24:23.300 Okay, but let's surround this text here. 24:24.460 --> 24:28.360 Alright, and then if I save that and reload, notice over here we now have this 24:28.360 --> 24:29.360 text as a link. 24:29.800 --> 24:35.520 Now, the href attribute is going to be the location that we want this link to open. 24:35.860 --> 24:37.260 And this could be either local. 24:37.460 --> 24:41.340 It could be, let's say, if we had an about .html page on our site. 24:42.100 --> 24:43.720 Or it could be external. 24:43.720 --> 24:47.880 So if we want to put http, we'll say google.com. 24:48.640 --> 24:52.580 And if I save that and we go over here and we click on that link, it's going to open 24:52.580 --> 24:53.540 google.com. 24:53.880 --> 24:56.280 Now notice it opens it on the same page. 24:56.600 --> 25:00.420 Usually when you have an external website, you don't want the user to just leave your 25:00.420 --> 25:01.240 site like that. 25:01.640 --> 25:04.800 So what you could do is you could add another attribute called target. 25:05.520 --> 25:07.760 And one of the values for this is underscore blank. 25:08.340 --> 25:11.600 And that's going to open up a new tab with this site. 25:11.600 --> 25:16.940 So if we save, reload, and click this, notice that Google opens on a new tab and 25:16.940 --> 25:18.780 we still have our site right here. 25:19.240 --> 25:22.320 So it stops the user from having to leave your site. 25:24.000 --> 25:27.900 You usually only want to use target blank if it's an external site. 25:27.960 --> 25:31.080 If you're going to another page on your website, you don't want that to happen. 25:31.200 --> 25:34.920 You don't want all these tabs opening up when you're just navigating the site. 25:35.980 --> 25:40.520 So all HTML tags can have something called an attribute or multiple attributes. 25:40.520 --> 25:44.100 And what they do is they provide more information about a certain element. 25:44.620 --> 25:48.680 For instance, the href provided in the link, what we just did, we created an a 25:48.680 --> 25:49.700 tag with an href. 25:50.280 --> 25:55.520 And what the href does, as you saw, is it opens up or directs it to a certain 25:55.520 --> 25:57.320 location, a certain website link. 25:57.900 --> 26:02.040 We also provided the target attribute, which is not required, but it still 26:02.040 --> 26:05.460 allowed us to make it so that the link opened in another tab. 26:06.660 --> 26:09.360 Attributes are always placed at the start tag. 26:10.000 --> 26:12.480 And they're always formatted as key-value pairs. 26:12.800 --> 26:18.480 The actual attribute itself, such as href or target, as we saw, that's the key. 26:18.640 --> 26:20.120 And then whatever the value is. 26:20.440 --> 26:25.760 So we have the attribute name or the attribute key, and then the value. 26:26.200 --> 26:28.260 Now the value is always going to be in quotes. 26:28.440 --> 26:30.480 You can use double quotes or single quotes. 26:30.820 --> 26:34.500 I would suggest double quotes because that's usually what's used. 26:34.500 --> 26:38.280 Alright guys, so let's get back to our HTML. 26:38.600 --> 26:41.320 So we're going to go below the paragraphs that we just created. 26:41.520 --> 26:43.700 And now I'm going to show you something called a list. 26:44.700 --> 26:47.380 So there's basically two kinds of lists. 26:47.500 --> 26:49.580 There's an unordered list and an ordered list. 26:49.760 --> 26:52.960 So let's start with an unordered list, which is a ul tag. 26:53.480 --> 26:56.200 So in the ul, we need to have list items. 26:56.520 --> 26:59.760 A list is basically like a bullet point list. 27:00.360 --> 27:03.220 So each list item is going to have an li tag. 27:03.220 --> 27:05.380 And then in here we can put whatever we want. 27:05.480 --> 27:07.620 Let's just put the text list item 1. 27:08.100 --> 27:10.000 Okay, and then I'm just going to copy this. 27:11.460 --> 27:13.800 And we'll go ahead and we'll put four of them in. 27:13.920 --> 27:16.560 So we'll say list item 1, 2, 3, 4. 27:16.640 --> 27:18.480 And it doesn't matter what you put inside here. 27:18.840 --> 27:20.820 But let's go ahead and save that and reload. 27:21.480 --> 27:25.180 And notice that we have bullet points now for our list items. 27:25.400 --> 27:27.640 It also adds some default padding. 27:27.840 --> 27:29.820 Notice that this is pushed over by default. 27:29.820 --> 27:33.040 And if we go ahead and open up our Chrome tools. 27:34.660 --> 27:36.460 And actually let's make it a little bigger. 27:36.720 --> 27:37.140 There we go. 27:37.480 --> 27:41.440 So over here, let's hover over ul. 27:42.460 --> 27:46.620 And you'll see that there's actually some default styling from user agent style 27:46.620 --> 27:49.280 sheet, which is basically just the browser default. 27:49.660 --> 27:51.400 So it's displayed as a block. 27:52.100 --> 27:57.040 Okay, it has a list style type of disk, which you can change within the CSS if you 27:57.040 --> 27:58.700 want to have a different kind of bullet point. 27:58.700 --> 28:00.340 It adds some margin. 28:00.980 --> 28:01.260 Okay. 28:01.780 --> 28:05.960 Actually, yeah, it adds margin before and after 1m. 28:06.460 --> 28:11.400 And then also adds 40 pixels of padding on the start, which is the left. 28:11.620 --> 28:13.660 Okay, so it pushes it over 40 pixels. 28:13.960 --> 28:17.640 And of course, you can overwrite this from within your CSS if you want to change 28:17.640 --> 28:17.960 that. 28:18.060 --> 28:19.560 You can also remove the bullet points. 28:19.620 --> 28:22.140 You can do whatever you want as far as styling. 28:22.340 --> 28:24.320 But we're not getting into that just yet. 28:25.060 --> 28:25.400 All right. 28:25.440 --> 28:27.460 So that is an unordered list. 28:27.460 --> 28:30.560 Now, we also have an ordered list, which is an OL tag. 28:30.740 --> 28:32.300 So what I'll do is just copy this. 28:33.960 --> 28:37.100 And I'm just going to change it to an OL instead of a UL. 28:38.780 --> 28:40.440 Okay, we'll save that, reload. 28:40.580 --> 28:44.480 And notice that the ordered list now gets rid of the bullet points and replaces it 28:44.480 --> 28:45.400 with the numbers. 28:45.900 --> 28:48.860 Okay, so it'll automatically add numbers to your list. 28:49.500 --> 28:53.300 Now, unordered lists are usually what's used for website navigation. 28:53.360 --> 28:56.880 When you see a nav bar up at the top, that's usually just an unordered list. 28:56.880 --> 29:01.720 It's just styled so that the elements float to the right. 29:01.840 --> 29:06.220 They're displayed inline, and it has some really nice background colors and things 29:06.220 --> 29:06.740 like that. 29:06.880 --> 29:10.340 But as far as the HTML goes, it's usually just a simple list. 29:11.380 --> 29:13.600 All right, so next thing we're going to look at are tables. 29:14.140 --> 29:16.860 So let's put a comment here, and we'll just say table. 29:18.040 --> 29:19.860 So it's going to be a table tag. 29:20.940 --> 29:24.260 All right, and there's quite a few tags that go into building a table. 29:24.260 --> 29:29.640 So we have table, and then we have a head, an area for the heading, and then an area 29:29.640 --> 29:30.980 for the table body. 29:31.200 --> 29:36.900 So we say THEAD, okay, and then we're going to have TBODY. 29:38.900 --> 29:42.840 Now, in the heading is where we're going to put the row that has, like, 29:42.940 --> 29:46.560 you know, we're going to have a name, email, and age column. 29:47.060 --> 29:49.300 All right, so these will be the headings of each column. 29:49.300 --> 29:55.080 So we're going to put a TR, okay, TR is table row, and then each heading is 29:55.080 --> 29:56.620 going to have a TH tag. 29:56.800 --> 29:58.620 All right, so this will be, let's say, name. 29:59.660 --> 30:00.780 We'll put another one. 30:00.900 --> 30:01.900 This will be email. 30:03.660 --> 30:05.340 And let's say age. 30:05.780 --> 30:07.160 Okay, so these are the headings. 30:07.260 --> 30:10.760 Now, if I save this and reload, this is what it's going to look like by 30:10.760 --> 30:11.180 default. 30:11.700 --> 30:14.900 Now, I'm going to do something here because I don't want you guys to have to 30:14.900 --> 30:16.620 keep looking at the bottom of the screen. 30:16.620 --> 30:20.780 So what I'm going to do is just put in a div right here with a style attribute. 30:21.600 --> 30:22.620 You don't have to do this. 30:23.220 --> 30:24.600 I just want to move this stuff down. 30:24.660 --> 30:27.980 I'm just going to put a margin top of 500 pixels. 30:28.960 --> 30:32.580 All right, and that's just going to make it so that I can put this so you guys can 30:32.580 --> 30:34.240 look in the middle now, not at the bottom. 30:35.120 --> 30:36.600 All right, so back to our table. 30:36.720 --> 30:40.060 We have our T head with our table row and our headings. 30:40.200 --> 30:41.620 Now we want another TR. 30:42.580 --> 30:45.840 Okay, and this time we're not going to use TH because these aren't headings anymore. 30:45.840 --> 30:47.000 This is actual data. 30:47.160 --> 30:48.500 So we're going to use TD. 30:48.940 --> 30:51.480 Okay, so let's say we want a name. 30:51.660 --> 30:52.640 I'll just put my name. 30:54.520 --> 30:57.040 And then we'll put another TD with an email. 30:57.380 --> 31:00.400 We'll just say brad at something dot com. 31:01.840 --> 31:03.340 And then we'll put age. 31:03.640 --> 31:04.520 Put 35. 31:05.340 --> 31:06.540 Save that, reload. 31:06.660 --> 31:08.960 And now we have some data inside of our table. 31:09.340 --> 31:11.960 Okay, and you're most likely going to have more than one row. 31:12.580 --> 31:14.260 So what I'll do is copy that. 31:14.260 --> 31:17.580 Paste it in two times. 31:18.760 --> 31:20.180 And let's just change the name up here. 31:20.360 --> 31:21.260 We'll say John Doe. 31:24.000 --> 31:25.560 We'll say 45. 31:26.080 --> 31:27.180 And then let's change this. 31:27.280 --> 31:30.400 We'll say Sarah Williams. 31:34.840 --> 31:36.700 We'll make her 25. 31:37.500 --> 31:38.640 All right, so we'll reload. 31:38.740 --> 31:40.060 And now we have a couple names. 31:41.100 --> 31:45.660 And again, this is going to look very ugly because we don't have any CSS whatsoever. 31:45.980 --> 31:47.540 It's just HTML markup. 31:47.760 --> 31:49.820 And this is what a default table looks like. 31:50.460 --> 31:55.960 Now, the way that we build HTML websites has changed along the past few years. 31:56.460 --> 31:59.960 We used to use tables to actually create website layouts. 32:00.160 --> 32:03.480 For instance, you'd have a sidebar, and then a main area, and then another 32:03.480 --> 32:04.120 sidebar. 32:04.400 --> 32:07.000 And that could actually be a table with a couple columns. 32:07.120 --> 32:09.020 That is not recommended anymore. 32:09.020 --> 32:12.600 You don't want to use tables for anything for your layout. 32:12.720 --> 32:15.160 You want to use tables for tabular data only. 32:15.620 --> 32:20.480 So if you have a list of customers with their names and info like this, 32:20.540 --> 32:21.860 that's fine to use a table. 32:22.080 --> 32:23.660 But do not use it for your layout. 32:23.820 --> 32:26.040 You want to use CSS for your website layout. 32:28.040 --> 32:32.260 That's very 1999-ish to use tables for layouts. 32:32.700 --> 32:38.560 And there's little rules like that that they're not enforced by the browser per se 32:38.560 --> 32:40.720 or by the technology, but it's just... 32:40.720 --> 32:42.720 there's a right and a wrong way to do things. 32:43.340 --> 32:49.300 And I'm a big advocate for doing things differently and everyone not being the 32:49.300 --> 32:51.920 same, but some things are just wrong. 32:52.080 --> 32:55.760 And using tables for a layout is wrong. 32:56.740 --> 33:01.700 Alright, so now we're going to move on to forms, which you see a lot of on the 33:01.700 --> 33:02.040 internet. 33:03.660 --> 33:08.620 Now, the important thing to know about forms is that with HTML, we can create the 33:08.620 --> 33:13.560 actual look of the form, but we can't add functionality to the form with HTML. 33:13.960 --> 33:15.680 For instance, a login form. 33:15.900 --> 33:20.480 You can build the actual look of the form with HTML, but to actually make it 33:20.480 --> 33:24.760 function, you need to have something like PHP or some other programming language 33:24.760 --> 33:26.780 with dynamic functionality. 33:27.480 --> 33:30.100 Alright, so we're only covering the look of the form. 33:31.340 --> 33:33.940 So we're going to put in a form tag. 33:33.940 --> 33:38.700 Alright, now usually with a form, you'll see an attribute called action, 33:39.160 --> 33:43.020 and that's going to basically submit the form to a certain page. 33:43.400 --> 33:45.280 For instance, a PHP page. 33:45.500 --> 33:49.380 So let's say it was going to go to a file called process.php on our server, 33:49.640 --> 33:53.620 and maybe that would be a newsletter form or a register form, something like that. 33:53.940 --> 33:55.280 You'll also see method. 33:57.620 --> 34:02.340 And method is usually going to be post for a form, this meaning that we're making a 34:02.340 --> 34:07.080 post request to the server, and posts are used to do things like add data to a 34:07.080 --> 34:08.580 database, stuff like that. 34:08.940 --> 34:15.280 It's pretty secure, as opposed to get, which is going to submit it, and with a 34:15.280 --> 34:19.420 get request, you'll actually see the data filled in in the URL, and it's not very 34:19.420 --> 34:19.820 safe. 34:20.100 --> 34:24.260 But it's fine for things like search, things where you're not actually adding 34:24.260 --> 34:26.020 data or something to a server. 34:26.460 --> 34:29.340 Alright, but that's a lot more advanced, we're not going to get into that now. 34:29.340 --> 34:34.520 Okay, I will leave this here, but just know that this has to do with more 34:34.520 --> 34:36.540 advanced server-side programming. 34:37.460 --> 34:41.700 So, in our form, let's go ahead and let's add a label. 34:42.140 --> 34:45.760 Okay, so we're going to have a couple inputs, we're going to put a label for, 34:45.840 --> 34:47.000 let's say, first name. 34:47.680 --> 34:50.940 Alright, and then under that, let's put an input tag. 34:51.380 --> 34:55.440 So an input is going to have an attribute called type, because there's a lot of 34:55.440 --> 34:56.220 different inputs. 34:56.940 --> 34:59.140 This is actually going to be a text input. 34:59.560 --> 35:01.880 Okay, which is probably the most common. 35:02.440 --> 35:07.100 And then the name attribute has to do with, again, server-side programming. 35:07.260 --> 35:12.160 If we were submitting this to a PHP file, this name attribute is how we would grab 35:12.160 --> 35:14.560 the value of this form that's submitted. 35:15.020 --> 35:17.760 Okay, so it's not going to make any difference to us what we put here, 35:17.860 --> 35:20.360 but I'm just going to put first-name. 35:21.920 --> 35:24.120 Alright, so let's go ahead and save that and reload. 35:24.300 --> 35:25.260 And this is what we get. 35:26.160 --> 35:29.240 Now this is awfully close to the table, so what I'm going to do is put a line 35:29.240 --> 35:29.800 break here. 35:31.120 --> 35:34.880 Usually to separate things like this, we would use CSS, but I'm not getting into 35:34.880 --> 35:37.400 CSS yet, so let's just put a line break. 35:37.500 --> 35:38.960 That's going to push it down a little bit. 35:39.560 --> 35:43.080 Alright, we also have an HR tag, which I haven't talked about yet, 35:43.160 --> 35:48.320 which is a horizontal rule, and that gives us kind of a line in our page. 35:48.460 --> 35:51.620 So if I reload, you'll see we now have a line that goes across the page. 35:52.120 --> 35:54.240 I'm just going to put another BR under it as well. 35:55.500 --> 35:59.140 Alright, so it just allows us to separate things. 35:59.960 --> 36:02.280 So let's create another field here in our form. 36:02.340 --> 36:03.220 Let's do a last name. 36:03.360 --> 36:08.180 So what I'll do is copy this, and let's just change this to last name, 36:09.500 --> 36:10.660 name, last name. 36:10.740 --> 36:11.400 Actually, you know what? 36:11.720 --> 36:15.500 Usually what I do here is use camelCase. 36:16.120 --> 36:17.220 So we'll go like this. 36:17.980 --> 36:18.940 Instead of the hyphen. 36:19.100 --> 36:22.900 CamelCase is basically starting it with a lowercase, and then every other word, 36:22.900 --> 36:25.280 every word after that is going to be uppercase. 36:26.140 --> 36:28.160 So now we have a first name and a last name. 36:28.240 --> 36:30.440 If I reload, you'll see it down here. 36:30.580 --> 36:33.280 Now, labels and inputs are both inline. 36:33.340 --> 36:37.200 That's why they're on the same line here, and they only take up the amount of width 36:37.200 --> 36:38.640 that that element takes up. 36:39.360 --> 36:44.120 Usually you'll have form fields, you know, on separate lines. 36:44.240 --> 36:48.260 So what I'm going to do is wrap them in a div, because remember, divs are 36:48.260 --> 36:52.480 block-level elements, so that'll actually put it on the next line. 36:54.560 --> 36:59.220 Alright, so let's do that, and then we'll put a div here, wrap that around both the 36:59.220 --> 37:01.140 label and the input. 37:03.100 --> 37:05.980 Okay, so now if we reload, now they're on separate lines. 37:06.260 --> 37:07.660 They're still pretty close together. 37:08.160 --> 37:12.460 Like I said, we would use CSS to add some padding there, but I'm just going to put a 37:12.460 --> 37:13.780 line break in between the two. 37:14.840 --> 37:15.320 Okay. 37:17.360 --> 37:20.000 Alright, so let's look at some of the other types of field. 37:20.140 --> 37:21.340 Now, you may want an email. 37:23.780 --> 37:25.320 Actually, let's put a line break there. 37:26.140 --> 37:30.520 So for email, you could, of course, use text. 37:31.160 --> 37:32.240 Let me just change this. 37:32.620 --> 37:37.960 You could use text, but with HTML5, we now have a type that we can use called 37:37.960 --> 37:42.860 email, and that'll actually add a little bit of validation without having to add 37:42.860 --> 37:44.040 any JavaScript or anything. 37:44.180 --> 37:48.420 If we try to submit our form, and it's not a valid email address, and we have the 37:48.420 --> 37:51.320 type of email, it's going to give us a little error that pops up. 37:51.900 --> 37:56.100 Alright, so you want to use type email when you're dealing with an email address. 37:57.320 --> 38:03.700 Alright, so let's copy that, and let's put, let's say, message. 38:04.340 --> 38:08.300 So what I want to do here is I want to use a text area, which is kind of like a 38:08.300 --> 38:09.820 bigger text input. 38:09.820 --> 38:14.260 So for that, we don't actually use an input tag, there's an actual text area 38:14.260 --> 38:14.760 tag. 38:15.600 --> 38:16.980 Okay, so we'll go like that. 38:17.340 --> 38:24.400 And usually your text area, if you're submitting to a server-side file, 38:24.480 --> 38:26.560 you'll have a name, so we'll call it message. 38:27.820 --> 38:31.120 Alright, we'll save that, reload, and now we have a text area. 38:31.580 --> 38:35.020 Okay, and you can actually make it bigger and smaller with this little control here. 38:36.860 --> 38:41.960 Another field that you'll see quite a bit is a select list. 38:42.400 --> 38:45.280 Okay, so for that, I'm just going to copy this div. 38:47.580 --> 38:52.640 So let's say this is, I don't know, we'll just say gender, I guess. 38:53.200 --> 38:56.300 So let's say we want a select list to choose either male or female. 38:57.100 --> 39:03.400 So we'll put a select, we'll give it a name of gender. 39:06.560 --> 39:11.500 Okay, now each select is going to have a couple options. 39:12.020 --> 39:16.320 So that'll be the option tag, and then usually you'll have a value associated 39:16.320 --> 39:17.320 with each option. 39:17.500 --> 39:18.420 So let's say male. 39:19.680 --> 39:23.740 Okay, and then the actual text to be displayed will go in here like that. 39:24.820 --> 39:27.800 Alright, so let's save that, I mean copy that. 39:30.040 --> 39:34.080 And just to be politically correct, we'll go ahead and do an other. 39:35.200 --> 39:39.440 So this will be female, and this will be other. 39:42.360 --> 39:46.680 Alright, so if we save that and reload, now we have a little select list with 39:46.680 --> 39:48.420 male, female, other for gender. 39:49.640 --> 39:53.540 Alright, now we have a couple other field types that I want to show you, 39:53.640 --> 39:56.380 but I'm just going to paste these in because we're kind of running out of time 39:56.380 --> 39:56.620 here. 39:56.720 --> 39:59.960 So I'm going to go right into this div, and I'm going to paste in a couple more. 40:00.080 --> 40:04.380 So this is actually a number type, so we're putting an age here with a type 40:04.380 --> 40:09.360 of number, and it has a name, and then I also added a value here because we can 40:09.360 --> 40:12.500 also add a predefined value to our inputs. 40:13.400 --> 40:16.460 Alright, and then we also have the type of date. 40:16.760 --> 40:18.660 Okay, so this is actually a date selector. 40:19.080 --> 40:23.880 And these are HTML5, okay, so these are both HTML5 standards. 40:24.400 --> 40:27.720 So let's save that and reload, and now you'll see you have a number and 40:27.720 --> 40:31.240 it actually has these arrows where we can switch, we can make the number go up and 40:31.240 --> 40:31.540 down. 40:31.540 --> 40:34.880 And then the date, you'll see we have this date selector. 40:37.700 --> 40:42.320 Now, like I said, we can have a value, we can put a value to anything we want 40:42.320 --> 40:42.600 here. 40:43.460 --> 40:50.020 Now, before HTML5, if you wanted to have like, for instance, we'll put a value 40:50.020 --> 40:56.660 here, and we'll just say, let's say we wanted to say, enter first name. 40:57.700 --> 40:59.020 Okay, and reload. 40:59.560 --> 41:03.180 Usually, you know, before HTML5, we would have to do this and we'd use 41:03.180 --> 41:07.460 JavaScript to make it so that when we clicked in here, this would go away. 41:07.920 --> 41:10.340 Okay, and that was, that was a real pain in the ass. 41:10.440 --> 41:14.840 So with HTML5, they actually added a placeholder that we could use here. 41:16.080 --> 41:20.600 Okay, so we'll say placeholder equals enter first name, and now you'll see that 41:20.600 --> 41:24.320 it's grayed out, and if I click in here, we can actually replace it. 41:24.760 --> 41:26.980 Okay, so that, that made things a lot easier. 41:28.040 --> 41:31.440 So the last thing we would need for the form is an input button. 41:31.780 --> 41:35.440 So let's go down to the bottom here, and what I'm going to do is put in an 41:35.440 --> 41:37.660 input, and we're going to say type submit. 41:38.260 --> 41:42.700 Okay, and we'll give it a name of submit, and it's also going to need a value, 41:42.860 --> 41:46.140 which is going to be the actual text of the button, which will be submit. 41:46.960 --> 41:49.640 Alright, so we'll reload, and now we have a submit button. 41:49.820 --> 41:52.980 Okay, it's going to, it's going to actually get submitted to process.php, 41:53.760 --> 41:56.920 because that's what we put in the action of the form, but that doesn't actually 41:56.920 --> 41:57.240 exist. 41:58.340 --> 41:58.480 Okay. 41:59.860 --> 42:04.400 Now we can also have buttons outside of forms, so let's go under the form. 42:05.040 --> 42:06.500 I'm just going to put a comment here. 42:08.420 --> 42:10.400 And there is a button tag. 42:10.740 --> 42:13.860 Okay, so we'll put a button tag here, and we'll just say click me. 42:14.280 --> 42:16.060 Now, this isn't going to do anything. 42:16.220 --> 42:19.260 If we reload, it's going to show the button, but it's not going to do anything 42:19.260 --> 42:23.860 because in order to hook up a button to actually do something, you need to use 42:23.860 --> 42:24.540 JavaScript. 42:25.020 --> 42:28.900 Okay, so what you would do is you would add an event like click equals, 42:29.380 --> 42:33.380 and then you have some function, but we're not going to get into that. 42:33.460 --> 42:34.900 That's something for another video. 42:35.220 --> 42:37.740 Okay, we're just focusing on HTML here. 42:38.320 --> 42:44.220 And as you can see, HTML doesn't really do much as far as, you know, functionality 42:44.220 --> 42:45.560 and dynamic. 42:45.880 --> 42:47.680 That's why it's not a programming language. 42:47.840 --> 42:48.780 It's a markup language. 42:48.940 --> 42:53.380 It's just used to display stuff on the screen, and then use other languages like 42:53.380 --> 42:55.200 JavaScript to make it dynamic. 42:56.200 --> 42:59.780 Alright, so the next thing I want to look at are images, or the image tag. 43:02.040 --> 43:07.180 Okay, so for images, we're going to use an img tag, and this is actually a 43:07.180 --> 43:08.160 self-closing tag. 43:08.300 --> 43:11.960 We don't need to do slash image or anything like that. 43:12.040 --> 43:13.020 You can see it doesn't even... 43:13.020 --> 43:15.740 Sublime Text doesn't even do it for us automatically. 43:16.520 --> 43:21.460 Alright, now an image tag by itself means nothing because it doesn't know what image 43:21.460 --> 43:21.960 to load. 43:22.100 --> 43:23.740 So let's go ahead and grab an image. 43:24.400 --> 43:26.420 I'm just going to search for sample image. 43:26.800 --> 43:28.120 We'll grab this bird here. 43:30.400 --> 43:30.760 Okay, whoops. 43:31.980 --> 43:33.000 Didn't mean to do that. 43:33.080 --> 43:33.920 We'll just save it. 43:34.460 --> 43:35.740 And I'm going to save it into... 43:37.420 --> 43:38.180 Where is this? 43:38.260 --> 43:39.520 I think it's on my desktop. 43:41.740 --> 43:43.100 Yep, HTML cheat sheet. 43:43.740 --> 43:46.820 And let's save it as just sample.jpg. 43:49.040 --> 43:52.640 Alright, and then what we'll do is go to our image and we'll say source. 43:52.640 --> 43:54.020 Okay, source attribute. 43:54.840 --> 43:58.940 And we're going to set this to the name of the image which is sample.jpg. 43:59.520 --> 44:04.040 Alright, and then we'll go back to our HTML, reload, and now we have the image. 44:05.000 --> 44:12.080 Now, the reason it knows where to look is because this is actually in the same 44:12.080 --> 44:17.580 folder as our index HTML, so we didn't have to put any folder names or anything 44:17.580 --> 44:18.000 here. 44:18.140 --> 44:23.420 So what I'm going to do is open up our folder and you can see that it's in the 44:23.420 --> 44:24.620 same directory. 44:25.780 --> 44:30.320 So usually when you build websites you'll have a folder called images or img or 44:30.320 --> 44:31.220 something like that. 44:31.620 --> 44:33.620 And then you'll have your images inside there. 44:34.000 --> 44:38.860 Now if I reload, it's not going to show the image because it's looking in the root 44:38.860 --> 44:40.880 here, but it's really in the images folder. 44:41.300 --> 44:46.900 So what we would have to do is change the location here to go to images slash sample 44:46.900 --> 44:47.340 .jpg. 44:47.560 --> 44:49.420 And we reload and now it's back. 44:50.080 --> 44:53.060 Alright, now with images you should also use an alt attribute. 44:54.620 --> 44:58.240 And basically what this does is if it can't find the image it's going to display 44:58.240 --> 44:59.420 whatever text is here. 44:59.900 --> 45:01.960 So let's just say my sample image. 45:03.640 --> 45:07.660 Okay, now if I save and reload we're not going to see any difference, but if for 45:07.660 --> 45:11.980 some reason it can't find the image, let's just change the name and save and 45:11.980 --> 45:12.360 reload. 45:12.800 --> 45:14.900 Now you'll see that it'll display the text. 45:15.100 --> 45:20.300 So you have a way to kind of show what this image is even if it doesn't, 45:20.400 --> 45:22.820 even if it doesn't load or it can't find it. 45:23.540 --> 45:25.080 Alright, let's just change that back. 45:26.980 --> 45:30.560 Alright, now there's also a width and height attribute you can use in HTML. 45:31.680 --> 45:36.640 Usually I would suggest using CSS to do this stuff, but it is available. 45:37.180 --> 45:43.180 So let's say we wanted this to be, let's say 200 pixels and reload. 45:43.520 --> 45:45.300 It'll change it to 200 pixels. 45:45.520 --> 45:48.940 Notice that images are also inline, that's why it's not on a new line. 45:48.940 --> 45:51.580 So what I'm going to do here is just put a line break. 45:56.140 --> 45:57.240 Oh, I have to put another. 45:57.360 --> 45:58.700 Oh, I put it below the image. 46:02.770 --> 46:03.090 Alright. 46:04.230 --> 46:07.170 And notice that the height is set to auto. 46:07.430 --> 46:10.110 Okay, so the height is auto, so the image still looks good. 46:10.230 --> 46:13.610 But if you wanted to change the height up, you could do that as well. 46:13.730 --> 46:16.850 So let's say you change it to 50 and reload. 46:17.050 --> 46:20.410 And it'll distort it, but it will change it to what you set it to. 46:20.770 --> 46:22.930 But I'm just going to keep the height. 46:22.930 --> 46:24.550 I'm just going to get rid of the height, so it's auto. 46:26.670 --> 46:29.450 Now, if you wanted to, you could wrap a link around the image. 46:29.990 --> 46:31.070 So let's put an A here. 46:35.000 --> 46:38.360 Alright, and then you could actually point to the location of the image. 46:38.520 --> 46:42.920 So we'll just grab this, put that in the href, and reload. 46:43.100 --> 46:45.900 And now if I click on the image, it's going to open it up in the browser. 46:46.400 --> 46:50.620 Okay, browsers don't just open up HTML files, they can open up other types, 46:50.720 --> 46:51.900 such as an image. 46:52.720 --> 46:53.020 Alright. 46:53.860 --> 46:58.380 So we're almost done with the basic HTML tags, and I want to move on to HTML5 46:58.380 --> 46:59.360 semantic tags. 46:59.820 --> 47:02.280 But the last thing I want to show you is quotations. 47:03.060 --> 47:06.260 Okay, so we have different quotation elements we can use. 47:06.600 --> 47:07.880 So let's say quotations. 47:08.640 --> 47:12.240 And those are blockquote, abbreviate, and cite. 47:12.520 --> 47:14.040 Okay, so let's start with blockquote. 47:14.180 --> 47:17.000 And this is usually used just for that, for some kind of quote. 47:17.440 --> 47:21.280 So let's put in blockquote tag. 47:22.200 --> 47:25.180 And this takes an attribute called cite. 47:25.700 --> 47:29.340 And this is going to be from, you know, from where the quote comes from. 47:29.600 --> 47:33.560 Let's say it comes from traversymedia.com. 47:34.000 --> 47:36.420 And we'll just put some sample text in here. 47:36.480 --> 47:37.760 I'll say larm tab. 47:38.400 --> 47:39.540 And we'll save that. 47:40.440 --> 47:42.940 And you'll see that it does add a little bit of styling. 47:43.080 --> 47:45.500 It gives it some padding and pushes it to the middle a little bit. 47:46.580 --> 47:48.880 It's not going to show the actual cite. 47:49.060 --> 47:50.940 Okay, if we look at the source code, it will. 47:51.940 --> 47:55.260 So if we go down right here, you'll see it does show it here. 47:55.880 --> 47:58.860 Alright, and you can style this however you want from within CSS. 47:59.640 --> 48:03.740 We also have the abbr tag or abbreviation tag. 48:04.600 --> 48:12.720 So let's say we have a paragraph here and we'll say the, let's say the www is 48:12.720 --> 48:13.780 awesome. 48:14.220 --> 48:17.480 Alright, now this, we all know, stands for World Wide Web. 48:17.620 --> 48:21.280 So what I'm going to do is just wrap this in an abbr tag. 48:21.940 --> 48:23.080 And we're going to give it a title. 48:25.400 --> 48:28.340 And we'll say World Wide Web. 48:28.660 --> 48:30.260 Okay, so it's used for abbreviations. 48:30.940 --> 48:33.020 So let's go ahead and save that, reload. 48:33.320 --> 48:35.320 And now notice that it has an underline. 48:35.420 --> 48:39.660 And if we go and we hover it, it'll show us the full title. 48:40.600 --> 48:43.000 Okay, we also have a cite tag. 48:43.660 --> 48:44.860 Okay, c-i-t-e. 48:45.000 --> 48:46.760 So let's put another paragraph here. 48:47.220 --> 48:54.000 And let's say HTML Crash Course by Brad Traversy. 48:55.640 --> 49:02.160 Okay, and then we'll just wrap HTML Crash Course in a cite tag. 49:03.880 --> 49:05.760 Okay, we'll save that, reload. 49:06.120 --> 49:08.740 And it gives us this italic style here. 49:09.560 --> 49:13.560 Alright, and it lets, it's semantic to let the browser know that this is something 49:13.560 --> 49:14.380 that's being cited. 49:15.560 --> 49:19.280 Alright, so those are the basic HTML tags and elements. 49:19.500 --> 49:23.620 Now what I want to do is talk a little bit about HTML 5 semantic tags. 49:24.480 --> 49:29.500 So the HTML 5 semantic tags clearly describe their meaning to both the browser 49:29.500 --> 49:30.480 and the developer. 49:31.060 --> 49:33.460 So if we look over here, these are the tags that were added. 49:33.660 --> 49:36.340 And this is kind of a diagram of what you would use these for. 49:36.600 --> 49:39.000 Okay, you use them to kind of lay out your website. 49:39.220 --> 49:41.880 So we have header, which obviously would be the header. 49:42.020 --> 49:46.240 You'd usually have your logo, things like that, your social media links. 49:46.420 --> 49:49.300 Then we have the nav tag, which would be your nav bar. 49:50.140 --> 49:55.900 Section, okay, section would describe like the copy text or something like that on 49:55.900 --> 49:57.000 your home page or whatever. 49:57.660 --> 50:00.900 And then if you have like a blog, you could have an article tag around each 50:00.900 --> 50:01.940 post in the blog. 50:02.700 --> 50:05.880 A side has to do with just like sidebar content. 50:06.420 --> 50:10.780 Alright, and then you have the footer, which is going to be your copyright or 50:10.780 --> 50:13.760 your privacy policy links, things like that. 50:14.160 --> 50:18.420 Okay, so HTML 5 has created these tags to kind of structure your document even 50:18.420 --> 50:18.880 further. 50:19.620 --> 50:22.640 Alright guys, so what we're going to do is we're going to create a new HTML page, 50:22.820 --> 50:26.780 and we're going to use these HTML 5 semantic tags to map out our page. 50:27.320 --> 50:31.360 So let's go to, let's see, HTML cheat sheet folder. 50:31.640 --> 50:35.780 We have our index page, but I'm going to create a new text document, and I'm going 50:35.780 --> 50:36.840 to call this blog. 50:37.600 --> 50:38.500 Yeah, blog.html. 50:39.260 --> 50:43.740 Okay, so we'll say that this is kind of a, you know, like a blog post, a blog page or 50:43.740 --> 50:45.980 a news page, something like that. 50:46.660 --> 50:48.620 So let's open that up with Sublime Text. 50:49.400 --> 50:50.420 Just bring that over. 50:51.480 --> 50:55.940 Alright, and just like with the index page, we need to have our doc type, 50:56.060 --> 50:58.060 our HTML head tags, things like that. 50:58.480 --> 51:02.400 Now, with Sublime Text there's actually a shortcut we can do, and that's to do HTML 51:02.400 --> 51:05.940 tab, and it'll give us kind of a default structure. 51:06.120 --> 51:07.440 So just a nice little shortcut. 51:08.260 --> 51:12.580 Now, in the title, let's just say, we'll just say my blog. 51:13.580 --> 51:16.600 Alright, we're going to add some other stuff in the head in a little bit as well, 51:16.800 --> 51:21.040 but let's go ahead and start with our HTML5 semantic tags. 51:21.180 --> 51:22.860 So first thing we're going to do is have a header. 51:24.200 --> 51:30.220 Alright, and in the header, we're just going to have an H1 and we'll just say my 51:30.220 --> 51:30.620 website. 51:30.960 --> 51:33.960 Okay, again, this is going to look very ugly because we're not using CSS, 51:34.880 --> 51:38.660 but just structurally, you want to have your header at the top. 51:39.320 --> 51:41.940 Alright, then what we'll do is have a section. 51:41.940 --> 51:47.320 Okay, so this would be like the main area of the page. 51:48.160 --> 51:52.260 So if this were like an about page, we could have a couple paragraphs about 51:52.260 --> 51:53.260 the company or whatever. 51:53.580 --> 51:57.860 This is a blog page, so what we're going to do is we're going to have some article 51:57.860 --> 52:02.000 tags and then in each article will be each blog post. 52:02.480 --> 52:05.680 Okay, so let's go ahead and put an H3 here. 52:05.800 --> 52:07.020 That would be the title. 52:07.220 --> 52:09.120 We'll just say blog post 1. 52:10.460 --> 52:15.060 Alright, and then another tag that I haven't showed you yet is the small tag. 52:15.660 --> 52:20.720 And small is usually used for like create dates, things like that, just like sub 52:20.720 --> 52:21.180 content. 52:21.560 --> 52:27.420 So let's just say posted by Brad on July 17. 52:28.560 --> 52:30.920 Okay, so let's save that and take a look real quick. 52:31.000 --> 52:34.040 So we're going to go up here in our browser and we're going to just change 52:34.040 --> 52:37.540 index.html to blog.html. 52:39.720 --> 52:41.140 Alright, that's what it's going to look like. 52:41.300 --> 52:45.060 And by default, the small tags will actually make the text smaller. 52:46.540 --> 52:50.180 So let's put the actual post, which we'll put inside of a paragraph. 52:50.640 --> 52:54.200 So I'm going to type lorem, tab, gives us some sample content. 52:54.920 --> 52:58.320 Alright, and then usually on your main blog page you'll have more than one 52:58.320 --> 52:58.700 article. 52:59.200 --> 53:01.860 What I'm going to do is I'm going to give this a class of post. 53:03.000 --> 53:05.500 Okay, so each article will have a class of post. 53:05.680 --> 53:09.760 And then let's just copy this and we'll just paste in a couple more. 53:10.180 --> 53:15.640 Okay, this one will be blog post two and blog post three. 53:16.460 --> 53:20.560 Alright, so if we save that, reload, now we have a couple blog posts. 53:21.980 --> 53:27.540 You may also have a link at the bottom of each one that goes to the full post. 53:27.820 --> 53:32.340 So let's just put, we'll put an a tag, and it will go to something like, 53:32.480 --> 53:36.080 you know, post.html or something like that. 53:36.520 --> 53:38.100 And then we'll say read more. 53:39.560 --> 53:42.020 Okay, and then let's just copy that. 53:42.800 --> 53:44.620 Put one here and here. 53:47.000 --> 53:51.800 Alright, and since a paragraph is a block level element, it's going to go on to the 53:51.800 --> 53:52.280 next line. 53:52.380 --> 53:56.340 Even though an a tag is inline, since the one before it is a block level, 53:56.480 --> 53:57.940 it's going to push it to the next line. 53:58.740 --> 54:02.280 Now, you may want to have some kind of sidebar on your page with like, 54:02.360 --> 54:03.900 let's say the blog post categories. 54:04.340 --> 54:08.920 So what we'll do is go outside of the section and we're going to put an aside or 54:08.920 --> 54:10.480 a side, whatever you want to call it. 54:11.940 --> 54:16.220 Okay, and then in here, let's say these are categories, so we'll put an H3. 54:16.400 --> 54:24.440 We'll say categories and let's put a UL with some LIs with some links. 54:25.980 --> 54:30.060 So let's say this, we'll just put these to go to a number sign, which basically just 54:30.060 --> 54:31.420 means the same page we're on. 54:31.460 --> 54:32.380 It's not going to go anywhere. 54:33.120 --> 54:35.260 So we'll say category one. 54:36.900 --> 54:38.180 We'll copy that. 54:39.820 --> 54:42.440 And we'll say category two and three. 54:43.180 --> 54:44.580 And we'll save it, reload. 54:45.080 --> 54:46.200 And now we have our categories. 54:46.400 --> 54:51.860 Now, usually you'd use CSS to probably float these to the side rather than have 54:51.860 --> 54:52.580 them down here. 54:52.780 --> 54:54.900 But that's something we'll get into later. 54:55.640 --> 54:55.880 All right. 54:55.920 --> 55:00.480 Now, usually when you have some kind of navigation, you want to use the HTML5 nav 55:00.480 --> 55:00.920 tags. 55:01.100 --> 55:04.400 So what we would do is just surround the UL in the nav. 55:04.400 --> 55:09.080 And we can grab onto this within the CSS and style it if we want. 55:09.880 --> 55:11.740 And then finally, we're just going to have the footer. 55:11.920 --> 55:15.720 So let's go outside of the aside and put in a footer tag. 55:16.160 --> 55:17.800 And we're just going to put a paragraph. 55:18.140 --> 55:18.980 We'll say copyright. 55:19.760 --> 55:23.660 Now, within HTML, you also have these entities you can use, or symbols. 55:24.040 --> 55:26.160 And there's different codes for each one. 55:26.240 --> 55:30.480 So for a copyright, we can do ampersand, copy, semicolon. 55:30.720 --> 55:32.640 And that'll give us a copyright symbol. 55:32.640 --> 55:34.620 Alright, we'll say 2017. 55:35.120 --> 55:36.240 We'll just say my website. 55:37.060 --> 55:38.640 Okay, we'll save it, reload. 55:39.020 --> 55:42.700 And now we have copyright 2017, my website, as our footer. 55:43.480 --> 55:43.740 Alright. 55:44.260 --> 55:48.460 Now, sometimes you may have more than one header and footer. 55:48.740 --> 55:52.900 So it's a good idea to give these an ID or a class. 55:53.020 --> 55:57.420 So in this case, I'm going to give it an ID of just main header. 55:58.340 --> 56:00.540 Okay, and same thing with the footer down here. 56:00.920 --> 56:04.260 We'll give that an ID of main footer. 56:04.440 --> 56:08.900 Because some people might actually use, for instance, the title of a blog post, 56:08.980 --> 56:10.220 the title and the date and stuff. 56:10.420 --> 56:12.240 They might wrap that inside of a header. 56:12.340 --> 56:16.640 It doesn't necessarily mean it has to be your main website header. 56:17.260 --> 56:17.460 Okay. 56:19.100 --> 56:23.360 Now, I really don't want to get into CSS in this video, but I will add just a 56:23.360 --> 56:25.360 couple simple styles to the header. 56:25.620 --> 56:29.100 Alright, now when you're adding CSS, usually you want to put it in an external 56:29.100 --> 56:34.880 file, but you can put it up in the head area inside of a style tag. 56:35.660 --> 56:37.740 And you can let it know that this is going to be CSS. 56:38.240 --> 56:39.800 This does not require the type. 56:39.860 --> 56:43.600 You don't have to have this, but Sublime actually puts it by default. 56:44.600 --> 56:48.380 And then in here, let's say we want to grab onto the ID of main header. 56:48.840 --> 56:53.060 So an ID is represented with a number sign. 56:53.360 --> 56:56.520 Okay, so we'll say ID main dash header. 56:57.960 --> 57:01.220 I'm not going over this thoroughly because we will do this in the next video. 57:01.920 --> 57:08.100 But for the main header, let's say we want to align the text to the center. 57:09.000 --> 57:13.960 Let's say we want to add a background color of black. 57:15.300 --> 57:19.020 Okay, since the background is black, let's change the text color, which is just 57:19.020 --> 57:19.780 going to be color. 57:20.220 --> 57:21.560 And we'll change that to white. 57:22.220 --> 57:24.840 And then I'm just going to add a little bit of padding around everything, 57:25.060 --> 57:26.240 so we'll say 10 pixels. 57:26.780 --> 57:30.320 So I'll save that, reload, and now we have a little website header. 57:30.840 --> 57:34.560 Alright, if we want to grab onto the footer, remember we gave it an ID of main 57:34.560 --> 57:35.020 footer. 57:36.840 --> 57:41.020 And all I'm going to do with that is just text align to the center. 57:41.980 --> 57:44.420 And we'll just make the font size a little bigger. 57:45.300 --> 57:47.700 Alright, and don't worry about learning these styles yet. 57:47.780 --> 57:49.940 We're going to go over all of this in the next video. 57:50.240 --> 57:53.860 So let's save it, reload, and now our footer is centered. 57:55.600 --> 58:00.260 Alright, and the last thing I'm going to go over is the meta tags that you can use 58:00.260 --> 58:01.280 in your head area. 58:02.060 --> 58:06.080 Okay, so when Google indexes your website or your webpages, it's going to look at 58:06.080 --> 58:10.020 the description, and it's going to look at your keywords, things like that. 58:10.140 --> 58:16.160 So let's go right under the title here, and let's put in a meta tag. 58:16.900 --> 58:20.600 Now, meta tags are going to have a name attribute, so we're going to say this is 58:20.600 --> 58:24.920 the description of our page, and then it's going to have a content attribute, 58:25.080 --> 58:26.420 which will be the actual content. 58:26.700 --> 58:34.620 So let's just say awesome blog by Traversy Media. 58:35.080 --> 58:36.380 Okay, so that's our description. 58:37.040 --> 58:41.340 And then we can also add keywords, so that will be another meta tag with the 58:41.340 --> 58:42.380 name of keywords. 58:44.000 --> 58:48.260 Okay, it's going to have content, and the content is going to be a 58:48.260 --> 58:49.440 comma-separated list. 58:49.560 --> 58:51.020 So we'll say web design blog, 58:54.480 --> 58:55.880 web dev blog. 58:56.760 --> 59:00.640 You might put your company name, stuff like that. 59:02.120 --> 59:05.400 Alright, and if we save that, there's not going to be any difference from here. 59:05.540 --> 59:09.240 If we look at the source code, control U, you'll see that now that stuff 59:09.240 --> 59:13.220 is added here, and Google will actually look at that stuff when it scans your 59:13.220 --> 59:13.620 website. 59:14.400 --> 59:18.300 So the last thing I want to do is just link the two pages together, our cheat 59:18.300 --> 59:19.880 sheet and the blog area. 59:20.180 --> 59:22.540 So what I'll do is put a link in the blog page. 59:23.200 --> 59:28.420 Let's see, we'll go right under the header here, and we'll just put an A tag, 59:29.940 --> 59:37.080 and that's going to go to index.html, and let's just say go to index. 59:38.320 --> 59:40.840 Alright, so if we reload, we have this go to index. 59:41.000 --> 59:42.780 If I click that, that'll bring us here. 59:43.260 --> 59:48.060 Now let's go to index.html, and we'll go to the very top, right under the body, 59:48.980 --> 59:55.340 and let's put an A tag, and we'll say go to blog.html, and the text will say go to 59:55.340 --> 59:55.780 blog. 59:56.300 --> 59:58.580 And then let's just put an HR underneath. 59:59.880 --> 01:00:00.840 Okay, reload. 01:00:01.440 --> 01:00:05.200 And now we can switch back and forth to our pages, and that's how navigation is 01:00:05.200 --> 01:00:05.780 put together. 01:00:07.160 --> 01:00:09.220 Alright guys, so I think we're going to stop here. 01:00:09.420 --> 01:00:13.700 All this markup will be in the description, I'll have a link to download 01:00:13.700 --> 01:00:14.760 the zip file. 01:00:15.420 --> 01:00:18.160 Hopefully you learned something from this and you enjoyed it. 01:00:19.240 --> 01:00:23.200 Like I said at the beginning of the video, if you're a subscriber of mine, 01:00:23.240 --> 01:00:24.900 you probably already know all this stuff. 01:00:25.100 --> 01:00:27.100 If you watched the whole thing, that's awesome. 01:00:27.680 --> 01:00:28.460 Thanks for that. 01:00:28.940 --> 01:00:29.640 And that's it. 01:00:29.700 --> 01:00:31.120 Please subscribe if you like this. 01:00:31.260 --> 01:00:35.320 I do much more advanced stuff, so you'll learn much more. 01:00:36.260 --> 01:00:37.640 And leave it a like if you liked it. 01:00:37.680 --> 01:00:41.060 If you didn't like it, go ahead and leave it a dislike, and I will see you in the 01:00:41.060 --> 01:00:41.520 next video.