START A COURSE

The HTML and CSS Blog:

How to Upload a Web Page to the Internet

What You Learn in This HTML Lesson

Previously in this three-part series, you learned how the the Internet works, what a server is and a web host too. But all that was a broad overview, today we’ll go over the basics of how to upload a web page.

How to Upload a Web Page

Now you know that a web page is just a file on a computer somewhere, and when you go to the url you download that file onto your own computer so you can view it on your own computer. This simplifies a lot of things, because you probably already know how your own computer works, so creating that website just got a lot easier.

For example, when you see a site like this:

treeinahole.com/hole-in-the-ground/green-grass-grew-all-around.html

you now know that green-grass-grew-all-around.html is a just an html file that exists on some server. But what of the rest? Well since we know it’s on a computer, the most logical thing would be for those other things to be files, just like we keep our photos of Mr. Pink in a folder called “dogs” and our photos of kittens in a folder called “Devil Spawn”.

Pinkerton dog likes uploading files to the Internet

Mr. Pink likes: file management, walks on the beach. Hates: cats and other devil spawn [Image via Future Is Fiction]

Likewise, your server has a folder called “treeinahole” and inside that is a folder called “hole-in-the-ground” and inside that folder is an HTML file called green-grass-grew-all-around.html.

On your web server, there is a website named after your domain. Thus somewhere on this blue-green planet there is a server with a folder on it called learnhtmlwithsong, and inside that are all the other folders that organize this site.

When you start building your website, the first thing you’re going to want to do is to create a new folder in your operating system that has the same name as the website.

Now you can organize the folders within that however you want, but you should set up a folder structure that is as similar as possible to that of the one you want on the remote computer. That way, when you upload your file all the links you put in your HTML document will still work.

There are multiple ways to upload your shiny new HTML file to your website. Many web hosts provide their own little system for this, so they can say they have extra trappings. But if you learn to upload web pages with their service you’d be totally confused should you switch to a new web host. You can use the command line, but if you just learned what a web host is the command line is probably not for you. We recommend you use an FTP program, short for “file transfer protocol” because, you know, it’s a way for you to transfer files like web pages.

There are lots of free FTP programs. Download one and install it.

how to upload a web page: use an FTP program. This is WinSCP

Use a program like WinSCP [pictured here] to upload web pages and other files to the Internet

You don’t want just anyone to be able to delete all those web pages remotely, do you? What if someone decides to replace all your web pages with pictures of vicious, evil clowns (Hey, you never know)? That’s why when you first open the FTP program, you have to tell it your username and password, the one you got from your web host, to prove you are legit.

evil clowns love to hack computers [Creative Commons evil clown]

Do not give this guy your FTP password. [image via Matt Westgate]

After you’ve successfully logged in, the FTP program will show you your files on your local computer on one side and the files on your remote computer (your server) on the other. Now it’s as simple as finding the file on your computer and navigating to the file on your remote computer where you want the new web page to go. That’s all there is to it.

This is intended to be an overview of how everything works. If you need more help using FTP, contact your web host for support.

Karma Bennett is learning html with songThis is a guest post by Karma Bennett

Karma Bennett is the Learn HTML With Song girl friday, helping with social media, web marketing and editing. She loves dancing, taking photos of Bay Area graffiti, writing about culture and books, singing along to muzak at the grocery store, and helping people find their new favorite bands.

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.

HTML Lessons

©2013 Diane Presler. All rights reserved.