October 15, 2017
Unknown
A site page design is critical to give better look to your site. It requires extensive investment to outline a site's design with incredible look and feel.
Presently a-days, every cutting edge site are utilizing CSS and JavaScript based structure to concoct responsive and dynamic sites however you can make a decent design utilizing straightforward HTML tables or division labels in blend with other organizing labels. This part will give you couple of cases on the best way to make a basic however working format for your page utilizing unadulterated HTML and its qualities.
HTML Layout - Using Tables
The least difficult and most mainstream method for making designs is utilizing HTML <table> tag. These tables are masterminded in segments and lines, so you can use these lines and sections in the way you like.
Illustration
For instance, the accompanying HTML design illustration is accomplished utilizing a table with 3 lines and 2 sections however the header and footer segment traverses the two segments utilizing the colspan trait −
<!DOCTYPE html> <html> <head> <title>HTML Layout using Tables</title> </head> <body> <table width = "100%" border = "0"> <tr> <td colspan = "2" bgcolor = "#b5dcb3"> <h1>This is Web Page Main title</h1> </td> </tr> <tr valign = "top"> <td bgcolor = "#aaa" width = "50"> <b>Main Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> <td bgcolor = "#eee" width = "100" height = "200"> Technical and Managerial Googletech786 </td> </tr> <tr> <td colspan = "2" bgcolor = "#b5dcb3"> <center> Copyright © 2016 Googletech786.com </center> </td> </tr> </table> </body> </html>
Numerous Columns Layout - Using Tables
You can plan your page to put your web content in different pages. You can keep your substance in center section and you can utilize left segment to utilize menu and right segment can be utilized to put ad or some other stuff. This format will be fundamentally the same as what we have at our site Googletech786.com.
Case
Here is a case to make three section design −
<!DOCTYPE html> <html> <head> <title>Three Column HTML Layout</title> </head> <body> <table width = "100%" border = "0"> <tr valign = "top"> <td bgcolor = "#aaa" width = "20%"> <b>Main Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> <td bgcolor = "#b5dcb3" height = "200" width = "60%"> Technical and Managerial Tutorials </td> <td bgcolor = "#aaa" width = "20%"> <b>Right Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> </tr> <table> </body> </html>
HTML Layouts - Using DIV, SPAN
The <div> component is a piece level component utilized for gathering HTML components. While the <div> tag is a piece level component, the HTML <span> component is utilized for gathering components at an inline level.
Despite the fact that we can accomplish entirely pleasant formats with HTML tables, yet tables weren't generally planned as a design device. Tables are more suited to showing forbidden information.
Note − This illustration influences utilization of Cascading Style To sheet (CSS), so before understanding this case you need a superior comprehension on how CSS functions.
Case
Here we will attempt to accomplish same outcome utilizing <div> follow alongside CSS, whatever you have accomplished utilizing <table> tag in past illustration.
<!DOCTYPE html> <html> <head> <title>HTML Layouts using DIV, SPAN</title> </head> <body> <div style = "width:100%"> <div style = "background-color:#b5dcb3; width:100%"> <h1>This is Web Page Main title</h1> </div> <div style = "background-color:#aaa; height:200px; width:100px; float:left;"> <div><b>Main Menu</b></div> HTML<br /> PHP<br /> PERL... </div> <div style = "background-color:#eee; height:200px; width:350px; float:left;" > <p>Technical and Managerial Tutorials</p> </div> <div style = "background-color:#aaa; height:200px; width:100px; float:right;"> <div><b>Right Menu</b></div> HTML<br /> PHP<br /> PERL... </div> <div style = "background-color:#b5dcb3; clear:both"> <center> Copyright © 2016 Googletech786.com </center> </div> </div> </body> </html>
You can make better format utilizing DIV, SPAN alongside CSS. For more data on CSS, please allude to CSS Tutorial.
0 comments:
Post a Comment