Ah, the good ol’ HTML. Open notepad, right now. We have your first website to build. Write the following:
Now save it somewhere with the name “index.html”. Don’t close notepad, just save the file.
What you just wrote is an html tag. This is an html opening tag, which means whe need a closing tag aswell. Press “Enter” once to create an empty line, then write:
So now you should have it like this:
Great! Now you have defined the start and end of your website page! Wasnt that scary now was it?
Lets see how it looks!
- Save the file.
- Open your favorite browser.
- Drag the file into the browser.
- Press “Enter”.
If all you see now is blank white nothingness, you have succeeded! You are now looking at your first webpage!
“Its the most boring website I have ever seen, there is nothing in it?”
Correct, now lets make it look like a website. We will turn it into a diary page, so what we will need is:
- A title.
- Some text on how it went.
- Information on when did we write it.
Fair enough, lets start with the title. Write the following, just under your opening html tag:
“What in the world is an h1?”
It stands for “heading 1”, in other words “a big title”. As you may have noticed, this seems similiar to the html opening tag. Its actually a “heading 1” opening tag! In the same way, it needs a closing tag. So lets write one literally just after the opening one, like this:
Now comes the fun part, you can start creating content! Think of a good title about learning html today or just write: “Hello word!”, in between the opening and closing “heading 1” tags, like this:
Now your whole document should look like this:
<html> <h1>Hello World!</h1> </html>
Great! Now you should be able to see your website.
- Save the file.
- Go back to the browser.
- Pressing “F5” also known as – refresh. (Because it loads in all of the freshest data for the website. Sometimes pressing this helps if you see weird things happen on a website.)
Great! What youre seeing now is your very first website evolving into something that you will look back on with a wide smile.
Lets add more!!
Paragraphs are the main text containers in html. So lets create one. Write opening and closing paragraph tags, just under the title, like this:
Easy enough! Now I would strongly suggest to write down descriptions for all html elements you used up to this point without scrolling the blog post up. This will help you remember better. Just look at the code and write up what you remember and then compare to what I wrote previously.
Once youre done, I will tell you about how to separate sections of a paragraph, so its easier to read.
Whenever you wish to break the text into the next line, just write:
This one is special, because it doesnt need a closing one, it simply doesnt exist. The reason is because a line break doesnt have anything in it, also the common practice is to just add these elements (but only in between
</p> tags) as much as needed.
For example, if you want to create an empty line between two paragraph lines, just write out two
Here is an example of a final document:
<html> <h1>Hello world!</h1> <p> Today I started learning HTML. I found it pretty easy. <br>First you have to write opening tags for stuff, then you write stuff, then you write closing tags. <br>Not all elements have closing tags. <br>I can also write titles now and move paragraph lines away one from another. <br> <br> August 4th, 2018. </p> </html>
Final Document Result (as seen in the browser):
Great! You’re very own first HTML document! It’s not the most beautiful or the most informative, but it’s a very important one, because it’s where it all started! Carry on now to the next post, where we take a more detailed look at HTML.