Navigation Menu+

Lesson 4.1
Introduction to Web Hosting

Lesson 4.1
Introduction to Web Hosting


LEARNING GOAL #4: Applied Web Design

Students will understand how to expand and apply their knowledge of HTML and CSS through Web Hosting, Search Engine Optimization, and JavaScript.


OVERVIEW:

lesson4-1_webhosting

During the past three months, it may seem like you’ve learned everything you could possibly learn about web design. You know how to code. You know how to write HTML. You know you to create multiple pages and connect them together with internal hyperlinks. You know how to style various elements on those pages with CSS. And if you can remember back to the very beginning, you even know a little bit about the history of the Internet and the World Wide Web.

But the truth is, that’s only the beginning. Knowing how to code will make you a good designer, but everything you’ve done in this class has been contained inside your own folders. Even when you opened up your pages with Chrome or Firefox, you were only looking at pages you had created on your computer. No one else could see them other than you. In other words, you never actually put anything out there on the World Wide Web.

The purpose of this lesson and this entire learning goal is to help you start thinking about what it would mean to become a real web designer. What if you could actually get your own domain (space on the Web) and start putting stuff on it? You won’t exactly do that here because it costs money, but you will definitely have a reason to start thinking about it more seriously.

Students often return to Milwee with stories about their newest websites. Maybe that will be you someday soon.


DAILY SCHEDULE (85 MINUTES):


PART 1: CLASS DISCUSSION – Introduction to Web Hosting

Click here to show/hide contents

Topic #1 – Happy Accidents

The purpose behind this class is to give you the skills necessary to go out into your community and design sites for others. As you get better and better, your skills will show and you’ll be able to actually make money doing what you know how to do. For your teacher, that came true just a few years ago.

Topic #2Web Hosting in Less Than 2 Minutes

Topic #3Three Basic Parts of Web Hosting

1. Domain Hosting

Domain hosting is the process of buying or renting space on the web where you would like to keep and manage the files and folders that belong to your website. When you buy or rent space on the web, that means you have purchased something like thisismyspace.com or heythere.net, since these are also called domains.

2. Web Hosting

Web hosting is the process of storing and managing all the online files that you have on your domain. Normally, this goes hand in hand with domain hosting. The company that you get your domain from is usually the same company that holds your files and folders.

3. File Transfer Protocol (FTP)

File Transfer Protocol is the standard rule that allows files to be moved from your computer to the hosting computer (also known as a server). There are a number of programs that can be used for this, but a common example is called Filezilla.

Topic #4Domain Hosting Explained

The day you actually get serious about web design, you will want to experiment with a couple of simple domains. But not every domain is available and none of them are free. Remember that a domain just means a space on the World Wide Web that you want to use. If someone already has the space you want, you can’t just take it from them. You have to find domain spaces that no one else has already taken and then you have to purchase them.

Try It First: The WhoIs Lookup

Try It Second: The Lean Domain Search

Try It Third: GoDaddy Domain Pricing

Topic #5Web Hosting Explained

Right about now, you should be realizing just how easy it is to buy a domain. And you’re right. It is easy. But there’s a bigger issue you have to consider before you buy a domain. The company where you buy your domain is usually also the company that holds all your files and folders. This is the company you would refer to as your web host. So if you’re going to hand over all your stuff, it’s a pretty important thing that you know the company pretty well. How secure will your files be if someone hacks the hosting company and everything you ever designed is on their computer servers?

Read First: Why You Need a Secure Host

Consider Second: PC Magazine Looks at the Best (2016)

Topic #6File Transfer Protocol Explained

If you were to Google the meaning of File Transfer Protocol (or FTP), you’d probably find a lot of strange and hard to understand explanations. The truth is, FTP is a little bit complicated. Hopefully the description below makes it a little bit easier.

All of your WebDesign files and folders for this class are sitting in a secure folder on your computer. No one can access them, change them, or steal them without your permission. If you want to put any of those files on the web, you have to move them from one secure place to another secure place. Using an FTP Client, like FileZilla, is what moves, or transfers those files from one place to another. In the end, you need your files to be just as secure while they’re being moved as they are when they are sitting still.

A Quick Look at Filezilla

Topic #7 – The Index and the Root

Everything on a website has a beginning known as the Root Directory. Think of it like this: if “root” means first and “directory” means folder, then the “root directory” just means the first folder with any HTML-related files. In our case, that would mean the WebDesign folder we created during the first week of the semester is our Root Directory. Why? Because it contains all of our HTML-related files and folders.

The first page of any website is almost always known as index.html. When you open a browser and type in a domain address (URL), the browser will immediately go looking for the index file that is being stored in the Root Directory of that domain. And if there is no index file in the Root Directory, then the site probably won’t work very well. In a few minutes, you’re going to revisit an index.html file that you created a couple of months ago and you’ll see how all of this information can be applied.

Topic #8That Guy Who Bought Google

Back in Topic #4, you learned that buying a domain is like buying space on the Web and that space needs to be available. Most of the really big websites like yahoo.com, or microsoft.com, or cnn.com are obviously taken, which means you can’t just go buy them for fun. But not that long ago, someone was looking around at domains to purchase and noticed that Google.com was available for just $12. Click here to read what happened.


PART 2: DAILY DESIGN – Setting Up Root Directories

Click here to show/hide contents

OPENING DESIGN NOTE:

Almost everyone has a working Home Page that we call index.html. Today, what we’ll be trying to do is connect our other pages to it. Basically, we’ll be setting up our ROOT FOLDER (also known as a ROOT DIRECTORY) with all the pages we need to have a basic, complete web site.

This challenge is for you and your team.

Step #1 – Open your index.html document with Firefox or Chrome and make sure yours and your partner’s pages are working. If you feel like yours is either all messed up or you just never got very far, then get rid of your existing code and copy this source code into your index.html file with Notepad or Notepad++. You can always start over and just plug in your images later.

Step #2 – Open your index.html document with Notepad or Notepad++ and find the section that looks something like this. If you’ve made changes to this section at some point, that’s okay, just go on to Step 3 below.

Step #3 – Change that section so that it looks something like this. ALL students must have their link section look like this.

Step #4 – Now change that section so that it looks something like this or this.

Step #5 – Go to your main /webdesign folder and copy the index.html file, then repaste it three times. It should look something like this when you’re done.

Step #6 – You will now have four different index.html files with different numbers, but we’re going to change the names of the three you pasted so that the folder looks something like this.

Step #7 – Reopen your index.html page with Firefox or Chrome and see if the URL changes at the top when you go from page to page. For example, when you are on the index.html, your URL should say index.html. When you are on the about.html, your URL should say about.html. All of the pages will look exactly the same.

If you and your team have reached this point successfully, please raise your hands for permission to start Step #8.

DO NOT GO ON WITHOUT PERMISSION

Step #8 – Now that you have a few working pages in your Root Directory, your design challenge is to complete each page and make it unique. For example, on your pages.html, you could create a bunch of internal links to all your various pages and projects. On your about.html, you could write a short description of yourself. Take time now to build a complete website about yourself as a web designer. You should even feel free to change the main navigation links or add new ones.


RESET WORKSTATIONS (2 Minutes)

Translate »
error: Content is protected !!