Learn HTML and Create a site!!!

#1
So you want to make your own website? You want to be able to customize your site how you want with no annoying branding? Read on… :)
Advantages to making your own website:
• You can learn HTML, meaning you can then apply these skills again eg making another website
• You can customize it how you want
• No annoying logos
• It’s free!
So, let’s get started.
First things first, you’re going to need notepad/WordPad/your operating system equivalent. I can’t stress how important this is, because if you download and use a programme like Adobe Dreamweaver, then all you are doing is cheating yourself. It means you aren’t going to be learning how to write HTML, you’re going to be learning how to use a programme. And that is not what you want to do.
So please, for the sake of everyone, use Notepad/WordPad/whatever other programme.
Step One:
Create a root folder for your site. This is the folder that will contain everything to do with your site, including pages, images, assets etc.
Open your word editing software (Notepad/WordPad etc.). Remember, not any other types of Programmes, including WYSIWYG editors (What you see is what you get).
Go to File,
Save As.
Now for the important part. Make sure you don’t save it as a .txt file. You must go to “Save as type,” click down and select “All Files.” You must do this, as otherwise it will save as a text file and not an html file. Then, call the file exactly this: “index.html.” Click save, and makes sure you are saving it in your site root.
Step Two:
This is where the HTML starts, but first, a little bit of background info:
HTML stands for Hyper Text Markup Language, and it is important to remember it’s not a programming language – it is a markup language made up of markup tags (More commonly known as HTML tags). These basically describe the page content to your web browser, and then it displays that content accordingly. It doesn’t, however, display the tags. It uses them to interpret the content of the page.
So now you know a little more about it, let’s begin!
Go to your .html document, which you have opened in text. Here, we are going to add the first HTML tags to your page. Here is a little more information on them:
They usually come in pairs, one is an opening tag and one is a closing tag. This is an example of an opening tag:
Code:
<b>
And this is an example of a closing tag:
Code:
</b>
As you can see in the closing tag, it has a forward slash to indicate the end. This particular tag I have used as an example will make text bold. Basically, any text that is after the opening tag, and before the closing tag, will appear bold. Simple!
Step Three
Paste the following into your html file, that should be open in Notepad (Not any other html editing programmes!):
Code:
<!DOCTYPE html>
This is called a declaration and defines the file type. This must go at the beginning of every page of html you have.
Step Four
Now, add this:
Code:
<html>

</html>
These are tags that describe the page to the browser &#8211; so it knows it&#8217;s HTML. Most of the other content goes between these tags.
Step Five
Now within these tags, put the following:
Code:
<body>

</body>
This tells the browser that this is the visible page content. So far, you should have something that looks like this:
Code:
<!DOCTYPE html>
<html>
<body>

</body>
</html>
Which brings me on to my next point: Nesting.
When you have multiple tags around one thing, it&#8217;s best to close them in the same order.
In what we have done so far, it isn&#8217;t usually correct to do the following:
Code:
<html> <body> </html> </body>
Because if you look, the HTML tag opens before the body tag, so should close after the body tag. It should look a little like a mirror image, like so:
Code:
<html> <body> </body> </html>
As you can see the tags are all closing in the correct place and this is &#8220;correct&#8221; nesting!
If you now open this file in your browser by clicking on the saved .html file, it will display a blank page! If not, make sure you have exactly what you should have copied!

*WILL BE CONTINUED TOMORROW!*
 
Last edited:
#3
Inheriting this post

Anyone with knowledge on this want to finish what was started? Also if there isn't anyone who will and someone who wants to learn, the Firefox browser has something mainly for teaching web building and html

Ill post the link later on

here is the link to the page: https://developer.mozilla.org/en-US/
or you can go to: https://developer.mozilla.org/en-US/Learn which takes you directly to it
 
Last edited: