The Home-Page Structure Of Website


The Home-Page Structure of website

The Home-Page Structure

Try to visualize your pages as regions of content, as opposed to rows
and columns, and you’ll find it much easier to develop pages that not
only conform to standards but are also much more flexible—you want
to be able to switch out your style sheets and completely change the
layout of the page.

For Foodbox, we want all the content for our sidebar to be in its own
region, and we want all the content for our main area to be in its own
region. We’re going to do the same thing we did when we created our
mock-up—divide the page up into sections.

You can divide your mock-up into four basic regions:
1. header
2. sidebar
3. main
4. footer

These four regions are easy to identify. However, you can build a flexible
structure that you can manipulate easily if you further divide the page
into subsections. The key to accomplishing this is to look for logical
groupings of content.For example, let’s express the mock-up’s regions in
outline form:
• Page
– Header
– Middle
* Sidebar
· Search Recipes
· Browse Recipes
· Popular Ingredients
* Main
– Footer
In this example, we have an overall region called page. We divide this
region up into a header region, a middle region, and a footer region. The
outer, or parent, region, acts as a point of reference that we can use for
positioning, and we can also control the overall page width by changing
the width of the outer region.

The sidebar and main regions are wrapped in another region called middle.
Like the outer page region, this middle region acts as a reference
point, but it also serves another important purpose: it provides flexibility.
We might not want a sidebar region for some of our pages; for example, we
might want a full-width main region for displaying the content
instead. On those pages, we could omit the sidebar and middle regions
and place the content right in the main region, using CSS to resize it.
This structure is fairly common. It’s the structure for your standard
two-column layout with a header and a footer, one of the most common
website types. The neat thing about standards-based design is that you
can reuse this skeleton for another project if you want to, because your
style sheets will define your column widths, colors, and other visual

Semantic Markup

Semantic markup makes sure your document is structured so that
it can be interpreted by machines, devices, or people. For example,
Google’s web crawler uses tags such as h1 and href attributes on links
to determine the importance of web pages and their content.


Keywords: html,designing


Other related blogs

Pointers for A Front End Development Newbie

By : Shan-SevenMentor

Source of Information: Front end development course in Pune Recognizing, and being capable in, the ..

How to Download and Install HP Officejet pro 9025 printer Drivers?

By : HP OfficeJet Pro 9000 Series All-in-One Printer

Do you have 9025 printer and you need to introduce it with your window or..

Contact Experts via HP Printer Support Number | HP Printer Helpline Number

By : Contact US - HP Printers Support

We fully realize that hp printers support has given its customers the best scope of printe..

Why is it necessary to call contact hp customer support?

By : Contact HP - Help

Like a computer, the hp laptop support number printer plays an important role while performing its w..