Tip:
Highlight text to annotate it
X
Hey! How's it going everyone? This is Brandon Bias
from chchcheckit.com, and welcome to a
introduction to HTML! Oh yeah, I still got it, haha!
[chuckle] So, anyway, I will be showing you how to hand code some very basic
HTML. And I mean that literally; we're not gonna be using
Dreamweaver, because it basically lets you push a button and
insert your HTML blocks, and, let's face it, if you're gonna be learning HTML
you might as well do it the right way; because
when it comes to coding anything you're going to run into issues
at some point or another and it's best if you understand the language
enough to where you can go
and find those problems and fix them. So the best way to do that, obviously, is to
know how to hand code everything. Alright? Make sense?
Awesome! so to get things going here you're going to need some sort
of editor that will allow you to create your HTML documents
Luckily this isn't something that
requires very specific software.
For example: you could use the text editor that comes with
either Windows or Mac OS X. Or you could even use a third-party software like
Notepad++
or, in my case, I'm going to be using Adobe Edge Code
which is, of course, 100% free and
very convenient in that sense. So if you guys wanna follow along
and also use
Adobe Edge code, just go to the Creative Cloud and download it from there.
However, something that you should notice is that this is a preview; this is
not a finished product so if that concerns you in any way whatsoever
then I highly encourage you to get its original counterpart which is called
Brackets.
This is actually a program that came
before Adobe Edge code, and is the original version
of it. It's an open-source program created by Adobe
and... someone else. I forget who else has been working on it. Either way,
it's open source which makes it free and it works
on Linux, OS X, and Windows so
have at it if you want to use that. So let's assume that you've
already download and installed Adobe Edge Code or Brackets.
The first you think want to do is create a folder on your Hard Drive
to contain all of your HTML documents, images, and all those related files.
I just made a quick little folder here on the desktop called fishylabs.com.
It's just a a made-up website; I'm pretty sure it doesn't exist
and it's just gonna serve as a demo for what we're going to be working on.
Once you've got your folder created, go ahead and
open up Adobe Edge Code, and the first thing you are going to see is
an introduction to Adobe Edge Code. I've been using it for a while so
obviously I don't
see it now if you wanna read through the instructions
on that default page I really highly encourage it because there's some useful
information on there.
However let's just go ahead and move on to the
job the next up here which is selecting your folder for your website
so do that we'll just go to File and shoes open folder
and are you gonna do is navigate to wherever your folder is double click it
and shoes select Folder at the
the reason that we do this is essentially this
folder axe as the basically the website inside a Adobe Edge code
so to the program we are essentially working on
fishy labs dot com now it probably doesn't make sense right now but I'm
assuming you all
all kind of fall together a little further down the road so the first thing
that we do
is good to file and create a new document
and unfortunately this is literally a blank
unnamed documents so let's go to File and choose Save
and make sure we're still official apps are calm
and we're going to name this file index
died HTML now the reason we're calling this the
index is because whenever you go to a website
the at the initial file data brings up
is that index so if you go to any website itself you're going to check dot
com
and hit enter it's actually pulling up
that index that AC no or index a PHP file
it just doesn't show it there so if I were to actually type in slash
index dot PHP it should give me the same side
see there you go so it's it's literally the ru
file 4 your website no game
alright so when you're creating your very first EC more documents
and also the res your AC Moore documents for the recipe turned the
their is a certain set love up
pieces that you're going to have to include in order for it to work
the first thing that you're gonna need is aid declaration that basically tells
the browser
what kinda EC know that you are using
locally I have this nifty little web say here that has
eighty collection %uh corrects doctype
declarations that's what this call it's a doctype declaration it lets the
browser know exactly what kinda it's the mother you can be using
now if you want to do some research as for which
the declaration that you should be using
feel free but for the time being we're just gonna be using the East email 4.01
transitional size this'll separate here will highlight that
copy it and it's just look
what is minimize that and paste that right into our document now personally
I really like it having this gap year so I'm gonna bring that up
and make sure there's a a space between that's you
quotation marks year Garrett
alright so never we've got the doctype successfully declared
now we are going to move on to the other remaining
pieces that we need in order to make this a is CMO document work
so let'*** the enter key to move down the line to and I'm gonna type out the
HTML tag so as something they need to understand about tags:
is that ninety percent the time they are going to require in opening tag
which looks like this it starts with the
it starts with the left pointing a row otherwise known as the
less than sign men's gonna go to sue the
tagname in this case it is HTML
and is gonna ends with a ray pointing arrow
otherwise known as the greater than symbol so this
is considered opening the EADS Gmail tag
ans the thing about the it's more tags that cements to contain
the rest of the code for the rest your website so has
sue have a beginning and then the code they were put inside
and then it needs to ends so we need this closing tag on the end
and the closing tag is exactly like the opening tag
it simply has a backslash in front be tagname
alright nice and simple alright so let's move on to the next required peace
in that is the head tag so
the start of with the left and a row type in
head and close it and something that you'll notice
is that Adobe Edge code tends to Bob
help you out in closing the tags that you need so
a when you're using Adobe Edge code you shouldn't a
ever really get confused as to whether or not you should close a tag has it all
automatically close it for you which is kinda nights
so anyway now we've got our head tag in here let's go ahead and create a break
in between our a opening closing tag and will take over here
something that goes inside the head tag that you might find
I rather useful for naming your documents the 1i
is the title tag so
analysis type in I are welcome to
fishy leads dot com
and let's go ahead and file save this
anna's minimize this and will double click the in Dexter a single file
and what you'll notice is that up top we have are welcome too fishy loves da
context
this rehear is the title and stats basically what
will help you to distinguish your tab from
basically everyone else's are at
so let's circle in close-up bring back
edge Co to move on to the next part so the only other thing that we need other
than the head tag
is the body tag so the body tag is actually
where you're going to be putting all the HTML for your website
the head tag here is simply a container for
important information like a likelier style are now layer styles but %ah
cascading style sheets some javascript things of that sort they all go into the
head tag as for everything else that goes right into the body
usually arrogant depends on what you're working on but
anyway so these are the essential pieces that you need
to get your first it seem odd aikman working so if you were to start
typing in some text inside the body I you know welcome to
fishy labs dot com
I'll we are so glad
to have you here so if you save this
bring back up your web document and refresh it
you'll see there we go we've got our text welcome the visuals the car we are
so glad to have you here
you guys have successfully made your first web page contractual asians
and it doesn't have that stupid hello world text
mumbo-jumbo that eyes so hate in other tutorials
a alright so I am
obviously that that text though we had their it just didn't really
stand out so we want this to you to be a
header they exclaim: so the world welcome
right so let's let's ditch this less it'll be a text year
and we're going to you actually let's cut this
and we're going to inserts be header tag so
add to do this we're going to type in h1
closer to and this is basically representative
love a header styled with a
a header rank above one their ego
so if we put our welcome the fish labs are calm inside this header
one tag and we were saved go back
and refresh notice that it makes its much more bigger
ahead much more noticeable so I am
another thing that we can do is tsu aired in a
age to tag and this can be like a sort of subtext
if you knew what we were doing
here the you
would-be concerned
at so save go back refresh
in there you know we have ourselves a little bit love a up
assertive a subtext to it now the great thing about headers
is that they go from each one all the way to age 5 soap wanted this to be a
little bit smaller but still a little bit more
emphasize we could change that soon h4 go back to refresh
and there you go now as something that you'll
you've probably noticed is that I've been going back and forth
between my my web document ands
Adobe Edge cold here having to save and refresh all the time
I am that's that's usually how goes for web coder
in the sense that the they have to keep going back and forth and refreshing
refreshing this
just to see what's going on well with Adobe Edge code or brackets
there's a live preview option that we can benefit from this
as of you got to the top right hand corner serviceable lightning bolt you'll
see that we've got
a live preview if we give that sucker a click
and I give us a little moment it will load up our website
in a new browser and the great thing about this is that it's a literal
live preview so if we were to see you go in
an ad in a paragraph texts
hello this is some random text
now we don't even have to save this document we can merely tabak
to that preview and everything that we changed will show up
is that is fantastic %ah at bringing love this
a alright so we got ourselves some
some very basic tags that we've a stab this year so we've got
our body tag it got a hair a header brink one
a header rink more and we have he
four paragraph if you guys didn't catch that earlier so
if you guys won multiple paragraph should merely just make
a more paragraphs
and then we could even add another paragraph I mean you can just go
with unlimited paragraphs you know
blow a rope wraps there
so there's this basically just makes new paragraph seek input in
aid exorbitant amounts have attacks reviews for your website
now well we've if covered tags in them most the time you have an opening
tag in a closing tag but I'll
something that you need to realize is that there has to be weighed sue
to customize ease I mean for example what if we wanted welcome the fishy labs
dot com
to be smack dab in the middle rather than push over to the left hand side
world that is where attributes come into play
if we were to go into the h1 tag as
type in a space and you'll see that when we do so job
Adobe Edge coach as you give us a a list love possible
attributes that we can that we can use here but you're going to use
is the o-line at should be and saw in the newspaper the word online
equal sign two quotes and inside you tell were you want two lines in this
case you you to do
left's we can do Center
or we can do rights so we say we throw this guy into the center
and do the same thing for our h4 here
whips ally equals
Center and tabak's your document now should have welcomed a fishy labs dot
com
and if you know what we're doing here you would be concerned smack dab right
there in the middle
alrighty then guys so I am
we we've covered some recovered a
a lot of the the very basic elements that you need in order to create
I your your first website here you understand that there are
I'll a couple pieces are we need the first thing that you want
is a doctype at the first thing we need is the
its email tag the inside the EC motek we have a
head tag which allows you to contain a title
in after that header we usually have the
body and inside which we have the rest of our
it's you know it's you show off our website now there's a whole lot more to
go here but I really don't wants to
Comber you with too much all once so I if you have any questions feel free to
ask in the comments section below or better yet give me some ideas for what
the heck it is a you want me teach you guys
on later on I'm definitely show you guys how to applies some
cascading style sheets to give you some very
vast amount of control over your web site how it is presented now looks
other for the time being I think it's best that we can stick to summer these a
the score tags: because you never know when you're gonna run something that
you're
and they don't know how to accomplish that is really easy to accomplish
ahead with with just a a particular up
a particular tag so again guys leave your comment I love to hear 'em
and I will see you some other time
these are guys Real ID recreating
program
the work with
them
with
well