HTML 101 - Layout of a Web Page


December 23rd 2008 11:39 am By Web Development in India

HTML Tags:

HTML is formatted using tags. A tag tells the web browser when to begin and end sections, code, or formats when displaying your page. There are two parts to a tag. The opening and closing tags. A tag has the less than sign (<) then the tag name, and arguments if applicable, then the greater than sign (>)

Most tags also require the closing tag to end. It is the same as the opening tag except it has a slash character and no arguments. Here is what a tag looks like in action:

&lt;em&gt;This is some italicized text&lt;/em&gt; The “em” tag (for “emphasis”) italicizes the text between the &lt;em&gt; and &lt;/em&gt;.

Another simple tag is &lt;strong&gt;This is some bold text&lt;/strong&gt;

A more complicated tag would be a hyperlink. A hyperlink is the “A” tag.

Here is how a hyperlink to Google might look. &lt;a href=”http://www.google.com”&gt;

The HTML Page:

A basic HTML page is broken up into sections. The sections are denoted by tags.

Below is just a very brief overview.

  1. There is the &lt;!DOCTYPE&gt; tag. It tells the web browser what sort of content to expect on the page. It usually does not have a closing tag.
  2. Below the DOCTYPE tag begins the html. The HTML section begins with &lt;html&gt; and ends with &lt;/html&gt;. Usually the very last line of the web page is the &lt;/html&gt;.
  3. Inside the HTML section is the “head” section. The contents of the head section are not directly displayed to the user. They tell the web browser some important information about the web page. Inside the &lt;head&gt; section are various other tags. Strictly speaking, these tags are all optional but they can be very important in helping Search Engines determine where to place your page.

The &lt;Title&gt; tag is where you determine what text is displayed in the title bar of the web page.

The &lt;Description&gt; tag gives a summary of what can be found in the page. The description will be displayed if someone finds your page in a search engine.

“Meta” tags, such as the “Keywords” meta tag and others can help search engines determine where to place your pages in search results.

Sometimes code snippets (scripts) will be placed in the head section as well.

After the head section, comes the Body section This is the part that people will see when they pull up your site in their browsers. The body section begins with and ends with &lt;/body&gt;. Inside the body section is all of your text, images, hyperlinks, tables, charts, etc. that people will see in their web browser.

The body tag can contain formatting instructions for how to display your web page. You may define top, left, right, and bottom margins, text alignment, background color, background image, etc. in the body tag, itself. If you just want a plain page, you need do nothing in the body tag. Here is a body tag with a few arguments.

&lt;BODY leftmargin=”0″ topmargin=”0″ rightmargin=”0″ bg&gt; Most of the arguments should be self-explanatory. The “bgcolor” argument sets the background color to white.

Allen Howard is the senior Technical Support Representative for InfoServe Media, LLC. InfoServe Media is a full service business Website design company in Houston, TX.

Custom Web design is our specialty.

In addition to exceptional website design that even a new business can afford, we also offer hosting and domain names. We have a handy tool to help you find just the right domain name. We can design a site that you can easily make minor changes to, yourself. We can build just about any site from a full-blown e-commerce site to a small “Presence” website. See our website for complete website design and hosting solutions including website promotion, Search Engine Optimization (SEO) services, and more.

Posted by under WebDesign |

Comments are closed.

Trackback URI |