Module 3.pdf

MODULE - 3

of 60

Module 3

This is a single, concatenated file, suitable for printing or saving as a PDF for offline viewing. Please note

that some animations or images may not work.

Module 3 Study Guide and Deliverables

Readings: Module 3 lecture notes

Ruvalcaba & Boehm, Chapters 7–11, 16 (pages 540–547 only)

Discussions: Discussion 3 postings end June 2 at 6:00 AM ET

Assignments: Assignment 3 due June 2 at 6:00 AM ET

Assessments: Quiz 3 due June 3 at 6:00 AM ET

Lecture 6: HTML Part 2

Learning Objectives

By reading this lecture and the textbook,

viewing the video tutorials, participating in

discussions, and completing this module's

deliverables, you will be able to:

Understand many of the new HTML5

structural and semantic elements

Code character entities

Work with images and understand different image formats for the web

Perform image swaps with CSS

Code image maps in HTML

Build tables that contain tabular data

Modify list styles

Use list elements to create navigation/menu bars with CSS

met_cs601_14_sp1_ebishop_module3 is displayed here

Download

http://www.bu.edu/av/disted/met/cis/cs601/downloadable/met_cs601_14_sp1_ebishop_module3.mp4

http://www.bu.edu/av/disted/met/cis/cs601/downloadable/met_cs601_14_sp1_ebishop_module3.mp4

MODULE - 3

of 60

Build web forms for collecting various types of user input and perform limited form validation with

HTML5

Introduction

You were introduced to the basic concepts of Hypertext Markup Language (HTML) in lecture 2. You then

went on to learn advanced CSS features in lectures 3, 4, and 5. The CSS knowledge that you now have

can be used to style the growing list of HTML elements and features that you are about to be exposed to.

In this lecture, we will dive deeper into HTML5 and learn more about it’s structural and semantic

elements. You’ll also see some coverage of CSS that should be familiar to you so that you can style these

new HTML elements and should instill an understanding that HTML5 and CSS3 were meant to work

together. You’ll learn ways to structure data and even add some interactivity on your pages with HTML

and CSS.

HTML5 is very powerful. We will cover many of it’s features, but we do not provide an exhaustive level of

coverage in this lecture. The usage of HTML changes and there are many good online sources of

information to learn more about HTML5 and how it is used in various applications.

Note

Some screenshots have been omitted in an attempt to encourage you to try out these HTML features on

your own as you read through the lectures.

HTML5 Structural Elements

In previous lectures, you learned how to provide structural divisions to your page using the <div> tag and

setting an id to describe the contents of the designated area. While this can still be used with HTML5,

there are more descriptive elements to describe portions of a web page. These descriptive elements

provide meaning, or semantics to portions of the page structure.

Here is a listing of some of the commonly utilized, new semantic elements:

MODULE - 3

of 60

<header>

o This element represents a group of introductory or navigational aids. Commonly used to

contain your your heading elements.

<section>

o A generic section of the document. It is used to group related content.

<article>

o Represents a component of the page that consists of self-contained composition. This

could be used for a forum post, article, blog entry, etc. The contents of this area can be

used for content that is independently distributable or reusable.

<nav>

o A section of the page that links to other pages. It is a section for your major (main)

navigational elements and links.

<aside>

o These are typically used for sidebar content or other content that could be considered

separate from the rest of the page’s content. You can also use it to highlight areas of

content, like in highlighting quotes in articles. It is often used for advertising on

commercial sites.

<footer>

o Typically contains information about its section. This can include author information,

copyright data, etc.

<hgroup>

o Used to represent a heading of a section where the heading has multiple heading levels,

such as subheadings.

<datetime>

o Used to represent a data and time that can be understood by the web browser.

While not required, you should use these semantic structural elements where you can. Using generic

<div> tags is still acceptable, but not preferred.

Character Entities

MODULE - 3

of 60

Special characters must often be used on web pages. Some instances of these characters may be

available on your keyboard, while others may not. In either case, it is standard practice to “code” your

entities to help keep consistent standards and to help ensure valid markup.

An example of a special character is the copyright symbol ©.

This would be coded as:

©

You may also want to include symbols found on your keyboard, such as the ampersand (&). While it may

be tempting to just type it in within your text, you should code instances of it like this:

&

You can find an extensive list of HTML symbol entities at: http://www.entitycode.com

Images

We briefly discussed the use of images in previous lectures but will now provide a more extensive

coverage.

Images can be added to HTML pages with the following tag:

<img>

An example of using this as an element is as follows:

<img src="images/bt.jpg" alt="boston terrier" width="192" height="192" />

The src attribute allows you to specify a value in the form of a location for the image file. The alt attribute

allows you to set an alternate text that is attached to the image to describe it. The alt attribute is helpful

for accessibility reasons. Using both the src attribute and the alt attribute are required.

http://www.entitycode.com/

MODULE - 3

of 60

You can also include optional attributes with an image. We used width and height attributes to set the size

of the image. You can use these values to overrule the native image size, but it is not recommended. You

should declare the native image size with the image element. If you want to change the image size, you

can use an image-editing program to resize the dimensions of the image for best quality and better file

size calculations.

Just as with other HTML elements, you can use the CSS declarations you have learned to provide

additional styling to images. Try to do this on your own.

Image Formats

There are a few different image types that can be used in your web pages.

JPEG (.jpg, .jpeg)

GIF (.gif)

PNG (.png)

JPEG (Joint Photographic Experts Group) files are typically used for high quality photographs.

GIF (Graphic Interchange Format) files are typically used for simple images, logos, diagrams, and

illustrations. GIFs can also come in the form of animated images.

PNG (Portable Network Graphics) files are images developed specifically for the web. PNG files are

almost like a combination of the favorable attributes of both JPEGs and GIFs.

You should use GIF files if image size (storage) is a concern and if you need simple color aspects. JPEGs

are suitable when you want to display high-resolution photographs. PNG files are a good replacement for

GIF images and may result in a smaller file size, but may not be supported by all mobile devices.

Image Swaps

MODULE - 3

of 60

You will learn how to “swap images” with JavaScript in a future lecture, but this can also be done with

CSS3.

By swapping an image, I am referring to the ability to mouse over or rollover and image and have it’s

display change. It is a simple bit of interactivity that can add to a web page for design or descriptive

purposes.

Swapping images with CSS actually doesn’t involve the use of the <img> tag, but instead uses a CSS

declaration that utilizes the background-image attribute. This usage has limitations, and the preferred way

to do this is with JavaScript.

Here is an example:

<!DOCTYPE html>

<html>

<head>

<title>CSS Image Swap</title>

<style type="text/css">

body {

margin-left: 30px;

}

#imageswap {

background-image: url("images/gloves_left.jpg");

width: 184px;

height: 370px;

}

#imageswap:hover {

background-image: url("images/gloves_right.jpg");

}

</style>

</head>

MODULE - 3

of 60

<body>

<h1>Image Swap with CSS</h1>

<p>Move your mouse pointer over the image and see what happens!</p>



<p id="imageswap"></p>

</body>

</html>

Shown below is what it all looks like. The first image illustrates right before the mouse pointer is placed

over the glove, the second image shows the mouse pointer located on top of the glove and the image has

been swapped.

MODULE - 3

of 60

MODULE - 3

of 60

Image Maps

An image map is a set of HTML elements that allow you, as the designer/developer, to provide a list of

coordinates for an image in order to create “areas” to serve as hotspots for hyperlink destinations. This is

commonly used in maps, where certain points on the map are outlined with coordinates and then given a

location attribute for a page to be opened when this area is clicked on by the visitor.

In order to create an image map, you must provide a coded HTML image and add an attribute of

“usemap” on this image element.

MODULE - 3

of 60

You must also create a map element giving an attribute of name and optionally an id. This map element

links to the image element. Finally, you must create elements for the areas to be designated on the

image. An area has attributes to include shape, coords, title, alt, and href. The shape attribute indicates

the type of shape for the hotspot, coords designate the x/y coordinates for the starting and ending points

of the hotspot. The title, alt, and href should be familiar to you.

Here is an example of an image map:

<!DOCTYPE html>

<html>

<head>

<title>Image Map Example</title>

</head>

<body>

<img src="images/man-and-woman-figure.jpg" alt="image_map_man_woman"

usemap="#mymap">

<map name="mymap" id="mymap">

<area shape="rect" coords="148,65,264,345" title="man" alt="Man Page"

href="https://en.wikipedia.org/wiki/Man">

<area shape="rect" coords="312,66,445,345" title="woman" alt="Woman Page"

href="https://en.wikipedia.org/wiki/Woman">

</map>

</body>

</html>

In the first example, look at the status bar at the bottom of the browswer window. You can see that the

mouse cursor is hovered over the figure of the man and that the status bar displays a link to the Wikipedia

MODULE - 3

of 60

article for a Man. The second example shows the corresponding link for the Wikipedia article when the

mouse cursor is placed over the woman’s figure.

MODULE - 3

of 60

MODULE - 3

of 60

Tables

MODULE - 3

of 60

Now that you have learned how to layout page content with CSS (Module 2), we can safely show you how

to use HTML tables to represent tabular data. Tabular data meaning that your data is presented in rows

and columns.

Note

Remember, that is all you should use tables for, never use tables for page layout purposes (warning #2).

The basic structure of HTML tables consist of these main tags:

Table tags: <table> and </table>

Row tags: <tr> and </tr>

Cell tags: <td> and </td>

You can create basic HTML tables by using the tags above. In between the opening and closing <table>

tags, you construct rows with cells. Your data is contained in these cells.

If you wanted to create a table that looked like this:

You could use this HTML code:

<!DOCTYPE html>

<html>

<head>

<title>Title</title>

<meta charset="UTF-8">

</head>

<body>

MODULE - 3

of 60

<table>

<tr>

<td>data1</td>

<td>data2</td>

</tr>

<tr>

<td>data3</td>

<td>data4</td>

</tr>

</table>

</body>

</html>

That is a very basic table. We’ll want to create tables with more description and formatting elements.

One problem with the table example above is that there is no description of the data that it contains. A

solution to this is to use a table header and table caption. We’ll also want to clearly mark the table body

area to separate the data from the descriptive elements.

Let’s look at another example:

<!DOCTYPE html>

<html>

<head>

<title>Table with more elements</title>



</head>

body {

font-family: Helvetica, Arial, sans-serif;

}

MODULE - 3

of 60

table {

width: 60%;

border: 1px solid black;

border-collapse: collapse;

}

th, tfoot {

background-color: #CCCCCC;

text-align: left;


padding: .5em;

}

td {


padding: .5em;

}

caption {

padding-bottom: 5px;

font-style: italic;

font-size: 1.2em;

}

.center {

text-align: center;

font-style: italic;

font-size: .8em;

}

</style>

<body>

<table>

<caption>Boston University MET CS Program for: Joe Terrier</caption>

MODULE - 3

of 60

<thead>

<tr>

<th>Course Number</th>

<th>Term</th>

<th>Grades</th>

</tr>

</thead>

<tbody>

<tr>

<td>CS 546</td>

<td>Fall 1 - 2012</td>

<td>A</td>

</tr>

<tr>

<td>CS 632</td>

<td>Fall 2 - 2012</td>

<td>B</td>

</tr>

<tr>

<td>CS 601</td>

<td>Spring 1 - 2013</td>

<td>IP</td>

</tr>

</tbody>

<tfoot>

<tr>

<td class="center" colspan="3">Student academic progress as of January

2013.</td>

</tr>

MODULE - 3

of 60

</tfoot>

</table>

</body>

</html>

Here is the result:

As you can see, we have made a table with a bit more visual description from your previous table

example.

Let’s first discuss the new HTML elements.

The first thing you will notice is we used the <caption> element to add a caption to the table. This is

represented as: Boston University MET CS Program for: Joe Terrier

You will also notice three new table elements:

<thead>

<tbody>

<tfoot>

MODULE - 3

of 60

The purpose of these elements is to group our rows together based on content. We separated the table

heading from the body, and the body from the footer. These are descriptive elements, but can also be

structural as well. You will find that you can style these sections with CSS as well.

The other HTML change you will notice is the use of the colspan attribute on the <td> element for the row

of data contained in the table footer. We set a numeric value of 3 to indicate that this one row should span

3 columns. This is known as merging table cells. The same can be done with the rowspan attribute if you

want to merge certain row cells together.

As far as CSS styling, we’ve added a few things to spice things up with the presentation of this table’s

content. Most of this should be familiar to you. One new attribute that was added is border-collapse. This

simply allows us to shrink the space between the borders of our table cells. If we didn’t use this attribute

with a value of “collapse”, our table would look a bit different.

See below and notice the whitespace between the lines of the borders:

List Styles

We discussed the different types of HTML lists in lecture two. In this section, we will show how to modify

our list styles and also use lists for navigation elements on our pages.

MODULE - 3

of 60

Unordered List

To start, we’ll modify the standard bulleted (unordered) list. Does this look familiar?

Here is the HTML for the standard unordered list:

<!DOCTYPE html>

<html>

<head>



</head>

<body>

<h1>My List</h1>

<ul>

<li>Home</li>

<li>Admissions</li>

<li>Courses</li>

<li>Faculty</li>

<li>Students</li>

MODULE - 3

of 60

</ul>

</body>

</html>

That is a pretty boring looking list. Let’s learn how to change the style of the list items.

You can change the style of the bullet points with the list-style-type attribute. Here is an example where

we apply a different style to each bullet point in the list.

<!DOCTYPE html>

<html>

<head>




.circle {

list-style-type: circle;

}

.square {

list-style-type: square;

}

.disc {

list-style-type: disc;

}

.none {

list-style-type: none;

}

</style>

</head>

<body>

MODULE - 3

of 60

<h1>My List</h1>

<ul>

<li>Home</li>

<li class="circle">Admissions</li>

<li class="square">Courses</li>

<li class="disc">Faculty</li>

<li class="none">Students</li>

</ul>

</body>

</html>

Here is the result:

You will notice a change to each bullet point except the first and fourth items. The reason for this is the

first item was not styled so it showed a default style. The fourth item was styled with a disc, which

happens to be a default style. The last item in the list doesn’t have a bullet, because we set the style to

none.

MODULE - 3

of 60

We can also change the alignment of these list items. Let’s add some padding values to the list and the

list items. We’ll go back to default list item styling, but add CSS declarations to modify the placement of

our list and it’s items.

ul {

padding-left: 5em;

}

li {

padding-left: 2em;

padding-bottom: .5em;

}

Result:

You may find that you don’t like any of the bullet point styles for the bulleted list. You can set your own

custom image as the bullet point by using the list-style-image attribute and giving it a value of the location

for your desired image file.

Syntax: list-style-image: url(“images/mybullet.png”)

Example/Result:

MODULE - 3

of 60

Ordered Lists

You also might want to change the list item styles for an ordered list.

Instead of this:

You can do something like this:

MODULE - 3

of 60

You can use the same list-style-type property, as we did in the examples with the unordered lists. The

differences between the presentation styles for the unordered and ordered bullet types are just a different

set of available values. You can use these bullet styles for your ordered lists:

decimal

decimal-leading-zero

lower-alpha

upper-alpha

lower-roman

upper-roman

We used the upper-roman for the example above.

Using Lists for Navigation

You can use lists to create navigation bars for your site. These are helpful as a type of menu of the

available pages or links on your site. While you can use images for this purpose, such as using icons or

image buttons, using CSS to style plain lists is a popular and effective method to accomplish this task.

You can take a simple list like this one:

MODULE - 3

of 60

And turn it into this:

MODULE - 3

of 60

We turned our simple list into a styled, vertical navigation bar that includes a rollover feature as well. You

could incorporate this into your page layout to provide a menu to your users.

Here is the HTML and CSS used for the example above:

<!DOCTYPE html>

<html>

<head>

<title>Navigation Bar Vertical</title>



nav {

font-size:1.5em;

width:250px;


MODULE - 3

of 60

color: #fff;

}

nav ul {

margin-left: 1.25em;

margin-bottom: 1.5em;

background: blue;


}

nav li {

margin-left: -1.25em;

list-style: none;

border-bottom: #fff dotted;

border-width: 2px;

padding-bottom: .25em;

padding-top: .25em;

}

nav li.nobottom {

border-width: 0px;

}

nav a {

color: #fff;

display:block;

height:25px;

line-height: 25px;

text-decoration:none;

width:100%;

}

nav li:hover {

background: #f90;

}

MODULE - 3

of 60

</style>

</head>

<body>

<nav>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Admissions</a></li>

<li><a href="#">Courses</a></li>

<li><a href="#">Faculty</a></li>

<li class="nobottom"><a href="#">Students</a></li>

</ul>

</nav>

</body>

</html>

You have many options with CSS to style a wide variety of navigational elements.

For a more comprehensive navigation bar, we are providing an example of a horizontal navigation bar

with submenu options. See below.

MODULE - 3

of 60

The HTML and CSS used for the above example is listed below. Comments have been provided to help

explain the logic used to create this effect.

<!DOCTYPE html>

<html>

<head>

<title>Navigation Bar Horizontal with Submenus</title>



/* for the nav structural element */

nav {

width:100%;

height:30px;

background:#0080ff;

MODULE - 3

of 60

font-size:1.25em;


color: #fff;

}

/* setting margins on the main level, unordered list */

nav ul

{

margin:0px;

padding:0px;

}

/* list item styling for the main level list */

nav ul li

{

display:inline;

float:left;

height:30px;

line-height:30px;

list-style:none;

margin-left:15px;

position:relative;

}

/* styling links and hover features for the list items at the main level */

nav li a

{

color:#fff;


}

MODULE - 3

of 60

nav li a:hover

{

color: #ff8000;


}

/* this is for the sublevel items, so there is a list within the main list

items */

nav li ul

{

background-color:#000;

display:none;

left:0px;

margin:0px;

padding:0px;

position:absolute;

top:30px;

border: 5px solid #0080ff;

}

nav li:hover ul

{

display:block;

width:160px;

}

/* this is for the list items for the submenu lists */

nav li li

{

list-style:none;

display:list-item;

MODULE - 3

of 60

}

nav li li a

{

color:#fff;


}

nav li li a:hover

{

text-decoration:underline;

}

</style>

</head>

<body>

<nav>

<ul> 



<li><a href="#">Home</a></li>





<li>

<a href="#">Admissions</a>



<ul>

<li><a href="#">Program</a></li>

<li><a href="#">Advisors</a></li>

<li><a href="#">Application</a></li>

</ul>

MODULE - 3

of 60

</li>





<li>

<a href="#">Courses</a>



<ul>

<li><a href="#">CS 536</a></li>

<li><a href="#">CS 601</a></li>

<li><a href="#">CS 637</a></li>

</ul>

</li>





<li>

<a href="#">Faculty</a>



<ul>

<li><a href="#">Professor. A</a></li>

<li><a href="#">Professor. B</a></li>

</ul>

</li>





<li>

<a href="#">Students</a>

MODULE - 3

of 60

<ul>

<li><a href="#">Transcripts</a></li>

<li><a href="#">Register</a></li>

<li><a href="#">Graduation</a></li>

<li><a href="#">Jobs</a></li>

</ul>

</li>



</ul> 

</nav>

</body>

</html>

Forms

There will be many situations where you will want to collect information from a visitor to a web site. A form

is a collection of HTML elements that work together to allow a visitor to enter data on the page. This form

data can then be submitted to a script for processing.

Forms are created with the <form> tag. Visitors can enter information or select pre-defined choices using

text boxes, lists, check boxes, radio boxes, and a variety of other form elements.

At a minimum, a form element needs the following attributes:

name—name of the form

action—the server program that will process the form data/request

method—the way the information is sent to the server. Possible values are post and get.

o get—the get method is the older of the two. The data of the form is sent by being

appended to the URL with as a query string consisting of name/value pairs. The query

MODULE - 3

of 60

string is separated from the address portion of the URL with a question mark as a

separator.

o post—the post method is more commonly used. The data of the form is sent in the HTTP

message body of a post request after being encoded into query strings.

Simply providing these attributes to a form really doesn’t give us much functionality unless we have some

other form elements.

For simple forms, no processing is required on the client side. A user can simply click on a submit button,

and the browser handles the tasks of gathering the data and sending it to the server.

However, you can process forms by writing client-side scripts to handle button clicks and so on. A typical

example is to write a server-side script that validates user input before the form is processed. But in a

client-side script, you can have access to the events triggered by all of the form’s controls. This allows

you to write handlers for any purpose you need, including replacing server processing altogether.

Here is a simple form example (code first and then a screenshot):

<!DOCTYPE html>

<html>

<head>

<title>Forms</title>


</head>

<body>

<form name="myFirstForm" action="http://serveraddress/script.php"

method="post">

<p>Enter your name:

<input type="text" name="textName">

<input type="submit" name="submitButton" value="Submit">

</p>

</form>

MODULE - 3

of 60

</body>

</html>

Result:

In this example, when the user enters his/her name and clicks on the submit button, the name is sent to

the script/program named script.php (via post) on the server for processing.

We introduced two new form elements in the above example, we will discuss these element types next.

Note

You can also include id attributes in all of these form elements so you can access them with the DOM.

Text Field


The input tag is used for many, but not all, of the form elements.

The type attribute represents the type of form element. In this case it is for capturing text.

The name attribute (for all form elements) is very important. When the results of the form are submitted,

each element in the form is identified by the value provided to the name attribute.

MODULE - 3

of 60

Submit Button

<input type="submit" name="submitButton" value="Submit">

Another input type is submit. It needs a name just like any other input element, but it also needs a value

attribute. The value of the value attribute in this case is Submit. This is the text that is displayed on the

input element. By default, an input type of submit is represented as a browser generated button.

The specific “submit” type sends information to the server. Other types of buttons include “reset”, “button”,

and “image”.

Image is similar to Submit, but gives you a choice to define a specific image for the button and it also

submits information to the server. Reset is used to clear any entered data in form fields. Button is used to

run client-side scripts.

Text Area

The textarea element is similar to the input type=”text”. It is used for capturing text, but it allows for

multiple rows and columns for capturing user input.

We’ll add a textarea element to our previous example:

<!DOCTYPE html>

<html>

<head>



</head>

<body>

<form name="myFirstForm" action="script.php" method="post">

<p>Enter your name:

MODULE - 3

of 60


</p>

<p>Please enter your message:</p>

<p><textarea rows="5" cols="50" name="taComments"></textarea></p>

<p><input type="submit" name="submitButton" value="Submit"></p>

</form>

</body>

</html>

Result:

Radio Buttons

Radio buttons are special because each instance is grouped together by a shared name. If a user clicks

on one radio button, the other radio button(s) are deselected. This makes them connected and you can

only have one active selection for a common group of radio button input types.

MODULE - 3

of 60

<!DOCTYPE html>

<html>

<head>



</head>

<body>


<p>Enter your name:


</p>

<p>

<input type="radio" name="radioMessageType" value="question"

checked="checked">Question <br/>

<input type="radio" name="radioMessageType" value="comment">Comment <br/>

<input type="radio" name="radioMessageType" value="complaint">Complaint <br/>

</p>




</form>

</body>

</html>

Result:

MODULE - 3

of 60

You can see that all of the radio buttons use only one name. Also, the selection titled Question is already

selected because we used the checked attribute to tell the browser that this is the default option to

display, but the visitor can still change it.

Check Boxes

There are similarities between check boxes and radio buttons, but there are actually more differences

when you dig deeper.

Unlike radio buttons, check boxes do not have to be grouped together by a shared name. You can also

select multiple check box options rather than being limited to one selection with radio buttons.

<!DOCTYPE html>

<html>

<head>



</head>

MODULE - 3

of 60

<body>


<p>Enter your name:


</p>

<p>How would you like to be contacted in the future?</p>

<p>

<input type="checkbox" name="cbContact1" value="E-mail">E-mail <br/>

<input type="checkbox" name="cbContact2" value="textmsg">Text Message <br/>

<input type="checkbox" name="cbContact3" value="phone">Phone Call <br/>

<input type="checkbox" name="cbContact4" value="tweet">Tweet my Twitter

handle <br/>

</p>

<p>What is the nature of your request?</p>

<p>

<input type="radio" name="radioMessageType" value="question"

checked="checked">Question <br/>

<input type="radio" name="radioMessageType" value="comment">Comment <br/>

<input type="radio" name="radioMessageType" value="complaint">Complaint <br/>

</p>




</form>

</body>

</html>

MODULE - 3

of 60

Result:

Password Fields

You will often want to mask (hide) sensitive information being entered into a text field. You can do this

using a special input type with a value of “password”.

<p>Enter your password: <input type="password" name="pwdPassword"></p>

Result with text entered:

Dropdown Lists

MODULE - 3

of 60

A drop down list is similar to a radio button, but presented a bit differently. This selection element also

restricts the visitor to select only one available option.

The element uses a single “select” tag and multiple “option” tags.

<p>Luxury Car Options:

<select name="cars">

<option value="bmw">BMW</option>

<option value="porsche">Porsche</option>

<option value="mercedes">Mercedes</option>

</select>

</p>

Result:

Choices view:

You can also use the optgroup attribute to group a set of options into categories.

List Boxes

So if the Dropdown list is similar to radio buttons, what would be similar to check boxes? A list box.

A list box allows you to make multiple selections:

MODULE - 3

of 60

Let’s pretend the guy or gal from the previous example with the luxury cars is a big spender and buys

his/her cars in multiple quantities.

<p>Luxury Car Options (ctrl+click for multiple selections):

<select name="cars" size="4" multiple>

<option value="bmw">BMW</option>

<option value="porsche">Porsche</option>

<option value="mercedes">Mercedes</option>

<option value="ferrari">Ferrari</option>

<option value="lexus">Lexus</option>

<option value="tank">Military Tank</option>

</select>

You can see that we use the same syntax as we do with drop down lists, but we add attributes to the

select element. Here we specify a size for the displayed list and give a standalone value of “multiple” to

allow for multiple selections. Multiple selections are accomplished by holding down the Control (ctrl)

button on your keyboard and clicking on multiple options in the list.

Result:

Form Element Labels

In the previous examples, we labeled our form elements with paragraph text. This works, but there is a

better way: labels.

MODULE - 3

of 60

Labels provide some semantic value, help with accessibility, and also help keep things tidy in your

presentation of form elements.

<label for="name">Enter your name:</label>


Result:

In addition to labels, you can also use fieldsets and legends to describe and group together your form

elements that should be grouped together, like radio buttons and check boxes.

<fieldset>

<legend>How would you like to be contacted in the future?</legend>

<input type="checkbox" name="cbContact1" value="E-mail"><label

for="cbContact1">E-mail</label><br>

<input type="checkbox" name="cbContact2" value="textmsg"><label

for="cbContact1">Text Message</label><br>

<input type="checkbox" name="cbContact3" value="phone"><label

for="cbContact3">Phone Call</label><br>

<input type="checkbox" name="cbContact4" value="tweet"><label

for="cbContact4">Tweet my Twitter handle</label>

</fieldset>

Result:

MODULE - 3

of 60

File Upload

Your user may need to upload files to your server; perhaps they need to upload a resume as a PDF or a

homework assignment as a word document. This can be done with a web form by adding an attribute to

your form element and adding a special input type as a form control.

<!DOCTYPE html>

<html>

<head>



</head>

<body>

<form name="myFileUploadForm" action="fileUploadScript.php" method="post"

enctype="multipart/form-data">

<p>Select your first file:</p>

<input type="file" name="file1"><br><br>

<p>Select your second file:</p>

<input type="file" name="file2"><br>

<p><input type="submit" name="submitButton" value="Upload Now!"></p>

</form>

</body>

</html>

As you can see, we added the attribute enctype with a value of multipart/form-data to the form tag. This

tells our web browser that it will have to do some encoding before submitting the data off to the server.

We used the input type of “file”. This simply gives us controls on the page to select files(s) from the file

system of the visitor’s computer. When the button to browse for or select the file is clicked, you’ll see a

new dialog box open up to let you navigate the local file system to locate and select the file to be

uploaded.

MODULE - 3

of 60

Result:

Form Validation with HTML and CSS

There are two ways to validate form data, using client-side methods and server-side methods. JavaScript

is traditionally used to validate data on the client-side and some type of scripting language (like PHP) is

used on the server-side for validation. With HTML5 and CSS3, we now can do some limited validation

without using JavaScript on the client-side.

Note

You should always use server-side validation, even if you have also used client-side validation methods.

Don’t trust client-side validation methods as they can be manipulated by the end user.

MODULE - 3

of 60

So what exactly do we mean by form validation? We are talking about ensuring that the data entered into

the form and submitted is of the proper format. This could mean checking to ensure required fields are

filled out, that certain data meets a specific format and/length, like zip codes, telephone numbers, email

addresses, etc.

Here is an example of using HTML5 to check for empty entries for required fields:

<input type="text" name="textName" id="textName" required="required">

Result:

The appearance of this validation feature can vary between HTML5 compliant browsers. The appearance

can also be modified with CSS.

Additional Form Controls

HTML5 also has additional form controls that give semantic value and can also do their own data

validation.

Some of these types include:

email

url

tel

MODULE - 3

of 60

date

time

datetime

range

You can learn more about these and other HTML5 form controls at:

http://www.html5rocks.com/en/tutorials/forms/html5forms/

Summary

You have added a few tools to your HTML tool belt and should begin to understand the plethora of

options you have in creating and presenting web content. You know that you should use tables for

structuring and presenting tabular data, and CSS for page layout needs. We’ve learned that it is possible

to add some interactivity with image swaps and image maps and have been exposed to collecting visitor

data with forms. New HTML5 structural and semantic elements provide everyone with additional

capabilities. In the next lecture we will cover some advanced HTML5 functionality focused around

multimedia.

Bibliography

Erack Network. (2008). html-tables. Retrieved December 15, 2012, from

http://www.tizag.com/htmlT/tables.php

HTML5Rocks. (2012). HTML5 Features – Semantics. Retrieved December 15, 2012, from

http://www.html5rocks.com/en/features/semantics

Pilgrim, Mark. (2011). Dive Into HTML5. Retrieved December 15, 2012, from http://diveintohtml5.info

Lecture 7: HTML Part 3

Learning Objectives

http://www.html5rocks.com/en/tutorials/forms/html5forms/

http://www.tizag.com/htmlT/tables.php

http://www.html5rocks.com/en/features/semantics

http://diveintohtml5.info/

MODULE - 3

of 60

By reading this lecture and the textbook, viewing the video tutorials, participating in discussions, and

completing this module's deliverables, you will be able to:

Define multimedia and how it is used on the web

Add video to web pages

Add audio to web pages

Describe various audio and video codecs

Draw graphics on a web page

Introduction

While we have added more content to our HTML pages in the previous lecture, we will move on to more

exciting features. We’ll focus on some of the popular multimedia elements introduced in HTML5 to add

captivating content for our visitors.

Multimedia

The term multimedia can convey different meanings to different people, so we will define it here to ensure

everyone is on the same page.

Multimedia is simply a collection of storage and transmission capabilities to deliver various types of

content in the form of information. Examples can include a combination of visual and audio elements to

include text, audio, images, interactive graphics, video, animation and more.

We have already covered the presentation of text and images in previous lectures. We will now focus on

audio, video, and HTML created graphics in this lecture.

HTML5 helps in several ways to present media content to visitors.

Native Audio and Video

MODULE - 3

of 60

What do we mean by “native” audio and video? It means HTML has built in support for these multimedia

types. There is no need to use object or embed and no need for third-party plugins to present this

content.

We can deliver audio and video files directly from the browser and also manipulate and provide style for

these elements and attributes via CSS.

Let’s start with audio:

Audio

Using an audio element and src attribute, you can reference a location for an audio file. We will also add a

controls attribute to ensure that the browser displays the default control interface for the included audio.

Finally, just in case a visitor does not have a browser that supports HTML5 native audio, we’ll include a

link to download the file to be played locally.

<!DOCTYPE html>

<html>

<head>

<title>Native Audio</title>



body {

margin-top: 50px;

padding-left: 50px;

}

</style>

</head>

<body>

<audio src="audio/sampleSoundFile.ogg" controls>

</audio>

<p>Would you rather download <a href="audio/sampleSoundFile.ogg">this

MODULE - 3

of 60

file</a>?</p>

</body>

</html>

Result (sound plays and is audible):

Video

In addition to native audio support, we can use HTML5 for native video support as well. The video

element shares many of the same attributes as the audio element.

<!DOCTYPE html>

<html>

<head>

<title>Native Video</title>



body {

margin-top: 50px;

padding-left: 50px;

}

MODULE - 3

of 60

</style>

</head>

<body>

<video src="video/sampleVideoFile.ogv" controls>

</video>

<p>Would you rather download <a href="video/sampleVideoFile.ogv">this

file</a>?</p>

</body>

</html>

Result (video and sound plays):

If we wanted to, we could have set attributes for the video element to specify a certain size:

<video src="video/sampleVideoFile.ogv" controls width="320" height="180">

</video>

MODULE - 3

of 60

Result:

Video and Audio Codecs

A codec is technology that is used for compressing and decompressing data. Video and audio codecs

compress/decompress digital video and/or data into different formats that typically strive to keep high

quality and low bit rate. There are hardware and software based codecs.

The codecs we refer to are all software based. Some of the codecs use “lossy” compression methods.

This simply means that during the process of compressing data, some of the data is lost. This may seem

catastrophic, but the algorithms used do their best to find out what data is not needed and still be able to

deliver a high-quality experience.

All browsers do not support all codecs.

Luckily this can be fixed by including multiple file formats to reach a wider audience, this can be done for

both video and audio.

MODULE - 3

of 60

<audio controls>

<source src="audio/sampleSoundFile.ogg">

<source src="audio/sampleSoundFile.mp3">

</audio>

Common audio formats include AAC (.aac), MP3 (.mp3), OggVorbis (.ogg), WAV (.wav), and

WebM(.webm). You should try to include at least the .mp4 and .ogv formats to reach the majority of

users.

.aac – lossy compression. An improvement over MP3, with similar bit rates but much better sound

quality

.mp3 – a popular and patented format that uses lossy compression at a rate of one-tenth of the

original, uncompressed file.

.ogg – an open source format to MP3. Utilizes lossy compression.

.wav – proprietary format that does not use compression

.webm – an open format from Google. Uses the Vorbis audio codec for compression

Common video formats include H.264 (.mp4), OggTheora (.ogv), VP8 (.webm), ASF (.asf), AVI (.avi), and

Flash (.flv).

.mp4 – Uses the H.264 codec that encodes video for a variety of devices and includes high def

.ogv – an open source format for the Theora codec. Lower quality than H.264

.webm – open format from Google. Uses a royalty-free VP8 codec

.asf – proprietary Microsoft format for streaming media

.avi – another proprietary Microsoft format

.flv – Adobe format for delivering video on the web.

These are just the common formats for audio and video. Why so many? The driving factor is intellectual

property and licensing fees.

Other Methods for Audio/Video Support

MODULE - 3

of 60

You can also use an object or embed element to display HTML video and audio. Older HTML versions

used these methods because audio and video was not part of the HTML specification. These elements

rely on the use of plug-ins to be successful.

We won’t cover these older (and clunky) methods, but will show some code samples below:

embed

<embed src="soundFile.mp3" autostart="false" autoplay="false" width="300px"

height="45px"></embed>

object

<object

type="application/x-shockwave-flash"

data="pathtofile"

width="400" height="326">

<param name="movie" value="pathtofile">

<param name="allowFullScreen" value="true">

<param name="allowScriptAccess" value="always">

</object>

HTML5 Canvas

This is a new feature that allows for the creation of two-dimensional drawings. It is like a square shaped

painting canvas. The only difference is that it is represented on a web page. It actually uses JavaScript to

draw the graphics. We’ll cover JavaScript in-depth in the lectures found in module 4.

Here is an example of using the canvas element. We will create a black box and a red circle. You don’t

need to understand all of the JavaScript at this point. This JavaScript heavily relies on the DOM, which is

really just the web browser’s internal representation of a web page. Using JavaScript, you can access and

modify elements on the page and even add new elements! You’ll learn more about this later as well.

MODULE - 3

of 60

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Canvas</title>



body {

margin-top: 50px;

padding-left: 50px;

}

</style>

</head>

<body>

<canvas id="myFirstCanvas" width="500" height="500">

If you are reading this, your browser does not support the HTML5 canvas

element. Sorry!

</canvas>

<script type="text/javascript">

var obj=document.getElementById("myFirstCanvas");

var box=obj.getContext("2d");

var circle=obj.getContext("2d");

box.fillStyle="black";

box.fillRect(0,0,150,75);

circle.fillStyle="red";

circle.beginPath();

circle.arc(200, 100, 100, 0, Math.PI*2, true);

circle.closePath();

MODULE - 3

of 60

circle.fill();

</script>

</body>

</html>

Result:

This site provides excellent coverage of the canvas element, be sure to read through this page and try the

examples:

http://diveintohtml5.info/canvas.html

Summary

You have learned how to easily add video and audio files to your HTML documents. We covered

multimedia and different types of codecs and also presented how HTML5 uses JavaScript and the DOM

to create canvas elements to draw on the screen.


MODULE - 3

of 60

We’ve now finished providing a good overview of HTML5 and CSS3. You will continue to see it used

throughout the remaining lectures, but nothing should be drastically new with these language examples.

We now move on to using the programming/scripting language JavaScript in the next module’s lectures.

Bibliography

Pilgrim, Mark. (2011). Let’s Call it a Draw(ing Surface). Retrieved December 15, 2012, from


Pilgrim, Mark. (2011). Video on the Web. Retrieved December 15, 2012, from

http://diveintohtml5.info/video.html

W3C. (2014). HTML 5: A vocabulatry and associated APIs for HTML and XHTML, W3C Proposed

Recommendation 16 September 2014. Retrieved October 24, 2014 from http://www.w3.org/TR/html5/


http://diveintohtml5.info/video.html

http://www.w3.org/TR/html5/

Module 3.pdf

Documents

Transcript of Module 3.pdf