HTML5 AND CSS3 TUTORIAL 1

CREATING OUR FIRST WEBPAGE

hey how's it going it's UZAIR

here and welcome to tutorial

and in this tutorial we are

going to start writing our first webpage

so the first thing we have to do is

actually save an HTML file so i'm going

to go ahead and click Save

where I want to save mine

but you guys can save yours wherever you

want.

ok so I've got an html5 tutorials folder and I'm

going to save tutorial one in there

ok and because this is our first webpage

whenever you save your home page you

need to save it as index dot HTML

ok and if you guys want to make sure

that it saves correctly as an HTML file

then you can just go ahead on this

drop-down list and look for HTML which

is over the hypertext markup language

ok so that's what HTML stands for is

hypertext markup language so let's go

ahead and save this

okay we've got our first web or our

first HTML file now because HTML is a

mark up language what that means is that everything is

written in these things called tags

ok and some people call them elements

now a tag looks something like this so

you go ahead and the top in the smaller

than sign and the greater the inside and

then you type in whatever the tags name

is so let's say for instance we had a

tag that was called tag

now this isn't actually a real tag but

you know just for the purposes of explaining

that's pretty much what a tag looks like

and we usually have two of these tags so

we usually have an opening tag and then

a closing tag and the only difference

being that a closing tag has that

forward slash before the tag name

ok and what these tags would then do is

Mark up some bit of text in between us

so let's say i had some text here then

these tags would be telling the browser

how to show this text on the screen ok

so they basically mark up these tags

markup this text that's what they're there for and we

also get single tags in HTML so we can

also go ahead and they look like this

like tag but then there would be closing

/ before the end of the tag so we've got

single text and then we've got double

tags which you saw just now

ok but those aren't real tags so

we can get started with writing some

real HTML code ok and the first thing we have to do

whenever we start writing a web page is

start off with something called the

doctype tag and what that does is

declare what doctype we are using what

so basically what version of HTML

we are using ok and because we're using

html5. then we type in !DOCTYPE i always put mine as all

uppercase but i think it works fine as

lower case as well and then I go ahead and type in the word

HTML

ok now with previous visit versions with

previous versions not versions of HTML

ok we used to have to type like some

really long doc type element in here but

with html5 all we have to do is type doctype HTML

and we're done

ok so that is our doctype declared and

our browser now knows that it's looking

at a html5 document

so now that we've got that on our page

the next thing we have to do is

actually told the browser where HTML

starts and ends

so the way we do that is by putting in

another HTML tag so HTML and as you can

see this one turns blue and most of our

HTML tags are all going to blue

from now on I guess that is where our

HTML starts and then we also have to put

in an ending HTML tag so i'm going to go

ahead and in mine off over there

ok and this is known to most people as

the root element

ok because all the other HTML code that

we're going to type in goes in between

these two tags ok

so you're not going to put any HTML

outside of these two tags

ok and that is why it's called the root

element because everything has its root

in that a tag

so the first two tags that we're going to

put in this HTML tag actually divide our

website or webpage into two different

sections

ok so the first one is called the head

and we have to go ahead and that

off as well and then the next part is

called the body and ending body now what

we've done is we've split this HTML into

two different sections so we've got our

head and then we've got our body

it does look a lot more tidy to have

everything nicely indented like this so

i can tell exactly where my head starts

and ends and exactly where my body starts and ends

so that one of the things that we can put in our head

is called the title and ending title and what

this does is like display the little bit

of text at the top of the browser and in

the top of the tab

just put this is my first web page
the body that is where all of the

stuff that the user is going to see has

to go so basically just type in some text i'm in the body

so I'm in the body

ok and if we save this now and we run

this in google chrome what we've done is we've

just created our first webpage and as

you can see i'm in the body is displayed

in the part of the website that the user

is going to be looking at and then our

title is actually up here in the tab for

chrome and it says this is my 1st

web page so that's pretty much how all of that

works but there's one last thing i want

to mention to you guys and that is

inside of our head we also have to

include another tag which is a meta tag

and you guys might not understand all of

this just yet but it'll probably make

sense to you guys later on in the series

so just I show you

charset equals utf-8 ok I'm going to

end that off with a slash because this

is going to be a single tag

this is not going to be a

valid HTML document

so thanks guys to reading this tutorial and stay tuned for next blog