Web pages are a dish best served on the Internet. So far you’ve only created HTML pages that live on your own computer. You’ve also only linked to pages that are on your own computer. We’re about to change all that. In this chapter we’ll encourage you to get those web pages on the Internet where all your friends, fans, and customers can actually see them. We’ll also reveal the mysteries of linking to other pages by cracking the code of the h, t, t, p, :, /, /, w, w, w. So, gather your belongings; our next stop is Webville.
WARNING: once you get to Webville, you may never come back. Send us a postcard.
You’re closer to getting Starbuzz—or even better, your own site—on the Web than you might think. All you need to do is find a “web hosting company” (we’ll call this a “hosting company” from now on) to host your pages on their servers, and then copy your pages from your computer to one of those servers.
Of course it helps to understand how your local folders are going to “map” to the server’s folders, and once you put your pages on the server, how you point a browser to them. But we’ll get to all that. For now, let’s talk about getting you on the Web. Here’s what you’re going to need to do:
Find yourself an hosting company.
Choose a name for your site (like www.starbuzzcoffee.com).
Find a way to get your files from your computer to a server at the hosting company (there are a few ways).
Point your friends, family, and fans to your new site and let the fun begin.
We’re going to take you through each of these steps, and even if you’re not going to set up a website online right now, follow along because you’ll learn some important things you’ll need to know later. So, get ready for a quick detour from HTML...
A Web Detour
To get your pages on the Web, you need a server that actually lives on the Web full-time. Your best bet is to find a hosting company and let them worry about the details of keeping a server running. No worries, though; finding a hosting company is fairly straightforward and inexpensive.
Which company? Well, we’d love to sign you up for web hosting at Head First Hip Web Hosting, Inc., but that doesn’t really exist. So, you’re going to have to do a little homework on your own. While finding a company to host your pages isn’t difficult, it’s kind of like choosing a cable TV company: there are lots of options and plans. You really have to shop around for the best deals and for the service that works for you.
The good news is that you should be able to get started for almost nothing out of your pocket, and you can always upgrade later if you need additional features. While we can’t suggest a particular provider, we can tell you a few things to look for in a provider, and we also list a few of the more popular providers at:
http://wickedlysmart.com/hosting-providers/
A Web Detour
One-minute hosting guide
We can’t tell you everything you need to know about getting a hosting company (after all, this book is about HTML and CSS), but we’re going to give you a good push in the right direction. Here are some features to think about while you’re shopping.
Technical support: Does the hosting company have a good system for handling your technical questions? The better ones will answer your questions quickly either over the phone or via email.
Data transfer: This is a measure of the amount of pages and data the hosting company will let you send to your visitors during a given month. Most hosting companies offer reasonable amounts of data transfer for small sites in their most basic plans. If you’re creating a site that you expect will have lots of visitors, you may want to carefully look into this.
Backups: Does the hosting company regularly make a backup of your pages and data that can be recovered in the event that the server has a hardware failure?
Domain names: Does the hosting company include a domain name in its pricing? More about these on the next page.
Reliability: Most hosting companies report keeping websites up 99% of the time or better.
Goodies: Does your package include other goodies such as email addresses, forums, or support for scripting languages (something that may become important to you in the future)?
Even if you’ve never heard of a domain name, you’ve seen and used a zillion of them; you know...google.com, facebook.com, amazon.com, disney.com, and maybe a few you wouldn’t want us to mention.
So what is a domain name? Just a unique name that is used to locate your site. Here’s an example:
There are a couple of reasons you should care about domain names. If you want a unique name for your site, you’re going to need your own domain name. Domain names are also used to link your pages to other websites (we’ll get to that in a few pages).
There is one other thing you should know. Domain names are controlled by a centralized authority (ICANN) to make sure that only one person at a time uses a domain name. Also (you knew it was coming), you pay a small annual registration fee to keep your domain name.
The easy answer is to let your hosting company worry about it. They’ll often throw in your domain name registration with one of their package deals. However, there are hundreds of companies that would be glad to help—you can find a list of them at:
http://www.internic.net/regist.html
As with finding a hosting company, we’re afraid we’ll have to leave you to find and register your own domain name. You’ll probably find that going through your hosting company is the easiest way to get that done.
A Web Detour
Congratulations! You’ve got your hosting company lined up, you’ve found a domain name, and you’ve got a server all ready for your web pages. (Even if you don’t, keep following along because this is important stuff.)
Now what? Well, it’s time to move in, of course. So, take that For Sale sign down and gather up all those files; we’re going to get them moved to the new server. Like any move, the goal is to get things moved from, say, the kitchen of your old place to the kitchen of your new place. On the Web, we’re just worried about getting things from your own root folder to the root folder on the web server. Let’s get back to Starbuzz and step through how we do this. Here’s what things look like now:
You’re now one step away from getting Starbuzz Coffee on the Web: you’ve identified the root folder on your hosting company’s server and all you need to do is copy your pages over to that folder. But how do you transfer files to a web server? There are a variety of ways, but most hosting companies support a method of file transfer called FTP, which stands for File Transfer Protocol. You’ll find a number of applications out there that will allow you to transfer your files via FTP; we’ll take a look at how that works on the next page.
Seriously, this really is an HTML and CSS book, but we didn’t want to leave you up a creek without a paddle. So, here’s a very quick guide to using FTP to get your files on the Web. Keep in mind your hosting company might have a few suggestions for the best way to transfer your files to their servers (and since you are paying them, get their help). After the next few pages, we’re off our detour and back to HTML and CSS until we reach the end of the book (we promise).
We’ll assume you’ve found an FTP application. Some are command-line driven, some have complete graphical interfaces, and some are even built into applications like Dreamweaver and Expression Web. They all use the same commands, but with some applications you type them in yourself, while in others you use a graphical interface. Here’s how FTP works from 10,000 feet:
First, connect to your server using FTP.
Use the “cd” command to change your current directory to the directory where you want to transfer files.
Transfer your files to the server using the “put” command.
You can also make a new directory on the server with the “mkdir” command.
You can retrieve files too, with the “get” command.
Let’s put all that together. Here’s an example of FTP being used from a command-line application:
Popular FTP applications
Here are a few of the most popular FTP applications for Mac and Windows:
For Mac OS X:
Fetch (http://fetchsoftworks.com/) is one of the most popular FTP applications for Mac. $
Transmit (http://www.panic.com/transmit/). $
Cyberduck (http://cyberduck.ch/). FREE
For Windows:
Smart FTP (http://www.smartftp.com/download/). $
WS_FTP (http://www.wsftple.com/). FREE for the basic version, $ for the Pro version
Cyberduck (http://cyberduck.ch/). FREE
DO try this at home
It’s another homework assignment for you (check each item as you do it):
Make sure you know where your root folder is on the server at your hosting company. | |
Figure out the best way (and the best tool to use) to transfer files from your computer to the server. | |
For now, go ahead and transfer the Starbuzz “index.html” and “mission.html” files to the root folder of the server. |
End of Web Detour
That’s the end of the detour, and we’re back on the web superhighway. At this point, you should have the two Starbuzz pages, “index.html” and “mission.html”, sitting under your root folder on a server (or if not, you’re at least following along).
After all this work, wouldn’t it be satisfying to make your browser retrieve those pages over the Internet and display them for you? Let’s figure out the right address to type into your browser...
You’ve probably heard the familiar “h” “t” “t” “p” “colon” “slash” “slash” a zillion times, but what does it mean? First of all, the web addresses you type into the browser are called URLs or Uniform Resource Locators.
If it were up to us, we would have called them “web addresses,” but no one asked, so we’re stuck with Uniform Resource Locators. Here’s how to decipher a URL:
A Uniform Resource Locator (URL) is a global address that can be used to locate anything on the Web, including HTML pages, audio, video, and many other forms of web content.
In addition to specifying the location of the resource, a URL also names the protocol that you can use to retrieve that resource.
To locate anything on the Web, as long as you know the server that hosts it, and an absolute path to the resource, you can create a URL and most likely get a web browser to retrieve it for you using some protocol—usually HTTP.
HTTP is also known as the HyperText Transfer Protocol. In other words, it’s an agreed-upon method (a protocol) for transferring hypertext documents around the Web. While “hypertext documents” are usually just HTML pages, the protocol can also be used to transfer images, or any other file that a web page might need.
HTTP is a simple request and response protocol. Here’s how it works:
So each time you type a URL into your browser’s address bar, the browser asks the server for the corresponding resource using the HTTP protocol. If the server finds the resource, it returns it to the browser and the browser displays it. What happens if the server doesn’t find it?
If the resource can’t be found, you’ll get the familiar “404 Error,” which the server reports back to your browser.
The last time we talked about paths, we were writing HTML to make links with the <a> element. The path we’re going to look at now is the absolute path part of a URL, the last part that comes after the protocol (http) and the website name (www.starbuzzcoffee.com).
An absolute path tells the server how to get from your root folder to a particular page or file. Take Earl’s Autos site, for example. Say you want to look in Earl’s inventory to see if your new Mini Cooper has come in. To do that, you’ll need to figure out the absolute path to the file “inventory.html” that is in the “new” folder. All you have to do is trace through the folders, starting at the root, to get to the “new” folder where his “inventory.html” file is located. The path is made up of all the folders you go through to get there.
So, that looks like root (we represent root with a “/”), “cars”, “new”, and finally, the file itself, “inventory.html”. Here’s how you put that all together:
Sharpen your pencil
You’ve waited long enough. It’s time to give your new URL a spin. Before you do, fill in the blanks below and then type in the URL (like you haven’t already). If you’re having any problems, this is the time to work with your hosting company to get things sorted out. If you haven’t set up an hosting company, fill in the blanks for www.starbuzzcoffee.com, and type the URL into your browser anyway.
Note
Remember, when we’re talking about web servers or FTP, we usually use the term “directory” instead of “folder.” But they’re really the same thing.
Yes, there is. One thing we haven’t talked about is what happens if a browser asks for a directory rather than a file from a web server. For instance, a browser might ask for:
http://www.starbuzzcoffee.com/images/or
http://www.starbuzzcoffee.com/When a web server receives a request like this, it tries to locate a default file in that directory. Typically a default file is called “index.html” or “default.htm” and if the server finds one of these files, it returns the file to the browser to display.
So, to return a file by default from your root directory (or any other directory), just name the file “index.html” or “default.htm”.
Note
But you need to find out what your hosting company wants you to name your default file, because it depends on the type of server they use.
Oops, you sure did. When a server receives a request like yours without the trailing “/” and there is a directory with that name, then the server will add a trailing slash for you. So if the server gets a request for:
http://www.starbuzzcoffee.com/index.htmlit will change it to:
http://www.starbuzzcoffee.comwhich will cause the server to look for a default file, and in the end it will return the file as if you’d originally typed:
http://www.starbuzzcoffee.com/Behind the Scenes
Earl needs a little help with his URLs
Earl may know Earl, but he doesn’t know U-R-L. He needs a little help figuring out the URL for each of the files below, labeled A, B, C, D, and E. On the right, write in the URL needed to retrieve each corresponding file from www.earlsautos.com.
URLs aren’t just for typing into browsers; you can use them right in your HTML. And, of course, right on cue, the Starbuzz CEO has a new task for you: make a link from the main Starbuzz page over to the caffeine information at http://wickedlysmart.com/buzz. As you can probably guess, we’re going to throw that URL right into an <a> element. Here’s how:
That’s all there is to it. To link to any resource on the Web, all you need is its Uniform Resource Locator, which goes in the <a> element as the value of the href attribute. Let’s go ahead and add this in the Starbuzz “index.html” page.
Open your Starbuzz “index.html” file in the “chapter4/starbuzz” folder, and scan down to the bottom. Let’s add two new links: a relative link to the mission statement in “mission.html”, and a link to Caffeine Buzz. Make the changes below, then save and load your “index.html” file in your browser. Click on the link and enjoy the Caffeine Buzz.
There are no Dumb Questions
Q:
Q: It seems like there are two ways to link to pages now: relative paths and URLs.
A:
A: Relative paths can only be used to link to pages within the same website, while URLs are typically used to link to other websites.
Q:
Q: Wouldn’t it be easier if I just stuck with URLs for links to my own pages and outside pages? That would work, wouldn’t it?
A:
A: Sure, it would work, but there’s a couple of reasons you don’t want to go there. One problem is that URLs are hard to manage when you have a lot of them in a web page: they’re long, difficult to edit, and they make HTML more difficult to read (for you, the page author).
Also, if you have a site with nothing but URLs that link to local pages and you move the site or change its name, you have to go change all those URLs to reflect the new location. If you use relative paths, as long as your pages stay in the same set of folders—because the links are all relative—you don’t have to make any changes to your <a> element href attributes.
So, use relative links to link to your own pages in the same site, and URLs to link to pages at other sites.
Q:
Q: Haven’t we seen one other protocol? I kept seeing “file:///” before we started using a web server.
A:
A: Yes; good catch. The file protocol is used when the browser is reading files right off your computer. For example, the file URL, “file:///chapter4/starbuzz/index.html”, tells the browser that the file “index.html” is located at the path “/chapter4/starbuzz/”. This path may look different depending on your operating system and browser.
One important thing to notice in case you try to type in a file URL is that the file URL has three slashes, not two, like HTTP. Remember it this way: if you take an HTTP URL and delete the website name you’ll have three slashes, too.
Q:
Q: Are there other protocols?
A:
A: Yes, many browsers can support retrieval of pages with the FTP protocol, and there is a mail protocol that can send data via email. HTTP is the protocol you’ll be using most of the time.
Q:
Q: I’ve seen URLs that look like this: http://www.mydomain.com:8000/index.html. Why is there a “:8000” in there?
A:
A: The “:8000” is an optional “port” that you can put in an HTTP URL. Think of a port like this: the website name is like an address, and the port is like a mailbox number at an address (say, in an apartment complex). Normally everything on the Web is delivered to a default port (which is 80), but sometimes web servers are configured to receive requests at a different port (like 8000). You’ll most likely see this on test servers. Regular web servers almost always accept requests on port 80. If you don’t specify a port, it defaults to 80.
Can you say “web career”? You’ve certainly delivered everything the Starbuzz CEO has asked for, and you’ve now got a high-profile website under your belt (and in your portfolio).
But you’re not going to stop there. You want your websites to have that professional “fit and finish” that makes good sites into great ones. You’re going to see lots of ways to give your sites that extra “polish” in the rest of this book, but let’s start here with a way to improve your links.
Wouldn’t it be nice if there were a way to get more information about the link you’re about to click on? This is especially important for the visually impaired using screen readers because they often don’t want the entire URL spoken to them: (“h” “t” “t” p” “:” “slash” “slash” “w” “w” “w” “dot”), and yet the link’s label usually only gives a limited description, like “Caffeine Buzz.”
The <a> element has an attribute called title just for this purpose. Some people are confused by this attribute name because there’s an element named <title> that goes in the <head>. They have the same name because they are related—it is often suggested that the value of the title attribute be the same as value of the <title> element of the web page you are linking to. But that isn’t a requirement and often it makes more sense to provide your own, more relevant description in the title attribute.
Here’s how you add a title attribute to the <a> element:
For most browsers, the title is displayed as a tool tip when you pass the mouse over a link. Remember that browsers for the visually impaired may read the link title aloud to a visitor.
The Head First Guide to Better Links
Here are a few tips to keep in mind to further improve the fit and finish of your links:
Keep your link labels concise. Don’t make entire sentences or large pieces of text into links. In general, keep them to a few words. Provide additional information in the title attribute.
Keep your link labels meaningful. Never use link labels like “click here” or “this page.” Users tend to scan pages for links first, and then read pages second. So, providing meaningful links improves the usability of your page. Test your page by reading just the links on it; do they make sense? Or do you need to read the text around them?
Avoid placing links right next to each other; users have trouble distinguishing between links that are placed closely together.
So far, whenever you’ve linked to another page, the page loads and your browser displays it from the top.
But the CEO’s asking you to link into a particular spot in the page: the Coffee section.
Sound impossible? Come on, this is Head First—we’ve got the technology. How? Well, we haven’t told you everything about the <a> element yet. Turns out the <a> element can team up with the id attribute to take you straight to a specific point in a page.
We haven’t talked about the id attribute yet; it’s an important attribute with special properties, and we’ll get into more detail about other special properties of id later in the book. For now, think of it as a way of uniquely identifying an element. One special property that elements with ids get is that you can link to them. Let’s see how to use the id attribute to create a destination in a page for <a>.
Find the location in the page where you’d like to create a landing spot. This can be any text on the page, but often is just a heading.
Choose an identifier name for the destination, like “coffee” or “summary” or “bio,” and insert an
idattribute into the opening tag of the element.
Let’s give it a try. Say you want to provide a way to link to the Chai Tea item on the Starbuzz page. Here’s what it looks like now:
Following the two steps above, we get this:
You already know how to link to pages using either relative links or URLs. In either case, to link to a specific destination in a page, just add a # on the end of your link, followed by the destination identifier. So if you wanted to link from any Starbuzz Coffee web page to the “chai” destination heading, you’d write your <a> element link this:
<a href="index.html#chai">See Chai Tea</a>Unfortunately, linking to Chai Tea isn’t very impressive because the whole page is small enough that it easily fits in the browser. Let’s link to the Coffee section of http://wickedlysmart.com/buzz instead. Here’s what you’re going to do:
Note
The main benefit of specific destinations is to link to locations in long files so your visitors don’t have to scroll through the file looking for the right section.
Figure out the id of the Coffee heading.
Alter the existing
<a>element in the Starbuzz Coffee “index.html” file to point to the destination heading.Reload your “index.html” page and test out the link.
To find the destination heading, you’re going to have to look at the wickedlysmart.com/buzz page and view their HTML. How? Almost all browsers have a “View Source” option. So, visit the page and when it is fully loaded, choose the “View Source” option, and you’ll see the markup for the page.
Scroll down until you see the Coffee section; it looks like this:
We have another new requirement from the Starbuzz CEO (there are always new requirements for websites). What he wants is this: when you click on the “Caffeine Buzz” link in the Starbuzz Coffee page, the Starbuzz Coffee page shouldn’t go away. Instead, a whole new window should open up with the Caffeine Buzz page in it, like this:
To open a page in a new window, you need to tell the browser the name of the window in which to open it. If you don’t tell the browser a specific window to use, the browser just opens the page in the same window. You can tell the browser to use a different window by adding a target attribute to the <a> element. The value of the target attribute tells the browser the “target window” for the page. If you use “_blank” for the target, the browser will always open a new window to display the page. Let’s take a closer look:
Brain Power
Can you think of some advantages and some disadvantages to using the target attribute to open a page in a new window?
HTMLcross
Here are some mind benders for your left brain.
Across | Down |
|---|---|
1. Web address to a resource. 3. A Mac FTP application. 7. Unique name on the Web. 8. The file you get when you ask for a directory. 10. What are you supposed to send back from Webville? 12. Top directory of your website. 13. Protocol we’ve been using up until this chapter. 16. People can scan these rather than reading text. 17. Path from the root. 18. Controls domain names. 19. The file you get when you ask for a directory. | 2. Top directory of your website. 4. Request/response protocol. 5. Keep your link labels _____. 6. Attribute used to make an element into a destination. 9. Earl sold these. 11. Always use these kinds of links when linking to pages on the same server. 14. Wrong way to pronounce URL. 15. Informative caffeine site. |
Bullet Points
Typically the best way to get on the Web is to find a hosting company to host your web pages.
A domain name is a unique name, like amazon.com or starbuzzcoffee.com, that is used to identify a site.
A hosting company can create one or more web servers in your domain. Servers are often named “www”.
The File Transfer Protocol (FTP) is a common means of transferring your web pages and content to a server.
FTP applications, like Fetch for Mac or WS_FTP for Windows, can make using FTP easier by providing a graphical user interface.
A URL is a Uniform Resource Locator, or web address, that can be used to identify any resource on the Web.
A typical URL consists of a protocol, a website name, and an absolute path to the resource.
HTTP is a request and response protocol used to transfer web pages between a web server and your browser.
The file protocol is used by the browser to read pages from your computer.
An absolute path is the path from the root folder to a file.
“index.html” and “default.htm” are examples of default pages. If you specify a directory without a filename, the web server will look for a default page to return to the browser.
You can use relative paths or URLs in your <a> element’s href attribute to link to other web pages. For other pages in your site, it’s best to use relative paths, and use URLs for external links.
Use the id attribute to create a destination in a page. Use # followed by a destination id to link to that location in a page.
To help accessibility, use the title attribute to provide a description of the link in <a> elements.
Use the target attribute to open a link in another browser window. Don’t forget that the target attribute can be problematic for users on a variety of devices and alternative browsers.
Sharpen your pencil Solution
You’ve waited long enough. It’s time to give your new URL a spin. Before you do, fill in the blanks below and then type in the URL (like you haven’t already). If you’re having any problems, this is the time to work with your hosting company to get things sorted out. If you haven’t set up an hosting company, fill in the blanks for www.starbuzzcoffee.com, and type the URL into your browser anyway.
Get Head First HTML and CSS, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
