Website Design and Website Development-Full Guideline, Step-1

Spread the love

Website Design and Website Development: Friends this is where we will learn how to design a website. We are about to start a complete Website Development and Website Design session. In this session we will learn how to design a complete website.

In this session we will learn how to build a complete website using html, php, css, javascript, mysql database. All of these codes are essential for building a user friendly website. A user friendly website plays a very important role in getting the website ranked.

Also Read: Create Welcome page using php with mysqli Database

Also Read: Top php Interview Questions and Answer

First we need to know what we need to build website. Since we will learn to build web site using HTML, PHP, JavaScript, CSS. That’s why we need a web hosting first. Then we need to buy a domain as we need it.

Friends, we will learn to build website on a complete live server. After buying a domain and hosting we get to know what cPanel looks like.

Website Design and Website Development Hosting cPanel
Website Design and Website Development Hosting cPanel

The cPanel of the web hosting company I am using looks like this. This is what most web hosting companies look like in cPanel. I think this kind of cPanel is very convenient to use. In this website design and website development session, we will gradually learn how to use each option of a cPanel and how it s work.

What is the website Home Page? or Default page?

When we search a website’s domain by entering it in a browser, the first page that opens on the website after the search is called the home page of the website. This home page is also called the Website default page.

Also Read: How to write SEO friendly Article Which ranks first in Google first page?

The main features of a website are given in this homepage. For example website name, website communication address, communication mobile number, communication email-id and all the details about what the website is about are display this home page. designing home page in html

How to create website Home Page?

First you need to login to cPanel. When you buy web hosting your login details will be provided to you by the company. After logging in to cPanel we need to click on the File Manager option.

Website Design and Website Development  cPanel File Manager
Website Design and Website Development cPanel File Manager

After clicking on the file manager option, another new page will appear. This page is very sensitive. This is where we do all the coding for our website.

Website Design and Website Development  cPanel File Manager Page
Website Design and Website Development cPanel File Manager Page

After opening the file manager option, the page that will open, The “public_html” folder on that page is the most important folder on the website. This folder will contain all kinds of coding files of our website. For example – CSS, JavaScript, HTML, PHP, image files, audio, video etc. designing home page in html

Now you need to open this public_html file –

Website Design and Website Development  public_html
Website Design and Website Development public_html

If there is already a folder in this public_html folder then it can be deleted its have no problem. Now in this folder we will create a Home page or Default page on our website. designing home page in html

How to create website Home Page or Default page using html?

To create the home page, click on the “+File” option at the top left of the public_html folder. After clicking on this “+File” option, a popup window will open. There you will be asked for the File name.

Enter file name
Enter file name

In the New File Name field, we have to name the homepage or default page of the website. Since we are first learning how to create a home page with html, here I will create the name of the home page with an HTML file.

The home page of a website is always created with “index” name. And this is called default page. This “index” file is opened first when a website is opened. Many times the name is saved by “default” from the homepage of the website. But I would recommend to save the name of the “index” on the home page of a website all the time.

Also Read: Top HTML Interview Questions and Answer

Here I have named the home page of the website “index.html“. “.html” is the name of the HTML file extension. So always when we create an HTML file we have to add “.html” at the end of the file name. html home page

The full name of HTML is Hypertext Markup Language. The requirements of HTML language are very important for creating a website to design a website. It is never possible to create a website without HTML code, so HTML is called the “Mother Tongue” of the website.

What is the html?

In a word, friends, the extension name of the file that we will create must be added at the end of the file name, otherwise the file will not be created in the correct extension.

For example – if we create a css file or create a php file then we need to put the extension name of that file at the end of that file name.(For php file we add “.php” Like- (filename.php) and For css file we add “.css” Like (filename.css) ). As I said earlier in this session we will discuss all these issues slowly.

After adding .html (index.html) to the final file name, click on the Create New File option. As soon as we click, our file will be created and saved in the public_html folder. html home page

index file
index file

Test website Home page or Default page

Friends, let’s take a look at our website’s homepage to see if it works properly. We will add some simple things to our index.html file and run our website once in a browser. To add some things to our website homepage we need to edit our index.html file and add some things in it to check from our website homepage.

Right Click then edit then final click edit
Right Click then edit then final click edit

To edit our index.html file, right click on the index file. From there click on Edit option and then a new pop up window will open, there you have to click on the edit option again. Then another new tab will open. This tab will be the editor of our index.htmt file. Simple home page in html.

Another way is to open the edit of files in our public_html folder. Select the file you want to edit, then click on the Edit option from the top menu bar, then click on the Final Edit option, then a new tab will open that is the file editor.

Now we will run some things in our index.htmt file to see if the homepage on our website is working properly.

<!DOCTYPE html>
<html lang="en">

<title>Welcome to Blogging Post</title>

<body>
    
<center>
    <h1>This is my first webpage welcome to Blogging Post.com</h1>

    <font size="6" color="green">Home page working successfully</font>
</center>

</body>	

</html>

Copy and paste this code into the index.html file of your website and save the file then open your domain in any browser on your computer you can see the results.

Home page working successfully

So friends we learned in this article how to create home page of our website using HTML. In the next steps we will discuss all the tags of HTML. In the next step we will learn how to create homepage of website through php. Simple home page in html.

The last few words

If you follow all the steps of this whole session, you will be able to create your own website completely with HTML and PHP.

Friends, I hope you like today’s article. You must share this article with your family and friends. If you have any questions, please let us know in the comment box. We will try to resolve your comments as soon as possible.


Spread the love

Leave a Comment