1 00:00:01,981 --> 00:00:03,227 In the last lecture, 2 00:00:03,227 --> 00:00:04,586 we created the basic structure 3 00:00:04,586 --> 00:00:08,753 of our first HTML document using the head and body element. 4 00:00:09,638 --> 00:00:14,155 Now, let's start to fill it with some content. 5 00:00:14,155 --> 00:00:16,751 Now, back to our webpage. 6 00:00:16,751 --> 00:00:18,590 In the head of the webpage, 7 00:00:18,590 --> 00:00:21,536 let's just give our webpage a title for now. 8 00:00:21,536 --> 00:00:24,869 For that, I'm gonna use the <title> tag. 9 00:00:26,517 --> 00:00:27,350 Title. 10 00:00:28,267 --> 00:00:30,575 And write something like... 11 00:00:30,575 --> 00:00:31,492 my first... 12 00:00:32,590 --> 00:00:34,393 blog post... 13 00:00:34,393 --> 00:00:35,226 in here. 14 00:00:37,186 --> 00:00:38,457 And now for the body. 15 00:00:38,457 --> 00:00:40,526 Let's start with some text. 16 00:00:40,526 --> 00:00:44,843 HTML has text for headings starting with the <h1> element 17 00:00:44,843 --> 00:00:45,876 for the main headings, 18 00:00:45,876 --> 00:00:50,043 all the way down to <h6> for less important headings. 19 00:00:51,424 --> 00:00:52,257 So, I'm... 20 00:00:53,207 --> 00:00:55,124 going to use an <h1>... 21 00:00:56,003 --> 00:00:57,608 element here. 22 00:00:57,608 --> 00:01:00,507 And let's just repeat the text from the title, 23 00:01:00,507 --> 00:01:01,353 My 24 00:01:01,353 --> 00:01:02,186 first 25 00:01:02,186 --> 00:01:03,019 blog 26 00:01:03,019 --> 00:01:03,852 post. 27 00:01:04,746 --> 00:01:06,125 Alright. 28 00:01:06,125 --> 00:01:10,817 Now, Do you want to see what this looks like in a browser? 29 00:01:10,817 --> 00:01:14,685 There, a bracket string comes in again. 30 00:01:14,685 --> 00:01:16,385 One great feature of this editor 31 00:01:16,385 --> 00:01:18,968 is this so-called Live Preview. 32 00:01:20,373 --> 00:01:22,480 So, when I hit this button here, 33 00:01:22,480 --> 00:01:24,667 it opens a new browser window 34 00:01:24,667 --> 00:01:27,348 with a live connection... 35 00:01:27,348 --> 00:01:30,087 between our code and the browser. 36 00:01:30,087 --> 00:01:32,240 So that we can see all the changes we make 37 00:01:32,240 --> 00:01:36,407 in our code being immediately rendered by the browser. 38 00:01:38,161 --> 00:01:41,037 So, then I go back to Brackets. 39 00:01:41,037 --> 00:01:43,779 We see now that this symbol here has changed its color 40 00:01:43,779 --> 00:01:48,023 to orange, which means that the connection is now live. 41 00:01:48,023 --> 00:01:51,492 I will these two windows side by side. 42 00:01:51,492 --> 00:01:54,882 So, the Brackets editor on this side, 43 00:01:54,882 --> 00:01:57,778 and the Google Chrome window on this side. 44 00:01:57,778 --> 00:02:01,376 So, we can see our changes immediately. 45 00:02:01,376 --> 00:02:04,253 Now, I think this only works with Google Chrome, though. 46 00:02:04,253 --> 00:02:06,309 If you prefer to use another browser, 47 00:02:06,309 --> 00:02:08,559 let's say Firefox or Safari 48 00:02:09,828 --> 00:02:12,090 or even Internet Explorer, 49 00:02:12,090 --> 00:02:14,204 you can totally do that. 50 00:02:14,204 --> 00:02:17,952 In that case, you gotta open the HTML file we created, 51 00:02:17,952 --> 00:02:20,416 right from the Blog Post folder, 52 00:02:20,416 --> 00:02:22,618 and then hit the reload button each time you want 53 00:02:22,618 --> 00:02:25,868 to see the changes we made in the code. 54 00:02:28,132 --> 00:02:30,769 So, this is what an <h1> element looks like 55 00:02:30,769 --> 00:02:33,535 in a browser without any styling. 56 00:02:33,535 --> 00:02:36,037 Also, notice how the title that we defined 57 00:02:36,037 --> 00:02:40,726 for our webpage displays in the Google Chrome tab. 58 00:02:40,726 --> 00:02:44,460 Let's continue with some secondary headings now, 59 00:02:44,460 --> 00:02:47,141 which are, as you may guess, 60 00:02:47,141 --> 00:02:48,308 <h2> elements. 61 00:02:50,364 --> 00:02:51,811 Okay. 62 00:02:51,811 --> 00:02:54,274 I'll write something like, 63 00:02:54,274 --> 00:02:55,107 This is my 64 00:02:56,291 --> 00:02:57,342 first 65 00:02:57,342 --> 00:02:58,175 blog... 66 00:02:59,452 --> 00:03:00,285 blog post. 67 00:03:01,564 --> 00:03:04,408 And you see, like magic, that text appears 68 00:03:04,408 --> 00:03:07,158 on the right side in the browser. 69 00:03:09,318 --> 00:03:12,471 And, since it's so fun, let's add another one. 70 00:03:12,471 --> 00:03:14,016 Right here. 71 00:03:14,016 --> 00:03:15,295 Let's say... 72 00:03:15,295 --> 00:03:16,636 H... 73 00:03:16,636 --> 00:03:17,469 HTML is... 74 00:03:18,357 --> 00:03:19,190 amazing. 75 00:03:21,995 --> 00:03:22,995 Ah-may-zing. 76 00:03:24,317 --> 00:03:25,150 Okay. 77 00:03:25,150 --> 00:03:28,527 Now, it's time for some paragraphs. 78 00:03:28,527 --> 00:03:31,944 Paragraphs are elements for larger texts. 79 00:03:35,275 --> 00:03:37,775 And we use 'em just like this. 80 00:03:39,242 --> 00:03:42,181 Now, we need some text for these paragraphs. 81 00:03:42,181 --> 00:03:45,028 So, let's just go to Google Chrome 82 00:03:45,028 --> 00:03:47,361 and look for some blindtext. 83 00:03:53,507 --> 00:03:54,951 So, blindtext is commonly used 84 00:03:54,951 --> 00:03:59,520 if we don't have any real text for a webpage. 85 00:03:59,520 --> 00:04:03,687 I'm just gonna copy all of this and paste it right here. 86 00:04:05,127 --> 00:04:06,877 That's a lot of text. 87 00:04:10,594 --> 00:04:11,594 Cut it here. 88 00:04:13,477 --> 00:04:14,861 So it's not so much. 89 00:04:14,861 --> 00:04:16,424 'Kay, we can close this. 90 00:04:16,424 --> 00:04:17,331 And, alright. 91 00:04:17,331 --> 00:04:20,339 Here, we have a paragraph with some nice text in it. 92 00:04:20,339 --> 00:04:24,506 Now, I will just make the same thing for the other 93 00:04:26,372 --> 00:04:28,955 paragraph I want below this h2. 94 00:04:30,211 --> 00:04:34,212 And now, we see we have two paragraphs here. 95 00:04:34,212 --> 00:04:36,647 Now, suppose you want to apply some basic formatting 96 00:04:36,647 --> 00:04:38,302 to the text. 97 00:04:38,302 --> 00:04:39,581 Do you want to see how? 98 00:04:39,581 --> 00:04:41,325 Alright, let's do it. 99 00:04:41,325 --> 00:04:45,492 I'm gonna start with bold text using the <strong> tag. 100 00:04:50,524 --> 00:04:51,732 Like... 101 00:04:51,732 --> 00:04:52,732 this is a... 102 00:04:53,638 --> 00:04:54,471 very. 103 00:04:56,734 --> 00:04:58,373 Now, I use the <strong> element. 104 00:04:58,373 --> 00:04:59,948 And close it. 105 00:04:59,948 --> 00:05:02,031 And now the word: strong. 106 00:05:05,239 --> 00:05:06,072 Text... 107 00:05:06,929 --> 00:05:07,762 because 108 00:05:07,762 --> 00:05:08,595 it is... 109 00:05:11,001 --> 00:05:11,834 Strong. 110 00:05:13,045 --> 00:05:15,132 Well, because it is bold, actually. 111 00:05:15,132 --> 00:05:17,729 Just some random text. 112 00:05:17,729 --> 00:05:20,312 Just so you see how this works. 113 00:05:21,483 --> 00:05:24,233 So, these two words are bold now. 114 00:05:26,405 --> 00:05:28,983 And now, some italics, 115 00:05:28,983 --> 00:05:31,272 for which we use the <em> tag, 116 00:05:31,272 --> 00:05:33,439 which stands for emphasis. 117 00:05:34,423 --> 00:05:36,860 So, again some random text, 118 00:05:36,860 --> 00:05:37,693 I would... 119 00:05:39,136 --> 00:05:40,707 like... 120 00:05:40,707 --> 00:05:41,540 to. 121 00:05:42,616 --> 00:05:44,880 Now, the <em> element. 122 00:05:44,880 --> 00:05:45,880 Emphasize... 123 00:05:51,726 --> 00:05:52,805 how 124 00:05:52,805 --> 00:05:54,376 important 125 00:05:54,376 --> 00:05:55,977 it is... 126 00:05:55,977 --> 00:05:56,977 to follow... 127 00:05:58,316 --> 00:05:59,483 this course... 128 00:06:02,280 --> 00:06:03,447 until the end! 129 00:06:05,446 --> 00:06:07,277 Okay, and now we have... 130 00:06:07,277 --> 00:06:08,610 the emphasize... 131 00:06:09,511 --> 00:06:10,814 word 132 00:06:10,814 --> 00:06:14,231 actually emphasize with the <em> element. 133 00:06:17,670 --> 00:06:22,294 At last, some underline text using the <u> tag. 134 00:06:22,294 --> 00:06:24,580 Which, you should actually not use on a real website, 135 00:06:24,580 --> 00:06:27,865 but I will show it to you anyway. 136 00:06:27,865 --> 00:06:29,448 So, there's some... 137 00:06:32,277 --> 00:06:33,360 Underlined... 138 00:06:35,266 --> 00:06:36,099 text. 139 00:06:40,332 --> 00:06:41,165 Okay. 140 00:06:41,165 --> 00:06:43,964 Now, see it's underlined here. 141 00:06:43,964 --> 00:06:46,714 But, another thing you maybe noticed is 142 00:06:46,714 --> 00:06:50,399 that even with all these line breaks I made here, 143 00:06:50,399 --> 00:06:52,199 in the HTML document, 144 00:06:52,199 --> 00:06:55,282 nothing happened here in the browser. 145 00:06:56,574 --> 00:07:00,387 So, in fact, I can do as many as I want here, 146 00:07:00,387 --> 00:07:02,112 see, nothing happens. 147 00:07:02,112 --> 00:07:04,195 If I want a line break... 148 00:07:06,079 --> 00:07:07,467 on my actual website, 149 00:07:07,467 --> 00:07:09,899 I have to use the <br> element, 150 00:07:09,899 --> 00:07:11,727 which stands for break. 151 00:07:11,727 --> 00:07:13,622 Goes like this. 152 00:07:13,622 --> 00:07:14,735 Okay. 153 00:07:14,735 --> 00:07:17,568 Now, you see the line here breaks. 154 00:07:19,970 --> 00:07:23,476 Just to try it, let's put another one here. 155 00:07:23,476 --> 00:07:25,062 Again, it worked. 156 00:07:25,062 --> 00:07:27,185 And, another one here. 157 00:07:27,185 --> 00:07:28,885 So, now we have one line 158 00:07:28,885 --> 00:07:32,302 for each of the little sentences I wrote. 159 00:07:34,194 --> 00:07:35,538 Congratulations! 160 00:07:35,538 --> 00:07:38,850 You've just created your first HTML page. 161 00:07:38,850 --> 00:07:43,166 It is like the most basic HTML you can possible imagine. 162 00:07:43,166 --> 00:07:46,091 But, it's really not bad for the beginning. 163 00:07:46,091 --> 00:07:48,725 And, in the next lecture, we will add some images 164 00:07:48,725 --> 00:07:52,642 to the webpage to make it a little less boring.