|
In the previous post we customized a table to create our expected webpage. Now we will add some more codes and texts to the existing table so that it looks like a real webpage. At the end of this project, we will create a full functional webpage. Later, we will make a six webpages and we will link them with one another.
There will be the Home Page, Tips&Tricks Page, Tutorials Page, Download Page, About Us Page and Contact Us page. There will be also a news feed, a sidebar and a footer. We will also add Title Text or Banner Image and Website Description. All the necessary contents will be into the main section. We may show any ad or another sidebar menu or any message in the sidebar. Objectives -to Learn to customize a table -to Learn to customize a single cell -to Learn how to use attributes with tags -to Learn to customize an entire row using attribute for <tr> tag -to Learn how to use background color for the cells of entire row with a single attribute -to Learn how to use a table to create an attractive webpage -to Know how to add attractive menus by customizing cells |
| C1R1&C2R1 | C3R1+C4R1+C5R1+C6R1 | ||||
| C1R2 | C2R2 | C3R2 | C4R2 | C5R2 | C6R2 |
| C1R3+C2R3+C3R3+C4R3+C5R3+C6R3 | |||||
| C1R4+C2R4+C3R4+C4R4+C5R4 | C6R4 | ||||
| C1R5+C2R5+C3R5+C4R5+C5R5+C6R5 | |||||
The above table is the table we created in the previous post. Now we will change the following texts...
C1R1&C2R1 = iDhali
C3R1+C4R1+C5R1+C6R1 = Description
C1R2 = Home
C2R2 = Tips&Tricks
C3R2 = Tutorials
C4R2 = Download
C5R2 = About Us
C6R2 = Contact Us
C6R2 = Contact Us
C1R3+C2R3+C3R3+C4R3+C5R3+C6R3 = News Feed
C1R4+C2R4+C3R4+C4R4+C5R4 = Main Body
C6R4 = Sidebar
C1R5+C2R5+C3R5+C4R5+C5R5+C6R5 = Copyright Info
So the new table will look like...
| iDhali | Description | ||||
| Home | Tips&Tricks | Tutorials | Download | About Us | Contact Us |
| News Feed | |||||
| Main Body | Sidebar | ||||
| Copyright Info | |||||
The codes for the above table is given below...
<table border="1" width="100%" align="center">
<tbody>
<tr>
<td colspan="2">iDhali</td><td colspan="4">Description</td>
</tr>
<tr>
<td>Home</td><td>Tips&Tricks</td><td>Tutorials</td><td>Download</td><td>About Us</td><td>Contact Us</td>
</tr>
<tr>
<td colspan="6">News Feed</td>
</tr>
<tr>
<td colspan="5">Main Body</td><td>Sidebar</td>
</tr>
<tr>
<td colspan="6">Copyright Info</td>
</tr>
</tbody>
</table>
Now we will customize the table once again for the table given below.
| iDhali | Description | ||||
| Home | Tips&Tricks | Tutorials | Download | About Us | Contact Us |
| News Feed | |||||
| Main Body | Sidebar | ||||
| Copyright Info | |||||
The codes for the above table is given below. Look at the codes, there you will found some codes marked in red color. I have added these codes to change the table as shown above. Description about the newly added codes are given below the codes.
<table border="1" width="100%" align="center">
<tbody>
<tr height="150px">
<td colspan="2" align="center" width="30%"><font size="72" color="0b5394">iDhali.com</font></td><td colspan="4">Description</td>
</tr>
<tr bgcolor="0b5394" align="center" style="color: ffffff;">
<td>Home</td><td>Tips&Tricks</td><td>Tutorials</td><td>Download</td><td>About Us</td><td>Contact Us</td>
</tr>
<tr>
<td colspan="6">News Feed</td>
</tr>
<tr>
<td colspan="5">Main Body</td><td>Sidebar</td>
</tr>
<tr>
<td colspan="6">Copyright Info</td>
</tr>
</tbody>
</table>
<tr height="150px">
I have added height="150px" attribute to the tag <tr>, so that the height of the total row will be 150px.
align="center"
This attribute is added with the <td> tag to align the text in center position of the cell.
width="30%"
The above attribute is added to the <td> tag to define 30% width for the first two cells.
<font size="72" color="0b5394"> and </font>
The above font tag is used to customize the font. The attribute size="72" is to define the font size 72 and color="0b5394" attribute is added to define a color.
<tr bgcolor="0b5394" align="center" style="color: ffffff;">
The attribute bgcolor="0b5394" is added to set a background color for the every cell of the row. align="center" attribute is used to align the text of all the cells into center point and the attribute style="color: ffffff;" is used to define a color for the texts of the entire cells of the row.
A very few steps you need to follow to create your first webpage. Read the next post to learn to customize the rest of the page. Read the previous posts if you miss them.
| << Prev | Next >> |
No comments:
Post a Comment