1 1 00:00:00,200 --> 00:00:01,480 Hi, guys, and welcome back. 2 2 00:00:01,480 --> 00:00:04,570 In this video, we're going to add document level annotations 3 3 00:00:04,570 --> 00:00:06,050 to our project. 4 4 00:00:06,050 --> 00:00:08,460 This is going to let us change the title of the page. 5 5 00:00:08,460 --> 00:00:11,960 We're going to be able to link a CSS file into our project, 6 6 00:00:11,960 --> 00:00:14,020 although we're gonna learn more about what that means 7 7 00:00:14,020 --> 00:00:15,350 in the coming section, 8 8 00:00:15,350 --> 00:00:17,550 as well as a few more pieces of information 9 9 00:00:17,550 --> 00:00:21,040 that browsers can use to better display our web pages. 10 10 00:00:21,040 --> 00:00:22,660 Let's get started. 11 11 00:00:22,660 --> 00:00:25,230 So here, we've got the project that we've been working on, 12 12 00:00:25,230 --> 00:00:28,130 and remember that things don't look too good just now. 13 13 00:00:28,130 --> 00:00:32,150 We need CSS before we can make this look really amazing. 14 14 00:00:32,150 --> 00:00:34,710 But we're going to add some stuff into the head 15 15 00:00:34,710 --> 00:00:37,200 of this document at this point. 16 16 00:00:37,200 --> 00:00:38,730 The first thing that we're gonna wanna add really 17 17 00:00:38,730 --> 00:00:40,890 to any page is a title. 18 18 00:00:40,890 --> 00:00:43,450 The title will be displayed on your browser 19 19 00:00:43,450 --> 00:00:45,950 like here in the tabs bar 20 20 00:00:45,950 --> 00:00:48,390 or maybe on the title of your browser window 21 21 00:00:48,390 --> 00:00:50,390 if your browser uses that. 22 22 00:00:50,390 --> 00:00:53,570 And also, it will be useful for search engines, like Google, 23 23 00:00:53,570 --> 00:00:56,190 to know more about what your page is about. 24 24 00:00:56,190 --> 00:01:01,190 So here, I'm going to add Rolf Smith Learning HTML. 25 25 00:01:01,490 --> 00:01:03,440 Now, when we save this and we've refreshed the page, 26 26 00:01:03,440 --> 00:01:05,540 you can see that my tab changes, 27 27 00:01:05,540 --> 00:01:08,320 and now it shows the title of the page. 28 28 00:01:08,320 --> 00:01:11,060 Something that we normally want to do in much HTML documents 29 29 00:01:11,060 --> 00:01:14,250 is add some meta tags to add a bit more information. 30 30 00:01:14,250 --> 00:01:18,100 The first thing is we're gonna add the UTF-8 charset, 31 31 00:01:18,100 --> 00:01:21,500 and this tells the browser that this website is encoded 32 32 00:01:21,500 --> 00:01:24,740 using UTF-8, which is the Unicode standard 33 33 00:01:24,740 --> 00:01:26,300 for character and coding. 34 34 00:01:26,300 --> 00:01:27,850 If you're not very familiar with what character 35 35 00:01:27,850 --> 00:01:30,904 and coding is, essentially it tells the browser 36 36 00:01:30,904 --> 00:01:34,480 how the letters are represented by code 37 37 00:01:34,480 --> 00:01:36,630 so that it knows how to turn the code 38 38 00:01:36,630 --> 00:01:38,660 into the correct letters. 39 39 00:01:38,660 --> 00:01:42,190 We should also specify the viewport information. 40 40 00:01:42,190 --> 00:01:47,190 So this is going to allow us to then resize our window 41 41 00:01:47,320 --> 00:01:48,450 in different devices, 42 42 00:01:48,450 --> 00:01:49,600 and the browser will be able 43 43 00:01:49,600 --> 00:01:52,310 to display the website accurately, 44 44 00:01:52,310 --> 00:01:54,670 no matter what device that we're using, 45 45 00:01:54,670 --> 00:01:57,660 whether it's a mobile device or a desktop device. 46 46 00:01:57,660 --> 00:01:59,320 Finally, I'll tell you something that we're gonna cover 47 47 00:01:59,320 --> 00:02:02,890 in the next section, but that is how to link a CSS file. 48 48 00:02:02,890 --> 00:02:05,010 So again, we're gonna go into more detail 49 49 00:02:05,010 --> 00:02:07,890 in the next section, but what we wanna do is we wanna say 50 50 00:02:07,890 --> 00:02:09,630 hey, we wanna link a style sheet, 51 51 00:02:09,630 --> 00:02:13,230 and the href is style.css. 52 52 00:02:13,230 --> 00:02:15,100 Now, style.css doesn't exist, 53 53 00:02:15,100 --> 00:02:19,020 but we would then go and create it, like here, style.css, 54 54 00:02:19,020 --> 00:02:23,210 and now the CSS file and the HTML file are linked. 55 55 00:02:23,210 --> 00:02:26,960 That means that if we write any CSS styles in style.css, 56 56 00:02:26,960 --> 00:02:29,810 they would be applied onto the page. 57 57 00:02:29,810 --> 00:02:31,640 And again, we're going to learn more about that 58 58 00:02:31,640 --> 00:02:32,893 in the CSS section. 59 59 00:02:33,810 --> 00:02:36,150 All right, that's everything from me for this video. 60 60 00:02:36,150 --> 00:02:39,330 We have completed the HTML project. 61 61 00:02:39,330 --> 00:02:40,980 Hopefully that wasn't too complicated 62 62 00:02:40,980 --> 00:02:42,270 and everything sort of makes sense 63 63 00:02:42,270 --> 00:02:45,540 and you're starting to understand how HTML works. 64 64 00:02:45,540 --> 00:02:47,840 Remember, the most important thing about HTML 65 65 00:02:47,840 --> 00:02:51,870 is that it's used to describe the content of the site. 66 66 00:02:51,870 --> 00:02:54,860 So things don't look very good at the moment, 67 67 00:02:54,860 --> 00:02:56,150 but when we use see a CSS, 68 68 00:02:56,150 --> 00:02:57,750 they will start looking much better, 69 69 00:02:57,750 --> 00:03:00,730 as long as we write good CSS, of course. (chuckles) 70 70 00:03:00,730 --> 00:03:02,720 All right, thank you guys for joining me in this video, 71 71 00:03:02,720 --> 00:03:04,370 and I'll see you in the next one.