1 00:00:00,000 --> 00:00:02,000 [?music?] 2 00:00:02,000 --> 00:00:05,000 [HTML] 3 00:00:05,000 --> 00:00:08,000 So let's go ahead and get started on this project. 4 00:00:08,000 --> 00:00:11,000 Here, we have a relatively blank web directory. 5 00:00:11,000 --> 00:00:17,000 The only thing in here right now is a folder called images, 6 00:00:17,000 --> 00:00:25,000 and inside of this folder, we have several photographs that are 500x359 pixels, 7 00:00:25,000 --> 00:00:30,000 and we also have a png image that is just some transparent noise 8 00:00:30,000 --> 00:00:33,000 which you can't really see against a white background, 9 00:00:33,000 --> 00:00:36,000 but we'll end up using that later. 10 00:00:36,000 --> 00:00:40,000 And here are a few of the photos; you've already seen these by now. 11 00:00:40,000 --> 00:00:45,000 Let's go ahead and switch over to our text editor 12 00:00:45,000 --> 00:00:51,000 and before we get started coding, we're going to go ahead and set up this project a little bit. 13 00:00:51,000 --> 00:00:55,000 So first, let's go ahead and create a directory called css 14 00:00:55,000 --> 00:00:59,000 and that's where we'll put all of our style sheets. 15 00:00:59,000 --> 00:01:04,000 Let's also create a directory called javascripts, 16 00:01:04,000 --> 00:01:07,000 and that will be where we put all of our JavaScript. 17 00:01:07,000 --> 00:01:10,000 And before we get started with the HTML, 18 00:01:10,000 --> 00:01:13,000 we're going to include Blueprint into this project. 19 00:01:13,000 --> 00:01:16,000 If you're not familiar with Blueprint, 20 00:01:16,000 --> 00:01:22,000 you can download it from blueprintcss.org. 21 00:01:22,000 --> 00:01:25,000 When you go to blueprintcss.org, 22 00:01:25,000 --> 00:01:28,000 you're just going to click on this ZIP file right here 23 00:01:28,000 --> 00:01:31,000 to go ahead and download it. 24 00:01:31,000 --> 00:01:35,000 I've gone ahead and I've already downloaded this for us, 25 00:01:35,000 --> 00:01:41,000 so let's go ahead and just switch over to the Finder here. 26 00:01:41,000 --> 00:01:45,000 Here's the file that it will download and you just unzip that, 27 00:01:45,000 --> 00:01:50,000 and inside of it, you will find a folder called blueprint, 28 00:01:50,000 --> 00:01:52,000 and that's the folder that you're going to want, 29 00:01:52,000 --> 00:01:58,000 so we'll go ahead and copy that and we'll go to our web directory, 30 00:01:58,000 --> 00:02:06,000 and inside of the css directory, we'll go ahead and paste blueprint, just like that. 31 00:02:06,000 --> 00:02:09,000 So let's go ahead and switch back to our text editor 32 00:02:09,000 --> 00:02:12,000 and let's get started on the HTML. 33 00:02:12,000 --> 00:02:17,000 So we'll go ahead and create a file called index.html 34 00:02:17,000 --> 00:02:22,000 and like any good webpage, we'll go ahead and start with the DOCTYPE. 35 00:02:22,000 --> 00:02:26,000 In this case, we're going to use the HTML5 DOCTYPE. 36 00:02:26,000 --> 00:02:30,000 Make sure that the word DOCTYPE is in all caps 37 00:02:30,000 --> 00:02:33,000 and we'll open up our HTML tag &lt;html 38 00:02:33,000 --> 00:02:40,000 language will be English, and we'll close it </html. 39 00:02:40,000 --> 00:02:45,000 Let's go ahead and open up our head tag and close it just like that, 40 00:02:45,000 --> 00:02:48,000 and we'll go ahead and indent that a little bit. 41 00:02:48,000 --> 00:02:54,000 We'll also open up our body tag and close it. 42 00:02:54,000 --> 00:03:04,000 Now, inside of our head tag, we want to use the metatag charset="utf-8" 43 00:03:04,000 --> 00:03:10,000 and we'll give this page the title My Photos. 44 00:03:10,000 --> 00:03:14,000 We also need to link in Blueprint here, 45 00:03:14,000 --> 00:03:17,000 so we'll go ahead and take care of that right now. 46 00:03:17,000 --> 00:03:22,000 There's basically three lines of code you need to include Blueprint into your page. 47 00:03:22,000 --> 00:03:28,000 So we'll type link, 48 00:03:28,000 --> 00:03:32,000 the rel attribute will be set to "stylesheet", 49 00:03:32,000 --> 00:03:44,000 The href in our case will be relative to "css/blueprint/screen.css". 50 00:03:44,000 --> 00:03:48,000 The type attribute will be "text/css" 51 00:03:48,000 --> 00:03:55,000 and for this first one, media will be "screen, projection">. 52 00:03:55,000 --> 00:04:02,000 And let's go ahead and copy that link tag 53 00:04:02,000 --> 00:04:05,000 and paste it in because we're going to reuse this, 54 00:04:05,000 --> 00:04:10,000 and instead of screen, we'll set it to print, 55 00:04:10,000 --> 00:04:16,000 and then we'll set media--instead of "screen, projection" 56 00:04:16,000 --> 00:04:19,000 we'll set that to "print". 57 00:04:19,000 --> 00:04:22,000 And then finally, we need to include one more style sheet, 58 00:04:22,000 --> 00:04:25,000 and this will be for Internet Explorer. 59 00:04:25,000 --> 00:04:30,000 So instead of screen.css, we'll set it to ie.css. 60 00:04:30,000 --> 00:04:34,000 The media attribute will remain the same, and then we need to wrap this 61 00:04:34,000 --> 00:04:38,000 in Internet Explorer conditional comment tags, 62 00:04:38,000 --> 00:04:42,000 so we'll go ahead and type those in. <!--> 63 00:04:42,000 --> 00:04:50,000 The condition here will be if this is less than IE 8 [if lt IE8] 64 00:04:50,000 --> 00:04:54,000 then we'll go ahead and include this style sheet 65 00:04:54,000 --> 00:05:02,000 and we'll close that conditional comment there. [endif] just like that. 66 00:05:02,000 --> 00:05:06,000 Now, we are going to be coming back to this and including more files in just a little bit, 67 00:05:06,000 --> 00:05:12,000 but we don't have any other CSS or JavaScript yet, so we'll come back to that later. 68 00:05:12,000 --> 00:05:15,000 So let's go ahead and get into our body tag here. 69 00:05:15,000 --> 00:05:19,000 I'll make some space for us to work in. 70 00:05:19,000 --> 00:05:26,000 First, we're going to start using Blueprint, and we'll use the class="container" 71 00:05:26,000 --> 00:05:30,000 on this div here, and everything we create on this page 72 00:05:30,000 --> 00:05:33,000 will be wrapped inside of this container 73 00:05:33,000 --> 00:05:37,000 and that will just sort of center all of our stuff on the page. 74 00:05:37,000 --> 00:05:45,000 Next, we'll create a first-level headline tag h1 My Photos /h1 75 00:05:45,000 --> 00:05:48,000 and we'll call that My Photos. 76 00:05:48,000 --> 00:05:53,000 And then, we're going to create a div, and we're going to give this the id="stage" 77 00:05:53,000 --> 00:05:56,000 and this is where we'll be creating our photo gallery 78 00:05:56,000 --> 00:06:00,000 and including all of our JavaScript and animations. 79 00:06:00,000 --> 00:06:04,000 So we'll also give this the class="span-24" 80 00:06:04,000 --> 00:06:09,000 which is a Blueprint class that will make this span all the way across the page, 81 00:06:09,000 --> 00:06:12,000 and then we'll close that div, just like that. 82 00:06:12,000 --> 00:06:15,000 Next, we need to include all of our photos here 83 00:06:15,000 --> 00:06:21,000 and these are going to be images, so we'll use the img tag 84 00:06:21,000 --> 00:06:25,000 and this is going to be a little bit tedious, but just bear with me. 85 00:06:25,000 --> 00:06:31,000 We'll say "images/photo1.jpg". 86 00:06:31,000 --> 00:06:34,000 We'll give this the class="photo". 87 00:06:34,000 --> 00:06:39,000 We'll give it the id="photo01" 88 00:06:39,000 --> 00:06:42,000 and we need to give each one of these an alternate tag 89 00:06:42,000 --> 00:06:47,000 for accessibility reasons, so for this first photo, 90 00:06:47,000 --> 00:06:52,000 we'll say alt="Light coming through the trees." 91 00:06:52,000 --> 00:06:55,000 and we'll go ahead and close that image tag here. 92 00:06:55,000 --> 00:07:00,000 Now, we have eight photos here, so let's go ahead and just copy and paste these 93 00:07:00,000 --> 00:07:04,000 to make this go a little bit faster. 94 00:07:04,000 --> 00:07:14,000 So we have 1, 2, 3, 4, 5, 6, 7, 8. 95 00:07:14,000 --> 00:07:22,000 We need to just change the numbering on these at 1, 2, 3, 4, 5, 6, 7, 8, 96 00:07:22,000 --> 00:07:26,000 and we also need to change the path. 97 00:07:26,000 --> 00:07:31,000 These are photos 1-8, 98 00:07:31,000 --> 00:07:36,000 and then we need to, of course, put in different alternate text for each one of these. 99 00:07:36,000 --> 00:07:39,000 So the first one was "Light coming through the trees." 100 00:07:39,000 --> 00:07:42,000 The next one is "A woman in the dark." 101 00:07:42,000 --> 00:07:51,000 The next one is some "Bicycle gears." 102 00:07:51,000 --> 00:08:02,000 We have some "Water under a bridge." 103 00:08:02,000 --> 00:08:05,000 There's some "Tree branches." 104 00:08:05,000 --> 00:08:12,000 The next one is "A man covering his face." 105 00:08:12,000 --> 00:08:15,000 It looks like we just have two more here-- 106 00:08:15,000 --> 00:08:20,000 there's "A body watching a train." 107 00:08:20,000 --> 00:08:27,000 And then we have "A book and some old clothing." 108 00:08:27,000 --> 00:08:31,000 It's always important to include some alternate text on photos like this 109 00:08:31,000 --> 00:08:34,000 for accessibility reasons. 110 00:08:34,000 --> 00:08:40,000 Next, we're going to include some text that just says a little bit about this gallery. 111 00:08:40,000 --> 00:08:48,000 We'll go ahead and open a second-level headline here h2 About the Gallery /h2 112 00:08:48,000 --> 00:08:50,000 and we'll call this About the Gallery 113 00:08:50,000 --> 00:08:54,000 and I'm going to just cheat a little bit here 114 00:08:54,000 --> 00:08:58,000 and I'm going to copy and paste a paragraph, 115 00:08:58,000 --> 00:09:00,000 just like that. 116 00:09:00,000 --> 00:09:05,000 And later on, this will use the multi-column layout module in CSS3 117 00:09:05,000 --> 00:09:08,000 to split this into separate columns 118 00:09:08,000 --> 00:09:11,000 and it will look really nice right below our photos. 119 00:09:11,000 --> 00:09:16,000 So let's go ahead and switch over to the browser and we're going to refresh the page, 120 00:09:16,000 --> 00:09:18,000 and here's what we have so far. 121 00:09:18,000 --> 00:09:22,000 We have our first-level headline, My Photos. 122 00:09:22,000 --> 00:09:24,000 We have the title tag, My Photos, 123 00:09:24,000 --> 00:09:27,000 and we have all of our photographs, 124 00:09:27,000 --> 00:09:29,000 just like that. 125 00:09:29,000 --> 00:09:33,000 And then, we have our little About the Gallery section down at the bottom here, 126 00:09:33,000 --> 00:09:37,000 and as you can see, Blueprint is already applying some nice fonts 127 00:09:37,000 --> 00:09:40,000 and a little bit of typography to this text, 128 00:09:40,000 --> 00:09:43,000 which will help us get started. 129 00:09:43,000 --> 00:09:47,000 That about wraps things up for the HTML, and now we're ready to move on to the CSS.