Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
We are going to be calling it template. html and we'll actually have our work in template at the end of this lesson. The css will be main.css. There we go. Now, down at the bottom of the template, we're going to put in the text for the footer and it's like this. It actually goes outside of that table. The paragraph itself has an id="footer".
Inside the paragraph we're going to have our copyright notice. That's an XHTML entity for the copyright symbol. Now I'm putting in a couple of non-breaking spaces here. The purpose of that is to give a little bit of space between the Groundswell Surf and the links for the Privacy and Terms and Conditions links. You'll notice in our page here, there's a little bit of space there and then we have this bar separating these two. But this space, normally the browser will fold all the spaces into one space, and I want to actually have some spaces there.
So those non-breaking spaces serve to just take up enough white space there, on the actual screen. Then I'm going to put in my links on separate lines because the browser will actually ignore that new line and put it on the same line there. Just type a vertical bar character there at the end, and do the same thing for the Terms and Conditions link. There we have it. So that is the XHTML portion of the footer. If we look at that in the browser-- Let's go ahead and load this up.
This will be the template.html. Drag that in, and we see we have the text and the links, and now we just need to format them. You see that lovely space there? That's the non-breaking space characters. Let's go ahead and enter the style sheets for this. Down at the bottom of the file, go ahead and create a comment. p#footer, and we have the Trebuchet font-family, which I'm just going to copy and paste from up here.
font-size: .75em. Make it smaller, color: white. So the text will be white here. text-align: center. And then the links are going to be this other color that's already been selected again. So that selects all the anchor tags inside of the footer# context.
text-decoration: none. That makes it so that the links don't have an underline on them. So we have some of these extra spaces. And go ahead and save this. Load this up in the browser. There we have it. It's just how we wanted, white text here, the little teal text there. It's exactly how we wanted. So now we have a template, which we can use for building the rest of the pages for our site.
So we use this as a starting point, as we build the pages for the rest of this site.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98207 Viewers
61 Video lessons · 85506 Viewers
71 Video lessons · 69469 Viewers
56 Video lessons · 101807 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.