Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses 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.
[?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 <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