XHTML and CSS Tutorial - 2 - Creating our First Webpage Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

what's going on guys is Bucky and
welcome to your second XHTML and CSS
tutorial now before we get started what
I want you guys to do is open a new file
and you can do this in one of two ways
you can either press file and then click
new or you can just click this little
new icon right there and it's going to
open up a new blank file so once you do
that your program or file should look
blank just like mine basically so go
ahead and before you start typing away
just slamming your fingers against
keyboard listen up because I'm going to
tell you something that's very important
all websites are made from something
called tags now tags are pretty much the
pieces of a website so for example if
you wanted to put a picture on your
website you need a picture tag if you
wanted to put a link on your website you
need a special link tag if you wanted to
create a button on your website then you
would need a tag for your button so on
and so on so pretty much all the website
is is a bunch of little tags combined
into something to make you know a
complex website so in order to make a
tag here's the basic layout of it you
press less than and then you write the
name of your tag like the paragraph tag
is P and then you write the greater than
sign so pretty much it's a less than
sign and greater than sign in something
in the middle in this case P for
paragraph IMG is for image for pictures
and anyways you get the idea so let's go
ahead and create our first tag now now
check it out I'm not going to be going
in depth about this first tag but you
need it for every webpage it's a special
tag that you only use once per webpage
and it's called the doctype tag now go
ahead less-than and greater-than sign
and inside press explanation mark or
explanation exclamation explanation
whatever the heck you call it it's above
the one so anyways after that press do C
T y PE
and press HTML now again like I said I'm
not going to be going in depth about
what this tag
means it's basically telling your
browser what type of document it's
trying to look at but anyways it's just
a formality a technical thing um we'll
be going back to it later but for now
just put it in your file and don't worry
about it now go ahead and give yourself
some space hit enter and let's go ahead
and start typing some real tags that we
can understand now the basics of any web
site is pretty much the HTML tag your
entire web site is going to go in
between your HTML tags so go ahead and
press less than and make a tag that says
HTML and press a greater than sign now
go ahead and press ENTER a couple spaces
and make another tag that says less than
and now you want to put a forward slash
and put HTML now as you can see I have
two HTML tags slightly different nursing
all right what the heck is going on well
first of all the HTML tag pretty much
tells your browser
all right browser I'm about to make a
website anything I put in between here
is going to be in my website so this tag
means I'm going to start here in this
tag with a little forward slash means
I'm going to finish here so that is the
basic structure for a beginning and an
ending tag it's pretty much less than
the name greater than and for your
ending it's a less than slash the same
name greater than so that is a basic
HTML tag now anything that goes in here
like I said is going to be part of your
website so let's dive in a little deeper
every website you see every single
webpage you have ever been to is made up
of two parts the first part is called
the body excuse me the first part is
called the head the second part is
called the body so what is a head and
what is a body the head is where all the
browser information goes the technical
stuff that you don't see when you go to
a web page and this includes keywords
for search engines the title of the web
page maybe some browser info all of this
crap it goes into the head
now the stuff that you see the pictures
the images the paragraphs the text this
goes in the body so whenever you say
alright I'm going to make a head in the
body you know DePalo the technical stuff
in the head and all the cool stuff in
the body by the way for these tutorials
we're going to be working with mostly
the body because you know we're not
worried about search engine so if we're
worried about how sweet our website
looks so anyway so let's go ahead and
create a head tag right now so let's go
ahead and press the less than greater
than and inside press head now under it
let's go ahead and make the ending head
and now anything you type in between
here is going to be in the head of your
web page so if you remember about 30
seconds ago I said that one of the
things that you can put in the head of
your web page is the title so let's go
ahead and inside the head between the
opening and the closing let's go ahead
and make two title tags title to open
and title to close and make sure you put
that forward slash to signify the
closing now anything you're right in
between here is going to show up in the
title so just go ahead and type this is
the title now first thing I want to
point out is this I know all I have my I
know I have all my tags on separate
lines but you can also let me get rid of
that you can also have two tags on one
line I just put all my tags on separate
lines generally to make everything
easier to read but if you wanted to put
it on the same line you can another
thing is that you might notice that
everything is kind of going inside one
another like a sandwich title goes
inside head and all this is inside HTML
this is because you need to embed tags
within another you can't have um you
know HTML head HTML head title HTML
title HTML it can't crisscross
everything needs to be within one
another because that way your browser
knows all right your title goes inside
your head and that entire thing goes
inside the web page so if we put this
outside the web page you're back RA what
the heck's going on and you
probably going to get an error message
so anyways that is how you make the head
and the title to a website so I was
going to you guys about the body in this
story but I think I'm going to wait for
a next story for that so first let's go
ahead and preview this title and see
what we got in order to save a website
you need to do this go ahead and press
file and save as and when your save as
box pop-up I'm just going to go ahead
and save mine to desktop you can save
yours anywhere go ahead and name your
file index now index is pretty much the
main name for you know it's pretty much
the home page so let's go ahead and say
that is indexed and make sure you don't
save as text what you want to save as is
a special file type called HTML so
scroll down until you see something
called hypertext markup language that's
HTML that's pretty much the type of file
it's pretty much the website file so
whenever you're well let's go ahead and
save this first and look here's my HTML
right here so whenever your computer
opens an HTML file it automatically
knows that it's supposed to be a website
in that your browser is supposed to open
this so let's double click this in my
browser opens so you can see Microsoft
Word didn't open on Photoshop didn't
open your computer knew that this was a
website so that's why it took a browser
to open it now as you can see we have
nothing right now because if I open
notepad again you see we don't have a
body so that's why we don't have
anything all we have is a title and
check this out on our website we have a
title that says this is the title so we
did that by making two title tags and
typing this is the title right there so
if we change this it says this is the
title sucker right there and save this
again now when we refresh our page you
can see our title change that this is
the title sucker so that is how you
create a basic web page with a basic
title in the next tutorial what I'm
going to be doing is creating the body
and actually making some stuff that you
can see on the actual web page right
here
but for now that's how you guys get so
thank you guys for watching don't forget
to subscribe and I'll see you guys later