(This is the howtomakeawebsite.php file in my root directory [ie folder]. Want to see what the file actually looks like? Click here. Note that this is just a screenshot of the top part of the file page, not the whole thing.)
Step 1: find your root folder (using an ftp client or cpanel, whatever your hosting company says you can use). If you don't know where this folder is, you can call your hosting company and they will tell you. They can tell you what folder you need to make there in order to be able to put an index.html (or index.php) file in there. (This might be the only difficult step, because you have to find out where this folder is and how to add files to it, but this is THE ONLY hard part. Once you know where,
Step 2: make an index.php file there and edit that file. Put "Hi" on the file. When you go to yourdomain.com and refresh it, you should see a white page with "Hi" printed at the top. (If you don't see this, you need to call your host again and find out where your index.php file should be (inside what folder inside what folder. Once you get it in the right place, it WILL display like this.
Step 3: you can now put any webcode on your index.php page. You can put, for example:
<div class="first-div" style="background-color:yellow; color:blue;">
<p>Hello, now we have a div with a paragraph and picture in it</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/2/2b/1328101978_Web-page.png">
</div>
Save it and go refresh your browser at your domain address, and you should see it.
MISSION COMPLETE, right? You now have made a website. So you want to make more webpages now. So let's move on to:
Step 1: Making a <head> section. We do this because we need to tell browsers (the thing interpreting the code you wrote on your file and converting it into what it displays on the internet) what to do. One important thing is that your webpage probably looks TINY on your phone, but OK on your PC. That's because you didn't tell it to respect screen sizes. Put the following at the top of your index.php file.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Now if you refresh your webpage on your phone, it will look better.
Create another file in your root directory: about.php, and edit that file to write "About this site:"
Now when you type in mydomain.com/about.php you will go there.
NOTE: You might want to organize all the things you write so your root directory isn't too messy. You might not. If you create a folder inside your root folder (for example, called "pages") and then move your about.php into that folder, you will now be able to type in mydomain.com/pages/about.php and find your "About this site" page there. The same goes for images: You can "upload" images to your root folder, OR you can create an "images" folder and put them there. Up to you, but remember you will have to link to them properly, including any directories (folders) that are in the "filepath."
go to your index.php file and add this somewhere under the head section:
<a href="http:www.mydomain.com/about.php">Go to my About page</a>
Now when you refresh your homepage, you will see a link. When you click it, you will go to your About page.
You don't have to do this, of course. Actually, all you need to do to make a webpage is in LESSON 1. But you will probably want to make a header and maybe a footer, too. WHY? Because if you make a header.php file, you can edit this file, and you can (I'll show you how in a minute) then include that info on ALL your pages (or any pages you want). That means that you don't have to put that <head> code on EVERY page. You can just put it in your header.php, and it will still be included on any page you want. This is awesome because any time you want to change or add things to it, it will be one shot for all your pages!
So, if you want to do this awesome thing:
Make a header.php file in your root directory. Edit it and put that same <head> code on it. Save it.
Now edit your index.php and about.php files. Remove the <head> code and instead put in:
<?php include 'header.php';>
What you've done is called php code. With php code, you can tell browsers to do all kinds of interesting things, like include headers and footers, but a lot more besides.
I've taught you all you need to know to understand the basics of how to make a website. But one more thing remains and that is adding "global styles" to your site. Above, you saw me add a background color and text color "inline." However, you can also make style rules for your whole website at once! There are 2 ways. One is called "internal" where you put style rules on a webpage file, and those will apply on whatever page is being displayed: If you put these styles on your about.php file, your About page will have them; If you put them on your header.php file, all pages that include (using the php from the last lesson) your header.php will have those styles. Always remember, the last style rule given is what a browser shows, so if you make paragraphs background-color:yellow in your header.php styles, but then you do an inline style around your actual paragraph on your about.php file, it will first apply the header stuff but then apply the inline stuff (overriding the first one).
Put the following code after your </head>section in your header.php file:
<style type="text/css">
p {color:blue;}>
</style>
Now when you refresh all your pages that include header.php, all the text will be blue.
Another way to add styles globally is to have a separate file called style.css. You create that in your root folder, then add the following code to your head section:
<?php include 'header.php';>
<?php include'style.css';>
Now if you cut the style code from your header.php and paste it in your style.css and save it there, it will apply globally that way.
When your webpage is shared on social media now, it probably won't find your page's title. This has to be set. Just put the following code at the top of each page, customizing the title you want to use:
<title >Whatever Title You Want</title>
Note that whatever you put inside your title tags will probably not print out on your page for you to see. But it will tell other sites what your title should be when it is shared. You will need to have your title inside both the title tags and again inside your h1 tags.
The reason I created this tutorial is because a person wants to see how a webpage works in its simplest form and fast, not "the best way to make a website, even if you're a beginner" because that's too much work for the first day. You want to make a website easily and see it pop up on your screen live on the net.
Now you can go elsewhere to learn more about webcode and how to build a fancy website. I'm only interested in people being able to access this tool quickly and easily, and being able to put their voice out there if they want to.