Creating HTML Documents

Creating HTML documents Tables1. Open, in the text editor, the file that we created in the last class. Change the date displayed.<html> <head> <title> Your name’s web page. </title> </head><body bgcolor=yellow text = blue> <H1> <center>Type your name.</center></H1> <center>Web page modified on (current date). </center> <blockquote> Now write a short paragraph about yourself. Include your name, academic major and what grade levels you want to be teaching. </blockquote> <blockquote>Write a second paragraph about your outside interests. </blockquote> <center><hr width=75% size = 4></center> How to contact me Type your address. Type your phone number. </body> </html>2. Tables provide a means for making your web pages look neater when presented either text, pictures or even links. In this lesson, we will be making a table that eventually will be for links to other pages on your web site. We will put the table after the second paragraph about yourself, but before the horizontal line. <blockquote>Write a second paragraph about your outside interests. </blockquote> <table> </table> <center><hr width=75%></center>By itself, these 2 tags do not do a lot. But, they are needed to tell the browser that you are about to make a table.3. Every table consists of rows and columns, just the table feature in Word. The intersection of each row and column is a cell. We will be making a table that has links needed for Project 2.Our table will consist of 4 rows and 2 columns. The general set up would be:Row  cell cell Row  cell cell Row  cell cell ID-2950 Mrs. Jeanne Osborne Row  cell cellEach row begins with <tr> and ends with </tr>. Each cell on the row begins with <td> and ends with </td>. Type in the following:<table> <tr> <td> NJ Core Curriculum Course Content Standards </td> <td> Technology Standards </td> </tr> <tr> <td> How I will incorporate technology</td> <td>State Educational websites</td> </tr> <tr> <td>Professional organizations</td> <td>Education courses completed</td> </tr> </table> . Note: You will be creating pages for each of the items in the table. I would suggest that the first page that you do will the one about the education classes that you have completed. Include in that page, the course number, title, semester taken, and grade earned. For current classes (like this one), indicate that it is in progress. Present the data in a table. In the last HTML lesson, you will learn how to link from the home page to the new page.View the table on your browser. Note, while it is organized, it can use some improvement.4. Center the table. Do you remember the tag? Put it before and after the tags for table.5. Now, we will add a border to the table, and, if desired a color.<table border=7 bordercolor=black>If you are using the table to format the page, borders may not be necessary. If they detract from the overall appearance, then don’t use them.6. Did you notice how the words were right close to the border? Cell padding adds spaces between the border and the words. <table border=7 bordercolor=black cellpadding=5>7. To increase the size of the border between cells, use cell spacing.<table border=7 bordercolor=black cellpadding=5 cellspacing = 3>8. If you want to, you can set the cell width. The cell width is written as a percent of the screen. The percent is automatically equally divided among all of the cells. Typically, the contents of a cell will determine the cell width, but you may want to make a uniform cell width for appearances. You could 2 ID-2950 Mrs. Jeanne Osborne also set the width as a number of pixels. If you use pixels, use a maximum of 600 so that all browsers can view the table.<table border=7 bordercolor=black cellpadding=5 cellspacing = 3 width = 30%>Each cell is 15% of the screen since we had 2 columns.<table border=7 bordercolor=black cellpadding=5 cellspacing = 3 width = 60%>Each cell is 30% of the screen.If you want to set the cell width for individual cells, you can put the width attribute in the <td> tag. All cells in the same column will have the same width. Be sure that the total does not exceed 100% or 600 pixels. This would be useful if you want the different columns to have different widths.Cell heights could be also changed, but not all browsers will recognize this. You could add the attribute height = # to the table tag, where the # is either the number of pixels OR a percent.9. Adding column labels – you should do this for the web page that you are going to create for the education classes that you have taken. To do this, after the <tr> tag for the first row, use <th> for the heading for each cell. Close each cell with </th>Example for the webpage you are creating on your education classes completed: <table> <tr> <th>Course number</th> <th>Name of course</th> <th>Semester taken</th> <th>Grade</th> </tr> Continue with the rest of the table, using <td> and </td> tags.10. If you want to create newspaper style type columns, use <td valign=top>. Then type your column text. End with </td>. Repeat for each column. If you wanted to align at the bottom, use bottom, instead of top. If you don’t use align, the text will be centered within the cells.11. If you want to color the cells in your table, you can. You can do it for the entire table within the <table> tag, for the entire row within the <tr> tag or for individual cells within the <td> or <th> tags. You can also change font colors, if desired.12. Cells within a table can have a variety of contents – words, graphics, links to other web pages or web sites, even another table is possible.3

Creating HTML Documents

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support