CALIFORNIA STATE UNIVERSITY, LOS ANGELES

INFORMATION TECHNOLOGY SERVICES

HTML5 and CSS3 Part 2: Adding Multimedia to the Web Page

Fall 2011, Version 1.0

Table of Contents
Introduction ....................................................................................................................................2 Downloading the Data Files ..........................................................................................................2 Adding Links to the Navigation Bar ............................................................................................2 Checkpoint One..............................................................................................................................3 Working with Images ....................................................................................................................4 Using CSS3 Properties to Visually Enhance the Page ................................................................5 Checkpoint Two .............................................................................................................................6 Creating a Page Specific Heading ................................................................................................6 Saving the Page as a Template ......................................................................................................7 Creating a Video Page for the Website ........................................................................................8 Embedding a YouTube Video .....................................................................................................8 Checkpoint Three...........................................................................................................................8

For additional handouts, visit http://www.calstatela.edu/handouts. For video tutorials, visit http://www.youtube.com/mycsula.

Introduction
Websites can be created by using one of many programming languages (e.g., HTML, JSP, PHP, ASP, ASP.NET, or Perl). Among those languages, HTML is the most basic text-based language that has been used in web design since 1989. HTML consists of two parts: 1) content that will be displayed in a web browser, and 2) markup or tags, which are encoded information that are generally hidden from web page viewers. This three-part handout will help users create a basic website using fundamental HTML knowledge that they can build on with more advanced techniques. This second part builds upon the web page that was created in the first handout. It covers adding links to the navigation bar, working with images, adding multimedia objects such as a YouTube video, and creating a web page template.

Downloading the Data Files

This handout includes sample data files that can be used for hands-on practice. The data files are stored in a self-extracting archive. The archive must be downloaded and executed in order to extract the data files. The data files used with this handout are available for download at http://www.calstatela.edu/its/training/datafiles/html5p2.exe. Instructions on how to download and extract the data files are available at http://www.calstatela.edu/its/docs/download.php.

Adding Links to the Navigation Bar

The <a> tag defines a hyperlink (or link) which is used to link from one page to another. The most important attribute of the a element is the href attribute which indicates the links destination. In this lesson, three links are added to the navigation bar and are styled using CSS. These links will serve as the main way to navigate through the website. To add links to the navigation bar: 1. Launch Notepad++. In the ITS Training Program computer labs, click the Start button, point to All Programs, point to Notepad++, and select Notepad++. 2. Click the File menu and select Open. The Open dialog box opens. 3. Navigate to the data files folder, select the index.html file, and then click the Open button. 4. Add three new lines between the opening <div class="nav"> tag and its corresponding closing </div> tag, and then type the following code to add the Home, Videos, and Pictures links to the navigation bar. <a class="navbuttons" href="index.html">Home</a> <a class="navbuttons" href="videos.html">Videos</a> <a class="navbuttons" href="pictures.html">Pictures</a> 5. To define a new class for the navigation bar links, add a new line before the closing </style> tag, and then type the following CSS rule.

HTML5 and CSS3 Part 2: Adding Multimedia to the Web Page

a.navbuttons{ text-align:center; height:30px; padding-left:14px; padding-right:14px; line-height:30px; margin:0px; display:inline-block; font-size:13px; color:black; text-decoration:none; }
NOTE: text-align centers the text horizontally; padding-left and padding-right add some extra space to the links; line-height centers the text vertically (make sure it is the same height as the regular height); display:inline-block makes the link a horizontal block instead of just text.

6. To add a mouse over effect to the navigation bar links, add a new line before the closing </style> tag, and then type the following CSS rule. a.navbuttons:hover{ background-color:#FFD400; color:black; text-decoration:none; cursor:pointer; }

Checkpoint One
This is the first of three checkpoints within this handout. Make sure that the index.html file that is being updated is similar to the checkpoint_1.html file located in the data files folder (see Figure 1 and Figure 2 for the recently changed areas of the document).

Figure 1 New CSS Rules in the checkpoint_1.html File HTML5 and CSS3 Part 2: Adding Multimedia to the Web Page 3

Figure 2 New HTML Code in the checkpoint_1.html File

Working with Images

Images are essential to almost any web page. Images can be used as banners, backgrounds, visual aids, or just visual representations of text. The <img> tag is used to add an image to a web page. The src attribute is used to specify the location of the image. In this lesson, a background image is added to the web page and a banner image is added at the top of the page. To apply an image as a background: 1. Locate the body selector between the opening <style> tag and the closing </style> tag, and then type the following declaration on a new line before the rules closing curly bracket (see Figure 3). background-image:url(images/darkTile.gif);
NOTE: Without declaring any other properties, the background image will repeat both vertically and horizontally. If you do not want it to repeat, add background-repeat:no-repeat; to the body rule.

Figure 3 Background Image Added to the body Rule

2. To remove the border that was added in the Part 1 handout, locate the div.wrapper selector between the opening <style> tag and the closing </style> tag, and then delete the following declaration. border:1px solid black; To insert a banner image: 1. Between the opening <div class="banner"> tag and its corresponding closing </div> tag, type the following code. <img src="images/csula_banner.gif" /> 2. To link the banner image to the home page, add the opening <a href="index.html"> tag before <img src="images/csula_banner.gif" />, and then add the closing </a> tag after <img src="images/csula_banner.gif" /> (see Figure 4).

Figure 4 HTML Code for the Banner Image

HTML5 and CSS3 Part 2: Adding Multimedia to the Web Page

3. Some browsers may add a border around a linked image. To prevent this from happening, add a new line before the closing </style> tag, and then type the following CSS rule. img{ border:0; }

Using CSS3 Properties to Visually Enhance the Page

CSS3 can be used to enhance the appearance of web pages. With this newest version of CSS, new attributes have been added to help create advanced effects with ease. To add shadows and gradients: 1. To add a subtle shadow to the main content and footer containers, locate the div.main and div.footer selectors between the opening <style> tag and the closing </style> tag, and then add the following declarations to both rules. -webkit-box-shadow:1px 1px 5px black; -moz-box-shadow:1px 1px 5px black;
NOTE: Both of these declarations produce the same result, but apply to different browsers. Compatibility is always of utmost importance and concern when creating a website.

2. To add a gradient background to the navigation bar, locate the div.nav selector between the opening <style> tag and the closing </style> tag, and then add the following declarations to the rule. background-image: -moz-linear-gradient(top, #787a80, #000000); background-image: -webkit-gradient(linear, center top, center bottom, from(#787a80), to(#000000)); background-image: -o-linear-gradient(top, #787a80, #000000);
NOTE: All three of these declarations produce the same result, but each one applies to a different browser. Do not replace the background-color declaration; simply add these declarations at the end of the rule.

3. To make the link text in the navigation bar readable, locate the a.navbuttons selector between the opening <style> tag and the closing </style> tag, and change the value of the color property from black to white (see Figure 5).

Figure 5 Updated Color Value for the a.navbuttons Rule

HTML5 and CSS3 Part 2: Adding Multimedia to the Web Page

4. To see the result, save the file, and then view the web page in a browser window. To learn more about CSS3, visit http://w3schools.com/css3.

Checkpoint Two
This is the second checkpoint within this handout. Make sure that the index.html file that is being updated is similar to the checkpoint_2.html file located in the data files folder (see Figure 6 for the recently changed areas of the document).

Figure 6 Updated CSS Rules in the checkpoint_2.html File

Creating a Page Specific Heading

The easiest way to identify a web page is to add a header near the top of the page. In this lesson, a header section is added to the page and CSS is used to style the text. To create a header trim: 1. Add a new line between the opening <div class="main"> tag and its corresponding closing </div> tag, and then type the following code. <div class="trim"></div>
HTML5 and CSS3 Part 2: Adding Multimedia to the Web Page 6

2. Add a new line between the opening <div class="trim"> tag and its corresponding closing </div> tag, and then type the following code. The header of this page is Home. <span class="header">Home</span> 3. To define two new classes for the trim and header, add a new line before the closing </style> tag, and then type the following CSS rules. The end result should be a trim at the top of the main content. div.trim{ background-color:#FFD400; width:750px; height:60px; position:relative; top:0px; font-size:30px; /* The stuff below this is CSS3 styling and not required, but recommended */ -webkit-box-shadow:0px 2px 6px #000; -moz-box-shadow:0px 2px 6px #000; border-radius:1px 1px 4px 4px; text-shadow:inset 3px 3px 3px #000; } .header{ color:#003399; position:absolute; top:10px; text-shadow:2px 2px 2px grey; left:10px; } 4. To see the result, save the file, and then refresh the page in the browser window.

Saving the Page as a Template

A web page template is a blank page with a websites layout and design applied to it. It can be used to quickly and easily create additional pages for the website. Using a template saves time because the graphics, menu, and framework do not have to be recreated each time a new page is added to the website. In this lesson, a template file is created based on the index.html file. To save the page as a template: 1. Delete the word Home located between the opening <span class="header"> tag and the closing </span> tag. 2. Delete the following code located between the opening <div class="main"> tag and its corresponding closing </div> tag. <p class="welcome"> This is some text. </p> 3. Click the File menu and select Save As. The Save As dialog box opens. 4. In the File name box, type template.html.
HTML5 and CSS3 Part 2: Adding Multimedia to the Web Page 7

NOTE: Make sure to save the file in the same directory that contains the index.html file.

5. Click the Save button.

Creating a Video Page for the Website

Usually, websites consist of more than one web page. In this lesson, a new page is created using the template file. This page will serve as a video page. To create a new page from the template file: 1. Open the template.html file if it is not already open. 2. Click the File menu and select Save As. The Save As dialog box opens. 3. In the File name box, type videos.html.
NOTE: Make sure to save the file in the same directory that contains the index.html file.

4. Click the Save button. 5. To add a header to the new page, add the word Videos between the opening <span class="header"> tag and the closing </span> tag.

Embedding a YouTube Video

Videos can be used to support text content on a web page, or as a standalone informative introduction page. To embed a YouTube video: 1. Add a new line after the closing </div> tag of the <div class="trim"> tag, and then type the following code. <div class="center"></div> 2. To define a new class called center, add a new line before the closing </style> tag, and then type the following CSS rule. .center{ text-align:center; } 3. Open Internet Explorer or any other web browser, navigate to http://www.youtube.com, and find a video that you want to embed. 4. Click the Share button below the video, and then click the Embed button. 5. Select the Use old embed code check box below the embed code. 6. Copy the embed code and paste it on a new line between the opening <div class="center"> tag and its corresponding closing </div> tag.
NOTE: The pasted code appears on one line. It does not need to be changed aside for readability purposes.

7. To see the result, save the file, and then view the web page in a browser window.

Checkpoint Three
This is the third checkpoint within this handout. Make sure that the videos.html file that is being created is similar to the checkpoint_3.html file located in the data files folder (see Figure 7 and Figure 8 for the recently changed areas of the document).

HTML5 and CSS3 Part 2: Adding Multimedia to the Web Page

Figure 7 New CSS Rules in the checkpoint_3.html File

Figure 8 New HTML Code in the checkpoint_3.html File

HTML5 and CSS3 Part 2: Adding Multimedia to the Web Page