Tip:
Highlight text to annotate it
X
Hi everybody, my name's Jayson
I know you're here to look to learn, so I'm going to try to keep to set a good pace
good speed and be as explanatory as possible for you guys
if you know anything about a HTML you know you can bounce out of this video it's fine I
understand
but, those of you looking to learn HTML
come and stay. Learn. We will be building a site
In less than five minutes and you can understand what you did
alright? so today we're gonna go over
the basics of how an HTML page is set up
and how to create a "Hello World" page it's very simple
so what we're gonna do is you wanna
let's go ahead and file save this as index.html
index is basically just your main home page
and uh, HTML is standing for hypertext markup link
and that's what your browser reads so I've already saved this, you know, I'm going to save over this again
again
it's fine and with this you don't need to be using Dreamweaver
you can be using sublime text you can be using um
notepad plus plus I suggest that if you don't have any
um applications such as Dreamweaver or Sublime Text
so right now let's build a page
in two minutes, okay
So, we're gonna declare a document type: this is all we need to put this is saying "HEY"
my page is in HTML5; this is an HTML5 page.
alright, after that you can put a new line
you're going to say HTML, and then you're going to close your HTML with a
forward slash these are all called tags:
and inside tags are called attributes and values and we can get in that later
it's not needed now inside of our HTML tags
it's basically saying everything inside of this
html5 page is written in HTML and this is my HTML code
now your body is made up to elements
your head and your body what is inside your head
is called meta and title tags so
actually title tag *breathes in* um
inside your title is going to be what you can see
in your tab and you'll see that in a minute now
let's go ahead and make a title it's going to be
Jay's Pet Shop
that's done. We'll get into meta tags later in a different tutorial for now
this is all you need to do your body we're gonna go ahead
and make let's actually go ahead and start with the div to get you
familiar with it. A div is basically a division
of a page or element and
inside of this I'm gonna put a tag and what that means
is no, it's not like a urinal pee, it's
like a paragraph so I think of it more or less like a sentence but if you put more
content into it
it looks like a paragraph so I guess you could call it a paragraph tag
in this we're gonna say HEY! I own
a pet shop and its
called Jay's Pet Shop
done now this
can be saved, and opened up
in a browser, lets pull this over here. There you go
this is where title tag comes into place
Right here Jays pet shop, this is your title
self-explanatory this is the title of your page its gonna change up here
so let's do Jay's
pet shop(s) I will save that and
then let's go back up to here. Refresh it
there you go, Jay's pet shops so
that's your title tag in a nutshell and
this is your tag in a nutshell it's just basic
paragraph there is no formatting applied to it and
its very simple now we can go ahead
and do inspect elements and we can break down the page
that's a little bit too far
there you go, that's your div and that's basically saying you can
put elements inside this div its a division
think of it as like a section now in HTML5
I'm familiar with divs so I implement them all the time
as you should do and
let's go ahead and show you that you could put more than one
element inside of a div
Alright, lets save that and go back to here
refresh and there you go, now you've got two paragraphs
and let's go back to inspect element. there you go
its very simple HTML really, the only thing
that makes a website a website is the styling
and I can't exactly say that because
you do need HTML and you do need HTML knowledge to
apply proper styling and semantics
and in the next tutorial we will cover
semantics and styling but for now
he built a website, it's been five minutes and 17 seconds
it's pretty good, I'll see you next tutorial
heh, stop by