Lesson 17 - Uploading the website to the Internet

HTML and CSS First website Uploading the website to the Internet

In the previous lesson, Styling tables and photo gallery in HTML and CSS, 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" />
Favicon in HTML

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):

Uploading website on the Internet using WinSCP client

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.


 

Download

Downloaded 99x (390.97 kB)
Application includes source codes in language HTML

 

 

Article has been written for you by David Capka
Avatar
Do you like this article?
1 votes
The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.
Unicorn College The author learned IT at the Unicorn College - a prestigious college providing education on IT and economics.
Activities (7)

 

 

Comments

Avatar
Adewale Damilola:5/22/2017 14:08

<!DOCTYPE html>
<html>
<head>
<title>my story</title>
<link rel="stylesheet" type="text/css" href="index2.css">
</head>
<body>
<div id="header">
<h1><img src="img/pic.png"/></h1>
<div id="nav">
<ul>
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<img id="omg" src="img/city1­.jpg">
</div>
</div>
<div id="content">
<div id="feature">
<p>Feature</p>
</div>
<div class="article column1">
<p>Column One</p>
</div>
<div class="article column2">
<p>Column Two</p>
</div>
<div class="article column3">
<p>Column Three</p>
</div>
</div>
<div id="footer">
<p>© Copyright 2017</p>
</div>
</body>
</body>
</html>

 
Reply 5/22/2017 14:08
To maintain the quality of discussion, we only allow registered members to comment. Sign in. If you're new, Sign up, it's free.

1 messages from 1 displayed.