Create your own website is easy – A tutorial (Part 2)
Posted by adminMar 14
Now, continue with Part 2 We discuss here the following: Creation of tables and boxes using CSS as the layout of home.
Here’s how:
Creating Tables
The tables are very useful in data presentation. The following HTML tags will be used to create a simple table:
Single column table:
Â? Table width = “400″ border = “1″ cellspacing = “2″ cellpadding = “4″>
Â? Tra? Â? Tda? Line 1 data? / ADD? Â? / Tra?
Â? Tra? Â? Tda? Line 2 data? / ADD? Â? / Tra?
Â? / TableA?
Enter the mywebpage top of your file. HTML tags in the body, store and update your browser. This is the table on the net. From the HTML code above, which refers to the width of the entire table (you can even pixels, as “800″), telephone line or boundary is the schema of the table space is cellspacing between cells are the cells of the zone in which these data are cellpadding is the space between frames and cells. You can use the values of this array of attributes or properties as desired or required.
Although the table above HTML codes are still active, http://W3C. org, the table properties or attributes in CSS or should be defined. With CSS, the above characteristics of the table can be represented as follows:
In a style tag in the head
. Type1 (
width: 400px;
padding: 4px;
margin: 2px;
)
. Limit (
border: 1px solid # 000;
)
Then in the body tags:
Â? Table class = “border type1″ â?
Â? Tra? Â? Tda? Line 1 data? / ADD? Â? / Tra?
Â? Tra? Â? Tda? Line 2 data? / ADD? Â? / Tra?
Â? / TableA?
(Looking at the codes “Type 1″ by the previous paragraph.) Either he is a class selector. For the next type of table properties or attributes, you can label type2, type3, and so on, or with other names that you prefer. “Limit” 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 discussions about CSS in “boxes CSS Design and Layout Web” and “Use CSS to design your web pages”
When you receive the above, then enter the code in the style and body tags to try, as mentioned, save and refresh your browser. It must be the same as the first.
Now we want a 2-column or multi-column table:
Â? Table width = “400″ border = “1″ cellspacing = “2″ cellpadding = “4″ â?
Â? Tra? Â? Tda? Line 1 Data 1Â? / ADD?
Â? Tda? Line 1 Data 2A? / ADD? Â? / Tra?
Â? Tra? Â? Tda? Line 2 data 1Â? / ADD?
Â? Tda? Line 2 data 2a? / ADD? Â? / Tra?
Â? / TableA?
Enter the mywebpage top of your file. HTML tags in the body, store and update your browser. This is the 2-column table on the net. In a column, you would add? Add TDA? Â? / ADD? after? / ADD?. 1 Â? Tda? Â? / ADD? is a column, 1 A? tra? Â? / Tra? is a line and 1 A? table? Â? / TableA? is a table.
Now, can create a table with 1 main and 3 sub-components:
Â? Table width = “400″ border = “1″ cellspacing = “2″ cellpadding = “4″ â?
Â? Tra? Â? Td colspan = “3″ â? Main heading? / ADD? Â? / Tra?
Â? Tra? Â? Tda? Category 1a? / ADD?
Â? Tda? Section 2A? / ADD?
Â? Tda? Section 3a? / ADD? Â? / Tra?
Â? Tra? Â? Tda? Line 1 Data 1Â? / ADD?
Â? Tda? Line 1 Data 2A? / ADD?
Â? Tda? Line 1 Data 3A? / ADD? Â? / Tra?
Â? Tra? Â? Tda? Line 2 data 1Â? / ADD?
Â? Tda? Line 2 data 2a? / ADD?
Â? Tda? Line 2 data 3A? / ADD? Â? / Tra?
Â? / TableA?
Enter the mywebpage top of your file. HTML tags in the body, store and update your browser. You see? Yes, you can use colspan to merge columns. To use 2 columns colspan = “2 Merge” and 3 columns, use the colspan = “3″ and so on.
When you merge rows, rowspan colspan used instead. Consider this example:
Â? Table width = “400″ border = “1″ cellspacing = “2″ cellpadding = “4″ â?
Â? Tra? Â? Td rowspan = “2″ â? Merge data line? / ADD?
Â? Tda? Line 1 Data 2A? / ADD? Â? / Tra?
Â? Tra? Â? Tda? Line 2 data 2a? / ADD? Â? / Tra?
Â? / TableA?
Enter now at the top of your mywebpage. HTML tags in the body, store and update your browser. Now you see that 2 lines were merged in the first column.
Tip: Create your own table with different values to become familiar with the handling of tables.
Creating CSS-top boxes for Web layouts
Before tables by submitting a Web page is to be used. Thus, the top right-hand bars, bars on the left, main content areas and footer in a table. This slows the page load, as the browser, first, the picture is complete before displaying the content. Your visitors may have left before your page appears. If you want to use the table as a layout, you should avoid, with large tables. They make better use of small tables, so the browser displays your site gradually, but faster.
Although the table may still be used, requires W3C CSS boxes instead of tables for layout, are used on the issue of accessibility. Boxes CSS loads faster than tables. These could be controlled in the style sheets that could be in the head tags or in a separate CSS file. The most important part of boxing is in CSS positioning. Then I’ll tell you, the positioning properties of these boxes on my experience:
position: absolute – you must set the x-axis and Y axis reference point of the angle of the box. x axis is left or right and Y axis is either up or down. They also set the width or the left edge and right spacing of the box. The box is not affected by the preceding or following fields. Similarly, the fields before or after the boxes are identified as being absolutely positioned, are not affected.
float: left or right – you have the correct width. You must also choose whether the left or right. The box will sit on the side selected. It is based on the ground before him, if there is enough room for them. It is influenced by other areas with the exception of absolutely positioned boxes.
No position or function: static or fixed equal – this flow of normal. This is also supported by the other fields are affected with the exception of absolute position. You must set the width or the left and right margins.
Now you see the figure below, the 5 cases, namely: headerbox, leftbox, centerbox provide maximum investment rating and footerbox. These are boxes of liquid, which are automatically in width if the display is changed window size of the computer:
Â? 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?
Â? Bodia?
Â? Div id = “headerbox” Â? HEADERBOX Content Area? / Diva?
Â? Div id = “leftbox” Â? LEFTBOX Content Area? / Diva?
Â? Div id = “least corrupt” â? RIGHTBOX Content Area? / Diva?
Â? Div id = “centerbox” Â? CENTERBOX Content Area? / Diva?
Â? Div id = “footerbox” Â? FOOTERBOX Content Area? / Diva?
Â? / Bodia?
First you give the HTML code above you mywebpage. html in the head, style and body tags, as in the foregoing. Then, save and refresh your browser or open the file with your browser. Do you see headerbox on top, leftbox, centerbox and least corrupt country in the middle and footerbox at the end? Try changing the width of the browser window. You see? The width of the field are also fit and if your site will be automatically assigned based on the parameters of the size of your browser window participants! Because I% s is used to determine the width of the boxes.
Well, let me explain the code above for the manufacture of boxes as your layout.
headerbox – preceded by #, ie there is an identity selector, and could be used once per page; float: left, field is on the left side when right; width: 100% means that the field is 100% of the browser window and therefore it is liquid, height: 15% means that the field is 15% of the browser window; text-align: center is the orientation of objects or characters in a box, and there is background-color: # 9cf color space inside the box; border: 1px solid # 00f is also in the creation of equality.
The least corrupt country – the same statements as above, except for the float: right, which is the right box and margin-top: 5px, the distance between the bottom row of the box above (headerbox) thin.
leftbox – even in the above statements.
centerbox – even in the statements above, except that it is not defined position, ie it will follow normal. It can be installed on the space available. This corresponds to 100% or actual size. Over this limit to distort the field orientation.
footerbox – align themselves in the previous statements, except vertical: in the center, which means that objects or characters in the box aligned vertically in the middle.
Try to get the values from the values of CSS boxes in front, then click Save. Upgrade your browser and familiarize yourself with the effect of any change. Please note, however, there May be slight differences, if the above boxes are displayed with CSS browsers other than Internet Explorer, Firefox and Opera.
Take part 3
Related posts:
No comments