Creating Your Own Web Page Is Easy A Tutorial Part 2

Creating Your Own Web Page Is Easy A Tutorial Part 2



Now, Let's continue with Part 2. We will discuss the​ following here:

Creating tables
Using CSS boxes as​ webpage layout

Here's how:

Creating tables



Tables are very useful in​ the​ presentation of​ data. the​ following are the​ html tags to​ be used to​ create a​ basic table:

Single-column table:

<table width="400" border="1" cellspacing="2" cellpadding="4">
<tr><td>row 1 data</td></tr>
<tr><td>row 2 data</td></tr>
</table>

Type the​ above in​ your mywebpage.html within the​ body tags, save and​ refresh your browser. That's the​ table on the​ web. Referring to​ the​ above html codes, width refers to​ the​ width of​ the​ whole table (you may also use pixel here like "800"), border is​ the​ outside line or​ outline of​ the​ table, cellspacing is​ the​ space between the​ cells, cells are the​ area where the​ data are located, cellpadding is​ the​ space between border and​ cells. You may change the​ values of​ these table attributes or​ properties based on your preference or​ requirement.

Though the​ above table html codes are still working, W3C.org requires the​ table properties or​ attributes be defined in​ the​ style sheets or​ CSS. Using CSS, the​ above table properties could be presented as​ follows:

Within style tags in​ the​ head:
.type1 {
width: 400px;
padding: 4px;
margin: 2px;
}

.border {
border: 1px solid #000;
}

Then, within the​ body tags:

<table class="type1 border">
<tr><td>row 1 data</td></tr>
<tr><td>row 2 data</td></tr>
</table>

Looking at​ the​ codes, "type1" is​ preceded by dot (.), meaning it​ is​ a​ class selector. for​ the​ next type of​ table properties or​ attributes, you may label it​ as​ type2, then type3 and​ so on or​ with other names you prefer. "border" is​ also a​ class selector and​ "border: 1px solid #000" is​ the​ thickness (1px), border type (solid) and​ color (#00f) of​ the​ border. There are more discussions of​ CSS in​ "Creating CSS boxes as​ web page layout" and​ in​ "Using CSS in​ styling your web pages"

If you want to​ try the​ above, then type the​ codes within the​ style and​ body tags as​ noted, save it​ and​ refresh your browser. it​ must be the​ same as​ the​ first one.

Now, let's make a​ 2-column or​ multi-column table:

<table width="400" border="1" cellspacing="2" cellpadding="4">
<tr><td>row 1 data 1</td>
<td>row 1 data 2</td></tr>
<tr><td>row 2 data 1</td>
<td>row 2 data 2</td></tr>
</table>

Type the​ above in​ your mywebpage.html within the​ body tags, save and​ refresh your browser. That's the​ 2-column table on the​ web. to​ add a​ column, just insert <td></td> after </td>. 1 <td></td> is​ one column, 1 <tr></tr> is​ one row and​ 1 <table></table> is​ one table.

Now, lets make a​ table with 1 main heading and​ 3 subheadings:

<table width="400" border="1" cellspacing="2" cellpadding="4">
<tr><td colspan="3">Main Heading</td></tr>
<tr><td>Subheading 1</td>
<td>Subheading 2</td>
<td>Subheading 3</td></tr>
<tr><td>row 1 data 1</td>
<td>row 1 data 2</td>
<td>row 1 data 3</td></tr>
<tr><td>row 2 data 1</td>
<td>row 2 data 2</td>
<td>row 2 data 3</td></tr>
</table>

Type the​ above in​ your mywebpage.html within the​ body tags, save and​ refresh your browser. See? Yes, just use colspan to​ merge the​ columns. to​ merge 2 columns, use colspan="2" and​ for​ 3 columns, use colspan="3" and​ so on.

If you want to​ merge rows, use rowspan instead of​ colspan. See this example:

<table width="400" border="1" cellspacing="2" cellpadding="4">
<tr><td rowspan="2">merge row data</td>
<td>row 1 data 2</td></tr>
<tr><td>row 2 data 2</td></tr>
</table>

Now, type the​ above in​ your mywebpage.html within the​ body tags, save and​ refresh your browser. Now, you see that 2 rows in​ your first column were merged.

Try creating your own table using different values to​ familiarize yourself in​ manipulating tables.

Creating CSS boxes for​ web page layout



Before, tables are being used as​ layout of​ a​ web page. So, the​ header, right bars, left bars, main content areas and​ footer are inside of​ a​ table. This slows down the​ loading of​ the​ page as​ the​ browser will have to​ complete first the​ table before it​ will display the​ content. Your visitor may have already left before your page could be displayed. if​ you prefer to​ use table as​ your layout, you have to​ avoid using big tables. You better use small tables to​ allow the​ browser display your page little by little but faster.

Though table could still be used, W3C requires CSS boxes to​ be used for​ layout instead of​ tables due to​ the​ issue of​ accessibility. CSS boxes load faster than tables. These could be controlled within the​ style sheets that could be within the​ head tags or​ in​ separate CSS file. the​ most critical part in​ css boxes is​ the​ positioning. So, I'll explain to​ you the​ positioning properties of​ these boxes, based on my experience:

position: absolute - You have to​ define the​ x-axis and​ y-axis as​ point of​ reference of​ the​ corner of​ the​ box. x-axis is​ either left or​ right and​ y-axis is​ either top or​ bottom. You have to​ define also the​ width or​ the​ left and​ right margin or​ padding of​ the​ box. the​ box is​ not affected by the​ preceding or​ subsequent boxes. Likewise, the​ boxes preceding or​ following the​ boxes that are positioned as​ absolute are also not affected.

float: left or​ right - You need to​ fix the​ width. You also need to​ select if​ left or​ right. the​ box will lean on the​ side you selected. it​ will lean on the​ box preceding it​ if​ there is​ enough space for​ it. This is​ affected by the​ other boxes except for​ the​ absolutely positioned boxes.

no position or​ position: static or​ fixed - This follows the​ normal flow. This is​ also affected by the​ other boxes except for​ the​ absolutely positioned ones. You need to​ define the​ width or​ the​ left and​ right margin.

Now, see the​ illustration below that will create 5 boxes, namely: headerbox, leftbox, centerbox, rightbox and​ footerbox. These are liquid boxes, which automatically adjust in​ width when the​ display window size of​ the​ computer is​ changed:

<style type="text/css">
body {
text-align: center;
margin: 1px;
}
#headerbox {
width: 100%;
height: 15%;
background-color: #9cf;
border: 1px solid #00f;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

#rightbox {
float: right;
width: 20%;
margin-top: 5px;
text-align: center;
background-color: #cff;
border: 1px solid #00f;
height: 100%;
}
#leftbox {
float: left;
margin-top: 5px;
width: 20%;
text-align: center;
background-color: #cff;
border: 1px solid #00f;
height: 100%;
}

#centerbox {
width: 99%;
margin-top: 5px;
text-align: center;
background-color: #cff;
border: 1px solid #00f;
height: 100%;
}

#footerbox {
width: 100%;
text-align: center;
height: 15%;
vertical-align: middle;
margin-top: 5px;
background-color: #9cf;
border: 1px solid #00f;
}

</style>
</head>
<body>

HEADERBOX content area


LEFTBOX content area


RIGHTBOX content area


CENTERBOX content area


FOOTERBOX content area


</body>

First, you type the​ above html codes to​ you mywebpage.html within the​ head, style and​ body tags as​ noted in​ the​ above. Then, save it​ and​ refresh your browser or​ open the​ file with your browser. Are you seeing the​ headerbox on the​ top, the​ leftbox, rightbox and​ centerbox in​ the​ middle and​ footerbox at​ the​ bottom? Try to​ change the​ width of​ your browser window. See? the​ width of​ the​ boxes are also adjusting and​ that is​ excellent as​ your page will auto-adjust depending on the​ browser window size of​ your visitors! That is​ because I used %s in​ defining the​ width of​ boxes.

Now, let me explain the​ above codes for​ creating boxes as​ your layout.

headerbox - preceded with #, meaning it​ is​ an​ id selector and​ could be used only once per page; float: left means the​ box will lean on the​ left if​ fit; width: 100% means the​ box is​ 100% of​ the​ browser window and​ that is​ the​ reason why it​ is​ liquid; height: 15% means the​ box is​ 15% of​ the​ browser window; text-align: center is​ the​ alignment of​ the​ objects or​ characters inside the​ box; background-color: #9cf is​ the​ color of​ the​ space within the​ box; border: 1px solid #00f is​ same as​ discussed in​ Creating Tables.

rightbox - same explanations in​ the​ above except for​ the​ float: right which means the​ box will lean on the​ right and​ margin-top: 5px is​ the​ distance from the​ bottom line of​ the​ box above (headerbox).

leftbox - same explanations in​ the​ above.

centerbox - same explanations in​ the​ above except that it​ has no position defined, meaning it​ will follow the​ normal. it​ will fit itself based on the​ available space. This will be its 100% or​ full size. More than this limit will distort the​ box alignment.

footerbox - same explanations in​ the​ above except for​ the​ vertical-align: middle, which means that the​ objects or​ characters inside the​ box will be vertically-aligned in​ the​ middle.

Try changing the​ values of​ the​ values of​ the​ css boxes above, then save. Refresh your browser and​ familiarize yourself with the​ effect of​ each change. Please note, however that there may be minor differences if​ the​ above css boxes are displayed with browsers other than internet explorer like firefox and​ opera.

Continue with Part 3.




Related Articles:




Powered by Blogger.