HTML code for beginners

Part 1: HTML right from the start

When I was a kid ...

Ah, that's not true. But at the time I was 17 years old, I learned to code for the first time.

The language called HTML, and was the way websites Generation. In fact it was invented when I was 10 years old in 1989, and even today, 26 years later, we still do.

Today called HTML5 version.

HTML is still a great way to learn to understand how websites work.

HTML means Hyper Text Markup Language and is the form of how a website looks.
Think of building a website which you are thinking about building us humans.

We start and end somewhere <html> </html>And along the way there head <head> </head>, body <body> </body> and feet <footer> </footer>.

There may be so many codes in between, but the basic structure is always the same.

We humans have all kinds of parts, and it has a website too.

On a website consists of a whole lot < and > characters, / = and mixed up in. We do so fortunately not :-D.

To begin

Convert text into TextEdit on the Mac

The easiest way to make a quick website is to open Notepad in Windows or TextEdit on the Mac.

Select Save as / Save and make sure that transmission of the text called .html.

If you are using TextEdit on the Mac, you must remember to convert to normal. text.

Otherwise it becomes a mess.

If you do not use a PC or Mac, click here and do it online.

If you choose to use the link, do yourself a favor and NOT to cheat 😉 And with cheating I mean to use the code already there.

You learn best when you do it yourself.

Let's start, getting into the foundation for the website.

Your first code

To see all .html pages out

Here you can see the code as you need. You can see it in reality by click here.

As you can see in the picture to the left, starting with the code <html> at the top. It is the command that tells us that now we write HTML. Otherwise it would not have guessed what we were doing.

To the so know when we finish again, says </html> in the bottom.

So it is with all HTML codes. They start with <> and ends with </>

SHIFT button and <> characters

 

To create characters, see the bottom left of your keyboard and find the ones that look like the picture. You must namely using SHIFT (up arrow) to make > signed and / drawn.

/ character is compared with 7's top of the keyboard.

Your first code

It is then the first command - the first code you write.

If you have already opened TextEdit, Notepad or website I referred in the beginning, do it now.

Then write the code as it appears below:

<html>

 

</html>

Remember to put spaces between. There must be room for more code.

Once you've written it, you save your document, so that's .html behind. Not .txt or something else.
Do not see one. with something behind, it's because you can not decide for themselves.

So do you just the website that I linked to.

Your other code - head

Now we have shown the computer that must read HTML.

So we must give our new website name. To do that, we once again have to write any code.

This time it <head> and </head>Which says that we are now doing a head (head in Danish).

In this there is often a lot of information that your browser (Firefox , Safari , Chrome, Edge, Internet Explorer or otherwise) reads and displays.

It puts you into your code so that it now looks like this:

<html>
<head>
</head>
</html>

Your third code - naming

All websites have a title at the top of the browser. Here in Chrome

I've told the computer that it should be called The page title. A rather boring name, but it's right now the page's name.

You can call it what you want, but it must have a name.

I told the browser what the page called by setting another code in between <head> and </head> - Exactly <title> and </title>.

Not only that - I wrote sørme page title off <title>.

Now our code like this:

<html>
<head>
<title>The page title
</title>
</head>
</html>

Your fourth code - content

Fits head on the stomach ..?

I do not know about you, but right now I think that the website looks pretty dull.

Therefore, we proceed to 4. Code: <body></body>. Body.

It will probably not especially behind you, that body must AFTER head stops </head>.

Unless you think it looks quite normal out that DigiPippis head on her stomach.

It may well be that you do, but it's fortunate that you do not decide 😉

The code MUST namely look like this:

<html>
<head>
<title>The page title
</title>
</head>

<body>

</body>
</html>

Time to content

If all sites were simply white without something - yes ... then died the Internet enough in a week.

It is the fortunately not, let us put some text into. This takes place between <body> and </body>.

Here is what I think should be right now:

<html>
<head>
<title>The page title
</title>
</head>
<body>
I am mega cool, because now I've created my first website!
</body>
</html>

It is exactly what you do and have done!

Congratulations 🙂 You have now come through the first part of the articles to code with HTML.

In the next part I will show you how to make colors, change text sizes and put pictures.

2 thoughts on “HTML code for beginners

Leave a Reply

Your email address will not be published. Required fields are marked *