So you’ve made your first web page based on the last tutorial and now you want to know how to change it and upload it. The most important thing to remember when working with web sites, web hosts and servers is that everything is based on files and folders just like your computer. On most hosts you’ll be allowed to access the folder “www” or “public-html” in your account. This is where you’ll be doing 99% of your work (unless of course you enlist the help of a professional design agency, like MadeSimpleMedia, in which case they’ll be doing the work for you!). Inside that folder you can create unlimited new folders for various parts of your website.

Editing Your Page

You already know the basics of HTML if you are posting on blogs. You know how to create links and most know how to add images. How the page looks now, however, is up to you. There are a number of free web design programs but I think it is important that you know how to do coding by hand. This way you’ll be able to locate and fix mistakes later on. We understand that you might be confused by all the technical jargon that we use on the page and so instead of trying to figure this out for yourself, you may want to have a look at this web design company who can help design your website so that you have no added stress when trying to design something like a new business website. Instead, it will be done for you.

Open up your “myfirstpage.html” page which you stored on your desktop last time. Right click or double click anywhere on the page to and select “View Source” or “View Page Source”. You will see the coding you cut and pasted last time.

Now let’s personalize it:

1. In the Header section insert the following code and invent a title for your page:

2. Go into the Body section and type something you’d like to tell the world. The following tags will be helpful to you.

Largest Heading Size

Smaller Heading Size

Smaller Heading Size

Paragraph

Emphasize

Horizontal Rule

Line Break

YourLink

Includes the off tag at the end. Other tags that could be included are width height border image title and alternative text. See my example index page for help with these.

3. Once you have your page looking the way you want it, be it coded by yourself or by a company specializing in Web Design, you are ready to learn how to upload it. Save it, only this time save it as index.html Why? Folders on servers expect an index page to be the first thing presented. Your page is now your index page which means you can create new pages and link to them from your index page. And since servers expect the index page to be displayed you will only have to type in your website name to reach your index page. Meaning you don’t have to add the index.html in your browser when calling up the page to look at. I have created and uploaded an index page for you to learn from here.

4. Finding a Free Host. Most free hosts will place some ads above your content. They will also allow you to upgrade your site to a paid version without ads. So for now leave it as a free account and if you find you like designing pages and creating things online upgrade later on.

We are looking for a free host that has Cpanel included. So we type into Google “free host cpanel” and one of the nicest ones we see is http://www.000webhost.com/. They offer reasonable account space and many features you can experiment with later on. They also offer you a demo version of their Cpanel which can be found here:

http://x3demob.cpx3demo.com:20…

Towards the bottom middle of the page you’ll see File Manager, that’s where the magic happens.

So go ahead and register on 000webhost.com or a simliar host with Cpanel, your username will become the subdomain of your site usually so choose wisely. You’ll receive a confirmation email, follow the instructions and you’ll be given access to your cpanel.

5. First you’ll login to your hosting account’s Control Panel or Cpanel and click on “File Manager”. You’ll see your folders laid out. As I mentioned in the introduction you’ll be uploading files on your new host to a folder called “www” or “public-html”. So open up your folder and then it works just like adding an attachment in an email. Click on the Upload Icon at the top of the screen. Search your computer, using “browse”, for the file you’d like to upload, then click “upload” or “send”. Your new file is now available for you and the world to see on the web.

6. Play around for a while make some more edits on your page and upload it again to see the changes. For a list of all HTML tags and what they do visit WebMonkey’s HTML Cheat Sheet. Bookmark it for easy reference.

We’ll save creating tables and dividers for next time as I think this is quite enough to keep you busy.

General tips:

Create a folder on your Desktop that has the same name as your new website. Put the index.html file in that folder.

Always work on your HTML files on your own computer first, save them, and then upload them, this way you’ll always have the latest copy of your pages on your own computer for editing purposes. Editing files online should be reserved for more experienced webmasters.

Creating a new page for your site. So you have your index page…now what?! Well, create a new page and call it anything you like on your computer such as “about.html”. Tell people about yourself and what you hope to do with the website. Include a link to your index.html page called “Home” and save it. Upload about.html to your WWW/Public-HTML Folder. Then link to it from your index page. you now have a two page site. Repeat the process for any additional pages.

HEADER TAGS – Header tags are important but not for right now. We’ll discuss them in detail later on. And Until you feel comfortable creating, editing and uploading HTML files, stay out of the other areas of the Cpanel.

If you get stuck anywhere along the line go back to your coding and check to make sure your tags are formatted correctly. If it still doesn’t work for you let me know in the comments. Place a link to your new site and page that is hanging you up and what your problem is.