Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In XHTML and HTML Essential Training, Bill Weinman helps designers and coders understand XHTML and HTML. In the process, Bill covers document structure, block and inline-level tags, floating images, controlling white space, phrase and font markup, and tables and frames. He even provides a good introduction to CSS. Bill offers step-by-step guidance for building a complete working web site. Exercise files accompany the course.
In this lesson, we're going to create the Videos page and this is really the final page of our website. You'll notice that this has an embedded YouTube video in it and as I wave my mouse over these things, you get all the little Flash doodads that YouTube embeds. So we'll learn how to do that. It's very easy to do. It provides free hosting for your videos and all kinds of features that would be difficult to provide on your own. So it's a very popular way to embed videos in a webpage these days. So this is our Videos page and this is what it will look like when we're done.
So, let's get started. Here in our text editor we have the template file and you'll notice this is in the Videos folder under the Exercise Files. So here's our template, here's our beginning.css and here's our text file. So we'll go ahead and start with our Save As, save as videos.html and we'll save our CSS as main.css.
The videos.txt we do not need to save as anything because we're not going to write to it. We're just going to be reading from it. First thing we do is change the title. That's going to say Groundswell TV. Then we're going to do our menu, so we're going take this image and move it down here. Then we're going to take the link and move it up there and change this to home and change this to home, change this to home.
This becomes 80 and this one down here becomes 84. This becomes videos and finally this becomes videos over here. There we're done. So we'll save that, go ahead and test it in the browser. So we need to load up the Videos page in the browser and there we are. We have our menu and everything works.
That's our Videos page. Now we want to change our ID banner. That's right here. Change home_banner to videos_banner and we'll save that and reload the browser. There we have it, Swells & Vision. Go ahead and put in the alt text, "swells and vision." Now we'll go ahead and do the content. So we have our videos text file. This is really going to be easy here just a copy and paste and copy and paste.
That's really easy. Go ahead and do the indent. Let's take a look at this in the browser and there we have it. There is our Groundswell TV and there is our Video Clips. Now there's something missing. Oh, yeah, there is a video here. Ha-ha. So this video is on YouTube and I've got the YouTube page loaded up here with the video on it. You can see this guy surfing here. So we want to copy and paste this. YouTube provides this nice little Embed link and they also provide a way to customize it.
So you see the little Gear icon there, I'm going to click on tha,t and we get some different options. I always like to include the Enable delayed cookies. I'm going to start with that. YouTube normally provides cookies to the browser for some of its features and what this does is it prevents it from giving cookies to the browser when the video is embedded on a page that's not on the YouTube.com domain. So what this does is it delays any cookies until somebody clicks on the link to get to YouTube.com.
So viewing the movie on your website will not give cookies and I like that. So I uncheck the Include related videos, which is normally checked. So that way at the end of the movie, you don't get the related videos thing. I also don't click on Show Border. Now notice the object width is 853, so we want it to be the smallest possible size. You see that changes in there when we click on this. Now we can just copy and come over here to our text editor and paste it in here.
It will go right here. There it is. Oh my God! Look how long that is. It's 464 columns wide and that's a bit longer than what we'd like. Now you could just leave it like this and that would be fine and it would show up. Let me go and show you what that looks like on our page. I'm just going to close the YouTube page there now and reload this. Before I chose just the movie, it's going to show us this security warning. If you're testing this in Internet Explorer, you'll get a similar message, but it'll look a bit different. The security message will be at the top of the browser window. You just need to click on that security message and select Allow Blocked Content.
I'm going to detour now and show you what to do with this. Now what this means is that you're watching content in Flash but the content is off on a web server someplace and the page you're looking at is on your local computer. So if you're following along, you'll get this warning or something like it. That's because the HTML that you're looking at is on your local computer, but the Flash content is coming from the YouTube servers out there in the Internet someplace. Now if the page was loaded on a web server someplace on the Internet, you would not get this warning.
You'll only get this when the page is loaded on your local network on your local computer. So you could just click on OK and you also get this warning, because I took a long time and that's okay. Do you want to abort the script? No. So now we get the video, okay? But if I go and reload the page again, you get the warning again. So I'm going to click on Settings. I'm going to show you what to do with this. This loads a webpage over on the Macromedia website, which is at Adobe, and it allows me to set an exception.
So I'm going to edit locations, add location. This is the file on my desktop. I'm going to go ahead and copy. I'm pressing Ctrl+C on the PC or press Command+C on a Mac and Ctrl+V here, Command+V on a Mac and press Confirm. Now I have this exception. I have two of them in here. One is for the other location where I have this loaded on my computer. That's okay. You'll only have one and then I can close this and now whenever I hit Reload here, I'll just get the video. Now, back to what we were saying.
Notice how big this is on the page. So I want to edit that down and I also want to make that XHTML a little bit prettier, because that matters to me. That may not matter to you at all. So I'm going to edit this a little bit. Go ahead and break there and I'm going to go ahead and break here. You notice that this param is a closed param, so actually I'm going to change it to one of these because that's allowable in XHTML.
I'm going to do the same thing here. Now, I'm doing this because it matters to me and for most people it may not matter. It also makes a little bit easier to work with and I'm going to be working with it a little bit, because I'm not just sort to leave anything alone if I can do something with it. So this just takes a moment. We have our width and height here, which is where I'm going with all this. Again, with the embed you can collect that.
So now I have my content like this and I'm going to go ahead and just because I'm like that I'm going to intend a little bit there. All right. You notice that this has not changed how it works at all. All right? These are all things that-- all I've done is formatted it. So when I go and look at the video in our page again, it's still there and it still looks just fine. What I'm going to do is I'm going to change the size, because it's a little big, so I'm going to make this 420x260. I figured out these dimensions earlier, and these keep the same aspect ratio.
So I'll save that and I'll go ahead and look at it in the browser. Now that's a much more reasonable size and now I can do a little bit of formatting. I want to indent it a little bit. So again we'll go back to the browser. I'm going to put in a div and a closed div down here. I'll indent this and I'm going to give it an ID, youtubeVideo.
I'll save that and go over to the CSS, all way down here to the end. I'm just going to create a section for miscellaneous. So I know the C is silent in miscellaneous, but somehow I've always said it as if I were Popeye. "mis-ca-llaneous." So that will be 20 pixels at the top and at the bottom, 0 on the right and 30 pixels on the left. Go ahead and save this.
We've saved that already. Bring it up in the browser and there we have it. So this looks exactly like it does in our reference site. All right! That page is now done and working just fine. I just want to add one thing here. The site that we've been working with was designed by James Williamson. So I appreciate that. It allowed us to have some interesting content to work with as we showed you how to build a website using tables for positioning and using all the techniques that we learned in this course on XHTML and HTML.
Find answers to the most frequently asked questions about XHTML and HTML Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.