[Music]
welcome to another video from explaining
computers comm this time I'm going to
show you how to write a simple web page
using the hypertext markup language or
HTM L all you need to follow this
through is a web browser and access to a
text editor such as notepad which is
included with Windows so let's go and
get started
so here we are in Windows we're on my C
Drive I've created a directory called
test HTML where we're going to store the
content we create in this video so I'm
going to go down and launch notepad
we'll just type a notepad in there it
will come up there it is as I said an
introduction you can do everything here
with notepad you could use more
complicated editors but notepad will be
fine for our purposes and here under
format I've turned on word wrap and I've
also set the font to a relatively large
size a 20 point so you can see things
more easily in this video and if you're
using say a Linux operating system you
can use the text editor there if you're
using a Raspberry Pi you can use a text
editor they're providing you've got a
text editor you can follow through on
the writer web page as I'm about to show
you now all the HTML documents consist
of elements which have built up from
content and tags and to create the most
basic HTML document we first need an
HTML tag like that at the start of the
document and at the end of a document
another tag which will close off our
HTML which looks like that and as you
can see the tags all start and end using
angled brackets the opening and closing
angle brackets they're in a quality size
or less than or greater than size of
what we use to make tags in HTML and
normally but not always tags work in
pairs as we can see here this is a tag
of a shop to open our HTML tag at the
bottom to finish off our HTML and as you
can also see here it's often the case
that the closing tag is the same as the
opening tag but with a forward slash
sign after the opening angle bracket so
with all of that said that's put some
content onto this basis writer
hello it's always a good thing to do and
maybe a this is a simple web page there
we are and will now look save this will
get a file and save and there will have
to enter a name now will so navigates we
want to save it which wants to be in
that folder I created down there there
we are test HTML I'm going to call this
index dot HTML and be careful to enter
the HTML here because if you don't
notepad by default or save it as a txt
or text file we wanted an HTML file so
we'll save that and if we now then go
across to the folder we actually put
this endlessly there with these
index.html if I click on that it'll open
up our browser and it's saying hello
this is a simple web page and how big
that comes up will depend on how you've
got your browser scaled if I use the
ctrl key and the plus and minus arrows I
can make that bigger and smaller I've
got this set up fairly large you can see
things easily in this video anyway let's
go back to our document I'll be using an
alt tab to go back and forth across this
video between the code itself in notepad
and out Tubbington back to the the web
page we can see our changes and this is
adding a bit more text book for example
this is a second paragraph that sounds a
reasonable thing to do doesn't it and
we'll save things pressing ctrl + S to
save I'll keep saving that way on the
keyboard alt tab back to the web page
our pressure control are to refresh and
our our second paragraph isn't quite a
second paragraph is it and the reason
for that is that in HTML you won't get a
line break unless you actually decide to
put one in so here we could do is to put
a break tag in here we could go with BR
like that for break save back to the web
browser and refresh and then we'll see
it's gone to a second line you might
want the probably a better space than
that we could put in a second great
character saved back again and there we
are
but probably the better way to do this
is to use the paragraph tag so I'll get
rid of that and I'll put around each
paragraph
we'll put a P there at the start and
close the a paragraph tag there do the
same thing down here and also there that
saved back again and yes we've now got
it formatted prop
using the the paragraph tax but having
said that there are sometimes occasions
where it's useful to use those those
break code I just showed you now let's
add a bit more let's maybe extend this
probably have to say this is the second
paragraph including text in bold italic
and underlined yeah we got and we'll
save that and of course if we go over
here it's not in bold italics or
underlined but we can sort that with
guess what some more tags you probably
would have guessed that so if we go
across to there we'll put it at B and
that B was a forward slash like that to
put in some bold I would put in some
metallic Suzy and I you might have
guessed the I you could now guess what
we're going to use for underlined guess
what
it's a you for underline fancy that and
there we are
get rid of the you there like that save
again ctrl s back here ctrl R to refresh
and we started to add some formatting to
our document we might also want to use
some headings for help so we'll go up
here and put a heading in the document
and there were tags for headings the
first one of which is a h1 there are
basically six of the use of h1 to h6 h1b
will oddest so here I could write her
this is a heading like that and we'll
close off h1 like that save that back
again and there we are that's rather a
large heading even for me so maybe we'll
use h2 light of that and where the save
that I'm back and reload and yes I think
that's a more reasonable size of heading
right as we've seen this HTML code
Weaver written here worked perfectly
well but the compliance with widely
accepted HTML standards it ought to
contain a bit more structure so let's
put this in for a start all HTML
documents should begin by declaring
their document type to be HTML so a
browser is certain about the type of
content they contain and to do this we
need to add a declaration tag and the
very start of a document before our HTML
code begins so we'll put it in of here
and we have to type like this doc type
with that exclamation part before it
lays tml close up off without an adult
document type next we're going to define
a header which we'll put it here after
HTML was started we'll do that by
putting in a head tag and we'll has a
tag to a hos head like that and there's
all sorts of things you can put inside
head but all I'm going to put in here is
a title tag there and we'll write in a
simple web page like that and close off
title like that and that completes our
header and then the rest of the text in
this document is going to be what's
called the body so we're putting the tag
here saying body like that
and then we'll go all the way to the
bottom and just before we close the HTML
we'll have closed off the body like that
so we haven't done anything at all to
the content of this document we've just
structured it better and if we save that
and go back to our web page and I'll
just notes you before I do the refresh
that here at the top of the document the
aterna web browser is labeled index.html
if I do a refresh you'll see it's now
labeled a simple web page it's taken the
title we gave it and has also been a
slightly formatting of the page by the
web browser
now so far things are going up pretty
well here I think
but our page is clearly lacking any form
of an interaction any form of a
hypertext link so how did we pull them
in so let's go back to the code and
we'll also say the first line to say
here's a simple web page with a link to
that wasn't like that and obviously if
we save that ctrl + s go back to there
and refresh the page we've now got the
text there for that policy that's not
linked so how do we put the hyperlink in
well what we need to do we'll get rid of
that for now we could keep it and reuse
it that will just get rid of it and we
have to enter here an a tag which starts
like this a href and equals and we now
need to enter a link address and it's
that's a link to an external website the
easiest thing to do is to go actually to
that site there as Amazon and we can
copy you address there go back here and
ctrl-v to paste it in close our quotes
and then close off that part of the tag
there we now put in the text we want to
link which is Amazon like that and
finally we close off the a tag like that
so that will give us a link and if we
just go ctrl s to save back to the
browser back to the simple web page
itself always getting complicated and
ctrl R and there we are we've now got a
link in our page if we clicked on that
we will go to work
Allisyn which is a very exciting and of
course we could go back in the browser
if we wanted to and of course you might
not want to go straight to that page you
might want that open another tab and in
the browser and we can do that as well
they go back over here we could alter
this to say a href and it's got the link
and when after the link but before we
close off that tag we can put in this we
can do a a target equals open quotes
underscore blank closed quote there we
are
if we now control s on that go back to
our page doesn't look any different but
we now click on Amazon it'll open up
Amazon in a different tab and sometimes
you won't want to do that sometimes you
might not now of course there's also
other links you might want to put in
which is links to your own pages so
let's put one of those in let's go back
to the code over here and this is a
second paragraph
get rid of all of that I'm just being
wild today and here you can find some
links I'm gonna put in their bunker to
actually do a link to a page called link
so a href equals links HTML and we'll
close that off like that
and then we'll put in links and then
we'll finally close off the tab say
inform us as we put above basically a
href quotes address end quote
end via inequality bracket what you're
linking and then finally end off the tab
it takes a bit of getting used to but
that's the basic format for putting in a
link and just in case you're wondering
when you weren't looking I actually
created it if I can find it over here
somewhere where is it there it is I've
created another page called links we
should listen shouldn't think too so
let's go back to the code and save it
and then we'll go back to the browser
and refresh there we are and here we can
find some links I'll click on links and
there we are it's taken us through this
page called links with some exciting
links to a site like for example
explaining computers where we could go
to or the surprise and we could go back
to the home page because here we've got
a link back to the home page so we've
now got two pages making up little site
we built and you might be thinking Chris
show us the links paid so I will I'll
list open it up here if I go to a file
and open and you would have to make sure
you set this to all files in that puddle
you won't see the files and if you see
links there it's what you would probably
expect just like the page we've written
a doctype HTML is opened it's got a
header with a title there some exciting
links some links there returning bats
the index page etc so there we are
we've seen how you can put some
interactivity in when we're building up
our web page
greetings here I am back again and I
thought we'd now add an image to our web
page and to that effect over in the
folder were working from either putted
this image here SD card hey there we off
my recent microSD cards test video and
so we go to the the code over here we're
going to put an image in I think let's
put it between our two paragraphs let's
put it in the middle of the page down
there and as you guess we need to tag
for this and the tag starts like this it
goes that IMG thick image then we have
an SRC for source equals and then we
have to tell it the image which if you
remember is the one over here SD card
okay so it's good SD underscore cards
underscore a a dot jpg and then we just
need to close the tag like that that's
all we need basically to put in an image
and while we're here it's worth pointing
out that this file like any other file
you're going to be using in HTML
documents referring to has not got any
spaces in it it's using underscores
rather than spaces anyway there is our
image that's just to save that ctrl s
again go back to our page over there and
reload and as you'll see this is not
work terribly well the image is there
but it's rather large and this is post
because I've got my page scaled so much
to show you things easily in video
earlier on let's take this down to 100%
scaling but still that image is a rather
big on our on our web page isn't it so
we can do things about as of course we
can all sort things out so let's go back
to the code and we can put in here some
instructions to tell us a height and the
width of the image so we do say a widths
say I don't know five sixty and the
height equals or should we put that
about three one five keeps a 16:9 if I
remember rightly so there we are mazing
these numbers that stick in our head
isn't it and if we just go a ctrl s to
save that again back to a web page and
are there we are that's looking a little
bit better isn't the image is now
sitting more sensibly sized on page and
of course having image here is this to
start thinking about the visual
appearance of this page and that gets us
towards thinking about things like font
control and the placement of elements
and design and all that type of stuff
which I'm afraid is beyond the scope of
this video and will get us towards the
use of things like
skating style sheets or CSS which I
might make another video about in the
future
but one thing I will show you just to
make this thing look slightly more
presentable is a trick web designers
have used for a long while to make
things simply more easily presented is
the user Center code so I'm going to go
down here after the body but everything
on this page to be centered so just put
Center like that I don't all the way
down the bottom and out like that or
turn off Center down there you could
just send to individual elements if you
wanted to but we'll save that go back
under that page is now looking slightly
more presentable let's make it a full
suite now as well and as you can see
we're starting to have something that
looks a little bit like a reasonable
webpage now something else I just wanted
to note here is about links and where we
locate files when we're using them in
HTML documents so let's just go back to
the folder there which contains this a
SD card image and often you'll put your
images for a web page in a website in a
different folder so let's just create a
folder here new folder go over there and
we'll call it images like that and let's
just take our SD cards image and drop it
into the images folder like that and if
we now go back to our web page and
reload the image is gone you can see the
size it's supposed to be on the screen
but the image isn't there and that's
because it isn't sitting in the same
location it was a second ago so if we go
back to our code we can fix that because
here we could put where it is up there
look and we should have images forward
slash SD cards that's where we've now
put the image save that go back to our
document reload and the image has come
back again so I just wanted to show you
that to make it clear you can actually
use a folder structures directory
structures inside any link reference in
HTML for example in an image source link
like that or you could do the same sort
of thing down here when we referred to a
particular document in a hyperlink
guess what to make things very exciting
I thought we'd now add a video and a map
to our web page so what the video in
here I think will have a paragraph
they're saying it here is a video
exclamation mark because it's very
exciting like that we'll put it in there
and we need some code to put in there so
what I'm going to do is to go to a
YouTube and it's over there look I
brought up a video and we can click on a
share in YouTube and we can click on
embed and it'll bring up some code there
we can copy that code and go back to our
document control these are pasted in we
get the HTML from YouTube to put it a
so-called iframe with all that
information about the video so we just
save that go back to our web page over
here and refresh and all look the pages
got longer because down here is a
YouTube video which we could obviously
play from there which is a which is very
cool isn't it and we'll also add a map
as we said we'll go to a Google Maps
there is a Colwyn Bay on Google Maps so
let's just go to the menu and down here
on the menu somewhere there is a share
or embed a map and we want to embed a
map and we want a copy HTML and we go
back to our document again and shall we
have another paragraph there we are here
is a map of Cole Wynn Bay yeah we are
almost finished that line that you don't
need to put all these things and of
course but I like to have some text as
well and there's the code for that
rather long isn't it we'll save that go
back to our document here and reload our
web page and hopefully we've now got the
image we've got a video and we've got a
map all embedded in our web page it's I
find it's fantastic the way you can link
all things together on the web like this
building up things in the hypertext
markup language
the HTML files we've created in this
video are stored as we've seen on a
local SSD on the C Drive here in Windows
however these files could be uploaded to
a server on the Internet to make them
publicly accessible as a web content and
many options exists for doing this for
such web hosting and these of course go
beyond the scope of this video even so I
thought you might like to see the
content we've created here actually
uploaded them working on the web and to
do this I'm going to make use of the
Amazon simple storage service or s3
which I demonstrated a few videos back
if you've seen my Amazon Web Services
video you might remember that in s3 I've
got it running over here we store files
in buckets which can be made publicly
accessible and so what I've done is to
create a bucket here called a ICI HTML
demo and in this bucket I've actually
uploaded all files you can see down
there we've got the index father and the
links file and I've also created an
images folder and uploaded into that the
SD card jpg file and what I've done is
to set the permissions on all of these
files to be public and what this means
is we can open up a newer tab in our
browser here and I can paste in the
appropriate link and there we are the
content we've created is now working on
the web this is exactly so much we've
got over here but here it's actually
running from a C Drive locally here
which is running out on the Internet
running from an Amazon s3 server exactly
same pages all that sort of stuff our
link should work the same way we can go
to that exciting links page we go back
to the home page there we are it's all
working absolutely fine and very much
it's demonstrated how we've managed to
progress from writing some HTML code in
notepad to having a functional web page
today few web pages have written
directly in HTML this said a knowledge
of HTML remains really useful there were
often occasions where little bit of HTML
code can be dropped into things here and
there and in that context I hope you
found this video useful but now that's
it for another video if you enjoyed it
you see there please beste like button
if you haven't subscribed please
subscribe and I hope to talk to you
again very soon
[Music]
you