HTML Layouts | 99codes

HTML Layouts


A site page design is critical to give better look to your site. It requires impressive investment to plan a site's format with extraordinary look and feel.

Presently a-days, every advanced site are utilizing CSS and JavaScript based structure to think of 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 section will give you couple of models on the best way to make a straightforward however working format for your website page utilizing unadulterated HTML and its traits.

HTML Layout - Using Tables


The least complex and most famous method for making formats is utilizing HTML <table> tag. These tables are organized in sections and lines, so you can use these lines and segments in the manner you like.

Example -

For instance, the accompanying HTML design precedent is accomplished utilizing a table with 3 lines and 2 segments however the header and footer segment traverses the two sections utilizing the colspan characteristic −

 

Following Result -


Html Layouts

Different Columns Layout - Using Tables


You can structure your site 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 promotion or some other stuff. This design will be fundamentally the same as what we have at our site tutorialspoint.com.

Example -


Here is a guide to make three segment design −

 

Following Result -


html layouts

HTML Layouts - Using DIV, SPAN


The <div> component is a square dimension component utilized for gathering HTML components. While the <div> tag is a square dimension component, the HTML <span> component is utilized for gathering components at an inline level.

In spite of the fact that we can accomplish entirely decent formats with HTML tables, yet tables weren't generally structured as a design device. Tables are increasingly fit to introducing unthinkable information.

Note − This model utilizes Cascading Style Sheet (CSS), so before understanding this precedent you need a superior comprehension on how CSS functions.

Example -


Here we will endeavor to accomplish same outcome utilizing <div> follow alongside CSS, whatever you have accomplished utilizing <table> tag in past model.



Following Result -


html layout



















HTML Layouts | 99codes HTML Layouts | 99codes Reviewed by Arup Roy on May 19, 2019 Rating: 5

No comments:

Powered by Blogger.