One of the most important aspects of a successful business in Denver these days is a good website. And of all the aspects of a website that Denver web development teams address, the perspective of the user is the most important to your success online. If a user has trouble on your site in any number of ways, chances are they will not be back. Why should they bother with a website that does not take their comfort and needs into consideration? And what does that say about the business itself?

The truth is that while you may think of your website as a relatively static representation of your business, the user thinks of your site as an interactive tool. So it is vital that you approach web development, Denver related or otherwise, with the user in mind. The consumer wants to feel like they have made a connection with you rather than just viewing a static page of information.

So how do you accomplish this when planning Denver web development? First of all, take into consideration the different type of user you will attract. Some people may simply want to browse the pages with little or no action on their part. They may not be there to purchase anything, but instead to research an interest. So you need to provide a user friendly atmosphere for these visitors. This comes in the form of high quality content. If these people return time and again to do research on your site, they are more likely to make a purchase in the future.

The other type of use is online to take some sort of action, either by purchasing an item or enlisting a company to provide services. For this visitor, not only do you need to provide a smooth and error-free check out procedure, customizable search feature, and easy site navigation, but you also need to provide them with a way to interact with you.

This interaction goes beyond the standard contact page. The people who are purchasing your goods or services, or even the people who return time and again for your expertise, are your best sources of feedback. You wan their opinions on everything from the quality of goods sold to the preferences of navigation bar styles. They can help you discern new trends and to identify out of date offerings on your site.

For this kind of feedback, you need to bring the user into your website in a very interactive manner. This can be accomplished through message boards, forums, and surveys. You can also compile an email list of visitors to receive regular newsletters that allow for feedback. Other good ways to get customers involved in the site is by holding contests for free items or services.

Above all, always respond to email you get from users. Do not let the time and effort they invested in interaction with your company be in vain. Thank them whether their comments are positive or negative. A negative comment can actually help you more than a positive one can by showing where change is needed.

Technorati Tags : website provide people their

Do you have a small business or idea that you would like to get on the web? This article will explain the basic steps to get your business or idea on the web.

There are many free ways to get an online presence but the best way is by having your own, unique, web site. There are a few thinks you will need to get this web site online but they are not very complicated or expensive.

The first thing you need is a domain name. A domain name is the address that you put in the address bar of your web browser. It usually looks something like www.somename.com. This is a unique name you will use to identify your business from the rest of the world. A domain name can be purchased from any number of registrars for under $10 a year.

The next thing you will need is web hosting. This is a service that lets you have a place to upload files and display them to the world when someone goes to your web site. Web hosting is another service that can usually be bought on the web for between $5 and $15 a month.

Once you have your domain name and web hosting set up, the real work begins. You will need to design a web site. There are any number of tools you can use to create a web site, such as Macromedia Dreamweaver, Microsoft FrontPage, Notepad, or another similar program. Designing a web site requires, at least, some knowledge of HTML (or XHTML). HTML and XHTML are static scripting languages that you use to tell your web browser how to show your information. There are other languages you can use to create web sites such as PHP, ASP, and ColdFusion. These languages are more complicated and are used to create dynamic sites and interface with databases.

Designing a web site can be a daunting task. There is always the option of having a design company create you web site for you but that can cost quite a pretty penny. Another option is to install a pre-made web site script that you can administer from a simple administration. Some of these script include Mambo, phpWebsite, e107, and many more. A script like this, usually, still requires some knowledge of HTML and/or web design because they are highly configurable and require a bit of tweaking to make it look the way you want.

It may sound complicated to start a web site but it really isn’t. All you need to do is take a bit of time to read some tutorials and examples, that are freely available on the web. You can learn the basics in no time completely free of charge.

Technorati Tags : there create domain script

Now, Let’s continue with Part 2. We will discuss the following here:

Creating tables
Using CSS boxes as webpage layout

Here’s how:

Creating tables

Tables are very useful in the presentation of data. The following are the html tags to be used to create a basic table:

Single-column table:

<table width=”400″ border=”1″ cellspacing=”2″ cellpadding=”4″>
<tr><td>row 1 data</td></tr>
<tr><td>row 2 data</td></tr>
</table>

Type the above in your mywebpage.html within the body tags, save and refresh your browser. That’s the table on the web. Referring to the above html codes, width refers to the width of the whole table (you may also use pixel here like “800″), border is the outside line or outline of the table, cellspacing is the space between the cells, cells are the area where the data are located, cellpadding is the space between border and cells. You may change the values of these table attributes or properties based on your preference or requirement.

Though the above table html codes are still working, W3C.org requires the table properties or attributes be defined in the style sheets or CSS. Using CSS, the above table properties could be presented as follows:

Within style tags in the head:
.type1 {
width: 400px;
padding: 4px;
margin: 2px;
}

.border {
border: 1px solid #000;
}

Then, within the body tags:

<table class=”type1 border”>
<tr><td>row 1 data</td></tr>
<tr><td>row 2 data</td></tr>
</table>

Looking at the codes, “type1″ is preceded by dot (.), meaning it is a class selector. For the next type of table properties or attributes, you may label it as type2, then type3 and so on or with other names you prefer. “border” is also a class selector and “border: 1px solid #000″ is the thickness (1px), border type (solid) and color (#00f) of the border. There are more discussions of CSS in “Creating CSS boxes as web page layout” and in “Using CSS in styling your web pages”

If you want to try the above, then type the codes within the style and body tags as noted, save it and refresh your browser. It must be the same as the first one.

Now, let’s make a 2-column or multi-column table:

<table width=”400″ border=”1″ cellspacing=”2″ cellpadding=”4″>
<tr><td>row 1 data 1</td>
<td>row 1 data 2</td></tr>
<tr><td>row 2 data 1</td>
<td>row 2 data 2</td></tr>
</table>

Type the above in your mywebpage.html within the body tags, save and refresh your browser. That’s the 2-column table on the web. To add a column, just insert <td></td> after </td>. 1 <td></td> is one column, 1 <tr></tr> is one row and 1 <table></table> is one table.

Now, lets make a table with 1 main heading and 3 subheadings:

<table width=”400″ border=”1″ cellspacing=”2″ cellpadding=”4″>
<tr><td colspan=”3″>Main Heading</td></tr>
<tr><td>Subheading 1</td>
<td>Subheading 2</td>
<td>Subheading 3</td></tr>
<tr><td>row 1 data 1</td>
<td>row 1 data 2</td>
<td>row 1 data 3</td></tr>
<tr><td>row 2 data 1</td>
<td>row 2 data 2</td>
<td>row 2 data 3</td></tr>
</table>

Type the above in your mywebpage.html within the body tags, save and refresh your browser. See? Yes, just use colspan to merge the columns. To merge 2 columns, use colspan=”2″ and for 3 columns, use colspan=”3″ and so on.

If you want to merge rows, use rowspan instead of colspan. See this example:

<table width=”400″ border=”1″ cellspacing=”2″ cellpadding=”4″>
<tr><td rowspan=”2″>merge row data</td>
<td>row 1 data 2</td></tr>
<tr><td>row 2 data 2</td></tr>
</table>

Now, type the above in your mywebpage.html within the body tags, save and refresh your browser. Now, you see that 2 rows in your first column were merged.

Try creating your own table using different values to familiarize yourself in manipulating tables.

Creating CSS boxes for web page layout

Before, tables are being used as layout of a web page. So, the header, right bars, left bars, main content areas and footer are inside of a table. This slows down the loading of the page as the browser will have to complete first the table before it will display the content. Your visitor may have already left before your page could be displayed. If you prefer to use table as your layout, you have to avoid using big tables. You better use small tables to allow the browser display your page little by little but faster.

Though table could still be used, W3C requires CSS boxes to be used for layout instead of tables due to the issue of accessibility. CSS boxes load faster than tables. These could be controlled within the style sheets that could be within the head tags or in separate CSS file. The most critical part in css boxes is the positioning. So, I’ll explain to you the positioning properties of these boxes, based on my experience:

position: absolute – You have to define the x-axis and y-axis as point of reference of the corner of the box. x-axis is either left or right and y-axis is either top or bottom. You have to define also the width or the left and right margin or padding of the box. The box is not affected by the preceding or subsequent boxes. Likewise, the boxes preceding or following the boxes that are positioned as absolute are also not affected.

float: left or right – You need to fix the width. You also need to select if left or right. The box will lean on the side you selected. It will lean on the box preceding it if there is enough space for it. This is affected by the other boxes except for the absolutely positioned boxes.

no position or position: static or fixed – This follows the normal flow. This is also affected by the other boxes except for the absolutely positioned ones. You need to define the width or the left and right margin.

Now, see the illustration below that will create 5 boxes, namely: headerbox, leftbox, centerbox, rightbox and footerbox. These are liquid boxes, which automatically adjust in width when the display window size of the computer is changed:

<style type=”text/css”>
body {
text-align: center;
margin: 1px;
}
#headerbox {
width: 100%;
height: 15%;
background-color: #9cf;
border: 1px solid #00f;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

#rightbox {
float: right;
width: 20%;
margin-top: 5px;
text-align: center;
background-color: #cff;
border: 1px solid #00f;
height: 100%;
}
#leftbox {
float: left;
margin-top: 5px;
width: 20%;
text-align: center;
background-color: #cff;
border: 1px solid #00f;
height: 100%;
}

#centerbox {
width: 99%;
margin-top: 5px;
text-align: center;
background-color: #cff;
border: 1px solid #00f;
height: 100%;
}

#footerbox {
width: 100%;
text-align: center;
height: 15%;
vertical-align: middle;
margin-top: 5px;
background-color: #9cf;
border: 1px solid #00f;
}

</style>
</head>
<body>

<div id=”headerbox”>HEADERBOX content area</div>

<div id=”leftbox”>LEFTBOX content area</div>

<div id=”rightbox”>RIGHTBOX content area</div>

<div id=”centerbox”>CENTERBOX content area</div>

<div id=”footerbox”>FOOTERBOX content area</div>

</body>

First, you type the above html codes to you mywebpage.html within the head, style and body tags as noted in the above. Then, save it and refresh your browser or open the file with your browser. Are you seeing the headerbox on the top, the leftbox, rightbox and centerbox in the middle and footerbox at the bottom? Try to change the width of your browser window. See? The width of the boxes are also adjusting and that is excellent as your page will auto-adjust depending on the browser window size of your visitors! That is because I used %s in defining the width of boxes.

Now, let me explain the above codes for creating boxes as your layout.

headerbox – preceded with #, meaning it is an id selector and could be used only once per page; float: left means the box will lean on the left if fit; width: 100% means the box is 100% of the browser window and that is the reason why it is liquid; height: 15% means the box is 15% of the browser window; text-align: center is the alignment of the objects or characters inside the box; background-color: #9cf is the color of the space within the box; border: 1px solid #00f is same as discussed in Creating Tables.

rightbox – same explanations in the above except for the float: right which means the box will lean on the right and margin-top: 5px is the distance from the bottom line of the box above (headerbox).

leftbox – same explanations in the above.

centerbox – same explanations in the above except that it has no position defined, meaning it will follow the normal. It will fit itself based on the available space. This will be its 100% or full size. More than this limit will distort the box alignment.

footerbox – same explanations in the above except for the vertical-align: middle, which means that the objects or characters inside the box will be vertically-aligned in the middle.

Try changing the values of the values of the css boxes above, then save. Refresh your browser and familiarize yourself with the effect of each change. Please note, however that there may be minor differences if the above css boxes are displayed with browsers other than internet explorer like firefox and opera.

Continue with Part 3.

Technorati Tags : table width boxes border

Yes, it is easy to create a web page though you are not an IT professional or a person who is involved in IT things. A basic web page is made up of simple HTML tags or codes and HTML is easy to learn.

After going through this tutorial, you will learn how to create your own web pages for your website. This includes the following topics divided into three (3) parts:

Part 1:
Outline of a web page
Creating a web page template
Placing invisible comments to your code
Creating a single or double spaces
Creating an ordered list and unordered list
Inserting an image

Part 2:
Creating tables
Using CSS boxes as webpage layout

Part 3:
Linking other pages and other websites
Using CSS in styling your web pages

Let’s discuss here the Part 1:

Outline of a web page
Creating a web page template
Placing invisible comments to your code
Creating a single or double spaces
Inserting an image

Outline of a basic web page

If you are new to html, I am now telling you that a web page is simply created with html tags. Html tags are shown as <tagname> and </tagname>. Look at the outline of a web page below:

<html>
<head>
<title>

Here you will place the title of the page. The texts here are displayed at the topmost left of a browser or web page.

</title>
<style type=”text/css”>

This is the place for Cascading Style Sheets or known as CSS. CSS defines the styles you will use in your web page such as font color and size of the text, background image, boxes, etc. These are effected in the body but most of the style definitions affects only those areas where you use them.

</style>
</head>
<body>

Here you will implement the layout using style definitions you have made in the “style” section. Without putting anything here the page will be blank except for the title that will appear at the topmost left of the page. You will also place here the content of your website. It may be mixed of texts, images, audios and videos.

</body>
</html>

The above must be saved as a html page with extension of html or htm. If you want to see how the above will look like on as a web page, copy the above from <html> to </html> and paste to your Notepad or equivalent. Then click File – Save as – type mywebpage.html or mywebpage.htm in File Name – Select All files as file type – Click Save. Then go to windows explorer or file manager and open the file with your browser. See? It is as simple as that. Now, don’t close your Notepad and your browser. We will use that in our practice.

As an important note, your homepage or the starting page of your website must be named as index.html or index.htm. This will be first page when your website is called without specifying a particular page. Like this site, if you type www.freetipsandwits.com or freetipsandwits.com at browser address, it will open the index file. If you like to see it, try clicking the link to my site. You may wonder why the index file is “index.php”. Well, this site is php-based but do not bother yourself with this php thing. Familiarize yourself first with html and later you may learn php, asp, jsp, cgi & more. In html, you must save your index file as “index.html” or “index.htm”. Pages other than homepage must be saved with descriptive keywords using hyphen as separator. This is for search engine optimization.

Creating a basic web page template

First, I would like you to make a simple web page template. We will use this for practicing the html codes that we are going to learn later. So, in above mywebpage.html, delete all codes you typed earlier and type the following:

<html>
<head>
<title>My Web Page</title>
<style type=”text/css”>

</style>
</head>
<body>

</body>
</html>

Leave some spaces between style and body tags. Now, click Save icon or click File – Save. If you accidentally close this file, you can open it by searching the file, right-click it, click Edit or Open with Notepad or its equivalent. To see what it looks like on the web, just refresh the browser use when you opened the html outline a while ago.

Placing an invisible comments to your codes

I would like you to know how to place your comments on your html codes. Web developers normally put comments in some of the codes for future reference particularly for editing. It will be easy for you to find what you’re looking for when you are updating or editing your html codes. This will help also other webmasters if you let them edit your codes. These comments are displayed only in raw html codes or in your html editor but not on the web page or browser page. This is done as follows:

<!– type your comment here –>

For example:

<!– website building tutorial starts here –>
Building your website is easy. Just learn basic html codes and you’re done. Don’t be afraid of html codes, they are easy to learn. When you start learning html, you will ask for more and more….and so and so forth….until you become an expert web developer.
<!– website building tutorial ends here –>

Type the above in your mywebpage.html between body tags. You will learn faster if you retype or remake the above. But if you are in a hurry, you may copy and paste it. Save it by clicking the Save icon or File – Save.

Now, refresh your browser for the above html file. See? Yes, you can’t see your comments between <!– and –>. So, for your reference and easier editing of your codes in the future, don’t forget to place your comments.

Making a line to break or creating a blank line space

If you want to break a line or create a blank line space, use this break tag <br />. See how it is used below:

This will break affiliate<br />marketing from word “affiliate”.
This one will break this web<br />site from letter “web”.
This one will result in a double line space search engine<br /><br />optimization from the word “engine”.

You type this within the body tags of your mywebpage.html, save it and refresh your browser. Yes, the sentence is broken and second row started with “marketing” the word before the break tag. The word was also divided into two with the next row started with “site”, broken from word “website”. The two consecutive break tags created a double space between “engine” and “optimization”.

Making an ordered list and unordered list

This is useful when you are enumerating or listing something. See the illustration below:

Ordered list

<ol>This is Ordered List
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Now type the above in your mywebpage.html within the body tags, save it and refresh your browser and see the results. See? It’s sequentially numbered. Now, here is the unordered list:

Unordered list

<ul>This is Unordered List
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Now type the above in your mywebpage.html within the body tags, save it and refresh your browser and see the results. Now, it’s not numbered. It’s in a bullet format.

Inserting an image

You may place an image to your web page by inserting these codes where you like the images to appear in your web page:

<img src=”http://your-domain-name.com/image-directory/image-file.gif” alt=”image description” height=”???” width=”???” border=”???” />

Looking at the above html codes:

“img” is the image html tag;

“src” is the source or the path of the image file with extension of gif, jpg and png;

“alt” is the alternative text description in case the browser could not display an image;

“height” and width are the dimension of the image;

“border” is the outline of the image.

Do these:
Replace the above domain name, image directory and the file name with yours.

Replace the values of “alt” with your own description. This is required for SEO or search engine optimization;

Replace the values of “height” and “width” with your preferred dimensions of your image in pixel without distorting it. The size of the image will adjust based on the dimensions you specified. Fixing the height and width of the image will make it load faster;

Replace the value of the “border” with the border thickness you preferred. 0 is no border.

To try the above, get an image from your file and copy it to the directory where your mywebpage.html is located. Now, type the above codes in your mywebpage.html but replace the src=”http://your-domain-name.com/image-directory/image-file.gif” with src=”image-filename”. Then, save it and refresh your browser to see what it looks like in the web browser.

Continue with Part 2.

Technorati Tags : image codes above browser