Home Anatomy of a Web Page

Apr 24
2011

Anatomy of a Web Page

Posted by: admin in Web

Tagged in: Web Development

anatomy of web design, web design nepal,web designer and developer nepal

A Web Page is an electronic document written in a language called HTML, short for Hypertext Markup Language, also referred to as code. A website has one or more related web pages, depending on how it's designed. Web pages on a site are linked together through a system of hyperlinks, enabling you to browse between them by clicking on a link.

when we talk about the anatomy of a web page, it has many elemnts. These elements are like organs in a human body; they are vital to a properly functioning and aesthetically pleasing web page.These are the main elements of a web page. There are many different ways to organize them but this is perhaps the most common basic layout used online. Here i am trying to describe the major elements of a web page. There are many different ways to organize them but this is perhaps the most common basic layout used online.

Container

Every web page has a container. This could be in the form of the page’s body tag, an all-containing div tag, or (and I really don’t want to say this, but) a table. Without some sort of container, we would have no place to put the contents of our page. The elements would drift beyond the bounds of our browser window and off into empty space. The width of the container can be liquid, meaning it expands to fill the width of the browser window; or fixed, so that the content is the same width no matter what size the window is.

Logo

When designers refer to an identity, they’re referring to the logo and colors that exist across a company’s various forms of marketing, such as business cards, letterhead, brochures, and so on. The identity block that appears on the web site should contain the company’s logo or name, and sit at the top of each page of the web site. The identity block increases brand recognition and lets users know that the pages they’re viewing are part of a single site.

Navigation

 

 

It’s essential that the site’s navigation system is easy to find and use. Users expect to see navigation right at the top of the page. Whether you plan to use vertical menus down the side of the page, or a horizontal menu along the page’s top, the navigation should be as close to the top of the layout as possible. At the very least, all main navigation items should appear “above the fold.”

Main Content

Content is king. A typical web site visitor will enter and leave a web site in a matter of seconds. If visitors can’t find what they’re looking for, they will undoubtedly close the browser or move on to another site. It’s important to keep the main content block as the focal point of a design so that precious seconds aren’t wasted as visitors scan the page for the information they need.

Footer

Located at the bottom of the page, the footer usually contains copyright, contact, and legal information, as well as a few links to the main sections of the site. By separating the end content from the bottom of the browser window, the footer should indicate to users that they’re at the bottom of the page.

Sidebar

The sidebar is the element with your secondary content such as advertising, site search, subscription links (RSS, Twitter, Email, etc), contact methods, etc. This element isn’t necessary although many websites use it. It is most often right aligned but can be left aligned or both (two sidebars) so long as it doesn’t disrupt main content viewing. For websites that use horizontal AND vertical navigation, the sidebar is often replaced with the vertical navigation element.

Whitespace

The graphic design term whitespace (or negative space) literally refers to any area of a page that’s not covered by type or illustrations. While many novice web designers (and most clients) feel a need to fill every inch of a web page with photos, text, tables, and data, having empty space on a page is every bit as important as having content. Without carefully planned whitespace, a design will feel closed in, like a crowded room. Whitespace helps a design to “breathe” by guiding the user’s eye around a page, but also helps to create balance and unity—two important concepts that we’ll discuss in more detail later in this chapter.

For free updates from author: Nirmal Gyanwali enter your email address:

Delivered by FeedBurner



Nice
0
All posts are helpful!!!
I want to use Joomla! but I have no more ideas about website designing.
Dinesh Gadtoula , February 19, 2012 | url

busy

Publish Article

Namaste!

Nirmal: Freelance web designer and developer from nepalMy name is Nirmal, Nepal based web developer. I am Master's Degree holder in Information Technology and currently working at Image Channel.
I started this site in 2006 as my personal blog to share useful information on web design and development (mainly Joomla, Wordpress, Drupal, SEO and Social media).
Now, it's open to guest blogging. If you’d like to become an author of the Web Design Blog, you can do so by registering here or you can contact me directly.

Nirmal's Travel Photo Blog

Nirmal's Nepali Blog on Information technology

Nirmal's Programming Blog, JAVA, oracle, c++, sql, vb.net

Nirmal's Modeling portfolio, Nepali Male Model Nirmal, Glamorous Photo of Nirmal

Popular Tags

Content View Hits : 5501540