Photo by Mika Baumeister on Unsplash

How to Publish a HTML Web Page on the Internet

Shivani Mishra

If you have already written an HTML web page and seen it being rendered in browser, you understand how to create a web page. But, some of you must be wondering how can I actually publish that page so that everyone can see it. In this post I will create a simple web page and put it online.

So, the HTML file saved in your computer can only be viewed by you but it needs to be kept somewhere where everyone can access it. And you need a web hosting service for that! Hosting services have a server or a computer that gives you some space for your files.

If you are new to website building you can try one of many free hosting services. I have previously used Infinity Free. You can also use codepen.io where people can see your page and the codes behind it in the same window. Github Pages is also good for hosting static web pages. I am not talking here about other plugins and CMS like WordPress but a static site that is coded by you.

1. Free Hosting Services

I will now explain how to publish your web page if you use the first option, a free hosting service. You first need to sign up for the hosting service and select a domain name for your website. Now, there are two options to upload your file:

  • First, you directly go to file manager and upload the file and rename it as index.html.
  • Another way you can upload is by downloading a FTP client, for example FileZilla and connect it to the server by filling in your site details like, Hostname, Username, Password and the Port Number. All these details are available in your account. When you get connected to the server you can upload your file index.html.

Either of these methods can be used to upload your file and now if you open your website you will be directed to the same index.html file. So, when you type in a website address you are directed to the index.html file. You have now published your web page on the internet and anyone can see it provided the link. You can add more HTML files or images and add their link to the index.html page. All those files get stored in the server and anyone can access it.

Most of the times, the URL of the image that you enter in your web page gets expired after some period. Its better to download those images and upload them and write the name of that image exactly in the src attribute.

You can see HTML and CSS codes for an example HTML web page:

HTML COde
<h1>Ludwig van Beethoven</h1>

<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSuYHPyPZYfRRAc40TnVVXl3yZ51Q_0v4dvUzXIjVssV0shgH2N" alt="BEETHOVEN">

<h2>
    <a href="http://www.amclassical.com/mp3/amclassical_beethoven_fur_elise.mp3">fur elise
    </a>
</h2>

<audio src="http://www.amclassical.com/mp3/amclassical_beethoven_fur_elise.mp3" controls></audio>

<h2>
    <a  href="http://www.amclassical.com/mp3/amclassical_moonlight_sonata_movement_1.mp3">moonlight sonata movement 1
    </a>
</h2>

<audio src="http://www.amclassical.com/mp3/amclassical_moonlight_sonata_movement_1.mp3" controls></audio>
css
body {
    background-color: #000;
    color: #FFF;
    text-align: center;
}
a {
    color: #FFF; 
    text-decoration: none;
}

a:hover {
    font-size:20px;
    color:red;
}

There is one problem with the free hosting services – they are not secure. The worst part of these hosting service is that when users visit your website, they will see a warning that its not safe and they should not add sensitive information on this site. Its very bad impression. So you can publish few pages just to see how its done, then you can use other paid hosting services.

Next we will see how to publish your web page using GitHub Pages. It works exactly like described previously but you first need to know how to use GitHub.

2. Github Pages

First, you need to create an account on GitHub. Then create a new repository and give it the name: (username).github.io. Make it public and publish it. Now you can upload the index.html file here. If you type (username).github.io in your browser, you will see your web page. You can now add more files and images and link them to your index.html page.

So, if you are familiar with GitHub its one of the best way to publish your first website.

11
7

Related Posts