1 00:00:00,000 --> 00:00:00,315 2 00:00:00,315 --> 00:00:02,190 BRIAN YU: All right, so we've now established 3 00:00:02,190 --> 00:00:05,760 how devices are able to communicate with one another over the internet by taking 4 00:00:05,760 --> 00:00:07,140 advantage of these protocols-- 5 00:00:07,140 --> 00:00:09,678 TCP/IP and HTTP. 6 00:00:09,678 --> 00:00:11,970 And that explains how, when you go to your web browser, 7 00:00:11,970 --> 00:00:14,070 and you type in something like google.com, 8 00:00:14,070 --> 00:00:16,560 how your web browser is able to connect to Google's servers 9 00:00:16,560 --> 00:00:20,670 by making a request for their home page, and Google servers respond back to you 10 00:00:20,670 --> 00:00:23,370 with the content of Google's actual web page. 11 00:00:23,370 --> 00:00:26,160 But, now, let's take a closer look at what actually makes up 12 00:00:26,160 --> 00:00:28,540 the content of that web page-- 13 00:00:28,540 --> 00:00:31,800 in other words, what exactly are Google's servers sending back 14 00:00:31,800 --> 00:00:34,650 to your web browser so that your web browser knows 15 00:00:34,650 --> 00:00:38,010 how to display the page that we know as Google's home page. 16 00:00:38,010 --> 00:00:39,405 Let's take a look. 17 00:00:39,405 --> 00:00:42,030 I'll go ahead and open up my web browser to Google's actual web 18 00:00:42,030 --> 00:00:43,450 page at google.com. 19 00:00:43,450 --> 00:00:47,640 And, in Google Chrome, I can go up to the View menu, go to Developer, 20 00:00:47,640 --> 00:00:49,650 and then choose View Source. 21 00:00:49,650 --> 00:00:52,020 And what that's going to allow me to do is 22 00:00:52,020 --> 00:00:55,500 it's going to let me view the source code of Google's home page, which 23 00:00:55,500 --> 00:00:58,070 is written in a language called HTML. 24 00:00:58,070 --> 00:01:00,780 HTML is short for HyperText Markup Language, 25 00:01:00,780 --> 00:01:04,358 which is a language that describes the structure of a web page. 26 00:01:04,358 --> 00:01:06,150 And this, what we're looking at right here, 27 00:01:06,150 --> 00:01:09,857 is, in fact, the text-based content that makes up Google's web page. 28 00:01:09,857 --> 00:01:11,940 And if we scroll down far enough, eventually we'll 29 00:01:11,940 --> 00:01:15,450 find, for example, that there are some things that look a little bit familiar. 30 00:01:15,450 --> 00:01:18,210 For example, you'll notice there's a Store button here. 31 00:01:18,210 --> 00:01:20,320 There's some text that says Sign in there. 32 00:01:20,320 --> 00:01:22,770 So even though a lot of this looks very, very cryptic, 33 00:01:22,770 --> 00:01:24,750 there are a couple of familiar elements that 34 00:01:24,750 --> 00:01:29,340 might ring familiar from if you've visited Google's web page before. 35 00:01:29,340 --> 00:01:32,370 So we'll start instead by looking at a much simpler web 36 00:01:32,370 --> 00:01:36,090 page, but our very first web page written using HTML. 37 00:01:36,090 --> 00:01:41,220 So what you're looking at right here is a very basic, but correct, HTML page. 38 00:01:41,220 --> 00:01:43,890 And this is just going to be an HTML web page, which, 39 00:01:43,890 --> 00:01:47,340 as you might be able to guess, even if you've never seen HTML before, 40 00:01:47,340 --> 00:01:49,950 is going to display the words, Hello, world, 41 00:01:49,950 --> 00:01:52,650 to the person viewing the web page in their web browser. 42 00:01:52,650 --> 00:01:54,510 But how exactly is it doing that? 43 00:01:54,510 --> 00:01:56,700 Let's take a look at this HTML code, line 44 00:01:56,700 --> 00:02:00,510 by line, to get an understanding for what it is that's going on here. 45 00:02:00,510 --> 00:02:02,760 We start at the top with this line. 46 00:02:02,760 --> 00:02:07,680 In angled brackets, we have !DOCTYPE html. 47 00:02:07,680 --> 00:02:11,490 And this line is just a line that goes at the beginning of every HTML file, 48 00:02:11,490 --> 00:02:13,770 that is a signal to the person reading that file, 49 00:02:13,770 --> 00:02:16,190 or to the web browser that's interpreting that file, 50 00:02:16,190 --> 00:02:18,990 that this particular file is an HTML file. 51 00:02:18,990 --> 00:02:23,850 And, in particular, it's using HTML5, the latest version of HTML. 52 00:02:23,850 --> 00:02:28,440 So it's a signal of what language it is that this text file is written in. 53 00:02:28,440 --> 00:02:31,920 Up next is what we're going to call an HTML tag. 54 00:02:31,920 --> 00:02:34,920 And so this right here, angle bracket HTML 55 00:02:34,920 --> 00:02:38,760 means that we're starting the HTML content of the web page. 56 00:02:38,760 --> 00:02:43,590 HTML is composed of a lot of tags that ultimately describe particular elements 57 00:02:43,590 --> 00:02:45,240 that show up on the web page. 58 00:02:45,240 --> 00:02:48,840 And here, what we're saying is that this second line, HTML, 59 00:02:48,840 --> 00:02:53,520 is saying that this is the beginning of the HTML content of this web page. 60 00:02:53,520 --> 00:02:56,610 You'll notice that, at the bottom, it's paired with another tag, 61 00:02:56,610 --> 00:03:04,560 angle bracket /html, and this /html means this is the end of the HTML tag. 62 00:03:04,560 --> 00:03:07,780 You'll often find that, in HTML, tags come in pairs. 63 00:03:07,780 --> 00:03:11,580 There's a start tag, like angle bracket html angle bracket, 64 00:03:11,580 --> 00:03:17,010 and then at the end, there is a closing tag that's angle bracket /html angle 65 00:03:17,010 --> 00:03:20,220 bracket, that means this is the end of the HTML content. 66 00:03:20,220 --> 00:03:24,150 And everything in between those two tags is the actual HTML content 67 00:03:24,150 --> 00:03:25,560 of this web page. 68 00:03:25,560 --> 00:03:31,080 You may also notice that, in the start tag for HTML here, we have lang="en". 69 00:03:31,080 --> 00:03:33,930 The en here just stands for English, and that just 70 00:03:33,930 --> 00:03:38,130 means that this HTML content is going to be an English-language website. 71 00:03:38,130 --> 00:03:41,160 So we see that we now have a start HTML tag that 72 00:03:41,160 --> 00:03:44,820 defines the beginning of the HTML content for this web page, 73 00:03:44,820 --> 00:03:47,010 and we've also seen that we have an ending HTML 74 00:03:47,010 --> 00:03:51,450 tag that's going to define the end of the HTML content for the web page. 75 00:03:51,450 --> 00:03:56,250 But now let's take a look at what comes in between, the actual HTML content. 76 00:03:56,250 --> 00:03:59,190 Well, the first thing you may notice is that there's another tag. 77 00:03:59,190 --> 00:04:02,100 The very next line begins with the word head, 78 00:04:02,100 --> 00:04:07,530 and so HTML is really composed of all of these nested tags, HTML elements that 79 00:04:07,530 --> 00:04:09,780 are contained within other elements. 80 00:04:09,780 --> 00:04:12,540 And if you look at a web page, you can try and distill a web page 81 00:04:12,540 --> 00:04:14,070 into these nested elements. 82 00:04:14,070 --> 00:04:16,050 You might find that there's a text element 83 00:04:16,050 --> 00:04:19,350 inside of a button, that might be inside of a list, inside of a table. 84 00:04:19,350 --> 00:04:22,420 Web pages have this structure to them, and HTML 85 00:04:22,420 --> 00:04:26,220 is going to be a text-based representation of that same idea, 86 00:04:26,220 --> 00:04:31,000 of that structural, hierarchical nature that an HTML website has. 87 00:04:31,000 --> 00:04:33,420 So here, the head of the web page is just 88 00:04:33,420 --> 00:04:37,230 going to contain some metadata, some additional information about the web 89 00:04:37,230 --> 00:04:39,570 page that's going to be relevant for a web browser that 90 00:04:39,570 --> 00:04:41,940 wants to read that web page and understand 91 00:04:41,940 --> 00:04:44,470 how to display it to the user. 92 00:04:44,470 --> 00:04:47,310 And here, inside of the head element of our page, 93 00:04:47,310 --> 00:04:51,180 we have one more tag, which is the title tag, an opening title 94 00:04:51,180 --> 00:04:53,310 tag and a close title tag. 95 00:04:53,310 --> 00:04:56,100 And as the name might suggest, this title tag 96 00:04:56,100 --> 00:04:59,310 defines the title of the HTML page. 97 00:04:59,310 --> 00:05:03,340 So whatever comes in between the open title tag of the web page 98 00:05:03,340 --> 00:05:05,350 and the closing title tag of the web page 99 00:05:05,350 --> 00:05:08,800 is going to be the title of the page that shows up in that top tab 100 00:05:08,800 --> 00:05:11,080 bar on most web browsers nowadays. 101 00:05:11,080 --> 00:05:16,120 And here, what's in between the open and closing title tags is the word Hello. 102 00:05:16,120 --> 00:05:19,880 That is going to be the title of this particular web page, 103 00:05:19,880 --> 00:05:22,900 and that's what makes up the header of this HTML page. 104 00:05:22,900 --> 00:05:25,210 We have inside of the head section of the web page 105 00:05:25,210 --> 00:05:28,810 an HTML element called title, and the title of this web page 106 00:05:28,810 --> 00:05:32,690 is just the word Hello, followed by an exclamation point. 107 00:05:32,690 --> 00:05:34,150 So what comes after the head? 108 00:05:34,150 --> 00:05:37,520 Well, after the head is the body of the web page. 109 00:05:37,520 --> 00:05:40,420 And this is the actual visible portion of the web page that makes up 110 00:05:40,420 --> 00:05:42,460 most of your web browser's screen when it 111 00:05:42,460 --> 00:05:45,580 is that you load a web page like google.com or any other web page, 112 00:05:45,580 --> 00:05:46,640 for example. 113 00:05:46,640 --> 00:05:48,640 And, in this case, it seems like the only thing 114 00:05:48,640 --> 00:05:52,857 inside of the body of this web page are the words, Hello, world. 115 00:05:52,857 --> 00:05:55,690 And so that's why, when you open up this page, what we're ultimately 116 00:05:55,690 --> 00:05:58,000 going to see are the words, Hello, world, 117 00:05:58,000 --> 00:06:00,820 displayed inside of the web browser. 118 00:06:00,820 --> 00:06:02,080 So let's actually try it. 119 00:06:02,080 --> 00:06:06,070 Let's write this HTML and see if we can view the content of this page 120 00:06:06,070 --> 00:06:07,810 inside of our web browser. 121 00:06:07,810 --> 00:06:10,540 All right, so I'm now inside of CS50 IDE, 122 00:06:10,540 --> 00:06:12,800 and let's create our first web page. 123 00:06:12,800 --> 00:06:15,730 I'll go up into the File menu and choose New File. 124 00:06:15,730 --> 00:06:18,490 And I'll call this file index.html, which 125 00:06:18,490 --> 00:06:21,430 is just a conventional name for an HTML web page. 126 00:06:21,430 --> 00:06:26,650 And let's start writing the HTML content of this web page inside of index.html. 127 00:06:26,650 --> 00:06:30,280 I'll first include the line !DOCTYPE html, which, again, 128 00:06:30,280 --> 00:06:34,420 it's just a signal that this particular file is an HTML file written using 129 00:06:34,420 --> 00:06:37,600 the latest version of HTML, HTML5. 130 00:06:37,600 --> 00:06:42,340 I'll next add the HTML tag specifying that the language is English. 131 00:06:42,340 --> 00:06:45,580 And then, notice that, as soon as I type the end angle bracket, to say, 132 00:06:45,580 --> 00:06:50,380 this is the end of the start of the HTML tag, CS50, the IDE, 133 00:06:50,380 --> 00:06:53,560 will automatically add the closing HTML tag for me 134 00:06:53,560 --> 00:06:57,250 because it knows that if I'm starting the HTML content of the web page, then, 135 00:06:57,250 --> 00:07:01,090 presumably, at some point, I also want to end the HTML content of the web 136 00:07:01,090 --> 00:07:01,637 page, too. 137 00:07:01,637 --> 00:07:04,720 So it's going to add that for me, so I don't need to write the closing tag 138 00:07:04,720 --> 00:07:05,840 myself. 139 00:07:05,840 --> 00:07:08,720 I'll press Return to move things onto a new line, 140 00:07:08,720 --> 00:07:11,800 and now I have the start of the HTML content of my web page 141 00:07:11,800 --> 00:07:14,480 and the end of the HTML content of my web page. 142 00:07:14,480 --> 00:07:17,750 And now I can begin to fill in everything that comes in between. 143 00:07:17,750 --> 00:07:21,020 So what was inside of the HTML content of my web page? 144 00:07:21,020 --> 00:07:25,240 Well, the first thing was the header of the web page, the head element, that 145 00:07:25,240 --> 00:07:27,490 just contained metadata about my page. 146 00:07:27,490 --> 00:07:30,040 And, in particular, the metadata that I wanted to include 147 00:07:30,040 --> 00:07:34,510 was the fact that the title of this web page, specified using the title tag, 148 00:07:34,510 --> 00:07:38,300 I just wanted to be, Hello! 149 00:07:38,300 --> 00:07:40,750 And so that's the header, the metadata information 150 00:07:40,750 --> 00:07:44,480 that's specifying that the title of this web page is going to be Hello. 151 00:07:44,480 --> 00:07:48,050 And now, I'll add the body of the web page 152 00:07:48,050 --> 00:07:50,930 that will be all of the actual content that shows up 153 00:07:50,930 --> 00:07:53,270 in the web browser when someone visits my web 154 00:07:53,270 --> 00:07:55,670 page in the main part of their web browser. 155 00:07:55,670 --> 00:08:01,640 And the body of the web page, in this case, I just want to say, Hello, world! 156 00:08:01,640 --> 00:08:04,108 And so that's it, our very first HTML page 157 00:08:04,108 --> 00:08:05,900 that says that the title of the page should 158 00:08:05,900 --> 00:08:10,470 be the word Hello, and the body of the page should be Hello, world! 159 00:08:10,470 --> 00:08:13,040 How does the viewer actually visit my web page? 160 00:08:13,040 --> 00:08:16,640 Well, I first need to serve this web page using a web server. 161 00:08:16,640 --> 00:08:19,790 And it turns out, CS50 IDE has a built-in web server 162 00:08:19,790 --> 00:08:22,250 that I can run by going into my terminal window 163 00:08:22,250 --> 00:08:27,260 and typing http-server and pressing Return. 164 00:08:27,260 --> 00:08:32,210 When I run http-server, what I'll get is a URL on which my server is running, 165 00:08:32,210 --> 00:08:35,780 and then the :8080 just means that this particular web server 166 00:08:35,780 --> 00:08:39,084 is listening on port 8080 for requests. 167 00:08:39,084 --> 00:08:46,330 If I copy that URL now, and then go to my web browser and paste in that URL, 168 00:08:46,330 --> 00:08:48,790 what I'll get is an index page that describes 169 00:08:48,790 --> 00:08:53,260 all of the files that are in the home directory of my CS50 IDE, which, 170 00:08:53,260 --> 00:08:57,380 in this case, is just the index.html file that we just created. 171 00:08:57,380 --> 00:09:01,750 And if I click on index.html, what we'll see is a page that just says, 172 00:09:01,750 --> 00:09:06,460 Hello, world!, the body of the web page that I specified in index.html. 173 00:09:06,460 --> 00:09:09,700 And if you look at the very top of my web browser in the tab bar, 174 00:09:09,700 --> 00:09:13,150 you'll notice that the title of this web page is, indeed, Hello!, 175 00:09:13,150 --> 00:09:17,860 what I specified in the title tag inside of my HTML page. 176 00:09:17,860 --> 00:09:21,070 And now, if I ever modify this HTML file and save it, 177 00:09:21,070 --> 00:09:24,350 HTTP server will serve the latest version of that file. 178 00:09:24,350 --> 00:09:27,370 So if I go back into CS50 IDE and say Hello, world!-- 179 00:09:27,370 --> 00:09:31,240 let me add a couple of exclamation points to the end of it, for example, 180 00:09:31,240 --> 00:09:35,320 and then I go back and refresh the page, you'll see that I now have Hello, 181 00:09:35,320 --> 00:09:37,960 world!, and then two additional exclamation 182 00:09:37,960 --> 00:09:40,540 points in addition to the one that we had originally. 183 00:09:40,540 --> 00:09:45,850 So we can now modify HTML files and use HTTP server to serve those files, 184 00:09:45,850 --> 00:09:49,750 so that anyone who visits our particular URL on this particular port 185 00:09:49,750 --> 00:09:53,350 is able to request to see index.html, and the web browser 186 00:09:53,350 --> 00:09:58,310 will take the HTML content that we wrote and display it back to the user. 187 00:09:58,310 --> 00:10:01,970 Of course, in practice, web pages are a fair bit more complex than just 188 00:10:01,970 --> 00:10:03,230 displaying, Hello, world! 189 00:10:03,230 --> 00:10:05,510 They're just displaying some text to the user. 190 00:10:05,510 --> 00:10:09,200 More complex web pages have images and lists, and they have tables, 191 00:10:09,200 --> 00:10:11,707 and they have other fanciness, and colors, and more style. 192 00:10:11,707 --> 00:10:13,790 And that's what we're going to slowly build up to, 193 00:10:13,790 --> 00:10:17,150 adding more sophistication to our web pages by exploring the features 194 00:10:17,150 --> 00:10:19,820 that we get using HTML. 195 00:10:19,820 --> 00:10:23,900 So let's go back into CS50 IDE now, and let's now try and create 196 00:10:23,900 --> 00:10:27,020 a new web page that's going to allow us to display an image, 197 00:10:27,020 --> 00:10:29,060 instead of displaying text. 198 00:10:29,060 --> 00:10:32,000 All right, so I'll go to File and create a New File, 199 00:10:32,000 --> 00:10:34,890 and I'll call this file image.html. 200 00:10:34,890 --> 00:10:37,010 And this file is just going to be another HTML web 201 00:10:37,010 --> 00:10:40,160 page, so I can actually just copy the content of index.html 202 00:10:40,160 --> 00:10:42,590 for now because it will be very similar. 203 00:10:42,590 --> 00:10:46,610 But here in the body of the HTML page, instead of saying, Hello, world!, 204 00:10:46,610 --> 00:10:48,540 I want to display an image. 205 00:10:48,540 --> 00:10:50,930 So let me first upload an image to CS50 IDE, 206 00:10:50,930 --> 00:10:54,990 so we have an image that I can display inside of my HTML page. 207 00:10:54,990 --> 00:10:58,610 I'll go to the File menu and choose Upload Local Files, 208 00:10:58,610 --> 00:11:00,890 and then I'll select a file, and, in particular, 209 00:11:00,890 --> 00:11:03,680 I have an image of a cat that I have stored on my computer 210 00:11:03,680 --> 00:11:05,970 that I'll upload to CS50 IDE. 211 00:11:05,970 --> 00:11:09,590 And so now you'll notice that cat.jpg is now located inside 212 00:11:09,590 --> 00:11:12,710 of the Home folder of my CS50 IDE. 213 00:11:12,710 --> 00:11:14,960 And now I'd like to, instead of saying, Hello, world!, 214 00:11:14,960 --> 00:11:19,260 inside of this HTML page, instead display this image. 215 00:11:19,260 --> 00:11:21,930 And it turns out that, to display an image in HTML, 216 00:11:21,930 --> 00:11:25,140 there's a particular tag that allows us to display an image. 217 00:11:25,140 --> 00:11:27,470 And that tag is img-- 218 00:11:27,470 --> 00:11:30,430 img standing for image, and the image tag 219 00:11:30,430 --> 00:11:34,790 takes some additional attributes, some additional information that the HTML 220 00:11:34,790 --> 00:11:37,430 element is going to need to know for the web browser 221 00:11:37,430 --> 00:11:39,630 to know how to display the image. 222 00:11:39,630 --> 00:11:42,770 And, in this case, you might imagine that if I have an image tag, well, 223 00:11:42,770 --> 00:11:46,610 the image tag, I'll need to specify in it what image I actually 224 00:11:46,610 --> 00:11:48,040 want to display. 225 00:11:48,040 --> 00:11:50,940 And so the attribute that I'll add to this HTML tag 226 00:11:50,940 --> 00:11:54,710 is going to be one called source, or src for short, 227 00:11:54,710 --> 00:11:58,890 that is just going to specify what image I want to display. 228 00:11:58,890 --> 00:12:03,407 And, in this case, I want to display an image called cat.jpg. 229 00:12:03,407 --> 00:12:05,240 And it turns out that image tags should also 230 00:12:05,240 --> 00:12:08,060 contain an attribute called alt, which is just 231 00:12:08,060 --> 00:12:11,938 some text-based description of what the image is of, in case a user is viewing 232 00:12:11,938 --> 00:12:13,730 your web page, and they're not able to view 233 00:12:13,730 --> 00:12:15,688 the images because they're on a slow connection 234 00:12:15,688 --> 00:12:17,370 or using a screen reader, for example. 235 00:12:17,370 --> 00:12:21,350 We'll add some alternative text that just says, Picture of a cat, 236 00:12:21,350 --> 00:12:25,030 for example, and then end the angle bracket. 237 00:12:25,030 --> 00:12:26,930 All right, so we now have an image tag that 238 00:12:26,930 --> 00:12:29,840 specifies the source, the image that we want to display, 239 00:12:29,840 --> 00:12:31,820 as well as some alternative text. 240 00:12:31,820 --> 00:12:33,560 But if we take a look at the code, you'll 241 00:12:33,560 --> 00:12:36,260 notice that this image tag differs a little bit 242 00:12:36,260 --> 00:12:38,240 from the other tags that we've already used, 243 00:12:38,240 --> 00:12:43,370 head, and title, and body in HTML, in that it doesn't have a close tag. 244 00:12:43,370 --> 00:12:47,720 There's an opening image tag, but there doesn't seem to be a /img indicating 245 00:12:47,720 --> 00:12:48,935 the end of the image. 246 00:12:48,935 --> 00:12:51,560 And, indeed, it semantically wouldn't make a whole lot of sense 247 00:12:51,560 --> 00:12:54,500 to say we had the start of an image, and then the end of the image, 248 00:12:54,500 --> 00:12:56,520 and then some content in between. 249 00:12:56,520 --> 00:13:00,020 So it turns out that some tags in HTML, like the image tag, 250 00:13:00,020 --> 00:13:02,330 don't actually require a closing tag. 251 00:13:02,330 --> 00:13:07,100 We can just say, put an image here, the image I want to display is cat.jpg, 252 00:13:07,100 --> 00:13:10,360 and it is going to be a picture of a cat. 253 00:13:10,360 --> 00:13:15,110 So if I now go back to my server, and I'll not go to index.html, 254 00:13:15,110 --> 00:13:20,040 but I'll instead in the URL specify I want to go to image.html instead. 255 00:13:20,040 --> 00:13:21,900 And now what we'll see is-- 256 00:13:21,900 --> 00:13:24,130 very large-- an image of a cat. 257 00:13:24,130 --> 00:13:26,910 So my web page now is displaying the image 258 00:13:26,910 --> 00:13:30,360 that I've uploaded into my CS50 IDE. 259 00:13:30,360 --> 00:13:33,630 All right, so we've now been able to create web pages that have text 260 00:13:33,630 --> 00:13:36,660 and that also have images, but what else do web pages often have? 261 00:13:36,660 --> 00:13:40,590 Well, one of the biggest features of the web is the ability for one web page 262 00:13:40,590 --> 00:13:44,010 to connect to other web pages via links, where you click on something 263 00:13:44,010 --> 00:13:46,680 and are taken to a different web page altogether. 264 00:13:46,680 --> 00:13:49,710 So how are we going to create a link in an HTML page? 265 00:13:49,710 --> 00:13:51,250 Let's give that a try. 266 00:13:51,250 --> 00:13:54,780 So I'll go back into CS50 IDE, and I'll create a new file 267 00:13:54,780 --> 00:13:57,690 that I'll call link.html, where I'll experiment with trying 268 00:13:57,690 --> 00:14:00,000 to create a link to another page. 269 00:14:00,000 --> 00:14:03,810 The general structure will be very similar to index.html, but instead 270 00:14:03,810 --> 00:14:06,900 of saying, Hello, world!, in the body of the page, what I'd like to say 271 00:14:06,900 --> 00:14:10,047 is something like, Visit Harvard, where, ideally, 272 00:14:10,047 --> 00:14:12,630 if the user were to click on the word Harvard, when they visit 273 00:14:12,630 --> 00:14:14,520 this page in their web browser, I would like 274 00:14:14,520 --> 00:14:17,670 for them to be taken to Harvard's website, for example. 275 00:14:17,670 --> 00:14:19,210 How am I going to do that? 276 00:14:19,210 --> 00:14:22,440 Well, to do that, we can take advantage of another HTML tag 277 00:14:22,440 --> 00:14:26,580 called a for anchor, and then it takes an attribute called href, 278 00:14:26,580 --> 00:14:30,420 for Hyperlink Reference, that is going to specify what web page the user 279 00:14:30,420 --> 00:14:33,720 should be taken to when they click on this particular link. 280 00:14:33,720 --> 00:14:36,390 And we'll include that in quotation marks, 281 00:14:36,390 --> 00:14:42,570 so I'll say "https://harvard.edu", and notice it automatically creates 282 00:14:42,570 --> 00:14:44,970 a closing anchor tag for me as well. 283 00:14:44,970 --> 00:14:49,200 And now, in between these two tags, I'll specify the text of the link 284 00:14:49,200 --> 00:14:53,770 that the user can then click on, so I'll say, Harvard, for example. 285 00:14:53,770 --> 00:14:55,980 And so what I've done here is said Visit Harvard, 286 00:14:55,980 --> 00:14:59,190 but Harvard is inside of this anchor tag that 287 00:14:59,190 --> 00:15:01,110 says that, when I click on the word Harvard, 288 00:15:01,110 --> 00:15:05,100 you should be taken to harvard.edu, which is what I specified using 289 00:15:05,100 --> 00:15:09,030 this href attribute of the a element. 290 00:15:09,030 --> 00:15:10,115 Let's give it a try. 291 00:15:10,115 --> 00:15:13,380 If I go back to my server, refresh the page, 292 00:15:13,380 --> 00:15:15,690 you'll see that link.html is here now. 293 00:15:15,690 --> 00:15:19,740 And if I go to link.html, I see a web page that says, Visit Harvard. 294 00:15:19,740 --> 00:15:25,080 And if I click on Harvard, then I'm now taken to Harvard's website. 295 00:15:25,080 --> 00:15:27,180 I've now been taken to harvard.edu, which 296 00:15:27,180 --> 00:15:29,250 is exactly what the link specified. 297 00:15:29,250 --> 00:15:32,820 Of course, what you'll notice here is that if we go back into CS50 IDE 298 00:15:32,820 --> 00:15:35,370 and take a look at the HTML code, the link 299 00:15:35,370 --> 00:15:38,440 that I get taken to when someone clicks on Harvard, 300 00:15:38,440 --> 00:15:43,330 for example, is totally independent of the actual text of the link itself. 301 00:15:43,330 --> 00:15:47,140 So there are potential security concerns that are worth being aware of. 302 00:15:47,140 --> 00:15:51,390 So if, for example, I said, Visit Harvard, I could instead in the URL 303 00:15:51,390 --> 00:15:56,200 say, let's instead take the user to yale.edu, for example. 304 00:15:56,200 --> 00:15:59,280 And so now, if someone were to go back and visit my web page, 305 00:15:59,280 --> 00:16:02,550 it says, Visit Harvard, but when they click on the Harvard link, 306 00:16:02,550 --> 00:16:05,480 they're taken somewhere else entirely, for example. 307 00:16:05,480 --> 00:16:07,230 And so that is a security concern that you 308 00:16:07,230 --> 00:16:10,740 should be aware of when we're dealing with HTML and links 309 00:16:10,740 --> 00:16:13,630 from one web page to another. 310 00:16:13,630 --> 00:16:16,508 What might this security concern look like in practice? 311 00:16:16,508 --> 00:16:19,300 Well, recall at the beginning, we took a look at Google's home page 312 00:16:19,300 --> 00:16:22,215 and were able to view the source of Google's home page. 313 00:16:22,215 --> 00:16:24,340 And it turns out, we could do that for any website. 314 00:16:24,340 --> 00:16:28,020 If, for example, I went to bankofamerica.com, for example, 315 00:16:28,020 --> 00:16:31,180 here what we're looking at is Bank of America's web page. 316 00:16:31,180 --> 00:16:34,720 And if I went to View, Developer, View Source, 317 00:16:34,720 --> 00:16:37,390 I could actually take a look at the HTML source code that 318 00:16:37,390 --> 00:16:39,213 makes up Bank of America's web page. 319 00:16:39,213 --> 00:16:41,380 And even if I don't understand all of the complexity 320 00:16:41,380 --> 00:16:45,340 because it's a far more complex HTML page than the ones we've been creating, 321 00:16:45,340 --> 00:16:49,510 I could just copy all of it, and then go into CS50 IDE, 322 00:16:49,510 --> 00:16:53,020 create a new file that I'll call a bank.html, 323 00:16:53,020 --> 00:16:57,460 and just paste the contents of Bank of America's web page right there. 324 00:16:57,460 --> 00:16:59,350 And now, take a look at this. 325 00:16:59,350 --> 00:17:04,079 I go to link.html, and I'll say Visit Bank of America, 326 00:17:04,079 --> 00:17:06,610 but instead of linking to bankofamerica.com, 327 00:17:06,610 --> 00:17:12,430 I'll just link to bank.html, which is my file that I've created, 328 00:17:12,430 --> 00:17:16,660 that just copied the contents of Bank of America's HTML page. 329 00:17:16,660 --> 00:17:22,260 So if I save that, go back now to link.html, 330 00:17:22,260 --> 00:17:24,477 I see a link that says Visit Bank of America. 331 00:17:24,477 --> 00:17:26,310 And if I click on that Bank of America link, 332 00:17:26,310 --> 00:17:29,138 I might think that I'm being taken to Bank of America's website. 333 00:17:29,138 --> 00:17:30,930 And, indeed, when I go to it, what I see is 334 00:17:30,930 --> 00:17:34,260 something that looks very much like Bank of America's website. 335 00:17:34,260 --> 00:17:36,570 But if I look carefully at the URL bar, I'm 336 00:17:36,570 --> 00:17:41,910 actually just on bank.html on this web server that I, myself, am running. 337 00:17:41,910 --> 00:17:44,850 So it's very easy to take someone else's HTML 338 00:17:44,850 --> 00:17:48,390 and potentially pass it off as a page that it's not, so definitely 339 00:17:48,390 --> 00:17:51,720 something worth being mindful of as well. 340 00:17:51,720 --> 00:17:53,820 So we've now been able to create web pages that 341 00:17:53,820 --> 00:17:57,600 display text, that show images, that have links to other web pages. 342 00:17:57,600 --> 00:18:01,032 Let's continue by adding some more features to our web pages. 343 00:18:01,032 --> 00:18:03,240 One thing that you might imagine a web page having is 344 00:18:03,240 --> 00:18:07,040 not just one big block of text, but multiple paragraphs of text. 345 00:18:07,040 --> 00:18:09,740 And there are HTML elements for dealing with that as well. 346 00:18:09,740 --> 00:18:13,820 If I create a new file, that I'll just call paragraphs.html, 347 00:18:13,820 --> 00:18:17,370 the structure, again, very similar to index.html, but instead of, 348 00:18:17,370 --> 00:18:20,430 Hello, world!, imagine that I wanted three different paragraphs, 349 00:18:20,430 --> 00:18:21,420 for instance. 350 00:18:21,420 --> 00:18:25,440 To do that, I can just use the p tag-- p is short for paragraph-- 351 00:18:25,440 --> 00:18:26,800 where I say I want a paragraph. 352 00:18:26,800 --> 00:18:28,350 This is paragraph one. 353 00:18:28,350 --> 00:18:31,160 354 00:18:31,160 --> 00:18:37,240 Then, This is paragraph two, and then, This is paragraph three. 355 00:18:37,240 --> 00:18:43,160 And the result of that is, if I go back and take a look at paragraphs.html, 356 00:18:43,160 --> 00:18:47,070 I see three paragraphs separated by some visual space. 357 00:18:47,070 --> 00:18:49,223 So that's one tag that might be useful as well. 358 00:18:49,223 --> 00:18:51,140 Other tags that might be useful are, you might 359 00:18:51,140 --> 00:18:53,175 imagine wanting to create headings on top 360 00:18:53,175 --> 00:18:54,800 of different sections of your web page. 361 00:18:54,800 --> 00:18:57,620 You might want a big title at the top, and then subsections, 362 00:18:57,620 --> 00:18:59,240 and subsections within that. 363 00:18:59,240 --> 00:19:02,720 To do that, HTML has a number of different heading tags 364 00:19:02,720 --> 00:19:07,250 that you can take advantage of, too, the largest of which is called h1-- 365 00:19:07,250 --> 00:19:10,800 h for Heading and 1 for the number one biggest one. 366 00:19:10,800 --> 00:19:15,550 And I might say, here is Title of my page, for example. 367 00:19:15,550 --> 00:19:19,780 And so here I have an h1 tag, and if I go back, refresh the page, 368 00:19:19,780 --> 00:19:24,190 I now have a big heading, title of my page, at the very top. 369 00:19:24,190 --> 00:19:27,400 In addition to h1, there are also smaller headings as well. 370 00:19:27,400 --> 00:19:30,430 As you might guess, the next smallest is called h2. 371 00:19:30,430 --> 00:19:34,000 So I might have h2 as a first subsection, 372 00:19:34,000 --> 00:19:38,970 and I might have another h2 later on my page that is a second subsection, 373 00:19:38,970 --> 00:19:43,480 where now I have an h1 tag at the very top, a title of the entire web page, 374 00:19:43,480 --> 00:19:46,420 and then a number of h2 tags elsewhere in the page that 375 00:19:46,420 --> 00:19:48,670 are going to define subsections. 376 00:19:48,670 --> 00:19:51,540 So I can go back, refresh, and they're right. 377 00:19:51,540 --> 00:19:54,580 I have a big title at the very top, I have a first subsection, 378 00:19:54,580 --> 00:19:57,430 followed by some paragraphs, and then a second subsection 379 00:19:57,430 --> 00:19:59,270 followed by a paragraph as well. 380 00:19:59,270 --> 00:20:02,890 So h1 makes the big title at the top, h2 makes the smaller ones, 381 00:20:02,890 --> 00:20:07,290 and there are smaller ones as well-- h3, h4, h5, up to h6 382 00:20:07,290 --> 00:20:12,500 for different levels of titles that you might want to display on your web page. 383 00:20:12,500 --> 00:20:14,892 So now we've been able to create web pages that 384 00:20:14,892 --> 00:20:18,100 have titles, that have paragraphs, that have different-sized headings, links, 385 00:20:18,100 --> 00:20:18,970 and images. 386 00:20:18,970 --> 00:20:21,040 Let's take a look at at least one other feature 387 00:20:21,040 --> 00:20:24,520 that we might get out of HTML, which is that of creating tables. 388 00:20:24,520 --> 00:20:28,120 Oftentimes on a web page, you want to represent data in rows and columns, 389 00:20:28,120 --> 00:20:30,520 and tables are a way to do that. 390 00:20:30,520 --> 00:20:31,435 We'll go back here. 391 00:20:31,435 --> 00:20:35,530 I'll create a new file, call it table.html. 392 00:20:35,530 --> 00:20:38,740 Again, the structure, I'll copy from index.html. 393 00:20:38,740 --> 00:20:42,730 And inside the body of the web page now, I'd like to create a table. 394 00:20:42,730 --> 00:20:46,000 To do that, I'll create a table element. 395 00:20:46,000 --> 00:20:48,720 And so now, what goes inside of a table? 396 00:20:48,720 --> 00:20:52,510 Well, every table really is just composed of a bunch of table rows. 397 00:20:52,510 --> 00:20:54,130 And so how do I create a row? 398 00:20:54,130 --> 00:20:59,080 It turns out in HTML, there's an HTML tag called tr, short for Table Row, 399 00:20:59,080 --> 00:21:03,240 that is going to represent one row of the table. 400 00:21:03,240 --> 00:21:06,620 So I'll type tr to create a table row. 401 00:21:06,620 --> 00:21:09,020 And now, what goes inside of the table row? 402 00:21:09,020 --> 00:21:12,290 Notice how we're nesting HTML elements inside of one another. 403 00:21:12,290 --> 00:21:14,210 Inside the body, we have a table. 404 00:21:14,210 --> 00:21:16,360 Inside the table, we have a table row. 405 00:21:16,360 --> 00:21:19,190 And inside a table row, we have individual cells, 406 00:21:19,190 --> 00:21:22,970 cells that presumably are storing some kind of table data, the actual data 407 00:21:22,970 --> 00:21:25,700 that we want to display inside of the table. 408 00:21:25,700 --> 00:21:28,760 And so for that, to show table data in a single cell, 409 00:21:28,760 --> 00:21:33,800 we're going to use td, for Table Data, to show one individual cell. 410 00:21:33,800 --> 00:21:36,140 And so here I might have cell 1, and you might 411 00:21:36,140 --> 00:21:41,580 imagine I have another cell in the same row, cell 2, and then a third one. 412 00:21:41,580 --> 00:21:43,920 And maybe my table has multiple rows. 413 00:21:43,920 --> 00:21:47,340 Right now, I have one row, one tr element, inside of which 414 00:21:47,340 --> 00:21:50,790 are three cells, but I could create another row 415 00:21:50,790 --> 00:21:52,650 inside of which are more cells-- 416 00:21:52,650 --> 00:21:57,490 cell 4, cell 5, cell 6. 417 00:21:57,490 --> 00:22:01,350 And so now what I have is, inside the body of my web page, I have a table. 418 00:22:01,350 --> 00:22:05,140 Inside the table, I have two rows, and inside of each of those two rows, 419 00:22:05,140 --> 00:22:07,510 I have three cells. 420 00:22:07,510 --> 00:22:12,570 So now if I go back, let's go ahead and take a look at table.html, 421 00:22:12,570 --> 00:22:15,990 and what we'll see is we have a table in two rows, 422 00:22:15,990 --> 00:22:18,840 with each row containing cell 1, cell 2, cell 3, and then 423 00:22:18,840 --> 00:22:21,417 beneath that, cell 4, cell 5, and cell 6. 424 00:22:21,417 --> 00:22:23,250 Of course, in practice, you might-- you want 425 00:22:23,250 --> 00:22:25,870 your table to be styled a little bit, maybe having a border, 426 00:22:25,870 --> 00:22:28,500 maybe having different colors, maybe having a little bit 427 00:22:28,500 --> 00:22:30,427 more space around each of the cells. 428 00:22:30,427 --> 00:22:33,510 And we'll see that, when we start to talk about how to style our web page, 429 00:22:33,510 --> 00:22:37,350 but recall that HTML is really just describing the structure of the page. 430 00:22:37,350 --> 00:22:40,020 And the structure of this page is two rows, 431 00:22:40,020 --> 00:22:45,060 each with three cells, as we described using our table tr and td elements, 432 00:22:45,060 --> 00:22:49,380 and this is what the result of that is, when we take a look at table.html 433 00:22:49,380 --> 00:22:52,820 as by viewing it inside of a web browser. 434 00:22:52,820 --> 00:22:56,150 All right, so far, we've been able to create HTML pages 435 00:22:56,150 --> 00:22:58,730 that users can look at in their web browser and view. 436 00:22:58,730 --> 00:23:01,010 But, so far, there hasn't been any interaction. 437 00:23:01,010 --> 00:23:04,520 The user hasn't been able to interact with our pages in any way. 438 00:23:04,520 --> 00:23:06,980 Let's change that by creating a new file now 439 00:23:06,980 --> 00:23:11,930 that we'll call form.html, where I'm going to create an HTML form, 440 00:23:11,930 --> 00:23:14,150 a place where users can actually input information 441 00:23:14,150 --> 00:23:17,740 into the form in a web page, and then press a button to submit the form, 442 00:23:17,740 --> 00:23:18,438 for example. 443 00:23:18,438 --> 00:23:20,480 I'll use the same basic structure that we've been 444 00:23:20,480 --> 00:23:23,370 using with an HTML tag, head, and body. 445 00:23:23,370 --> 00:23:29,690 And, inside of the body now, I'll add a form, using the form HTML element. 446 00:23:29,690 --> 00:23:32,390 Inside of the form, let me create an input 447 00:23:32,390 --> 00:23:36,320 tag, that is going to be a place where a user can type in some input. 448 00:23:36,320 --> 00:23:40,850 And I'll go ahead and say that the type of this input is "text". 449 00:23:40,850 --> 00:23:43,930 So I want the user to type in some text. 450 00:23:43,930 --> 00:23:52,830 And then I'll say, input type="submit", value="Submit form". 451 00:23:52,830 --> 00:23:55,790 So what I've done here is I've said that, inside of this form, 452 00:23:55,790 --> 00:23:58,640 there are two parts, one place where the user can actually 453 00:23:58,640 --> 00:24:02,750 type in some text in order to input information to this form, 454 00:24:02,750 --> 00:24:05,432 and, next, an input of type submit, which 455 00:24:05,432 --> 00:24:08,390 is going to take the form of a button that a user can click on in order 456 00:24:08,390 --> 00:24:09,710 to submit this form. 457 00:24:09,710 --> 00:24:11,780 And what's going to be displayed on that button, 458 00:24:11,780 --> 00:24:14,900 well, its value is the words "Submit form", and so 459 00:24:14,900 --> 00:24:17,390 that is what's going to be displayed on the button that 460 00:24:17,390 --> 00:24:20,210 shows up inside of this form. 461 00:24:20,210 --> 00:24:24,050 So let's go ahead and take a look at what form.html looks like. 462 00:24:24,050 --> 00:24:28,280 Inside of form.html, you'll notice here that I have exactly those two parts. 463 00:24:28,280 --> 00:24:30,710 I have a text field, where I could type something in. 464 00:24:30,710 --> 00:24:33,500 I could type in Brian, for example, my name, 465 00:24:33,500 --> 00:24:37,152 and then I can click the Submit Form button to submit this form. 466 00:24:37,152 --> 00:24:39,110 And when I click the Submit Form button, you'll 467 00:24:39,110 --> 00:24:42,920 notice that nothing actually happens because, right now, my form isn't 468 00:24:42,920 --> 00:24:44,420 doing anything. 469 00:24:44,420 --> 00:24:47,800 So let's try and create a form that actually does do something. 470 00:24:47,800 --> 00:24:49,550 In particular, let's try and create a form 471 00:24:49,550 --> 00:24:53,210 that allows us to search for something using Google, for example. 472 00:24:53,210 --> 00:24:56,310 What actually happens when I try and perform a Google search? 473 00:24:56,310 --> 00:25:00,050 If I go to google.com, and I type in something like cats, 474 00:25:00,050 --> 00:25:03,290 let's take a look at the URL that I'm actually taken to. 475 00:25:03,290 --> 00:25:09,050 I'm taken to google.com/search?, and then a whole bunch of other 476 00:25:09,050 --> 00:25:10,140 information. 477 00:25:10,140 --> 00:25:13,370 But the only relevant piece of information here, as you might notice, 478 00:25:13,370 --> 00:25:16,160 is this q=cats, right? 479 00:25:16,160 --> 00:25:19,940 Cats is the word that I searched for, and the q here probably 480 00:25:19,940 --> 00:25:24,350 stands for Query, meaning the query that I searched for is cats. 481 00:25:24,350 --> 00:25:26,810 And, in fact, I can even ignore all the other information. 482 00:25:26,810 --> 00:25:34,260 If I just look for search?q=cats, and get rid of everything else, 483 00:25:34,260 --> 00:25:39,750 and press Return, this will have the effect of searching for cats on Google. 484 00:25:39,750 --> 00:25:40,830 So what is the syntax? 485 00:25:40,830 --> 00:25:41,913 What is the question mark? 486 00:25:41,913 --> 00:25:42,600 What is the q=? 487 00:25:42,600 --> 00:25:43,710 What is cats? 488 00:25:43,710 --> 00:25:45,810 Well, it turns out that web pages can take 489 00:25:45,810 --> 00:25:49,110 what are called the "get" parameters, parameters that specify, 490 00:25:49,110 --> 00:25:51,120 when I try and visit this web page, here's 491 00:25:51,120 --> 00:25:54,420 some additional information about the request. 492 00:25:54,420 --> 00:25:57,280 And here, when I go to google.com/search, 493 00:25:57,280 --> 00:26:00,030 the question mark here means that there are going to be some "get" 494 00:26:00,030 --> 00:26:01,980 parameters that are incoming. 495 00:26:01,980 --> 00:26:07,770 And here, q=cats means that this form takes a parameter called q, 496 00:26:07,770 --> 00:26:10,920 standing for the Query, which in this case is equal to cats 497 00:26:10,920 --> 00:26:13,590 because that's what I tried to search for when I typed in cats 498 00:26:13,590 --> 00:26:16,980 into the search box in Google, and I pressed the Search button in order 499 00:26:16,980 --> 00:26:18,630 to actually search for it. 500 00:26:18,630 --> 00:26:21,330 So how are we going to re-implement this behavior of trying 501 00:26:21,330 --> 00:26:23,190 to search for something on Google? 502 00:26:23,190 --> 00:26:26,130 Well, it turns out that I'm going to go ahead and take this URL, 503 00:26:26,130 --> 00:26:28,080 google.com/search. 504 00:26:28,080 --> 00:26:33,110 That's where I would like my form to submit to when I submit the form. 505 00:26:33,110 --> 00:26:37,580 So I'll go back to my form.html, and here, 506 00:26:37,580 --> 00:26:39,980 this form, in addition to just being a form, 507 00:26:39,980 --> 00:26:42,410 is going to have a particular action. 508 00:26:42,410 --> 00:26:45,050 The action of a form is where the form should 509 00:26:45,050 --> 00:26:48,723 be submitted to after I click that button called Submit Form. 510 00:26:48,723 --> 00:26:51,890 And, in this case, what I would like to do, in order to re-implement Google, 511 00:26:51,890 --> 00:26:54,770 effectively, is to say that, when I submit the form, 512 00:26:54,770 --> 00:27:02,110 I would like the action of this form to be "https://www.google.com/search". 513 00:27:02,110 --> 00:27:06,140 When I submit the form, I would like to submit this to /search, 514 00:27:06,140 --> 00:27:09,500 and the method I would like to use is get. 515 00:27:09,500 --> 00:27:12,230 You might recall from when we were talking about HTTP, 516 00:27:12,230 --> 00:27:15,440 that every request has a particular method, and "get" just means, 517 00:27:15,440 --> 00:27:16,820 get me a page. 518 00:27:16,820 --> 00:27:19,070 And, in this case, when I'm using method="get", 519 00:27:19,070 --> 00:27:22,340 I'm trying to get the results of a Google search, 520 00:27:22,340 --> 00:27:25,190 but I also need to specify that additional parameter-- 521 00:27:25,190 --> 00:27:28,990 google.com/search, q=cats. 522 00:27:28,990 --> 00:27:32,210 Q stands for query, and this is where we were specifying 523 00:27:32,210 --> 00:27:34,010 what we're actually searching for-- 524 00:27:34,010 --> 00:27:35,810 in this case, searching for cats. 525 00:27:35,810 --> 00:27:39,260 And I would like it so that on my page, the user can type in whatever it is 526 00:27:39,260 --> 00:27:42,170 that they want to search for, click the Submit Form button, 527 00:27:42,170 --> 00:27:47,930 and then be taken to google.com/search, q= whatever it is that the user typed 528 00:27:47,930 --> 00:27:48,830 in. 529 00:27:48,830 --> 00:27:54,320 And it turns out, in HTML, if we want to specify a particular "get" parameter, 530 00:27:54,320 --> 00:27:57,590 we just need to make sure that the input field that corresponds 531 00:27:57,590 --> 00:28:00,280 to that parameter has a name. 532 00:28:00,280 --> 00:28:03,950 And so here, I'm going to name this input field by giving it a name 533 00:28:03,950 --> 00:28:07,590 attribute, in addition to a type attribute, which, in this case, 534 00:28:07,590 --> 00:28:11,870 will just be q because q is the name that Google is expecting 535 00:28:11,870 --> 00:28:14,660 on google.com/search. 536 00:28:14,660 --> 00:28:16,680 So all in all, what does this mean? 537 00:28:16,680 --> 00:28:19,760 Well, it means that I have here a form, that when I submit it, 538 00:28:19,760 --> 00:28:23,690 is going to take me to google.com/search, using the "get" 539 00:28:23,690 --> 00:28:25,190 request method. 540 00:28:25,190 --> 00:28:29,540 And it's also going to add to it a "get" parameter called q, which 541 00:28:29,540 --> 00:28:34,070 will be equal to whatever text the user typed in into this particular input 542 00:28:34,070 --> 00:28:34,770 field. 543 00:28:34,770 --> 00:28:36,770 So we'll have an input field where the user will 544 00:28:36,770 --> 00:28:39,260 be able to type in what it is that they're searching for, 545 00:28:39,260 --> 00:28:41,630 and when they click on Submit Form, they'll hopefully 546 00:28:41,630 --> 00:28:43,770 be taken to Google's web page. 547 00:28:43,770 --> 00:28:45,240 Let's try it out. 548 00:28:45,240 --> 00:28:48,380 I'll go back to form.html. 549 00:28:48,380 --> 00:28:50,690 And so here, we have a search form, where I can 550 00:28:50,690 --> 00:28:52,550 type in something that I'm looking for. 551 00:28:52,550 --> 00:28:56,210 I'll go ahead and type in cats, and I'll press Submit Form. 552 00:28:56,210 --> 00:29:01,850 And when I do, you'll notice that I'm taken to google.com/search?q=cats, 553 00:29:01,850 --> 00:29:04,880 and now I'm taken to Google's search page that displays the results 554 00:29:04,880 --> 00:29:06,140 for cats. 555 00:29:06,140 --> 00:29:08,870 So using this very simple HTML form, we've 556 00:29:08,870 --> 00:29:12,230 now been able to recreate effectively the home page of Google, 557 00:29:12,230 --> 00:29:15,680 that lets you type something in and click a button that takes you 558 00:29:15,680 --> 00:29:20,150 to Google's search results page, all by using these features of HTML, 559 00:29:20,150 --> 00:29:24,160 creating a form element, and an input element as well. 560 00:29:24,160 --> 00:29:27,300 So we've seen now a lot of different HTML elements. 561 00:29:27,300 --> 00:29:31,110 We've see an HTML head, title, body, in addition 562 00:29:31,110 --> 00:29:34,230 to HTML elements that let us create images, and links, 563 00:29:34,230 --> 00:29:36,660 and tables, and forms, and more, but there are even 564 00:29:36,660 --> 00:29:38,580 more HTML elements than just that. 565 00:29:38,580 --> 00:29:41,790 In fact, if you're trying to add something to your HTML page, 566 00:29:41,790 --> 00:29:45,120 odds are you can do a Google search for, what is the HTML element that 567 00:29:45,120 --> 00:29:46,170 will let me do this? 568 00:29:46,170 --> 00:29:48,240 And you'll be able to find HTML elements that 569 00:29:48,240 --> 00:29:51,720 will let you add other features to your web pages as well. 570 00:29:51,720 --> 00:29:54,480 Of course, right now, our web pages are pretty simple. 571 00:29:54,480 --> 00:29:58,020 They're usually just a white background with text, all in the same font, 572 00:29:58,020 --> 00:30:00,780 all left-aligned on the left side of the web browser. 573 00:30:00,780 --> 00:30:04,540 So what we might like to do is add some styling to our web pages as well, 574 00:30:04,540 --> 00:30:06,060 but that's to come next. 575 00:30:06,060 --> 00:30:09,080 For now, this was HTML. 576 00:30:09,080 --> 00:30:10,000