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