New Feature: Playlist Center! Pick a topic and let our playlists guide the way—like a learning mixtape.

Start learning with our library of video tutorials taught by experts. Get started

XHTML and HTML Essential Training
Illustration by

Creating a page containing video


From:

XHTML and HTML Essential Training

with Bill Weinman

Video: Creating a page containing video

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.
Expand all | Collapse all
  1. 5m 10s
    1. Welcome
      1m 16s
    2. Using the exercise files
      1m 23s
    3. Choosing a text editor
      2m 31s
  2. 15m 46s
    1. Introducing HTML and XHTML
      2m 53s
    2. Understanding versions of HTML and XHTML
      2m 25s
    3. Exploring a simple XHTML page
      4m 47s
    4. Understanding the structure of an XHTML document
      2m 58s
    5. Understanding document containers
      54s
    6. Creating and using templates
      1m 49s
  3. 42m 4s
    1. Understanding how empty space is formatted in XHTML
      2m 42s
    2. Using paragraph tags
      2m 42s
    3. Aligning paragraphs
      2m 49s
    4. Understanding block-level and inline tags
      1m 24s
    5. Controlling line breaks and spaces
      5m 43s
    6. Formatting text with phrase element tags
      3m 28s
    7. Formatting text with font markup elements
      3m 24s
    8. Adding document structure with headings
      3m 25s
    9. Formatting quotations and quote marks
      2m 19s
    10. Preserving pre-formatted text
      1m 30s
    11. Selecting a typeface
      4m 33s
    12. Selecting a type size
      2m 11s
    13. Using ordered and unordered lists
      5m 54s
  4. 7m 48s
    1. Using inline images
      3m 17s
    2. Flowing text around an image
      2m 4s
    3. Breaking lines around an image
      2m 27s
  5. 22m 34s
    1. Working with hyperlinks
      7m 46s
    2. Using relative URLs
      3m 5s
    3. Specifying a base URL
      2m 4s
    4. Linking within a page using fragments
      4m 28s
    5. Creating image links
      5m 11s
  6. 22m 56s
    1. Introducing tables
      4m 37s
    2. Formatting tables with CSS
      8m 50s
    3. Aligning images with tables
      5m 7s
    4. Reviewing an alternative solution using CSS
      4m 22s
  7. 14m 31s
    1. Introducing frames
      7m 56s
    2. Hiding frame borders
      3m 15s
    3. Creating inline frames using iFrame
      3m 20s
  8. 20m 50s
    1. Introducing forms: part 1
      10m 37s
    2. Introducing forms: part 2
      7m 45s
    3. Using CGI with forms
      2m 28s
  9. 25m 42s
    1. Introducing CSS
      3m 11s
    2. Understanding levels of inheritance
      6m 10s
    3. Learning CSS syntax
      11m 23s
    4. Using units of measure in CSS
      4m 58s
  10. 1h 45m
    1. Comparing table layout and CSS layout
      1m 25s
    2. Exploring the finished web site
      2m 37s
    3. Building a document header
      8m 18s
    4. Placing a banner and a contact button
      8m 13s
    5. Laying out a main menu
      6m 55s
    6. Creating a layout template: main body area
      13m 31s
    7. Creating a layout template: sidebar area
      5m 17s
    8. Creating a layout template: footer content
      4m 46s
    9. Building a main home page: main body content
      11m 24s
    10. Building a main home page: sidebar content
      8m 52s
    11. Creating a page with a menu, graphics, and formatted links
      13m 26s
    12. Creating a page containing an ordered list
      6m 44s
    13. Creating a page containing video
      10m 45s
    14. Touring the finished site
      3m 45s
  11. 53s
    1. Goodbye
      53s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
XHTML and HTML Essential Training
4h 44m Beginner Jul 28, 2009

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.

Topics include:
  • Understanding the structure of an HTML or XHTML document
  • Creating and using templates
  • Controlling white space and line breaks
  • Making effective use of tables and frames
  • Flowing text around an image
  • Formatting tables with CSS
  • Creating web pages that work properly across platforms and devices
  • Reviewing a case study of a complete web site
Subjects:
Developer Web Web Design Web Foundations Programming Languages Web Development
Software:
HTML XHTML
Author:
Bill Weinman

Creating a page containing video

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.


Expand all | Collapse all
please wait ...
Q: In this title, the instructor uses tables to create a website design. Is there a way to create this same layout with CSS?
A: This course will be updated to include CSS-based layout techniques within
the next few months. In the meantime, please see Bill's <a href="
http://www.lynda.com/home/DisplayCourse.aspx?lpk2=52341">CSS for
Developers</a> title for more information on coding with CSS.
Q: In the "Understanding the structure of an XHTML document" movie in Chapter 1, where does the "Roses are red," etc, text come from? I don't see it in the code.
A: Notice the <frame src="??"> tags. These reference other .html files that contain the content of the various frames. Details about how frames work can be found in Chapter 6 of the course.
Q: In this title, the instructor uses tables to create a website design. Is there a way to create this same layout with CSS?
A: This course will be updated to include CSS-based layout techniques later in 2012. In the meantime, please see Bill's CSS for Developers title for more information on coding with CSS.
 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed XHTML and HTML Essential Training.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.