Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

HTML

9:47 with Nick Pettit

In this chapter, we will write most of the HTML markup that will be necessary for our CSS3 photo gallery project.

Video Transcript
Downloads

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

You need to sign up for Treehouse in order to download course files.

Sign up