Hi I'm Bob Tabor with LearnVisualStudio .NET. In this lesson we're going to dive deep
into the code we wrote in the previous lesson. To make sure we really understand the
HTML that we're writing. To that end, make sure that you
downloaded the code that's associated with this lesson.
It's available from wherever you are currently streaming the video, or wherever
you originally downloaded the video file from.
Inside of that zip file, there should be a folder called Lesson 04.
Inside of that folder there should be a test.html page, which will use in just a moment.
Then before folder and the before folder is merely a snapshot of where we left off
from in the previous lesson. You'll see the Lesson03.html page,
the styles.css page, and then a couple of image files.
What we want to do is open up the Lesson03.html file in Notepad.
There are many different techniques. Use the technique you're most comfortable with.
For me I'm going to right click and select open with Notepad.
Ultimately you should see on your screen what I'm looking at on my screen.
Okay, so in Lesson 2 we work together to add HTML5 tags to an existing document in
order to give it structure. Then in Lesson 3 we applied styles to our
HTML5 document using cascading style sheets. I hope by now you have clear in your mind
the difference between HTML5 and CSS.
HTML5 is for structuring the content. CSS3 is for styling the content, so we
had two concerns here and we're keeping them separated.
Content and presentation, content structure and styling information, we keep
them separated. There are some big benefits to keeping
the style sheet information separated out, even separated out into its own file.
The biggest of which is that we can apply those styles to many web pages in the same
website or in many different websites,
sure, you could mix the styling information directly in with your HTML.
You'll see many pages on the Internet do this. You'll see that even I will use this
technique a couple of times just to show you how it's done.
But you'll quickly see that you should never take this tactic whenever building
real web pages, because it will make it difficult to reuse those styles in the future.
Furthermore, there is a larger philosophical issue here as well regarding
semantic purity. We'll talk about semantic purity later in
this video, okay. Let's dive into the HTML5 page that we're
looking at right here that we create Lesson 2 and 3.
I want to explain why we did what we did and I want to start at the very top
and work my way down.
First of all, we have this DOCTYPE,
angle brackets, exclamation mark, DOCTYPE in all caps and a lower case html.
It looks very official right, but what is it doing?
Well it's simply an instruction to the web browser explaining which set of rules
that it should use to interpret this, or rather parse this document.
Each version of HTML has a different set of rules and those rules are set out in
ideally a specification.
In Lesson 3 I showed you an HTML5 validator, remember the validator.nu.
We used it to ensure that we were following the rules of HTML5 in our
document and remember we weren't. It found a couple mistakes and we fixed those.
It used the DOCTYPE declaration to determine which set of rules that it
should check our document against.
This HTML5 DOCTYPE is pretty simple to remember. For contrast sake, take a look at what the
DOCTYPE from a previous version of HTML.
XHTML 1.0 Strict, it looks something like this that you see on screen.
XHTML 1.0 Strict essentially treated your webpage as an XML document.
Now I'm tempted here to go off in to a long explanation of what XML is.
The history of how XHTML 2.0 died, in favor of HTML5.
But for the sake of brevity, just know that there is an interesting back story
about how HTML5 came about in the first place. Keeping that in mind, let's go ahead
and just keep moving forward here with the important stuff.
Compared to XHTML 1.0 Strict in general,
HTML5 is really laid back. In fact, if we open up validator.nu
and we were to go to this validator input
and set that to the text field and gives you this little template here.
Let's delete everything out of it except just the title and the DOCTYPE, like so
and we click validate. That's all that's required in order to
get this, this markup to validate as a valid HTML5 document, okay.
It's pretty crazy, so I guess the moral of the story is that HTML5 is extremely forgiving.
In fact, the absence of hard and fast rules or syntax styling rules, was one of
the design goals of HTML5 in first place, to not break the Web.
If it's already working in today's web browsers well allow it to keep on working.
Don't do anything that would break existing web pages, if you can help from it.
The practical result is that HTML5 is a very forgiving decorative language.
It accepts many different syntax styles.
As an instructor I would merely say find a syntax style that works for you
and stick with it. Now, what exactly do I mean by the words
Syntax Style? Well up to this point I've only used one
syntax style, the one I'm most comfortable with. But ultimately there are many different
ways that you can write HTML5. For example, you can choose to use all
CAP letters or all lowercase letters whenever you're defining tags.
Most people are going to use the lowercase, but I've seen it done both ways.
Previous versions of XHTML required use of all uppercase for example.
Then there's a difference of how you set values to the attributes inside of given tags.
For example, if I were to, on this div tag, set the class = to important, I can
choose to use double quotes around the word important or choose not to.
I still recommend you use the double quotes around it.
You can choose to use self enclosing tags, or to admit the enclosing tags.
In the case of a cell, defined within a table and we'll talk about that much later.
You can choose to define cells just as an open/close, , or you can include the
closing /td in order to define one specific cell.
It's up to you, again most people I think, if they're coming from a background
in writing HTML are more comfortable with including the enclosing tags.
There's also the notion of self enclosing tags. You can see there's a br or line break.
You can either write it without the self enclosing tag.
Another words at the very end you see how there's a space/>, that's just another style.
You can choose either style. They both represent the same thing.
It's really up to you. Now if you go out on the Internet,
you search around. You're going to find heated debates about
which style is the best. I'm going to leave it up to you.
Pick one and stick with it.
You can choose the one that I use, which is very close to what you might see in
previous versions of HTML, just because that's where I'm comfortable.
What I'm comfortable with.
Okay, so let's shut this down.
Let's get back to this document.
At a high level, whenever we were creating the tags around our document.
We started off by declaring an HTML tag, it sits almost at the very top, and it's
closed at the very bottom.
Furthermore, inside of that HTML or children to that HTML tag, there were two
major sections. There's this section, so here's an
and a . Then there's this .
Then at the very end or almost to the very end you can see where the tag
is closed, alright. An HTML tag can include a head section
and a body section, alright. These define the major boundaries of an
HTML page. Now you might find it interesting that
even these are not required in HTML5. You can still create a valid HTML5
document without these we just saw a moment ago.
Web browsers will actually do you a favor I guess.
Insert the HTML head and body tags in as the browsers going through parsing your
document no matter whether you declare them or not.
And just demonstrate that, here we have
this test.html page. If we were to open it up and look at it
in Notepad, you can see that it's very simple.
We've just include the word Hello world inside the title and I've added
a paragraph, Hello world in the body. If you were to open it up in Internet
Explorer by double clicking it. It's a very simple web page.
What's interesting about this is if we were to go to the options over here on the
right and select F12 developer tools.
Then make sure that the HTML tab
is selected here in the F12 developer tools. It shows you kind of an outline for the
document, as it parse through it, interpreted it, and as it begins to render it.
This is how Internet Explorer sees our document.
Notice that it inserted an HTML and a .
We can drill in and see that the owns the , and the owns the
word Hello world, which we see on our tab.
Then the owns a paragraph, which has the word Hello world like we see right here.
Even as we selected, it puts a line, a little box around it, okay.
The moral of the story here again, is that even if you don't insert these yourself,
the web browser will typically add them for you.
Now we can just skip the HTML, the , and the tags.
But it doesn't necessarily mean that we should leave them out.
Just because you can do something doesn't mean you should do something.
I think there's a couple of reasons why
I'd recommend that you explicitly continue to add the HTML, the , and
tags, even in your HTML5 pages.
The first reason is because we're really in a transitional phase right now.
Some people know HTML5. But I'm guessing the majority of people
out there are familiar with it just yet. To avoid confusion keeping these main
structural elements in place, might actually be good for people who are trying
to understand your web page and as they continue to make changes to it or work on
it in some capacity. Furthermore, there are some helpful
attributes that can be added to these tags to perform some helpful tasks.
Take for example our HTML tag at the very top. I've added an attribute called lang for language.
I've set that equal to the letters en for English.
It's there to help search engines or other tools like speech synthesizers,
spelling or grammar checkers, or help the browser select the correct font glyph for a given language.
Do you have to use the lang= en? No, not necessarily.
However, it is considered by some people to be a best practice.
Therefore to use it, we have to include the tag here as we define our web page.
To summarize, I'd recommend you continue to use HTML and tags,
even though you and I really know that we don't need to add them.
It's still considered a good practice, okay.
Okay, so as I said a moment ago, an HTML document has two parts, the and .
The contains information about the of the document.
The contains the HTML that will be parsed and then ultimately displayed by
the web browser. The can contain a bunch of
different things. Now we've seen here, that it contains the
and it contains a link to our style sheet, but it can also contain a meta-tag.
The is pretty flexible in fact, it can contain entire style sheet
definitions, JavaScript, or links to external JavaScript files, and multiple
meta- tags. First let's start with this meta-tag at
the very top. This particular meta-tag deals with the
charset, so meta charset= "UTF-8". What are meta-tags exactly?
Well the term meta is used often in information technology.
It merely means extra information that adds context about something.
Okay, in this case, meta- tags in HTML add context to the HTML document.
So then what is the charset and why is it set to UTF-8.
What context does that give to our HTML document in the specific case?
Well unfortunately this is a pretty complicated topic.
Again, I'm tempted to go off into a really detailed explanation because I find
it fascinating, personally. But let me merely direct you to this
article for more information. It was written by the owner of a company
called Fog Creek Software. Here let's turn this off.
And his name is Joel Spolsky. He wrote an article called The Absolute
Minimum Every Software Developer Absolutely, Positively Must Know About
Unicode and Character Sets (No Excuses!). All right, so at any rate,
most professional web developers recommend that you include the charset declaration.
At a minimum you should at least understand what it is and why it's
important to have it there. What the history of it is.
This is one article that would help you determine that.
They also recommend that you make sure that you're saving your documents using UTF-8.
That your server is set up to serve UTF-8, so as we saw in Notepad already
when ever we're saving as, we want to set the encoding to UTF-8.
As far as the server's concerned each individual software whether its Internet
information Services on Windows based servers, or APACHE on Linux based servers.
You just have to make sure that the server is set up to correctly serve UTF-8 documents.
Ultimately, if your international users ever report seeing these weird characters
in their web pages, like black diamond's that have a question mark, a white
question mark in the middle. You may have to investigate this further
and see what's wrong with either your declaration, the way you saved your web
page, or the way that you're server is set up to serve out those types of files, okay.
Okay, so what other types of meta-tags could be added instead of, or in addition
to the chars that UTF-8? Well take a look on screen.
I've got a couple of examples here. We have a description, keywords,
and author, a revised, and then also a refresh.
Some of these are used purely for SEO purposes. For example description just allows you
to explain the purpose of this given web page.
Same thing with keywords, what keywords are closely aligned to this web page,
so that if somebody's searching for it the given search BOT, engine BOT might use
this to help determine your ranking.
There's also information about who originally authored the web page.
The last time the document was modified in any way.
Then there's this http-equiv="refresh" content="60". Basically this just says that the
information on this web page could change potentially often and so like a news
website for example. You should continue, the browser should
take that as a queue to refresh the web page automatically every 60 seconds, okay.
Next up we have the title. We've already talked about this.
The title is simply the text that you want displayed in the web browsers title
bar or in the tabs title area, okay. Then we have this link.
We've talked about it already in the previous lesson.
It's very fairly simple to understand.
All the attributes of the link element are basically rel, which is the relationship.
What is the relationship of this link document to this document?
In this case the relationship is that it's a style sheet.
Secondly the href is where you can find this style sheet, or this external file.
Then there's the type. What type should we interpret this file as?
It's a text/css file, alright. There are some very specific types that
are available to you to use here.
Then finally there's this notion of media="screen". We'll talk about this much later whenever
we're talking about building responsive web pages, alright.
When you think of the head section think simply additional information about the
document, even reference inside of the document. But not necessarily displayed within the
browser itself, alright.
Alright, so next up is the body. You can see that takes up the lion share
of our file.
I'm tempted to talk about the body tag and what goes on inside of it.
However we're going to be spending really the next seven video lessons on this topic.
Let me just talk about the goings on of the body tag at kind of a higher level.
I've used up to this point the term semantics or the term semantic meaning
a couple of times so far in this video series.
Simply put when I use the term semantics in relation to HTML5.
I'm talking about the implied meaning of a part of the HTML document so that
a machine or I suppose even a human reading the code could interpret the subject
matter going on inside of those HTML tags, okay. The hope is that by being one of the
first generation of web developers to mark up our web pages using these rich semantic tags.
We're laying the ground work for developers to add semantically smart
software to interpret our web pages.
For example search engine spiders or screen readers for the visually impaired.
Maybe other ideas that in 2012 I can't conceive of, but the next generation of
developers have this rich foundation to build on top of.
Be able to extract pieces and parts out of the documents that we mark up in this manner.
For example by adding a nav tag to our web page, a visually impaired person could
theoretically go directly to that part of the web page using a special key on their keyboard.
More easily navigate our entire website
or a search engine BOT could skip all the design chrome around of a web page and go
directly to the main articles, or sections of the web page more accurately.
These are just some of the examples again that we can conceive of today.
Over time it's possible that by embracing the notion of adding semantics or meaning
to our web pages. It'll pay off in a big way long term.
I'm going to have more to say about this as we continue through the series.
But for now when you hear me say semantic meaning you'll know everything that I'm
implying by that, okay.
Alright, so let's move on and talk about HTML5 browser support.
HTML5 is relatively new, right.
It stands to reason that older web browsers are unaware of the newer tags
that have been added to HTML5.
This is why I want to work with Internet Explorer 9.0 or greater in this series of videos.
Still we know that it takes time for people to upgrade their web browsers.
Some people may never upgrade. What are you going to do about that as
a web developer? Should you avoid HTML5 altogether
and only code HTML 1.0? Well, all I'm going to say is that in
this series we're going to talk about HTML5 and CSS3.
The number of issues and workarounds that you could employ to try and make HTML5
and CSS3 effects work inside of older browsers, could easily make up a series of
lessons on its own, and I'm going to leave that to somebody who's much more
knowledgeable and talented than I am in that area.
I would just say that if you're learning HTML today.
You don't have a deadline in the near future for a project that has to work on
every single web browser ever created, from the beginning of time.
Then please focus on HTML Version 5. The world will catch up with HTML5 eventually.
You'll be positioned well at that point. Frankly, most browsers will ignore tags
that they don't recognize. Usually even if you look at an HTML5 page
in an older web browser it's still going to look probably okay.
It may not always look nice but it will usually render at least to some extent, okay.
If you really, really want to know how to make the new HTML5 tags work in older web browsers.
Then you might want to do a quick search on the Internet for a JavaScript file
called HTML5shim.
That brings many HTML5 features to older web browsers, okay.
Furthermore, you might want to learn more about the notion of progressive enhancements.
It's a style of building websites that begins with keeping older web browsers in
mind during web development. Then progressively enhancing but not
requiring new features like those in HTML5 for the page to render properly.
If the user happens to be using a new web browser then great, it'll all work.
They're going to be able to take benefit from the enhanced features that you've
added in. But if they don't have a newer web
browser then they can still count on the page to render itself and to be useful to
them in some way. Wikipedia is a great starting spot for
learning more about notion of progressive enhancement.
There are other features of HTML5 that we're not going to talk about in this series.
In the series we're going to be spending most of our time talking about semantic tags.
We're going to spend time with the new tags that allow you to create forms to
collect information from users and a lot more. Then at the very end of the series I'm
going to briefly talk about the HTML5 canvas, SVG or in other words Scalable
Vector Graphics, then also embedding video using HTML5.
There are some other features that allow developers to do cool stuff, like create
offline applications, or to save data in a browser based database, and a lot more.
However, I'm not going to be covering those in this series.
I'm also not going to be covering some CSS Level 3 improvements like CSS3
transitions, which allow you to animate portions of your web page.
When you use that in conjunction with the HTML5 canvas and a little bit of
JavaScript, you could conceivably create simple games that replace Flash or
SilverLight plug in content.
CSS3 animation and HTML5, and JavaScript involves advanced techniques and concepts,
and could easily earn a video series of its own.
These are definitely areas that you can pursue after you complete the series.
Alright, so HTML5 features are being added all the time with each new release of all
the popular web browsers. If you're curious about an HTML5 feature
and you want to check on each browsers current support of that feature.
Then you can checkout this website I've actually create a bookmark for here.
It's called CanIUse.com and you can search for particular feature of CSS or HTML5.
It'll tell you for example what's supported by each given web browser
and which version, okay.
Now if you're curious about the single best resource for learning everything
there is to know about HTML5. There's a few places you could look.
First of all there's a version of the HTML5 specification that's intended for
use by those who are creating web browsers.
You might see the term user agents. That simply means web browser or some
tool on the client that can interpret a web page, okay.
But the version of the specification that I would recommend and refer you to
is intended for web authors, or rather web developers like you and me.
Let's take a look at that.
Let's go to, yes, so the URL might change.
It's currently as I record this video, www.w3.org/tr/html5/author/, okay.
This is called the HTML5 Edition for Web Authors.
I'll be using Draft Version 29.
However, there might be a newer version by the time that you begin watching this
video series. I anticipate that there are very few
differences between what I'm looking at and what you're looking at.
I'll talk about that a little bit later.
But I'm going to be using this website often.
I'm going to be calling your attention to select passages as we go throughout this series.
Alright, so you might want to bookmark this or somehow get to it very quickly,
because we're going to be using it often.
Okay, so let's go ahead and stop right there. We're off to a great start.
Now we're going to start getting deeper into the details of HTML5 beginning in the
next lesson. We'll see you there.
Thank you.
For more infomation >> Jamie Dornan's beard does a lot for him! | Magic Radio - Duration: 0:41. 
For more infomation >> HOW TO DOWNLOAD Badland game of the year for free - Duration: 2:50. 
Không có nhận xét nào:
Đăng nhận xét