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. Inside that folder, you can create unlimited new folders for various parts of your website. If you have used Guelph Website Design or any other web design, your folders may look slightly different depending on the layout but they will all work in the same way.
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.
Of course, if coding REALLY isn’t your thing then you could always outsource the design of your website to a web designer, like The Story web design, which would certainly be a lot less work for you, and you are guaranteed a professional job. But keep reading if you are anxious to learn how to do it yourself.
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, or are ready to learn how to upload it. Save it, only this time save it as index.html Why? Folders on servers expect and 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. It is the access to the main meat and potatoes of your website.
So go ahead and register on 000webhost.com – or another host like M247 Romania – 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 accounts 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 thins 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 you 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. You might even decide to work with a digital agency that is right for your company if you’re trying to learn how to build a website for your companies launch but can’t get to grips with the coding. They can help you create something that might better achieve the vision you’re going for.