Tip:
Highlight text to annotate it
X
Hello everyone! Welcome back to Geek Disorder's so web series over html5 css3
JavaScript and jQuery the Slavic I'll be walking through the series
today will be go going over how to code the head section
a your web page and what you see on the screen right now
is what are finished product will look like um
so what to do when you run well here we go
it displays nothing in the content part of your browser
well I think it does display on the screen is this a
favour con right here and the title
love your web page alright
to get started the scoring create a new
%uh a small document are first thing won't do is save it
and I have a folder already set up on my desktop
you'll want to create a folder also because
for the first a few videos for be working out one folder you want
everything to go in the same folder
for leaking purposes we're not a later on we'll go over how to leak out several
former
right now everything to me the same folder our catalog name %uh
a web page under school call home dot HTML
and of course a alright if you remember
we set up the structure oven html5 document the first thing we need is our
doctype
so let's go and put that in there or on
alright next Oaks the
next thing is for realz open our eyes to mill
and I'm avoid close it
to get back to stick it into the was her job isn't going to close it and then go
back up in at
the carter in between the opening or closing that way don't forget to close
tough later on
and it causes problems a
were to create our head section
I'm going create the Body section also you that we're not adding anything to it
today
is required a elder for
a your web pages our
the first to element we're gonna at our head section
a is what we call I meta elmer
okay Ameda Ameda
elmer the it provides information about the a simple
document that and this officials called
omitted data a search engine uses
lol and they'll grab stuff from it for ranking
also how to display doesn't
the you know keywords and descriptions and stuff like that
okay so the Miller element looks like that is a
empty tag that and we're gonna asthma tributes to it
um the first attribute is called a character set
care the the characters
a said is
search so the cat research review is just this right here
course where political science and that we have
a the are a double quotes
to play softball %um so what is a character set I'll
a if you'll know more about character sets you can fall asleep by here
our cultural putting description a
it isn't that think it is important but it's not that important
HTML especially if you work in the US and its all English
if that works for a big company it cast for *** also becomes a lot more formal
working with the
black C plus plus the stuff like that a
so a character set the the
they describe oh well they're due to fires to describe
a series of universal characters the
like if you have you know jet the Japanese there was chinese-language
they don't have a be CDF she they have different characters trip
to you know to use in their language there's a lot of different characters
out there
throughout the world you know that we need to be able to put on a webpage earn
a program
and so I we can just or mall in there
pick peter has them the browser whatever has spilled
no which ones who want to use and we do this by using character sets
well the character so we're going to use is called you tee eff
dash Pete a this is the preferred
character set for web pages
in emails a so
as it has a fit if you want no %uh more detail about character sets
you can I check out this week a PDA here an illegal
it'll have the history analysts the all the different character sets and such
a recommend that your especially gone father into programming
please check that out or a home
but were will use the Meditech more than once
there there's a lot of different attributes we put with it the help love
SEO a Webb said websearch
whether search engine rankings
in optimization a.m.
so we can open the meta tag and
will use the trip you a name
the name attribute and well so
what goes in the name will the name could have four different the
values a those values are like
application name alter description generator and keywords
we're gonna be using a keywords and description
today a those the two most used once
um the name attribute a
is also when you use the name attribute you're also use a
content review the content review has one bill you
and that's just text the
what what the content attribute does is you set the value
for your name it review like I said it can have
application a alter description generator keywords
ever go away go ahead and set the develop to
description
okay and as I said we're gonna have a content tribute to go with the name
but review and as I said is its value is always text while
will what is the car to do it describes the content for the value
at the name attribute so the name attribute
says with content on the scrub are all what's gonna be
was gonna be so we have a description
the content review is gonna give us the description
a solo the description of our web page
here and the sea un disco put lovefest
at: and gaming
tutorials old enter
interdict the real test description I'll my homepage
%uh gaming a sorry get disorders home page
Arun and as a separate have one more
men attacked it's gonna be name again
except this time we're using
keywords as the value and
just like last time we had to content a tribute to go with that
so we can actually describe the keywords and solar park
what my keywords gonna be will the
the among have any more than ten key worsen key words or less is
is a good the limit a
its optimize for search engines
wanna search engines have kinda
lowered the ranking keywords they don't they don't put much weight behind on
but is still good idea to keep using on also
on description are the car the content part
a attribute with the description a
value it can be longer than 65
characters it should summarize a
the cart if your web page and it needs to be unique
the *** the content which put in the content attribute
when using the name to Eagles description that should be unique
like like this right here for
a my homepage I'm a youth
this the value for content
well if I create a bell us were page
forget disorder I will change it to something like
arm you know get disorder
a up you know about about us
about the history key disorder whatever up put on that page somewhat
try to describe it I am the best mobility
I so for keywords were an *** and keywords for this web page for our home
page
and 5th are always cover general overview well of course we're talking
about
keep disorder here and use a free
each keyword key phrase just for the comma
I will put it: a for reals
I'll put programming I'll
I'm gonna put gaming
I'll HTML the
see if this 3 and that's pretty good
so we have our key words: a value for name
a attribute that we have a car to we have those keywords listed
alright and the said you watch a key words to be you
have unique a you know all webpages
or don't have the same keywords
alright well de Spa the last military will do
the next one the next I will do is our title
a tag and was that look like
no it's pretty easy he's just title
and there we go and
well I'm leading it should be used to this which is cool a
I'll place in art our content so what's our content while
this to look but this web page so this but page
I'm just called call it geek disorder
them a call home page so
the you told knees to be a
you need to always have a tile though because its was gonna be displayed
a in the tell borough the browser the tabs the browser is also can be used
with one favorites or bookmarks as the name I'll bookmark
I am ish it's described your web page
to to a certain distance like this is my homepage
love for by kik predict disorder a
anne's be unique will I won't keep key to follow the same because
every web page is gonna be on the cake disorder were paid website
but this last part this whole pages will change it might be about us news contact
us
some along that line also
your title does not need to be over 65 characters link because when a search in
to comply with the display it
most the time they don't display more than sixty five characters
and so you watch a whole told the fit in there are a
and so well we have so far well
save and the run this
them the method a tag they don't display at all
don't think this display is our title right here
are a so the last yr elmer we're gonna look at
the for our head section is the link element
it so if the FT element just like them elmer
and leak now we're at some attributes to it
ansel what is what we gonna do with the link will work will display icon
as if over here but run this one
this icon right here this is what we're trying to display with the link
element and so in order to do this a
for forget let them but the Lee Coleman know what we're trying to do we do that
with a
real attribute
a and were on display icon so the
value on a set icon I
space and well it is know where to find the sock on
well were put in this icon in the same folder
and in order to tell where the stock on is
we use a each for a and then the value is
a I don't want payback on and dot
I see I feel alright
and this is all you need to put you don't need for HTTP
%uh you know that you got anything like that
if the files located in the same folder
and that's what we're gonna do I have my for favor con right here
and I was on track to a party in the same folder as my webpage
and this will work I later on we'll learn how the link to it
outside the folder or maybe in a you know subfolder
such as that will learn all that but right now we're keeping the same folder
make it easy on us
a couple of notes about I'll
the a a favor con
the you won't to always have it Akhtar I feel
a bulked up the reason being is
older persons a Internet Explore they will display a list that's what it is
Lafayette the top follow this you can create
favour con but different programs
but prolly the easiest way discussed or cradle
is using this website right here
and go ahead and help either
and they sit over here
yeah you go to that were page can create you want it all to you can add it into
the same folder and you can try this at home
and ill display and I'll go ahead and
get this on the same page 2 it'll help me
remember at it
ago are a so we have
we have a favor con in the same folders or webpage we have
a our link a element complete with
both attributes that we need to display the favor con
Solis will hit save and was run
iraq we still haven't nothing in the body so that's come
the this content down here and the were brothers Kobe empty
but we do have our favour con right here and we do have
our title display ok it so
that that is the basics love love calling the head section up your HTML 5
document
up hope you've enjoyed this video if you
if you do it or carter please like us cut
subscribe comment and a or next
the video I believe is will be gone over how to code
text elements so I'll see them ya great day