You’re probably familiar with the basic things you need in starting a website, and already pointed your domain name to your web host. After directing your domain name to your website (which is located on your web host’s server), you are now all set to design your web pages. What I’m going to share on this post is about how to make a web page. Once you have learned these steps, you can do it all over again and become familiar with the process, and learn more advance techniques in the future. Remember that a website is a collection of related web pages located on a server which is accessible over the Internet through a URL. Therefore, we will start with the simplest part of a website – a web page.
To start with, a web page is basically an HTML document viewable from the Internet or a local area network. You probably have an idea of what is an HTML document already. Just for a recap, an HTML document is a text file with formatting instructions of HTML tags. These tags are interpreted by web browsers according to a standard set of rules.
To create a simple HTML document for you website, follow these steps I provided below.
1.) Open a text editor or any web development software that you prefer.
A good text editor to use on various programming language is Notepad++. It offers more useful functions and features than a simple text editor or Notepad alone. This text editor is able to recognize the programming language that is being used on a certain file through its filename extension (e.g. .html, .css, or .php) by applying color coding on keywords used on selected programming language. One more thing, this valuable tool is free.
Additional useful programs that you can use here are Adobe Dreamweaver, Microsoft Web Developer, and similar apps that have also have built-in code editors.
2.) I assume that you already have a basic knowledge about HTML. The example that I will show below is a very simple HTML code which includes texts and tags for formatting the document. On your code editor type the text exactly as shown below, I used Notepad++ on this example.
By examining the code above, the words used are all readable English words except on those keywords that have angle brackets and forward slash with them. These keywords are all HTML tags, and as you can see Notepad++ rendered it with color blue.
- Noticeably, an HTML document’s format is arranged such as HTML tags surround the text (or data) with an opening tag <tag> and a closing tag </tag>.
- A typical HTML document starts with HTML tags as <html> and ends with </html>.
- Within these <html> tags are the <head> and the <body> HTML tags.
- The <head> element may include the title of the HTML document, and can even include scripts, Meta, styles and other info.
- Inside the <body> element on the other hand contains the content displayed by the web page. In the example above, the body tags encloses texts which are also within another tags such as <h1> for Heading 1 format, <p> for paragraph, <b> for bold, <i> for italics, and <u> for underline.
When you’re finished in inputting the code above, you should save this file with a filename index.html or index.htm. When you save an HTML file, you can use either the .htm or the .html extension. The filename should be named “index” because this is the first file that the web server will load when your website visitors visit you website. Try to test and debug your codes offline by using debuggers, or use your web browser instead. Double click the index.html file, and if it is associated with your web browser, it should load normally and look like the image shown below. If there is an error, fix it, and then view your HTML document on your web browser again.
This is a very simple web page as compared to what you practically view on most websites which has beautiful layout, contains videos, images, flash and even audio. No matter how simple our example above is, it is an actual web page which contains data and is accessible over the Internet.
3.) If your web page index.html doesn’t have any problem anymore, next thing to do is to transfer it to your web host. To do this, log-in on your website’s Control Panel or popularly known as cPanel. Shown below is an example of a portion on a cPanel interface.
Find the feature that enables you to do file transfer such as an FTP program or, the file browser or, File Manager on your CPanel (shaded in blue above) then prepare to upload your index.html file.
If you’re not yet familiar with what’s inside a Cpanel, you can explore try its features on cPanel’s official site and try the demo page. A lot of web hosting service providers have cPanels installed on their web servers, visit cPanel’s to see how it actually looks like.
4.) Using the file browser of your CPanel, go to the root directory of your website then look for a folder named public_html (some web host named the folder with “www”). Upload index.html on that folder.
The public_html is the directory where the web server’s program starts parsing the scripts for your website. What happens is that, if you type your domain name on your web browser, the web browser then connects to the Internet and finds your web host servers which are associated with your domain name. After connecting to the server, the server’s program then looks for a certain directory which is the “public_html” and loads the file with a filename of index.html, or index.htm or index.php or particular recognized file format which has a filename of “index”.
If everything went right, that is, you have uploaded your index.html to your public_html folder, you are now prepared to test your domain name’s connection with your website and view your HTML document live on the web.
5.) Finally, to check your website, type your domain name on your web browser. The web page should normally load and you should see the same web page that you have tested offline like the image above.
Did the web page loaded normally and appeared as shown in the image above? If yes, then congratulations! You have just created and viewed your first web page on the Internet.
In creating larger web pages or huge collection of web pages, the procedures stated above are enough to guide you in tackling the same thing. Repeat these steps to become familiar with the procedure. As you might have thought, it takes time and effort to “manually” create a lot of web pages for your website. An example website with massive amount of web pages is Wikipedia, which has millions of web pages served around the world. Other examples are blogs such as Mashable, Engadget, TechCrunch and our own BlogsDB’s blog. Not all of these pages are really hand coded in HTML; these pages were actually generated by a program residing on our web server. Most of the blogs and websites on the web are already using community-contributed scripts such as WordPress, Drupal or Joomla. Visit their respective sites to learn about their functions and features. Or if you want to have a quick start, you can check our tutorial on how to install WordPress on your website.
- Author Bio -
I am Samith Jhon a content writer and a Professional Blogger. I am certified with 000-590 Exam which is very popular these days and have a great scope in the field of IT Certification. I always like to take certification exams and now I have planned to pass 000-080 Exam. These kinds of exams could secure your future as well as your job.