Class September 23, 2011

1.  Review Class Policy, Course Outline, and upcoming class events

2.  We are continuing to work on our practice HTML files.  You will need 3 things open for class:  your HTML file in Firefox, the class website in Firefox, and your Notepad file in Notepad.

3.  Tables

We will learn today how to create tables in HTML.  Tables are just a way to organize content on your webpage.  The webpage for the McGlynn Middle School library has a good example of a table.  This table happens to have borders but not all tables need to have borders.  Tables are organized with rows and cells (data/content within a row).  The rows are stacked vertically while the cells are aligned horizontally.

Try it:

<table border=”1″>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Now try without borders:

<table>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Now try it with a header for different sections:

<table border=”1″>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

4.  New HTML5 video tag

Check it out- http://www.w3schools.com/html5/tag_video.asp

We learned how to copy and paste code from embedding a video, whether it was iframe code, embed code, or object code.  There is a new video tag in HTML5 that can be used for embedding video on your webpage.  You would do this if you had a video file, for example, an mpeg or flash file, that wasn’t in YouTube or some other video service.  You would need your video file to be in a few different formats to ensure it would play in all browsers.  It’s usually easier to just use a video service like YouTube but this is another way to handle displaying online video.

5.  List of all HTML5 tags

Check out all available HTML tags on this list here:

http://www.w3schools.com/tags/default.asp

You’ll notice some tags you’ve been using, like the <center></center> tag and underline <u></u> tag, won’t be supported in the newest version of HTML.

6.  Next week we’ll review HTML and begin CSS

HTML and CSS work together to tell a web browser such as Firefox or Internet Explorer how your web content should look and how it should be arranged on the webpage.  HTML mainly controls the layout of your content while CSS controls how it looks (color, fonts, etc.).