Home Year 7 Year 8 Year 9 GCSE A-Level

MR MAKEPEACE.NET

An introduction to HTML

Step 1

Open Notepad (start > programs > notepad)

HTML code is written inside tags.

This is a tag:  < >

To start, you have to tell it that you are going to be writing code in HTML.


Write <html>

step 1

Once you have finished, you have to tell it that the html has ended.  If you do this right now you won’t forget later.

Write </html>  (the / means ‘end’)

 

Step 2


Now you have to set up what is going to display in the top section of the web page.  This is called the ‘head’ section.

Type in the starting head tag <head>

Type in the finishing head tag </head>

Step 3



We want to give the webpage top bar a title and to do this, you need to tell it that you want a title.

Do this by putting in a ‘title’ tag in between the <head>  </head>  type:

<title>

</title>

Step 4


And in between the title tags you can type whatever you want to appear in the title bar of the web page.

Try typing ‘my first effort’ ( make sure it is exactly as shown here)

Step 5


Ok, so you have set up the top part of the page.   Now you want to set up the main part of the page or the ‘body’

After the ‘head’ section (because we have finished with this now) type:

<body>

</body>

Step 6


Now you can type some text that you want to appear on your page.
 Lets start off by putting a heading for the page.

 

In between the opening and closing body tags type something like, ‘My Very First Webpage’

Step 7


Now make a folder in your area called ‘web design’

Save your work into the folder calling it ‘first effort.html’




IMPORTANT

Notepad will probably try to save it as ‘first effort.txt’  make sure you change it to .html otherwise you can’t make a webpage.

This is your first webpage!

Here is the title that you set up, see it is in the page title bar.

Here is the heading you set up on the main part of the webpage

Keep this webpage open.

Step 8


Lets try putting some formatting on the heading.

Go back to your notepad version and find the text you wrote ‘My Very First Webpage’

Lets try making it bold.

Bold tags are <b> and </b>

Put in these tags and save your notepad version.






Go back to your webpage version and press the ‘refresh’ button

You should now see that your heading is bold.

step 8a


(if this hasn’t worked, check that you saved your notepad version first)

Step 9


Lets try underlining the heading.

The tag for underline is <u> and </u>

Try putting an underline tag around your heading.

step 9

Save your notepad version

Go to your web page version and press refresh

Step 10


LHow about italics?

Italics tags are <i> and </i>

step 10

You can put lots of different formatting tags around a piece of text, but look at how they are set up.

As <i> is closest to the start of the text then </i> needs to be closest to the end of the text and so on

Step 11


Repeat the text ‘My Very First Webpage’ six times

Step 12


Now you can put on heading size tags.

These come with numbers with 1 being the largest and 6 being the smallest:

<h1>  </h1>

Put on <h> start and end tags from <h1> to <h6> as shown here





Save your notepad version.

Go to your webpage version and refresh.

It should look something like this

Step 13


Lets have a go at changing the font colours.

HTML uses American spelling so be careful at times.

Font colour in HTML is <font color>

You need to tell it the font colour you want to use, so the
tag would be <font color=red> and then you need an end of
font colour tag which is </font>

 

Follow this code to change the colours:

 You can use hexadecimal colour values like #b4273a
for exact colours


Save your work.

Go to your webpage and refresh.

It should look something like this

Step 14


Headings are often in the centre of the page, so lets have a look at how to do that.

In the <h1> tag we can add an extra instruction to tell it align in the centre.

Now remember that we need to spell using an American format, so centre becomes ‘center’  it won’t work if you spell it the English way.

Change the <h1> tag to say <h1 align=”center”>

(make sure you use speech marks as shown)

 


 





Save notepad and refresh your webpage.

Go back and see if you can align some of the headings to be centre, some to be “right” and some to be “left”.

Step 15

You need more than just a heading on your page.  You will want some paragraphs of text.

A <p> or paragraph tag will tell the web browser that you want to start a new paragraph.  Unlike a word processing document, pressing the ‘enter’ key will have no effect.  You could press it hundreds of times and you still wouldn’t get a new paragraph.

 

Underneath your headings, type:

I have just used the paragraph tag to start a new paragraph. I can now add some text to my web page.








 

The <p> tag is unusual because it doesn’t need an </p>.  You can put one if you like but it doesn’t make any difference.

Step 16

You know how to make headings bigger or smaller by using <h> tags.

You can also make text larger or smaller in the main part of your web page by using a <font size> tag.

Type in the following text.

Step 17

Now type in the <font size=”7”> tag and put an end of font tag </font>

Remember to use speech marks as shown.







Repeat for the other font sizes

Save your notepad version and look at your web page version

It will probably look something like this:










Your font goes from being very large (size 7) down to very small (size 1).

Step 18

Notice that even though you pressed the ‘enter’ key on your code and it looked like it was in paragraphs, when you look at it in your web browser, it didn’t see the ‘enters’.

You need to tell it to go onto different lines.

You might not want to make a new paragraph <p> because this will put a blank line between each line of text.

Instead you can put a break tag <br> and this will put the text onto a new line rather than making a new paragraph.





 

It should now look something like this:

Step 19

You will probably want to add some images to your webpage.  It is a good idea to save your images into a special folder that you make and keep by your html code or website.

Go to the folder that you made earlier called ‘web design’ and inside there create a folder called ‘images’.

Go to the internet and find an image you want to use.

Save it to this folder and give it an easy name to remember because you are going to have to type this name into your code.

I put a <p> tag underneath my other font so that my text about horses would be in a new paragraph.

I then put a <br> tag to separate the image from the text.

Now look closely at the image html code: <img src=”images/horse.jpg/”>

 






 

img src means the image source or where you will find it.

Make sure you put an = sign and no gaps

Then use speech marks and put in the name of the folder where the image is saved, in this case it is: images

Note that after images there is a / sign.  In this case this means ‘go and look one level down, inside the folder for the image.

It then has the image name, ‘horse.jpg’

Finish off by putting closing speech marks and a >

 

<img src=”images/horse.jpg”>

This really is just the basics of html, there are so many more things that you can do and if you are interested it is worth looking on the internet for some basic introductions to html and seeing how far you can take your knowledge.