► HTML5 & CSS3 Tutorial — 011 — Coding the Head Section (w/ GeekDisorder)

► HTML5 & CSS3 Tutorial — 011 — Coding the Head Section (w/ GeekDisorder)


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 porn 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 cock 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 ass 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

Leave a Reply

Your email address will not be published. Required fields are marked *