Creating A Quality Web Site Design!

In this article, I will attempt to cover the basics of creating a great quality web design template for your site. Now it's a known fact that the layout or "eye candy" as I put it will determine whether your visitors will stay more than 15 seconds or they will just become another statistic.

In this article, I will attempt to cover the basics of creating a great quality web design template for your site. Now it's a known fact that the layout or "eye candy" as I put it will determine whether your visitors will stay more than 15 seconds or they will just become another statistic.
That's right, if you don't catch your visitors attention right away, statistics shows us that your visitors will come and go within 15 seconds or less.

That doesn't leave you with a lot of time to grab someone's attention!

Some of you may be asking yourself: Well why does this happen????

See when you think about it, 15 seconds to the "browsing eye" is like an eternity. In other words, it takes about 15 seconds for the average person to browse your main page and determine whether they will explore your site further!

So with that being said; How do we grab your visitors attention????

Every new client of mine is asked to perform the same tasks. I ask them to explore their competitors web sites and look for specific triggers that would make them want to click on or buy right away. More times than none, my clients will notice specific "Headlines" or "Graphics" that really peek their interest. In doing this, you'll have 1st hand knowledge on what you expect your visitors will see and possibly expect themselves.

Step 2, I'll ask my clients to do one more process just like the previous one. I'll ask them to make a list of all the "eye candy" that really caught their attention and write me a little note as to why it caught their attention. In doing this, it will give your web designer a 1st hand knowledge on what to implement within your site!!!

With these great tasks, you've made your job and the job of your web designer a lot easier to target your audience.

Sites that sell "Web Site Templates" :

You may have seen some sites that sell your the right for a specific "Template Style". There are 100's of resources out there. I need to clarify something for you, these templates are targeted at web designers only!!! Reason being, the files that you receive will no doubt require some expensive and time consuming software just to open them.

Now being a designer, I'm not about to "knock" pre-made templates but there's a couple of things you may want to consider:

1) Although the templates you may encounter are very impressive, you will be sharing your layout template with 100's, maybe 1000's of other sites. The reason why they are so cheap is because those "specific templates" are sold and re-sold as much as possible!

2) I've noticed that many template examples out there on the web are extremely "Graphic Driven". This will result in "slow loading times". I'm sure we've all come across a site that seemed to take FOREVER to load!! How long did you actually wait for the site to load????

The best way to get a template is to have someone professional design your web site layout for you! This will ensure that your template is uniquely designed for your business. It will be easier for you to make changes in the future. Typically, a template may cost you between $0-$500 depending on the intensity and added features!

Now, we've talked about "Slow loading pages". I've found a good "norm" to stick with when it comes to size and speed: Web sites are compiled of 2 elements:

1) Graphics & Layouts
2) Programming & Pages

Both of them require memory from your computer when downloading them. If one or the other is too large then this may result in negative results for your visitors.

Here's a good norm to stick with, either you or your web designer should stick with these specs:

1) Graphic Design Layout: Should be no more than: 30-50K in size
2) Programming Pages: Shouldn't be more than: 10-30k in size

Giving your entire web page no more than 40k-80k in size. Anything drastically more will result in the loss of many visitors from slow downloading pages.

Animation: Last but not least, making "some" aspects of you page stand out by adding small size animations. PLEASE NOTE: DO NOT overkill your site with graphics and animation!!! I can't stress this enough, your visitors will most likely get a head ache from it and won't be coming back very soon.

Instead, try targeting specific promotions or services you wish to attract your visitors to right away! Many sites exchange "animated banners" with other sites to exchange traffic. I personally NEVER take part in adding ANY banners on my site. I honestly feel that banners only take away from the design, not add to it! A typical "Banner Dimension" is 468px x 60px.
There are many other sizes!

What I will usually take part in, if any, is smaller, more unique banners that are geared to complimenting an article or text with it. This is much more effective because study shows us that "Content (text)" accompanied by a "graphic image" is more likely to be read by our visitors than just text on it's own.

That about raps it up to having an effective web site template. Please look for my "continued" issues related to this article.

Creating Your Own Web Page is Easy - A Tutorial (Part 3)

Here's the last part of this tutorial. Our topics are:

Linking other pages and other websites
Using CSS in styling your web pages

Let's begin here.

Creating and placing hyperlinks

It is very important to create and place hyperlinks in your website to help your visitors navigate your site from pages to pages. These are the links displayed in your web pages that will change the web page displayed when clicked by visitors. These must be prominent and properly placed in your pages. If not, your visitors will be confused and will eventually leave your site unhappy or unsatisfied. Hence, he may never return. So, make sure that your hyperlinks are prominent, descriptive and orderly placed in your pages.

Linking your pages

In page 1, you have to place the following code where you want the visitor to click to go to your page 2:

<a href="http://your-domain-name.com/page-2-name" title="description using relevant keywords">your link description</a>

Looking at the codes, "a" is html anchor tag used for hyperlinks, "href" is the attribute referring to the URL of the destination page and "title" refers to the description of your link. If possible, use relevant keywords in your description for search engine optimization.

Now, type the above in your mywebpage.html and replace the domain name, web page name, title and link description with yours. Use relevant keywords in your link description for search engine optimization. Then, save and refresh your browser to show you how the above is displayed on the web.

To see more, hover or place your cursor on the link. The "title" value will be displayed on the link while the "href" value or URL of the destination page will be shown at the left side of the bottom bar of browser window. It may work only if you are online and your site is already active on the web.

Linking to other websites

You have to place the following code in your website pages where you want your visitors to click to go to other particular websites:

<a href="http://other-site-domain-name.com/page-name" title="description using relevant keywords" target="_blank">your link description</a>

If you notice, it is the same as linking your web pages but it is pointing to other website. So, we added the "target" attribute with value of "_blank" to open the destination page into new browser window. This will make your site remain active or open even if your visitors click the link to other website.

To try it, type the above in your mywebpage.html and replace the domain name, web page name and link description with yours. Use relevant keywords in your link description for search engine optimization. Then, save and refresh your browser to how the above is displayed on the web. Click the link and a new browser window will open while the page where you clicked the link remained open.

Hyperlinks with images

You may use images in your hyperlinks. In this case, the visitors can click an image in your web pages with links that will send them to other pages in your site or to other websites you have linked to. See the example below:

Linking to your other web pages

<a href="http://your-domain-name.com/other-page-name><img src="http://your-domain-name.com/image-directory/image-file" alt="your-image-description with relevant keywords" height="???" width="???" border="0"</a>

Linking to other websites

<a href="http://other-site-domain-name.com/page-name><img src="http://your-domain-name.com/image-directory/image-file" alt="your image description with relevant keywords" height="???" width="???" border="0"</a>

If you notice, it is just like you are inserting an image to your web page. The only difference, it is placed between the anchor tags <a href="URL"></a>. So, in place of link description, you use image. When your visitors click the image, the page will change to the destination page.

To try the above, place the image that you want to be used with hyperlinks in the same directory where your mywebpage.html is located. Then, type the above codes in your mywebpage.html but type only the image filename in the "src" value. Then, save and refresh the browser to effect the changes. Hover or place your cursor on the image. The "alt" value or the image description will be displayed on the image while the "href" value or URL of the destination page will be shown at the left side of the bottom bar of browser window.

Styling your web page using CSS

W3C.org requires the website style definitions must be placed in the style sheets or CSS. Styles are used to manipulate the design of the website such font sizes, colors, font face, box properties, table properties, paragraph format, etc.

Placing your styles within the head or in a separate CSS file let you control the style of your web pages in just one page. Now, I will tell you the easy way to create your style sheets within the head tags and how it is implemented in the within the body tags.

To define a style, you have to use a selector as a reference. Basic selectors are body, div, span, li, table, td and p. div is used for group of paragraphs, p is for one paragraph, span is for selected characters, words or phrases, li is for lists, table is for table and td is for table data. The good thing here is you can make your own selectors using names you prefer.

Creating style sheets is the same as what we have done in CSS boxes. Whatever style properties you assigned to those selecters, it will affect area or content of your web pages where you have used the corresponding selectors. See example below:

<style type="text/css">
body {
margin: 10%;
color: #00f;
background: #ff0;
text-align: center;
}

</style>

In the above style, all your contents within the body tags (<body> and </body>) will have the above style properties. Try it by typing the above in your mywebpage.html within the head tags. Save it and refresh your browser and see effect in your web page.

Let's see another example:

<style type="text/css">
p {
margin: 20px;
color: #cff;
background: #ccc;
text-align: right;
}

</style>

All of your content that you have placed within <p> and </p> will have the above style properties. Now, type the above to your mywebpage.html within the head tags, save and refresh your browser and see the results.

Now, let's make our own selectors. As explained in creating CSS boxes, we can make an id and a class selectors and implement as follows:

<style type="text/css">
#ownidselector {
margin: 0px;
text-decoration: underline;
background: cff;
}

.ownclassselector {
margin: 10px;
font-size: 16px;
font-style: italic;
color: #f00;
}

.ownclassselector2 {
font-weight: bold;
font-family: courier;
border: 1px dashed #cff;
}

</style>

<body>

<div id="ownidselector">This is an example of using the id selector</div>

<div class="ownclassselector">This is an example of using the class selector</div>

<div id="ownidselector" class="ownclassselector">This is an example of using both the id and class selectors</div>

<span id="ownidselector">This is an example</span> of using span with id selector and <span class="ownclassselector">class selector</span>

This is an example of using <span id="ownidselector" class="ownclassselector">both the id and class selectors</span>

This is an example of using <span class="ownclassselector ownclassselector2">the two class selectors at the same time</span>

</body>

Let's me explain to you the above style properties that are not discussed in Creating CSS Boxes:

text-decoration: underline - creates underline to the text or characters. You may use "none" instead of "underline" to remove the underline.

font-size: 16px - fixes the size of the font within the affected selector. You may use px, em, pt and % as unit of measure.

font-style: italic - makes the text or characters italic. You may also use normal, oblique.

color: #f00 - defines the color of the text or characters. You may use different web colors here. It is advisable to use web-safe colors as other computers or browsers could not display other colors.

font-weight: bold - makes the text or characters bold. You may use also normal, bolder, lighter, 100 up to 900.

font-family: courier - defines the font type of the text or characters. Common font types are arial, verdana and helvetica.

Type the above codes to your mywebpage.html within the style and body tags as noted, then save and refresh your browser to see the effects of the above style properties. You may change the values, then save and refresh to familiarize yourself with styling properties.

For complete web-safe color codes and complete list of style properties, simply visit my site.

When you have already familiarized yourself with the html and CSS codes, it will be easy for you to create a web page.

I hope you've learned something in this tutorial. Just continue practicing and learning. Research, research, research. There so many free tutorials here on the web.

To learn more of HTML and CSS, search Google by typing "html tutorial" or "css tutorial" - Click Search and you will find many choices. For standards, you may visit www.W3C.org.

Creating Your Own Web Page is Easy - A Tutorial (Part 2)

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.

Creating Your Own Web Page is Easy - A Tutorial

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.