1 00:00:00,980 --> 00:00:07,160 So we've been talking a lot about HTML and we have written some and some of you may never have worked 2 00:00:07,160 --> 00:00:08,450 with it before, and that's OK. 3 00:00:08,870 --> 00:00:13,480 We're going to go through the very basics of HTML right now and see how it all works. 4 00:00:14,090 --> 00:00:16,160 So I have running a text editor. 5 00:00:16,160 --> 00:00:20,960 Mine happens to be sublime text, but you just need to open something that saves text. 6 00:00:21,260 --> 00:00:28,340 So on a Mac you can probably use text edit on windows, you can use notepad or you can go search for 7 00:00:28,340 --> 00:00:31,660 sublime text and download that and follow along exactly as I am. 8 00:00:32,300 --> 00:00:36,740 So I have an empty file here right now and I'm going to type one word into it. 9 00:00:36,900 --> 00:00:37,340 Hello. 10 00:00:37,940 --> 00:00:41,440 And I'm going to save that and I'm going to save on my desktop. 11 00:00:41,450 --> 00:00:45,410 You can save it wherever you want, but I'm going to save it on my desktop and I'm going to call it 12 00:00:45,830 --> 00:00:47,180 indexed HTML. 13 00:00:47,510 --> 00:00:51,610 OK, so you can call it whatever you want, but end it with, you know. 14 00:00:52,010 --> 00:00:54,370 So I save that now on my desktop. 15 00:00:54,380 --> 00:00:59,320 If you look over here, I actually have one file and it's called index, you know, right there. 16 00:00:59,660 --> 00:01:03,200 Now I'm going to go to my favorite Web browser, which happens to be Firefox at the moment. 17 00:01:03,200 --> 00:01:05,510 It changes periodically, but at the moment it's Firefox. 18 00:01:05,510 --> 00:01:06,770 And I want to open that file. 19 00:01:07,280 --> 00:01:13,180 So I go to my desktop, I find indexed and I open it and there is the word hello. 20 00:01:13,730 --> 00:01:15,620 And that is all Web pages. 21 00:01:15,620 --> 00:01:17,630 Are there just text files? 22 00:01:18,080 --> 00:01:22,280 They have the extension HTML, but really they're just text files. 23 00:01:22,670 --> 00:01:28,910 So we need to tell this Web browser how to render the page that we want it to render. 24 00:01:29,180 --> 00:01:32,360 And we do that using special text called HTML text. 25 00:01:32,570 --> 00:01:36,320 So let's go back to our text Denver and let's get rid of that word. 26 00:01:36,320 --> 00:01:36,800 Hello. 27 00:01:36,950 --> 00:01:39,740 And let's just write the old school HTML. 28 00:01:40,190 --> 00:01:44,420 HMO is an opening tag and it was a closing tag. 29 00:01:44,690 --> 00:01:49,520 So this just tells the Web browser and this isn't the correct syntax, but it's what we used to do back 30 00:01:49,520 --> 00:01:52,430 in the good old days of the Internet back in the late 90s. 31 00:01:53,550 --> 00:01:56,190 You use HTML as the starting tag. 32 00:01:56,210 --> 00:02:00,890 Here's where my page begins and HTML slash HTML is the ending time. 33 00:02:01,070 --> 00:02:03,170 And in between that we actually have two sections. 34 00:02:03,410 --> 00:02:11,650 One is called Head and it has a closing tag bighead and one is called body, which I can't seem to type 35 00:02:11,660 --> 00:02:17,800 at the moment, but with the closing tag slash. 36 00:02:18,890 --> 00:02:27,470 OK, so I have this now and if I save this and just go back to my web browser and reload it, I have 37 00:02:27,470 --> 00:02:27,920 nothing. 38 00:02:27,950 --> 00:02:29,030 Absolutely nothing. 39 00:02:29,990 --> 00:02:34,490 Now let's go back into the head section here for a minute and let's give our page a title and a title 40 00:02:34,490 --> 00:02:37,430 tag, not surprisingly, is title in brackets. 41 00:02:37,910 --> 00:02:42,130 And I would call this my nice page slash title to end that. 42 00:02:42,500 --> 00:02:44,390 So now I have my e-mail. 43 00:02:44,420 --> 00:02:46,960 I'm going to indent this little so it's more nicely formatted. 44 00:02:46,990 --> 00:02:48,220 We can follow what's going on. 45 00:02:49,250 --> 00:02:52,730 We have our HTML tags wrapping the entire page in our head. 46 00:02:52,730 --> 00:02:54,460 We have the title like that. 47 00:02:54,590 --> 00:02:55,550 So let's save that. 48 00:02:55,880 --> 00:02:57,950 Go back and reload our page. 49 00:02:58,410 --> 00:02:59,810 Now look up here first. 50 00:03:00,500 --> 00:03:03,320 It's a full path name to where that file lives. 51 00:03:03,530 --> 00:03:08,300 When I reload the page, that changes to my nice page. 52 00:03:08,900 --> 00:03:10,760 So that's all that the title tag does. 53 00:03:11,150 --> 00:03:14,780 Now the body is where the body of your page actually exists. 54 00:03:15,110 --> 00:03:18,560 So I am going to type a word here. 55 00:03:18,740 --> 00:03:20,090 This will types over words. 56 00:03:20,090 --> 00:03:30,560 This is the page title in the body and say so I have that text with nothing around it, inside the body 57 00:03:30,560 --> 00:03:31,010 tag. 58 00:03:31,340 --> 00:03:32,120 There's the start. 59 00:03:32,450 --> 00:03:33,290 There's the end. 60 00:03:33,710 --> 00:03:37,670 When I reload the page, I get this is the page title in the body. 61 00:03:37,700 --> 00:03:39,980 Well, that doesn't really look the way I want it to look. 62 00:03:40,610 --> 00:03:42,890 Well, we have certain tags to do certain things. 63 00:03:42,890 --> 00:03:46,370 We have one called the H1 tag, which is heading level one. 64 00:03:46,550 --> 00:03:50,000 There's the beginning and now I need to give the ending. 65 00:03:50,180 --> 00:03:54,500 So when I save it, that will actually change the way that this Texas is split. 66 00:03:55,340 --> 00:03:58,820 It makes it look like a title now an ugly title, but it is a title. 67 00:03:59,510 --> 00:04:01,430 What if I just want to have text underneath it? 68 00:04:01,460 --> 00:04:03,140 Let's say I want to put some text in here. 69 00:04:03,140 --> 00:04:09,230 I could just type this is some text and the Web browser, once I save this is smart enough to say, 70 00:04:09,260 --> 00:04:10,700 OK, well, that's just text. 71 00:04:11,150 --> 00:04:16,700 But technically speaking, you should wrap this in a tag that gives the browser some indication as to 72 00:04:16,700 --> 00:04:18,020 what kind of text it is. 73 00:04:18,710 --> 00:04:20,420 P stands for paragraph. 74 00:04:20,600 --> 00:04:22,610 So opening tag, closing tag. 75 00:04:22,610 --> 00:04:27,080 And I'll put a period in there because I like to be grammatically correct whenever possible and I want 76 00:04:27,080 --> 00:04:27,920 to go back and save it. 77 00:04:27,950 --> 00:04:33,440 The only thing that's going to appear to have changed is it added a period, but you actually have the 78 00:04:33,440 --> 00:04:37,070 correct syntax for this and there are other tags we can put in here. 79 00:04:37,070 --> 00:04:37,880 We had each one. 80 00:04:38,360 --> 00:04:39,980 Let's try to 81 00:04:44,600 --> 00:04:56,960 level to each to page three, level three each three each four level for each four. 82 00:04:57,110 --> 00:05:00,230 So I've just put three more title tags in their levels. 83 00:05:00,320 --> 00:05:06,980 Two, three and four, which are H2, H3 and four, and everyone has an opening and closing time, so 84 00:05:06,980 --> 00:05:12,760 I save this, I go back and reload the Web page and there I have different levels of headaches. 85 00:05:12,800 --> 00:05:13,650 Well, that's kind of cool. 86 00:05:14,090 --> 00:05:16,220 What if I wanted to emphasize some text? 87 00:05:16,220 --> 00:05:23,090 Let's just copy this and paste it in here a few times just so it looks a little like a little more text. 88 00:05:23,480 --> 00:05:25,440 Let's say I wanted this word to be bold. 89 00:05:25,670 --> 00:05:27,110 Well, I could. 90 00:05:28,380 --> 00:05:34,230 Use the bettag, which is what we used to do for gold, and that will still work, reload, and you 91 00:05:34,230 --> 00:05:39,210 can see that that text is bold, but in modern syntax, in each team of five, which will be talking 92 00:05:39,210 --> 00:05:44,460 about shortly, we actually use the strong tag strong in the same way. 93 00:05:44,460 --> 00:05:49,890 If I wanted this to be our italicize, this this entire sentence here, I could in the old days I would 94 00:05:49,890 --> 00:05:53,190 go I for italics and sloshy for ending italics. 95 00:05:53,190 --> 00:05:54,270 And that still works too. 96 00:05:55,110 --> 00:05:57,420 You can see that this is bold and this is italicize. 97 00:05:57,720 --> 00:06:05,400 But the correct syntax, the modern syntax is to use M for emphasis here and it won't change the way 98 00:06:05,400 --> 00:06:06,000 that it looks. 99 00:06:06,000 --> 00:06:07,500 But now it's grammatically correct. 100 00:06:07,500 --> 00:06:13,500 And if I actually view the source on this page by going to the View menu and choosing where it is anymore, 101 00:06:13,500 --> 00:06:16,100 I just always type this keyboard shortcut. 102 00:06:17,580 --> 00:06:20,970 You can see that what I'm typing here is rendered by the browser. 103 00:06:21,000 --> 00:06:23,160 As you know, this is what it's seeing now. 104 00:06:23,160 --> 00:06:27,540 It's giving me an error up here because this is no longer the correct syntax, but we'll get to that 105 00:06:27,540 --> 00:06:28,040 momentarily. 106 00:06:28,060 --> 00:06:30,240 It's not a big deal and it's easy to fix. 107 00:06:30,490 --> 00:06:32,010 Let's look at a few more things first. 108 00:06:32,490 --> 00:06:37,920 Well, one of the most common things you can see in Web pages is how to set up a link. 109 00:06:38,280 --> 00:06:41,070 So let's say I wanted to link some text. 110 00:06:41,080 --> 00:06:44,580 I'll create another paragraph here and I'll give it a closing tag here. 111 00:06:44,580 --> 00:06:46,650 And you can see that there are different lines and that's fine. 112 00:06:46,650 --> 00:06:48,720 It doesn't matter, actually. 113 00:06:48,910 --> 00:06:50,050 I'll show you something else, too. 114 00:06:50,730 --> 00:06:53,670 This is a whole bunch of spaces. 115 00:06:54,120 --> 00:06:59,070 Link to our university website, Unbe, the University of New Brunswick. 116 00:06:59,070 --> 00:07:03,320 And I want the word, the word, the acronym unbe to link somewhere. 117 00:07:03,330 --> 00:07:04,170 So let's say this. 118 00:07:04,500 --> 00:07:05,910 You notice all those spaces there. 119 00:07:06,030 --> 00:07:07,650 Look what happens when I load the page. 120 00:07:08,340 --> 00:07:12,720 It ignores those spaces and it just defaults to one space between words. 121 00:07:12,720 --> 00:07:16,530 And that is the way that Web browsers typically do these things. 122 00:07:16,530 --> 00:07:19,640 If you want more than that, there's better ways to do it than trying to hit the space bar. 123 00:07:20,040 --> 00:07:23,540 So never try to position something in HTML by using the spacebar. 124 00:07:23,550 --> 00:07:27,890 I'll show you the correct way to do it in a little while, but I want this to be a link to you and be 125 00:07:27,900 --> 00:07:28,530 well, it's fine. 126 00:07:28,530 --> 00:07:30,960 You envy you and I happen to know what your URL is. 127 00:07:30,960 --> 00:07:35,700 HDD colon slash slash www.youtube.com here. 128 00:07:36,120 --> 00:07:39,450 This is where I did a couple of degrees so I want to link to this. 129 00:07:39,450 --> 00:07:40,860 So I'm going to copy this link. 130 00:07:40,890 --> 00:07:41,940 That's how you get there. 131 00:07:41,970 --> 00:07:48,570 That's called the Uniform Resource Locator or you URL or sometimes you or I or web address but I call 132 00:07:48,570 --> 00:07:51,570 it you URL and so does pretty much everybody else that works in this space. 133 00:07:51,720 --> 00:07:52,500 I want to link there. 134 00:07:52,920 --> 00:07:53,970 So I'm going to go over here. 135 00:07:54,190 --> 00:07:57,360 I'm going to get rid of these spaces because they're not doing anything change to one. 136 00:07:57,660 --> 00:08:01,980 I don't want this to be linked and we want this to be a hyperlink. 137 00:08:02,070 --> 00:08:07,320 And for reasons that I've never entirely understood, it begins with a I've never bothered to look up 138 00:08:07,320 --> 00:08:14,550 at the A stands for so pointy bracket A and then the hyper reference ref is the keyword equals and then 139 00:08:14,550 --> 00:08:16,050 in single or double quotes. 140 00:08:16,050 --> 00:08:21,270 But I like double quotes and I like to be consistent, so I use double quotes everywhere I can I pace 141 00:08:21,270 --> 00:08:28,830 that URL and then I close the quotes, close the opening tag and then after where I want the link to 142 00:08:28,830 --> 00:08:31,200 end, I put it to close the attack. 143 00:08:32,100 --> 00:08:37,290 So if I save that, you'll notice the only thing that's going to be linked are the letters you and be 144 00:08:37,290 --> 00:08:42,180 the period won't be linked and neither will the words before because the tag wraps what I want that 145 00:08:42,180 --> 00:08:42,650 link to be. 146 00:08:42,660 --> 00:08:43,290 So I save it. 147 00:08:43,680 --> 00:08:50,010 Go to my Web browser, close this window, reload it, and now it is a link and I can roll over it and 148 00:08:50,010 --> 00:08:52,370 click on it and it takes me there and I can use the back. 149 00:08:52,380 --> 00:08:53,040 Let me get back. 150 00:08:53,280 --> 00:08:54,390 So that's how links work. 151 00:08:55,500 --> 00:09:01,280 Now, there are some other things that we need to be aware of as well, so far we can make a title, 152 00:09:01,320 --> 00:09:03,120 we can make titles of different levels. 153 00:09:03,480 --> 00:09:07,380 We can make a strong text or a bold text and italicized text. 154 00:09:07,590 --> 00:09:08,820 We know what a paragraph is. 155 00:09:09,480 --> 00:09:11,850 Sometimes you to make a list, well, let's make a list. 156 00:09:11,850 --> 00:09:14,040 And there are two kinds of lists we're going to look at. 157 00:09:14,040 --> 00:09:18,720 The first one is an unordered list, which has an opening tag and it has a closing tag. 158 00:09:19,110 --> 00:09:21,030 And in between we have list elements. 159 00:09:21,360 --> 00:09:26,370 So I could just type things in here and stuff will render on the page what I want to render with a bullet 160 00:09:26,370 --> 00:09:26,910 in front of it. 161 00:09:27,150 --> 00:09:35,400 And we do that by saying list item, L.R., list item, item one, L.R. item to 162 00:09:39,660 --> 00:09:42,080 item three, elai. 163 00:09:42,120 --> 00:09:44,940 And if I say that, go back and reload the page there. 164 00:09:44,940 --> 00:09:46,320 They're nicely indented. 165 00:09:46,320 --> 00:09:47,630 That's the default formatting. 166 00:09:47,640 --> 00:09:51,900 We have complete control over the formatting, but we'll get to that when we get to cascading style 167 00:09:51,900 --> 00:09:52,230 sheets. 168 00:09:52,620 --> 00:09:54,420 There is an unordered list. 169 00:09:54,690 --> 00:09:56,160 What if I want an ordered list? 170 00:09:56,160 --> 00:10:04,950 Well, I'm just going to copy and paste it below it and I'll change that ul to an ooh and the closing 171 00:10:04,950 --> 00:10:07,410 tag to an OEL for an ordered list. 172 00:10:08,200 --> 00:10:10,350 Reload that and now I have a list. 173 00:10:10,350 --> 00:10:16,620 But this time it uses numbers and formats them using no period, which is the default style. 174 00:10:16,710 --> 00:10:18,690 And again, we have complete control over that. 175 00:10:18,690 --> 00:10:22,500 We can actually change that to whatever we want and we will before too long. 176 00:10:23,280 --> 00:10:27,870 Now this is HTML, but this is not valid html. 177 00:10:27,870 --> 00:10:32,940 It doesn't conform to the actual standards that are supposed to be supposed to use these days, which 178 00:10:32,940 --> 00:10:35,340 is at the moment HTML five. 179 00:10:36,090 --> 00:10:39,540 I'm going to go to bootstrap bootstrap dotcom. 180 00:10:39,540 --> 00:10:42,570 We went here much earlier in the course and we copied something. 181 00:10:42,570 --> 00:10:51,620 So let's go to get started and let's copy this link the same as we did last time and we'll put it right 182 00:10:51,630 --> 00:10:52,530 where it tells us to put it. 183 00:10:52,560 --> 00:10:57,780 Copy paste the stylesheet link into your head before all other stylesheets to load your our success. 184 00:10:57,930 --> 00:10:58,800 So we copy that. 185 00:10:59,520 --> 00:11:00,960 We go back to our HTML. 186 00:11:01,170 --> 00:11:02,760 We don't have any other stylesheets. 187 00:11:02,760 --> 00:11:09,930 So in our head section, we put this link, then we go back and we actually reload page and you'll see 188 00:11:09,930 --> 00:11:12,000 what happens when we put that in there. 189 00:11:12,480 --> 00:11:17,670 Oops, wrong one, reload it, change the styling of everything to default. 190 00:11:17,670 --> 00:11:22,560 Bootstrap styling, which doesn't look much better at the moment, but it will by the time we're done 191 00:11:22,560 --> 00:11:22,830 with it. 192 00:11:22,860 --> 00:11:23,790 Well, we're not finished yet. 193 00:11:23,790 --> 00:11:25,980 We still don't have valid HTML. 194 00:11:26,010 --> 00:11:27,210 Let's go to the documentation. 195 00:11:28,860 --> 00:11:35,010 On the bootstrap site and let's find a starter template right here and look at what they have before 196 00:11:35,010 --> 00:11:37,440 the HTML tag, they have doctype html. 197 00:11:37,830 --> 00:11:40,460 Copy that and put this up before each HTML tag. 198 00:11:40,920 --> 00:11:45,120 And what that tells the browser is that we're using HTML five. 199 00:11:45,270 --> 00:11:46,190 That's what this means. 200 00:11:46,710 --> 00:11:48,560 Then they had language equals English. 201 00:11:48,600 --> 00:11:52,710 Let's copy that and replace our opening HTML tag with what they have. 202 00:11:54,090 --> 00:11:56,790 Then they have these required meta tags. 203 00:11:56,790 --> 00:11:59,310 Well they're required, let's put them in so I'll copy them. 204 00:12:01,040 --> 00:12:05,070 I'll even copy that little comment at the beginning and I'll talk about that in a moment. 205 00:12:05,080 --> 00:12:05,910 Where do they have those? 206 00:12:06,600 --> 00:12:07,210 Right at the head. 207 00:12:07,230 --> 00:12:13,980 So right up here before our title, we'll paste in that text and we'll format it properly. 208 00:12:13,980 --> 00:12:15,780 So everything looks nice and readable. 209 00:12:16,560 --> 00:12:21,660 All this is is a comment point bracket, exclamation mark, dash, dash, then a space, then whatever 210 00:12:21,660 --> 00:12:24,720 you want your comment to be, then dash, dash, point to closing point a bracket. 211 00:12:25,080 --> 00:12:27,290 That's something that's ignored by the Web browser. 212 00:12:27,690 --> 00:12:29,550 So that's just for us. 213 00:12:29,550 --> 00:12:31,470 A note for us just like comments and source code. 214 00:12:31,740 --> 00:12:32,790 So now I have that. 215 00:12:32,790 --> 00:12:33,150 Good. 216 00:12:33,150 --> 00:12:33,960 What else do they have. 217 00:12:34,440 --> 00:12:35,800 They have the bootstrap access. 218 00:12:35,820 --> 00:12:36,210 Good. 219 00:12:36,960 --> 00:12:37,910 It looks like that's all of it. 220 00:12:38,040 --> 00:12:42,420 They have this GE query stuff that I'm going to ignore right now because that's JavaScript and we're 221 00:12:42,420 --> 00:12:43,560 not talking about JavaScript. 222 00:12:43,770 --> 00:12:44,520 So I have this. 223 00:12:44,520 --> 00:12:47,370 Now, let's go back and reload our page once again. 224 00:12:47,400 --> 00:12:48,570 Here's my nice page. 225 00:12:48,570 --> 00:12:51,290 And when I reload it, it looks exactly the same. 226 00:12:51,300 --> 00:12:53,070 Well, what do we go through all the effort for? 227 00:12:53,070 --> 00:13:00,120 We went through all the effort because some of the things we just added, like, for example, this 228 00:13:00,120 --> 00:13:06,510 declaration are DOCTYPE declaration that is used by every modern browser out there to decide how to 229 00:13:06,510 --> 00:13:09,120 render the actual HTML pages down here. 230 00:13:09,690 --> 00:13:18,330 And this metatarsal set UTF eight allows me to put characters other than standard ASCII characters like 231 00:13:18,330 --> 00:13:19,680 A.B.C. one, two, three. 232 00:13:19,680 --> 00:13:22,710 I can put other characters in there and they'll show up properly. 233 00:13:22,710 --> 00:13:25,140 They won't show up if you don't have that declaration. 234 00:13:25,140 --> 00:13:28,860 Metatarsal equals viewport, says content. 235 00:13:28,860 --> 00:13:30,540 Width equals dislike device. 236 00:13:30,750 --> 00:13:36,210 So make this page as why does the device that's looking at it initial scale don't zoom it shrink to 237 00:13:36,210 --> 00:13:37,220 fit is no. 238 00:13:37,260 --> 00:13:41,220 That makes this page work better on every device out there. 239 00:13:41,550 --> 00:13:47,370 So you might be hitting this web page from a phone or a tablet or a computer with a twenty eight inch 240 00:13:47,370 --> 00:13:47,790 monitor. 241 00:13:48,000 --> 00:13:51,870 And this helps the browser to know how to render the page. 242 00:13:52,690 --> 00:13:53,190 All right. 243 00:13:53,370 --> 00:13:55,500 Now we've included bootstrap. 244 00:13:55,650 --> 00:14:00,930 In the next lecture, we'll start looking at how to use bootstrap and how to make things a little more 245 00:14:00,930 --> 00:14:01,710 attractive. 246 00:14:01,710 --> 00:14:03,780 And we'll start putting some pictures on our page, too. 247 00:14:04,080 --> 00:14:06,020 But that's enough to get us started in any case.