Learn HTML in 12 Minutes

Learn HTML in 12 Minutes

28.Jul.2021

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

We are social