eMe: Your first home page

Where are we?

You bought a hosting account. Now it’s time to add a home page.

This lesson’s goals

By the end of this lesson, you should:

  • Understand the information your hosting company sent you.
  • Be able to copy-and-paste HTML for your home page, and change it (a little) for your needs.
  • Be able to upload the home page to your server.
  • Be able to access your home page with your browser.
  • Be able to set up an email account on your domain.

Understanding your hosting account

When you bought your hosting account, you entered your email address. You got emails from your hosting company, telling you how to use your account. So let’s start doing some stuff.

Er, you did get a hosting account, right? If not, click this:

Buy hosting

If you buy hosting using this link, CoreDogs gets a referral fee.

OK, I’ll stop nagging now.

Here’s part of the email I got when I signed up with Hostgator:

Email from hosting company

Figure 1. Email from hosting company

(1) is the domain, like doomdogs.com. Remember that the domain name is really an alias to the IP address of your server, shown in (4). As we discussed earlier, DNS servers, also called name servers, help Web browsers make the connection between domain names and IP addresses. It can take a few days for new domain registrations to “propagate,” or reach all of the Internet’s DNS servers. Until that happens, you can still reach your Web site using the IP address directly. That’s what (6) and (7) are all about.

Your primary name servers are shown in (5). You might need this information if you want to move your server to another host.

Have a look at the home page of your Web site. Use your domain name or, if you just set up your account and your DNS entry hasn’t propagated yet, use the link at (7).

What you see isn’t exactly what you want. Let’s fix that.

Making a home page

You first home page will just be plain HTML, with some CSS to add a little color. You’ll follow these steps:

  • Start up a text editor with a blank file.
  • Copy-and-paste some code I’ll give you.
  • Edit it to add your name and some other things.
  • Test the file in a browser.

OK, let’s get started. I’ll be doing everything with Windows. The steps are the same for another OS, but you’ll have a different editor and FTP client.

Starting a text editor

An HTML file is just plain text. You can create it with any editor that lets you create plain text.

Which one to use for this project? You could use Notepad, the editor that comes with Windows. But it’s…, well, not very good. Let’s try something else.

Download and install Notepad++. It’s free, and fairly good. When you really start learning HTML, I recommend you use something more powerful, like Netbeans (get the PHP bundle). But use Notepad++ for now. It’s easier to get started with.

The Notepad++ Web site can be a little confusing. Here’s a direct link to the download page. As I’m writing this, there’s a big green button with Download on it. Download the installer (the program that will install Notepad++), and run it.

CC
CC

Can I just use Microsoft Word?

Kieran
Kieran

No! No! A thousand times no!

HTML files are plain text. Word files are not plain text. Word inserts strange characters that can break Web pages.

Some programs do a decent job of converting Word text into plain text. But if you’re starting a Web page from scratch, you’re better off using a plain text editor.

Start by creating a directory for your project on your home computer.

You’ll be doing lots of CoreDogs projects. It’s best to create a separate directory for each one. This keeps all the related files together, and stops them interfering with each other.

On your PC, make a directory inside your home folder (e.g., My documents, or Documents) and call it coredogs. Inside the coredogs directory, create a directory called first-home-page.

Notice the names I suggested. We’re going to follow two rules for directory and file names in CoreDogs:

  • Lowercase
  • Separate parts of names with dashes

Remember that directory and file names on Unix servers are case-sensitive. Unix thinks that Myfiles and myfiles are different directories, and X.html and x.html are different files. Standard practice is to use all lowercase to avoid confusion.

Although you’re probably working on a Windows PC now, eventually you’ll upload everything to your server, which probably runs Unix. It’s best to prepare for that step now, by making directory and file names lowercase. Then you won’t have to go back and change things.

It helps readability to have names like first-home-page rather than firsthomepage. Spaces are allowed in file names (like first home page), but sometimes you have to follow special rules to handle them. It’s easiest to avoid the issue all together, and use dashes instead of spaces.

Many people use underscores (_) instead of dashes (-) in Web work. So why do I recommend dashes in directory and file names? Because Google prefers it. This might make your pages easier for people to find.

Start Notepad++. Type “Hi!” and save your work into the file index.html in your project directory. This isn’t HTML yet, but it will be.

Hi!

Figure 2. Hi!

index.html is the default file name servers use when a URL doesn’t include one. That makes it the best name for a home page. We talked about this earlier.

Now open the file in a browser. How? The way I normally do it is to double-click the HTML file.

Open the file

Figure 3. Open the file in a browser

My PC uses Firefox as its default Web browser. You should download Firefox and install it. I recommend making Firefox your default browser, though you don’t have to.

Another way to open a file in your browser is to use File | Open in your browser’s menu.

When you’ve loaded the file into your browser, you should see something like this:

Hi from the browser

Figure 4. Hi from the browser

Now let’s change that to real HTML.

Adding the HTML

In Notepad++, delete “Hi!” Then copy the code below into your file.

<!DOCTYPE HTML PUBLIC 
    "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" 
        content="text/html; charset=utf-8">
    <title>[Full Name]'s Home Page</title>
    <style type="text/css">
      body {
        font-size: 14px;
        font-family: Verdana, sans-serif;
        background-color: #FFFFFA;
      }
      h1 {
        color: #660000;
      }
    </style>
  </head>
  <body>
    <h1>Welcome</h1>
    <p>I'm [Full Name]. I'm a [student, mother, cook, and dog lover].</p>
    <p>I'm learning to be a Weber. A Weber is someone who gets paid
    to work on Web sites. I'm a beginner, but learning fast.</p>
    <p>There's not much on this page right now. But as I learn more, 
    this site will have some cool stuff on it.</p>
    <p>I'm learning with <a href="http://coredogs.com/">CoreDogs</a>.</p>
  </body>
</html>

Figure 5. Code for your page

To copy the code, put your mouse anywhere on the code, and a toolbar will appear in the upper right:

Figure toolbar

Figure 6. Toolbar

Then choose the copy icon.

Copy code

Figure 7. Copy code

Paste into Notepad++.

You need to make a few changes. Replace the text [Full Name] with your name. Replace the description list ([student, mother, ...]) with whatever applies to you.

You can keep or delete the CoreDogs link. If you want to get rid of it, delete line 27.

Save the file, and look at it in your browser.

W00f!

Uploading to your server

There are various ways to get files from your computer to your server. The most common is to use FTP. FTP stands for file transfer protocol.

Let’s think back a moment. Recall that when you use the Web, you use the HTTP protocol. You have an HTTP client (a Web browser, usually) that works with an HTTP server (like Apache).

HTTP client and server

Figure 8. HTTP client and server

FTP is similar. There’s an FTP client running on your computer, that interacts with an FTP server.

FTP client and server

Figure 9. FTP client and server

Usually, the FTP server software is on the same computer as the Web server software. So when you use FTP to upload a file to the server computer’s disk, it’s available to your Web server.

FTP and Web server on the same computer

Figure 10. FTP and Web server on the same computer

There are other protocols that do the same job as FTP. The most common are SCP and SFTP. They work more-or-less the same as FTP.

So, here’s how a Weber publishes a page to a site.

Publishing a page

Figure 11. Publishing a page

The Weber creates a file on his/her computer, and uploads it to the server (1). The server stores the file on its disk drive (2).

Later, a user clicks on a URL that maps to the file. The server grabs the file (3), and sends it to the user (4).

Get an FTP client

Time to install an FTP client program. Let’s use WinSCP. It’s good, and free.

Download and run the WinSCP installer program. If it asks you what type of interface to use, select the Commander interface.

Start up WinSCP. You’ll need to establish a connection to your FTP server before you can upload anything. Start a new session, and let’s fill in the connection information.

FTP login

Figure 12. FTP login

Type the address of your host in (1). For Hostgator, that is usually just you domain name. For other hosts, it might be ftp. and your domain name, like ftp.mysite.com.

Type your user name and password in (3) and (4). They’re from your welcome email, the one we saw in Figure 1. Here it is again. (The user name and password are items 2 and 3 in this figure.)

Email from hosting company

Figure 1 (again). Email from hosting company

The protocol in (5) should be FTP. Leave the port (2) alone, unless you have instructions otherwise. You can save your connection information at this point, if you want to make it easier to connect later. But don’t do this on a public machine! Only on one that’s physically secure.

Click Login when you’re ready to connect.

You’ll get a split screen:

FTP client

Figure 13. FTP client

Drag files from left to right to upload (from your local computer to your server). Drag from right to left to download (from your server to your local computer). You can drag entire directories, if you want.

Remember the concept of a Web site’s root? That’s the directory on a server’s disk drive that corresponds to the root of a Web site. So the Web root for doomdogs.com might be /sites/dd/. If you want to make a Web page available on the Internet as http://doomdogs.com/firefly.html, you would copy it to /sites/dd/firefly.html.

When the FTP client first connects, it usually doesn’t show you your Web root. It shows the files one level above the Web root (or maybe some other location entirely). Hostgator and most other hosting accounts work this way.

FTP root versus Web root

Figure 14. FTP root versus Web root

Now, you want to put your files into the Web root, which is public_html. The www in the figure is a shortcut to public_html, called a “symbolic link” in Unix. They both point to the same place.

Double-click on public_html or www. This will show the contents of that directory in the right-hand pane.

Now, in the left-hand pane, navigate to where you stored the file you created on your computer (index.html).

Then upload the file index.html to your server. Drag from the left and drop on the right.

Look at your home page in your browser

Type your domain name into your browser, like http://a.com. You should see your home page. In fact, everyone can now look at your home page.

Major w00f, with w00f sprinkles!

Set up an email account

Let’s do one more thing before we end the lesson: set up an email account.

This doesn’t involve FTP, so you can close WinSCP. Instead, we’ll use your Web site’s control panel.

The control panel is a Web page that makes it easier to manage your Web site. The URL of your control panel came in the welcome email from your hosting company. It might be something like http://doomdogs.com/cpanel. Go to the URL, and enter your user name and password.

There are about a bazillion buttons on a typical control panel. They’re organized into groups. One of the groups is about email. Here’s a typical one.

Email control panel

Figure 15. Email control panel

Click the icon “Email accounts.” You’ll see a form to add an email account.

Add an email account

Figure 16. Add an email account

You can create email accounts for your friends, family (including humans), even for your Evil Twin.

Your account includes Web mail applications that let users read and send mail. How users do it will depend on your hosting company. For Hostgator, if your domain is evilplatypus.com, your email users can check their accounts at http://evilplatypus.com/webmail. They will need to use their fully qualified email addresses to log in, that is, “bill@evilplatypus.com” and not just “bill.”

Again, this is for Hostgator. Other companies do things differently.

Summary

In this lesson, you:

  • Learned how to use the information your hosting company sent you.
  • Created your first home page by copy-and-paste.
  • Uploaded your home page to your server.
  • Accessed it through a browser.
  • Saw how to set up an email account.

How to...

Lessons

User login

Log in problems? Try here


Dogs