The Design Guru http://prodigy-designs.com/blog All things design...scrapbooking, web design, designer party ideas, brand identity Thu, 08 Mar 2012 12:59:24 +0000 en hourly 1 http://wordpress.org/?v=3.3 The Best of Me – for my daughter Quinn http://prodigy-designs.com/blog/uncategorized/the-best-of-me-for-my-daughter-quinn/ http://prodigy-designs.com/blog/uncategorized/the-best-of-me-for-my-daughter-quinn/#comments Thu, 08 Mar 2012 12:59:24 +0000 prodblog_user http://prodigy-designs.com/blog/?p=70  

Get Microsoft Silverlight ]]> http://prodigy-designs.com/blog/uncategorized/the-best-of-me-for-my-daughter-quinn/feed/ 0 Can Web Design be Optimized http://prodigy-designs.com/blog/web-design-development/can-web-design-be-optimized/ http://prodigy-designs.com/blog/web-design-development/can-web-design-be-optimized/#comments Tue, 20 Dec 2011 07:03:15 +0000 prodblog_user http://prodigy-designs.com/blog/web-design-development/can-web-design-be-optimized/ Your web design is the face of your business online. Through designing, you are going to make an impact on your customers. While creating any website, the basic aspects of web design are-

1. Content-The content is the substance of the website and should be relevant to the site. It should target the customers and visitors.

2. Usability-The site should be user-friendly with the interface and navigation system simple and reliable.

3. Appearance-The graphics and text should include a single style that flows throughout for consistency.

4. Visibility of the site-The site should be easy to find via most search engines. Optimization is a process of making something functional and effective. Web design optimization is a continuous process of improving the design to achieve business goals. An optimized web page loads quickly on the client’s system, so your website visitor can quickly get the information they had come for.

The reasons for optimization are varied. These include increasing download speed, increasing its search engine ranking and applying modern web standards.
Now the question arises-whether optimization of web design is possible or not. Here, we are going to discuss the ways for optimization.

1. Optimize Graphics For Web Use-Even today, a large number of people use dial up connection for web use. With slow browsing speed, they don’t want to wait for pages to load. And as a business owner, you can’t afford to loose a single customer. If you have a graphic intensive site, all you need to do is optimize your graphics for web use. Here optimizing means compressing the size of graphics for fast download.

2. Emphasize On Content-Make sure that the content of the website is laid out effectively. If you only concentrate on look and ignore the content, you can’t make an impact on your customers. You need to provide a concise, convincing message and information about your website, if you want your visitors to buy your product or service. Make sure that your content is simple and easy to understand.

3. Install A Navigation System That Compliments Search Engines-Navigation systems are built to help visitors find their way around your website. Therefore, they should be designed carefully to make them search engine friendly. Search engines need a chain of hypertext links starting at your home page that will take them page by page in your entire site. The problem is that if JavaScript and flash systems replace plain hyperlinks, the search engine may not be able to find the underlying pages. You can optimize the flash and images for better use and quick downloading.

4. Emphasize On Color, Shapes And Font Size-Things like color, shape and sizes of font can make a big impact on overall message. Using blue, green, silver, grey as color can create a calm effect. Using rounded corners instead of hard edges within your design can enable a soft and personalised feeling.

5. Keep It Simple- Look at some successful websites like Google that is very simple. Do not use bloated features. Keep your goals as well as visitor’s needs in mind when adding a feature.

Technorati Tags :

]]> http://prodigy-designs.com/blog/web-design-development/can-web-design-be-optimized/feed/ 0 Creating Your Own Web Page is Easy A Tutorial Part 3 http://prodigy-designs.com/blog/web-design-development/creating-your-own-web-page-is-easy-a-tutorial-part-3/ http://prodigy-designs.com/blog/web-design-development/creating-your-own-web-page-is-easy-a-tutorial-part-3/#comments Tue, 20 Dec 2011 05:42:07 +0000 prodblog_user http://prodigy-designs.com/blog/web-design-development/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.

Technorati Tags :

]]> http://prodigy-designs.com/blog/web-design-development/creating-your-own-web-page-is-easy-a-tutorial-part-3/feed/ 0 How Database Development Can Make Your Life Easier http://prodigy-designs.com/blog/web-design-development/how-database-development-can-make-your-life-easier/ http://prodigy-designs.com/blog/web-design-development/how-database-development-can-make-your-life-easier/#comments Tue, 20 Dec 2011 04:21:30 +0000 prodblog_user http://prodigy-designs.com/blog/web-design-development/how-database-development-can-make-your-life-easier/ If you run a portion of your business online, you know how hard it can be to get the right elements for a user friendly site. A few years ago when the World Wide Web was still new, establishing a free website that helped your business in a measurable way was fairly simple. You registered your domain name, went to a free hosting company, grabbed a simple five to twenty-five page template, and plugged in your company information. Denver database development was a burgeoning business back then. But in the last few years, being successful on the web has become more difficult.

As web users become more and more savvy and as websites become more and more sophisticated, the requirements for a good site have increased. What a consumer thought was usable and well designed five years ago has drastically changed. Today, your potential customers have some unspoken standards they expect to be met when they come to your site.

In order to live up to these standards, you are going to have to move beyond the web templates and perhaps beyond the relatively skilled web designer. Fortunately, as the needs of internet merchants have become more complex, the abilities of Denver database development teams have advanced as well. So when you need to move beyond the basics, look for database development, Denver or otherwise, that can sit down with you and analyze your needs.

The basis of database development is simply the integration of information into a software program that can store, sort, and display the information pieces on command. This software can take on a number of appearances though, depending on the needs of the site owner.
One of the most common database development projects is for product inventory. If you think of your favorite retail website, you can picture a fine example of this type of system. Products, or in some cases, services, are stored in the database and then displayed at the user’s command by either a click or a keyword search function. Then the database serves up some related items in the margins that this type of customer might also like. Sophisticated versions of an inventory software system can also maintain viewing histories for each user automatically, queuing up recent searches and items of interest when the user returns.

An effective inventory database will work seamlessly both with a precise search function and with a kink-free shopping cart. It is difficult for the average site owner to create and maintain a system of this level, so Denver database development is necessary to achieve a quality experience for new and returning customers.

Database development is not limited to inventory systems though. In fact, there are a number of uses for customized databases, including email lists culled from frequent visitors, client contact and shipping information, pricing charts and systems, as well as scheduling. If you offer your expertise on site at various locations, you can enlist the help of database developers to create a system that will allow you to plug in the dates and locations of your next appearances. Do the same with multiple store locations, maps, and personnel contact information.

Technorati Tags :

]]> http://prodigy-designs.com/blog/web-design-development/how-database-development-can-make-your-life-easier/feed/ 0 Front end Web Developer Metamorphosis http://prodigy-designs.com/blog/web-design-development/front-end-web-developer-metamorphosis/ http://prodigy-designs.com/blog/web-design-development/front-end-web-developer-metamorphosis/#comments Tue, 20 Dec 2011 02:35:17 +0000 prodblog_user http://prodigy-designs.com/blog/web-design-development/front-end-web-developer-metamorphosis/ Web design is not the be-all end-all in developing a site. This is the very reason why metamorphosis has led to the recent discovery of frond-end developers.

Front-end web developers are what are formerly known as web designers only that they come now with a click. What is the click on its name all about? Well, added duties as well as expectations are imposed upon them so as to make them an extraordinary web artist.

Front-end web developers make sure that crucial in the site is displayed on the browser. Another is to create a catchy and navigable design that contains useful data.

Being a front-end web developer is not as easy as it sounds. Though, skill about complex programming is not necessary. All they need to do is to hack together some codes and link pages. Nonetheless, there is the element of uncertainty hanging above their head. There are also great ways that the web developer can be broken down by the users and customers. If the site did not work with the specifications of the customers, he also gets the blame.

In order to keep the design safe, it is crucial that every designer follow the standards set by the World Wide Web Consortium (W3C). The drawback though is that the browser industry does not tell the truth whether it follows the standard or not. This results to a number of web site development services failures.

When you are interested into web development, you can go extra mile by being flexible and knowledgeable. You have to know the exact needs of the site, design and the visitors.

A front-end web developer is a web artist with codes and responsibilities. It needs constant improvement and a wide-latitude of imagination and skill. The site has to look good and is accessible and reliable.

The web developer’s failures can bind the site and clients and the viewers. Thus, as early as possible he must be skilled in code and content which can be published with outstanding accessibility to everyone. Be sure to test them ahead before using.

Technorati Tags :

]]> http://prodigy-designs.com/blog/web-design-development/front-end-web-developer-metamorphosis/feed/ 0 What is Web Hosting or Web Space? http://prodigy-designs.com/blog/web-design-development/what-is-web-hosting-or-web-space/ http://prodigy-designs.com/blog/web-design-development/what-is-web-hosting-or-web-space/#comments Tue, 20 Dec 2011 02:21:17 +0000 prodblog_user http://prodigy-designs.com/blog/?p=59 A web hosting service is a kind of Internet hosting service that enables people, companies, groups, and organizations to create their own website that is accessible via the World Wide Web. Web hosting or web space is provided by corporations that offer storage space on a server they own or lease, for use by their clients. In addition to providing Internet connectivity, they will also provide a data center. Web hosting providers additionally offer additional data center space and connectivity to the web for servers that they do not own, but are located in a different facility, referred to commonly as the Housing.

What is a server? Don’t laugh, many people still ask “what is a server?” The types of servers that are available to choose from are linux servers or windows servers. These two types of servers differ from each other. Windows servers run with .asp file extensions, and linux servers run .php extensions. Also keep in mind a possible media server as well. A media server will enable you to play music in the web hosting environment. FYI, other types of servers are windows server 2008, exchange server, server 2008, microsoft server, windows 2008, and server 2003.

There are many affordable web hosting or web space options. A popular web hosting company is a Bluehost.com. They offer many different packages and some will allow you to operate as if you were running a small business server. Don’t misunderstand me, you will still be in a shared hosting environment, but the additional resources will allow you to host multiple websites appearing as though you are a small business server. Bluehost also offers flexible mail server options. You can even upgrade to a bulk mail server option.

Whether you prefer to call it a cloud server, internet server, network server, or online server, your website will ultimately be hosted on a server. It won”t necessarily be a free server, because internet servers, or network servers rarely are. The chances of finding an online server that is also a free server is slim.

When considering your choice for web hosting, do your diligence and determine your hosting needs. Or, you can simply take my recommendation and go with Bluehost.

Good luck and happy hosting!

]]> http://prodigy-designs.com/blog/web-design-development/what-is-web-hosting-or-web-space/feed/ 0 Developing a User Friendly Website http://prodigy-designs.com/blog/web-design-development/developing-a-user-friendly-website/ http://prodigy-designs.com/blog/web-design-development/developing-a-user-friendly-website/#comments Tue, 20 Dec 2011 01:29:49 +0000 prodblog_user http://prodigy-designs.com/blog/web-design-development/developing-a-user-friendly-website/ 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 :

]]> http://prodigy-designs.com/blog/web-design-development/developing-a-user-friendly-website/feed/ 0 Building Your First Website Things You Need To Know http://prodigy-designs.com/blog/web-design-development/building-your-first-website-things-you-need-to-know/ http://prodigy-designs.com/blog/web-design-development/building-your-first-website-things-you-need-to-know/#comments Mon, 19 Dec 2011 23:54:39 +0000 prodblog_user http://prodigy-designs.com/blog/web-design-development/building-your-first-website-things-you-need-to-know/ 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 :

]]> http://prodigy-designs.com/blog/web-design-development/building-your-first-website-things-you-need-to-know/feed/ 0 Creating Your Own Web Page is Easy A Tutorial Part 2 http://prodigy-designs.com/blog/web-design-development/creating-your-own-web-page-is-easy-a-tutorial-part-2/ http://prodigy-designs.com/blog/web-design-development/creating-your-own-web-page-is-easy-a-tutorial-part-2/#comments Mon, 19 Dec 2011 22:35:12 +0000 prodblog_user http://prodigy-designs.com/blog/web-design-development/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.

Technorati Tags :

]]> http://prodigy-designs.com/blog/web-design-development/creating-your-own-web-page-is-easy-a-tutorial-part-2/feed/ 0 Creating Your Own Web Page is Easy A Tutorial Part 1 http://prodigy-designs.com/blog/web-design-development/creating-your-own-web-page-is-easy-a-tutorial-part-1/ http://prodigy-designs.com/blog/web-design-development/creating-your-own-web-page-is-easy-a-tutorial-part-1/#comments Mon, 19 Dec 2011 20:55:01 +0000 prodblog_user http://prodigy-designs.com/blog/web-design-development/creating-your-own-web-page-is-easy-a-tutorial-part-1/ 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 :

]]> http://prodigy-designs.com/blog/web-design-development/creating-your-own-web-page-is-easy-a-tutorial-part-1/feed/ 0