1 00:00:00,220 --> 00:00:03,600 Images work a lot like links, you just need link to the image and 2 00:00:03,600 --> 00:00:07,910 then you add one special character, so that the image appears on the page. 3 00:00:07,910 --> 00:00:11,960 Unlike in a word processing program you can't embed in image into a mark 4 00:00:11,960 --> 00:00:13,070 down file. 5 00:00:13,070 --> 00:00:15,750 You need to upload the image to the web somewhere, and 6 00:00:15,750 --> 00:00:18,340 then you use a link to that image. 7 00:00:18,340 --> 00:00:22,680 Think of images in a markdown document as being referenced by your document, 8 00:00:22,680 --> 00:00:25,710 rather than embedded in your document. 9 00:00:25,710 --> 00:00:28,470 You can use a service such as Flicker or 10 00:00:28,470 --> 00:00:32,690 Imagur to upload your images then obtain a link. 11 00:00:32,690 --> 00:00:37,710 If you're blogging, the blog engine may provide some service to obtain a link, but 12 00:00:37,710 --> 00:00:41,198 all of this stuff is beyond the scope of this short course. 13 00:00:41,198 --> 00:00:44,770 I'll assume that you can figure out how to upload your images somewhere, and 14 00:00:44,770 --> 00:00:47,290 then I'll show you what to do after that. 15 00:00:47,290 --> 00:00:51,850 We can use the q place holder images from placekitten for our example. 16 00:00:51,850 --> 00:00:53,190 So, let's come over to our document. 17 00:00:54,770 --> 00:00:57,630 And lead a heading, images. 18 00:00:59,190 --> 00:01:04,530 To add an image to our document, you type a label for the image in square brackets. 19 00:01:04,530 --> 00:01:08,890 On the web we call this type of label alt text, because it will be displayed as 20 00:01:08,890 --> 00:01:12,390 an alternate if the image cannot be shown for any reason. 21 00:01:12,390 --> 00:01:17,500 I have an image of kittens, so I'm going to type square brackets and 22 00:01:17,500 --> 00:01:20,270 then kittens will be my alt text. 23 00:01:21,430 --> 00:01:25,540 And then next, we would add parenthesis, and 24 00:01:25,540 --> 00:01:28,510 then we would add the URL to our image. 25 00:01:28,510 --> 00:01:33,296 So, this will be, Placekitten. 26 00:01:39,821 --> 00:01:41,180 And lets see what we have in our preview. 27 00:01:42,300 --> 00:01:46,330 Okay, we have a link to the image, now that makes sense, because 28 00:01:46,330 --> 00:01:50,740 this is exactly how we would create a link ,but that's not what we want. 29 00:01:50,740 --> 00:01:54,030 We want to actually display the image in the document. 30 00:01:54,030 --> 00:01:59,780 To do that, you just type an exclamation mark at the beginning of all of this and 31 00:01:59,780 --> 00:02:01,380 bang we have a kitten image. 32 00:02:02,870 --> 00:02:07,710 So as you can see, adding an image to a document is a lot like adding a link. 33 00:02:07,710 --> 00:02:11,300 Now what if you want your image to also behave as a link? 34 00:02:11,300 --> 00:02:15,610 So for example, what if someone were able to click on the image and 35 00:02:15,610 --> 00:02:18,210 then have that image take them somewhere? 36 00:02:18,210 --> 00:02:19,220 Well we can do that. 37 00:02:20,560 --> 00:02:24,450 You will first start with a new set of square brackets. 38 00:02:24,450 --> 00:02:29,700 So square brackets will basically end up surrounding all of this code up here. 39 00:02:29,700 --> 00:02:32,030 But we're gonna type it out from scratch for practice. 40 00:02:32,030 --> 00:02:38,500 So you'll have a first set of square brackets, and then your exclamation mark. 41 00:02:38,500 --> 00:02:41,780 And then the set of square brackets for your alt text. 42 00:02:43,020 --> 00:02:45,500 Now, my image will be kittens again. 43 00:02:45,500 --> 00:02:49,190 So we'll just type Kittens as our alt text, and 44 00:02:49,190 --> 00:02:54,160 then outside of the alt text square bracket, but inside our surrounding 45 00:02:54,160 --> 00:03:00,000 brackets we'll type parenthesis And our URL to the image. 46 00:03:08,322 --> 00:03:13,514 Now, outside of all of this, so just beyond our closing square bracket, 47 00:03:13,514 --> 00:03:16,697 we'll type another set of parentheses, and 48 00:03:16,697 --> 00:03:21,900 this is where we'll type the URL that we want the image to link to. 49 00:03:21,900 --> 00:03:26,480 So if someone were to click on the image, this is where it should take them. 50 00:03:26,480 --> 00:03:30,980 For our example, we'll just take them to the main place kitten's homepage. 51 00:03:35,291 --> 00:03:37,340 And let's see what we have in our preview. 52 00:03:39,640 --> 00:03:44,870 Okay, so you can see if I were to hover over this image, nothing really happens. 53 00:03:44,870 --> 00:03:48,440 When I hover over this one, I get this hand indicating that it's a link. 54 00:03:48,440 --> 00:03:50,950 It can be clicked on, if I click on it. 55 00:03:50,950 --> 00:03:53,670 We're taken to the placekitten's website. 56 00:03:53,670 --> 00:03:55,200 Now let's come back to our document. 57 00:03:57,590 --> 00:04:00,160 Now, images can have titles like links too. 58 00:04:00,160 --> 00:04:01,750 You add them the same way. 59 00:04:01,750 --> 00:04:05,930 After the image URL, you'd add a space and then put the title in quotes. 60 00:04:05,930 --> 00:04:07,450 So let's do that. 61 00:04:07,450 --> 00:04:10,300 So we would start with our exclamation mark. 62 00:04:10,300 --> 00:04:12,430 Then our square brackets and our alt text. 63 00:04:15,230 --> 00:04:20,400 Then parenthesis, and the link to our kitten image. 64 00:04:29,310 --> 00:04:35,160 And then here, after the URL we type a space, our quotes. 65 00:04:35,160 --> 00:04:36,850 And then our title. 66 00:04:36,850 --> 00:04:38,450 Let's see what our kitten looks like. 67 00:04:40,110 --> 00:04:45,180 How about, Curious Kitten, okay, 68 00:04:45,180 --> 00:04:49,940 and now if I hover over this kitten, you can see I get this title, Curious Kitten. 69 00:04:51,270 --> 00:04:55,390 Now what if you wanted to add a title to a more complex image, for 70 00:04:55,390 --> 00:04:57,312 example this one up here. 71 00:04:57,312 --> 00:04:59,140 Well that's totally possible, 72 00:04:59,140 --> 00:05:05,140 you just add it in the same way after the URL for your image. 73 00:05:05,140 --> 00:05:07,980 So, this is important,you have two URLs, 74 00:05:07,980 --> 00:05:12,400 in an image formatted this way, one is actually a link to the image, 75 00:05:12,400 --> 00:05:17,170 the other one is a link that your image will take you to if you click on it. 76 00:05:17,170 --> 00:05:19,700 You will add the title inside this set of 77 00:05:19,700 --> 00:05:22,830 parenthesis immediately after the link to your image. 78 00:05:22,830 --> 00:05:30,990 So we type about,Fluffy kitten, now if I come over here, 79 00:05:33,000 --> 00:05:37,130 all right, we have a title, Fluffy Kitten, and this is still a winked image. 80 00:05:38,530 --> 00:05:43,560 Images are probably the most complex thing to add in any marked down document. 81 00:05:43,560 --> 00:05:46,810 Let this cheat sheet be your friend until you get the hang of it. 82 00:05:46,810 --> 00:05:50,087 I find it easiest to remember that formatting an image is just like 83 00:05:50,087 --> 00:05:51,380 formatting a link. 84 00:05:51,380 --> 00:05:53,290 You memorize the link chunk first, 85 00:05:53,290 --> 00:05:55,710 then you just add an exclamation mark at the beginning. 86 00:05:57,190 --> 00:06:02,780 I'll come down here and add a horizontal rule, and save. 87 00:06:04,390 --> 00:06:07,850 And believe it or not, that is actually the end of our cheat sheet. 88 00:06:07,850 --> 00:06:13,170 I will paste in some final conclusion text and a few more instructions in here, 89 00:06:13,170 --> 00:06:16,850 for our final version, but you don't need to see me do all of that. 90 00:06:16,850 --> 00:06:21,110 We do have one more video, but that will not be using this document. 91 00:06:21,110 --> 00:06:24,190 We're gonna talk about some fun extra markdown things. 92 00:06:24,190 --> 00:06:26,370 So I am looking forward to that, and I will see you there.