Introduction to the Internet-lesson 5-communication on the Internet-Emails
Lesson 5
Learning Outcomes
This lesson will provide you with the opportunity to investigate basic communication on the Internet, namely Email. We will also learn another new and very important HTML command: the table tag. It is expected that you will use previously learned HTML commands and practices and that the new commands will build towards subsequent lessons in HTML.
When you have completed this lesson, you should be able to:
Learn how email works.
Understand basic email features and functions.
Learn about viruses, antivirus software, and spam.
Create and maintain contacts, and use them to address messages.
Create a simple Web page using the table tags. (HTML Practice Exercise #5).
Textbook Readings
Please keep in mind the preceding intended learning outcomes while reading the assigned chapters from The Internet, 9th Edition, Schneider/Evans, Course Technology, Cengage Learning.
Tutorial 2: Basic Communication on the Internet: Email
SAMS Reading
This reading will prepare you for the HTML Practice exercises that accompany the first eight lessons and Assignment #5, your Web site, by explaining the basic concepts and tools that are needed to create Web pages.
OLD BOOK
HOUR 7: Using Tables to Display Information
NEW BOOK
Chapter 6: Working with Tables
HTML Practice Exercise #5
Since Lesson 1 you have been expanding your knowledge of HTML codes through a series of HTML practice exercises. These exercises, used in conjunction with the assignments, will culminate in a complete Web site.
In this exercise, you will learn how to create tables in a Web page. You could use the Web page that you’ve been working on in previous lessons if you wish.
How to Make Tables in HTML
The parts of the table:
The main <table> tag itself.
The cells – what actually shows up in the table. You can make cells of different sizes, and aligning the text in the cell.
A. The <table> tag:
All tables must begin and end with the <table> and </table> tags. The <table> tag can have some extra attributes added to it, much like the main <body> tag of your document. Some of these attributes should always be used. Here they are:
border – this attribute is used to specify how wide the border surrounding your table should be. It should look like this:
<table border=”#”>
Where the # is the width of the border you want.
If you do not want a visible border, you should set your border to ” 0″.
cellspacing – This attribute specifies the horizontal and vertical space, in pixels, left between individual cells in a table (the “thickness” of the dividing lines). The default value is 1.
cellpadding – This attribute sets how much space there is between the edges of the table, and anything in your table. This attribute is optional – you don’t need it! To use it, it would look like this:
<table border=”1″ cellpadding=”size” cellspacing=”size”>
Where size is any number from 0 to 100 (anything more than that is silly).
Optional attributes:
style = “width:width” – the width of the table on the page, either in exact pixels values or as a percentage of the page width
style = “height:height” – the height of the table on the page, either in exact pixel values or as a percentage of the page height
style = “background-color:color” – background color of the table and individual cells that don’t already have a background color
B. The cells themselves:
The main part of a table is the row – all cells must be inside of a row. The row tag is simple – at the beginning of your row, you place a<tr> tag, and at the end, you place a </tr> tag (TR stands for Table Row). Then, inside of each row, you place your cells for that row. The tag to begin/end a cell is <td> or <th> – the difference between them is that the text inside of a <td> cell is normal, and the text inside of a <th> cell is bold. The <th> command should only be used for a table heading (th). To bold cell contents, simply use the <b></b> commands. A sample table with a <th> cell, and a <td> in it would look like this:
<table>
<tr>
<th> Heading! </th>
<td> Normal Text! </td>
</tr>
</table>
And a table with more than one “row” might look like this:
<table>
<tr>
<th> Heading One </th><th> Heading Two</th>
</tr><tr>
<td> text one </td><td> text two</td>
</tr>
</table>
C. Advanced features:
colspan: this optional attribute for cells allows you to make one cell which stretches over two or more cells in your table. It makes your cells stretch across multiple columns, making it wider. It is used like this:
<table>
<tr>
<td colspan=”2″>two wide!!!</td>
<td>only one</td>
</tr><tr>
<td>Cell one</td>
<td>Cell two</td>
<td>Cell three</td>
</tr>
</table>
rowspan: Much like colspan, this optional attribute for cell allows you to make one cell which stretches over two or more cells in your table. While colspan makes your cells wider than normal, rowspan makes them taller. It is used like this:
<table>
<tr>
<td rowspan=”2″>two high!!!</td>
<td>Cell one</td>
</tr><tr>
<td>Cell two</td>
</tr><tr>
<td>only one</td>
<td>Cell three</td>
</tr>
</table>
To Do
Try the following coding and once you have it working try several of the more advanced features discussed above. When you are comfortable creating and using tables, place your “best” work in your final Web project (Assignment #5).
<table>
<tr>
<th>Column 1 Heading</th> <th>Column 2 Heading</th>
</tr>
<tr>
<td>Column 1, Row 1 Data</td> <td>Column 2, Row 1 Data</td>
</tr>
<tr>
<td>Column 1, Row 2 Data</td> <td>Column 2, Row 2 Data</td>
</tr>
</table>
Next Step
If you can meet the objectives stated at the beginning of Lesson 5, you are ready to proceed to the next lesson. Keep in mind the weekly schedule recommended in the course syllabus.
Please post to the Discussion area of this course Web site any questions or comments related to this lesson. Only emergency and private messages should be sent through the E-mail Instructor component of the site.
Assignment
Please visit the Assignments portion of the course Web site for details on Assignment #4 and Assignment #5.
Leave a reply