logo for free-computer-tutorials.net
leftimage for free-computer-tutorials.net

Build a Webpage


Special SiteSell Promotion

This buy one, get one, free is an opportunity that fits perfectly with this tutorial. Click on the above banner to learn more about building a website with SBI. Using this tutorial leaning basic HTML with CoffeeCup will help you build a wonderful online business.

If you have any question about the promotion or need help getting started please email me

Download CoffeeCup Firestarter - Click Here

Getting started

Creating your own website can be a fun way to share information with friends and family, share your wealth of knowledge with the world, or promote your business and find new customers. In this tutorial we will go over how to create a webpage using the Coffee Cup editor software. There are many free html editors that you can use and they are all similar, I just prefer this specific editor.

Once you have your webpage's designed you will need to find a place to host your website. There are several options to do this as well. I like the SBI hosting company. They offer reasonable monthly or yearly rates and help you get you site listed with the major search engines. SBI is also a great tool for choosing profitable material to base your website on. They help you choose topics and keywords to develop content.

In this tutorial series we will create a simple webpage using all of the basic html code and features you will need to build a simple webpage. This webpage will create paragraphs, change text color, bold, italicize, underline, and justify text, insert graphics, create inbound and outbound links, create a form, create a list, create a table and insert a flash video.

To start using Coffee Cup html editor follow this link: Download Free Web Design Software Here find the download link and click download. Follow the on screen prompts to install the software on your computer. When you are finished open Coffee Cup.

CoffeeCup working screen

Click the new button in the upper left under File. From the New menu click Quick Start. This will open the Quick Start window. This window works as wizard to get you started with the design of your page.

CoffeeCup Quick Start Window

This tutorial will have you enter text and images into the website for tutorial purposes. You do not have to use the tutorial text you may enter your own to make the webpage yours.

Type "Computer Help" in the page Title. Click on the file folder next to Background Image. When the browser window opens it will default to the CoffeeCup backgrounds. Double click on computer, then select comp010.jpg and click Open. The file name will be placed in the Background Image text box.

Keep the Color Scheme at the Default setting. The box below the Appearance section will show a preview of the webpage design.

In the Advanced section click in the Meta Description box and type "Get to know your computer with this easy to follow computer help site." The Meta Description is what search engines look for to optimize your site, determine page ranking and your readers will see when they are viewing a list of sites from a search.

Click in the Meta Keywords text box. Type "computer help, learn about your computer, computer tutorial". The Meta Keywords are words or a combination of words a person may use to find your web page on a search engine.

When you are finished filling in the Quick Start window click OK. This will bring you to the CoffeeCup code editor with the code to start your web page. The cursor for you to begin creating your page will be located between the start and end body tags.

Now you have the look and feel of your site we need to put together the body of the page. Every webpage should start with a heading or title at the top. This heading should match the name of the page you are creating. The reason for this is so search engines can find your site easier. To create a heading we need to change the font.

Inserting and Formatting Text

Justification Buttons

We want our heading centered at the top of our page. There is a row of justification buttons that look just like the ones in Microsoft Office programs, click the center button to enter the tags. The cursor will flash between the beginning and end tags.

CoffeeCup Font Header Sizes

Click on the down arrow of the A icon then click on Header Sizes. Select Header Size 1. This will place the html code in your web page. The cursor will blink between the beginning and end tag. Type Computer Help. Move to the end of the tag and press enter. Now click on the preview tab to see what your web page looks like so far. When you are satisfied with the look of the web page click on the Code Editor tab.

CoffeeCup Color window

We need to change the color of the heading text. Highlight the text Computer Help. Click on the down arrow of the A button and select font color. This will bring up the Color window. Click on the dark purple and click OK. This will return you to your code. There will be a tag in front of the text with hexadecimal number for the dark purple, and an end tag behind the text. All colors have a specific number assigned to them so a web browser can read the code and display the proper color. CoffeeCup has made it easy to find colors you are looking for with their color window doing the number calculation for you.

CoffeeCup Paragraph button

Now we need to put the body of the page together. Click on the paragraph symbol to enter the code to create a new paragraph. The paragraph tags will be inserted into the page. In between the paragraph tags is where you will type your paragraphs that will appear in your webpage. I recommend typing your text into a word document so you can copy and paste the text into the webpage and use word to check spelling and grammar. Go back to CoffeeCup Editor, make sure your cursor is still between the paragraph tags, hold down the ctrl button and press V to paste the paragraph into your webpage. Repeat these steps for the second and third paragraph.

These are the basics to get you started click one of the following links to learn more about adding to your webpage: insert graphics, create inbound and outbound links, create a form, create a list, create a table and insert a flash video.

Now that you know the very basics on how to create a webpage try creating one on your own about a topic that interests you or will benefit you. When you are finished go to SBI LINK fill out the order form at the bottom of the page and sign up to make your website live. Don't forget after you sign up and start uploading your pages to follow the action guide so you are creating the most profitable pages you can.

This tutorial is only the very basics to get you started. If you need an help please email or call. If you need any help with the SBI signup process, action guide, or uploading your pages please email me so I can help.





footer for Computer Tutorials page