• About
  • Contact
  • Home
  • Privacy Policy
  • Terms & Conditions
BuyungAfrianto.com - Financial & Business Blog
No Result
View All Result
No Result
View All Result
BuyungAfrianto.com - Financial & Business Blog
No Result
View All Result
Home Uncategorized

Making Your Own Web Page is Easy – A Tutorial (Part 2)

Buyung Afrianto by Buyung Afrianto
May 5, 2020
in Uncategorized
28 1
0
Create a Web Page Tutorial_
59
SHARES
160
VIEWS
ShareTweetPinChatPostBlog

Presently, Let’s proceed with Part 2. We will talk about the accompanying here. Creating tables. Utilizing CSS boxes as webpage layout. Here’s how :

#1. Creating Tables


Tables are extremely valuable in the presentation of data. Coming up next are the html tags to be utilized to create a basic table. Single-segment 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 inside the body tags, save and revive your program. That’s the table on the web. Alluding to the above html codes, width alludes to the width of the entire table (you may also utilize pixel here like “800”), fringe is the outside line or layout of the table, cellspacing is the space between the phones, cells are where the data are located, cellpadding is the space among outskirt and cells.

You may change the values of these table attributes or properties based on your inclination or necessity. In spite of the fact that the above table html codes are as yet working, W3C.org requires the table properties or attributes be characterized in the templates or CSS. Utilizing CSS, the above table properties could be displayed as pursues. Inside style tags in the head:

.type1 {
width: 400px;
padding: 4px;
margin: 2px;
}

.outskirt {
outskirt: 1px strong #000;
}

At that point, inside the body tags:

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

Taking a gander at the codes, “type1” is gone before by spot (.), meaning it is a class selector. For the following kind of table properties or attributes, you may label it as type2, at that point type3 and so on or with different names you like. “fringe” is also a class selector and “outskirt: 1px strong #000” is the thickness (1px), fringe type (strong) and shading (#00f) of the fringe.

There are more talks of CSS in “Creating CSS boxes as web page layout” and in “Utilizing CSS in styling your web pages“. In the event that you want to attempt the above, at that point type the codes inside the style and body tags as noted, save it and invigorate your program. It must be the same as the first. Presently, we should make a 2-section or multi-segment 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 inside the body tags, save and invigorate your program. That’s the 2-segment table on the web. To add a section, simply embed <td></td> after </td>. 1 <td></td> is one section, 1 <tr></tr> is one line and 1 <table></table> is one table. Presently, 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 inside the body tags, save and revive your program. Isn’t it obvious? Indeed, simply use colspan to consolidate the segments. To blend 2 sections, use colspan=”2″ and for 3 segments, use colspan=”3″ and so on. On the off chance that you want to union columns, use rowspan instead of colspan. See this example :

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

Presently, type the above in your mywebpage.html inside the body tags, save and revive your program. Presently, you see that 2 pushes in your first section were consolidated. Have a go at creating your own table utilizing various values to familiarize yourself in manipulating tables.

#2. Creating CSS Boxes for Web Page Layout


Previously, tables are being utilized as layout of a web page. In this way, the header, right bars, left bars, main substance areas and footer are within a table. This hinders the loading of the page as the program should finish first the table before it will display the substance.

Your visitor may have already left before your page could be displayed. In the event that you want to utilize table as your layout, you have to avoid utilizing huge tables. You better utilize small tables to allow the program display your page gradually however faster.

Despite the fact that table could at present be utilized, W3C requires CSS boxes to be utilized for layout instead of tables because of the issue of accessibility. CSS boxes load faster than tables. These could be controlled inside the templates that could be inside the head tags or in separate CSS record.

The most critical part in css boxes is the situating. Along these lines, I’ll explain to you the situating properties of these crates, based on my experience:

Position : Absolute  – You have to characterize the x-axis and y-axis as perspective of the edge of the crate. x-axis is either left or right and y-axis is either top or bottom. You have to characterize also the width or the left and right margin or padding of the crate.

The case isn’t affected by the former or ensuing boxes. In like manner, the crates going before or following the containers that are situated as absolute are also not affected. float: left or right – You have to fix the width. You also need to choose assuming left or right.

The case will lean as an afterthought you chose. It will lean on the case going before it if there is sufficient space for it. This is affected by the different boxes aside from the absolutely situated boxes.

No Position or Position : Static or Fixed – This pursues the normal stream. This is also affected by the different boxes aside from the absolutely situated ones. You have to characterize the width or the left and right margin. Presently, see the illustration beneath that will create 5 boxes, namely: headerbox, leftbox, centerbox, rightbox and footerbox. These are fluid boxes, which automatically adjust in width when the display window size of the PC is changed :

<style type=”text/css”>
body {
content align: focus;
margin: 1px;
}

#headerbox {
width: 100%;
stature: 15%;
background-shading: #9cf;
fringe: 1px strong #00f;
padding: 0px;
margin: 0px;
}

#rightbox {
float: right;
width: 20%;
margin-top: 5px;
content align: focus;
background-shading: #cff;
fringe: 1px strong #00f;
stature: 100%;
}

#leftbox {
float: left;
margin-top: 5px;
width: 20%;
content align: focus;
background-shading: #cff;
fringe: 1px strong #00f;
stature: 100%;
}

#centerbox {
width: 99%;
margin-top: 5px;
content align: focus;
background-shading: #cff;
outskirt: 1px strong #00f;
tallness: 100%;
}

#footerbox {
width: 100%;
content align: focus;
tallness: 15%;
vertical-align: center;
margin-top: 5px;
background-shading: #9cf;
outskirt: 1px strong #00f;
}

</style>
</head>
<body>
HEADERBOX content area
LEFTBOX content area
RIGHTBOX content area
CENTERBOX content area
FOOTERBOX content area
</body>

Initially, you type the above html codes to you mywebpage.html inside the head, style and body tags as noted in the above. At that point, save it and invigorate your program or open the document with your program. Are you seeing the headerbox on the top, the leftbox, rightbox and centerbox in the center and footerbox at the bottom?

Endeavor to change the width of your program window. Could it be any more obvious? The width of the crates are also adjusting and that is phenomenal as your page will auto-adjust contingent upon the program window size of your visitors! That is because I utilized %s in characterizing the width of boxes.

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

headerbox

– went before with #, meaning it is an id selector and could be utilized just once per page; float: left means the case will lean on the left whenever fit; width: 100% means the container is 100% of the program window and that is the reason why it is fluid; stature: 15% means the case is 15% of the program window; content align: focus is the alignment of the articles or characters inside the case; background-shading: #9cf is the shade of the space inside the crate; fringe: 1px strong #00f is same as talked about in Creating Tables.

rightbox

– same explanations in the above aside from the float: right which means the case will lean on the privilege and margin-top: 5px is the distance from the bottom line of the case above (headerbox).

leftbox

– same explanations in the above.

centerbox

– same explanations in the above with the exception of that it has no position characterized, meaning it will pursue the normal. It will fit itself based on the available space. This will be its 100% or full size. More than this point of confinement will distort the crate alignment.

footerbox

– same explanations in the above with the exception of the vertical-align: center, which means that the articles or characters inside the container will be vertically-aligned in the center.

Take a stab at changing the values of the values of the css boxes above, at that point save. Revive your program and familiarize yourself with the impact of each change. Please note, however that there may be minor contrasts if the above css boxes are displayed with programs other than web traveler like firefox and opera

Tags: 1px strongbody tagscreating a web pagecss boxesfeaturedgt rowhow to create web pagehow to design web pagehow to make web pagelt divlt tablemake web pageweb pageweb page makingwebsite building
Previous Post

Making Your Own Web Page is Easy – A Tutorial (Part 1)

Next Post

Making Your Own Web Page is Easy – A Tutorial (Part 3)

Next Post
Create a Web Page Tutorial_

Making Your Own Web Page is Easy - A Tutorial (Part 3)

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

JOIN 5.768 OTHERS & GET MORE STUFF LIKE THIS

We'd like to send you notifications for the latest blog updates for free everyday.

Popular Posts

Franchise Business Names

10 Franchise Business Names That Can be Used as Inspiration

January 18, 2021
Mate Home Business Support

3 Easy Ways to Get Support from a Mate to Grow Your Home Business

January 15, 2021
Blogs and Business Sales

Mutualism Symbiosis Between Blogs and Business Sales

January 13, 2021
Cake Decorating Business

Profitable Potential of The Cake Decorating Business

January 11, 2021

ADVERTISEMENT

BuyungAfrianto.com – Financial & Business Blog

Financial & Business Blog

A daily blog site that presents the latest news around the world to business, consumer, economics, finance, investment & management. Check our landing page for details.

Recent Posts

  • 10 Franchise Business Names That Can be Used as Inspiration
  • 3 Easy Ways to Get Support from a Mate to Grow Your Home Business
  • Mutualism Symbiosis Between Blogs and Business Sales
  • Profitable Potential of The Cake Decorating Business

Recent Comments

  • How to use Mystery Shopping to Improve Your Business? on 9 Business War Principles You Must Have to Succeed
  • Iranidawakhana on 5 Ways & Places Where Business Funding Will Go
  • About
  • Contact
  • Home
  • Privacy Policy
  • Terms & Conditions

© 2021 JNews - Premium WordPress news & magazine theme by Jegtheme.

No Result
View All Result
  • About
  • Contact
  • Home
  • Privacy Policy
  • Terms & Conditions

© 2021 JNews - Premium WordPress news & magazine theme by Jegtheme.

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In