Basic html tutorial for beginners

Basic HTML Tutorial

If you want to learn to create a website, then you will need to know HTML. Sure, there are a lot of WYSIWYG programs out therehtml tutorial for beginners, but without learning this programming language, you will find that you will be unable to exercise much control over the website. The intention of this tutorial is to give you a brief overview of some of the most basic tags out there, and hopefully you should be able to build upon this knowledge to start creating basic websites. Let’s dive in!

You don’t need any special programs to start coding in HTML, all you need is a text document. So go ahead, open up your notepad or something similar right now and type this in (or copy and paste if you are feeling lazy!)

<html>
<head>
<title>HTML Tutorial</title>
</head>
<body>
hello world!
</body>
</html>

html tutorials - basic html tags you need to knowNow save this as ‘index.html’ and open it up in your chosen internet browser. See the words ‘hello world’? congratulations, you have just written your first ever HTML website! So let’s break down exactly what each of these parts of the code mean.

First things first, almost every HTML tag has an open and close. The ‘closing’ tag has a /. Take a look up above and you should be able to see all of the open and closing tags! So what do each of these tags mean?

<html> = Simply means that you are creating a HTML document, you don’t actually need it here, however it is good practice.

<head> = None of the things in between this tag are actually displayed on the screen. Basically, it’s the ‘set up’ information for your website. Here we just use the <title>, but later on you will add Meta tags etc. for search engine optimization.

<title> = This tag denotes what is in the header bar of the website. Flick back to your web browser now, and at the top you should see it says ‘HTML Tutorial’.

<body>  = Everything enclosed within the body tag appears on the main page of the website! You can fill this up with weird and wonderful things, almost everything I am going to discuss in this tutorial will appear in between the body tags.

That’s pretty much it for our ‘basic’ HTML code, so let’s talk a little about how we format our text. Header tags will come first!

Header Tags

As the name suggests, header tags create the ‘headings’ on your website. So go ahead and replace your ‘hello world!’ with this:

<h1>Hello World!</h1>

Now save, and open it up in your web browser again. Notice how the font is now much bigger? Go ahead and replace that 1 with any number between 2-8, save, and refresh that page again! You should see the font size change.

Formatting Text

html tags for header, formatting text etcYou are probably eager to start formatting that text right now! Please note, this is just a HTML tutorial, for more control over the ‘formatting’ of your text, you will probably want to look into CSS, although of course you will want to know your HTML basics first as the two go hand in hand.

Go ahead and replace that text once again with this:

<font>Hello World!</font>

Save, and refresh the page. Notice that nothing actually happens? That’s because there a few extra things that we need to add to the tag. So once again replace with this:

<font size =”1”>Hello World!</font>

As you can see, this tag controls the size of the font. Check it out now! You can play around with these numbers to get the size that you want!

Now we can start playing around with the font colour, how about trying this:

<font size=”1” color=”red”>Hello World!</font>

Refresh and you should have red text. If you want a bit more control over the color, then you can search online for a ‘hex code table’ which should give you a huge array of colors. Just stick them where it says “red”.

One final thing to add to that Font tag! Try this out:

<font size=”1” color=”red” face=”Arial”>Hello World!</font>

As you can see, this changes the actual font of your text. One thing to note here is that you cannot use every single font, as not all of them will be installed on somebodies computer!

More Text Formatting

This section is designed to give you a bit of information on how to underline, make italic, and bold your text. I won’t go into too much depth here. Just enclose your text with these tags, and you should see what each of them do:

<u></u>
<b></b>
<i></i>

Paragraphs and Page Breaks

We are going to get a bit more ‘technical’ here with our text layout here. To start with, delete everything between the body tags on your html document and replace with this:

Hello World
<br><br>
I am HTML Proficient!

Save, and refresh the page! You should notice a space in between your text. This is because we used the ‘break’ tag, notice how this one is not an ‘open’ and ‘close’ tag, `whilst this is good for some things on your website, and you probably will use it a lot, it is not the best way to format text. Instead you will want to do the following:

<p>Hello World</p>
<p>I am HTML Proficient!</p>

The P Tag is designed for formatting paragraphs! It is great for sorting out a lot of text!

Links

creating links using html codesYou have a website, you are obviously going to want it to have multiple pages, so of course you need some way to navigate in between them. Go ahead and create a new HTML document right now using the knowledge you already have, put whatever you want in it. Save it as ‘page2.html’ in the same folder. Now open up your index file and type the following in between the body tags:

<a href = “page2.html”>Click to go to page 2!</a>

Safe and refresh. Give it a click! It should take you to page 2! You can replace what is after the HREF tags with whatever you want, try and create a link to Google yourself. Of course, you can also change the link text!

I hope this has given you a decent overview of HTML, and by now you should know how to create a basic HTML document, there is so much more to learn though, such as images, tables and forms! So get cracking!

CKDYQ4PEQW42

Leave a Reply