1 00:00:00,000 --> 00:00:06,100 2 00:00:06,100 --> 00:00:08,790 >> DOUG LLOYD: So we spent about-- if my math is right, 3 00:00:08,790 --> 00:00:11,900 and I think looking back-- I think we spent about 35 videos talking 4 00:00:11,900 --> 00:00:15,139 about various aspects of C, maybe a little more, maybe a little less. 5 00:00:15,139 --> 00:00:16,930 And we didn't cover everything in C, but we 6 00:00:16,930 --> 00:00:21,170 covered a big chunk of the language, the vast majority of it, 7 00:00:21,170 --> 00:00:22,882 certainly for common uses. 8 00:00:22,882 --> 00:00:25,090 Now we're going to talk about another language, HTML. 9 00:00:25,090 --> 00:00:28,180 And we're going to cover it in just one video. 10 00:00:28,180 --> 00:00:29,340 >> But that's going to be OK. 11 00:00:29,340 --> 00:00:31,410 That's going to actually become something you're going to get used to. 12 00:00:31,410 --> 00:00:33,535 Now that you have the fundamentals of one language, 13 00:00:33,535 --> 00:00:35,776 it's actually pretty easy to start learning others. 14 00:00:35,776 --> 00:00:37,650 So we're going to start to step a little back 15 00:00:37,650 --> 00:00:43,340 and gloss over the basic differences between these languages 16 00:00:43,340 --> 00:00:45,750 and sort of leave you to it. 17 00:00:45,750 --> 00:00:48,530 There's a lot of really great resources on the internet, which 18 00:00:48,530 --> 00:00:51,279 we're going to start directing you towards because the internet is 19 00:00:51,279 --> 00:00:53,340 a vast repository of information. 20 00:00:53,340 --> 00:00:55,960 And so it's not like you'll be losing out necessarily 21 00:00:55,960 --> 00:00:58,349 by not having the information covered in a video. 22 00:00:58,349 --> 00:01:00,640 You'll still be able to get everything you need and use 23 00:01:00,640 --> 00:01:03,590 the knowledge you've already built up by understanding C 24 00:01:03,590 --> 00:01:07,130 to make the learning curve for these other languages actually a lot flatter. 25 00:01:07,130 --> 00:01:08,640 I promise. 26 00:01:08,640 --> 00:01:12,770 >> But let's talk about one language that's really fundamental for every web 27 00:01:12,770 --> 00:01:14,830 page, which is HTML. 28 00:01:14,830 --> 00:01:18,230 HTML is the Hyper Text Markup Language. 29 00:01:18,230 --> 00:01:22,700 HTML is a language but it is not a programming language. 30 00:01:22,700 --> 00:01:23,900 >> HTML doesn't have variables. 31 00:01:23,900 --> 00:01:26,430 It doesn't have logic or functions or anything like that. 32 00:01:26,430 --> 00:01:30,301 We can't do any programming per se in HTML. 33 00:01:30,301 --> 00:01:32,300 Sometimes you'll hear people describe themselves 34 00:01:32,300 --> 00:01:35,710 as HTML programmers, which isn't entirely accurate. 35 00:01:35,710 --> 00:01:37,980 We can't write HTML programs. 36 00:01:37,980 --> 00:01:40,770 >> HTML is just used to mark up text. 37 00:01:40,770 --> 00:01:42,690 It's called a markup language. 38 00:01:42,690 --> 00:01:47,680 And what this does-- this markup-- we use tags in HTML and these tags-- 39 00:01:47,680 --> 00:01:51,600 this markup-- semantically defines the structure of a page 40 00:01:51,600 --> 00:01:55,280 and causes the plain text that exists between tags to be interpreted 41 00:01:55,280 --> 00:01:57,320 by browsers in different ways. 42 00:01:57,320 --> 00:02:00,370 And perhaps it's best to explain this by way of an illustration. 43 00:02:00,370 --> 00:02:06,450 >> Here's a very simple HTML page, not an HTML program, again, an HTML page. 44 00:02:06,450 --> 00:02:08,680 And we know it's an HTML page because we've 45 00:02:08,680 --> 00:02:11,480 bounded everything with HTML tags. 46 00:02:11,480 --> 00:02:13,850 So this is what an HTML tag looks like. 47 00:02:13,850 --> 00:02:15,870 It's between angle brackets. 48 00:02:15,870 --> 00:02:18,570 And notice at the top we have HTML and at the very bottom, 49 00:02:18,570 --> 00:02:21,400 after we've done what is apparently a lot of other HTML, 50 00:02:21,400 --> 00:02:24,310 we have angle bracket slash HTML. 51 00:02:24,310 --> 00:02:29,262 So that sort of is the boundary between what is HTML and what is not. 52 00:02:29,262 --> 00:02:32,220 And of course, conventionally, just as you wrote all of your C programs 53 00:02:32,220 --> 00:02:35,300 with dot C extensions, all of your HTML files 54 00:02:35,300 --> 00:02:37,909 will end with dot HTML extensions. 55 00:02:37,909 --> 00:02:39,200 But there's more going on here. 56 00:02:39,200 --> 00:02:40,658 We don't just have these HTML tags. 57 00:02:40,658 --> 00:02:44,010 We apparently have this thing called a head tag. 58 00:02:44,010 --> 00:02:46,010 Well, OK, what's that? 59 00:02:46,010 --> 00:02:48,550 >> Well maybe it's best to distinguish by way of a body, 60 00:02:48,550 --> 00:02:50,590 body being the content of the web page. 61 00:02:50,590 --> 00:02:55,860 So maybe the head tag defines stuff that isn't in the browser window proper, 62 00:02:55,860 --> 00:02:59,410 but is somehow important to our web page being rendered correctly. 63 00:02:59,410 --> 00:03:02,490 For example, inside of the head tag we have title tags. 64 00:03:02,490 --> 00:03:05,500 >> So title being hello world, that's actually going to be what 65 00:03:05,500 --> 00:03:08,797 shows up in the tab in Chrome or in safari or Firefox-- 66 00:03:08,797 --> 00:03:11,880 whatever browser you prefer-- that's what's going to show up in the title. 67 00:03:11,880 --> 00:03:14,800 And before tabs it would show up in your entire browser window 68 00:03:14,800 --> 00:03:19,710 and you can only have one page open in a browser window at a time. 69 00:03:19,710 --> 00:03:22,160 So that's going to be the title of my page up in the tab 70 00:03:22,160 --> 00:03:24,600 or the browser window bar, hello world. 71 00:03:24,600 --> 00:03:28,611 And then the content of my web page will be world, hello. 72 00:03:28,611 --> 00:03:31,360 So let's take a look at what some thing like this might look like. 73 00:03:31,360 --> 00:03:33,210 This is a pretty simple HTML page. 74 00:03:33,210 --> 00:03:35,970 So I'm here in my CS50 IDE and I've zoomed in a little bit. 75 00:03:35,970 --> 00:03:38,290 And I'm just going to open up hello dot HTML 76 00:03:38,290 --> 00:03:42,000 and show you that this is pretty much the page content that we saw before. 77 00:03:42,000 --> 00:03:45,240 My simple HTML, head tags, title tags, body, and so on. 78 00:03:45,240 --> 00:03:47,320 I've indented to be clean. 79 00:03:47,320 --> 00:03:51,530 >> And then what I can do in my IDE is just preview the page. 80 00:03:51,530 --> 00:03:52,630 And there we go. 81 00:03:52,630 --> 00:03:56,070 The content of my page is world, hello, and I don't see anything 82 00:03:56,070 --> 00:03:58,500 in from the head tags there. 83 00:03:58,500 --> 00:03:59,980 It's just the content of the body. 84 00:03:59,980 --> 00:04:00,780 World, hello. 85 00:04:00,780 --> 00:04:03,700 And again the body just said, world, hello. 86 00:04:03,700 --> 00:04:06,160 The other part is missing. 87 00:04:06,160 --> 00:04:07,610 >> So that's really all it is. 88 00:04:07,610 --> 00:04:11,370 This is a very simple basic HTML page. 89 00:04:11,370 --> 00:04:14,280 Now I've indented my HTML to be really nice and organized, 90 00:04:14,280 --> 00:04:15,840 but I don't actually have to. 91 00:04:15,840 --> 00:04:17,959 I could make it look pretty ugly. 92 00:04:17,959 --> 00:04:19,467 And this would still work. 93 00:04:19,467 --> 00:04:21,050 This would be the exact same web page. 94 00:04:21,050 --> 00:04:23,100 I've just gotten rid of all of the white space. 95 00:04:23,100 --> 00:04:24,820 >> As it turns out, white space is data. 96 00:04:24,820 --> 00:04:28,540 And so when we're sending data from sender to receiver, from server 97 00:04:28,540 --> 00:04:30,670 to client, data costs money. 98 00:04:30,670 --> 00:04:34,460 And so getting rid of whitespace is actually a good idea 99 00:04:34,460 --> 00:04:37,320 if you're somebody who serves up a lot of web content. 100 00:04:37,320 --> 00:04:39,820 It's a bad idea if you're somebody who's learning this stuff 101 00:04:39,820 --> 00:04:41,528 and you want to have it nicely organized. 102 00:04:41,528 --> 00:04:43,810 This is a lot easier to parse than this. 103 00:04:43,810 --> 00:04:45,540 But it's functionally identical. 104 00:04:45,540 --> 00:04:48,720 >> The indentation and stuff like that doesn't actually matter in HTML. 105 00:04:48,720 --> 00:04:53,634 All that matters is opening tags and closing tags in the correct order. 106 00:04:53,634 --> 00:04:55,050 Notice what happened here, though. 107 00:04:55,050 --> 00:04:58,450 The markup gives us a way to communicate extra information 108 00:04:58,450 --> 00:04:59,940 about what we've written. 109 00:04:59,940 --> 00:05:03,130 The Hello, World part was interpreted as the title. 110 00:05:03,130 --> 00:05:06,410 And the world, hello part was interpreted as the content 111 00:05:06,410 --> 00:05:09,090 or what should be visible on my web page. 112 00:05:09,090 --> 00:05:12,167 >> There are over 100 of these different tags and lots of great resources 113 00:05:12,167 --> 00:05:13,000 online to find them. 114 00:05:13,000 --> 00:05:14,900 We're going to talk about a few of them in this video, some 115 00:05:14,900 --> 00:05:16,440 of the really fundamental stuff. 116 00:05:16,440 --> 00:05:18,440 But we're not going talk about it all because it 117 00:05:18,440 --> 00:05:20,250 would be exhaustive to do so. 118 00:05:20,250 --> 00:05:22,880 >> Another thing you can do, though, is open up developer tools. 119 00:05:22,880 --> 00:05:26,069 And if you recall from our video on HTTP, 120 00:05:26,069 --> 00:05:27,860 I explained how to open up developer tools. 121 00:05:27,860 --> 00:05:32,020 In Chrome it's usually the F12 key to open up the developer toolbar. 122 00:05:32,020 --> 00:05:35,909 Then instead of choosing the Network tab, you can choose the Elements tab. 123 00:05:35,909 --> 00:05:37,700 And if you load a web page, you'll actually 124 00:05:37,700 --> 00:05:40,280 see the HTML that creates that web page. 125 00:05:40,280 --> 00:05:44,090 And so you can learn a lot about HTML by looking at your favorite websites 126 00:05:44,090 --> 00:05:48,474 and seeing how they build the various pieces of them that you like. 127 00:05:48,474 --> 00:05:50,890 So maybe there's this cool pattern or something like that. 128 00:05:50,890 --> 00:05:52,140 How do they make it with HTML? 129 00:05:52,140 --> 00:05:55,630 Well you can just open up your developer tools and hover over that element 130 00:05:55,630 --> 00:05:57,700 and see exactly what HTML makes it. 131 00:05:57,700 --> 00:05:59,450 So that's a really good way to learn HTML, 132 00:05:59,450 --> 00:06:02,330 and I strongly recommend that you do it both to learn HTML 133 00:06:02,330 --> 00:06:04,930 and also to learn a little bit about some of the options 134 00:06:04,930 --> 00:06:07,050 available to you in developer tools, which 135 00:06:07,050 --> 00:06:10,200 will certainly come in handy as you begin doing more intensive web 136 00:06:10,200 --> 00:06:11,090 programming. 137 00:06:11,090 --> 00:06:14,080 >> So let's take a look at a couple of common HTML tags. 138 00:06:14,080 --> 00:06:17,210 And we'll jump and take a look at what these tags will also render 139 00:06:17,210 --> 00:06:20,490 as by looking at some files in my IDE. 140 00:06:20,490 --> 00:06:26,330 So here are three very basic tags for tweaking the visual appearance of text. 141 00:06:26,330 --> 00:06:29,050 There's B tags, I tags, and U tags. 142 00:06:29,050 --> 00:06:33,170 And respectively what they do is render the text between them in bold, 143 00:06:33,170 --> 00:06:35,430 italics, and underlining. 144 00:06:35,430 --> 00:06:40,430 So let's see what that would look like on an actual web page in my IDE. 145 00:06:40,430 --> 00:06:43,390 >> So here in my IDE I have a file called BIU dot HTML. 146 00:06:43,390 --> 00:06:46,770 BIU dot HTML just being bold, italics, underlining. 147 00:06:46,770 --> 00:06:47,830 I'll open it up. 148 00:06:47,830 --> 00:06:51,810 >> And we'll see that here I have this text is B tags bold. 149 00:06:51,810 --> 00:06:54,010 This text is I tags italic. 150 00:06:54,010 --> 00:06:56,307 And this text is U tags underlined. 151 00:06:56,307 --> 00:06:57,640 What is this going to look like? 152 00:06:57,640 --> 00:06:59,473 Well again, all I have to do is go over here 153 00:06:59,473 --> 00:07:04,690 to my browser, my file browser, click Preview, and this is what comes up. 154 00:07:04,690 --> 00:07:07,520 >> The text in between the B tags is indeed now bold. 155 00:07:07,520 --> 00:07:10,720 The text in between the I tags is indeed now italic. 156 00:07:10,720 --> 00:07:14,634 And the text in between the U tags is indeed now underlined. 157 00:07:14,634 --> 00:07:15,550 So that's pretty good. 158 00:07:15,550 --> 00:07:18,450 We now know how to make text look a little more fancy 159 00:07:18,450 --> 00:07:20,360 or draw emphasis to certain things. 160 00:07:20,360 --> 00:07:25,530 Another couple of common tags here are paragraph tags, P, and header tags, 161 00:07:25,530 --> 00:07:27,980 which I've rendered here as HX. 162 00:07:27,980 --> 00:07:32,520 >> These P tags, these paragraph tags, break your text up into paragraphs. 163 00:07:32,520 --> 00:07:34,646 It's not enough to just hit Enter and leave spaces, 164 00:07:34,646 --> 00:07:37,186 because a computer is only going to do what you tell it to do 165 00:07:37,186 --> 00:07:39,450 and it ignores white space for the most part. 166 00:07:39,450 --> 00:07:41,636 So we can't just hit Enter and expect our computer 167 00:07:41,636 --> 00:07:43,760 to interpret that we want to start a new paragraph. 168 00:07:43,760 --> 00:07:47,670 We have to very explicitly say this is one paragraph-- this is another-- 169 00:07:47,670 --> 00:07:50,740 by enclosing each in a set of P tags. 170 00:07:50,740 --> 00:07:54,560 >> And we also have these options for H tags, these header tags. 171 00:07:54,560 --> 00:07:57,000 We have six different levels of headers, one, two, three, 172 00:07:57,000 --> 00:08:01,110 four, five, and six, which are progressively larger and larger 173 00:08:01,110 --> 00:08:01,710 headers. 174 00:08:01,710 --> 00:08:04,360 And they get smaller and smaller and smaller and smaller. 175 00:08:04,360 --> 00:08:07,690 So we have a top level header, a second level header, and so on, and so on. 176 00:08:07,690 --> 00:08:10,480 >> Let's take a look at maybe some P tags and some header tags 177 00:08:10,480 --> 00:08:13,110 in action on a web page. 178 00:08:13,110 --> 00:08:18,180 So here in my IDE I have a file called PH dot HTML, PH being paragraphs 179 00:08:18,180 --> 00:08:18,970 and header tags. 180 00:08:18,970 --> 00:08:20,709 Open that up. 181 00:08:20,709 --> 00:08:23,000 There's a lot going on here because I've put some lorem 182 00:08:23,000 --> 00:08:24,660 ipsum, some just random text in here. 183 00:08:24,660 --> 00:08:27,284 So I'll zoom out a little bit because there's so much going on. 184 00:08:27,284 --> 00:08:31,980 But notice that I have at the very top here I have an H1, a level one, 185 00:08:31,980 --> 00:08:32,802 header tag. 186 00:08:32,802 --> 00:08:36,010 Then I have a paragraph, which is just a bunch of random text-- lorem ipsum-- 187 00:08:36,010 --> 00:08:38,720 just default standard filling in text. 188 00:08:38,720 --> 00:08:41,970 So I have two paragraphs inside of that level one header and then down below I 189 00:08:41,970 --> 00:08:46,850 have a level two header here on line 24, a second level header, and another two 190 00:08:46,850 --> 00:08:47,840 paragraphs. 191 00:08:47,840 --> 00:08:51,910 Well what does this look like if I view it in my preview? 192 00:08:51,910 --> 00:08:53,790 Let's see. 193 00:08:53,790 --> 00:08:55,730 >> So notice that the first level header here 194 00:08:55,730 --> 00:08:58,420 is actually quite a bit bigger than the second level header. 195 00:08:58,420 --> 00:08:59,940 So we used H1 tags. 196 00:08:59,940 --> 00:09:03,820 And notice that the P tags allow us to break things out into paragraphs. 197 00:09:03,820 --> 00:09:07,500 If we had gotten rid of those P tags and actually just put Enters or Returns 198 00:09:07,500 --> 00:09:10,110 in between what we hoped would be the different paragraphs, 199 00:09:10,110 --> 00:09:13,193 they would all just slam together and it wouldn't have this nice paragraph 200 00:09:13,193 --> 00:09:15,840 separation with space above and below. 201 00:09:15,840 --> 00:09:18,300 And so that's what paragraph tags and header tags 202 00:09:18,300 --> 00:09:22,440 are commonly used to do to draw attention to portions of our web page 203 00:09:22,440 --> 00:09:23,550 in that way. 204 00:09:23,550 --> 00:09:27,560 >> Next up are some tags that we use to build lists on our web page. 205 00:09:27,560 --> 00:09:30,820 So we have unordered lists-- ULs-- which are just 206 00:09:30,820 --> 00:09:34,090 bulleted lists, ordered list which are numbered-- 207 00:09:34,090 --> 00:09:37,680 OLs-- and inside of either one of those we need to have 208 00:09:37,680 --> 00:09:40,600 sets of how to indicate list items, LI. 209 00:09:40,600 --> 00:09:44,370 And so we have open UL tag and we put items inside of it. 210 00:09:44,370 --> 00:09:46,920 And then when we're done with that, we can close the UL tag. 211 00:09:46,920 --> 00:09:49,850 >> And similarly we can have an ordered or numbered list 212 00:09:49,850 --> 00:09:51,560 and put list items inside of that. 213 00:09:51,560 --> 00:09:53,350 So let's take a look at a couple of lists 214 00:09:53,350 --> 00:09:57,230 and what they would render as on CS50 IDE. 215 00:09:57,230 --> 00:10:00,640 So I have here in my IDE a file called lists dot HTML. 216 00:10:00,640 --> 00:10:03,100 Let's take a look. 217 00:10:03,100 --> 00:10:08,482 >> And notice here I have an unordered list with five things in it. 218 00:10:08,482 --> 00:10:11,440 And then I have an ordered list, and I've changed the tag a little bit, 219 00:10:11,440 --> 00:10:11,939 right? 220 00:10:11,939 --> 00:10:13,152 I've said start equals six. 221 00:10:13,152 --> 00:10:16,110 It turns out with an ordered list I can set the starting point wherever 222 00:10:16,110 --> 00:10:20,130 I want-- by default it will be one-- by just adding this so-called attribute 223 00:10:20,130 --> 00:10:21,190 to my OL tag. 224 00:10:21,190 --> 00:10:23,572 And so this list will start counting at six. 225 00:10:23,572 --> 00:10:26,780 So the elements of that numbered list should be six, seven, eight, nine, ten, 226 00:10:26,780 --> 00:10:29,930 because there are five elements in the list, as opposed to one, 227 00:10:29,930 --> 00:10:33,770 two, three, four, five, which would be the case if I had said OL 228 00:10:33,770 --> 00:10:36,730 without specifying the start attribute. 229 00:10:36,730 --> 00:10:41,594 >> So we'll just preview this so you can get a sense for what's going on here. 230 00:10:41,594 --> 00:10:42,260 And there we go. 231 00:10:42,260 --> 00:10:44,610 There's my list. 232 00:10:44,610 --> 00:10:47,810 The first five elements are unordered or bulleted lists. 233 00:10:47,810 --> 00:10:51,010 And the next five elements are a separate ordered list 234 00:10:51,010 --> 00:10:52,980 starting from six. 235 00:10:52,980 --> 00:10:56,247 So that's how we can build lists using HTML. 236 00:10:56,247 --> 00:10:58,080 Another thing you might want to do with HTML 237 00:10:58,080 --> 00:11:01,520 is build a table of information of rows and columns 238 00:11:01,520 --> 00:11:04,560 to present information in a particularly organized way. 239 00:11:04,560 --> 00:11:09,110 To do this with HTML we can have a table definition beginning open bracket 240 00:11:09,110 --> 00:11:10,160 table. 241 00:11:10,160 --> 00:11:14,680 And then inside of that table we might have a set of rows, TR tags 242 00:11:14,680 --> 00:11:15,980 to indicate each row. 243 00:11:15,980 --> 00:11:22,510 And then TD tags go inside of TR tags to specify a column within a row. 244 00:11:22,510 --> 00:11:24,340 >> Why is it called TD and not TC? 245 00:11:24,340 --> 00:11:25,940 Well, TD stands for table data. 246 00:11:25,940 --> 00:11:27,900 Usually you're putting your information there. 247 00:11:27,900 --> 00:11:29,440 So that's why it's TD and not TC. 248 00:11:29,440 --> 00:11:31,140 It's a little bit confusing. 249 00:11:31,140 --> 00:11:33,720 >> So you have table tags and inside of your table tags 250 00:11:33,720 --> 00:11:35,600 you have a number of rows, TRs. 251 00:11:35,600 --> 00:11:40,030 And inside each row you have TDs for the number of columns 252 00:11:40,030 --> 00:11:42,880 that you want to have in that particular row. 253 00:11:42,880 --> 00:11:47,730 Let's take a look at a very simple table over in CS50 IDE. 254 00:11:47,730 --> 00:11:49,730 >> So I have here a file called table dot HTML. 255 00:11:49,730 --> 00:11:53,390 Let's have a look at what that looks like. 256 00:11:53,390 --> 00:11:56,225 There's a lot going on here but if you notice I have a table open. 257 00:11:56,225 --> 00:11:57,850 I'm starting the definition with table. 258 00:11:57,850 --> 00:12:02,100 And then in my first row I apparently have four columns, one, two, three, 259 00:12:02,100 --> 00:12:02,660 four. 260 00:12:02,660 --> 00:12:04,290 And then I'm done with that row. 261 00:12:04,290 --> 00:12:07,750 >> Then I start another row and do two, four, six, eight. 262 00:12:07,750 --> 00:12:08,850 Finish that row. 263 00:12:08,850 --> 00:12:11,410 Do another row, three, six, nine, 12. 264 00:12:11,410 --> 00:12:14,830 And then a last row, four, eight, 12, and though it's 265 00:12:14,830 --> 00:12:16,560 a little cut off here, 16. 266 00:12:16,560 --> 00:12:17,710 >> I finished that row. 267 00:12:17,710 --> 00:12:18,970 I finished the table. 268 00:12:18,970 --> 00:12:21,430 And then I'm done with my HTML. 269 00:12:21,430 --> 00:12:22,590 What does this look like? 270 00:12:22,590 --> 00:12:26,014 271 00:12:26,014 --> 00:12:27,430 Well, it's not really much to see. 272 00:12:27,430 --> 00:12:31,690 I've clearly organized my information in a somewhat more organized way. 273 00:12:31,690 --> 00:12:33,755 But it's not super pretty here. 274 00:12:33,755 --> 00:12:36,130 And we're going to deal with that when we talk about CSS. 275 00:12:36,130 --> 00:12:38,930 We'll revisit this idea of what we do to make a table-- 276 00:12:38,930 --> 00:12:41,260 maybe format it a little bit better? 277 00:12:41,260 --> 00:12:45,070 But I do still have four rows, each of which has four columns, 278 00:12:45,070 --> 00:12:48,890 and really what this amounts to is a very simple four by four multiplication 279 00:12:48,890 --> 00:12:49,870 table. 280 00:12:49,870 --> 00:12:51,690 >> Just a few more tags we'll talk about. 281 00:12:51,690 --> 00:12:54,617 Let's talk about the concept of an HTML form. 282 00:12:54,617 --> 00:12:57,450 So you may have seen this in the context of logging into a web page. 283 00:12:57,450 --> 00:12:59,100 Usually you type in your user name. 284 00:12:59,100 --> 00:13:01,510 You type in your password, and you're good to go. 285 00:13:01,510 --> 00:13:04,170 That would be the beginning of a form. 286 00:13:04,170 --> 00:13:05,420 >> Skipping over div a second. 287 00:13:05,420 --> 00:13:07,987 We also have inputs which kind of fit inside of forms. 288 00:13:07,987 --> 00:13:10,320 These are the elements that you're actually typing into, 289 00:13:10,320 --> 00:13:12,580 or the radio buttons you're ticking, or the check 290 00:13:12,580 --> 00:13:14,310 boxes that you're ticking off. 291 00:13:14,310 --> 00:13:15,770 So these go inside of forms. 292 00:13:15,770 --> 00:13:18,500 And they comprise basically each row of the form 293 00:13:18,500 --> 00:13:19,887 if your form is formatted well. 294 00:13:19,887 --> 00:13:22,220 Then there's this concept of a div, which doesn't really 295 00:13:22,220 --> 00:13:25,060 fit in any particular category of tags like the ones I've 296 00:13:25,060 --> 00:13:26,170 been doing previously. 297 00:13:26,170 --> 00:13:29,790 It just sort of demarcates the beginning of some arbitrary division-- 298 00:13:29,790 --> 00:13:31,670 div-- of the page. 299 00:13:31,670 --> 00:13:33,210 There's no visual break. 300 00:13:33,210 --> 00:13:34,800 There's no line. 301 00:13:34,800 --> 00:13:37,180 It's not set off as a separate chunk automatically. 302 00:13:37,180 --> 00:13:39,430 You'd have to style it that way to do that. 303 00:13:39,430 --> 00:13:42,110 >> It just sort of says I want a piece of space on my web page, 304 00:13:42,110 --> 00:13:45,190 and I'm just going to call it this division of my page. 305 00:13:45,190 --> 00:13:47,619 We can put stuff inside of divs, and in fact, 306 00:13:47,619 --> 00:13:49,410 when we head over to IDE in a second, we'll 307 00:13:49,410 --> 00:13:53,760 see that I'm putting my form inside of a div. 308 00:13:53,760 --> 00:13:57,050 >> So I have here in my IDE a file called div form dot HTML. 309 00:13:57,050 --> 00:13:59,260 Let's open it up. 310 00:13:59,260 --> 00:14:01,460 Notice that like I said, div is kind of arbitrary. 311 00:14:01,460 --> 00:14:01,640 Right? 312 00:14:01,640 --> 00:14:02,973 It doesn't really mean anything. 313 00:14:02,973 --> 00:14:05,140 So I have an arbitrary first division of my page. 314 00:14:05,140 --> 00:14:07,848 And then instead of another div later on, starting on line eight, 315 00:14:07,848 --> 00:14:08,730 I have this form. 316 00:14:08,730 --> 00:14:13,594 And inside of the form I have a number of inputs, fields of the form. 317 00:14:13,594 --> 00:14:16,510 So I have a field whose name is A-- which doesn't really mean anything 318 00:14:16,510 --> 00:14:19,350 right now-- that apparently takes text, another one that 319 00:14:19,350 --> 00:14:22,630 takes a password, another that's a Radio button, another that's a check box, 320 00:14:22,630 --> 00:14:24,797 and another that's a Submit button. 321 00:14:24,797 --> 00:14:26,630 Well, what does this all actually look like? 322 00:14:26,630 --> 00:14:27,629 Well, let's take a look. 323 00:14:27,629 --> 00:14:31,010 We'll open it up in our preview window. 324 00:14:31,010 --> 00:14:33,557 Notice that this arbitrary first division-- there's 325 00:14:33,557 --> 00:14:34,640 no visual separation here. 326 00:14:34,640 --> 00:14:37,150 It didn't really do anything, right? 327 00:14:37,150 --> 00:14:38,220 >> And then I have my form. 328 00:14:38,220 --> 00:14:39,890 And I didn't do any special formatting. 329 00:14:39,890 --> 00:14:42,680 So the form is just one big row of information. 330 00:14:42,680 --> 00:14:46,424 If I had formatted my form differently, I might have it line by line by line. 331 00:14:46,424 --> 00:14:47,590 But I didn't do any styling. 332 00:14:47,590 --> 00:14:49,256 Again, we're not talking about CSS here. 333 00:14:49,256 --> 00:14:51,030 We're just talking about HTML. 334 00:14:51,030 --> 00:14:53,980 >> Well in my text form I can type-- remember that forms of type text 335 00:14:53,980 --> 00:14:55,480 so I can put my name. 336 00:14:55,480 --> 00:14:57,330 And in my password I can type my password. 337 00:14:57,330 --> 00:14:59,740 And because that field is of type password, 338 00:14:59,740 --> 00:15:01,470 you don't know what my password is. 339 00:15:01,470 --> 00:15:02,800 It's all dots. 340 00:15:02,800 --> 00:15:09,140 >> I can also choose to tick off a radio button or tick off a check box. 341 00:15:09,140 --> 00:15:10,420 Or I could submit my form. 342 00:15:10,420 --> 00:15:11,810 And I didn't do anything, so when I submit my form, 343 00:15:11,810 --> 00:15:13,090 the page just refreshes. 344 00:15:13,090 --> 00:15:16,970 But I could perhaps configure my Submit button to do something else. 345 00:15:16,970 --> 00:15:20,410 And we'll see what we can do with that in a future video on PHP. 346 00:15:20,410 --> 00:15:22,520 But this builds a very simple form that we 347 00:15:22,520 --> 00:15:27,360 can use to have users interact and submit information to our website. 348 00:15:27,360 --> 00:15:29,620 >> One last comment before we move on to some other tags 349 00:15:29,620 --> 00:15:32,040 are to take a look at this input tag one more time. 350 00:15:32,040 --> 00:15:35,760 Notice that I've highlighted the ends of the tag in red. 351 00:15:35,760 --> 00:15:39,390 Every other tag we've seen so far has had a beginning and an end, an opening 352 00:15:39,390 --> 00:15:41,030 tag and a closing tag. 353 00:15:41,030 --> 00:15:42,520 >> But an input tag doesn't. 354 00:15:42,520 --> 00:15:46,860 There's no text that goes in between input tags. 355 00:15:46,860 --> 00:15:49,160 All of the information we're intending to convey 356 00:15:49,160 --> 00:15:52,640 is bound up as part of the attributes of that input. 357 00:15:52,640 --> 00:15:54,690 Notice we have input name equals x. 358 00:15:54,690 --> 00:15:55,580 Type equals y. 359 00:15:55,580 --> 00:15:57,660 That's really all the information we need. 360 00:15:57,660 --> 00:15:59,470 >> This is called a self closing tag. 361 00:15:59,470 --> 00:16:02,470 It doesn't require an opening and a close because all of the information 362 00:16:02,470 --> 00:16:04,974 is contained inside the tag and its attributes. 363 00:16:04,974 --> 00:16:06,390 So sometimes you'll see this, too. 364 00:16:06,390 --> 00:16:10,400 So just be aware that if you have a tag that is entirely self-contained, 365 00:16:10,400 --> 00:16:14,170 it opens and closes itself with the open angle bracket on the left 366 00:16:14,170 --> 00:16:17,000 and the slash angle bracket on the right. 367 00:16:17,000 --> 00:16:20,580 We'll see another one of those right now with image tags as well. 368 00:16:20,580 --> 00:16:23,300 >> Before we talk about images, we need to talk about hyperlinks. 369 00:16:23,300 --> 00:16:26,080 If we want our web page to be interactive and move us around, 370 00:16:26,080 --> 00:16:28,121 it would be nice be able to click on one of those 371 00:16:28,121 --> 00:16:30,190 what has typically been a blue link. 372 00:16:30,190 --> 00:16:34,440 This is actually how we build a hyperlink in our web page. 373 00:16:34,440 --> 00:16:36,540 And interestingly enough there's another HTML tag 374 00:16:36,540 --> 00:16:39,000 called link, which is not a hyperlink. 375 00:16:39,000 --> 00:16:44,130 A here stands for anchor, and that's how we indicate a hyperlink. 376 00:16:44,130 --> 00:16:49,150 >> A href equals x means go to web page X. And everything 377 00:16:49,150 --> 00:16:51,580 between the open A tag and the close A tag 378 00:16:51,580 --> 00:16:56,010 is what's going to be that underlined blue text that looks like a link 379 00:16:56,010 --> 00:16:57,590 that we're familiar with. 380 00:16:57,590 --> 00:17:01,660 Below that we have an image tag, which is a self closing tag for displaying 381 00:17:01,660 --> 00:17:05,599 an image located at X. And you might be able to change 382 00:17:05,599 --> 00:17:08,280 that image by specifying width and height 383 00:17:08,280 --> 00:17:11,640 and other attributes in that dot dot dot there. 384 00:17:11,640 --> 00:17:14,260 >> At the very bottom here we have a very interesting 385 00:17:14,260 --> 00:17:16,170 looking tag that doesn't have a closing tag. 386 00:17:16,170 --> 00:17:19,410 It's exclamation point doctype HTML. 387 00:17:19,410 --> 00:17:23,300 So HTML has been around since the early 1990s for building web pages, 388 00:17:23,300 --> 00:17:25,859 and it's gone undergone several revisions since then. 389 00:17:25,859 --> 00:17:28,550 Most recently in 2014 it underwent a revision 390 00:17:28,550 --> 00:17:33,440 called HTML5 which is now the current sort of de facto HTML standard. 391 00:17:33,440 --> 00:17:36,730 >> To indicate that our web pages are written using HTML5, 392 00:17:36,730 --> 00:17:38,160 this is how we start off. 393 00:17:38,160 --> 00:17:40,380 It can be omitted but what that basically 394 00:17:40,380 --> 00:17:45,930 means is you can't use any of the tags that are HTML5 tags, those new tags. 395 00:17:45,930 --> 00:17:48,591 So we always start off if we're using HTML5. 396 00:17:48,591 --> 00:17:51,340 And all the tags we've talked about previously are not HTML5 tags. 397 00:17:51,340 --> 00:17:55,470 But this would indicate that HTML5 tags will be present. 398 00:17:55,470 --> 00:17:58,400 And so we have exclamation doctype HTML, which 399 00:17:58,400 --> 00:18:01,280 is at the very beginning of our HTML file, and then after that point 400 00:18:01,280 --> 00:18:04,930 we actually have our HTML open tag and proceed from there. 401 00:18:04,930 --> 00:18:10,050 >> The last one is a comment tag, which looks slightly different, too. 402 00:18:10,050 --> 00:18:12,810 It starts off with angle bracket exclamation dash 403 00:18:12,810 --> 00:18:15,220 dash but no closing bracket. 404 00:18:15,220 --> 00:18:20,150 In between those two elements there is where you write your comments. 405 00:18:20,150 --> 00:18:28,420 And let's take a look at images and comments and links in CS50 IDE. 406 00:18:28,420 --> 00:18:32,850 >> So I have here a file called image link dot HTML which I'm going to open up. 407 00:18:32,850 --> 00:18:36,420 And notice I've got a couple of comments here in my HTML comments. 408 00:18:36,420 --> 00:18:38,990 So just like in C and other programming languages, 409 00:18:38,990 --> 00:18:43,169 HTML just by being a markup language does have the ability to have comments. 410 00:18:43,169 --> 00:18:45,710 And so I'm apparently going to place a picture of Rick Astley 411 00:18:45,710 --> 00:18:49,060 somewhere between this div tag, this arbitrary division. 412 00:18:49,060 --> 00:18:51,497 Apparently that file is located at Rick dot JPEG, which 413 00:18:51,497 --> 00:18:53,580 if we head back over to my file tree for a second, 414 00:18:53,580 --> 00:18:55,490 is a file that exists in the current directory. 415 00:18:55,490 --> 00:18:56,031 So that's OK. 416 00:18:56,031 --> 00:18:57,710 I can reference it. 417 00:18:57,710 --> 00:18:59,680 >> Then I can have internal links. 418 00:18:59,680 --> 00:19:05,080 So notice on line 11 here my href is hello dot HTML. 419 00:19:05,080 --> 00:19:09,050 So that just refers to hello dot HTML which exists in the current directory. 420 00:19:09,050 --> 00:19:12,980 And I can also have external links by just specifying HTTPS 421 00:19:12,980 --> 00:19:16,180 to indicate that I'm not talking about a file in my current directory. 422 00:19:16,180 --> 00:19:19,730 I'm talking about a file that exists somewhere on the internet, which I have 423 00:19:19,730 --> 00:19:23,370 to request using the HTTP protocol. 424 00:19:23,370 --> 00:19:25,990 >> So let's take a look at what this page might look like 425 00:19:25,990 --> 00:19:29,500 and get ready for a picture of Rick Astley to show up on your screen. 426 00:19:29,500 --> 00:19:31,490 So I'll preview this. 427 00:19:31,490 --> 00:19:33,800 There's Rick Astley at the very top in this arbitrary 428 00:19:33,800 --> 00:19:35,008 division I put it at the top. 429 00:19:35,008 --> 00:19:36,960 And then down below I have my links, right? 430 00:19:36,960 --> 00:19:39,330 >> I have a link to hello dot HTML. 431 00:19:39,330 --> 00:19:42,860 And if I click that, I get moved over to this page 432 00:19:42,860 --> 00:19:47,050 that we're very familiar with from the very beginning of our program. 433 00:19:47,050 --> 00:19:50,880 If I pop that page open again, if I pop image link open one more time, 434 00:19:50,880 --> 00:19:54,420 I can also go externally to CS50's website. 435 00:19:54,420 --> 00:19:56,740 And there we see-- I'll zoom out a little bit here-- 436 00:19:56,740 --> 00:20:00,260 we'll see CS50's website sort of embedded in the middle of our page. 437 00:20:00,260 --> 00:20:04,670 So I was able to make an internal link as well as an external link. 438 00:20:04,670 --> 00:20:07,200 >> The last rule with HTML that we're going to talk about here 439 00:20:07,200 --> 00:20:09,510 is that your HTML should be well formed. 440 00:20:09,510 --> 00:20:13,020 In C we talked a lot about the various syntax of things. 441 00:20:13,020 --> 00:20:17,650 In HTML the syntax really revolves around tags. 442 00:20:17,650 --> 00:20:19,660 Every tag you open needs to be closed. 443 00:20:19,660 --> 00:20:22,630 And in fact, every tag you open should be closed in reverse order. 444 00:20:22,630 --> 00:20:25,790 >> So if you open a bold tag, an italic tag, and then an underline tag 445 00:20:25,790 --> 00:20:28,120 to do all three to a particular set of text, 446 00:20:28,120 --> 00:20:30,070 you should close them in reverse order. 447 00:20:30,070 --> 00:20:32,270 So if you opened bold, italic, underline, you 448 00:20:32,270 --> 00:20:35,240 want to close underline, italic, bold. 449 00:20:35,240 --> 00:20:39,990 This sort of encapsulation is what keeps HTML nice and organized. 450 00:20:39,990 --> 00:20:44,370 >> Unlike C, though, syntax errors won't actually cripple your HTML possibly. 451 00:20:44,370 --> 00:20:48,730 Your HTML may be not well formed but would still work. 452 00:20:48,730 --> 00:20:50,589 And so these errors can sort of slide by. 453 00:20:50,589 --> 00:20:52,130 It's up to you to really be vigilant. 454 00:20:52,130 --> 00:20:54,760 Sometimes they will fail but sometimes you can get away with it. 455 00:20:54,760 --> 00:20:56,509 >> It can be a really difficult task, though, 456 00:20:56,509 --> 00:21:00,660 to keep track of when you opened a tag, when you closed it, 457 00:21:00,660 --> 00:21:04,110 especially as your HTML files get bigger and bigger. 458 00:21:04,110 --> 00:21:05,490 You'll want some help. 459 00:21:05,490 --> 00:21:07,560 And there are online validator tools that you 460 00:21:07,560 --> 00:21:11,474 can use to have a look at your web page and see if it's well formed HTML. 461 00:21:11,474 --> 00:21:13,390 And you should definitely take a look at those 462 00:21:13,390 --> 00:21:16,620 and start to use them as you begin doing some work with HTML, 463 00:21:16,620 --> 00:21:20,800 writing HTML, just so you get some good habits about organizing 464 00:21:20,800 --> 00:21:24,377 your HTML in a good way and good style and making sure 465 00:21:24,377 --> 00:21:27,210 that you're not doing anything that could create a syntax error that 466 00:21:27,210 --> 00:21:30,270 would cause you a bit of a problem down the road. 467 00:21:30,270 --> 00:21:31,190 >> I'm Doug Lloyd. 468 00:21:31,190 --> 00:21:33,450 This is CS50. 469 00:21:33,450 --> 00:21:34,859