HTML5: How To Make A Website

This article will show you how to make a simple website using HTML5, the coding language used in this very website, and some other basics you should know to start your website making career!

This article was made by Noah R.

Introduction

Have you ever wondered how to make your own website without one of those wierd watermarks or "Made with So-and-So" tags at the bottom of each and every page you make? Well, as complex as it may sounds, coding is the easiest and best way to make a website. Those websites you use to make other websites always come with a huge fee, dont allow cool domains like this website, and have those identifiers making sure people give the website creator company money, instead of you. This very simple article will show you the steps to create and publish your own website with a minimalized fee, a cool domain, and no water marks you cant control.

Step one: Understanding

If you are wondering how to make those things that show up on a website, whatever it is, its quite simple! All you need is a way to remember things, like your brain or a notepad. Careful though, read at your own pace. This article contains a lot of information.

The first thing you need to understand are tags. These are elements, similar to objects, that allow words or more tags to be written inside them, as children. Children are when, like folders on a computer, an object exists inside of another. A tag is made with three to countless things. The reason I say countless is because you can add options to your tags, like the way I added the background color to the headers.

Step Two: Paragraph

There are a countless number of tags, similar to the options you put inside tags, but don't go just yet. You only need to know a very little number of them to make a website like this one, and only a few options as well.

To make a tag, you put a letter or series of letters inside a pair of symbols. These symbols are the < and >. You typically put a letter in there, which would take place of the "and". These are the second part of tags, the letter. Lets say I wanted to write a paragraph, like this one. I would do this:

Whatever I Want To Write

What this does is tell the website to load a "Paragraph", this is the "p", make the words written inbetween the two tags into text to be displayed, and tells the computer to close the tag, the "". You always close a tag by writing the tag name in between "</" and ">".

Where you put this is the file you are loading the website with, a .html file. This tells the computer to load a webpage when opened.

Step Three: Formatting

The next thing you need to understand is the way to format an Html file, kind of like you would a script. The way you do this is:

<!DOCTYPE html>
<html>
 <body>
 Words
 </body>
</html>

What this does is create an html page, create a body element as a child, the body element is a tag that lets other child objects to be shown, and a paragraph with your choice of wording, you would replace them with "Words", as a child of the body.

Step Four: More Tags

If you are wondering how to implement a series of features into your site, lets look at all the different tags there are! Remember, these are only (in my opinion) essential tags that some would use regularly, when making html websites of course.

Tag	Defenition	Notes
p	Paragraph	Put words inside of tag to display them.
div	Division	Usually used for sectioning specific elements by making them children.
img	Image	Use the "src" option to define directory of image.
font	Font	Changes visual appearance on word elements, usually used with "p" tag, different options do different things.
table	Table	Used for making data tables like this one. Paired with "tr (table row)" and "td (table data)" tags.
head	Header or Title	An element used for holding text elements and or displaying text.
center	Centering	Used for centering child objects relevent to screen width.
script	JavaScript	Used for running JavaScript in your html page, different coding language.
html	Html Page	Used for putting in your Html elements as children, this is what makes the Html page.
body	Html Body	Used for rendering Html elements, making them visible.
hr	Horizontal Ruler	Used for making page breaks, or a horizontal line accross the screen.
br	Break	Used for making a line break, usually put inside text elements.

Now that you know some tags, lets practice with an html file. Try your best not to look back at the article, except for the instructions, but if you need to thats ok.

Step Five: Testing Your Knowledge

First, create an empty "index.html" file on your computer. If you are on a mobile device or cannot create the file, there is an html renderer further down. That is also available if you do not wish to create the file.

Next, in the file or renderer text box, type in the required elements mentioned earlier in the article. And yes, you can use any notes taken.

Then, when you have that complete, try showing some text in the html file. This will be a short story of some sort. Change the font size of this as well. Here's a hint, as it was not mentioned in the article. Inside the tag write: style=""

Finally, add a horizontal ruler to your page and sign your story with another text element.

Note that some things are already there, so please do not type them.

Html Renderer

<!DOCTYPE html>

<html>

<body>

</body>

</html>