HTML Fundamentals Part 2: How to Write HTML


this is a HTML fundamentals part two second in a series of videos on how to write a proper HTML page so this one focuses on the basics of actually writing html and
ideas you’ll need to know to write it it’s not next missions all possible tags you need to know in HTML or detailed description of exactly how
he’s to go work so we get into it it is big ideas about writing html clear explanation of different kinds of
tags was an example of the most common ones and how to apply those tags too uh… content on the page let’s start with the big ideas first big idea is tags tags are also known as elements and I’ll explain here with the differences
between attack and an element here we go this whole thing here is an element includes your tags which are here you’re opening tag and on the right there you closing tag so the whole thing the two tags and all
the stuff in between is element uh… whereas you have been an opening
tag nicholson but often though you hear people refer to them sort of interchangeably tax elements
technically that’s what it is in addition here’s on some more some
capital parts so this here is called a ford slash and
that’s what we used to denote the closing tag and you also have your less than or left angle bracket it’s called and um… greater than or
right angle bracket which were used to put around beginning
in the end of each tag ambition of course that is the tag
itself the tag name com which is an important part of it and then in the middle between the
openings closing tax we have uh… content to all the content on the page won’t
look over this again later needs to be inside of attack at pair of pants in some way so there are some elements that have no no closing time and also no content
sissy here this is a meta tag because in the head we’ll talk about that later and know what next one comment below
that wasn’t image tag to show an image there’s no clothing tag there’s no
content you know inside a kick out of the contents of a opening and closing
tag but they do have something else in there that we haven’t talked but yet which are attributes so attributes i’d give extra meaning to tax and there in the format of in the name equals value in quotes you can get away with certain versions
of html we’ll talk a little about that later uh… visit more than one version which
can be confusing sunburn visual require the quotes some
don’t it’s a good idea to just use it to make
it clear what’s going on so the other thing is a placement so the
actuator always inside of in opening tag or up to see if if they’re tags and have
a closing type and you know that work nor a stupid effect most elements that don’t have a closing tag and the attributes in order for them to
work so the one image he we see you as to
that reach one is s r_c_ sing for sourcing where that where you can funny actually filed miller was also for
adult and it’s a description of the image uh… i’m a little bit about that later as
well saw on the other important part is that
when you’re writing tags i have to be written in a way that his valid lets it be written and placed correctly and allison of the technical term for
that and a lot of common mistakes people make and in writing tags are not about this
is an almost as you can make is just some of the more common ones so one is you can’t overlap your tax to see them beginning each one starts then the peace starts but before the key
closes stage one closes and keep those leaders so we have the key tag existing
half in the h one element and half outside of it idvd opening is inside of it in the
closing of out so you can have that you need to do it in too to it either going to be fully nested which is
a second one so the one element is completely inside
the other one inside the opening closing the other one or the separate they have one and then you
have another uh… those the only ways to write elements another com satish just you’re missing a
piece of it so and this example here we’re missing that closing uh… kiya element at the end t_p_ tags i should say closing peter
uh… and this is not a company as you’re
writing his certificate to close something usher as you’re going on and another one is will see later the
same complex elements that require more than one element to sort of make it
work analysts as example cfc work on the list that is in the first example that’s
wrong there’s no ul zero which is saying that it’s an unordered list those other
kinds of list but you need something to say one of those lists items of part of
that groups of this together the second one is in that example of a
table um… note the missing part is that t_r_ tax and those vinod table row and so you need to have all that in
order to have your content that they will you need to
have these pieces so um… this is an it won’t be recovered fully right now
but just to know that all there’s certain elements that have a few tags and need to go inside of them
in the too often another come status today make those incomplete this one uh… as well as another
incomplete one which is the blockquote and uh… in blockquote people often
don’t realize that uh… they need to be quoting another an actual source that is another
element so the paragraph as a as a one you should put usually put in there so you need them paragraph inside the
block where you can destroy texans out of a blockquote needed right inside of another element paragraph so that was the that the first big idea
insisting that he has that everything on the page estimate this is an example of vintage gmail page and although things in canberra taxes can
see everything else on the page in some way is inside one of those sets attackers animal talk later about what or how you put
know which tax inside so the third big idea that everything is
a ox and this is going to come into play
again later when you start getting into styling the
pages uh… using c assessed for layout
another sentence but it’s a good idea to keep in mind that was that and reap ceased of content on the page
all these elements are treated as boxes students easier this is a page of html with boxes drawn around uh… all of the uh… they’d elements of the page so you can
see there’s a bunch of little boxes in all the makeup another way you can do
this it’s going to book too browser here let’s take a look at this so on a page
here here’s that page and i’m in chrome right now another brothers conditioned
in firefox is well im go to inspect element tire i clicked on the page went to
inspect element remove the sober and as you can see here as it go over on these elements on the
right highlights things so i’m gonna start here in the go down
and this is my header as our main content infancy tracking that down here on c_ different
sections of that ccbysa each of these things because it’s
all indifferent box and is also hiding it from there width and height that box as well as a
wrote so everything on the page every little
piece is treated as a biopsy whether it looks like a box going on it actually in terms of the but the
browser’s looking at is a box okay so uh… forced big idea is that your job is to use the right box or
boxes as or since we have a number of boxes on the page so that’s where the sort of skill and experience comes
in with this comply with when first questioned as
well what’s the right box orlando what that is and while that takes time there are certain things you can use to
help you do it so one is you can write valid coterie
talk about only attacks are written correctly also your code needs to be semantics if
the content inside of it needs to match it will see laters your paragraph tags in lists and tables
all these things and so if you’re making something that’s
a table with those in the tables if it’s a list of those analyst acs and so forth and you wanted to be standards-based so there’s a few different pieces of that as well more than a pop
up that quickly too but if you can get these three ideas
down there ballad semantic and standards-based code and
you can write that you are headed up a lot of people out
there who were making web pages some of them even for a living but this is sort of like the the base of being a professional it’s general person is being able to do the same things let’s look a little more it standards
based uh… and it to me if a few different things the
first one is just following the demetrius c standards uh… and we’ll look at that one here uh… this is a page of the two did
sustain a tradition of five as other versions of a similar they have as well
and every three seasons for world wide web consortium and they are the ones who handled it
makes me official rules for how he’s tml the different versions of them right and they’re actually people who
often work different other coverage if you can see down there at the bottom of
this the editor for this page works at google
so uh… number two for companies get together to help put together the
standards so that’s one part is just misfit fitting in with that where there is a sort of general web
development standards and corporate standards and at this page here on the uh…
masses on even though it’s actually old jason two thousand four still really that’s the heart of what you do it it’s sort it’s telling talking about how
you valuation roll but also the semantics
uh… we will use are you a rolls other things
apart required necessarily in the the vcc spec but that generally mosul web designers for using what we call
standards-based follow it’s a long checklist it’s it’s not a
bad idea to take a look through it and slowly um… work on making sure that your pages can meet those standards and another way to do justice to start
with a standard package so israel five boiler plate is a good
example where they give you basically everything except for the content of the
page that gives you and i a sort of standards
based page that you can start from inside adding your content and will look more that possibly in
another video not to look at that today and that is one great would he do it to
help started but in order to understand things better we will try to do it by had to resort of uh… preakness standard page ahead so here’s the anatomy of a page in the past basic standards but is pages
that you have your doctor elements it’s a information
about the package and we see here that’s the top i needs
to know and the head inside edta medha title a
script here and and those are sort of describing the document they have any content you
don’t see those except for the title park but that little bit later uh… and
then the inside of it you have the body element contains all of the actual
content edge and that’s what’s really going to change
from page two pages you go along structure could dude hero website what we’re gonna start and um… look at some of these and put them out
as we look at it personal enters a doctrine on the
picture doctype report put that out just remind you but there’s more than one kind of html
soul with folks in additional five here which is a very simple doctor as you can
see is just exclamation point doctype innerhtml the other ones are the more committed in
fact a symbol for any xhtml there’s also a transitional versions of
the doctype hands of the sort of to other doctor if you don’t see their and not many people can memorize this tier so most times people have this copied
somewhere or that cuts through the use and waited for them is kind of copy and pasted and to get your
crackdown but it’s important when you’re in your
page we’re doing our doctor care too make that the first thing that appears on the page suit on the browser what kind of html
page is this and by the way that editor of using here
sublime taxed to it’s an editor has a free trial
version uh… and a very nice editor for writing used to nazi s_s_ in
javascript all right so it’s the first part are
doctype remove onto the next which are some of the elements inside of it in the
first one of course is is gmail so this is where we start describing the is to help page itself good so it just needs to know innerhtml page shanahan extrication um… is not required but it’s often could have a trip to give you the language that it’s
written so that so other for buzzwords noses
french german you know what are you reading a paging thus compellent and we’re saying here
were writing this and english and the u_s_ version betrayed the next thing to look at the comes as
the head had describes a lot of information about your doctor so one of the first things you put in
there is gunmen attacked them and carousel of the meta tag is telling the xinhua comic characters
using this is very important put in here because if you using anything that’s outside the sort of standard uh… western english alphabet
a b_ c_ d_ one two three four using anything russian and chinese pass
spanish god those characters a special characters that it needs to know what it
means we have maps those out and this let’s computer no helped to know that if
you missed this out often you’ll see these retains a question marks and
exclamation points in your text and the other thing that we’re going to have
here is a title the title here uh… there’s only sewn in one brief
patient so this is a example huge teo five all do or call it uh… and let me show you sure how that works
where you actually see it so we’re going to go here to my page and you see at the top insisting that
station up once i refresh this page and now says example html files so that’s the only place that anything outside of the body shows up is in the title francis’s again are fearful so that part is over content elements and the biggest one there is so all the rest of the content that you
see on the page is going to go inside the bottle and the body goes inside
right after inside the issue of course but after the head so here we are we would be here and we
put are right there after the head and
everything else we typed on the page is going to inside these opening and
closing padi tax-cuts kind so this actuate here at this point is a good
blank is channel five page ready to add some content to it

Leave a Reply

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