Lesson 17 - Uploading the website to the Internet
In the previous exercise, Solved tasks for HTML and CSS lessons 14-16, we've practiced our knowledge from previous lessons.
In the previous lesson, Solved tasks for HTML and CSS lessons 14-16, we finished making our website. In today's lesson, we're going to upload it to the Internet.
Meta tags
Although our subpages are finished, they're still missing a very important
factor in their <head> elements. Once the website is online,
internet search engines will recognize and index it. Simply put, they'll store
what is on our website in order to display our website in the search results
when somebody is looking for something that we have. This is crucial for us
because this is the main way that visitors will end up on our website.
What we'll do is add information for the search engines to read on each
subpage. All it will be is a short description of page's contents - i.e. what it
is about. Back in the old days, they used to also have to specify keywords,
however, search engines ignore this type of tag nowadays. Adding keywords is a
waste of time now, so don't even bother messing with them. As you know, we will
have to add the code into the <head> element. Every
subpage will have a different description. Our home page's description,
index.html, will look something like this:
<meta name="description" content="HoBi's personal programmer portfolio" />
We are already familiar with the <meta> tag, we used it to
set our website's encoding. Speaking of meta information, we are also able to
add information about the website's author:
<meta name="author" content="HoBi" />
We'll stay in the head a little longer and set the favicon for
our site. The favicon is the small icon that shows up on your web browser tab
while you're on a website. We'll get one from iconfinder.com as always. Make
sure you download one that is 16x16 pixels and in the ico format. Save it to the
"images" folder and add a link to the icon in the head:
<link rel="shortcut icon" href="images/icon.ico" />
Note: Some versions of Google Chrome don't display local page favicons.
Add the meta-information to each subpage on your website. Once you have done all of that, you're ready to upload your website to the Internet!
Uploading the website on the Internet
We'll need a web host and a domain for our finished website. Web hosting is a space on a remote server where you can upload your website. The domain is the address through which you'll be able to access your website. Both a web host and a domain are very cheap for ordinary websites, they usually cost a few dollars per month.
Note: There are also free hostings that are pretty low in quality, constantly bombard you with advertisements and don't provide many important services that we'll need later on. If you want to better yourselves and continue to learn, go for a classic web host.
Getting a domain and web hosting
You can buy both a domain and web hosting on http://www.hostgator.com/ or from any other web hosting service.
Uploading the contents
We use the FTP protocol to upload files to a web host. We can use either a web application or a desktop client for that. Go with the desktop client since it's more practical. Never use Windows Explorer or Total Commander to upload website contents. These tools do not convert source file encoding and the connection is not very stable.
Download FileZilla from https://filezilla-project.org/ and install it.
Once you run the application you will need to create a new site. Use the FTP credentials that were sent to you in an email from your web host. Click File -> Site manager... from the application menu and then click the New Site button. Then, fill in the credentials (see the example image below):
Click connect and a "www" folder will open. If there is any content in it, remove it and drag-and-drop your website's files there.
Congratulations! You now have a nice, modern website on a web host! Enter your URL address and check it out.
What next?
We have a nice looking website.
Once feel comfortable using HTML and CSS, consider learning PHP. What it allows you to do is create large dynamic websites such as e-shops, forums, content management systems, and so on. There is a substantial demand for PHP programmers and a lot of companies use it.
The website with meta-information filled in can be downloaded in the attachment below.
Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.
Download
By downloading the following file, you agree to the license terms
Downloaded 128x (390.97 kB)
Application includes source codes in language HTML
David learned IT at the Unicorn University - a prestigious college providing education on IT and economics.