1 00:00:00,240 --> 00:00:02,220 Instructor: So now that you've seen what you can do 2 00:00:02,220 --> 00:00:04,650 with the HTML heading element, 3 00:00:04,650 --> 00:00:06,090 the next one we're gonna learn about 4 00:00:06,090 --> 00:00:09,810 is the paragraph element, and this is also related 5 00:00:09,810 --> 00:00:14,220 to formatting and putting text on our websites. 6 00:00:14,220 --> 00:00:19,020 This is what a paragraph element looks like. 7 00:00:19,020 --> 00:00:20,460 And similar to the heading element, 8 00:00:20,460 --> 00:00:25,460 you've got the opening tag and the closing tag. 9 00:00:25,620 --> 00:00:28,920 And in between, you've got the content 10 00:00:28,920 --> 00:00:32,340 that is going to be your paragraph. 11 00:00:32,340 --> 00:00:35,160 Now, the reason why we need a paragraph tag 12 00:00:35,160 --> 00:00:39,990 is because if you just had plain text in your HTML document, 13 00:00:39,990 --> 00:00:43,830 when you run the code and you see it on a website, 14 00:00:43,830 --> 00:00:46,980 what you'll see is something like this, 15 00:00:46,980 --> 00:00:51,060 the text, they run into each other onto the same line 16 00:00:51,060 --> 00:00:54,360 and you can't actually tell where one paragraph begins 17 00:00:54,360 --> 00:00:56,760 and where the other ends. 18 00:00:56,760 --> 00:01:01,020 On the other hand, if we had created two paragraph elements 19 00:01:01,020 --> 00:01:04,140 for these two lines, then when we run the code, 20 00:01:04,140 --> 00:01:08,430 you will see them being separated with a line in between 21 00:01:08,430 --> 00:01:11,973 to be able to distinguish the different paragraphs. 22 00:01:12,870 --> 00:01:14,730 And this is also really important 23 00:01:14,730 --> 00:01:17,070 for people who are using screen readers 24 00:01:17,070 --> 00:01:19,050 so people who might be blind, 25 00:01:19,050 --> 00:01:21,210 because what the screen reader will do 26 00:01:21,210 --> 00:01:25,590 is they'll see the beginning of each paragraph element 27 00:01:25,590 --> 00:01:29,220 and it allows the blind user to be able to skip 28 00:01:29,220 --> 00:01:31,500 to the next paragraph easily 29 00:01:31,500 --> 00:01:34,593 and be able to see what's going on each time. 30 00:01:35,580 --> 00:01:37,560 Now let's put those skills into practice 31 00:01:37,560 --> 00:01:41,910 by trying an exercise using the paragraph element. 32 00:01:41,910 --> 00:01:44,850 If you head over to the course resources for this lesson, 33 00:01:44,850 --> 00:01:47,160 you should be able to download the zip file 34 00:01:47,160 --> 00:01:50,310 for the 2.2 Paragraph Element. 35 00:01:50,310 --> 00:01:53,880 And once you've extracted and unzipped it, then go ahead 36 00:01:53,880 --> 00:01:56,790 and put it into your web development projects folder 37 00:01:56,790 --> 00:01:59,580 and then open it up inside VS Code. 38 00:01:59,580 --> 00:02:02,880 I showed you how to do all of this in the previous lesson 39 00:02:02,880 --> 00:02:06,750 in HTML Heading Element, as well as the initial lesson 40 00:02:06,750 --> 00:02:09,930 when I showed you how to download course resources, 41 00:02:09,930 --> 00:02:11,670 so be sure to check those places 42 00:02:11,670 --> 00:02:15,270 if you don't know how to get hold of this folder. 43 00:02:15,270 --> 00:02:17,460 But once you have it opened up like this, 44 00:02:17,460 --> 00:02:20,970 then I want you to go ahead and open up the index.html file 45 00:02:20,970 --> 00:02:24,990 which as always, is where we're going to write our code. 46 00:02:24,990 --> 00:02:27,900 Notice here, we've got three paragraphs, 47 00:02:27,900 --> 00:02:30,240 the first paragraph, the second paragraph, 48 00:02:30,240 --> 00:02:32,190 and the third paragraph. 49 00:02:32,190 --> 00:02:34,830 And then there's some placeholder text in Latin 50 00:02:34,830 --> 00:02:36,330 which doesn't mean anything. 51 00:02:36,330 --> 00:02:38,940 It just is there so that you can see 52 00:02:38,940 --> 00:02:42,420 what a paragraph of text would look like. 53 00:02:42,420 --> 00:02:47,420 And when you go ahead and right click and Show Preview, 54 00:02:47,550 --> 00:02:49,590 you should see that all of the paragraphs 55 00:02:49,590 --> 00:02:53,520 are jumbled together into one long line, 56 00:02:53,520 --> 00:02:56,550 and we can't tell where one paragraph begins 57 00:02:56,550 --> 00:02:58,260 and the other one ends. 58 00:02:58,260 --> 00:03:02,130 So now, it is your mission to solve this problem 59 00:03:02,130 --> 00:03:05,640 using what you've learned about the paragraph element. 60 00:03:05,640 --> 00:03:08,730 So go ahead and format these three paragraphs 61 00:03:08,730 --> 00:03:11,010 using the paragraph tag. 62 00:03:11,010 --> 00:03:12,420 And once you're done, 63 00:03:12,420 --> 00:03:16,020 you should see the preview show something like this, 64 00:03:16,020 --> 00:03:20,430 where each paragraph is separated into new lines 65 00:03:20,430 --> 00:03:24,360 and clearly visually we're able to see the difference 66 00:03:24,360 --> 00:03:26,220 and we're able to distinguish 67 00:03:26,220 --> 00:03:28,950 these three different paragraphs. 68 00:03:28,950 --> 00:03:30,870 Pause the video now, and once you're done, 69 00:03:30,870 --> 00:03:32,820 we'll go through the solution together. 70 00:03:36,990 --> 00:03:40,050 All right, we're going to use our paragraph tag. 71 00:03:40,050 --> 00:03:43,440 So we're going to put the open tag here 72 00:03:43,440 --> 00:03:46,260 just in front of our first paragraph, 73 00:03:46,260 --> 00:03:48,690 and then we're going to put the closing tag 74 00:03:48,690 --> 00:03:52,500 at the very end of our first paragraph. 75 00:03:52,500 --> 00:03:54,120 And then we're gonna repeat that basically 76 00:03:54,120 --> 00:03:56,793 for all of the other paragraphs. 77 00:03:59,790 --> 00:04:03,810 Now, you can see here, I'm just clicking and dragging. 78 00:04:03,810 --> 00:04:08,810 Alternatively, you can cut it and then paste it 79 00:04:08,880 --> 00:04:11,640 at the very end of the paragraph. 80 00:04:11,640 --> 00:04:13,350 It really doesn't matter how you do it, 81 00:04:13,350 --> 00:04:17,279 as long as you get those tags in the right places. 82 00:04:17,279 --> 00:04:20,490 And now hopefully, your preview should have updated 83 00:04:20,490 --> 00:04:24,540 and you can see these paragraphs forming as we type. 84 00:04:24,540 --> 00:04:27,930 So this looks pretty much the same as our goal. 85 00:04:27,930 --> 00:04:31,050 And if you check the solution HTML, 86 00:04:31,050 --> 00:04:36,050 you should see the P tags in the correct places as well. 87 00:04:36,180 --> 00:04:37,920 So hopefully, that wasn't too hard 88 00:04:37,920 --> 00:04:41,190 and you were able to do it all by yourself. 89 00:04:41,190 --> 00:04:44,040 And you've seen now what is the benefit 90 00:04:44,040 --> 00:04:48,660 of using a paragraph element to separate text 91 00:04:48,660 --> 00:04:52,440 into different paragraphs of content. 92 00:04:52,440 --> 00:04:54,180 Now, what you saw in the exercise 93 00:04:54,180 --> 00:04:56,790 are bits of placeholder text 94 00:04:56,790 --> 00:05:00,510 and it's what we would refer to as Lorem Ipsum. 95 00:05:00,510 --> 00:05:02,550 It's something that you'll come across quite a lot, 96 00:05:02,550 --> 00:05:04,470 especially in web design. 97 00:05:04,470 --> 00:05:07,380 It's so that we don't end up with something like this 98 00:05:07,380 --> 00:05:11,130 where we're trying to simulate content in a paragraph, 99 00:05:11,130 --> 00:05:13,470 but then we're just writing content, content, content, 100 00:05:13,470 --> 00:05:15,330 or this is a paragraph, this is a paragraph, 101 00:05:15,330 --> 00:05:16,163 this is a paragraph. 102 00:05:16,163 --> 00:05:17,640 And the reason why we don't wanna do this 103 00:05:17,640 --> 00:05:20,610 is because these are all the same words. 104 00:05:20,610 --> 00:05:22,260 The sentence has the same length. 105 00:05:22,260 --> 00:05:25,050 It doesn't look like what a natural block of text 106 00:05:25,050 --> 00:05:27,600 would look like, and we don't have the time or energy 107 00:05:27,600 --> 00:05:29,640 to actually create the content 108 00:05:29,640 --> 00:05:31,800 just for testing and web design, 109 00:05:31,800 --> 00:05:35,771 so that's why we use something called Lorem Ipsum. 110 00:05:35,771 --> 00:05:38,520 And Lorem Ipsum apparently comes 111 00:05:38,520 --> 00:05:41,760 from Latin classical literature 112 00:05:41,760 --> 00:05:45,930 by a famous author called Cicero, if you've heard of him, 113 00:05:45,930 --> 00:05:48,630 and it's over 2,000 years old. 114 00:05:48,630 --> 00:05:50,910 And this has been in use in the print industry 115 00:05:50,910 --> 00:05:54,180 for many, many years, ever since the 1500s even 116 00:05:54,180 --> 00:05:57,150 where people started laying out newspapers, 117 00:05:57,150 --> 00:05:59,670 and when they didn't have the content for the layout, 118 00:05:59,670 --> 00:06:01,980 they would use this placeholder text. 119 00:06:01,980 --> 00:06:05,383 If you wanna get hold of some, you can go over to lipsum.com 120 00:06:06,360 --> 00:06:09,090 and there, you'll find Lorem Ipsum 121 00:06:09,090 --> 00:06:13,860 even in different languages, like Dutch or Polish. 122 00:06:13,860 --> 00:06:15,090 And you can use this tool 123 00:06:15,090 --> 00:06:19,020 to generate as many paragraphs or words or bytes 124 00:06:19,020 --> 00:06:24,020 or lists as you need by simply using this Generate button. 125 00:06:24,180 --> 00:06:27,030 And here, I've got five paragraphs ready to go 126 00:06:27,030 --> 00:06:29,280 to put into my new web design. 127 00:06:29,280 --> 00:06:31,980 Now instead of having something that looks like this, 128 00:06:31,980 --> 00:06:34,650 where everything's all the same length, 129 00:06:34,650 --> 00:06:38,130 instead, we have very natural-looking paragraphs 130 00:06:38,130 --> 00:06:42,090 that mimic pretty much what a regular English article 131 00:06:42,090 --> 00:06:45,780 would look like and this is done in a matter of seconds 132 00:06:45,780 --> 00:06:47,790 using Lorem Ipsum. 133 00:06:47,790 --> 00:06:50,070 Now, if Lorem Ipsum is a little bit too boring for you, 134 00:06:50,070 --> 00:06:53,520 there's actually some novelty versions of this. 135 00:06:53,520 --> 00:06:56,640 One of my favorite is baconipsum.com 136 00:06:56,640 --> 00:06:59,160 and it will generate similar to Lorem Ipsum, 137 00:06:59,160 --> 00:07:03,090 but then you'll get words like bacon and flank 138 00:07:03,090 --> 00:07:05,820 and pork loin and pork belly. 139 00:07:05,820 --> 00:07:07,320 Now, if you're not a meat eater, 140 00:07:07,320 --> 00:07:11,190 then maybe you should try something like broipsum.com, 141 00:07:11,190 --> 00:07:15,750 where you can have all of the bro terminology 142 00:07:15,750 --> 00:07:18,840 in a Lorem Ipsum format. 143 00:07:18,840 --> 00:07:22,140 And apparently, the things that bros say 144 00:07:22,140 --> 00:07:27,140 are things like taco, pow pow 145 00:07:27,390 --> 00:07:31,860 and washboard and rail 146 00:07:31,860 --> 00:07:35,400 and heli pow pow, 147 00:07:35,400 --> 00:07:36,840 whatever it may be. 148 00:07:36,840 --> 00:07:39,210 And if none of these take your fancy, 149 00:07:39,210 --> 00:07:41,070 then I recommend going onto to Google, 150 00:07:41,070 --> 00:07:44,070 and you can actually find more of these kind of things 151 00:07:44,070 --> 00:07:46,260 by just searching for funny Lorem Ipsum 152 00:07:46,260 --> 00:07:48,000 and there's a whole bunch of different ones, 153 00:07:48,000 --> 00:07:51,210 like vegan ipsum, or pirate ipsum, 154 00:07:51,210 --> 00:07:52,740 and you'll come across 155 00:07:52,740 --> 00:07:56,340 all sorts of different placeholder text generators. 156 00:07:56,340 --> 00:07:59,910 But the important thing is you know how to get hold of them 157 00:07:59,910 --> 00:08:02,490 and you can use it in your code. 158 00:08:02,490 --> 00:08:06,030 So as an add-on challenge, if you want to, 159 00:08:06,030 --> 00:08:09,625 you can generate your own version of Lorem Ipsum 160 00:08:09,625 --> 00:08:11,940 or Bacon Ipsum or Bro Ipsum 161 00:08:11,940 --> 00:08:16,500 and you can create an article using the paragraph tag 162 00:08:16,500 --> 00:08:20,460 and the Lorem Ipsum that you've generated. 163 00:08:20,460 --> 00:08:23,460 Feel free to modify the index.html 164 00:08:23,460 --> 00:08:26,343 in the coding exercise that we just completed. 165 00:08:27,180 --> 00:08:28,830 So have a play around with that 166 00:08:28,830 --> 00:08:32,309 and be sure to comment in the Q&A sections below 167 00:08:32,309 --> 00:08:35,429 if you find some Lorem Ipsum that you think is ridiculous 168 00:08:35,429 --> 00:08:37,830 or really funny or really cool 169 00:08:37,830 --> 00:08:40,863 and I'll see you on the next lesson.