1 00:00:05,240 --> 00:00:11,290 Welcome back to the basics lecture where we're going to do here is learn just the absolute basics of 2 00:00:11,290 --> 00:00:16,840 an HTL file and how it's structured will create probably the simplest HVM else skeleton could possible 3 00:00:17,080 --> 00:00:18,550 see what it looks like in our browser. 4 00:00:18,610 --> 00:00:23,890 And then the next lecture will go much deeper into the actual tags than HTL file holds. 5 00:00:23,950 --> 00:00:28,700 Right now let's head over to our text editor and explore how to create a basic HVM file. 6 00:00:28,870 --> 00:00:31,270 Ok here I am at my Adam text editor. 7 00:00:31,270 --> 00:00:34,150 First thing we need to do is actually create a new file. 8 00:00:34,150 --> 00:00:40,150 So I will say file new file and when you first create a new file it's just untitled and actually contains 9 00:00:40,180 --> 00:00:41,120 no file type. 10 00:00:41,290 --> 00:00:44,110 So let's save this as an h tim file. 11 00:00:44,110 --> 00:00:47,800 I'll save file save as an on my desktop. 12 00:00:47,800 --> 00:00:51,670 I have a folder called flask underscore examples so I'm going to save it here. 13 00:00:51,850 --> 00:00:57,290 Feel free to save it wherever you prefer on your actual desktop or computer C-Drive downloads anywhere 14 00:00:57,330 --> 00:00:58,360 is fine. 15 00:00:58,420 --> 00:01:02,190 So I will call this basic and then dot T.M.. 16 00:01:02,410 --> 00:01:04,090 So it's important to have that extension. 17 00:01:04,120 --> 00:01:05,560 Aist him all that way. 18 00:01:05,560 --> 00:01:10,750 Adam knows that it's actually working with NHT metafile and can perform syntax highlighting and autocomplete 19 00:01:11,170 --> 00:01:12,820 as necessary. 20 00:01:12,820 --> 00:01:18,880 So I will say this now as basic thought T.M. And now that it's an H team l file Adam actually comes 21 00:01:18,880 --> 00:01:22,680 with a built in autocomplete for basic things like HTL. 22 00:01:22,840 --> 00:01:27,310 And if you begin typing HVM l you'll notice that you get this little pop up HTL. 23 00:01:27,520 --> 00:01:34,880 Once that happens you can enter here and it will auto fill the actual doc Skelton for an HTML file. 24 00:01:35,080 --> 00:01:39,130 Well we're going to do here now is actually describe the main components and then we'll see what it 25 00:01:39,130 --> 00:01:40,680 looks like in the browser. 26 00:01:40,720 --> 00:01:47,740 This very first line this doctype tag that basically tells your browser as it reads in the file hey 27 00:01:47,770 --> 00:01:49,030 this is an HMO file. 28 00:01:49,060 --> 00:01:54,030 You should read the tags in a certain way and all the modern browsers understand that one line this 29 00:01:54,040 --> 00:01:58,750 first line to say that and this should always be the first line in the HTML file. 30 00:01:59,490 --> 00:02:07,830 Next we basically have a series of tags and tags are denoted by these open and closing tags marks or 31 00:02:07,830 --> 00:02:10,340 sometimes they're also called greater than or less than marks. 32 00:02:10,470 --> 00:02:14,860 And we have an html tag and then we have an HMO closing tag. 33 00:02:14,970 --> 00:02:17,150 Usually you have an open tag and a closing tag. 34 00:02:17,160 --> 00:02:21,090 You'll notice that the closing tag starts with a forward slash. 35 00:02:21,090 --> 00:02:23,760 Keep in mind not every single tag needs to be closed. 36 00:02:23,760 --> 00:02:26,880 We'll discuss that in more detail later on. 37 00:02:26,880 --> 00:02:29,570 Now we have two main components of an HDMI file. 38 00:02:29,580 --> 00:02:36,810 We have this head component and this body component this head component mainly contains the meta data 39 00:02:37,260 --> 00:02:43,320 and the meta data are going to be things like linking to your CSSA files later on linking to your javascript 40 00:02:43,320 --> 00:02:45,530 files and things of that nature. 41 00:02:45,540 --> 00:02:48,280 So not a whole lot of code is going to go in the head. 42 00:02:48,330 --> 00:02:52,380 Instead most of your HTML code is going to go inside the body. 43 00:02:52,380 --> 00:02:59,880 You'll notice when we actually called L we got this title open tag and title close tag this title tag 44 00:02:59,940 --> 00:03:02,110 is what appears inside of the tab. 45 00:03:02,220 --> 00:03:03,520 Inside your browser. 46 00:03:03,570 --> 00:03:04,930 So let's go out and check it out. 47 00:03:05,700 --> 00:03:06,920 I'm going to type out. 48 00:03:07,200 --> 00:03:14,120 This is the title and I need to save this so control s or command us. 49 00:03:14,240 --> 00:03:17,010 Adam usually has an indicator whether it's been saved or not. 50 00:03:17,270 --> 00:03:21,290 And then what I'm going to do is open this file inside of my browser. 51 00:03:21,290 --> 00:03:26,490 You'll notice as you hover over your actual file you should get a full file path there. 52 00:03:26,660 --> 00:03:32,630 Alternatively you can do is open up the side panel and then find your actual file. 53 00:03:32,630 --> 00:03:39,340 Here you can find that as basic thought is HTML right click on it and then select Copy full path and 54 00:03:39,340 --> 00:03:45,700 then once you have that full path copied to your clipboard go ahead and provide it to your browser. 55 00:03:45,700 --> 00:03:47,690 So I'm going to bring in my browser here. 56 00:03:47,890 --> 00:03:51,960 So I notice in my browser right now I just copied and pasted the full path. 57 00:03:52,000 --> 00:03:54,480 So I'm directly pointing my browser. 58 00:03:54,490 --> 00:03:58,030 This is Krome Internet browser to my local H.T. mail file. 59 00:03:58,210 --> 00:04:03,820 And notice what it says and the tab it says this is the title so that corresponds with the title that 60 00:04:03,820 --> 00:04:06,730 was shown here inside of this HTL file. 61 00:04:06,760 --> 00:04:07,620 OK. 62 00:04:07,720 --> 00:04:12,310 And then later on we're going to discuss how we can add things to the body. 63 00:04:12,310 --> 00:04:20,930 Let's just go ahead and do a very simple script or very simple phrase essentially just add some text. 64 00:04:21,020 --> 00:04:23,070 So we're going to add some text here in the body. 65 00:04:23,070 --> 00:04:24,960 Notice how it's not tagged in any way. 66 00:04:24,960 --> 00:04:26,340 That's OK for now. 67 00:04:26,340 --> 00:04:32,670 I'm going to save those changes and then back in my browser if I hit refresh I now get to see add some 68 00:04:32,670 --> 00:04:33,310 text. 69 00:04:33,420 --> 00:04:36,560 So that's the very basics of an HTML file. 70 00:04:36,570 --> 00:04:42,000 Again it has a heading component and then a body component the head component that's going to contain 71 00:04:42,010 --> 00:04:43,350 metadata and links. 72 00:04:43,350 --> 00:04:45,210 We'll discuss that in more detail later on. 73 00:04:45,250 --> 00:04:50,250 And then the body that's basically going to contain the actual elements you see on the page things like 74 00:04:50,250 --> 00:04:53,660 forms headers styles et cetera. 75 00:04:53,670 --> 00:04:54,330 OK. 76 00:04:54,420 --> 00:04:56,980 So we have had body in our basic h mail. 77 00:04:57,210 --> 00:05:00,200 And next up we're going to discuss basic h him all tags. 78 00:05:00,240 --> 00:05:01,380 We'll see what the next lecture.