learn

Learn HTML in 12 Minutes



Sharing buttons:

I don't think this tutorial needs much

of an introduction HTML is of course the

language used on the internet mainly for

the structure and content of websites

but used in nearly every website

nonetheless I'm going to be using

notepad in Windows for this tutorial

just to demonstrate how easily you can

create an HTML document hopefully by the

end of this tutorial you'll have a good

understanding of the structure of HTML

you'll not be an expert but you should

have good knowledge of essentially how

HTML works which you can then build on

and progress from there so we've got a

blank document here in notepad HTML is

made up of tags now tag is how HTML

defines different areas and sections of

the document and the Tau a web browser

would read and interpret the code

essentially so the first tag you need in

HTML is simply the HTML tag

now most tags in HTML need opening and

closing so see up here we've got the

opening HTML tag simply the word HTML in

between these symbols and then down here

we've got the closing HTML tag which is

nearly the same of course with a forward

slash put in there and that's defined a

closing tag so everything in this

particular HTML file will now go in

between these tags so I'm gonna use tab

to indent the tags within it and it's

good practice and makes HTML much easier

to read so within the HTML tags we have

two sections we have the head section so

we have an opening and closing head tag

and then the body which sorry needs an

opening and closing body tag so this is

simply the the basis and the basic

structure of an HTML file so I'm just

going to go through some vital tags and

some really basic ones that you need to

know to start building websites in HTML

so in the head section this is where

like information about the page would go

in the body section this is where the

actual content which is displayed to the

user would go so we'll start on the head

section all we really need up here for

now is the title tag now this is the

text displayed in a web browser title

bar I'm going to stick in there hello

world for example so if we were to save

this now you must remember to save it as

an HTML file you can just change in

notepad to save as type to all files and

then type dot HTML and simply as the the

file extension so if we were to save

that and then open it in a web browser

we would get a blank page but it would

it should say hello world in the title

bar okay so we've got a blank page but

it says hello world up here in the title

bar so now we want to add some content

to the page so usually the first thing

you would want is a title HTML has some

handy heading tags we've got h1 which

would create the biggest heading a

heading in terms of style simply

increases the font size and makes it

bold so that would be opened and closed

just the same as the other tags we've

used so far

then after h1 you have h2 h3 h4 h5 and

h6 which get smaller each time so h6

will be the smallest heading you could

have so h1 will be the main heading then

you'd use h2 as a subheading for exam

so we're just we're just going to use

one for now on stick hello world in

there

and I keep switching to Internet

Explorer so you can see the progress

we're making so now we have a heading

hello world obviously that's what we'll

just create that so after the heading

you'd want some text potentially and

maybe a paragraph of text I would use

the P tag P of course for paragraph this

is also open and then closed with the

text inside so we could do that and if

we save it refresh the page we get a

paragraph of text underneath and because

we're using the correct tags the heading

tag in the paragraph tag and the h1 and

the P the web browser and HTML

automatically sets the line spacing that

indents everything as we would expect to

see it if you wanted another paragraph

it would be a simple case of adding more

P tags and then if I'll just do that

you'll see there's another paragraph

there again with with the line spacing

automatically added for us so you're

building an HTML web based website you

may want an image so we're going to

create an image again I I'm doing all of

this from scratch so you can hopefully

help you understand exactly how it works

so I'll just create a new image let's

call it image dot BMP

of course it's just an empty file at the

moment so we're going to just create an

image it of course it doesn't really

matter what in it because it's the HTML

we're working with here so we've got an

image we're now going to look at the tag

we need to put the image into the web

page so this uses the IMG tag but of

course an IMG tag alone wouldn't get us

much of an image the way this one works

is we set properties within the tag

itself so we set the path to the image

file we use SRC for this method equals

and open and close quote and within the

course we put the path so I can just use

a relative path I'm not going to go too

much into how relative and absolute path

to work but essentially relative path I

can simply type image dot BMP and since

it's in the same folder as this HTML

file it will work

I could of course go through the full

thing by typing like C colon backslash

Documents or whatever it is in your

version windows etc but there's no need

since they're in the same folder if it

was in kind of an image folder it will

be images slash images dot BMP it was in

a folder one level up you use dot dot

slash to go up a level this is when

using relative file paths which is

usually much easier so also in the image

tag you can set things like width you

would do it in the same way you could do

it in pixels ended in percent if you

don't put those properties in then it

just displays the original size of the

image so the image tag doesn't actually

have a closing tag because if you think

about it we've we define everything

about the image within the tag itself so

that if we open and close the tag though

there's nothing to go inside so what we

do we can't just leave it like that

so we

it's a self-closing tag we just put a

forward slash at the end of the tag

before like essentially closing the

opening tag and that makes it open and

close all at once so if we save that and

go back to our webpage we can see that

lovely image I just created in paint so

it's as simple as that to add an image

to a web page using the IMG tag so I'm

going to quickly go over a couple more

tags that you would use on a regular

basis if for example we had another

sentence in this paragraph this is my

first webpage I hope you like it just so

you can see what that looks like as

you'd expect this is my first webpage I

hope you like it but what if we wanted

that second sentence on the next line

yes we could use another paragraph tag

and put it in a new paragraph but that's

not just the next line that's a couple

of lines down if you want to do that we

use the break tag for just a line break

and that's simply BR now again there's

nothing that could go inside of a break

so this is another self closing tag now

you could just do it like that

that would work in HTML but that's

probably a better way to do it so if we

save that and have a look at the results

you can see it just goes on to the next

line without leaving any spaces so the

final tag I'm going to show you in this

tutorial probably not one you'd use

loads the HR tag now this creates a

horizontal line across the page so again

there's nothing that could go inside a

horizontal line so it's self closes it's

as simple as that it'll sort out the

spacing for us

hopefully and we see we get a gray line

across so you could use that to separate

different sections or a webpage so we

created a basic HTML page just a recap

we've got the HTML tags which everything

else goes in and then inside the HTML

tag we've got the head on the body tags

inside the head tag we put the title tag

which is what displays in the title bar

of a web browser and inside the body tag

we have the heading the paragraph the

horizontal line in this case another

paragraph and an image another fantastic

web page but that is the basic structure

of HTML this is the kind of thing you

need to know to start building advanced

websites so hopefully you now understand

how tags work you open them and close

them various tags self closed off don't

need to be closed because they have no

end tag of course this web page is not

on the internet it's just on my hard

drive or in your case on your hard drive

no one else will be able to see it to

get it online you'd have to find a web

host and upload it there are three ones

out there but again I'm not going to

cover any more than basic HTML in this

tutorial so good luck in creating your

first web page and I hope you can then

progress to build a full website thanks

for watching