1 00:00:00,390 --> 00:00:04,710 So now that we understand how the HTML boilerplate works and what each line 2 00:00:04,710 --> 00:00:05,550 does in it, 3 00:00:05,790 --> 00:00:09,840 it's time to move into the body section and start giving our website some 4 00:00:09,840 --> 00:00:14,370 content cause at the moment, our website is looking a little bit plain. 5 00:00:14,610 --> 00:00:16,740 So if we have a look at Jon Kleinberg's website, 6 00:00:16,860 --> 00:00:21,860 the first thing that we want right at the top here is a level one heading that 7 00:00:21,960 --> 00:00:26,550 says our name. So let's hit back into Atom and as a challenge 8 00:00:26,550 --> 00:00:31,260 to you, add a level one heading inside the body section of your website that 9 00:00:31,290 --> 00:00:32,940 contains your name. 10 00:00:38,090 --> 00:00:43,090 So this one's easy and it's made even easier using the auto complete features 11 00:00:43,730 --> 00:00:47,990 inside Atom. All have to write in order to create an h1 tag, 12 00:00:48,050 --> 00:00:51,710 which is what's needed to create a level one heading, is I just have to write 13 00:00:51,770 --> 00:00:54,770 h1 and it makes a suggestion asking me, 14 00:00:55,100 --> 00:00:59,780 are you looking for heading level one? And now if I hit enter, or if I hit tab, 15 00:01:00,140 --> 00:01:05,140 I get the h1 tag inserted automatically, opened and closed for me 16 00:01:06,020 --> 00:01:10,520 and my cursor gets moved right in between exactly the place where I would need 17 00:01:10,520 --> 00:01:11,480 to start typing. 18 00:01:12,260 --> 00:01:17,260 So now if I hit save and I head back over to my personal site, 19 00:01:17,810 --> 00:01:19,700 and remember if you close down this tab, 20 00:01:19,940 --> 00:01:23,600 you can always go into your Finder or your Explorer to open it back up again 21 00:01:23,810 --> 00:01:28,810 or you can select the full file path from Atom as well and paste it into here. 22 00:01:29,540 --> 00:01:32,360 Now, if I hit enter, you can see my h1, 23 00:01:32,390 --> 00:01:35,990 my level one heading gets shown up here just like John Kleinberg's 24 00:01:36,080 --> 00:01:38,450 and we're ready to move on to the next thing. 25 00:01:38,870 --> 00:01:43,820 Now we want to have a line that shows our title, so who it is that we are. 26 00:01:44,330 --> 00:01:46,730 Let's head back to Atom. And firstly, 27 00:01:46,730 --> 00:01:49,760 I'm going to get rid of this little heart because it doesn't look very 28 00:01:49,760 --> 00:01:50,593 professional 29 00:01:51,020 --> 00:01:55,550 and I'm going to add another HTML element under the h1. 30 00:01:56,180 --> 00:02:01,180 And this is a good point to talk about how to keep your HTML file neat and tidy. 31 00:02:01,340 --> 00:02:01,940 Now, 32 00:02:01,940 --> 00:02:06,940 most programs are very serious about how to indent and structure their HTML 33 00:02:08,240 --> 00:02:09,073 files. 34 00:02:09,110 --> 00:02:13,790 And the reason for it is because having these indents makes it easy for us to 35 00:02:13,790 --> 00:02:18,260 see at a glance, which tags are inside other ones. 36 00:02:18,290 --> 00:02:18,920 So for example, 37 00:02:18,920 --> 00:02:23,360 if we look at the top level here and we've got the HTML tag and because both the 38 00:02:23,360 --> 00:02:28,360 head and the body tags are i dented inside these HTML tags, 39 00:02:29,930 --> 00:02:34,930 it shows us at a glance that the head is inside the HTML element and as is 40 00:02:37,190 --> 00:02:42,080 the body. But the body and the head they're at the same hierarchical level. 41 00:02:42,290 --> 00:02:44,630 They're not inside of each other at all. 42 00:02:45,230 --> 00:02:49,580 And this is a good structure for us to be able to see at a glance what's 43 00:02:49,580 --> 00:02:53,690 happening in our code. And also when other programmers look at our code, 44 00:02:53,780 --> 00:02:56,060 because we're used to working with the same structure, 45 00:02:56,480 --> 00:02:59,920 it's easy to be able to understand what's going at a glance. 46 00:03:00,340 --> 00:03:05,340 So you can see that there's one part of our code that breaks this rule. 47 00:03:05,950 --> 00:03:07,780 And that's this line here. 48 00:03:08,320 --> 00:03:12,010 Our h1 is contained inside our body element 49 00:03:12,280 --> 00:03:16,360 and so it should be indented like so. 50 00:03:16,720 --> 00:03:21,720 And you can clearly see that this is now a child or contained inside the body 51 00:03:21,880 --> 00:03:26,590 tag. Now, if you didn't want to do that manually every single time, 52 00:03:26,680 --> 00:03:27,400 well, 53 00:03:27,400 --> 00:03:31,720 we actually installed a package right at the beginning that helps us with this 54 00:03:31,840 --> 00:03:34,690 organization. It's our little housekeeper, if you will. 55 00:03:34,870 --> 00:03:38,410 So if you go to packages and go to Atom Beautify 56 00:03:38,680 --> 00:03:40,120 and click on beautify, 57 00:03:40,540 --> 00:03:45,540 it will automatically beautify your entire code file to make all of the indents 58 00:03:45,610 --> 00:03:48,730 for you and to make everything look neat and tidy. 59 00:03:49,210 --> 00:03:52,330 So every so often, once your code starts getting messy, 60 00:03:52,510 --> 00:03:57,490 either learn the shortcut or go through it in the menu and reorganize your code 61 00:03:57,490 --> 00:04:00,730 file. It'll make it much easier on the eyes and much easier to read. 62 00:04:00,940 --> 00:04:05,680 So now I want to add my title under my h1 tag. 63 00:04:06,100 --> 00:04:08,830 And for this, I'm going to use the P tag, 64 00:04:09,160 --> 00:04:14,160 which is a paragraph tag and the P tag formats text into a paragraph. 65 00:04:15,400 --> 00:04:20,230 So they get a new line and the text inside gets grouped together into the same 66 00:04:20,230 --> 00:04:23,230 paragraph. So let's add my title here, 67 00:04:23,880 --> 00:04:24,713 yeah. 68 00:04:28,470 --> 00:04:32,340 And now let's see what our changes look like. So remember again, 69 00:04:32,370 --> 00:04:37,370 command +s or control + s to save and head back over to our site and command + r or 70 00:04:38,250 --> 00:04:43,170 control + r to refresh or click this button to refresh. And there we go. 71 00:04:43,230 --> 00:04:47,400 There's our brand new paragraph showing up. Now, if we look at Jon Kleinberg, 72 00:04:47,400 --> 00:04:52,400 so you can see that his title is italicized and ours is not. 73 00:04:53,370 --> 00:04:57,870 So how can we make ours italicized as well? Well, this is where our lessons 74 00:04:57,870 --> 00:04:59,880 on documentation is going to come in handy. 75 00:05:00,360 --> 00:05:05,360 Let's go ahead and go to Google and see if you can find out how do to italicize 76 00:05:05,910 --> 00:05:08,850 your text using HTML. 77 00:05:12,480 --> 00:05:12,630 ... 78 00:05:12,630 --> 00:05:16,680 Let's write italicize HTML MDN 79 00:05:17,700 --> 00:05:18,690 and let's hit enter. 80 00:05:19,530 --> 00:05:22,440 And you can see that there's actually two tags that come up here 81 00:05:22,770 --> 00:05:26,310 and the first one that comes up is this one. So let's have a look at it first. 82 00:05:27,090 --> 00:05:30,900 Now this is the em or the emphasis element 83 00:05:31,200 --> 00:05:35,040 and it marks text that has a stress emphasis. 84 00:05:35,160 --> 00:05:37,470 Now it looks like this in practice 85 00:05:37,830 --> 00:05:41,070 and the result is that it makes it look italicized. 86 00:05:41,790 --> 00:05:43,770 Now you might have noticed back here, 87 00:05:43,770 --> 00:05:47,130 we also had the i element or the i tag 88 00:05:47,340 --> 00:05:49,590 and it does the same thing visually. 89 00:05:49,770 --> 00:05:54,420 It also makes the text that's in between the i tags italicized. 90 00:05:54,990 --> 00:05:59,000 But there;s a little bit of a difference here and the difference is quite subtle. 91 00:05:59,150 --> 00:06:03,740 The emphasis tag tells the browser the words that are enclosed between it 92 00:06:04,070 --> 00:06:07,010 should be stressed or should be emphasized, 93 00:06:07,100 --> 00:06:11,060 but the i tag only italicizes the text. 94 00:06:11,090 --> 00:06:14,810 So it only styles the text to make it slanted 95 00:06:15,140 --> 00:06:18,920 and it doesn't confer any of that emphasis. And for this reason, 96 00:06:19,130 --> 00:06:23,510 it's good practice to always use emphasis instead of italic 97 00:06:23,720 --> 00:06:25,730 because it conveys more information 98 00:06:26,240 --> 00:06:28,730 and it isn't just about the style. 99 00:06:29,150 --> 00:06:33,320 Remember when we're writing HTML code we're more concerned about structuring our 100 00:06:33,320 --> 00:06:38,320 text rather than caring about how it looks or how it appears. Now a similar pair 101 00:06:39,710 --> 00:06:43,160 is the B tag or the bold tag, 102 00:06:43,550 --> 00:06:45,380 and this is equivalent to the i tag. 103 00:06:45,650 --> 00:06:49,760 It makes any texts that's in between bolded like so. 104 00:06:50,240 --> 00:06:54,140 But instead, what you should be using is the strong tag. 105 00:06:54,560 --> 00:06:57,440 And that's because the strong tag, again, confers 106 00:06:57,500 --> 00:07:02,500 meaning. It says that this text has strong importance and therefore it's 107 00:07:03,230 --> 00:07:08,090 displayed in bold rather than merely saying that this should be styled so that 108 00:07:08,090 --> 00:07:12,560 it's darker than the rest of the text. And if you're interested, 109 00:07:12,590 --> 00:07:17,330 you can have a read between bold and strong, as well as emphasis and strong, 110 00:07:17,600 --> 00:07:19,280 as well as emphasis and italic. 111 00:07:19,550 --> 00:07:22,880 It makes for some interesting reading and gives you a bit more background 112 00:07:22,880 --> 00:07:25,580 information on the different between these two tags. 113 00:07:25,820 --> 00:07:28,670 But whenever you're looking to make something bold in your website, 114 00:07:28,970 --> 00:07:30,950 you should probably be using the strong tag. 115 00:07:31,070 --> 00:07:33,140 And whenever you want to make something italicize, 116 00:07:33,410 --> 00:07:35,570 you should be using the emphasis tag. 117 00:07:36,470 --> 00:07:39,800 So let's go ahead and make our paragraph, 118 00:07:40,130 --> 00:07:44,540 this title, italicized or emphasized like 119 00:07:44,540 --> 00:07:46,220 so. If you remember, 120 00:07:46,250 --> 00:07:50,780 all we have to do is just to enclose it inside the em tag. 121 00:07:52,190 --> 00:07:55,220 Now you can do that for the entire length of the text, 122 00:07:55,370 --> 00:07:59,630 or you can simply apply it to just a section of the text. So for example, 123 00:07:59,630 --> 00:08:03,260 if I wanted to make the part where it says the App Brewery bolded, 124 00:08:03,560 --> 00:08:07,190 then I can simply add a strong tag and have the App 125 00:08:07,190 --> 00:08:11,780 Brewery not including the full stop inside this strong tag. Now, 126 00:08:11,780 --> 00:08:14,690 if I hit save and go ahead and refresh, 127 00:08:14,870 --> 00:08:19,870 then you can see that the entire paragraph is emphasized and the App Brewery is 128 00:08:22,070 --> 00:08:25,550 bolded. So we've done a little bit of formatting for our website. 129 00:08:26,090 --> 00:08:27,680 Now let's move on to the next part. 130 00:08:27,920 --> 00:08:31,700 We're going to add a little bio here and that again is going to be inside a 131 00:08:31,700 --> 00:08:36,050 paragraph element, and it just tells anybody who's visiting our personal site 132 00:08:36,320 --> 00:08:39,770 who we are and what we're all about. So once you're ready, 133 00:08:39,830 --> 00:08:43,850 go ahead and figure out where you should add this and complete the challenge. 134 00:08:46,070 --> 00:08:50,030 OK. So that wasn't so hard. All we have to do is just indent, 135 00:08:50,060 --> 00:08:51,590 so we're in the right position, 136 00:08:51,590 --> 00:08:55,470 we're inside the body tag. And we're going to create a new paragraph element. 137 00:08:55,740 --> 00:08:59,700 So this is going to be on a new line from this paragraph. 138 00:08:59,760 --> 00:09:03,270 They are going to be separate paragraphs and here I'm going to write 139 00:09:03,330 --> 00:09:07,830 I am an iOS and web developer. 140 00:09:08,220 --> 00:09:11,340 I love coffee 141 00:09:12,750 --> 00:09:16,410 and brew my own beers. 142 00:09:16,740 --> 00:09:20,580 Let's save and check it out here. All right. It looks pretty good 143 00:09:20,670 --> 00:09:24,000 and we're getting pretty far already. So obviously you can put as much 144 00:09:24,120 --> 00:09:26,850 or as little as you want here and design your website 145 00:09:26,850 --> 00:09:29,280 however you want it to look. Now, 146 00:09:29,280 --> 00:09:32,070 the next thing I want to add is this horizontal line. 147 00:09:32,430 --> 00:09:34,110 And we've done that previously. 148 00:09:34,380 --> 00:09:39,120 So you can go ahead and add that into your code file as a challenge. 149 00:09:39,410 --> 00:09:40,243 ... 150 00:09:42,170 --> 00:09:44,570 All right. So do you remember how to do that? Well, 151 00:09:44,600 --> 00:09:48,020 all we need to do is we're still staying inside the body because we're creating 152 00:09:48,020 --> 00:09:49,550 the content for our website. 153 00:09:50,030 --> 00:09:53,750 And all we need to do is just to create a horizontal rule. 154 00:09:53,780 --> 00:09:57,410 So I'm going to use my good friend autosuggest and I'm going to write "hr" and 155 00:09:57,410 --> 00:10:00,770 hit enter to insert a new horizontal rule. 156 00:10:01,100 --> 00:10:04,520 And now it's looking pretty similar to what we've got here. Now, 157 00:10:04,520 --> 00:10:09,520 the last thing I want to add is a subtitle where I'm going to list all the books 158 00:10:09,980 --> 00:10:12,950 and courses that I'm teaching. Go ahead 159 00:10:13,010 --> 00:10:14,990 and add a level three 160 00:10:14,990 --> 00:10:19,990 heading to your website underneath the horizontal rule and call it books and 161 00:10:20,690 --> 00:10:22,970 teaching. Or if you don't have any books and teaching, 162 00:10:23,180 --> 00:10:27,560 you can simply call it education and list all the schools that you've attended. 163 00:10:28,130 --> 00:10:28,963 ... 164 00:10:32,600 --> 00:10:36,230 All right. Underneath the horizontal rule, I'm going to add an h3 165 00:10:36,260 --> 00:10:37,430 so a level three heading, 166 00:10:37,640 --> 00:10:41,510 and this is going to be the books and teaching. 167 00:10:42,740 --> 00:10:43,070 All right. 168 00:10:43,070 --> 00:10:47,180 So we've already got most of our personal site coded up. In the next lesson, 169 00:10:47,210 --> 00:10:51,830 we're going to be diving into HTML lists and how we can create these bullet 170 00:10:51,830 --> 00:10:55,970 points as well as numbered points and add it to our website. 171 00:10:56,360 --> 00:11:00,080 So, all of that and more, I'll see you on the next lesson.