Reviews and recommendations on this web site, including web hosting reviews, may result in commissions paid to Dave's Site. Follow on Twitter @firstdave
Check Out my new PhoneGap Tutorial / Cordova Tutorial


Hosting Tutorial - Table of Contents
This course was developed in much earlier days of the web and has been updated
into Web Design Basics for iPad (also written by me, but much better course!)
Try iPage Web Hosting -- Go Green for only $1.99/month (sponsored link)
Web Hosting HTML Tutorial CSS Tutorial Web Design Tutorial Hosting under $5


HTML Code MiniChapter 10: Publishing your Page

HTML Tutorial Chapters:  

HTML5 Basics - Web Hosting Ideas - CSS, Web Design, HTML, JQuery - Twitter - Learn on your iPad

Using FTP to upload your HTML files and web site...

< back to the previous chapter

Some web hosts no longer require you to use FTP to publish your files. Instead, they have an upload via web browser function. While upload via web browser is useful to send perhaps one or two files, it can be tedious to send multiple files. Nearly all web hosts support FTP, and that is why I choose to explain it in detail. It is also a good skill to have if you plan to design web sites for other people.

I encourage you to purchase a domain and web hosting package before promoting your new site.

Read about how domain hosting works and see my suggestions for hosting companies.

The FTP tutorial is now located in a separate chapter, 10.2. Click here to read the FTP tutorial chapter.


How to structure your HTML Links...

I apologize for the complexity of the section below. It is a difficult topic and may take some trial and error to master.

As a beginner, it is probably best to leave all HTML files and images in one folder. That way, when you link to and from your files with <a href="filename.html"></a> you do not need to have the full path.

For example, typing <a href="http://www.davesite.com/webstation/html/chap10.shtml">Chapter 10</a> is using the full path. Typing merely <a href="chap10.shtml">Chaper 10</a> is using a relative (not full) path.

Say you have two pages on your host (after registering your domain name, in this case I am using my demo site reallycreativename.com):

http://www.reallycreativename.com/index.html
http://www.reallycreativename.com/links.html

If you want to place a link from the index.html page to the links.html page, all you need to put is <a href="links.html">My Links Page</a>.

If you are editing your links.html page, and want to link it to the index.html page, all you need to type is <a href="index.html">My Main Page</a>.

Now if you want to get a little more advanced with folders, things get more challenging (although mastering it just takes a little trial and error).

Let's say you have a pet and you want it to have a web page at http://www.reallycreativename.com/mypet/.

You decide to create a folder on your hard drive as called My Documents\Web Site\mypet\

You should notice by this point that while Windows uses a backslash ( \ ) a web server uses a forward slash ( / ).

Then you code a web page called index.html and save it to My Documents\Web Site\mypet\index.html. You log onto your FTP server, and make a folder named mypet. (On FTP servers, you may have to select Create Directory which means the same thing as Create Folder.)

You upload your pet's index.html file into that new folder (mypets).

Now your File Structure looks like this:

http://www.reallycreativename.com/index.html
http://www.reallycreativename.com/links.html
http://www.reallycreativename.com/mypet/index.html

On your main index.html page, you want a link to your pet's index.html page in the mypet folder. The most common way to do this is type out the full URL path (Uniform Resource Locator path, pardon my official geek terms) as

<a href="http://www.reallycreativename.com/mypet/">Visit My Pet's Page!</a>
OR
<a href="http://www.reallycreativename.com/mypet/index.html">Visit My Pet's Page!</a>

But because your index.html is in the folder http://www.reallycreativename.com/ you can do it an easier way. Remember how you linked to links.html from index.html without using the full path? Well that is because they are in the same folder.

Since your pet's home page is only one folder further down, all you need to type for the link is:

<a href="mypet/index.html">Visit My Pet's Page!</a>
OR
<a href="mypet/">Visit My Pet's Page!</a>

Now you have a link to your pet's page... but say you want to link to your index.html in main site folder. Because the directory is up one folder in the file structure, you can use two periods (..) and then a slash (/) to move back.

So say you are editing your pet's index.html page in the directory mypet and want to link to your main page... here is how you can do it:

<a href="../index.html">Visit My Owner's Page!</a>
OR
<a href="../">Visit My Owner's Page!</a>

I know we covered a lot in this chapter, and you may have to re-read it a few times or print a copy to test it yourself. But it's awesome that you made it and now create your very own web site!

Important Read about Copyright Laws

While these are suggestions and I believe are truthful, this is not professional legal advice. Consult an attorney if you are unsure of anything.

All copyright laws still apply on the Internet as they do in other media. But it is often confusing about what is legal to do and what isn't. All original web pages on the web are copyrighted by their authors unless noted otherwise.

Pages that do not have a Copyright © notice can still be protected under copyright laws, and almost always are.

All images (including backgrounds, icons, etc.) are copyrighted. In order to use them you must have permission from the author.

Links to pages are not copyrighted, so you may link to copyrighted pages, but you may not use them as though they were yours.

To get the © symbol in your page, use the html code &copy; . e.g.

 &copy; Your Name. 

Legal stuff you can do:

  • Write Original Pages, make Original Graphics, and claim copyright on them.
  • Link to another web page that does not belong to you, as long as you do not claim it is yours.
  • Use graphics files that are noted as "free", such as graphics from a "free backgrounds" page or "free icons" page (by their original creator).
  • Use someone else's graphics with their permission.
  • Express your opinions on someone else's web page on your page, as long as no material from their page is used in your page. (You must realize that if you do this to them, and they don't like it, they can do the same to you.)

Illegal stuff you can't do:

  • Take someone else's web page and/or graphics, unmodified, and use it on your server.
  • Take someone else's web page and/or graphics, modify it, and claim ownership upon it.
  • Take someone else's graphics files, such as backgrounds, pictures, etc., and use them in your web pages.
  • Post or use any copyrighted material without permission of the copyright holder, whether it be text, books, magazine articles or pictures, music, whatever. If you didn't create it, and it's not in the public domain, chances are you can't use it.
  • A lot more. Copyright law is a detailed topic. There are entire web sites dedicated to it. But this list is the most common questions I am asked.
iPage 
has Outstanding Uptime and Performance


HTML An Interactive Tutorial
Continue Next Chapter

Download the app that replaced this guide,
Web Design Basics for iPad to
Learn HTML and CSS Quickly.