Brenton Strine has developed his web development skills since the advent of the Internet in the 1990's. Professor Strine’s HTML course is aimed at beginning programmers looking to build their first web page, but also goes in depth into HTML5 features to satisfy even veteran users. Professor Strine begins with the basic concepts and then spends the majority of the lesson writing actual code and seeing its interaction with the operating environment and browser. Some of the topics covered include Web Development Tools, Essential Tags, Markup Language, Semantics, Links, and Flash Embedding. Professor Strine’s HTML course is the perfect foundation for other Educator courses such as CSS, JavaScript, and AJAX.

Loading video...
expand all   collapse all
  Your First Web Page 17:01
   Intro 0:00 
   World Wide Web 0:23 
    Introduction to HTML 0:25 
    Looking at Source Code 0:53 
   HTML5 1:58 
    HTML5 Specification 1:59 
   Creating a Web Page 4:10 
    What You Will Need to Create a Web Page 4:11 
    Example: Basic Web Page 4:40 
   Example: Creating a Web Page 5:46 
    HTML Elements 6:33 
    Adding a Title 7:08 
    Main Body 7:48 
    First Level Heading 8:23 
    Adding an Image 8:42 
    Paragraph 9:09 
    Adding a List and URLs 11:13 
    Footer 14:09 
    CSS: Styling 16:02 
  Web Basics and Web History 32:23
   Intro 0:00 
   The Web 0:56 
    Overview of the Web 0:58 
   The Web Page 2:39 
    Overview of the Web Page 2:40 
   Web Technologies 4:45 
    Overview of Web Technologies 4:46 
   The Web Today 9:22 
    The Web Today 9:23 
   What is HTML 11:22 
    HyperText Markup Language 11:23 
   The Creation of the Internet 12:40 
    History of the Internet 12:41 
   Developments in HTML 14:10 
    The Birth of HTML 14:11 
    Early Problems 15:35 
   Early Browsers 16:24 
    History of Early Browsers 16:25 
   NCSA Mosaic 17:55 
    NCSA Mosaic 17:56 
   The Browser Wars Begin 19:39 
    History of the Browser Wars 19:40 
   Casualties of War 22:27 
    Results of the Browser Wars 22:28 
   HTML 4 Stabilization 25:31 
    History and Overview of HTML4 25:32 
   Modern Browser Developments 27:27 
    Modern Browsers 27:29 
   HTML5 30:57 
    Overview of HTML5 30:58 
  Web Development Tools 26:28
   Intro 0:00 
   Browsers 0:17 
    Introduction to Browsers 0:18 
    Example: Browsers 2:35 
   Firefox Add-ons 3:14 
    Firefox Browser 3:15 
    Example: Firebug Add-ons 3:54 
    Example: Web Developer Toolbar and ColorZilla 7:51 
   Domain Names and Hosting 10:23 
    Overview of Domain Names and Hosting 10:24 
    Your Own Domain 11:03 
   Installing a Local Web Server 12:42 
    Installing a Local Web Server 12:43 
    Apache Web 13:29 
   WYSIWYG Editors 15:56 
    Introduction to WYSIWYG Editors 15:57 
   Content Management System 18:31 
    How Content Management System Works 18:32 
    Example: WordPress 20:00 
   File Transfer Protocol 22:26 
    File Transfer Protocol 22:27 
  HTML Elements and Attributes 21:50
   Intro 0:00 
   Proper use of Elements and Attributes 0:14 
    Elements and Attributes 0:16 
    Example 1:06 
   Normal HTML Elements 2:00 
    Start Tag, Content, and End Tag 2:02 
    Example: Warning! 2:34 
   Void HTML Elements 3:23 
    Self-Closing Tags 3:24 
    List of Void Elements 4:04 
    Example: Line Break 5:00 
   HTML Comments 6:13 
    Purpose of Comment Tags 6:14 
    Example: Comment Tags 6:50 
   Attributes 7:25 
    Properties of Attributes 7:27 
    Example: Attributes 7:39 
    Example: Whitespace 10:22 
   HTML Character Codes 12:05 
    Character References 12:07 
    Example: Registered Trademark Symbol 12:35 
    Example: Using Character References 13:23 
   Example: Start Tag and End Tag 15:57 
   Example: Self-Closing Tag 16:37 
   Example: Attributes 17:37 
   Example: Proper use of Elements and Attributes 19:02 
   Example: Comment 20:09 
   Example: Whitespace 20:46 
  Essential Tags Part 1 41:42
   Intro 0:00 
   Document Structure Tags 1:13 
    Document Structure Tags and Example 1:14 
   Layout Tags 3:24 
    Layout Tags 3:26 
    Example: Layout Tags 7:48 
    Example: Layout Tags 11:28 
    Example: Layout Tags 13:17 
    Example: Layout Tags 14:22 
   Text Level Tags 17:22 
    Text Level Tags 17:23 
    Example: Text Level Tags 17:48 
   Grouping Content Tags 24:23 
    Grouping Content Tags 24:24 
    <p> Tag 24:45 
    <hr> Tag 25:31 
    <figure>, <figcaption>, and <blockquote> Tag 26:14 
    <div> Tag 26:58 
    Example: Grouping Content Tags 27:28 
   Embedded Content Tags 33:12 
    Embedded Content Tags 33:13 
    Example: Embedded Content Tags 35:39 
  Essential Tags Part 2 24:20
   Intro 0:00 
   Simple Tables 0:17 
    Simple Tables 0:19 
    Example: Simple Tables 2:31 
   Semantic Tables 5:11 
    Semantic Tables 5:14 
    Example: Semantic Tables 6:24 
   Simple Lists 8:14 
    Simple Lists 8:18 
    Unordered List 8:36 
    Ordered List 8:42 
    Example: Simple Lists 9:37 
   Definition Lists 14:08 
    Definition Lists 14:09 
    Example: Definition Lists 15:21 
   Forms 17:11 
    Forms 17:12 
    Example: Forms 17:52 
  Markup Language 29:38
   Intro 0:00 
   HTML 1 Through 3.2 0:13 
    Period of Rapid Growth of HTML 0:14 
   Tag Soup 2:03 
    Definition of Tag Soup 2:04 
    Example: Tag Soup 3:00 
    Example: Tag Soup and Valid Doctype 4:45 
   HTML 4.01 5:26 
    Overview of HTML 4.01 5:27 
    Three Flavors of HTML 4.01: Strict, Transitional, and Frameset 6:05 
   XHTML 1 7:19 
    Overview of XHTML 1 7:20 
    Example: XHTML 1 9:20 
   XHTML1 Syntax 11:48 
    Lower Case Rule 11:49 
    Closed Elements Rule 12:25 
    Encased in Quotes Rule 14:18 
    Boolean Attributes May Not Be Minimized 14:35 
    Correct Nesting is Enforced 15:29 
   The Problem with XHTML 16:15 
    Problem with XHTML 16:16 
   XHTML 2 19:22 
    Overview of XHTML 2 19:23 
   HTML 5 20:43 
    Overview of HTML 5 20:44 
   Validating 22:44 
    Validators 22:45 
    Example: W3C Markup Validation Service 25:26 
  Page Structure and Meta-data Elements 32:50
   Intro 0:00 
   The Doctype 0:12 
    Doctype 0:13 
    Example: Doctype 1:25 
   The Root Element 1:57 
    Root Element 1:58 
    Example: Root Element 2:45 
   The Head Element 3:38 
    Head Element and Body Element 3:39 
    Example: Head Element and Body Element 5:06 
   The Head Element 5:42 
    Head Element vs. Header Element 5:47 
   The Title Element 6:51 
    Title Element 6:52 
    Example: Title Element 7:54 
   The Base Element 9:00 
    Base Element 9:03 
    Example: Base Element 9:42 
   The Link Element 14:07 
    Link Element: rel, type, and href 14:08 
    Example: Link Element 15:13 
   The Meta Element 17:54 
    Meta Element: charset, name, and http-equiv 17:55 
    Example: Meta Element 21:00 
   The Style Element 23:35 
    Style Element 23:37 
    Example: Style Element 24:40 
  Text-Level Semantics 30:13
   Intro 0:00 
   Text Level Semantics 0:06 
    Paragraph Level 0:07 
   The <a> Element 2:23 
    Definition of the <a> Element 2:25 
   The <em> Element 3:25 
    Definition of the <em> Element 3:26 
   The <strong> Element 6:50 
    The <strong> Element 6:51 
   The <small> Element 8:35 
    The <small> Element 8:36 
    Example of <small> Element 10:19 
   The <cite> Element 10:55 
    The <cite> Element 10:56 
    Example of <cite> Element 12:32 
   The <q> Element 12:45 
    The <q> Element 12:46 
    Example of <q> Element 13:34 
   The <abbr> Element 15:35 
    The <abbr> Element 15:36 
    Example of <abbr> Element 16:41 
   The <dfn> Element 17:03 
    The <dfn> Element 17:04 
    Example of <dfn> Element 18:01 
   The <time> Element 19:11 
    The <time> Element and Example 19:12 
   The <code> Element 21:18 
    The <code> Element 21:19 
    Example of <code> Element 23:00 
   The <sub> and <sup> Elements 23:31 
    The <sub> and <sup> Elements 23:32 
    Example of <sub> and <sup> Elements 23:50 
   The <i> Element 24:51 
    The <i> Element and Example 24:52 
   The <b> Element 27:16 
    The <b> Element 27:17 
    Example of <b> Element 29:07 
  Heading and Sectioning 23:39
   Intro 0:00 
   Heading Elements 0:06 
    Heading Tags 0:07 
   Heading Rules 1:13 
    Heading Rules and Example 1:35 
   Sectioning Roots 5:39 
    Sectioning Roots 5:41 
   Sectioning Contents 6:25 
    Sectioning Content Elements 6:27 
   Section Wrapping 7:40 
    Section Wrapping 7:41 
    Example: Section Wrapping 10:10 
   Real World Example 1 15:36 
  Forms 47:51
   Intro 0:00 
   Form Terminology 0:23 
    Form 0:24 
    Control 0:43 
    Control Name and Control Label 1:09 
    Input Type and State 1:52 
   Form Controls 2:20 
    Button: Submit and Reset 2:32 
    Radio 3:37 
    Checkbox 4:00 
    Select Menu 4:05 
    Textarea 4:28 
    Various Input Types 4:38 
   Example: Basic Controls of Form Element 7:05 
   Example: Buttons 18:20 
   Example: Additional Controls 20:56 
   Example: Special Input Types 27:55 
   Example: Date and Time Control 33:40 
   Example: Create Your Own Control 37:32 
   Example: Placeholder Text 39:10 
   Example: Datalist 41:43 
   Example: Sizing and Input Containment 42:16 
   Example: Select Modification 42:51 
   Example: Required Attribute 44:41 
  Links 36:41
   Intro 0:00 
   URIs and URLs 0:23 
    Definitions of URL and URI 0:36 
    Differences Between URL and URI 0:42 
    Example: URI and URL 1:14 
   Typical URI Construction 2:33 
    Domain and Subdomain 2:34 
    Protocol 4:18 
    IP Address 5:05 
   Typical URI Construction 5:32 
    Second Level Domain 5:33 
    Port 6:07 
    Foldernames 6:46 
   Typical URI Construction 8:06 
    Filename and File Extension 8:08 
   Typical URI Construction 10:38 
    Name/ Value Pairs 10:40 
    Internal Anchors 11:45 
   Typical URI Construction 12:30 
    Example: URI Construction 12:31 
   Relative and Absolute URIs 14:20 
    Relative and Absolute URIs 14:22 
    Example: Relative and Absolute URIs 18:32 
   Link States 24:15 
    Link States 24:16 
    Example: Link States 25:18 
   Block Level Links 27:02 
    Example: Block Level Links 27:03 
   Bookmark Links 29:18 
    Bookmark Links 29:20 
    Example: Bookmark Links 30:15 
   Attributes 32:06 
    href and target 32:20 
    rel, media, hreflang, and type 33:18 
  Embedded Content 46:05
   Intro 0:00 
   Embedding Image 0:22 
    Embedding an Image 0:25 
   Image File Formats 3:38 
    Image Format: Jpg 3:42 
    Image Format: Png 4:13 
    Image Format: Gif 4:40 
    Compression 6:05 
    Image Format: Precise Lines and Fewer Colors 8:38 
    Animated Gif 10:49 
    Alpha Transparency Png 11:09 
   Embedding Audio 12:52 
    Old Way of Embedding Audio 13:00 
    New Way of Embedding Audio 14:54 
    Example: Adding Buttons 20:04 
    Message for Users 26:36 
   Audio Attributes 27:46 
    Control 28:29 
    Autoplay 28:44 
    Loop 29:36 
    Preload 30:40 
   Embedding Video 32:00 
    Embedding Video 32:11 
    Controls 34:22 
    Poster Attributes 36:01 
    Video Formats 37:36 
    Solving Formatting Problem 39:26 
  The Canvas Element 19:25
   Intro 0:00 
   Creating the Element 0:38 
    What is the Canvas Element? 0:39 
    HTML and Canvas Element 1:48 
    Example: Canvas Element 3:23 
   Creating the Canvas in JavaScript 5:13 
    getContext() Method 5:17 
    Checking Browser Support with the getContext() Method 6:00 
    Example: Creating the Canvas in JavaScript 7:31 
   Drawing in the Canvas 10:13 
    Methods for Drawing in the Canvas 10:14 
    2d Context 10:58 
    Example: Creating Drawing in the Canvas 11:39 
    Example: Adding an Image and Texts 15:30 
    Example: Advance Canvas Element 17:31 
  Content Models 29:08
   Intro 0:00 
   The HTML 4.01 Content Model 0:16 
    Block Elements and Inline Elements 0:18 
    Example: Block Elements and Inline Elements 1:18 
    W3C Markup Validation Service 3:28 
   The HTML5 Content Model 6:21 
    Overview of HTML5 New Content Categories 6:22 
   Flow Content 8:02 
    Specification for Content Models 8:05 
    Flow Content 9:41 
    Example: Flow Content Elements 10:40 
    List of Flow Content 11:35 
    BlockQuote Element 11:50 
   Sectioning Content 13:19 
    Introduction to Sectioning Content 13:20 
   Heading Content 14:06 
    Heading Content and hgroup Element 14:07 
   Phrasing Content 16:56 
    Attributes of Phrasing Content 16:57 
    Anchor Element in Phrasing Content 17:28 
   Embedded Content 19:33 
    Attributes of Embedded Content 19:34 
    No Content 19:53 
    Transparent Content 20:38 
    Source Elements and Param Elements 21:15 
   Interactive Content 24:16 
    Interactive Content Elements 24:17 
    Button Element 25:57 
  The DOM 13:10
   Intro 0:00 
   The DOM 0:26 
    Document Object Model 0:27 
   The DOM Tree 0:55 
    DOM Trees 0:56 
    Example: DOM Tree 1:31 
    Vocabulary: Tree, Node,Branch, Parent, Child 2:15 
   Exploring the DOM 3:13 
    Example: Built-in Browser Inspection and Firebug 3:15 
    Example: Manually Exploring the DOM 6:01 
    JavaScript 7:28 
   DOM Navigation Techniques 7:55 
    DOM Navigation Techniques 7:56 
  Favicons 13:14
   Intro 0:00 
   Favorite Icons 0:08 
    Function of Favorite Icons 0:09 
   Bowser Support 1:10 
    Browser Support 1:13 
    Location in Browsers 1:46 
   Implementation Methods 2:04 
    Implementation Methods for Favorite Icons 2:05 
    Favicon and Apple Mobile Devices 4:51 
   Creating the Icon 6:13 
    How to Create the Icon 6:14 
   Favicon Resources 9:10 
    Websites for Icon Creation and Conversion 9:11 
    Programs for Icon Creation and Conversion 11:50 
  Embedding Flash and Other Objects 15:07
   Intro 0:00 
   Flash and other Plug-ins 0:41 
    Main Problems with Flash 0:44 
    Benefits of Flash 2:02 
   Embedding Flash: the Old Way 2:57 
    The Old Way to Embed Flash 2:58 
   Embedding Flash: the Satay Method 6:42 
    Satay Method 6:43 
   Embedding Flash: HTML5 9:28 
    How to Embed Flash in HTML5 9:29 
   Embedding Flash Directly in <video> 11:39 
    Embedding Flash Directly in Video Element 11:40 
   Review of Embedding 13:24 
    Image Elements 13:39 
    Video, Audio, and Canvas Elements 13:44 
    Embed Elements 13:53 
    Object Elements 14:04 
  Offline Cache 19:53
   Intro 0:00 
   Purpose 0:47 
    Purpose of Offline Cache 0:48 
   The Appache 2:06 
    Attributes of Appcache 2:07 
   The Manifest File 3:22 
    Manifest File 3:23 
    Example of Manifest 3:32 
    Section Headers: Cache, Fallback, and Network 4:21 
   Server-Side Considerations 5:17 
    text/cache-manifest MIME-type 5:18 
    Other Server-Side Considerations 5:41 
    ExpiresActive On and ExpiresDefault 'access' 6:07 
   Example: Offline Cache 1 7:44 
   Example: Overwriting Files 11:09 
   Example: Wild Cards for Network 14:58 
   Example: Offline Cache 2 16:06 
  Web Development Principles 26:47
   Intro 0:00 
   Interoperability 0:36 
    Interoperability of Web Development 0:37 
   Interoperable Websites Should Work 3:05 
    Qualities of Interoperable Websites 3:06 
   Backward Compatibility 5:52 
    Compatibility With Older Technology 5:53 
    Example: Meta Tag 9:07 
   Forward Compatibility 9:33 
    Advancement in Technology 9:34 
   Accessibility 10:11 
    Accessibility of Content 10:12 
    Semantic Code 11:43 
    Example: Where Will This Link Take You? 13:56 
   Graceful Degradation 14:59 
    Graceful Degradation or Fault Tolerance 15:00 
    Types of Degradation 16:35 
   Progressive Enhancement 18:36 
    Progressive Enhancement 18:37 
   Future Detection and Browser Sniffing 21:05 
    Future Detection Versus Browser Sniffing 21:06 
    Example: Email Input Type 23:39 
   Tim Berners-Lee's Quote 26:20 

Welcome back to

This lesson is going to be on HTML headings and sectioning.0002

Heading tags are tags that semantically outline and structure your web page.0008

There are six of them that give six different levels, and then the hgroup element, which you use to group elements that are the same heading together.0014

Usually, you have an h1, which is the most important heading.0027

And then, going down from that, they decrease in importance.0032

The title of your webpage is usually going to be the h1, and then, if you have something tiered underneath that, it will be h2 and h3 and h4 and so on.0038

You use hgroup in an instance where, for example, you have a heading level 1, and then you have something like a subtitle.0047

It is not a heading level 1; it is a separate heading.0054

But it is still part of that first heading, so you don't want it to create a lower-level section yet.0058

You can group that inside of an hgroup element, and it will keep them together and keep the page structure intact.0064

The basic rules for headings are outlined in the HTML5 specification.0075

And I have basically just copied them verbatim, because I think they are important; and they are complicated,0081

but the wording is very precise and accurate, and it is worth looking at in detail.0089

The first element of a heading content in an element of section content represents the heading of that section.0096

First of all, heading content would be the h1 through h6 elements.0106

And section content is the sectioning content, like the aside, the nav...we will look at that in a minute.0114

But in this example, it is nav; it is going to help you section different parts of the web page off.0125

Usually, the section content will be at the top level.0131

So, what this rule here is saying is that the first element of heading content0135

that shows up inside of something like a nav, for example, represents the heading for that section.0142

So, this h1 here--if, say, you had a title in here--would represent the heading for this nav that it is contained in.0149

It goes backwards; and then, of course, this entire nav has the heading that is specified right here in this h1.0156

If this had been an h2 or any other heading content, it would have appointed the heading for this sectioning content.0164

OK, the second rule: Subsequent headings of equal or higher rank start new implied sections.0176

These are subsequent headings--h2 and h3--but they are not of equal or higher rank.0182

This is a subsequent heading that is of equal rank to this h1; so, this one starts a new implied section.0189

You have, underneath this sectioning content, two sections--this second one starts a new section.0200

The subsections are defined here: headings of a lower rank imply subsections that are part of the previous one.0211

So, these headings are of lower rank than the heading that is above it, and they start subsections,0219

which is why I have indented them--because they are underneath.0224

So, you notice: the indentation that I am using here is not what you might expect,0228

because I said "nesting" by accident, because normally when you nest, that is when you indent; and you only indent when you are nesting.0234

But to illustrate the point here of these, I am indenting these to show the sectioning structure.0243

This h2 is actually, in terms of the way that the nesting is run, a sibling of this h1.0251

But because of the heading rules, it is more like a child, instead of a sibling.0259

And so, I have indented it, because according to this rule right here, it is a subsection; and then, h3 is a subsection of this h2--0265

although, really, all of these would be (in terms of just nesting on its own) just siblings (and children of this nav).0274

The last point here: in both cases, the element represents the heading of the implied section ("both cases" being these two points).0283

So, when there are subsequent headings, either of a higher level or of a lower level,0292

in all of those, the element represents the heading of the implied section.0299

The implied section that this h2 creates--the heading is defined here for everything that is underneath it.0304

The heading of the section that this h3 is in is defined by this h2, etc., etc.0312

And you can have a lot of other elements in here.0318

This is just the outline of the headings only.0320

There can be paragraphs and a lot of other things underneath here.0322

And they will all fit into the structure, based on where they fall in relation to all these.0325

So, anything after this, but before this, will be inside this h3 element and will have the heading that is defined by this h3 element.0331

Sectioning roots are a little exception: sectioning roots can have their own outlines,0341

but the sections and headings inside these elements do not contribute to the outlines of their ancestors.0348

So, these are the sectioning root elements; and so, take for example a table data.0353

It has its own outline, but it doesn't actually fit into the normal flow of the way that normal headings go.0361

So, say you have a heading, and it has a table inside of it.0367

The content in the table data fits into the table's heading, but not necessarily into what goes above it.0371

And it doesn't contribute to the outline that its ancestor has.0380

OK, sectioning content is...well, these are the sectioning content tags.0387

This is the exhaustive list; and they are kind of the top-level things that you would be using to group parts of your page together.0394

And all the other headings will usually be underneath this.0402

But you can also have these underneath headings.0404

Now, sectioning content is always a subsection of the nearest ancestor root section or content section.0407

This little example here--remember, sectioning content are these tags here; and sectioning root elements are what I just talked about in the last slide.0417

This is a sectioning root element: it is the ancestor of this h1 and these articles.0428

This article here is a sectioning content, and the blockquote is the nearest ancestor.0438

So, this article is a subsection of the blockquote, and not of this h1 element, which is above that,0446

or of this h1 element, which is below the blockquote, even.0454

Section wrapping is defined by the section tag, and you can use it to help indicate the structure of your document0462

in a way that improves readability to the computers that are trying to understand the outline.0473

You don't technically need them, but it can organize things better.0480

And it is generally a good idea to use them, if only for your own sake,0484

because then you don't have to learn all of the sectioning and heading rules as closely,0489

because a lot of it depends on kind of complicated structural rules, based on when heading tags end and begin,0495

and what the type of element that is being used is.0503

It is better to just set it all apart with a section tag.0506

The HTML specification encourages you to explicitly wrap sections and elements of sectioning content, instead of just relying on these rules.0512

In this case here, we have some made-up headings, and the h1 is followed by a lot of other headings.0521

But they are all actually underneath it, except for this paragraph, which is not in this section.0530

So, if we didn't have this section element right here, it would not be clear to you that this last paragraph here,0537

with the content of Grunt, is actually directly underneath the h1.0545

The way that this would get parsed would be: this h1 is the first level, and it has this Grunt paragraph directly underneath it.0550

So, this is actually a first-level paragraph.0560

Even though it follows all of these other ones, it is not a child or a part of any of these subsections.0564

And then, this section tag makes it explicit that all of this section is underneath the h1.0570

And then, you have h2, h3, h2, h3; this would be a section here, and this would be a section.0579

And note that this paragraph here would actually be, again, underneath this h2.0591

So, if you wanted to put a section around this part, you could, as well.0598

Let's take a look at how this actually would play out, really quickly.0611

Here is the code for what we were just looking at.0615

And this is how it shows up in the browser.0625

You are going to end up using styling to make sure that it looks a little bit better than this,0628

because this is using the complicated rules, and it may be a little bit confusing.0633

But you should be able to see that this is the largest text; it is the level 1 heading corresponding to this heading here.0638

And then, this section (if I highlight it) is all of this.0646

So, this Grunt text right here is part of this section, part of this level heading.0654

Now, the next two elements, Bar and...I don't even know how to pronounce this made-up word, Quux...0664

are both the second-largest text, which makes sense; they are level 2 headings, and they are both inside this section.0670

And h3, Thud, is the next largest...oh, and Bla--they are both children of this.0680

Baz, here, would be a part of this section.0691

All right, let us look at some further examples now.0717

Say this is a basic outline for a document that you have.0723

It is about apples, so all the rest of this page is about apples.0730

And everything following this h1 is going to be underneath that heading.0733

The first thing here is "Apples are fruit."0739

It is clearly the first paragraph underneath this heading.0742

And then, you have two subsections for the heading: Taste and Color.0745

And Taste has a further subsection of Sweet.0751

Let's look at it really quickly: it just looks like this.0758

Now, if we were going to improve this heading a little bit, we could add some sectioning content tags to clarify what, exactly, is the section of what.0762

This is all one section; and we can add a further section underneath the Taste, all the way down to above the Color section.0789

Now, this is clearly its own section.0810

Furthermore, we could add a section here, just for this.0814

If you remember the rules that we had, this section gets the heading of the element above it.0829

So, the heading for this section is this right here (Sweet); the heading for this section is Taste.0836

And then, lastly, we will add a section here: the heading for this section is Color.0844

And let's fix the indentation; so now, it should be clear what exactly is happening.0856

Now, if we tab over to the browser again and refresh, nothing actually changes,0892

because all of what we just did here was already defined according to the rules.0898

But we just made it clearer; and now, when we are adding code in later, if we are going to put paragraphs in,0904

we are not going to get confused and maybe put something in a place that we don't realize is going to be headed by the wrong thing.0909

Right now, if we put something here after this paragraph, we can specify if we want it to be a child of this,0920

by putting it in this section; or, by putting it inside this section, a child of Taste.0928

The last thing we are going to do today is look at a couple of real-world examples of websites that are using headings,0937

and then use the w3c validator to look at the headed outlines that it generates.0945

And this is going to give us a clue about how, for example, screen readers are going to go through the web page,0953

because it will take the outline of the headings, and it will read those first, if the user specifies it to.0962

And then, they can tell what part of the page they want to be read through.0971

This is A List Apart; and so, take a look at it, and you should be able to see that there are a few headings.0975

There are headings for the individual articles.0986

There is the main heading; let's put it into the validator and check Show Outline here.0990

And then, when we check it, we can shortcut down to the document outline.0999

There is actually not a first-level heading specified in Text.1005

In this page, the image is actually the first-level header.1010

But then, h3 here--this section here--would correspond to this entire section.1016

And if you look at it (I'll zoom in, so you can see a little better), the first heading that we come across is a date, actually.1024

And the reason that it is a date is because (and you can see the date showing up right here) this little section changes according to the date.1034

It is a little newsletter, and it comes out in sections; and that is all right.1043

And then, the subheadings are the names of the articles.1057

Now, the next level heading that is parallel with this is Editor's Choice, which is right here.1062

And the next one you should expect: Search ALA and Topics are also next to it.1069

Search ALA, Topics, and then A Book Apart down here are all next to each other.1083

If we were going to click on one of these and go into it, and put it into the validator, you will see a slightly different outline.1093

This time, we have, again: the first first-level heading is empty on this outline, because it is an image.1112

But we have an h1 that actually shows up as second-level.1117

That is because the first level applies to the entire page; the second h1 applies to the actual document that is this article here.1121

And then, these second-level headings are all the article headings within the article that help break it up a little bit.1134

Let's look at the World Wide Web Consortium; it has some interesting things in it.1148

This one actually validated, which you expect from the World Wide Web Consortium!1166

We have the first-level heading, which is W3C, corresponding to the title of the entire site.1176

And then, h2 is Site Navigation; now, you can see that there is actually not a second-level heading visible on the page that says Site Navigation.1185

That is fine; it is actually good practice of semantics, because visually, it is clear that this is site navigation, just by the way that it is laid up and laid out.1197

But to a screen reader, it is not clear what is the navigation and what is the content, right away,1208

if there are not these headings that you can use to tell the screen reader which parts are what.1215

That is really good practice there.1224

And then, we have the News section, which I assume is this, and then the other second-level headings, following all the way down.1226

Now, if we were to take this and click on, say, Semantic Web (now we are on a subpage of the website),1236

and run this through the validator, you will see: it changes a little bit.1248

Now, what we have is a first-level heading, like we had before, and the Site Navigation.1261

But then, we have another first-level heading, Semantic Web.1267

And that first-level heading relates to this area here, and it is the first-level heading for this area.1271

And then, you have second-level headings, and so on, all the way down.1279

Think about this in terms of screen reading, and it is probably going to help you create your headings in a way that makes sense.1288

If you are blind, and you are using a screen reader, you are not going to see this layout.1295

What you are going to have is a screen reader that is going to go through in order.1301

And it may (if you don't have a very advanced one) just start at the top and start reading as the page goes.1304

So, it would say "W3c Views Desktop Mobile Print Standards Participate Membership..."1312

And that is not very useful, because it is going to take you through all this heading stuff, and all this, before you even get into the content.1318

And if you want to indicate something at the very bottom of the page, and click on that link--1325

say, a feedback link--you are going to have to listen through the entire website to get there.1330

And that is not helpful at all.1335

What good screen readers will do is actually give the user an option to navigate through it, based on the headings.1337

They will first listen to the first-level headings (W3C and then Semantic Web); and there are no other first-level headings.1346

And then, the user will choose: do they want the W3C section or the Semantic Web section?1353

W3C applies to the entire website; so they should know that there is navigation underneath there.1359

Semantic Web is the section that they hopefully just clicked on, and then they can select that and then listen to the h2 headings.1363

If they want to get into this article right here, if you don't use good headings,1373

they are going to have to listen through the entire site until they get down to it, down around here.1380

But if you use good headings, they will have to listen to this and this, and they will select this;1385

and then, they will listen through these headings and select News1390

(hey won't have to listen to these headings, because they can click it as soon as they get to it)1394

and then listen to these headings, skipping all the content in each of these headings, until they get to the one that they want.1398

That is the end of the headings section lesson.1413

Thank you for watching

Welcome back to

Today, we are going to be looking at embedded content--specifically, images, audio, and video--0002

and how to embed those into a web page.0009

Let's get right into the code.0014

We have here a little outline I have prepared.0018

First, let's look at embedding an image: let me just show you, really quickly, what this web page looks like.0023

It is just a bunch of headers right now; and we are going to type in, right here, an image.0031

Images are pretty simple.0037

This is one of the oldest media tags; it goes way back to the days of Mosaic, one of the first browsers that added the ability to include an image.0039

And there was a little bit of a controversy about whether it should be a tag like this, img, with a source;0050

and then you specify, say, a folder and an image; or whether it should be something more like embed, and then a source;0058

and then maybe something like a type that lets you know what type of content you are embedding.0071

For historical reasons, and because there were already some browsers doing things in this way, this is what they went ahead with,0079

even though they figured, "If we do it this way, eventually we are going to have to have an audio tag and a video tag,"0087

which is just what has happened; but it is not a bad thing, because until now, we haven't had tags in HTML.0093

We have had to embed things like Flash Players or plug-ins in order to play video or audio.0103

Now, we just have a tag very similar to the image tag.0110

This is how the image tag works: refresh it, and there is a little image--very, very simple.0113

The browser has access to this; for example, you can right-click on it and do things like copy it, get some information about it, save it...0121

There are a couple of other options: say you want to give it a width--you can do that easily and size it up.0136

Now, this is generally something you don't want to do, because it looks kind of pixolated.0149

It gets out of proportion; and you can size it down, as well; but then, you have an image that is bigger than it needs to be.0155

We will delete that; now, let's look at some image file formats.0166

You will notice that I used the jpg extension here; this happens to be a JPEG image.0174

There are a lot of other file formats that you can use.0180

I'm going to copy some code over that I prepared earlier and paste it in here.0184

What this is that I have just pasted in: it is a bunch of figures, using correct code.0198

But the important parts are these images here: they are all the same image, this picture of me visiting a Darth Vader art exhibit.0204

And they are each using a different file format; and this will illustrate some of the differences in the different file formats.0214

JPEG is probably one of the most popular file formats.0224

That last picture I showed you was a JPEG; this is JPEG.0230

JPEG is really good for images with a lot of color and a lot of variety.0233

You can see this picture: it is not really pixolated--there aren't a lot of compression artifacts.0238

And it is sizing well, even though this is zoomed in a little bit.0247

The same thing down here for png's; you will notice that the color is a little bit brighter--png's actually have more colors than a jpg does.0253

And it does the same sort of good job with not having artifacts and having lots of colors, and there are not a lot of hard edges here.0264

It is kind of fuzzy; but then, when there are hard edges, they show up well, as well.0276

Now, gif, on the other hand, is a format that is terrible for images.0280

You can see that it does not have a lot of colors.0286

You get this effect of the colors breaking into hard lines.0290

And the hard edges get broken up into weird little color artifacts.0297

And you can fix that a little bit with some options that gif has.0301

There is something called dithering: this is the same image as a gif with full dither.0305

And it breaks up some of those lines, so you don't have those lines in here and here, for example.0310

They are broken up, so it looks a little smoother.0316

But then, you can see these dots, as well.0318

And I have saved these images to emphasize the effect a little bit.0321

For example, this would be a dither with the full color; and you can see, it is a lot better than this one.0326

But it is still not as good as the JPEG or the PNG images.0332

This is the best image that you can create with a GIF.0337

Compare it to the JPEG below; you can see some of the differences.0343

Those are the most common file formats for images on the Internet.0350

It used to be that png's were not well-supported by browsers.0357

But nowadays, pretty much any browser that you are going to be using will support png's.0360

Now, also take into consideration the compression, because all of these are actually compressing the file.0366

This full-color GIF is 72 kilobytes, compared to 40 for the dithered one and 39 for the normal one.0372

Now, the PNG has a lot higher of a file size, because it is using the full colors.0381

But if you wanted to, you could use the same number of colors as JPEG or GIF, and the PNG would be better compression.0390

So, PNG is a better file format all around, for a lot of things.0398

And then, the GIF 47--GIF is very popular, because if you take a picture on, say, a digital camera,0404

it is usually going to always automatically save it in the JPEG format.0410

And it has good compression; you can set the compression values to be little compression0415

(which will make the file size much larger, but it will look better) to a lot of compression0422

(which can make it smaller, if you are really worried about bandwidth).0428

Now, this last image here is the JPEG in its original size that is not compressed; it is not resized down.0432

It is just the original JPEG compression, and I have browser-resized it to be a lot smaller.0442

So, if we look at the picture un-sized, it is this big.0449

This is something that you will see on some websites, where the original picture hasn't been sized down for the web page.0456

It is just right there, and then sized down using the browser.0465

And that slows down the browser when you are trying to load and scroll.0471

And it slows down the downloading speed, and you can actually see in here, if you have an eye for it--0475

there are a lot of artifacts from browser resizing, especially since this is actually sized up, so it is closer to the original size.0482

If I were to make this the original size that it is sized down to, you can see a lot more artifacts in here.0488

So, don't ever depend on just the browser to resize an image; it is almost never going to have the same quality,0493

and it is just going to be a negative effect on the usability.0500

I am going to go in here; I am actually going to delete that one, because it is slowing down everything.0506

Now, we can look at the way that these different image formats deal with more precise lines and fewer colors.0519

This would be the sort of images that you might see that aren't just photographs, but say an image that is part of the design of a website--0529

so, borders around things, or little logos or decorations that you want to be precise.0539

JPEG does not do a good job with these sorts of images.0546

You can see here these artifacts of the compression around the edges here.0548

It does a little better job on the straight line, although on the corners you can see a little bit of artifacts.0553

And even if you have it at really high quality, you are always going to have a little bit of this artifact.0559

And also, the coloring is not as good; you can compare it to a PNG.0568

This red circle here has lost a lot of its brightness; so has the blue square.0572

JPEG is not a good format for these sorts of images.0581

PNG does well at both; it is both good for photographs, and for this sort of line art with more precision needed.0583

Even though it is a compressed image, there is not as much loss in here.0592

In fact, I can't see any loss; every pixel looks like it is in the correct place, as far as I can tell.0595

And it is also much smaller; this is an 8-kilobyte image, and the PNG, which has superior image quality, is only four kilobytes.0600

And this is also something that GIF's are really good at; this is a 4-kilobyte GIF--the same size;0608

and it is pretty much indistinguishable from the PNG--they both display it really well.0613

Some other differences that you have are: GIF's have been able to do image transparency and animation;0620

and PNG's can do transparency as well, and there are some methods being employed to make PNG's use animation, as well;0628

but it is not well supported at this time, so right now, if you have an image that you want animated, it is going to be a GIF usually.0639

If you want a photograph, it is going to be either a PNG or a JPEG.0644

Here is an animated GIF...the browser is crashing a little bit, because it is a fairly large image, and it is resized.0649

This is a GIF that is just continually repeating.0662

And you could do the same thing with PNG, but it is not as well supported.0666

What PNG's are really great at is alpha transparency.0669

So, this image right here has this white area; it is not just a color placed on it--it is actually transparency.0673

You are seeing the white background behind this image, showing through.0680

And you will notice that there is a gradient: it fades slowly.0683

When a GIF does transparency, it is just a 1-color transparency, usually,0688

which means I could select maybe the red color, and make that transparent, so that all of this would be transparent.0692

Or I could select, maybe, just the white color.0698

But you couldn't do something like this, where it fades out.0700

In fact, I am going to pull open Opera browser, because the Opera browser has a built-in extension,0702

sort of like Firebug in Firefox, that will allow me to take this up.0715

I am highlighting it right here, and I am going to pull the margin up and make it negative.0726

And you can see that it is transparent all the way throughout the whole range; it is not just a single color.0733

That is alpha transparency; and it has some problems with Internet Explorer,0742

although you can add in some special code to make alpha transparency work in Internet Explorer.0748

I think Internet Explorer 9 will support alpha transparency in PNG's; all other browsers will support it, if you have a modern version.0755

That is the images; now, as of HTML5, we can do the same sort of thing with audio--it is very clean.0767

So, this is the old way of embedding audio in a web page--all this code right here, from here to here.0780

This is what you need just to embed one song, or a little audio clip.0793

So, you have this object; you have to specify its class ID; if you get the class ID wrong, then it is not going to load.0800

You have to specify the code base; you can see right now that it is using an Apple code base,0806

so if the user doesn't have this Apple plug-in installed (it is QuickTime, QT), then it is not going to work for them.0813

And either it will just be broken, or they will be prompted to install the plug-in.0820

They will have to take the time to try and install it; it may or may not work.0825

You can specify the width and height, and then you have these parameters that are also needed,0828

because it wasn't consistently implemented in different browsers.0833

So, you need these, as well; specify a file and a lot of other information.0837

And then, you need special code for Internet Explorer here.0841

This is an I.E. conditional comment; so, this is actually code that Internet Explorer made up to target just Internet Explorer.0845

And you have a whole separate code, basically the same as this, but a little bit different, using different types, etc., for Internet Explorer.0854

And this is just really complicated; and after all of that, you have multiple layers.0865

You have the browser; you have the plug-in; and then you have the actual audio element playing.0873

And the website has no access to the plug-ins or the audio itself.0877

And, for example, you will not be able to resize the player unless you do it through all of these complicated controls.0886

You can't update things dynamically.0891

The new way of doing it is vastly better.0893

Let's put it down here.0898

It is just the audio element, just like that: you can give it a source, and filename...0904

And the audio element actually, unlike the image element, is not an empty element.0925

It is closed; and this is for historical reasons.0932

The image element is really well supported by browsers; the audio element is only supported by new browsers.0937

So, what we can put in here is a little message saying, "Your browser"...a little message.0944

What this does is: a browser that can process this audio element will not display this text right here, or whatever else you put in here.0956

But an older browser will get confused by this tag and just sort of ignore--just treat it as something like a div tag.0965

And then, it will display this text; so this is a way to target users who have out-of-date browsers.0975

You might give them the option to upgrade, give them some links to a couple free browsers (like Firefox, Chrome, Opera,0981

or a new version of Internet Explorer)...another thing you can do is give a manual link to the piece of media in question; just go to the link.0988

And this is a better thing to do, because then, people with older browsers will still be able to access the content here very easily.1012

And they will download it, and then they will have whatever they need on their computer to run it--1022

assuming that they have something that is capable of playing MP3's.1028

And if you are clever, you can actually also use this whole object code.1032

All of this is not needed anymore (it is a mess); but if you do take the time to figure it out, and do it the old way for the old browser,1038

you can just paste that whole thing in here; now, the audio element ends here and begins way up here.1049

New browsers will just see the new audio element the right way.1061

And then, the old browsers are going to get all of this.1065

Let's take a look, really quickly, at what we have so far.1068

Here is the old way of embedding audio; and you shouldn't be surprised that it is just broken right now, actually.1077

We don't have the plug-ins installed; I probably have some typo in there; and it is just a big mess.1084

Now, the new way (where did it go?) is much simpler.1090

It is actually in here; I forgot to give it a control, so that it shows up.1110

Now, you can see the controls.1122

This is just automatically part of the browser; I can play it here.1126

You won't be able to hear it, because the speaker is on my shirt right here.1130

But all of these controls are just built into the browser, and you can seek, and there are a lot of other things you can do; I will show you in a minute.1134

But you will notice that, even though I had all this extra code that made this little broken plug-in,1144

this thing right inside this audio element--it is not showing up, because this browser is able to read it just fine.1149

This is Firefox, by the way; now, say you wanted to look at it in Chrome.1159

Chrome is going to display it a little bit differently; it is up to the browser how they want to render the controls.1168

It is a browser function, so every browser is going to be a little bit different.1176

When you are in Safari, it is going to look maybe a little bit nicer, more like Safari--more like Mac sort of controls.1183

And this is really good: you can style it with additional stylings, if you want.1191

But the point is that I now have access to this from the browser.1196

In fact, let's say that I wanted to not use this at all, but just add a little button and give it a type.1200

Now, it is actually really simple to control this.1225

I'm going to give this an ID of audioPlayer, and now this control down here that I am making manually...1230

I am going to say, when it is clicked, we get the ID of the player.1247

Now, I am going to copy this code over, really quickly; OK.1270

This is a little bit of JavaScript: you will learn about JavaScript later, hopefully, if you are serious about web design.1285

But this is an event; so, when it is clicked, it will run this script.1294

And what the script does is grabs the element, which we just specified up there, which is this one; and then, it uses this method to play it.1298

Here, we will do it in Chrome: here is this little button I have created, and you see it is not playing.1311

If I click this button, it starts playing.1316

You can do a lot of different things like that: it is all available in the browser now.1321

Let's add a couple of other ones, while we are at it.1326

Here are some other methods that you can use.1344

This is pause, and it is just the same as the one up here, except the method is pause.1347

Now, this one is a little bit trickier: you have the audioplayer.volume, and then, instead of just calling it, like these are,1355

you are setting it equal to this value; but you are actually not just setting it equal to...1364

this is a JavaScript shorthand notation that says, "Take this, and then add to it this value," basically.1369

So, for volume, the way that audio works is: 0 is muted, and then 1 is full-volume.1378

This is going to add .1 to it, and it will make it 10% louder every time you click this Louder button.1387

And then, the same thing here: this Quieter button that I have made (you have a -) will make it 10% quieter each time.1393

This is a mute button, which takes the muted property and sets it to true (which hopefully has been set to false already).1401

And then, this one will un-mute it (set it back to false); take a look.1412

So now, I have all of these little controls here.1420

I can play it, pause it (look right here), and I will mute it and un-mute it.1428

Right now, it is at full volume; I can make it a little bit quieter (see it move down?).1435

And so, now I don't even need the audio element that gives it the controls--this right here.1439

This the controls attribute; it is a boolean, by the way, which means you don't have to set it something like controls=true; that doesn't work.1452

This is a boolean, so just existing right here makes it on.1461

And then, if you don't have it, it makes it off.1466

So, if you really wanted to put the whole thing in here, like this, this would be for XHTML syntax, because every attribute needs a value.1468

And it is just boolean, so it is just on or off, basically; it is not true or false (you can't set it to false; not existing would be false).1481

I am going to remove it--no controls; and now, they are gone, but I have made my own here.1489

So, if I press Play, you can actually hear it (I can hear it; you probably can't).1500

And you can style whatever you want.1506

I used a button; you can use a link; you can use an image; you can use pretty much anything you want.1509

And there are a lot of other methods and things that you can do available, using JavaScript.1514

Now, we have all of this complicated stuff here.1524

I forgot to mention that you can actually take this Download Manually link and put it inside here.1527

We have this object, and then all of the parameters are children of it.1535

We can put this link in here; and if a browser doesn't support the object tag in this way, then they will get the Download Manually link.1542

So, this way, you have sort of tiered levels of support.1554

You have just the good HTML5 video and audio for new browsers.1558

And then, if that doesn't work, then you can fall back to the object element for slightly older browsers.1566

And then, if that doesn't work for some reason, then it falls back to just a simple link; and they can download it on their own.1571

Interestingly, you can take advantage of this, if you want to.1580

Let's add some code down here; if you want to target older browsers, and say you want to give a message specifically1586

to people using browsers that are not HTML5-ready, you can use the video element and the audio element.1599

And there is also the canvas element; and what this will do is: anything you put in here is only going to show up1608

to browsers that don't support the video, and don't support the audio element, and don't support the canvas element.1623

So, a lot of browsers right now fit this, actually.1631

But if you have a brand-new browser, you won't see this.1635

But if you have a slightly older browser, we are going to put a message that says something like this.1637

And you can send messages to them; you might recommend that they upgrade, or something like that.1650

There are a lot of attributes that you can add to these controls and the players.1667

So, let's clean this up; we don't want to deal with all of this right now.1675

Let's just work with the audio element by itself; OK.1684

I'll make another copy down here.1706

We have already talked about controls, and that will make it visible with the controls, so that users can play with it a little bit, and go throughout, selecting...1710

Another one you can add is autoplay; it is another boolean attribute.1725

If I add this, it is going to make it so that the browser automatically starts playing it, as soon as I load.1732

And you can see: it is playing here.1738

Don't do this! It is really annoying when you have a web page that starts playing music right away.1740

It is here if you really want to, but there are almost no use cases where this is not going to just be annoying.1745

But it is sort of the HTML5 methodology of paving the cow paths; this is something that people do.1753

And if it is not included here, people are going to figure out ways to do it anyway.1760

So, the ability to do it is added and available; but most web developers are going to say it is a bad idea.1764

Now, another one we can do, besides autoplay: we can say loop.1777

If it wasn't annoying enough that you started playing it right away, now it will play endlessly.1784

Once it gets to the end here, it is going to loop back around to the beginning and just keep playing over and over and over.1788

So, if you really wanted to bother somebody, you could have a little short clip that just looped around.1796

But that is not what...annoying people is easy; making a website that is nice, and a joy to use, is difficult.1804

We already looked at some of the JavaScript elements.1815

Probably the last one that is really interesting is actually only available for video, not audio.1819

So, I'll just say right now: it is the preload.1826

My mistake; this is available for audio, as well.1837

Preload is going to tell your browser to load the full file into memory,1841

so that when you do click Play (because you have the control to click Play, because you didn't use the autoplay attribute--don't use that!)...1846

when you do click Play, it will already have loaded the whole thing.1855

So, that is going to be preload=auto, which means to just go with the browser default.1860

And all of the browsers are going to default to preloading all of the audio and video that you have in your page.1867

Now, that can be bad, in some cases, because you may have, say, many, many, many audio playing.1875

And your browser is going to crawl to a halt, trying to download all these things.1884

Or you might have something that, for some other reason, you don't want preloaded.1887

You can set this to none, and then it won't preload it.1892

You are not going to be able to see the difference here, but there might be a pause,1899

or you might have to wait for it to buffer a little bit, when this is set to none.1902

You can also set it to meta-data, which will allow you to specify its preload state elsewhere in the meta information.1905

That is all the information for audio; now, video is actually very, very similar.1916

It has almost all the same tags and attributes and format syntax.1924

Let's set up this video section here.1931

Video is very similar: it is a video tag, and it is not an empty element, so you have to close it.1934

And the same thing here: you can put messages to the users that don't have browsers supporting this video element yet.1948

Actually, let's not be mean: let's do something like this.1961

That is a much better use for the video.1979

You might also be tempted to put things inside the video, like...say you have a transcript of what is being said in the video.1985

You might be tempted to do something like set up a paragraph and put the transcript in here, or whatever the text is.1993

The problem with this is that, if you put things inside the video element, it is going to hide it from your users that have the video.2007

That is not accessible; that is not very usable.2015

It would be better to take...if you have some information like that, why not make it available to everybody and paste it out here?2018

This is going to be basically for backwards compatibility.2026

Video is very similar to the audio tag: source=...2031

We are going to set up the video right here, and here is this little video that I have made.2046

You will see that there are no controls, and clicking on it doesn't really do anything.2056

So, let's add controls; refresh; and now, we have controls.2061

We can start playing it; we can pause it; we can mute it--things like that.2074

You can also put a width; let's make it 100 pixels; now it is much smaller.2082

This is something that you wouldn't be able to do with the object, or the normal embed elements, like...what YouTube uses today is Flash.2097

You would never be able to just resize it using HTML like that, because the video have to use the Flash, as well.2105

You can see, it still plays.2113

But you are also suffering from the same problem that I described above, with images,2115

where you now have a huge amount of video that is not even being fully used.2118

You are downloading a lot of unnecessary pixels; so don't ever do this.2123

But it may be the case that you would want to take something small and blow it up and make it a little bit bigger, for artistic reasons or whatever.2127

You have this ability to set it.2136

You can use the autoplay; you can use loop; and now, if I refresh, it should automatically start playing.2141

All right, so the last thing that is actually specific to video tags is the poster attribute.2160

Now, the poster attribute is new, so I think it may not be supported in this browser.2173

But you can set a poster; and what this does is: this image right here will be used as the default picture on the video.2179

So, if you haven't set it to play yet, then when you load the page, it is not supported here.2192

But when you load the page, you would see the picture that I set in the poster right here; you would see this picture2199

instead of seeing whatever frame is the first frame in the video.2204

So, this is something that you can do in YouTube, when you have a couple of choices at the first frame to set.2209

This one--you can set any picture that you want to be the very first frame, the still that is before it goes.2216

Now, the big thing with video in HTML5 is: there is a big debate about what video formats to use.2225

We talked about how, with images, you have PNG's, JPEG's, and GIF's; and it actually took a while for that format to settle down.2236

Early on in the Web, people were using other types of image formats.2244

You would even see bitmaps and things like that; and over time, it settled down to those three as the main players.2247

And maybe some new ones will start being used, as well.2253

Video--the same sort of thing is going on, but we are in the early stages now.2257

So, this is an MP4, which uses an mpeg compression.2260

And this is actually a proprietary compression, which is really good, and it is really efficient;2265

but because it is proprietary, the owners of this technology can charge browsers, or pretty much anyone they want, to use it.2271

So, something like Firefox (which is an open-source browser, and it is not a for-profit company)--2281

they are afraid that, if they support this video codec, then they are going to be charged a bunch of money later on.2287

And it is going to make their browser too expensive for them to run.2295

And if they don't support it, then it will be unusable.2301

So, right now, Firefox is not supporting this codec, because they don't want it to take off and gain popularity and traction.2303

They are supporting an Ogg Vorbis video formatting instead, which is admittedly not as nice; it doesn't work quite as well.2312

It gets the job done; it doesn't compress things quite as well, but it is a format that is open.2323

It is open-source, so anybody can use it for free, and edit it, and all of these other things.2330

So, that is very beneficial; so, both Opera and Firefox are using this--they are putting their weight behind this format.2336

And it is just going to take some time for us to see which format works.2347

But this causes a problem for us, because now, if I had this mp4 video here, Firefox is not going to be able to play it.2350

But if I just change it to the Ogg, then another browser may not be able to play it.2361

So, we have come up with a solution where we have a new element inside the video here.2366

And it goes like this: you set a source, and it is a self-closing tag.2373

Now, what this does is: the browser will go down to the video, read it, and then--2392

because it supports the video element, it is going to go to this source tag and look for the source of the video in this source tag.2397

If it doesn't support the video element, it is going to see this--go in here and just display whatever it reads in here.2405

It is not going to recognize this element, as well.2412

And it is just going to kind of ignore all of this.2415

So, this is backwards compatible; and it will load this up.2417

Now, if it is a browser that doesn't support this, it will continue moving on to the next one.2421

And you can put multiple in here; so you can add the video.ogg, and then the browser will read this.2426

If it doesn't support this format, it can move on to the next one.2435

And if there are a lot of other formats being produced over the next couple of years, we could have as many of these as you wanted.2438

And then, say your browser still doesn't support that; then you can have a link, just like we were talking about before,2443

giving them the ability to just download it manually.2453

And maybe you would want to choose this one, because it is open-source.2457

Even if the browser does support the video and the source tag, it is going to display this if it can't find a format that will work for you.2470

Now, the same thing actually can apply to the audio element up here.2483

This is the audio player that we built earlier.2488

We can do the exact same thing; let's copy this.2492

We have the audio element beginning here, ending down here.2499

Let's have it all indented properly.2504

And we don't want it to preload, so let's remove this; and we'll remove the loop, as well.2507

And we can put as many of these audio formats as we want.2514

We could say mp3's; there is also an ogg format for audio.2520

And say you had it in Windows, Microsoft Wave format--you can set that up.2527

And so, it just depends on if your browser is going to support it.2535

And this is all going to be being worked out over the next couple of years.2537

But I think, just like images, it is going to eventually settle down to a few main players that all the browsers are going to support.2542

And maybe the same thing will happen with this mp4 format as what happened with the GIF format, which also used to be proprietary.2551

And what happened was: there were a lot of people worried that everybody on the Internet was using these GIF images, which were proprietary.2559

And they knew that at any time, the CompuServe company that made the GIF and owned the rights to it could start charging money for it.2566

And it could just bring the entire Web to a stand-still, because nobody could use these images anymore,2574

or they would have to pay whatever CompuServe wanted.2581

What CompuServe actually ended up doing was: they made it so that anybody can use GIF at any time, and sort of promised that they would never charge.2586

Some people are hoping the same thing will happen here.2596

But then again, why would a company that could make profit off of something like this just give it away?2599

So, that is why there is a lot of support for the Ogg codec.2604

This is pretty much the important things I want to do with audio and video.2611

I should mention that these audio tags that I created myself, that I added up here (I'll put them back in,2621

just so you can see them again)--these audio buttons that I have made--they could be links;2639

they could be almost anything, really; because see this button that I have right here?2645

This could just as easily be a span tag, which has no semantic meaning besides whatever CSS you apply to a class may have some semantic meaning.2650

This span tag--you will notice, when I hover over it, it doesn't even turn into a hand cursor.2665

But still, if I click on it, it is still going to trigger this on-click event and run this JavaScript, which will un-mute it.2669

And so, it just has a lot of freedom.2679

The same thing applies to video; you can do the exact same thing with all of the exact same JavaScript methods that are described up here.2681

They work for both of them.2693

And so, that gives you a lot of freedom.2700

So, in summary, we have three tags: one image, one for audio, and one for video.2705

And that should be all you need; and there is a lot of other embedded content that you can use,2712

but it is a little bit more advanced; and we may look at that a little later.2721

But this is all you need for now, for the main things you will be doing.2727

One thing to be aware of, also, is that, when you add a lot of these things, they can make the page a little bit slow.2737

So, you always want to be careful about loading a lot of video and audio, especially if they are preloaded,2746

as images are preloaded, because it is going to slow down the bandwidth--it is going to slow down how long it takes your page to load.2752

I think that is it for this lesson; thanks for watching Educator.2762

Welcome back to

We are going to look at forms and a little bit of what you can do with them,0002

and some tricks you can use to make them more usable for users and more useful,0007

and how to get the data that you are getting from your users to be useful on the server side, as well,0012

so that it knows what type of information it is dealing with.0019

Before we really get started, you should be familiar with this terminology.0025

A form--you have seen them on the Internet all over the place: it is the little inputs where you type information.0031

And then, you hit Submit, and it sends it off, and usually you get some sort of response.0038

The form is all of that--all of the different types of inputs are known as form elements; or actually, they are known as form controls,0043

which is a little bit of a technical word; you might hear them called fields or inputs, more casually.0051

But they are technically called controls; so any little control where you are entering your name0060

or checking a box or selecting something from a menu--that is a control.0065

The control name is the name of the control, and the control label is...well, I will show you a demonstration.0070

Say you have (this is a bunch of forms here) this name right here, where it is labeled as the label.0080

And if you look in the source, this control actually has a name that is sent to the server.0091

A label is what the user is going to see, that identifies what they need to type in.0096

And then, the name of the control is like the back-end name that describes for the computer that is dealing with the data what to do with it.0102

Input type and state: most of the form controls that you will be dealing with are the input control.0113

And there are a lot of different types: the type describes what type of input it is, so there are a lot.0121

There are password fields, submit buttons...0129

And then, the state indicates, for example, whether it is on or off (if it is a check box), and things like that.0132

Form controls: this is a list of the form controls that are available right now.0143

Let's drag this up a bit.0150

First of all, the buttons: this is just will see a little example here like this; this is a button.0153

And usually, you will click on it, and it will send; I don't have it hooked up to the Internet, so it isn't going anywhere right now.0165

That is a button; but there are a couple different types.0171

There are the buttons that are actually submitting a form, and that is a little bit different on the back end.0174

And then, there are just basic buttons that don't do anything by default;0180

but you can hook in JavaScript or other things like that to it, so that when you click the button, it begins a JavaScript action.0184

Or you can even use them as links--things like that.0193

The reset button is a button that just erases everything in the form; it can be very annoying if you click in by accident.0196

So, I haven't actually included it here.0205

And here is the last button: this acts like a button, but it is not a button.0208

This is an image, but I am going to talk about that in a second.0213

Radio is a little (let me pull this up again)...they are like check boxes, but each one can deselect the others in the same group.0218

If I select one, the other ones get un-selected; you can only have one at a time selected within that group.0233

Check boxes are the little squares you see; and you can check multiples at a time.0241

Select menus are also called dropdowns or just a menu, and it is where you highlight a is an example down here: let's zoom in.0246

You highlight which of the many options you want to pick.0262

A text area is also known as a text input or a text field, and it is the larger text field,0269

where you type in multiple lines of information, instead of just one.0273

And then, these are all the input tags; so all of these have their own inputs.0279

They are on HTML code; all of these down here are the input element, but they have the type attribute, which sets them as different types of controls.0285

These are the slightly older, more historical input types.0297

And these are the ones that are new in HTML5.0304

So, you have text, which is just your basic, one-line text input.0307

Password will make the characters you type hidden in some way.0311

The hidden input type is not visible to the user; you can use it for information that you still need to send to the server,0316

or that you want to access with JavaScript, but it doesn't need to be edited, or even known to the user.0324

File will upload a file; image, I showed you, will act like a button; but it can be an actual image (here it is).0330

So, when I put my cursor over this, the little cursor turns into a hand, just like a link.0342

But it is actually more like a button than anything else.0348

The Submit is just a typical button, and the Reset, also, is a typical button, that submits and resets, respectively.0353

And all of these I will get into a little bit later in this lesson.0360

But they are new to HTML5, and the purpose of them is to pave the way for what people have been using in forms.0365

A lot of websites have text fields where you can type in a search (for example,

If you go to it, and type in information, and hit Enter, it performs a search.0382

And that is not quite a semantic use of the text field; so, HTML5 created the search text field, which looks almost exactly the same.0388

And basically all the rest of these are the same thing; they are dealing with use cases where0398

it is not every possible type of data, but it is the most common ones.0404

This would be a telephone number; a URL; any type of number; a range; if you are inputting a color, there is an input tag for that.0408

And then, these are all different types of dates: date, month, week, time, including localities or not.0416

Let's look at the code for some of these.0427

This is your basic form element; all controls need to always be inside a form element.0431

And just a tip: although it is technically allowed for you to apply CSS style to the form element,0439

the application in browsers is really terrible, especially in Internet Explorer.0449

So, if you do want to add styling to the box-level element around the form, add a div around it and style the div instead of the form,0453

because you are going to just run into a lot of problems trying to apply presentational stuff to the form.0464

Every form is where it ends here; here is where it begins;0471

and inside of it is all sorts of stuff, but most importantly, inputs and various controls.0478

Now, the form--if we really want it to be useful (and this is just demonstration, so we are just looking at it;0487

but when you want it to be used in the real world), you need to have a method and an action.0493

The method will tell it how to send the information, and the action will tell it where to send the information.0497

This is just an example: if you have a PHP file called processform, you could send it using the GET method to this PHP file.0504

And it will be able to accept that information and deal with it, depending on what it is.0516

And usually, the browser will re-direct the user to the location of this.0521

So, this PHP file will actually output some information--something like "Your form has been successfully submitted."0525

The GET method will send it using the browser URL in name/value pairs.0531

So, sometimes you will see in the URL that there are little question marks, and then variables and equal signs, and then other things and ampersands.0537

That is when you are using the GET method, more often than not.0544

The other method is POST, which can be encrypted; it is not visible to the user; and it kind of goes in the back end.0548

But it is a little bit more powerful, too, because it is not limited by the URL; it can be characters that are not allowed in the URL, and things like that.0555

This is the basic way of setting up an input.0569

You want to label your input so that your users know what they are filling in.0575

And the proper way to do that is the label element.0580

And it is a really handy element, because it automatically associates with the form input.0583

If I were to click on the label here, it actually highlights the element input for me, just the same as if I clicked directly on the input,0592

because the browser knows that they are connected.0600

The way that I have done that is: I have set the label; I have given the input that it is connected to an ID of name1;0602

and then, I used this for attribute, and I put the same ID.0609

And now, the browser knows that this input, which is just a regular text input, is connected to this label.0612

And various browsers will hook that up differently.0620

But another way that you can do that is right here; this is the same thing.0626

I don't have the for attribute here, and I haven't given the input an ID.0632

But because the input is inside the label (it is a child of it; it is nested inside of it), then the browser knows that this text label applies to this element here.0639

You can see the password, too: I click here--it highlights right there.0653

All right, so this is the text, and you have seen the password.0663

This is an input type hidden, so you may have noticed that, between the name and the password,0667

even though there is an additional input right here, there is nothing showing up.0674

That is because it is hidden: if I were to look in the source, you would still see it.0680

So, it is not actually a good thing to put something that is secret, because if I view the source of this, the user is still going to be able to see it.0683

But it is just something that you don't need them to be thinking about, and it is still something that you want to be a part of the form.0692

Passwords are handy for hiding your password from people looking over your shoulder.0702

The next one is the text area; I skipped over this when I was talking about it earlier.0710

But it has its own element name, Text Area, and you still need to give it a label.0717

I am using the method now where I have it nested inside, because it is a little bit more convenient.0722

And you can actually give text areas sample text, like this, and save, and refresh.0729

Now it is not working; but you can type things in here, and that is kind of an old way of doing it.0747

And that may be why it is not working--because that is frowned upon.0755

If you want to give it a label, use this; and if you want to give it sample text, you can use other methods.0761

A couple of attributes that you can use on the text area are calls for columns (say, 2 columns...0767

actually, let's make it 12 columns, so you can really see the difference).0775

Let's pull this up in another browser; there.0791

Just make sure and save this...and refresh; there, now it is a little bit thinner, instead of wider.0812

That is just one column, and then, if we make it large again, and refresh, it will be 12.0833

If I type...that is 12.0846

Columns are horizontal; and then, we can add the rows.0853

I may not have saved that; oh, it was just a text error.0870

That is interesting; it is not reacting the way it should (it should actually change the number of rows).0890

But this is sort of an experimental browser (it is a beta) because I am showing some more advanced things down here.0894

There might be a little bug going on; but normally, you would be able to change the rows.0905

Oh, this is a syntax error; that is the problem.0912

Teachable moment: syntax errors really cause problems--there we go; that is the way it should be.0916

OK, the maximum length attribute is a new attribute that lets you set the total number of characters that are allowed in the form.0925

So, say we only wanted 5 characters allowed.0936

I can't type anymore; that is surprising.0947

OK, that is not working; it may be because, again, this is a beta browser.0971

And this is also a new thing in HTML5, so it must not be supported in this browser for this element yet.0977

But it will be in the next few years, for sure.0986

A wrap can be hard or soft: hard wrap would mean that, when you type it in the form, and there are line breaks,0990

it breaks it automatically--the hard wrap will actually, when you submit the form, include these line breaks into it.1004

And if you have a soft wrap, then they won't be; it will just be software wrapped.1013

And it won't actually look different in the browser; but on the server side, when they get it, it will be.1022

And then, lastly, you can give it the read-only boolean attribute; and boolean means it is either on or off.1027

By default, it is off; but if you turn it on by adding the attribute there, then it makes it read-only, and you can't edit it.1034

See, I am typing right now, and it is not letting me edit it, because it is read-only.1045

And if you are going to be writing this in XML syntax, or XHTML, you would have to write read-only equals...1053

You can't say true or false here, because that is not how boolean attributes work.1060

All right, and then we add the submit, which would be just a simple...1065

if you don't give it a value, then it is a submit query in this particular browser.1069

Each browser decides on its own, but you can give it a value.1074

A lot of people feel like Submit sounds kind of dominating, like "submit to my will or my authority."1079

So, you can give it a value of Send--something very nice-sounding--if you want.1084

And that will update it; Send--very nice.1093

That is a Submit button; here are a couple of other buttons--I will show you the code; here are the buttons.1099

I have started a new form.1105

The most basic button you will see is just an input type of button.1109

And then, you can give it a value of anything you want, and it will show up, just like that on the button.1112

And if you press it, nothing happens.1120

If you wanted to give it a JavaScript event, you could say something like on-click= some JavaScript; and make sure you have correct syntax.1123

If I refresh this and click on the button, we are going to have a little JavaScript pop up.1141

And the same thing with the Submit button, except this will automatically submit.1150

You can use a regular button, using JavaScript to submit, as well, if you don't want the browser to submit.1153

If you want to, for example, run some checks first before actually submitting it, you can use a button button,1160

instead of a submit button, and give it a value of Submit or something like that.1166

And this is also the newer button; it is a button element, not an input element.1170

And the value is given by its content right here; so this says "I am a button," just like this one does.1177

And they are very similar; but you can see that, because the value is set like this, you can give some HTML in here.1184

So, I have an emphasis tag; and there are some rules about what sorts of things you can put inside the button element as content.1192

You can't put videos, for example, or links, because that would be kind of redundant.1199

The only reason you don't see these used widely is because Internet Explorer 6 will submit1206

the value of the content here, instead of the value that you want it to submit; and that can kind of mess things up.1212

Basically, it is not supported in Internet Explorer 6.1219

If you are developing a website, you are going to have to decide if you really want to be supporting Internet Explorer 6,1221

or if your user base is using modern browsers, and may not need to.1226

And then, last is the image input, which is just the same as a button, really,1233

except you can set an image; and when I hover over it, it indicates to me that I can click on it.1238

It is slightly distinct from a link, but in a lot of ways, it is very similar to just if I had put an image tag, and then links around it.1244

These are some different controls that you can use.1256

This is the input type radio that I showed you a second ago.1264

So, say you are in a chess program, and you need to indicate which piece1270

you want your pawn to be promoted to, because it has reached the other end of the board.1277

You can only promote it to one and only one; but you have several options--that is a great thing for a radio button.1281

And the way that you make it work is: you give them all the same name.1287

This is the control name, and they all have the same name of piece.1292

They are all type radio, and they each have a different value.1296

So, when this gets submitted to the server, anything you write here won't get sent to the server,1300

because this is just what the user is going to see.1305

This is actually part of the label; you can see, again, that the input is inside the label.1309

The user will see this label, and it is connected.1313

So actually, it should, if I click on the label, highlight the radio button for me.1317

So, even if I can't quite reach is an accessibility thing for if you don't have precise control of your cursor, for example.1322

But when I submit this to the server, there are not going to be four of these values; there is just going to be one.1335

It will have a name of piece, and a value of whichever one I have selected, as the user.1341

If I select Knight, then it will have piece and Knight as the name and value pair.1347

Now, you can notice that I have used a field set here; and a field set is very handy for things like radios and check boxes, to group them all together.1354

You usually use it when you are using elements that have the same name, like this.1362

And it indicates to the browser that this is all one sort of element.1366

And just like it is going to show up as one value when submitted to the server, the browser is going to give a little line around it.1371

Different browsers do this in different ways.1377

You can hide this line if you don't like it; and you can style it so that it will look the way that you want.1379

The important thing is that you are semantically grouping this together as one little field set.1386

And you can also give it a label, and the HTML element for that is legend.1392

And it labels the entire field set, all together, in a very cool little, nifty way.1398

So, I use that for check boxes and radio buttons.1405

This is a check box (let me size it down again), and this is (I am using the same thing) a field set and a legend, with the title of what this is.1411

And they all have the same name here.1424

And actually, I made a mistake in preparing this, because this has the same name as this.1428

And that is going to cause problems when you submit it, because you will have two of the same form control name.1432

And they will both be piece; and so, this one is probably going to override this one when submitted.1439

I really should call this piece2 all the way down; but I won't correct that right now.1444

And because they are check boxes, though, you can select as many as you want.1450

Here, I have all of them here: say I want King, King's Knight, Queen's Rook, etc., and then all the pawns.1455

And you will notice, again: I am clicking on the actual label--just the text.1464

And because it is properly set up, with the label element and the input inside of it,1468

it highlights and selects and deselects the check box automatically for me through the browser.1473

Now, when this gets submitted, it is going to send all of these values, not just one, because of the way check boxes work.1483

OK, so next, let's zoom back in for this.1493

This is a select menu, so the element name is just select.1503

And then, within the select, you have a bunch of options.1508

Let's scroll down to the example.1514

I'm going to look at it in another browser: let's look at it in Opera--I think this zooms better.1516

Forms, by the way, tend not to be very well-supported for styling in browsers.1526

So, if you really want to change the way that the border looks, you can try.1533

But the browser implementation is not very reliable, and it is different for browsers.1538

And things like zooming aren't consistent; that was just Firefox I had up, and it didn't zoom the form controls with the text,1543

when using the text; whereas, in Opera, it does zoom the form controls a little bit, as well.1551

So, this is a select menu; and I can click on it and select which of the options I want.1558

And notice that, again, it didn't zoom the actual dropdown list, even though it zoomed the control before you click on it.1565

So, that is probably something that browsers are going to "firm up" later.1575

But for now, just leave it the way it is; and users know what their operating system and their browser does.1579

So, unless you really need it to look differently, most of the time, just leave forms alone,1587

because it will take a lot of effort to get them to work the way you want.1593

Again, this is the part that gets shown to the user; and this is the part that gets sent.1601

Now, if I set a name up here, then this is the name; and then, the value will be selected by the option.1607

And you can also set a default; so, set one bishop to be default; let's save that.1617

Right now, a king is selected; but if I refresh, the bishop should show up as a default and may be selected--actually, is selected.1625

A default is the old way to do it; and it was probably never correct, actually.1644

I have learned a lot of bad habits over the years.1649

Selected is the correct method to set it as a default.1651

OK, label (input type file)...the label is Upload a Picture, and then here is the input.1657

You can click on this, and you select a file, and it will upload it for you.1668

And you had better have a server-side implementation that knows what to do with that.1672

Now, we are going to get into the new HTML5 inputs.1676

These are all input controls that have different types.1680

And they actually won't look too different; this is Opera--this is probably the most advanced, when it comes to the new implementation of elements.1684

But look at it in Firefox; this version of Firefox shows these new ones.1695

They still show up, even though they are not actually supported.1701

And they just look like text inputs, actually.1704

And even though I have given it a type of email, which is not something that this version of Firefox recognizes,1708

it defaults back to as if I had put text in here, which is actually part of the HTML5 specification; and it will still work.1717

So, it is backwards compatible; if you have older browsers, it will recognize it.1727

But if you have a newer browser, it may actually decide to render it the exact same way.1732

It may look still just like this email form, but it is going to send the data type to the server.1737

And your server will know, "This is an email content, and so what needs to go in here obviously has to be an email."1743

And you can set multiple, which is another boolean, which means that you can have space-separated emails (hello2@example).1749

And now, the browsers, probably in the next few years, will have nifty ways1767

of demonstrating that you have more than one email entered in here--maybe little dropdowns, or things like that.1773

You have email, URL (which needs to be a URL), and again, this is another nice thing about this:1779

when it gets implemented better by browsers, they are going to do a little bit of front-end validation.1788

So, if you type something like this, where I have two @ symbols, that is going to be a malformed email.1794

And the browser vendors may come up with a way to indicate, before you submit the form, that you have malformed content.1801

And it is going to give you a chance to correct it before it sends it to the server, and it comes back, and all this stuff.1811

So, the website expects a URL; phone number expects a valid telephone number.1817

A range...right now, if I was going to enter a range, because it is backwards compatible,1824

I just have to enter something like this, and then put the dash for the range.1830

If I was going to use Opera, though, I could actually select the range with this little range thing they have going on.1836

We have a search, which I will demonstrate in Safari (let's scroll down to it).1848

It has this circular look; and then, if I start typing, a little x shows up that I can click to delete what I was searching for and start over.1860

Right here, we have the Color input type, which will probably take a hex value.1875

And this is not supported at all right now; so even in Opera, it just defaults back to the text.1885

But someday, it will probably be a little icon here that you can click on.1893

And it will pull up the operating system's default color selector.1897

So, in Windows, it will be that little menu you see, with the most common colors, and the little dialog to pull up more complex colors.1902

And there is a similar window like that in Mac; and there is another one in Linux.1913

So, when you click on this, in the future, when browsers implement it correctly,1918

it will just pull up whatever the operating system's default way of selecting a color is.1922

And users will be familiar with that, and they will be able to pick the color easily.1925

And this is a number, but it is demonstrating the use of min and max.1931

So, by putting the min and max attributes here, and the step, I have set the minimum and the maximum number that you can fit.1937

And this should say 10, and then let's make this one say 16,000; all right, let's save.1949

So now, because Opera is beginning to support this (let's refresh it), if I click these buttons, it will start at 10.1961

And then, it will step up (the step is 23, so when I go up, it will go 23 at a time), all the way up to the max value (oops, I didn't mean to close that) here.1970

And you can set them to whatever you want.1986

And say you want to allow steps of 1; that is going to be the default anyway.1988

But if I refresh this now, I can go up one at a time, instead of by 23 at a time; so that is very cool.1994

And again, it is a new thing, so browsers aren't necessarily implementing it yet.2001

Safari has pretty good support for it that actually looks a little bit better than Opera's at this point.2007

And that is that.2017

The date and time controls are really not supported by most browsers at this point.2021

And they all are the same goal of just getting information that is in this default date format.2027

I will show you, in a browser, what the date format is.2035

So, these represent the different parts of the data; this is the way computers understand dates.2040

First, you have four characters (which are the year), and then a dash, and then two characters2047

(which are the month), a dash, two characters (which is the day, like the 13th of the month).2052

And then, this is just always a T; and then, you have the hour, a colon, and minutes, a colon, seconds, and then a period.2060

And this is the time zone, and it will be Greenwich Mean Time, or whatever it is; there is a code for that.2068

So, this is the full format; but there are a lot of different options in the forms for if you don't need to use the full format.2080

You just maybe want just the date.2088

This date type will only pull up the year, the month, and the day.2092

And then, you don't have to worry about time or timezone.2098

And then, there is datetime, which has both the year, the month, and the day, and the time in hours and minutes.2101

And you can enter it in, and when it is supported (for example, like Opera does), it will allow you to pick it.2109

This is just the date input; and Opera has this cool little thing where you click on it, and it pulls open this little calendar.2119

And you can look through the years, look through the months, and then select the actual date that you want.2127

Say I want September 2010, and the 18th: it has it right there.2135

In Firefox, which doesn't support this very well, I will have to enter it in manually--maybe 2010-10-18--something like that.2140

And Firefox or other browsers may implement a little bit of support, where they will check this.2155

But they still don't have the cool little calendar that pops up.2161

But as it is backwards compatible, there is no reason not to use these input tags,2166

because it is going to start looking good when browsers input the functionality.2171

This is datetime; you do the same thing, where you get the date, month, year; and then, you can select an actual time, in terms of hours and seconds.2178

And this also takes the timezone here.2190

And then, if you want to do it without the timezone, it is the same thing: datetime-local.2194

You can also get just the hours and minutes (that is time), just the month, or just the week.2201

Let's look in Opera again, because it has these cool things.2207

Hours and minutes (it just shows it here)--you can enter in 50 hours and 4 minutes; I can just pick a month.2210

It shows this whole calendar again.2217

And then, if I just click, it grabs the whole month.2219

Even though I click on a date, it just takes whatever month I have selected, and year (June of 2006).2221

And then, the week--see here, it is showing the number of weeks in the year.2229

So, let's go to the beginning of the year: January, week 1.2233

But then, if I go to December, there is week 52; so that is what that does--just lets you pick a week.2241

And again, it is just a type of week.2248

Here are some cool things you can do in HTML5 now.2253

Say you have an additionally type of input that you want, but there is not an HTML5 input type that is created for you.2256

Well, you can use the pattern attribute to specify--this is a regular expression, and you can specify a regular expression2266

that tells the browser what format to expect this data in.2275

And then, you don't give it a type.2279

You see: these other inputs have a type; this one does not.2281

And what it is going to do is default back to just the regular text input.2285

And then, it will (when it is supported) apply this regular expression.2290

So, this regular expression says, "Look for a character that is A, B, C, or D; and then, look for a digit; and look for 5 of those."2294

Anything that is not in that format will not be accepted.2305

A valid entry might be A345...five numbers...any five numbers.2310

But if I put something like E in here, that is going to violate the regular expression, and the browser will reject it.2320

And regular expressions are very powerful; I am not going to go into detail on them right now;2326

but you can set a lot of very cool specific types of forms using this very powerful pattern attribute.2332

And yes, note the lack of the input type.2342

It is an input, and it just defaults back to the text input style.2346

Placeholder text is very cool: this is something you used to have to do with JavaScript.2351

You have an email, and you want it to give an example of what it will look like.2358

You can get this placeholder, and then put this example text in there; and it will show you how it needs to be--what the example is.2365

Again, this is new, so it is not supported here in this browser.2375

But let's look in Opera; I believe Opera supports it.2380

Opera does not; it supports the email--you can see it is a little bit longer by default; but it doesn't support it.2387

What does support it, I know, at this point is Chrome.2394

Here is Chrome, and there is the (I'll zoom in a little for you) placeholder text.2398

It says name and example, and it is grayed out.2408

And then, when I click on it, it disappears, and I can type whatever; and what I have typed stays.2410

But then, if I delete it again and tap out, then the example text comes back.2417

This is very nifty, to have that functionality.2422

And you can put that, not just in email forms, but in any control that supports it (most controls do support it).2425

Datalist is another nifty new addition, where you want the user to be able to input anything they want.2436

But you might have a couple of very common suggestions that they might need to type in.2445

So, here is the example I am using: the salutation, your title.2451

You might want to type in Doctor or something like that, or just Mr.2458

And when this works correctly (let's see, I think Opera, again, supports it),2465

then you will get a little dropdown with some of the most common ones: Mr., Ms., Mrs., Miss, Dr....2474

But then, say that my title is President: I can type that in, and I am not limited by these options.2483

But if I am not a president, or something very uncommon, I can just click the default right there; and then I don't have to worry about it.2489

And normally, I would probably style this to be a bit smaller, as well.2498

The way you do a datalist is: it is similar to how you relate a label to an input.2504

You have this for attribute with the name that corresponds to an ID.2510

The same thing here--you have a datalist with an ID of Titles, and the input has the attribute list and then the ID of the Titles.2514

So, they are connected; the browser connects them.2523

And then, the datalist is formatted very much like a select menu, in that it has options that are inside of it.2525

And then, you just give them values; but it is a datalist--it is not a select menu.2531

Here are some cool things you can do with a text area.2538

I actually already talked about most of these, but you will see a title:2547

if I hover over it, the title shows up there; and that is an accessibility thing.2553

And it is sort of like, instead of example text in here, a title is sometimes2558

the more semantic way to go about indicating a little note that you want to put for that input.2562

Let's go back to selects; I showed you, at the beginning, a select for choosing, say, your favorite piece.2573

And up here at the beginning, it is just chess pieces, so you select your favorite one here.2586

But say you want to have more than just chess pieces; you also want to have checkers or assorted, various types of chess pieces--2594

not just chess--and you can pick whichever one of these you want.2604

This is what you would use an optgroup for.2609

And you put it inside the select, and it gives a little label, and then it groups everything underneath it.2613

I am not indenting these all, even though the next optgroup starts here, because the optgroup doesn't have a stop tag.2621

It is not the content; the optgroup is just right here.2630

But all of these are underneath it; and then, the next optgroup--you give it a label,2634

and then all the ones that follow are underneath that, until the next one.2639

I'll put a little line break there.2645

And it shows up like this--very cool.2648

And again, this is a newer thing, so I think Firefox probably will support it, but it may look a little different.2650

See, now you can't select the optgroup title; and in Firefox, it formats it slightly differently.2663

But you have the default there, and it is the semantic way of doing things.2671

OK, so I already talked about max length and read-only.2678

The last new thing that is new in HTML5 for form is the required attribute; it is a boolean.2682

Let's go up to the top here, with just these basic ones; and say that we want name to be required.2688

In the input, you can give the boolean attribute required.2696

And this is very cool, because now, where in the old days you had to put a little asterisk here and say 'required,'2701

and then use some JavaScript to check every single form to make sure that the required forms were all filled out,2710

now we will automatically know that this is required.2715

And ideally, if I fill it out and hit Submit, it is going to submit perfectly.2720

But say I fill these out, but I forget to fill out the required one (the name) and I hit Submit.2726

Yes, this isn't supporting it yet; but some won't submit (like I just did) and take you to the destination.2733

It will highlight this form that is required, that you didn't fill in.2745

I think Safari may actually support it; let's test it in Safari; there.2748

So, I didn't fill out the required field; and when I hit Send (I'll put some text in here and hit Send),2756

instead of submitting it, it just pops the focus up to the name element and indicates, "You need to fill this in before you can submit it."2765

Now, if I fill it in and submit it again, it will take me to...the page that doesn't exist; so you are getting this funny little error message.2775

And that is forms, pretty much--a good introduction.2784

There is a lot more that you can do with forms, but for now, until you get into more advanced things,2790

and until there is a lot more browser support for some of the fancier things going on, that is going to be a good introduction.2797

And keep looking at...this video, obviously, is going to get out of date pretty quickly as the browsers are updating their functionality.2805

So, you have the Opera way to use these date fields with this little...I think it is called an ugly-stick.2815

But that is just the way that Opera has decided to do it.2824

It is not in the specification how exactly to set this up.2825

So, Opera may change this; and the other browsers may come up with their own implementations.2828

Probably the best way to look at it is: just keep testing in newer versions of browsers, and see what they are implementing and how they are doing it.2833

But even if you don't have a lot of users using Opera, for example (it doesn't have a lot of the market share),2843

you still should use these elements, because they are backwards compatible, and it can be very helpful,2852

on the server side, to have your data set up in a way that it knows to be expecting it in a month/year format, etc.2858

And that is it for forms.2867

Thank you for watching

Welcome back to

We are going to look, really quickly, at the DOM today--just a basic introduction to it.0003

Most of the time, when you will be needing to know about the DOM, you will be using JavaScript.0007

But it is important to know what the DOM is, in order to make sure that,0011

when you do start using JavaScript, your HTML is going to be a framework that performs as expected0017

when you are using the JavaScript to navigate through the DOM.0024

DOM stands for Document Object Model, and it is the layout of all of the elements in the entire web page.0028

In a way, it is a logical layout that JavaScript creates, that it knows how to get to each node.0037

For the most part, it is just going to be important when you are dealing with JavaScript,0045

to interact with elements, or change elements, or just grab information from elements.0049

The DOM tree is built starting at the beginning of the HTML page with the HTML tag, or element.0058

And it goes through and just reads it linearly, one character at a time, from beginning to end.0066

And for every element that it runs into, it creates a node.0074

And then, when it runs into a child element of that, it creates another node; and so on and so forth, all the way down through the entire document.0078

It parses through and creates a big tree, sort of like a family tree.0087

This is a very basic example of a web page with some HTML.0092

And this would be what the tree would look like.0097

So, you have HTML at the root; and then you have two nodes here, head and body.0102

And an interesting thing about the DOM is that just regular text actually becomes nodes, as well,0107

so this text here, "Hello World" that is inside the title, actually becomes its own node, so that it is a child of the title element.0113

And the same thing down here: this word "Hello" becomes a node on its own,0122

then the em element, "World," and then this exclamation mark here also becomes a node.0127

For the most part, whitespace gets ignored.0133

So, the vocabulary to know is the tree (which refers to the entire document--the whole DOM tree--you are going to have one per document).0137

The nodes are each of the elements that the DOM creates as it goes through.0147

A branch would be, say, right here--this head--all of the things under the head are a branch coming out.0153

And then, the same thing here under the body--this is a branch.0159

Parent and child--just the standard relationships, going up and down; up is a parent; child is everything below it.0162

So, this p element has 1, 2, 3 children--three direct children, although this is also a descendent.0169

When you are talking about children, when you are navigating the DOM, usually you will want to get0178

a parent node, and then child nodes, because there is going to be an array of nodes.0186

There are a couple of ways to explore the DOM; let's look at some HTML really quickly.0196

This is a little web page that is just very simple; it is just two paragraphs--this one (with a little bit of emphasized text) and this one.0203

And you can explore the DOM in any page really easily in any browser that has an inspection tool.0213

Firefox--you can install the Firebug plug-in, which is really useful.0223

Chrome and Opera both come with an inspection tool that is automatically loaded.0228

So, this is Opera; and this is that web page that I just showed you.0232

Now, if I right-click on this heading right here, and then go down to Inspect Element and click on it, it is going to load up the inspection tool. 0248.1 And down here, it is actually showing (I am going to move this out of the way, because you don't need to think about this):0237

this is the document object model; this is the DOM tree for this page.0253

It is very simple; and you can see that it automatically collapses everything up.0259

And right now, at the root, you just have HTML.0264

And as you expand in, the head--if I click on it, the highlighting disappears, you will see, because the head is not visible in the page.0267

But then, if I click on the body, it highlights the entire content of the page.0277

And you can drill in, so this would be a first-level heading.0282

And you notice, I clicked on the little + to expand the content.0288

This browser conveniently clumps them together, even though they are separate nodes;0293

people don't tend to think about them that way, so it is very convenient that it puts it out like this.0299

And then, these two paragraphs are inside of a little div element.0305

And drilling down, you can see how this paragraph is broken into two parts.0312

And you can't actually read the text that is inside this em tag, because it is inside the tag.0319

This is the way that JavaSript is going to look at the page.0327

And you can use JavaScript to add nodes to the document on the fly, just going in and navigating around,0330

and creating or removing elements; and that will dynamically update.0340

There are a couple of other tools besides this Opera one I just showed:0347

I mentioned Firebug; any built-in browser inspect tool, like Chrome and Opera have...0354

Manually, you can open up the source to a page, and you can logically deduce what the DOM structure would be.0362

It usually follows the way that most people indent.0372

You see here: I have put one indentation here.0378

Everything that is one indentation from the HTML root element is a direct child of the HTML.0382

So, that is just head and body, all the way down.0388

And this is indented incorrectly; that should be tabbed over, and all of these should be tabbed in a little bit; now it is properly indented.0392

And then, you can see that this h1 and this div are the children of the body, etc., etc.0407

Now, this breaks down when you get to the text-level areas, usually,0414

because it is kind of awkward to take an element like this and put it out on its own line and indent it,0417

and then do the same thing with the text--although sometimes you will see indentation done this way.0422

This would be the way that, if you were thinking in terms of nodes--this would be the node indentation.0428

And I could break this out onto its own line, as well.0434

And you could do it so that every single line would be its own node, and then the indentation0436

would indicate how many nodes deep it is, or how many parents and descendents it has.0442

The last way to navigate through the DOM is through JavaScript.0449

And I am not going to go into detail on that right now.0455

But JavaScript has methods built in for you to, say, look at a node, and then move up a level,0458

move down a level, move into the children--you can say, "Go down to the fifth child of this element," and so on.0465

All right, and the last thing about DOM that I am going to talk about is just some basic introduction to some of the techniques.0474

There are multiple types of DOM's; it is very old technology.0488

But it started out just very simple--you could call it DOM 1.0.0495

It was basically like this: you have the documents (and this would be JavaScript, by the way), and then you set forms.0500

This would be if you were looking at it to target a particular form element.0508

And then, this bracketed area here indicates which form in the page it is.0512

So, if it is the first form, it would be 0, because computers count up starting from 0.0517

And then, it looks at all of the elements in the first form of the page.0522

And then, you can count through to the element that you want.0528

In this case, it would be the first one, again.0530

And if you had multiple forms on a page, you would put a different number here.0532

And if you wanted to get it the fifth element in a page, then you would put number 4 here, because it would count up to 4; that would be the fifth element.0535

And for a long time, that was the only way that you could really navigate through the DOM.0545

And that can be problematic, because especially nowadays, we have JavaScript and a lot of other applications0549

that are dynamically modifying the contents of a page.0557

So, what was the first form might no longer be the first form, after some changes take place.0561

It is also difficult when you are dealing with--say you have a little PHP script that is inserting a form into multiple places on a website.0567

And it could show up in all sorts of places; and it might show up in a page that has a form already in that page; or it might show up as the first form.0579

And so, this number is going to change, depending on which page it is showing up in,0587

which means you have to make your JavaScript different for every single context.0592

And it is not always easy, when you have a dynamically created web page like that, to know what the context is going to be ahead of time,0596

without doing it manually; and that kind of defeats the purpose.0603

They have come up with a couple of other versions of the DOM (2.0, 3.0, etc.).0609

And now, we have a lot more useful ways of navigating through the DOM with JavaScript.0615

This would be very simple: look at the document, and then child nodes would take all the child nodes of the document.0621

So, that is just going to be HTML at this point; 0 would be the first one.0631

And then, the child nodes of HTML--1 would be the second child node of HTML, which would probably be the body tag,0635

if you have been writing your code well-formed; and then the child nodes of that...0644

And again, it is a plural s here, because it is actually returning an array of all the children.0649

The child nodes of the body--this would be the second one, so maybe that is a header or something like that.0655

And this, if you put this into your JavaScript, is going to give it access to that element, whatever it is.0660

But again, it has the same weakness as this, because it is relative to where it is in the page.0665

And if that changes, dynamically or otherwise, or if it is just difficult to keep track of, it is not going to grab the same node as what you are expecting.0671

And another thing to note here is that, if your HTML is not well-formed, this is going to break, also.0682

All of this DOM navigation with JavaScript is going to break.0690

So, it is very important in your code that you are well-formed.0693

You don't want to have missing parts of your tag, because now, as I am doing this indentation,0697

all of this is suddenly going to be indented differently, because this didn't end.0704

And it is going to get confused about what is inside what, and the nesting is all wrong.0709

And your DOM navigation is going to break.0714

This is a pretty nifty little addition they have: you can access the first or the last child instead of just going by the child nodes.0720

You don't have to know which number it is.0728

So, obviously, 0 would be the first child, but there is not a way, using this syntax, to get the last child; you could just use this.0730

And then, this is where it gets really useful: you can grab it by particular attributes.0738

This skips all of the navigating through the nesting, and just goes directly to grab any element that has an ID of specialElement.0744

And you put in quotes the exact, case-sensitive name of the element.0755

And so, this would be like ID=specialElement, right?0760

You can do the same thing, getElementsByTagName.0764

Every single element with a paragraphElement tag will be returned with this; and it is going to be an array.0768

And then, className also is a very useful one, so you can set your own class, and it will grab all of them.0775

That is a basic introduction to the DOM.0781

If you want to know more about how to use this, you should look into JavaScript.0785

Thanks for watching

Welcome to

This lesson is going to look at offline application cache, or just offline cache for short.0002

And it is a way for you to control what elements are available to your website while it is offline, and store it in the browser cache; and it is new to HTML5.0007

I am just going to give an introduction to it--not a lot to go really in-depth.0018

But it is a fairly simple concept to understand; but dealing with all of the intricacies of server caching0023

and HTTP caching and browser caching, on top of the HTML5 offline application caching0030

(which is what this lesson is about) is going to be a little bit of complicated footwork.0036

It is like the game of Go: it takes a minute to learn and a lifetime to master.0042

The purpose of offline cache in HTML5 is just for applications, really--not for websites.0049

So, if you have a website that you are hoping to optimize the speed of, or decrease server load, or something like that,0059

you don't want to be using offline cache, because HTTP already does a great job of managing the memory and caching,0065

and uploading and downloading, and how long things take to expire, and all of that.0074

And if you are customizing on your own with this, you are likely going to break something, and you are going to make it less efficient.0077

But what this is for is when you have an application (say, for example, Gmail--that is a great example)0085

that you want to continue to work, even when there is not network access.0091

If you go to Gmail and disconnect your Internet, you will find that you can still click on emails, if you have recently viewed them.0095

And you can do a lot; the whole page doesn't just break.0102

And you can still see lists of things, and do a limited extent of things.0106

And then, when you reconnect service, you will be able to download your emails from network.0112

That is the sort of thing that this is for.0117

Gmail is more of an application that just a plain old website.0119

So, this is to manage that.0123

What really all this centers around is the app cache.0129

The app cache is a folder, or just a place in memory on your local computer,0134

that gets created when your browser detects that you are using a manifest file (we will talk about manifest files in a second).0141

This app cache is this just stored space on the hard drive; think of it as a folder on the hard drive0149

that it creates, and it puts all of the offline data that you tell it to put in there into that folder.0156

And then, it will be available when you are offline.0163

It will put anything that you tell it to put in there; and then, it will also put any page that references this manifest file.0167

So, any web page that talks about that same manifest file will be stored into that same app cache.0175

Now, there could be multiple app caches being created for multiple manifest files.0184

But the ones that use the same manifest file will be stored in the same app cache.0189

Think, "One manifest file corresponds to one app cache."0192

The same manifest file corresponds to the same app cache.0197

OK, the manifest file is a very simple text file on the server; it will have the .manifest extension.0203

And in your HTML page, you reference it with a little link; I will show you what that looks like--it looks like this.0211

Here is my HTML page, and I just have this little manifest= , and then you put the URL of your manifest.0224

In this example, the file name is example3, and the extension is .manifest.0231

Every file that you list in the manifest file--well, that you list to be cached--will be stored into the app cache that was created for this manifest file.0239

And then, files that are listed in particular sections of the manifest file (these three sections) will follow the rules.0253

Here are the three sections in your manifest file: the first one is cache, which is just the same as if you didn't even use a section.0262

If you didn't use a section, then it would just cache any file that you may list.0269

Or you can explicitly state that you want it to be in the cache section.0273

So, any files that you list in here will be cached; anything that you list in here--it follows a syntax of a file name,0277

or a location (relative to the manifest file, by the way), and then a space, and then another file name.0289

This is a fallback section; so it will first look for this on the network;0295

and if it can't find it, after the space it will use this, which should be cached.0300

And then, lastly, network: any file that you put here, it will always try and grab from the network.0305

And if you are not online, then it just won't be an available resource.0311

Before I go to look at the details in the examples, I just want to mention a few server-side considerations.0320

The manifest file that we are talking about has to be served with this MIME type.0329

If you don't serve it that way, then it is just going to cause a lot of headache, because it is not going to be working as a manifest file.0334

Secondly, if you are using Apache (a lot of web servers are using Apache;0343

you can set up your own on your own computer), then you can access the htaccess file.0347

Then, what you do is add this line right here, and it will automatically send it with this MIME type.0353

What it does is adds this MIME type to this file extension; it will happen automatically--you don't have to worry about it.0361

The other thing you want to do in your htaccess file is add these two lines.0367

What these will do is: it will turn off HTTP caching, and it will make it so that,0374

while you are developing, you are just dealing with the caching that you are creating.0381

You want to eliminate as many of these other variables as possible.0387

This is actually, if you put this in your root htaccess file, going to affect every single page in your entire website,0389

which is going to slow everything down; it is going to increase the bandwidth that is being pulled out of your server.0397

And so, you just want to put this in an htaccess file that is in the folder that you are working on.0403

And then, when you are done working on it, you want to delete these lines.0408

And also, actually, you will want to add these lines, as well, right here.0411

What this does is looks for these extensions: you will want to set any ones that you are working with.0417

I am working with HTML, the .manifest, and the PNG.0423

And then, you don't need to understand exactly what this does; just copy and paste it.0427

But max-age=10: that is not 10 seconds--I think this is a tenth of a second, actually; so add this line to the htaccess file, as well.0431

This is actually my htaccess file, right here; and you can see that I have added the type, so the manifest will automatically be sent with this MIME type.0447

And then, I have added this and this, as well, to try and delete all of the variables.0459

This is my HTML file, and it is just a simple HTML file with four PNG images.0466

And I have labeled them according to how my manifest file is going to set them up.0478

Again, the only thing that is special about this, to make it load the app cache, is this manifest attribute in the HTML element.0485

manifest= the manifest file here.0494

Now, what this does is: the browser is going to read this and creates an app cache when it sees this.0499

And it goes to the manifest file and reads it.0503

This is the manifest file; it is very, very simple--it is just text.0505

It always has to start with this cache manifest up in the top.0508

And this hash just means that this is a comment line; so anything here, the browser will ignore.0513

I have put a version number here; I will talk about why in a minute.0520

And then, I have my three sections: cache, network, and fallback, which I explained.0524

But I will show you some examples of how they really work, and then hopefully it will make more sense.0529

So, I am going to save this right now.0534

And you are going to be working with FTP, probably, when you are doing these connections.0536

Oops, cancel.0546

I am going to connect really quickly; OK, now I am connected to the server.0547

And then, go up to my folder that I have prepared.0552

And you can see, now that I have already uploaded these files onto the server, and they are the same:0562

this is the server over here, and this is my local hard drive.0569

And then, you can see: I just have the example HTML file, the manifest file.0573

My htaccess file is up here; and then, here are the four images; and it is the same thing over here--these are identical right now.0579

When we pull up the browser here, you can see what I have.0586

Now, this is online--this is live; and I have the four images.0592

Now, you will see, this last one is broken; and that is as it should be, because it is actually not specified in the cache manifest.0599

You see, I have 1, 2, and 3, and then a fallback for 3 to go to 1; fourth is not mentioned--that is why I put no comment here.0608

And so, what happens is: the first time you load the page, it will show up, because it hasn't read through the cache manifest yet.0617

But then, if you were to refresh, then it is going to go based off of the cache.0625

So, the first one that follows the rule will be cached and displayed.0629

The second one will be grabbed off the network; since you are online, it will show up fine.0634

The third one here refers to trying and getting image3.png.0638

And you are online, and the resource is available, so it works fine.0643

The fourth one is not specified in the cache manifest, so it doesn't load it at all.0647

This is another reason why you don't want to be using offline cache just for a cache of a website,0652

because if you ever forget to put a file in the cache manifest, then it is going to break,0659

even when you are online and it has access to it.0665

To demonstrate how this works, I have prepared this folder here called overwrite.0670

And if we go into it, I have four images that are almost the same as the other four.0676

They are the same file names and the same size; but they are green.0684

I am going to overwrite these white files on the server.0687

The files on the server just have these numbers that are white.0692

And then, I have just uploaded these new files onto the server, and replaced the old files; so these are actually green files now.0695

Now, when I refresh on the browser, what happens is: the first one, which was cached,0704

doesn't get an update from the server, because it just uses the cached one.0715

The second one is networked, so it grabs a new one from the server.0718

The third one is in the fallback section, so it is going to grab it from the server, if it can.0721

And since we are online, it was able to grab it from the server.0729

So, you can see that 2 and 3 got updated; 1 it retrieved from the cache; and then, this one is still not showing up.0732

Now, if we are going to work in a context where the Internet is off0744

(here is my Mac way to turn off the Internet; I just turned off the Internet),0749

now, when I reload here, the networked image, #2, just disappears,0756

because we are no longer on the Internet, and it can't access the resource.0765

Now, interestingly, fallback can't grab image #3 anymore from the Internet, so it defaults (falls back) to image1.0769

And that is why you see that.0779

And again, the one that wasn't mentioned just doesn't show up at all.0781

Let's turn the port back on and reload; and everything is back to normal.0785

Here are some interesting things we can do.0797

Say, instead of only image3 falling back, you want everything--every single file0800

on your whole page that doesn't work-- to default, if it can't find it, to image1.0807

That is kind of a silly thing to do; but for this example, it will work.0813

And let's delete this network one, as well.0819

What we have now: this slash just indicates any file--it is like the beginning of a directory, right?--0822

so, any file that is in the directory and every file that is in the directory.0828

So, I am saving it, and I am going to go to my FTP program and go back up.0831

And I am going to upload the manifest file; that is this file here that I just edited--re-upload it.0836

You can see: Directory listing successful.0844

And then, when we come here and refresh, it tries to grab all of them from the network first.0848

And all of them are available on the network, since we are online.0857

And remember, I uploaded all of the green images, so now it is grabbing all of them.0861

And it is grabbing the green version of all of them.0867

And if I refresh this again, you will see: #4 sometimes breaks and sometimes doesn't.0869

Now, if we disconnect the Internet again, they all get replaced with image1, because of the fallback rule created right here--very cool.0880

So, you can control a lot of interesting things with that.0895

Another thing that you might want to do is do the wildcard for network.0900

And what this does is: any file that it can find at all is going to be trying to grab from the network.0910

I am going to turn the Internet back on, and remember, I just edited this manifest file.0918

So, I am going to save it and make sure I re-upload it (directory listing successful; OK).0926

Now, it grabs all four from the Internet, because of this network here.0935

So, just to show you that I am not tricking you, I am going to upload those white images again and replace these green ones with the white ones.0940

And because the network wild card is set here, every single file will be downloaded from the Internet every time,0951

except for image1, which is in the cache, though.0960

So, now let's do one last little experiment.0967

Let's put all three of these in the cache, and we will just leave image4 as a control.0976

And so now, we want to update the manifest file and re-upload it to the server and refresh.0984

So now, it has these three that are being cached (the white images,0998

because that is what is on the server right now), because I have told all three to be cached.1003

Now, here is the tricky part: say I don't update the manifest file: and this is where this comes into play--this version that I put here.1009

Now, I am going to go back to these green images--right now, there are white images on the server.1017

I am going to put these green images back on and overwrite the files.1021

And then, I am going to refresh here.1025

OK, I just clicked it, and nothing changed.1028

The reason is because I didn't update the manifest file; and this is how it works.1031

When the browser comes to a page again (because you have reloaded it) it goes to the manifest file1039

and asks HTTP if there is a new version of the manifest file.1044

And because the manifest file is exactly the same--there are no changes to it,1050

HTTP says, "No, it is the same old manifest file, so there is no need for me to send it to you."1054

So, it is a very efficient thing.1060

But then, what the browser does is says, "OK, same manifest file--that means that all of the caching information is the same."1062

"So, I am just going to work off of the old app cache that I have."1070

So, it has these white images in the app cache from before, even though I have uploaded green images onto the server.1074

HTTP has the new images; and if the browser had asked for the images,1083

HTTP would have said, "Yes, there are new version of these images; I will send them to you."1088

But the browser didn't even ask for these images; it just asked for the manifest file.1093

And the manifest file was the same, so it assumes that all of the app cache files are the same, as well.1098

So, what we need to do, to get it to update (and this is only in a case where you haven't made any changes to the manifest file,1105

but you have made changes to some of the files that you want to be updated and have cached)1113

is: we just have to change any character--change anything in it.1117

And so, I am going to change this little version number.1120

This isn't anything officially in the specification; this is ignored, because it is a comment.1122

But what happened is: because I changed this one character now, the manifest file has been changed.1127

And we will upload it; directory listing successful; so now, when we refresh, it grabs the new images, because it knows that this is a different file.1136

HTTP says yes, it is a new manifest file; and it gives it to the browser.1154

The browser reads it and re-parses it, because it is new; it might have some changes.1159

And even though there aren't any changes that matter, it still re-downloads all of these images.1165

So, that is also a consideration--that you don't want the manifest file to be being changed,1173

unless you want all this to be re-downloaded and the app cache to be changed.1179

And that is pretty much the basics of offline application caching.1184

Thanks for watching

Welcome to

This lesson is going to be a brief overview of some of the different markup languages for the Web, and versions of HTML and XHTML.0002

I have condensed all of the versions of HTML, up through 3.2, into one slide,0017

because it wasn't really until after that that they coalesced into a version that really works for the Internet.0022

From the beginning of HTML, which started with Tim Berners-Lee having a little document that just gave some basics of HTML--0031

and you can consider that HTML1, although it was never officially created as a recommendation by any sort of governing body--0039

up through about 3.0, HTML was in a sort of rapid-fire updating process,0047

where implementers of browsers were creating HTML tags--for example, the image tag, and a lot of new things.0055

And there were browser-specific tags: the blank tag, and frames, and a lot of innovation going on.0065

And there was nothing to control it or organize it; and it was just all over the place.0071

There was an official HTML2 version; there was an official HTML3 version.0077

But it didn't really get codified into a standard until HTML 3.2.0082

They were just trying to catch up to all of the innovation that was happening up to that point.0089

And it was causing a lot of problems, as well, because there was not one type of code that you could write that would work in every browser.0093

So, HTML 3.2 was the first real version of HTML that set a standard that everybody could use.0101

And instead of taking the standpoint of trying to upgrade and add a lot of new features,0109

the w3c just wanted to codify the things that were in place already.0116

Tag soup is what people were using up until 3.2, really--and still use, to this day, actually.0124

Tag soup is not an actual version of HTML; it is what we call...basically, bad HTML.0132

It is when you are not aware of which version of HTML you are using.0137

So, it is poorly-written code that doesn't conform to a standard.0140

And it is called tag soup because any element can go anywhere.0144

The example that always gets used is the title tag, which always have to be underneath a child element of the header element.0149

But in tag soup, if you are a new web developer, and you don't really know what you are doing0158

(or you don't care what you are doing), you can put the title tag anywhere in the code.0163

It doesn't have to be in the head; it doesn't have to be in the body; it can just be free-floating.0167

And browsers will look at that and render it, and actually put the title correctly.0171

This is something that a lot of people use.0178

Here is...this is in Chrome, and this is just an example of tag soup.0184

I have this HTML here, and it is good HTML5 right now.0192

But let's mess up a doctype; you can write anything, or even just delete the doctype completely--0196

anything that is not a valid doctype will cause it to be tag soup.0205

You can take the title element, remove it, and put it in completely the wrong place.0209

Font tags are not really in the right place; so let's see what happens when I do this.0216

Refresh it, and nothing happened, because the browser is rendering it in quirks mode.0224

It recognizes that it is tag soup; it sees that things are in the wrong place; and it doesn't render it the way that it really should:0230

you would think, "The title tag is in the wrong place; there should be no title;0239

the font tag is up in the header, where it shouldn't even be showing up in the body."0242

All of this doesn't matter, because it is just rendering it in the best way it can; it does its best guess, and it is very forgiving.0247

Tag soup is actually not something you want to be getting into, though, because you are going to have really inconsistent rendering between browsers.0253

Every browser will render it differently; they try to be forgiving, but it also depends on the version--it will change it between versions.0266

So, this is what we mean when we say 'tag soup'; and it is really something to avoid.0275

If you are writing tag soup, you are doing it wrong.0279

The last note on this is that, even if you do have a valid doctype (in this example here, let's undo back to the beginning)--0286

say I have this title tag, and it is down in the wrong place, but I have a valid doctype here--it is still tag soup,0297

because the browser is going to look at the doctype and try and display the page according to the doctype that is set.0306

And it is going to see that it is wrong--it is not conforming--and it is just going to go into quirks mode.0316

So, your code is not compliant.0321

HTML 4.01 is really what made the Internet, as we know it today, possible.0327

Web 2.0 depends on HTML 4.01.0334

It really did a lot, in terms of making the HTML more semantic and making the Internet work in a way0338

that all browsers could use one piece of code, and you wouldn't have to write multiple versions for each browser.0346

And it helps with accessibility and a lot of things like this.0354

For example, it deprecated presentational elements like font.0359

"Deprecate" means you are not supposed to use it anymore, basically.0362

And HTML 4.01 came in three flavors: strict, transitional, and frameset.0365

These are the doctypes for the three flavors.0371

Now, they included a transitional here, which was to be for people that were upgrading from either tag soup or an older version, like 3.2.0376

And they still were using font tags and other things like this, that weren't quite up to 4.01 par.0387

But they were moving in the right direction, and they wanted to be able to have the browser render it0394

according to the new standard of 4.01, which was much better and not in quirks mode.0400

Transitional is HTML 4.01 that allows a lot of the deprecated elements.0406

Strict does not allow the deprecated elements, so if you have a font tag anywhere in your page, it is going to fail; it is not going to be valid.0411

And then, frameset was specifically for frames, which aren't really important anymore,0421

because nobody uses them; most people are just too annoyed by them.0426

But if you did have a frameset website, you would have to use this doctype--slightly different from the others.0431

After HTML 4.01, the World Wide Web Consortium (w3c) started working on XHTML.0441

And XHTML stands for Extensible HTML--Extensible Hyper Text Markup...0448

And it is actually just the same as HTML 4.01 (XHTML 1.0 was), but they implemented XML syntax.0455

XML is a language that is very common in computers, and it is very old, as well.0466

And by using this syntax, it made the Internet more compatible with a lot of different programs.0473

So, the major advantage was that, if you had XML-formatted documents that you wanted to include in your website, you could put them directly in.0482

And because it was valid XML, then it would parse right through it, and it would include it as part of the document.0493

SVG images and MathML are probably the most common examples of that, although actually, they are used fairly infrequently.0500

And that is probably due, at least in part, to some problems with XHTML that I will talk about in a bit.0511

The other things with XHTML are that XHTML needs to be sent with its own MIME type, a special XHTML MIME type;0518

and it enforces stricter syntax; so a lot of people really liked that XHTML would throw an error0525

directly onto the page if you, for example, forgot to put a closing tag on an element,0532

or if there was some other minor problem--there was a nesting problem, for example.0538

Anything like that could throw an error, and it would show up right away, and you would have to fix it.0544

So, it was very unforgiving; you couldn't get tag soup with XHTML.0549

If you wrote tag soup in XHTML, it would just break.0555

Let's look, really quickly, at an example of some XHTML.0561

This is XHTML; it is actually 1.1, which was a little bit more getting into the XML style of syntax than just 1.0.0566

And this doctype also specifies that it is using MathML and SVG.0579

And then, you will notice: a lot of XHTML websites have this in the top.0586

So, you will just have to copy and paste that to make sure you tell any XML reader0592

that might be reading through your code, other than a browser, what exactly this is and how to render it.0597

You will see: it looks pretty much the same as normal HTML.0603

This is kind of a rare example, in that I am using MathML and SVG, which most XHTML websites that you see will not use, actually.0607

But it is all the same sort of HTML tags you are used to.0618

And then, right here, we have this MathML thrown in; and this is its own sort of thing;0623

so this is following its own rules, and it renders it in a way that the browser can see that it is math.0629

You have this equation set up here, and this browser isn't putting the lines or anything;0640

but you can get very complicated math symbols using MathML.0650

And then, down here, you already saw the image: this is an SVG image--this section right here.0656

And it is in XML, and it specifies these three circles, and the colors are overlapping, and you can see how the colors interact with each other.0661

This is not an image that I have included; I can't right-click on this and save the image.0668

It is an SVG image, so you see it is defining these three circles.0672

Here is the first circle that is red; the second circle right here is blue; and then, it specifies the size and all of these other things.0677

And you can get very complicated with this, as well.0687

This is something you can't do in HTML, because this is XML format.0689

That is an advantage of XML: if you need to be using MathML, you will probably want to use XHTML.0701

Getting to some of the specifics of XHTML syntax (and if you break any of these rules, your page is going to fail to render):0711

the first one is that all XHTML elements and attributes have to be lowercase.0721

So, a lot of people will use uppercase for their tags and lowercase when they are writing;0726

XHTML requires you to use lowercase across the board, except in, for example, attribute names, like anything inside the quotes.0731

And of course, you can capitalize things that are not part of the code, like just a regular paragraph.0739

All elements have to be closed, even void elements.0746

We talked about elements that don't have any content to them--for example, the hr tag.0749

It doesn't have a closing element in HTML.0756

In XHTML, because it has to be valid XML syntax, it requires this closing tag.0758

And there is a shorthand notation where you can put the closing slash right in the opening tag, as well.0764

And you have to put a space here for some compatibility reasons.0772

But this is correct XHTML syntax; it is not correct HTML syntax.0776

So, any HTML up to 4.01--if you have this slash in here, it is going to be tag soup.0782

This was something that I had run into in the past, where if you are working with back-end code0793

that is using XML tools to generate HTML, it is really difficult to get them to generate it in HTML syntax, and not XML syntax.0799

And so, it would be creating a lot of HTML that was using XML syntax with these closing tags, where they weren't needed in HTML.0810

And our pages weren't validating, and it was causing quirks mode to be run, and it was a big mess.0820

And what ended up happening was: we had to go in and change it by hand every single time,0826

because they absolutely could not get the XML tool to remove the slash,0831

because it was XML, and it required the stricter syntax.0838

So, if you are using an XML tool like that, XHTML might be a good thing to use,0843

because then your XHTML will be still valid and syntactically correct, even if it is giving output that is in XML format.0848

Attribute values in XHTML have to be encased in quotes.0860

You are probably used to doing this anyway; it is good practice putting quotes around the values of an attribute.0863

This is actually valid in HTML, to not put the quotes--but in XHTML, it is required.0870

Boolean attributes may not be minimized in XHTML.0876

So, this is sort of a shorthand notation option selected that tells the browser that this would be selected.0880

And it is a boolean attribute, in that its value--you can't say yes or no; you can't say selected=false or selected=no.0888

It is just that if it is there, then it is true; if it is not there, then it is false.0897

And so, the way you have to do this in XHTML is selected='selected'.0901

You don't put selected='no' or false; if it is not there, just all of this--you just leave it out completely.0907

This is XHTML, and it is because you don't have anything like this, where it is just shorthand.0914

Every single attribute has to have the name and the value with an equal sign in between; and then, the value has to be in quotes.0921

And it is strictly enforced.0928

Also strictly enforced is correct nesting: so, in HTML, you might be able to get away with a span tag nesting improperly from this em tag here.0930

See, the em actually begins here and ends here, but the span begins over here, right?0940

That is not allowed in XHTML; you have to nest everything exactly properly,0947

which can also be a problem if, for example, you forget one tag in HTML.0953

It will, if it finds another closing tag to that later, kind of fix it.0958

And you might get away with the page still rendering pretty well.0964

In XHTML, it is going to see that right away; it is going to catch it, and it is going to point it out to you, and you are going to be able to fix it right away.0968

The main problem with XHTML (and this is a big problem) is that it needs to be sent to the browser from the server with this MIME type: application/xhtml/xml.0977

Anything else is incorrect; and the big problem with this is that Internet Explorer, all the way up to version Internet Explorer 8--0992

none of them support XHTML when sent with this MIME type.1003

If you try and do it, it may try and download the page; it will open a little Save dialog, because it doesn't recognize this MIME type.1008

Or it just breaks completely--you don't even get broken code.1016

You get no code; you get no content at all.1020

So, it is 100% broken in Internet Explorer; and the only way around it is that you send it improperly as text/h/html.1022

It is the wrong MIME type; and then, if you send it with the wrong MIME type, then you are getting it, and it is reading it as HTML.1033

And since XHTML is so similar to HTML, it usually renders correctly, and it will display the right way.1041

The problem with that is that you are losing all of the benefits of actually having XHTML as a code,1050

because what is happening is: you are sending it as text HTML, and the browser is reading it as text HTML.1056

It is seeing that it doesn't conform to a valid HTML doctype.1063

It will run into things like those self-closing tags or other things like that, or even just the wrong doctype at the beginning.1067

And it is going to just treat it as tag soup.1076

It may be completely valid XHTML; you may have spent hours and days trying to get this XHTML to be perfectly valid.1081

And it will be, but then as soon as you send it with the wrong MIME type, the browser is going to treat it like tag soup.1090

And you also will run into problems with some of the other benefits that I talked about of XHTML.1097

Now, there are different methods you can use to try and work your way around this,1104

where you can, for example, do content negotiation on the server, where the server asks what type of browser it is.1108

And if it is a browser that supports the XHTML MIME type, it will send it properly MIME-typed (the XHTML MIME type).1117

And then, if it is Internet Explorer, it will send it as text HTML.1124

And there are a lot of other tricks like that that you can employ.1128

They are all very complicated; they don't work 100%; and they all have the common flaw where you are still sending the wrong MIME type to Internet Explorer.1131

And because Internet Explorer just doesn't support it, most people end up just sending it as text HTML,1142

which is really very sad, because XHTML is good.1149

It is not necessarily any better than HTML; it just was its own unique sort of solution to some problems.1153

XHTML2 is actually worse off than XHTML1 and 1.1, because it is not backwards compatible.1164

If you write XHTML1, and then try and give it an XHTML2 doctype, it won't work.1172

If you write XHTML2, it won't work backwards-compatibly, either.1179

So, it is just almost completely useless, because there was no support for it; it broke existing pages; and it was just a big mess.1183

And it kind of had the idea that they were going to do away with all of the problems of the past.1194

They weren't going to worry about being backwards compatible, or tied down by old problems--historical things.1201

They were just going to make perfect code from the outset, the way that it should have been.1205

But it just never caught on, because it didn't work.1210

You would have had to completely redo everything, and it was just too much effort; so nobody ever did it.1216

They actually abandoned development of XHTML2; I don't think it ever even reached a conclusion--the final specification never went through.1223

They abandoned it and decided to put their efforts into HTML5 now.1233

And by "they," I mean the World Wide Web Consortium, W3C.1238

HTML5 is the newest version of HTML; it doesn't have a space between the L and the 5.1244

That is just the way that they are doing it now; they were considering, probably, that now you can do a search for this single term,1255

and it is going to show up (instead of finding every page that has the number 5 and the letters HTML in it).1263

And HTML5 is still in development; it won't be officially, completely done until 2022 (that is when the recommendation is to be finished).1270

But that requires, I think, three working versions; and that is kind of an imaginary date,1283

because, for example, even going back to HTML 3.2, there are some things that never even got implemented from 3.2,1290

just because browsers never got around to implementing them.1299

What matters is that browser vendors and user agents are implementing HTML5 things now--so, it is already usable now.1302

And the date that really matters is that the candidate recommendation status will be attained in 2012,1312

if everything goes according to plan (and it looks like it is on track to do that).1318

In 2012, that basically means that the specification is done; they are not adding to it or changing it anymore.1321

And it is just up to the browsers to continue implementing it and getting it right.1328

But this entire course, I have been teaching as much HTML5 as possible, because you can use it now.1335

And it is being implemented very quickly; in the next few years (probably before 2012), a lot more of it is going to be implemented.1342

So, it is worth learning HTML5 and using it now, although the majority of websites that are mainstream nowadays1350

are going to be using an older version of HTML or XHTML.1358

The last thing that I am going to show you today is how to validate your page.1366

You want to be writing with a specific HTML version (or XHTML version) in mind; otherwise, you are writing tag soup.1372

So, you need to be aware of what is allowed and what is not allowed.1380

I am going to recommend that you just always write in HTML5, because it is by far the best version to date.1384

Something I forgot to mention in this last slide is that HTML5 allows XHTML syntax.1394

So, if you are in a place where, for example, the XML tool is outputting generated code that is XML format,1402

the web page is not going to get confused and break, because you are allowed to have XHTML syntax or HTML syntax.1411

Because you can have both of those together, it really clears up a lot of the problems between XML and HTML; it is a good solution.1422

So, validating: you are going to want to always validate your document, and make sure that it is valid for a certain document type definition.1431

If you are doing HTML5, that is great; if you are doing HTML 3.2, that is fine, as well.1442

HTML 3.2 uses font tags and a lot of other things that I will talk about as being bad.1447

But if you are using that document type, it is OK: it is valid.1453

And there are reasons to be using older doctypes like that: legacy code and things like this.1458

But what is important is that you are valid to a doctype.1467

Now, you still can't just use a validator to get out of work; you still have to understand a lot about what is required in your doctype.1471

For example, there are a lot of semantic things in HTML 4 and 5;1481

for example, the <b> tag--if you are using the b tag as a bold tag in HTML5, you are not using it correctly.1487

And so, validation is just a start to writing good code; it is not the end.1496

But it is also very, very helpful.1503

This is the validator provided by the w3c, and it is very helpful.1507

It will validate all kinds of documents from the early HTML versions all the way up to HTML5,1512

even though, at this point, it is still experimental; and it will be updated with the final version when it becomes a candidate recommendation.1520

So, if we were going to go to the w3c website here, this is what it looks like.1528

And you have three options: you can validate by putting in the URL of your website...1535

So, if we wanted to, right now, we could...let's validate, since they are a website that does a lot of web development and stuff.1543

It has actually failed; it tells you right up here that it is XHTML 1.0; it is a transitional version of that doctype.1555

And it will tell you exactly what the problem is.1565

This is another reason why you really need to understand the version that you are working with,1572

because these problems aren't necessarily that easy to understand.1577

It will give you a good explanation that it thinks might be helpful;1582

but in this case, it looks like there is a paragraph element that is just in the wrong place.1589

You would have to know, for example, where paragraph tags are allowed; you can't just have guess-and-check on this.1599

Let's go back--it is kind of embarrassing that they failed that, but it is probably just a typo that they will be correcting soon.1609

You can also upload a file, if you have it on your hard drive and you haven't put it on the Internet yet.1618

You can just click here and upload.1621

And then, what I find very useful for validating is direct input.1623

Say I have this code right here, this XHTML that I showed you.1629

I am going to copy all of it, including the doctype; and I am going to paste it in and check it.1634

And so, it checks it, and it gives me this nice little green message telling me that I have done it correctly.1643

And it automatically detected that it is XHTML 1.1, based on the doctype here.1650

And it has also looked at the encoding and a lot of other things automatically.1655

And it checks for a lot of different problems.1660

Another thing that you can do on here is use HTML Tidy to clean up your code for you,1664

if you have really messy code--if you have tag soup you are working with.1668

And there are some other options here, but that is the most important thing: just being able to validate.1672

And then, go through; find all of your problems; and then correct them.1681

And then, put it in the validator again; run it again; see if there are more problems; and keep doing that until it is clean.1686

So right now, you will notice: it is good, but it has three warnings.1691

And warnings are things that aren't technically wrong, but might be wrong--1696

for example, no character encoding declared at the document level.1700

That could lead to problems, theoretically, if I haven't declared a character type,1705

and a browser is expecting something, or doesn't know, or maybe I have pasted in the wrong kind.1711

This could lead to an example where you go to a web page, and it just has funny, crazy nonsense, because your character type is wrong.1717

But probably it will be OK; so that is why it is just a warning.1726

And the warnings, you want to look at, and make sure that, if you are throwing a warning,1731

you are doing it intentionally (and not just because you are lazy or you don't know what you are doing).1737

And that is all the versions of HTML and XHTML that are important, up to this point, for developing websites.1741

And it is important, especially, to know the difference between these--even if you are just always going to be coding in HTML5--1752

because you will sometimes run into code that is in another version, and you don't want1758

to get confused when suddenly you see a self-closing tag, or you see a tag1763

that is from an older version of HTML or a newer version of HTML,1767

and if you put it in, it is going to break your version of HTML.1770

It is just important to be aware of some of these.1774

And thanks for watching

Welcome back to

Today's lesson on HTML and Elements and Attributes is going to cover just some of the basic syntax for elements and attributes.0002

Let's get started: Even though a proper use of the elements and attributes isn't technically a matter of syntax,0012

I am including it here because, if you use elements the wrong way, it is still non-conforming--which means you're wrong.0022

So, it will not actually break the browser, but your code is not correct.0030

The HTML5 working group defines all elements and attributes in a specific way, so that they have certain meanings; it is called semantics.0035

And if you use an element or an attribute for any purpose other than what it is meant to be used for, then your code will be non-conforming.0044

So, you need to remember to keep semantics in mind and code correctly.0053

You have to use the HTML5 spec elements and attributes; you can't make up your own and use ones from other specifications.0060

Here is an example of two headlines: and Learn From the Top Instructors in America.0066

And they are both directly underneath the body element.0075

Now, this is actually semantically wrong, because this second header here is not a subsection heading.0078

It is more like a subtitle than anything else.0087

But what each one of these two tags are indicating is that it is beginning a new subsection.0091

To correct this, we would need to add another tag here, called <hgroup>, and then close it out here...stop hgroup.0097

And now, it is semantically correct, and the code is conforming.0115

The syntax for normal HTML elements is fairly simple.0122

It always consists of a start tag (which is this <strong>), and then the content0126

(which is what is between the start and the end tag), and the end tag.0131

And for normal HTML elements, that is the syntax.0136

You consider all of it the element, and then there are two tags: the start tag and the end tag,0142

although most people use the word "tag" and the word "element" interchangeably.0147

Let's look at an example, really quickly, of how to code a basic element.0154

We are going to do just the same thing as before: we are using the <strong> element.0165

And you will see that the text editor I am using automatically changes the color.0176

Your text editor doesn't necessarily have to do that.0181

And if we load it up in our browser, we can see that the text shows up.0185

The elements themselves don't show up--just the content of the element.0193

So now, let's look at void HTML elements, which are like normal elements, except they don't actually have any content to them.0205

They don't require an end tag; you can also call them self-closing tags.0213

And an example--probably the one you will use the most--is the <br> tag, which inserts a line break into the text.0216

Here, we have this little <br> tag inserted right before the word line.0224

And what it is going to do is create a line break in the browser.0229

And you will notice that, over here, there is no stop br; that is just because there is no content.0234

It doesn't encapsulate a certain amount of text; it is what it is.0240

The void HTML elements you will probably use the most will be the br tag, the hr tag (which stands for horizontal rule),0243

the image tag (which is probably one of the most important, because it allows you to include images--0255

it should be obvious why the image tag doesn't encapsulate any text; it just gives you the address to an image),0260

and then the input tag (when you get into forms and just have an input tag,0268

it doesn't have any content to it besides what you put in the attributes).0271

This is an exhaustive list of all the void elements, but don't worry about memorizing it right now.0277

What will happen is: when you need to use it, you will find out what it is, maybe from references like the HTML5 specifications, etc.0282

But as you learn the tags, you will learn what these different things are.0293

But the ones that I have indicated here are probably the most important.0297

Let's look, really quickly, at what it would look like to use a self-closing tag.0300

Let's say this warning here has a little sentence following it that says something like "This text has a <br> line break."0311

Now, you will see that it is showing up next to the strong Warning, right next to it.0335

And then, it breaks over right before the word "line."0341

Now, let's say I don't want it to be on the same line like that.0346

I can come in here and add another <br> above, and refresh again, and it pops down onto its own level.0349

That is how these tags usually work.0362

HTML comments are actually not something that the user is going to see;0374

but it is something that ends up being very useful for yourself (for self-notes), or for other web developers.0379

And it is sort of like an element, except that it has this special beginning, where you have the exclamation mark and two dashes.0384

And then, everything between that and then the two dashes and the closing > will be hidden from view for the user.0392

The browser will just read this, and then it will move on until it finds this pattern of text; and it will ignore everything else that it comes across.0400

Let's look, really quickly, at our code, to see what that would look like.0411

Now, if you are following along, you should know what is going to happen when I refresh here.0425

Nothing happens, because the text is hidden.0433

HTML attributes are a way of giving additional information to an element that describes additional functionality, behavior, or just information.0448

In this example, we have a link to

So, looking at it, you can see that this is the start tag, and this is the end tag.0462

This tag is between these two carats, here and here; but it has, additionally, an attribute.0472

And the attribute consists of...well, this entire thing here is the attribute.0479

But it is broken down into a name here, and the value of the attribute, and they are linked with a little equals sign (so the name equals the value).0486

And so, in this case, href is the name of the attribute (which stands for hyper reference, which just means it is a hyperlink).0498

And then, the value is the URL that the hyperlink is going to.0506

The browser is going to take this Educator word, and it is going to make it an anchor tag; it is going to make it anchored.0510

And then, it is going to make it a hyper reference to the URL

Let's see what that looks like: first, let's just have the anchor tag by itself.0525

This is a placeholder link without the attribute.0530

When you put your cursor over it, it actually doesn't look that much different; and when I click on it, nothing happens.0544

But if we were to add the attribute in here, then we will see how it really works.0551

This is just simple right now, and I am not following some of the best practices of indentation.0561

It is just to give you a quick look at how this works out.0568

I am tabbing back over to the browser; when we refresh, you can now see that it is an underlined link.0572

And if you put your cursor over it, you can see: down at the bottom, the URL shows up.0579

And if I click on it, it will take us to

In attributes, we can encapsulate the value with double quotes or single quotes or no quotes.0589

It is probably best practice to just do double quotes; it makes you save some time, because there are certain circumstances0597

where it will break if you don't use quotes--for example, if there is a space in the value, or other things like that.0603

You can also use as many attributes as you need to; just put them in the start tag and following a space.0609

Whitespace is a little bit counterintuitive to what you might think of in browsers,0623

because the browser will actually take as many whitespace characters as it finds in the code,0628

that are adjacent to each other, and collapse them into one space.0635

Let me pull up an example to make this a little bit more clear.0639

And you can probably see some of this happening already.0643

I am going to insert a few line breaks here, and then I am going to type a bunch of spaces, and then a whole bunch more spaces.0647

Now, what the browser is going to do in reading this code: it is going to take all these spaces here and collapse them into one space.0659

It's going to take all of these spaces and all of these line breaks up to here and collapse them into one space.0666

Just because I hit a carriage return here, it is not actually going to put a line break in; that is what this tag does.0673

And it is not going to use these spaces to put padding out between the words, or in front of a word.0680

It should just pop up by itself.0688

I just entered the words "hello world" here, and when I hit refresh, think about where it is going to show up.0694

OK, if you thought that it was going to show up down below, that is because you are thinking in terms of the way that Microsoft Word works.0706

But the code actually gets condensed.0712

OK, let's go to the next slide.0722

The last slide for today is HTML character codes; and this is for when you have weird characters,0728

that are nonstandard, that you need to include in your web page.0736

If you just try and paste them in--say, from Microsoft Word, or from some other location, it might just show up like nonsense in your page.0743

But that is why we have these special character codes.0751

For example, the registered trademark symbol--the code for it is ampersand, reg, semicolon.0755

And the browser will read this and create a little registered trademark symbol, instead of typing out these letters.0764

If you try to just paste it in, then--especially because the Internet deals with a lot of different computers0774

of different ages, different operating systems, different character sets, and different regions across the world,0779

It is going to show up differently in different places, and it is just going to be a mess.0786

But this allows you some reliable way to make it show up the same way in every browser, in every instance.0789

Let's clear this out and start over: let's say you wanted to type the 'a' character, with a little tilde accent above it.0800

The HTML code for that would be a, tilde, semicolon.0813

So, it starts with the ampersand; it always with the ampersand, and always ends with the semicolon.0820

Now, if we look at the browser and refresh it, you will see the a with the tilde.0826

Now, there are also two other ways that you can do this.0832

For the more common ones, you have the actual name written out, but you also have character codes that are just numeric.0836

So, it just happens that the numeric code for this one is 227, and it shows up just the same.0844

The ampersand is followed by a pound sign, in this case.0855

And then, there are also hexadecimal codes; and the hexadecimal for this one is ampersand, pound,0858

and then the hexadecimals have a little 'x' in front of them, and the code is E3; always end with a semicolon.0865

And refresh, and it will show up the same.0873

Now, these are the sort of things that you don't usually memorize.0876

You just sort of look them up when you need them for special cases.0879

So, if, say, your name has an ã in it, you are probably going to memorize this.0883

A couple other important ones are: every time you have an ampersand that you want to show up in your code,0888

you need to actually escape it by giving the character code for it.0895

And so, you just write &amp;, like this.0898

And then, another one that can be useful sometimes is the nonbreaking space; nbsp is a nonbreaking space.0906

And if I tab over and refresh, it won't show up, because it is a space; there it is.0914

But what it helps you do is: if you have something like a word,0920

and then another word that you don't want to be broken onto the next line,0928

if it wraps, then this nonbreaking space will show up as a space, but it counts as a character that is part of the word.0931

So, the browser will sort of see this entire thing as one word.0941

And it will keep it from wrapping onto the next line.0945

It looks just like a normal space here.0950

Let's look at some examples now to test how well you have been paying attention.0957

This is a basic element with a start tag and an end tag.0962

One of these is correct, and all of the rest are wrong.0969

You should be able to tell right away which one is right.0971

This one doesn't have an end tag; this one is correct; so is this one.0977

This one doesn't have the beginning carat here; and then this one is just totally wrong.0986

So, hopefully you got that one right; that was an easy starter.0993

Let's look down here: now, one of these is a correct usage of self-closing tags.0997

I kind of gave it away by calling it self-closing: this is not needed, because it is already closed--it closes itself.1010

This is maybe what you might think to do, encapsulating the text with the close br, but that is not necessary; it closes itself.1017

This is the right one--now, here is something interesting.1026

This line right here--this syntax is actually also correct; it goes back to XHTML, that needs to close itself.1029

So, sometimes you will see, in code, tags that self-close, and they will have this little slash.1037

It is not necessary; it is optional; and it is a valid syntax in HTML5, but unless you are writing XHTML, you probably don't need to worry about doing that.1042

Let's look at the next example: now, this is going to test your knowledge of attributes.1057

Look at these and see which one is correct and which ones are wrong.1064

OK, there are actually several that are correct.1072

You may think that this is wrong, because it doesn't have a quote.1077

But it doesn't have a space in it--it doesn't have any weird characters--so it is actually valid to have the name and the value set up like this, without a quote.1080

You can also do it with just a single quote, or with double quotes.1091

Double quotes are not showing up here, but if you put double quotes for all these other ones, they would be valid.1095

Now, this one: we have an element with multiple attributes.1101

And even though there is a line break in here, that is still all right, because whitespace, line breaks, and spaces condense into just the same sort of thing.1109

Now, done here is where we got it wrong.1120

In this one, we have the attribute actually plugged into the closing tag, instead of the starting tag; that is incorrect.1122

And then, here we forgot to put an equal sign, which is incorrect.1130

And even if we had put quotes in here, it still would be incorrect, because you need the equal sign.1134

Here is another example for you: can you tell what is wrong with this?1143

This actually isn't a syntax error; this goes back to semantics: h2 is a heading.1149

Actually, let's copy this text and put it into our browser and see what it looks like.1155

"I can't believe how


this is!"1170

So, it looks great, right?--if that is the way you wanted it to look.1173

But it is actually wrong, because the h2 element is a heading, and you are using it here for emphasis.1178

That is syntactically incorrect, and it is a non-conforming document.1188

A better use would be something like em, and then you can use CSS to come back and give it that huge look,1193

if you wanted to; although I think that would be a silly thing to do...but it's your website.1203

OK, this is a comment, and it has a little sub-comment inside of it; and then it finishes off; and this should look like this, actually.1209

The mistake here is: the browser is going to recognize this, and then it is going to search for the closing of that.1221

And it is going to get all the way to here, and then it is going to think that the comment is done.1228

So, it is going to think this is the comment; and then this is going to actually show up on your page, if you code it this way.1233

You can't nest comments, so we need to delete that.1238

And the last example is a whitespace example.1246

The question is, "Which of these will show up differently?"1250

Most of them are going to show up exactly the same; which ones will actually show up differently?1254

Let's show you: let's highlight all of them and look.1260

Let's save it. So, here is what happened: the last two, this one and this one, both had line breaks in the middle of them.1269

All the rest showed up exactly the same, and that is because the whitespace is collapsing in all of these.1282

Even though this has a line break, this has a line break and several space characters...1288

this one has a line break much like this one, but it is actually a line break that is entered in with the code; it is not whitespace.1293

And this is the same thing, with a space character set in between.1300

That concludes the lesson on attributes and elements today; thanks for watching!1304

Welcome to

This lesson is going to be on some principles of web development--sort of high-level things0002

that you need to keep in mind for when you are developing and planning a website--0008

and when you are in the individual coding, how you are going to encode so that the site0013

is going to come across to all your users in a way that really works well,0019

no matter what sort of browser they are using, or who they are, or even if they are not necessarily users,0025

but spiders or web crawlers or some other sort of an application.0031

The cardinal goal of web development is interoperability.0038

You want your website to work in every context that it possibly can.0047

The principle is that your website should operate across lots of different user agents, platforms, devices--everything.0053

That is kind of the point of the Internet.0060

When Tim Berners-Lee thought of it, back in the early 90's, this was one of the things that he had in mind:0062

just having a document that would open in any computer.0068

You wouldn't need a particular computer; you wouldn't need a particular program.0073

There can be multiple web browsers; there can be multiple user agents.0077

So, this is sort of the guiding thing that everything else is based on.0081

And if you do design your websites to be interoperable, then what this does is:0086

it will prevent the Internet from fragmenting into different, incompatible browsers and devices.0090

And eventually, what will happen if this fragmentation occurs is: you don't have one Web anymore.0096

You have to have multiple Webs, depending on which application you are coding for and things like that.0104

That is exactly what happened in the 90's.0109

You may have, if you have been on the Internet in the 90's, seen things like this,0113

that say, "This website is best viewed in Internet Explorer" or "Netscape, and please download" Netscape or Internet Explorer,0116

because if you don't have Netscape, and I am coding for Netscape, then it is going to look wrong; or it is not going to work at all.0124

And some web developers even put in code that blocked content from the browser that they didn't code for.0131

And it sort of fragmented the Web, and it caused a lot of pain for Web developers and users.0140

The idea is that the same code should work for all devices.0148

One Internet, one code, one website--you don't have to duplicate things: that is the goal; that is interoperability.0152

And this is possible now, since 2000: all major browsers will support the standards that the w3c recommendations have put forward-- especially HTML 4.01.0161

And now, HTML5 is rolling along, as well.0173

So, this is possible now; and it means that you need to code according to the standards, and with all these other design principles in mind.0176

If you have a website, it is clear, of course, that it is going to work on your computer and in the browser that you use.0188

That is just obvious, because you are going to be developing it, and that is going to be what comes naturally.0194

You are going to get it to look right in the browser you are using on your computer.0199

But you need to also check a lot of these other things.0202

It needs to also work in all the other browsers that you can install on your computer.0205

This is just the basic, easiest thing: if you have a PC, you can install Safari, Firefox,0210

Internet Explorer, Chrome--as many browsers as possible--Opera...and check it in all of them, and older versions, as well.0216

You also want to make sure that your website looks good and works in other screen resolutions.0226

Older users may have smaller screen resolutions, 800x600 or even smaller.0232

Some users have very, very large screen resolutions; websites can look funny like that.0237

And you also have to keep in mind that mobile devices may have very tiny screen resolutions.0242

It needs to work in other operating systems; so you will want to check that if you can;0248

and of course, in other browsers in other operating systems; and in different Internet speeds.0251

You don't want people who have very slow computers to be completely unable to access your website,0259

because it is so graphics-intensive, so you need to keep in mind bandwidth.0263

And then, you have to keep in mind other types of devices.0268

You may be thinking of the basic desktop computer, PC, or Mac, or Linux.0271

But then, if you are not keeping in mind smartphones, ebook readers, things like webTV (which isn't really around anymore,0276

but there is a chance that there may be new devices that are similar to it)...there are tablet devices; there are old things0282

that aren't around anymore like webTV; and then future devices that haven't even come around yet;0292

if you code your website according to a standard, it should be future-compatible, and it should work with future devices.0298

The point is that you need to be thinking in terms of interoperability--not just what looks good on what you can test;0305

but you need to make it look good on everything that you could possibly imagine.0312

And you don't want to be coding hacks and things like this that are going to cause it to break0315

in future devices that you don't know about, old devices you don't know about, or even current devices that you don't know about.0320

And then, of course, there are different types of user agents.0326

There is not just browsers that are going to be using your website.0328

There are screen readers for the blind (for example), web crawlers and other robots (like Google crawlers, spiders...),0331

special mobile device browsers for Android, or even older phones that aren't quite as fancy, and then text-only browsers.0339

Lynx is a famous example of that.0347

You have to keep all of this stuff in mind.0349

The next major principle is backwards compatibility; and there are a couple of different aspects of this.0354

Your website, of course, should be backwards compatible with older browsers.0360

Your code, in terms of code, should be compatible with older technology.0366

And of course, the importance of the technology decreases as it gets older, and as its user base decreases.0372

Something like Internet Explorer 2 probably doesn't matter if your website works in it,0379

because nobody is going to be using that--very, very few people are going to be using that.0384

And if they did, they probably are used to it having broken websites.0388

But you can't think about it just in terms of your user base, because it may be that you may say,0394

"Oh, none of my users use Internet Explorer"; well, maybe it is because your website breaks in Internet Explorer.0401

It is sort of like if none of your customers use wheelchairs, that doesn't mean that you don't have to install a ramp.0407

It might mean that you do need to install a ramp, so that some of your customers...0412

You may have been losing customers who haven't been able to access your store without the ramp.0417

The same sort of thing: if you are just looking at statistics, and saying, "Oh, my users don't need this;0422

I am not going to support it," that is sort of a fallacy.0428

You need to try and support as many things as possible.0432

The other aspect of backwards compatibility is in terms of increasing the technology.0434

New versions of languages, new user agents, and things like this are designed to not break old stuff.0440

So, when Internet Explorer 8 came out, it was a big thing that people worried it was going to break the Web,0447

because it was going from the buggy implementation and a broken box model0452

to correcting it and being more standards-compliant, which was really great.0458

But all of the people that had been coding for the old broken ways in Internet Explorer--0461

suddenly, their websites wouldn't work in Internet Explorer 8, and it was called "breaking the Web."0466

And it sort of is a conflict, because on the one hand, it is increasing its adherence to standards and making the Web more interoperable.0471

But on the other hand, it was making poorly-coded websites not able to continue working in Internet Explorer without additional hacks.0479

So, that is why you will see in I.E. 8: there is a little button that you can press to toggle to I.E. 7 mode and I.E. 8 mode,0489

because they don't want to break the Web; they wanted it to still work.0498

And it is kind of a terrible solution, but hopefully we will not have to deal with that for much longer.0502

That is just to illustrate that, if you are coding according to a standard, then browser vendors0509

and new versions of languages are going to have in mind the way that you have been coding.0515

And they will try, as best they can, to keep your code (that was coded correctly) working, even with the advances in technology.0519

It is good not to do tricky things or broken things; don't write tag soup, etc.0528

XHTML 2 was not backwards compliant, and because of that, nobody wanted to use it.0534

And it failed, and they had to stop developing it.0540

And XHTML 2 never took off, for that reason.0543

This right here is the tag that you can put in your website if it breaks in Internet Explorer 8, but worked in Internet Explorer 7.0547

They had to kind of create this meta tag; and this makes your website work as if it is in I.E. 7.0557

So, it wasn't completely backwards compatible; so they had to go to great lengths to make it work.0566

Forward compatibility is just as important: your code needs to be done in a way that it will continue to work, as technologies advance.0575

In that last example, with people who coded specifically for Internet Explorer 7--they weren't coding with the future in mind.0583

And so, when Internet Explorer 8 advanced things and really improved things, their code broke.0589

It was not future compatible; that is the other side of it, and that is where coding to standards really helps (even though they will try and be backwards compatible).0594

But if you can conform to a standard, that will really help your future compatibility.0605

Accessibility is related to these; and the idea is that your content should be accessible, not only to people, but to programs, as well.0613

All of the programs that I listed that you want to be interoperable with need to also be accessible,0627

meaning, for example: if you are sniffing the browser (using JavaScript to detect what the browser is maybe using--the user agent),0632

and then denying content to that browser, based on it saying,0640

"This browser can't handle my code; I am just going to not send it to it," that is not accessible.0645

Or if you are creating code that works in the browsers that support it;0650

but when it comes to a browser that doesn't support it, it breaks in a way that the browser can't even handle the information...0654

An example would be if you are sending XHTML to the Internet Explorer, and it is served as XHTML,0660

with this XHTML MIME tag (which is the correct way to do it),0667

Internet Explorer does not know what to do with XHTML when served as XHTML.0670

And it will just fail to render the web page completely.0677

It will give you a little download box, or just an error message, and it won't get the content at all.0680

But more common of a consideration is making your website accessible to people, especially people with disabilities.0685

And blind people is the typical example, because it kind of simplifies things and makes it very easy.0696

But it has to do with everything.0701

And just in general, writing your code semantically will make it more accessible,0704

because again, HTML will define the meaning; and then, the various user agents can understand that meaning0708

and give it to the user in a way that makes sense, if it is semantic, instead of trying to go through0715

and figure out what it means, and present content.0723

If it doesn't know what the content is, it doesn't know how to present it; and that can cause problems.0726

A couple of examples for making your website accessible are: both the content and the navigation0732

shouldn't depend purely on visual information or styles, when possible.0738

So, if you have a blind user, and they want to navigate through your website,0742

if that doesn't come across textually--if their screen reader can't find the navigation--0750

if it is all very visual--they are not going to be able to see to click, and it is not going to be accessible.0755

So, you need to have a list of links (that would be a good thing); and the same thing with content.0761

You can't have too much visual content, unless it is the sort of website that is designed...0766

say it is a gallery of photos; obviously, a blind person is not going to be able to see your gallery of photos.0772

But what you can do is give your photos alternate text that will describe what the photograph is.0779

And then, if they are going through a screen reader, they can listen to it, saying,0785

"Photograph of a lake," or whatever it is, and they will have an idea of what your website is about; and that is more accessible.0789

Lastly, pages should be navigable without a mouse, which means that if you hit Tab and go through,0799

it will tab from one link to the next, and to buttons and other form elements.0806

And you should be able to go all the way through your entire website without using a mouse at all--just using Tab and the keyboard.0811

And that will make it more accessible.0817

The same thing with, for example, if you have Lynx, which is a text-only browser: you have to navigate this way.0819

And so, if you want to install Lynx and test your website with Lynx, that will help you make sure that it is more accessible to a wider variety of things.0825

Lastly, your links should make sense out of context.0836

If you are on a screen reader or something, and you come across just a link0841

(or you tab to a link, if you are using just a keyboard), and the link just says Click Here,0845

you have no idea where this is going to go.0850

It doesn't indicate what clicking here will do; it doesn't indicate what it is sending to you.0853

A better link would say something like "Download the application," or whatever it is; it actually describes it.0861

And then, another point with accessibility is that, if you don't have your website up to standards,0870

depending on where you are, there may be different laws (and also depending on your organization)0876

that require you to have an accessible website.0883

There are a couple of different standards; and there are a lot of different laws--local and international and things like this.0886

So, it is important to make sure that your website is accessible, because you may be violating the law if it is not.0891

Graceful degradation is a strategy (also known as fault tolerance) where you begin with your website coded the way that you want it.0901

So, you are probably thinking of browsers; you may be thinking of Internet Explorer 8 and Firefox 3.0912

And you code your website to work great, and it has Flash and all of this stuff.0920

And then, you are thinking about your users that won't have these technologies.0925

And you take steps to make sure that they still get the content.0929

So, where you have Flash, you have backup content that provides the same sort of thing,0933

but not in the Flash format, for people who don't have Flash installed.0939

Or you make use of things that Internet Explorer 8 can use, but Internet Explorer 6 can't; you have backup content0942

that is not quite as nice, but still works, for the older ones.0949

A good way of doing this is actually providing the content.0955

A bad way would be...this is the noscript element: if somebody has JavaScript disabled, you can put little messages to them.0958

This is not the way to do it: you don't just inform them that their browser doesn't support it, or make fun of them.0965

It is not about notifying them that they aren't able to access the content; it is about actually providing the content0972

in an alternate way that may not be the ideal way, but it is still available.0978

So, just sending a message that says, "Your browser is bad" is not as helpful0984

as giving maybe just the text-only version of whatever the script is going to do, or something like that.0988

So, there are a lot of different types of degradation, too.0995

Your website may be degrading because you are encountering out-of-date or obsolete technology.0999

If your website is being viewed on a computer that was built in 1990, chances are that it is going to have some trouble,1006

even just if you have a background that has a lot of little images repeated.1013

It may just take a lot of processing power to render all of those images, one at a time.1018

So, there are things like that that you have to keep in mind.1023

Or if you are using an old browser, that is degradation.1028

Another way is if you run into a bug; say the server over HTTP sends it the wrong way,1031

there is a glitch as it is downloading, and it misses some code or something, and your website breaks.1038

If it degrades gracefully, then even with that breakage, the content will still be accessible.1044

This is actually a consideration in XHTML and XML, which enforces correct syntax.1049

If there is a bug, it can actually break the whole thing, even if it is just a little bug.1057

But most browsers will try and present it in a way that still works, even if there is a little bit of breakage; and that is the principle of graceful degradation.1062

And then, if the code isn't rendered properly by user agents...1070

Internet Explorer had very famous problems with its box model.1074

And you couldn't just code your website the right way, and then expect Internet Explorer users to deal with a completely broken website.1077

You had to make it so that even the user agent doing it incorrectly--1086

users of that user agent would still see the code in a way that made sense.1091

And then, lastly, intentionally disabling functionality, or if you just never installed it in the first place--1096

Flash or JavaScript often gets disabled, so you need to have alternate ways of doing things.1101

If JavaScript is, for example, form validating or anything like that, if you have JavaScript pop-ups,1106

you need to have the HTML backup while you are doing that.1113

The other end, or the opposite, of graceful degradation is progressive enhancement.1117

The approach doesn't start from coding it the way that you like, and then providing fallback material.1125

What you do is: you start with just the very basic content.1131

This is actually a better approach than graceful degradation.1136

You start with just the content that you want; you mark it up semantically, the way that you should.1140

And that gives you sort of a baseline that is accessible to everybody and anything, and it is completely interoperable, as much as possible.1145

But then, what you do to that is: you add layers of different things to make it nicer and enhance it.1154

So, you will add CSS to make it look pretty, and you will add Flash where you want, and you will add JavaScript technology.1161

And all these things will be fed specifically to the user agents that have the support for it.1170

And you will use browser detection, and you will only feed it to the ones that actually can use it.1178

And that way, your content is going to look good everywhere, because you have built the basic foundation.1183

And then, you are adding to it, so that people using the newest technology can still get all the new, fancy toys.1192

So, this is great in HTML5, because you can code your website great for every browser.1198

And you can already be implementing things that...1204

For example, Opera has a lot of things implemented that only work in Opera, because nobody else has done it yet:1206

the forms, for example, where you can have the little date dropdowns and things like that.1212

You can implement that for Opera and just send it to Opera; that is progressive enhancement.1218

And it doesn't matter that no other browsers support it, because you are just sending it to Opera; and Opera is making use of it.1223

And then, the ones that can't handle them--they just get the basic content.1231

And they get as much as they can handle.1235

It is the best way of doing things, and it really works well, especially in a context (which is what HTML is now)1237

where things get rolled in as the developers of browser software can find time to put them in.1243

And there are still things from HTML 3.2 that haven't been fully implemented in all browsers yet.1252

And so, it will take some time; but you can make use of what is there, and you can also provide the baseline content for everybody.1257

Feature detection and browser sniffing are two sides of a coin.1267

But one of them is bad, and one of them is good.1274

Browser sniffing is bad--bad, bad, bad.1276

It kind of comes from a good motivation, because you are coming from the principles1280

of graceful degradation and progressive enhancement (sort of), because you have to look at the distinctions1284

between user agents and send content intelligently, and make sure1290

that a website is not just going to break if it runs into something it can't handle.1294

But if you are using browser sniffing to do that, it is actually very problematic and unreliable.1300

Most browser sniffing is done based on the user agent string, which is incredibly complicated,1306

and just confusing, and also changes for every single version of every browser--1312

so, every alpha version, every update, every security update...1318

And then, some browsers pretend to be other browsers.1322

For example, in Opera, you can set whatever user agent string you want.1326

So, you can be browsing with Opera, and websites would be denying Opera access, because it was a site coded for Internet Explorer.1332

And so, you would go into a little dropdown in Opera and select Display Internet Explorer User Agent.1340

And then, you would get fed the Internet Explorer code, because you are pretending to be Internet Explorer.1345

So, it is completely unreliable--not to mention that users can create their own user agent strings.1350

And there is just an endless number of browsers; it would be impossible to reliably keep track of all of them.1357

There are literally thousands, probably hundreds of thousands, of them.1364

Feature detection is much, much better.1369

What that does is: you have a particular feature that you are going to implement (say Flash or JavaScript):1373

you can very easily check to see if the browser supports that.1379

Some of them are built in, like in JavaScript; you can use the noscript tag.1383

And if your browser doesn't have JavaScript enabled, or it doesn't support JavaScript, then the noscript content will be displayed; otherwise, it won't.1387

There are more complicated things: for example, if you are dealing with a particular type of JavaScript method that is new,1398

you can do tests to see if the browser supports that particular method before using it.1405

And if it doesn't, then you can give fallback content.1409

And you can even use JavaScript to test to see if your browser supports new HTML elements.1413

So, for example, the HTML5 specification has introduced the email input type.1419

Input is an existing HTML element; it has been around forever.1427

But this email type of input is new, and not all browsers support it.1431

So, you could use this code; what you do is give the input an ID, and you grab it here, so that you can define a variable for it.1435

This is just JavaScript getting hold of the input element.1448

And then, what you do is: you take that element right here, and you go to Set Attribute.1455

And you set the attribute as email; that makes it the email type, which is what we want to check.1461

And then, this just sets the input one again.1467

So, you are setting the attribute of this to email, and setting it here again.1471

What that does is: it is creating this input element in the DOM.1478

And it is sort of a fake creation of it; but then, the browser actually will try and create it in the DOM, as well--not just JavaScript, but using the browser.1484

And if it doesn't support the email type, then the behavior for adding a type that isn't there is to just go back to text.1494

Then, you can check right here, very simply, if the type of that element is text.1507

That means that it has defaulted back, because it doesn't understand email.1515

And between here and here, whatever code you put right here--you can send particular information to a browser, and you'll know that they won't support email.1518

And then, you can put else conditions in and give code that actually makes use of the email tag.1529

And so, you can do this with not just this, but with lots of different things.1537

You can look up how to do it.1540

And it is a good idea to test for support of features, instead of just making assumptions based on the browser type, name, user agent, or things like that.1542

Another great thing you can do is use Modernizr: note, the spelling here is -zr, not -zer.1552

And they have created a big JavaScript library that detects browser support for most of the major browser features:1560

a lot of this sort of thing, and a lot of JavaScript stuff.1569

And so, you can just use their code ahead of time, prepared.1572

And it will automatically do a lot of this for you.1575

I am going to leave you with a little quote by Tim Berners-Lee, who invented the Internet.1582

He said, "Anyone who slaps a 'This page is best viewed with Browser X' label on a web page1586

appears to be yearning for the 'bad old days' before the Web,1592

when you had very little chance of reading a document written1595

on another computer, another word processor, or another network."1598

And that is the whole idea of interoperability.1602

Thanks for watching

Welcome to

This lesson is going to be an introduction and an overview of the canvas element.0002

The canvas element is going to require some knowledge of JavaScript.0009

But you should be learning JavaScript anyway, if you are getting into HTML,0014

because that is where websites really get interesting--where you are doing interactive stuff.0017

I am going to be using a little bit of JavaScript in this lesson, but not too much.0022

This will just be sort of an overview to whet your appetite for getting into JavaScript, and getting into using the canvas element.0026

If you already know some JavaScript, then you can take this a lot further.0034

The canvas element (before I get into how to create it) is a new element in HTML5 that is sort of like an image, a video, or an audio tag,0041

except it is not a type of media that is pre-existing; it is one that is going to be edited on the fly, or created on the fly.0053

So, what it is: it is sort of like a canvas, like a painter would paint on.0063

And then, you, as the web developer, have the paintbrush; and you can paint into this canvas whatever you want,0067

using JavaScript: circles and things like this--and it is very versatile, because you can basically make anything.0073

And you can make it display different information, based on dynamically updating information,0081

based on user input, based on stocks, based on almost anything.0088

So, you can do almost anything with this.0093

In some ways, it is very much like Flash, except it doesn't require a Flash plug-in.0095

It will be supported in every browser that supports canvas; and it is already supported very well in a lot of good browsers today.0101

The first thing you need to learn how to do is create the HTML side of the canvas element.0109

The HTML part is just the canvas tag, very simply: <canvas>, and then </canvas>.0118

And that is basically it; the rest is just giving it little hooks and things, and taking into account backwards compatibility.0124

You will need to give it an ID; I have given it the ID of myCanvas here0134

(and that will allow you to grab it with JavaScript later), and then a width and a height, because there is not a default...0139

I think the default may be 150x300; but you can make it whatever you want.0145

And then, anything in the content of the canvas element is the fallback material.0152

So, if your browser doesn't support canvas, anything that goes in in here (and it can be any sort of flow content) will be displayed to the browser.0156

And so, you don't want to be giving it something that says, "Your browser can't do this; it's horrible."0167

You want to be giving it some alternative content, if possible.0172

So, say you are using canvas to do some stock update graph charts, or something like that.0175

You may just give a static image of a stock chart.0180

Or you can also give a very polite link to a place where they could upgrade their browser to something that will support the canvas element.0185

But you want it to be as useful as possible, and you want to give options.0198

Let's go over code really quickly, and I will create a canvas element.0204

This page here is just a basic page right now; it doesn't have anything in it.0210

But I am going to type the canvas element in--its case-sensitive ID.0217

And you don't need to specify units (in pixels or whatever).0236

Here is the canvas element--very simple.0247

And in its content, I am just going to put a little note...0249

OK, and if I were making an actual website, I would do something a little bit nicer than this--maybe find some fallback content.0265

And I have already prepared some CSS that gives the canvas some styling; I have given it a little border.0273

Now, when I load it in the page and reload (that was what you just saw--what I had prepared earlier), this is what is in the page now.0282

You get the canvas element; and it is 150x150, like I specified there.0292

And the CSS is giving it a little border; and that is it.0297

It is not an image; it is a canvas.0301

That is the HTML side of it--very simple; where it gets complicated is JavaScript.0305

JavaScript--before you can even get started with it, you need to create a reference to the canvas context in JavaScript.0316

Here, I have, in this sort of purple color, some variable names.0325

And you use the getContext method, and there are a lot of different contexts available.0330

In this case, I am getting the 2D context.0335

So, this grabs the myCanvas element, using the ID, and then applies this method to it and gets a context.0339

And that creates a context; and then, you can use that context to access the canvas in the HTML.0348

Another thing you can do with the getContext method is check for browser support of the canvas element.0360

In the last slide, we showed how to get fallback content in the HTML;0367

but you can also use JavaScript to make sure that the browser understands what to do with the canvas element.0371

This is basically the same thing as up here; you have myCanvas.getContext, the same as up here.0381

And of course, myCanvas is a variable that refers to the actual canvas element, which is what this JavaScript is doing.0388

And this check right here: if, if your element that is the canvas element...0398

and then, you put this method on it; and if that works, it is going to evaluate as true.0405

If your browser doesn't know what to do with it--if your browser doesn't support the canvas element,0411

it is not going to know what to do with this method, and it is going to evaluate as false.0418

So, if it is true--if all of this evaluates as true--then you can create your canvas variable right here, myCanvas.getContext("2d").0423

And the 2d context is the context that we are using; but you can use different ones.0432

And then, that puts all of that into this variable.0437

And so, this variable right here, for the rest of your JavaScript session, will now be able to be used as a way of interacting with the actual HTML canvas.0440

A way of doing that: let's copy this code I have prepared--I am going to put it in this script element down here at the bottom (paste it).0456

And I am putting it in the bottom, not in the head, because this needs to refer to the canvas element here.0466

You see, it has this document.getElementByID('myCanvas'); and this myCanvas right here is looking through the ID's and finding this.0477

If you put the JavaScript in the head, the JavaScript will load before the HTML does.0486

And when it gets to this line, it is not going to find it, because it will not have loaded the HTML yet.0491

So, I am putting it after the HTML, just because it is a simple way of doing it.0498

Probably the best way to do it would be to put this script up in the head,0504

and then have an on-load event that waits until the document is finished loading before it executes this JavaScript.0507

But for the sake of this example, it is just simpler and cleaner to put it down here.0513

If I was making an actual website that I was going to put on the Internet, I would do this a little bit more elegantly.0517

This goes after, and so this variable canvas grabs this entire element.0524

And then, this check says, "this element.getContext--if that works, if the browser knows what to do with that,0533

then it is going to create this other variable, canvas.getContext."0540

And this is actually a mistake; this should be something like thecanvas, because you don't want two variable names that are the same (canvas and canvas).0546

That is corrected version there.0561

And then, if it doesn't work, it will throw an error; this is probably the worst way that you could throw an error--0565

giving an annoying alert that just says, "You don't support canvas," without actually giving any backup way of dealing with it.0571

But again, for this example, this is what I am going to do.0579

This is what is going to happen if this fails; it will throw this else.0584

That is the canvas element created in JavaScript now.0589

I refresh, and nothing changed, because all we did is create the JavaScript canvas element there,0597

and pulled up the actual context, which is the 2d context.0605

Now, to draw on the canvas, you need to be using a context.0615

We have already starting using the 2d context; the 2d context is defined at this URL.0620

I think it is in development right now, so that is why it is dev.0627

Eventually, it will be out of development, and then it will be a different URL, although this URL should be able to point you,0630

at that point, to the newer and more complete version of the context.0636

What a context does is: it defines ways to do different things.0641

In the 2d context (there is a 3d context--there are a lot of different contexts; there are browser-specific contexts)...0646

And anybody can make a context, and it can be extended out to whatever the future has to offer.0651

But looking right now at the 2d context, it defines ways to draw various types of shapes, various lines and curves, combining curves0659

and filling them in...segments of shapes, fragments of shapes...0669

You can add images--entire pre-ready images.0674

You can add text; you can control the colors of all of these different elements.0679

You can control the transparency; you can change the location; you can scale them, twist them, turn them, resize them, and things like that.0682

All of that is defined by this context that we are loading in.0693

And once you have loaded it in, then you can get started on actually creating your drawing.0697

Let's do that right in here: we are putting it in the part where, if it evaluates as being able to use it, it creates the canvas.0709

And the first thing we will do is draw a rectangle and paste in some code.0724

What this code here does is draws a rectangle.0731

canvas grabs the entire canvas context that you have created in JavaScript.0738

And fillStyle will just describe the color, basically, because we are going to create a square rectangle that is filled.0744

The fillStyle--this gives you the color: this is red, green, blue--you can think of it as hex, so this is red; this is green; this is blue.0753

This will just be red; it has 200.0760

And then, this is actually drawing into the canvas.0762

These parameters here give you the location and the size.0770

This is, I think, left top; so how many pixels from the left? how many pixels from the top?0774

The rectangle is going to start, and then this is the width and the height.0781

I am saving this, and so now, when I refresh this, there will be a little red square; I have to save first, and there it is.0786

You can see, it is ten pixels from the left, ten pixels from the top; and then, its size is 55x50, as specified right here.0799

And you can also do a little more: for example, you can add transparency.0807

Let's copy this code and create another one just like it.0823

But let's make this one, not red, but--let's make it this color; 200...0829

But then, let's add another little parameter here of 0.5; and this last one is going to be the transparency.0837

This will show up as 50% transparent.0848

And now, I am going to move it down; the size is 150 right now, so let's move it down to, say, 45x45.0853

Save; oops, it is still red--I made a mistake here.0868

This needs to be rgba for alpha transparency; there.0889

So now, you can see that the blue one is 50% transparent, and it overlaps here.0898

So, if I didn't have this a in here, and I didn't have this, then it would just be blue, and it wouldn't be transparent, and you couldn't see through it.0904

So, this shows the power of a canvas element.0914

All right, the last thing I am going to go through is: I am just going to show some other things you can do here.0922

Say you want to add an image--this image: newyork.jpg.0939

I will actually load it for you, so you can see it if you want.0949

It is just a long panoramic image of New York; OK.0955

First, you need to define the image right here, and then this method right here, drawImage.0963

And then, you put the name of the image (which is this variable right here), and then the position.0975

And I think I have this set up wrong; I am going to copy from over here instead--I want this code, because you need to define the image first.0980

You create the image element first; and then you set the source to the URL.0996

And I'll make it 00, so it fills the whole screen.1005

Go over to the browser; and it loads the image in the canvas element.1010

Another thing we can do is add text.1024

This is just another method: you add some text here as the first parameter, and then these two parameters are the location.1034

And there you see: it says "Hello world."1044

And I can't select it, because it is kind of an image; it is in the canvas.1047

That is just a few really basic things you can do to the canvas, but you can get a lot more complicated.1052

Here is an example I created yesterday; and I am going to zoom in.1059

First of all, I put that image again; but it is much wider than the canvas screen actually is.1066

So, what I am going to do is scroll it to the left.1076

And I also put a little rectangle here that is blue and somewhat transparent.1079

And even though I have set this in terms of the number of pixels from the left and the top,1086

because it is relative to the canvas, I can actually (using some other JavaScript) increase the size of the canvas.1094

This is just using CSS to increase the size of the canvas, just so you can see a little better.1100

And now, I have also set up so that, when I click on this, it will do this little thing where I can control the square's location with my arrow keys.1106

And it is transparent, so you can kind of see the buildings through it.1121

And you can imagine how I can develop this into a side-scrolling game--something like where you are shooting little aliens or whatever.1124

There is a lot that you can do with this; and this took me just probably half an hour of coding to put this together, and come up with the idea, and everything.1133

And I can increase the speed; and if I wanted to put a little more effort into it,1145

I could have loaded a little spaceship (or something) image, instead of just the square.1148

And basically, the only limits are what you can think of for the canvas element.1154

That is that; thanks for watching

Hello, and welcome to

This lesson is going to be about favicons (or "fayv" icons, depending on how you want to pronounce it).0002

Favicons are favorite icons; and they started back in the day when Internet Explorer 40009

decided that they wanted to have little images available by their bookmarks, when you bookmarked a website.0017

This is an example of Internet Explorer 6, because the functionality stayed the same way up through Internet Explorer 6,0024

where you have the little icon here for Internet Explorer in the URL bar;0031

and when you went up to Favorites and bookmarked a website, it would save it in your Bookmarks0037

and put a little icon next to it; and that is the favicon, or the Favorite icon.0045

And after that, it became something that Web developers like paying attention to, because it gives your website a more professional look.0050

And other browsers started implementing the same functionality.0060

So, this is going to be how to make sure that your website gets a good favicon.0063

There is basically universal support in browsers for this.0073

They are supported in all major browsers; older browsers might require you to bookmark the website before it actually shows up.0080

For example, this is Internet Explorer 6 again, and this is actually the same thing;0087

you can see, that little e icon has been replaced with the Educator favicon.0091

And that is only because you clicked on Favorites and saved it as a bookmark.0096

Most of the other browsers nowadays will find it automatically.0102

And they can appear in a lot of different places.0106

This is Chrome: it shows up only in the tab, as opposed to Safari here--it shows up only in the address bar, and not in the tab.0108

And then, in Opera and Firefox, it shows up in both, as well as in Internet Explorer.0117

The simplest way to implement the favicon is to create a 16x16 or 32x32 pixel icon named favIcon.ico.0126

It obviously has to be icon format; and you put it in the root directory of your website.0138

So, that is just...if your website is, the URL to this will be

And this is the way that Internet Explorer 4 implemented the functionality, back in the day.0152

When you favorited a website, Internet Explorer would automatically check this location and see if there was a file named this.0159

And if there was, it would download it and use it as the favicon.0170

That puts some limitations, because that means that you can only have one favicon per website.0174

And you can't really control whether or not the browser is going to use it or not.0181

It just does, without really giving you a chance.0185

The W3C expanded this specification a little bit, and now you can put the icon of any name in any location; and you use the link element to do that.0189

You give it a rel of shortcut icon; and this is actually an illegal syntax here, because a space here should mean that it is a list of items.0203

But this is just one item; but you need to have it like this for Internet Explorer.0217

Other browsers will ignore the word 'shortcut' and just go directly to this word 'icon'; and they want just the word 'icon' syntax.0221

So, this will cover all your bases.0229

You need to specify the type as image/x-icon, which is the MIME type for icons, if you are using an icon image.0232

You can use other ones; I will talk about that in a minute.0241

And then, the URL to the location can be a relative URL or an absolute URL--any URL you want.0245

This would be how, if you have different sections of your website, you want different favicons on them.0252

You can use a link in each page to specify which favicon that page will use.0257

So, you could have a different one for every page.0265

And probably, if you have a favicon in the root directory named favicon.ico (although you could name it anything), it is going to default to that.0267

What I usually do is: I usually just want one favicon per website, so I will just do this and this, both together,0279

and make them the same file, and make sure that everything is covered that way.0286

Another cool thing you can do with Apple mobile devices is: they have a special icon that they use to click on their little screen touchpads.0292

And it is a little bit bigger; it is 57x57--and even, in some of the newer ones, it is as big as 129.0304

And they automatically apply some styling to it, so it gets rounded corners, and it gets a little bit of a shadow and some shiny, glisten-y effects.0310

And all that gets applied automatically, if you create just a regular-looking icon and link to it this way (apple-touch-icon instead of the shortcut icon).0322

And you can use the icon format again, or a PNG, or a GIF; and alpha transparency is supported.0333

So, you can see through it a little bit if you want to use that.0340

This is kind of a fancy thing to deliver just to users of Apple mobile devices.0344

And there is a chance that other devices may end up grabbing this, as well, because they might want it.0349

That is kind of how the Internet works: even though it says Apple here, 0356

I can imagine in the future another web phone that has similar functionality taking this,0358

and not waiting for web developers to change this to specifically the value that would work for that phone.0363

To create the icon, probably the easier way to do it, if you already have some programs installed that can create PNG's or GIF's,0375

would be to just make a PNG or GIF icon, because a lot of newer browsers do support PNG's and GIF's as the favicon icon.0385

Obviously, it needs to be the right size; so it is 16x16 or 32x32.0394

And there are actually other sizes that it can be used as, as well, depending on the context.0399

For example, if you are saving a website as a shortcut on your desktop, it might be using a bigger size than 32x32.0404

But you definitely want to make sure that it works in 16x16 and 32x32,0412

because there are a lot of browsers that only support that; and if you have anything bigger, it just won't work.0417

If you do create your icon as something other than the icon format, like the Windows icon format,0422

you need to make sure that you give the right MIME type.0428

Your server will probably send it with the right MIME type automatically.0432

But you will also need to specify, in the link that we talked about a second ago, the MIME type with the type attribute.0435

Just a note here: I am recommending you use the image/x-icon MIME type, which is actually the older MIME type for this.0442

I think, in 2003, Microsoft...well, no, it was actually the W3C that came up with a new standard for how to do this.0452

Because it is a Microsoft functionality (this is vendor--that is what vnd stands for), this points out that this is specific to Microsoft's format.0463

But this is the one that you should be using for all favicons--this MIME type--after 2003.0472

But I like to use the old one, because it still works, because browsers are backwards compatible,0478

and because I am not completely sure that this new one won't cause problems in older browsers.0484

So maybe, in a couple years, I will start using this one; but for now,0489

I am just going to stick with this MIME type for the icon, although you will see this, as well.0492

Another thing to point out is that, if you are creating PNG's or GIF's instead of the icon file type,0501

you may be missing out on some functionality, because a lot of icon creation programs0507

will actually make one file that has multiple sizes.0512

So, if you have a 16x16, 32x32, 64x64...all these different sizes bundled into one,0516

then the browser that can only handle 16x16 will just get that and load that correctly.0525

But if your browser can handle higher resolutions, then it actually will use the higher resolutions in that single image file, or icon file, according to the context.0531

And you won't get these little 16x16 icons that get blown up into much-bigger-than-they-were-ever-meant-to-be and look very pixelated.0541

Here are some resources for you to create icons that have this multiple-sizing functionality.0552

If you don't want to spend some time to download an icon program, you can just use one of these three websites.0562

And there are many, many more; these are just three examples that I came across.0570

For example, iconverticons (or i-con-ver-tik-ons...a confusing website name)--let's pull it up here.0574

This is a very snazzy little thing, where you just upload a pre-existing image that you have.0583

So, I think if you upload one that is bigger than the size that you need (like if you upload a 500x500 picture), it will just size it down to the appropriate size.0591

Or you can (and I recommend, actually) create something ahead of time that is 32x32, so that you don't get pixelation or resizing, and you have more control.0601

But it will take JPEG and GIF and PNG formats.0610

So, you click here, and then you can go into Options here.0614

And the only one you want for this (because this is if you are creating a favicon, not just a regular icon) is this one right here, Convert to favicon icons.0618

And then, it will make 32-bit here; and then, when you click Convert, it will process it;0630

and it will give you a little image that you can download, and it will be automatically one file in both 32x32 and 16x16.0635

This is; this is a website that allows you to directly create your icon.0644

This is 16x16 pixels here, and I can draw on it with my cursor or mouse.0651

And you can select colors, and there are a couple of other tools like this.0659

And then, at the end, you can see a preview down here of what it looks like.0665

So, you can look at what you are drawing as you go; and at the end, you will be able to download it.0670

And then, when you put it up in your server, it will work.0675

A note here: you are probably not going to be able to get this to work locally on your home computer.0678

It is going to work best if you are trying it online, at an actual server,0685

because then you don't have to worry about some of the complicated things that make favicons work or not work.0689

And this one,, is also very snazzy.0696

It lets you pick your sizes here--16, 32, 48, 64--and then you upload an existing image, and it will convert it for you automatically.0701

There are also programs that you can use that are a little bit more advanced.0713

I am on a Mac right now, so I will give you a little quick peek at this one, Iconographer.0717

This is Iconographer, and what is very cool is that I can select multiple sizes here, and I can pick which ones I want to save at.0728

Let's say I am going to draw this one right here.0738

You can see: I am drawing it, and then, when I let go, it gives me a little preview.0742

And then, I can click a smaller size and continue making my icon.0747

And I can make specific edits to the specific sizes, instead of just creating one size and then it sizes down (you might get some pixelation).0754

When you are only working at 16x16, one pixel really makes a difference.0764

So, it is nice that you can edit them one at a time.0769

And then, you can save, and it will put it all together.0773

And then, here are some resources for you if you are using a Windows computer.0775

Just copy these URL's down; and they are free, as well.0780

And then, Linux users, I think you should be able to find icon creators, as well; but I will leave that up to you.0783

That is it for favicons; thanks for watching

Hello; welcome to

This lesson is going to be about content models.0002

Content models are an important part of HTML that basically tells you where elements are allowed to be placed,0005

and kind of gives you an idea about what they do.0013

In HTML 4.01, content models were very, very simple: it was basically block-level elements and in-line elements--0019

although technically, everything in the body element is also flow content.0027

It just means that it is part of the flow of the document, and it is to be rendered visibly in a typical browser, as opposed to like meta-data in the head element.0034

So, block-level elements are slightly wider-scope than the in-line elements in HTML 4.01.0045

And they break onto their own lines automatically, whereas in-line elements are a little bit lesser-scope, and they tend to stay on their own line.0053

So, some examples would be like...a lot of the text semantic tags are in-line.0061

And then, a lot of the containing elements (like div and things like that...blockquote...) are block-level elements.0067

I will give you a quick demonstration here of that.0079

Here is a page that is just empty right now, but I have given these styles to divs and spans.0083

So, div is the typical semantically-void block-level element, and span is the typical semantically-void in-line level element.0090

And this CSS just makes all divs red and gives them a border; and all spans blue.0101

If I go like, I am actually going to copy these several times, just so that the effect is more clear.0109

Refresh over here; you can see that the divs, which are block-level, when given the border, automatically...0130

you can see that the border goes all the way across; it comes and fills its own line0140

and breaks the next one down onto the next line, whereas the spans all fall into a line, and they are in-line.0146

It is kind of a hint--they are "in-line."0155

And then, the block-level elements--you can think of them as boxes that fill up the whole width of the screen.0158

If I were to change the width, it would change it.0164

Now, another thing is that block-level elements may contain other block-level elements, or in-line elements.0170

So, they can contain either, whereas in-line elements need to be contained in a block-level element, and they can only contain data.0183

(so, something embedded, like an image or a text node) and other in-line elements.0193

Anything other than that, they are not allowed to contain, which means that you can run into validation problems.0201

This is the W3C validation page, and you can see that I am using the HTML 4.01 strict doctype.0208

And if I do something like paragraph and a blockquote, I am going to run a check now; I have two errors.0219

Now, the errors are 1) this blockquote here--character data is not allowed here.0243

This is character data--this h; this is just a text note, and it is directly in blockquote, which happens to be a block-level element.0251

And block-level elements need to contain block-level elements and in-line elements, but not data,0259

whereas if it was an in-line element, like the paragraph (which you don't see any errors for), it is allowed to contain data.0267

And then, you have this secondary problem that shows up, that is actually just the first problem.0274

But it is repeated, because it automatically...see, it says, "end tag for "BLOCKQUOTE" which is not finished."0284

There was no content in here that was required.0292

Block-level elements are required to have one of those two types of content (block-level or in-line).0295

And it didn't run into any of that, so it says, "Well, blockquote can't be done yet, because I don't have the content yet."0300

So, it is saying, "Here is the end tag for it, but it is not finished."0310

If you have a good understanding of the content model, then you will be able to read the validation when you are validating your pages.0316

When you have problems, you will be able to read it more easily, and you will be able to clean up a lot of things with just one fix.0325

Here, I have two problems; it is actually just one problem.0332

If I fix it by putting the correct in-line element, and then re-validate,0335

I have succeeded--no errors, even though I only fixed one thing, and there were two errors before.0348

It is because it was actually the same error.0355

That is the HTML 4.01 content model--very, very simple--basically, just block and in-line, and everything is flow.0360

HTML5 made things more difficult, but also they are kind of just simplifying things by giving them more precise labels.0369

In HTML5, the content model is expanded; so you don't have block and in-line anymore.0383

The block and in-line content model categories are roughly equivalent to the flow content category that is new.0391

It is just called flow; and it is basically like what it was in HTML 4--the flow that nobody cared about, because it was everything.0401

Now, it is a little bit more explicitly defined.0410

There is also a new content category called the phrasing content category.0413

And this is, in a lot of ways, very similar to the old in-line category,0418

in that phrasing content tends to be text-level stuff (emphasis, elements,0425

and things like that that fall all in one line), although it is not exactly the same.0431

There are a couple of new ones, as well.0438

The heading content category is for h1 through h6.0440

Sectioning is the new elements, like section, nav, header, footer, aside...0446

(actually, I think aside may not be one; I will check when I get to that slide)0453

And embedded and interactive content, respectively (I will talk about those in a minute),0457

and then the meta-data content category is also made explicit.0464

I say that because there kind of was always a meta-data category that was separate--it wasn't flow.0468

But now, it is explicitly set up as "this is meta-data that goes up in the header, not in the flow of the document."0475

Before I actually get into flow content too much, I want to look at the actual specification for content models.0485

And I am going to scroll down to where it starts talking about the models here.0496

This is a diagram of the different models and the elements within them; it is like a Venn diagram.0500

So, the elements that are contained in here are in everything that they are encircled by.0510

Flow content--almost all elements in HTML are flow content, except for some meta-data elements that are not flow content.0519

All heading elements (h1...actually, you can see them if I zoom down a little bit...h2, h3, h4 through 6, and hgroup)--0528

that is all of the heading content elements; all of these are heading content and flow content, because this is inside that circle.0544

Embedded content is always phrasing content; it is also always flow.0554

So, this is heading and flow; so the h1 is both heading and flow.0557

And then, all embedded elements are embedded and phrasing and flow; and sometimes they may be interactive.0564

And there are some other additional ones that are not as common as these types here, that are important.0571

Let me zoom back in.0578

You can see that flow is basically everything, kind of like in HTML 4, except for some of the meta-data elements that are in the head.0583

So, some always have to be in the head, like the title element (it always needs to be in the head).0597

Some don't always have to be in the head, like the script element (it can be in the flow of the document).0602

So, that kind of varies, depending on the context.0609

In terms of the content, all flow elements should have at least one descendent node that is text or embedded.0613

It is just like in HTML 4, where you need to have an image or something, or a text node.0624

Otherwise, it is just empty; and you are going to get that error with the blockquote,0630

where it found the end of the tag before it got all of the things that were inside of it.0633

It doesn't need to be an immediate descendant; it doesn't have to be right away.0639

Say we have a flow element, give, and I am going to put directly inside of it p, and then some content; this is a text node here.0647

Now, this div element contains within it a p element (paragraph element).0662

So, it actually doesn't directly have any content; but it does have, inside of it, an element which does have content.0669

So, it has a descendent that has content; so that is good.0679

But what wouldn't be good is if we had this; that would not validate.0682

Looking again at flow content, let's look at...this is the list of all flow content.0690

And you can see that for some of them, it depends on if there is a certain attribute available.0698

And then lastly, it is just text; text counts as flow content--that would be like a text node.0706

But you can actually click on these elements (I just clicked on blockquote) and read the definition0711

(that Zoom didn't zoom the way I wanted it to) of its location in the grouping.0719

Flow content is the first category listed here; it is also a sectioning root and a format block candidate.0736

These two--you don't need to worry about; they are not the main types.0743

But blockquote is just flow content, with some special rules.0750

It also tells you in the specification where it can show up.0755

So, it first tells you what it is; then it tells you where it can show up.0760

And it makes sense that flow content can show up where flow content is expected.0763

Basically, it is kind of redundant, although it gets more complicated in other places.0768

And the content model is: you have a blockquote--what can the blockquote element contain (sorry about the highlighting)?0772

It can contain the content model flow content.0781

Blockquote is a very simple element in terms of all this; it is not terribly confusing.0785

But I wanted to give that to you as an example first, because some of the later ones get very confusing.0791

Sectioning content: sectioning content is just these four elements, and they are all float content.0801

I'll pull this up again; here is sectioning--that is the four that I just showed you, and they are all float.0811

They are not just one or the other; they are both.0820

They are both sectioning and float content, so both rules apply.0823

And they are allowed anywhere float content is allowed, because it is float content; and there are not any particular rules for sectioning content.0827

And it can contain more float content; so it can have a sectioning content element with a float content element in it, and it can go all the way down.0835

Heading content: heading content (I am going to pull this up) is the same as sectioning--every heading element is also a float element.0847

This is all of them: it is just the h1 through h6, and the hgroup.0859

So, it gets a little bit tricky with the hgroup, because of the rules of where they can be placed.0863

The general rule is that heading content can occur anywhere that float content is allowed.0870

But because of the hgroup element, you have to say, "or in an hgroup element,"0876

because all of these can appear inside of an hgroup element, even though the hgroup element doesn't have (as its content) flow content.0880

It has as its content these tags.0889

So, that is what this part--the other side of it--is: it is that heading content must contain phrasing content,0893

or if it is the hgroup, one of the other levels of headers.0898

So, I am going to show you where this is defined in the specification, so you can get an idea for how to read this.0903

Here is the heading content area; I am going to click on hgroup.0912

An hgroup is of category flow and heading (and then this other one we don't need to worry about).0917

It is allowed wherever flow content is allowed, and its content model is these h elements.0924

It doesn't say something like flow or phrasing; you can't have anything inside of an hgroup element except these six header elements.0933

Likewise, if I go to a header (they are all defined together, since they are so similar), they are the same category as flow and heading.0944

And where they may be used: they can appear where flow content is expected (which makes sense) or as a child of an hgroup element.0953

And then, when it comes to the actual headings, phrasing content is what needs to be inside of it.0961

Phrasing content--it makes sense that you would want phrasing content in a header,0968

because sometimes you have just a heading with just some simple text (that is a typo) like hello.0974

So, this is a text node, and that happens to be phrasing content.0985

But then, what if I wanted to say "Hello," with emphasis?0989

I put the emphasis on the wrong syllable.0998

This is phrasing content that is inside; now, what you don't want to be putting in here is things that are not phrasing content.1001

All right, that is heading content.1014

Phrasing content: we will talk about this now--all phrasing content is flow content.1018

Let's look at the chart again: here is phrasing, and so phrasing is both flow and phrasing.1024

Phrasing content makes up paragraphs, and it consists of the sort of tags that would have been in-line in HTML 4.1032

And just like in-line, it needs to have some sort of actual content, as a descendant, eventually (text or an image).1040

Now, the anchor element is a little bit special in phrasing content, because it depends on the context.1049

The anchor element is phrasing content when it contains only phrasing content.1057

But if it contains something other than phrasing content, it switches types.1063

I am going to pull this open again; and let's go and look at the specification.1070

Phrasing content--anchor: the same thing, where phrasing content is expected...1075

And it can't have any interactive content as a descendant; but this is where it is interesting.1083

The category that it fits into is flow content; but when it only contains phrasing content, then it is phrasing content.1090

It is also interactive content, but that is not important at the moment.1100

So, what this means is that, if you have a section element (which is not phrasing content),1105

and you wrap a link around it (which you are allowed to do), then this link is no longer phrasing content--1111

which is good, because now you can put this section (which is wrapped in a link) in places that it wouldn't normally be allowed,1117

just having an anchor tag, because it would be phrasing content; it wouldn't be allowed.1127

This is all the phrasing content elements; all of these asterisks mean that there are sort of special circumstances.1133

We looked at the special circumstance for the anchor element.1140

A couple of other ones have some; it depends on some contexts.1143

And a lot of these are not just phrasing content, but they are also embedded or interactive, or even meta-data content.1148

So, generally, they will be allowed to be containing more phrasing content only.1157

But if it is something like embedded and interactive, as well, then there are additional rules that apply.1165

Embedded content is also flow content and phrasing content.1175

All embedded content is all three, right? Some embedded content is also interactive.1180

Embedded content is allowed in the same places that flow content is allowed, usually.1188

And it has different types of content that it wants to have in it.1191

For example, no content: the image and the embed tags have no content.1199

This is just a simple matter of the type of tag it is.1209

They are void elements, so this is a complete image element.1213

If I go like this, and I try and give it some content, it is going to fail validation, because the content should be none.1223

And it is just wrong; and the same thing with the embed.1234

Now, on the other hand, video, audio, and canvas have transparent content.1238

And that is the content that is the fallback content.1244

Audio: if I put something in here, this text is only going to show up to the browsers that don't recognize this.1250

And it is fallback content, so it has a special type there (it is transparent) that we don't really need to worry about.1266

And then, there are a couple of elements that have special consideration.1277

The source element is contained in audio and video; the param element is contained in the object.1282

And it doesn't really occur anywhere else: object is allowed to have param; audios and videos are allowed to have source elements as the content.1290

I am going to show you in the specification.1299

Let's look at audio: the content--if the element has a source attribute, then it is transparent.1306

What that means is: the normal way you build an audio element--you give it a source,1315

and then, in this case, the content of the audio element is just simple transparent.1328

But there are other ways to do the audio element.1338

You can also give it...if it doesn't have a source element, and you want to specify the source through the source element instead...1342

The source element (I just clicked on it here) has these attributes: source, type, media.1352

When you delete this, and you want to specify multiple sources for your browser to pick through, you can do this.1359

And then, you can copy it, and maybe give it another file type here.1378

Say you have a really esoteric audio format called...that: uhe.1384

Say you have created your own, and so you want most people to get this.1391

But then, if yours doesn't support it (you have a weird device), then you have this weird kind.1396

The specification (going back) requires one or more source elements.1403

That makes sense, because if you take the source attribute out of the audio tag, then it needs a source from somewhere else; you need it in the elements.1411

And then, "one or more source elements, then transparent, but with no media element descendants."1421

So, anything after these is just the same old transparent tags.1427

So, it basically is a tricky way of having two source attributes in the audio element.1431

This is all of the embedded content elements, by the way.1443

And they are all straightforward, in terms of defining their content.1446

The last major group is the interactive content elements; all of them are flow.1457

Here is interactive; all of them are flow; some of them are phrasing; and some are both phrasing and embedded, right here.1463

Interactive content generally can appear anywhere the phrasing content is expected.1472

There are a couple of special exceptions that I will not go into, because if you are using them,1478

you will end up learning very quickly what the exceptions are and where they need to be used.1482

And usually, interactive content has specific rules about what it can contain.1488

Interactive content is things like forms--anything where the user has an input (buttons and input types,1492

and also the media elements, like audio--if you give it a control, that suddenly makes it interactive,1502

because you can click on the Play button, the Pause button, the volume, etc.).1508

That is what these little asterisks here for the media types are: audio is not normally interactive, but with the controls interface, then it is.1515

That is what this is saying right here: if the element has the controls attribute, then it is also interactive content.1529

Interactive content is cool, because...1542

Let's pull this up again; I'm going to scroll down to interactive content;1547

and let me click on button here; the content model for button is phrasing content.1555

If you have seen buttons, you are probably used to them just being very simple buttons, like that.1562

Refresh; I forgot to save; I had a syntax error; I was using the wrong page--OK.1579

So, here is your little button--very simple: click on it, and it does nothing right now.1602

And you are used to just seeing them have just regular text.1606

And that is because most buttons that you see on the Internet today are input types of button.1610

You put type="button", and then you give it a value; and this is sad, because it can only do this text.1620

You can't put HTML in here; that would mess it up.1636

But the content type for this is phrasing; so I can say, just like I was showing you before (I'm getting some typos there)...1640

I can say "hello world" with the emphasis; and when I zoom in, you will see that it actually showed up correctly.1655

And that is all because I know how to read the type for this.1664

I can read the content model, and I can tell that there is phrasing content.1670

And I don't have to worry about validating errors as much, because when I do run into an error,1674

and it says something weird, like "the element is not over yet" when it clearly is over, you know why.1682

It is because the content type has a problem with it.1689

And so, I really recommend that you get to know the content model, at least to some degree,1696

although for the most part, it will be kind of intuitive (like the image--if you are looking at image elements in websites,1704

you will see that they don't have a closing tag, and you will just intuitively not put a closing tag,1712

which gives it the correct content type of not having a content type).1717

And then, where it is not intuitive and you make mistakes, and the validation errors pop up,1723

you can look at that element, and then go to the specification really quickly.1729

And maybe just looking at this chart will be enough, but if it is not, then you can click on the actual element1732

and get the information, and see if you can clear up a lot of validation errors.1740

And that is that; thanks for watching

Welcome to

This lesson is going to look at Flash object and how to embed other objects--but especially Flash,0002

because especially with the introduction of HTML5 and video elements and canvas and audio,0010

a lot of people are saying that Flash is no longer relevant, which is not true.0020

But also, there are some things about Flash that are not good for the Web, and I want to point out0025

what an appropriate time to use Flash would be, and when you do need to, how to do it, and how to do it in a way that is valid.0031

The main problem with Flash on the Internet today is that Flash is proprietary.0045

It is controlled by a single company, and they own the copyrights on all the technology, and they can charge whatever they want.0053

Now, it happens that Flash is ubiquitous across the Internet today.0061

Almost every browser has Flash installed; it is something like 95% right now.0066

Now, because of that, a lot of people have come to think of Flash as just a part of the infrastructure of the Web.0074

However, because it is proprietary (controlled by a single company), it can't ever be that,0083

because there are always going to be users who are unwilling to install the Flash plug-in, or unable.0086

For example, Apple mobile device users--if you have an iPhone or an iPod Touch, you are not able to use Flash at all.0095

And so, it can't become a part of the Web infrastructure.0106

Everything about the Internet, from HTTP to HTML, all the way up to...everything about how it open.0109

And that is what makes it able to be free, and the communication to work the way that it does.0117

But the problem is not that bad, because Flash has a place on the Internet.0124

It can't ever become an essential part of the infrastructure, but it has many useful functions.0130

And it does a lot of things that browsers can't do.0137

Flash can come out with new versions much quicker than browsers do.0139

They don't have to wait for HTML versioning and specifications to come along, and they can always fill the gaps where browsers fail.0143

And ideally, you have a lot of different plug-ins filling a lot of different gaps.0150

Flash just kind of got lucky, because it was very good at doing video, right around the time when video was becoming very important to the Internet.0155

And so, it got a foothold there; but that is probably going to change a little bit,0164

although I think Flash is not going to just disappear overnight because of the introduction of HTML5.0170

When you are embedding Flash (now, this could be a video)--for example, if you want your video to be obscured0179

from being able to be downloaded, the HTML5 video element doesn't have a great way to do that at this point.0187

The URL to the video file is just right there in the code, very easy to see.0193

Or it could be some other Flash interactive thing that won't work with HTML5, for some reason.0198

This is the old way to embed Flash, and it comes from the way that Internet Explorer uses the object element.0208

Now, object element is a standards-compliant element; it is in the specification.0219

But the way that Internet Explorer uses it was not that great.0224

And the standards-friendly browsers ended up having to use the embed tag to embed Flash.0228

You have two browsers (say Netscape and Internet Explorer) using different tags, and this is just the definition of incompatibility.0235

And so, you get this big mess of code.0245

On the outside, you have the object element, which has these attributes and a parameter.0248

And then, you have the embed element for the standards-friendly browsers nested inside of it.0257

And it is really just a big mess--and there are ways to clean it up, a little bit.0267

This is a page that I am going to show you as an example.0275

You don't need to look at that yet.0282

Looking up here at this old-way example: the first attribute here is classID.0285

And this is really what caused the other browsers to choke on this code and break; but Internet Explorer requires it.0292

If you want to delete that, when you are looking for a more standards-compliant cross-browser way of doing this,0303

we will see if we can come up with other methodologies; I will show you in a minute.0311

But this codebase attribute is the next one, and it links to a copy of the plug-in.0316

And then, this part right here is the versioning information.0324

This is actually pretty important, because when you go to your website and there is the plug-in with Flash,0328

and if your Flash file requires version 6, and you have version 5 installed, then your Flash file is going to break or behave crazily.0337

And so, this versioning information will prompt you to upgrade your plug-in before you even start doing anything.0351

And then, you can have the experience that you want.0358

However, this also causes problems; so it has to go.0362

And the embed--the entire element, if you put it in a validator, fails to validate.0367

It is not (at least, back in the day it was not) a valid element to be using.0374

So, that would need to go, as well.0381

But what we have here, with the stripped-down-minimum-to-make-it-work version, is: this is not enough for it to work anywhere.0384

It won't work in Firefox or anything.0392

I am going to show you the Satay method, which someone came up with to make it work.0398

The Satay method is much cleaner, but still a bit awkward.0404

It incorporates Flash in a way that works across browsers, and is still (now, this is the important part) valid for HTML 4.01.0412

It has a couple of problems: longer videos in Internet Explorer will not stream;0421

it will wait for the entire thing to download before it will play.0428

So, for longer videos, that is just not acceptable, although you can create a sort of holder Flash file that will load the video file and stream it for you.0433

And then, also, there is no plug-in version detection in this code.0444

So, out-of-date plug-ins will not be informed that they are out-of-date, which can cause problems.0449

And then, lastly, when you have the...this isn't Internet Explorer, but this is the code that you just saw actually shown here,0454

when you have Internet Explorer with the Satay method, the Flash will not begin running until you click on it.0466

You have to have some sort of interaction, and then it will start playing.0474

And they actually changed that behavior from the way it used to be, which worked better, because of a lawsuit that they lost.0477

So, this is the Satay method; you can see that (let's look down here) they have gotten rid of this, which breaks the standards-loving browsers.0487

And they have gotten rid of embed, and they have added some new attributes.0503

The type attribute is added, and this is basically just a MIME type.0509

And this tells the browser how to understand the next thing, which is the data.0519

And then, you put the URL to your Flash file here, even though you already have a parameter down here that is specifying that.0530

So now, the Satay method: I am going to refresh, and then scroll down (the old way just broke, because of the things that I removed).0545

The Satay method works; and it works cross-browser, and it works in HTML 4.0554

Let's go back to the slides.0565

What we are really interested in doing now is embedding Flash in HTML5.0570

Now, obviously, the video, audio, and canvas elements are much better for a lot of purposes.0578

because the browser is playing the video (or audio or whatever) directly, and there is nothing between.0586

And you are not going to run into a lot of performance issues, and we will be able to play it on Apple mobile devices and things like that.0592

So, you want to consider first using one of these; but there are also a lot of browsers, at this point, that don't support these, or don't support them fully.0603

And so, you may want to still use Flash as a fallback.0614

This is a little bit of the old-style HTML.0618

But if I wanted to have a video element here, and use the Flash embedding as the fallback,0624

so that if the browser doesn't support video, then it plays all of this and loads it,0641

and you get the Flash version of the video; that is a good way to do it.0646

Now, here is another thing: that the embed element, which usually has to be nested underneath the object element0655

to deal with browser incompatibilities, has actually been included in the HTML5 spec.0662

So, if you wanted to, you could just use this part--just the embed part.0668

And it would be cross-browser compatible, especially if they support HTML5; and it would be valid.0676

So, that is a consideration, as well.0683

So, this code right here would be just the old-style way of including it; but it is in HTML5, so it is valid.0687

I don't think that is actually the best way to do it, though.0696

I think the best way would be a little bit more complicated: for example, you can embed Flash directly in video element.0700

Now, this is some really complicated JavaScript that you can go to this URL and just copy and paste.0710

And what it does is: you have your video, just the way you normally would, with multiple sources;0718

and then, you wrap a div around it, and you give it an ID that this JavaScript can access.0724

And it will actually insert your Flash into this element.0729

So, it will fall back to the Flash if the user supports Flash, but doesn't support the newer video element.0737

And that is very cool, because it means that, in future, when you don't want to be supporting Flash anymore--0744

you just want to use the video, because it is well-supported--you don't have to go back and remove code.0752

You just have this one code for everybody; and it is very, very nice.0756

Now, there are also some downsides with this.0762

It is kind of complicated; but this is probably one of the neatest ways to do it.0768

You can go online and check: something like A List Apart has had some good articles on how to embed Flash over the years,0775

going back to 2002--the Satay method was published on A List Apart.0783

And they may come up with very convenient and clever ways to do this in the future.0787

So, keep your eye out, because a lot of this innovation happens because people discovered functionality0793

and tricky ways of doing things, rather than because it was necessarily coded that way.0799

These are all of the elements that embed external data.0807

I just want to leave you with a quick review of how they work in HTML5.0813

So, image, just simply, is graphical content; and then, you have video, audio, canvas,0820

which cover their respective things--canvas is a user-interactive canvas.0828

And then, the embed element, which is new to HTML5 (or rather, I should say, it is newly valid--0834

it has been around for a long time) is defined to embed plug-in content.0839

So, the object element actually can do a lot of the same things.0844

It can include images and plug-ins and even HTML.0850

The difference is that the object element has a fallback mechanism; you can put content in here,0854

and it will fall back to that if it is not supported; whereas the embed element does not,0859

which is kind of a problem with this; they couldn't give it a fallback element,0865

because older browsers had been supporting it when they shouldn't have been; so it can't fall back.0870

But this gives you a lot of options: you can do a lot of different ways when you are going to include your Flash from now on.0877

You can use object; you can use embed; you can use the JavaScript that inserts the Flash directly into other elements completely.0884

You can use combinations; you can use the old way; you can use the new way.0892

But what I do recommend is that you keep in mind graceful degradation and progressive enhancement, and always validate your pages.0896

Thanks for watching

Hello: Welcome to the first lesson in's HTML course!0000

In this lesson, we are going to just get a very quick introduction to how to create your very first web page.0005

From having zero knowledge or experience, after this lesson, you should be able to have a web page0012

that is just like any other web page on the Internet, that you can view in a browser.0018

Before we start looking at that, I just want to point out a little bit about what HTML is.0026

It is basically the backbone of the Internet; every single website on the Internet uses HTML.0033

And that counts for the oldest web page that has ever been created, which is this one.0041

(it is one of the simplest, as well) to some of the newer ones, like YouTube.0048

And it is actually very easy to get into the source and look at the HTML.0053

In your browser, you can hit Option+Command+U, or Command+U, or Ctrl+U, depending on which browser you are using.0059

And it will pull up the HTML source.0066

And this is the HTML source for the first web page on the Internet.0069

And it won't make sense to you right now, if you are completely new to this; but it is actually fairly simple.0074

You can see, right away, that there is a little bit of correspondence between text here and text that shows up.0080

But there is also a lot of code there that you don't understand.0086

Now, when you get to something like YouTube, and you view the source,0090

there is going to be a lot more that you are not understanding, because there is a lot more going on.0093

For example, this is all scripting--JavaScript--and then you get down...there are a lot of divs, and a lot of things are styled with CSS.0099

And you can see: it is also much longer code.0106

But essentially, it is the same thing: it is just HTML, and it is what makes the Web work.0108

You can also, for example, look at...this is the HTML5 specification.0117

And you can see that it has styling and content mixed all together, and you can view it; and this is our normal experience with web pages.0124

But you can separate out just the content, which is what I have done here.0135

This is that same page; but this is only the content viewed, and it is just a lot of text.0139

And in essence, this is the most important part of any web page.0146

And it is what the whole Internet is about--sending content.0150

It is not just style and fluff and a lot of cool programming stuff; what we really care about is the content.0154

But when you just have this marked up like this, with no HTML, it is kind of hard to make sense of what is going on, compared to this.0160

What HTML does is tells the computer what the meanings of all these different contents are.0172

It is called semantics: semantic means meaning, and it will semantically0179

mark up the different parts of your content and tell to the computer what it is.0182

And based on that, the computer will give some default styling.0188

But the actual purpose of HTML is not the styling, but rather the semantics.0191

This is that same page content, marked up with HTML; I will show you the source, really quickly.0196

And then, you can see: there are actual HTML tags--there is a lot of it (scrolling all the way down to the bottom).0207

And when the browser encounters these semantic tags...for example, this is an h1; it now knows that this is the first-level heading, and it will make it bigger.0214

Although you can see that when there is no styling applied (this is only the HTML), it is fairly basic, and that is a way to get things started;0224

what you will learn later on is to take CSS and style it to look the way you want it to, and to control things like that.0235

And then, you will also want to learn JavaScript at some point, to pick up on some of the more advanced things that you can do.0243

What you need to create a web page is a computer and a text editor.0252

Any computer has these; this is my text editor here.0260

If you are on Windows, you can pull open Notepad; you can pull up TextEdit on a Mac.0264

This happens to be a little bit more fancy one; and all you have to do is save it as a .htm file.0270

Here is a brand-new file: say I want to write something on the Internet.0281

I click Save, and I am going to call it Hello; and the most important thing is that you give it this .html extension.0295

And of course, you need to be aware of where you are saving it.0306

And then, go over to your browser and find your file and open it.0311

And now, you have just created your first web page.0320

This is as valid of a web page as any other website on the Internet, even though all you have done, really, is some text.0324

If you hit Ctrl+U, this is the source; and this is the text that you edited here.0330

And it is the same as the source, clearly, because you haven't put any HTML in yet.0338

And that is all you really need.0344

So, if you are starting to make a website, you probably want to start with some content.0347

Here, I have prepared the content for a basic web page that I want to create.0353

And I recommend that, as you go through this course, you do the same thing:0359

you create a basic website for yourself, and as you take each lesson, you can add the different parts0362

that you are learning, and add pages and links to them, and use it as a reference for yourself for later on0369

(and also, just a way to show off what you are learning!)0376

So, this is an entire website here; and right now it is just a page, but it is going to be a website, because it includes plans for links to various places.0379

And I am going to show you how to mark this up in HTML.0391

The first thing that is important in an HTML page is the html element.0393

These little tags indicate that this is an element.0401

And then, at the end of my content, I am going to put the corresponding closing element.0406

This little slash indicates that this ends the element that began up here.0413

This is start HTML; end HTML (or stop HTML).0420

Now, the next thing I want to do is add a title here.0429

And the way to do that is: a title, you are probably familiar with, shows up up here, in the top of the page--not actually part of the main body.0434

And the way that you mark this up is using the head element, and then the title element.0445

I am going to move this little note I gave myself.0454

And that is going to mark this up as a head with a title.0463

Now, the main body all is going to occur here; and of course, I need to end it.0469

So, I am saving that; and I am going to tab over to the web page; and this is the content that I had prepared.0481

And as you can see, it is not formatted at all; it is not marked up.0489

The computer doesn't know what to do with it.0492

Now, I will refresh; and the title changes, although the rest of it still needs to be marked up.0494

This is going to be the first-level heading; save; refresh.0503

I think I hit Ctrl+A instead of Ctrl+S.0514

And things are starting to come together.0520

Now, say we want to include an image; I have this image that I have prepared of myself, and I want to include it next in this website right here.0523

The way to do that is with the image tag; and you give it a source, actually, to indicate where the image is.0532

Save, tab over, refresh; and here is my little image.0542

This next group right here--this group of text--is a paragraph.0549

And the HMTL semantic tag for marking this up is the <p> tag; it stands for paragraph.0554

And you may want to look in here and add some additional markup, like if I want to emphasize this word.0563

OK, save, and refresh; now this is marked up as a paragraph.0576

And this word has been emphasized with the <em> tag.0582

It has a lot of other tags that you can use.0584

Now, here I am going to have a couple of second-level headers; I am actually going to do all of them at once.0588

And I am actually just going to copy this and paste it; that is a bit quicker.0598

And now, I come over here to refresh and double-check again; you can see that it is marking them up a little bit larger; OK.0613

Now, this is going to be a list of links of things that I have mastered.0627

So, since I have obviously mastered how to create a web page, I am going to have it link to itself.0631

And the way to link a page to itself (which is kind of a silly thing to do) is to put this little hash code, which will just refresh the page.0639

But just for the purpose of demonstrating: this anchor tag has a hyper reference attribute;0648

and then you put the URL of the page (which, in this case, is itself); refresh; and this has become a link.0655

So now, if I hover over it, my cursor becomes a hand; and if I click, it refreshes and goes back to the same place it was.0662

And you will notice that this little hash has been added to the URL.0668

Now, this is a list of some things that I will master by the end of this course.0673

In fact, it is an unordered list (ul); and this is the first list item (li) and the second one, and so on.0680

These are all things that, if you take this course all the way through, you should master by the end: stop ul.0697

Now, you will notice: I actually didn't put the closing list item tags for all of these.0705

And that is because these are self-closing; this is something that HTML5 allows, and other versions of HTML; something like XHTML wouldn't.0711

I am going to save this and show you what a marked-up list looks like; there we go, and now it is a list.0721

And as you go through, you can take these, turn them into links, and add them to this here--things that you have mastered, as you master them.0733

And then lastly, this is going to be another unordered list.0745

Stop unordered list; and the list items...although they are actually going to be a list of links.0752

I am going to put the link here, and I am going to put the full URL.0764

We don't need little end thing anymore.0776

And I suggest that you keep track of websites that are very helpful as you go through this course (and just in general),0780

to reference them later; and you will always be able to find what you need quickly.0791

If you remember looking at something, and you can't find it as easily, it can be frustrating.0798

And notice that the editor that I have here automatically colors my text, depending on the syntax that I use.0813

As it recognizes that I have completed an attribute, it turns it blue.0827

And when I close off the elements, it changes the colors, as well.0833

Let's take a look, after I save and refresh; and here is my list of links.0839

OK, now this down here is actually a footer; it has some information about the copyright and how to contact me.0849

That is what the footer tag is for; and this is a strong emphasis, because I am trying to point out that this is something that needs to be looked at.0860

However, the emphasis doesn't change the meaning of this.0876

And that is part of the meaning of the strong tag.0881

All right, the last thing I will do is: I am going to mark up this email address with mailto,0885

which starts out the same as a normal tag (and I am going to copy this), but you begin it with mailto, and then a little colon.0900

And this is set up so that, when browsers see this, they will automatically know that it is an email address.0911

And they will think about opening an email program when you click on it, depending on how you have it set up,0918

although this is probably a bad idea to put on the general Internet, because, because it is semantically defined0924

that this is an email address, now computers know that this is an email address--which is the point of HTML--it is semantics--0932

but it can be bad for email addresses, because some computer programs are web crawlers0939

that are spam-bots, trying to collect information so that they can send out spam.0944

So, you need to use an obfuscator to make sure that this is not visible.0949

But that is more of a JavaScript sort of a functionality.0954

All right, so this is our very first website.0959

And it seems like there might be something missing; it is just basic HTML at this point.0963

You can go in later, and you can go into the CSS course if you get bored and don't feel like waiting, and learn how to use CSS right away.0969

But I have prepared a little bit of CSS--just really basic CSS; I am going to put it up in the header here.0979

This is actually head, not to be confused with the header element.0988

And this CSS will give a couple of styling rules for the body element, and some of the other things,0994

so that when I refresh, it is starting to look more like a real website.1003

This is the first website, set up like this--very nice-looking.1010

Thanks for watching

Welcome back to

This lesson is going to be an introduction to some of the theoretical basics of what the Web is.0002

And then, the second part of this lesson is just a quick overview of the history of the Web.0010

It is kind of important to know the history of the Web, because the Internet, and especially HTML,0018

has been developed and influenced a lot over the last 20 years.0025

And things today depend a lot on things that happened in the past.0030

So, in order to understand current HTML, you really need to understand why it is that way.0034

And that is all historical reasons; in fact, a lot of times throughout this course, you will hear me0040

say something like, "and this is this way for historical reasons."0044

And understanding some of that history can really go a long way towards helping you understand HTML.0049

The Web: what is the Web? Basically, when you think of the Web, it is you on a computer;0059

and you are downloading a document from a server, up in the cloud or on the Internet somewhere.0067

This is the basic, lowest, simplest way of understanding the Web.0074

When you download a document from a server, you are on the Web.0081

Now, what really makes the Web interesting is that these documents can contain links, which may point to other documents.0087

And then, those in turn may point to others, which may point to others.0096

And you can get a lot of these documents all linking to each other.0100

And each document, of course, is accessible by your computer, and it may have its own server behind it; it may even be on the same server.0106

And you can see, as I draw this out a little bit, that it starts looking something like a web; that is why we call it the Web, right?0115

Although this is very simplistic--it is not always going to be in this little spiral-y shape,0128

because each one of these documents can have hundreds of links--even thousands of links--all over the place.0133

And so, it is just a big mesh, and it is constantly growing.0139

And every single piece of the Web is accessible from every other piece of the Web.0143

That is sort of the idea that Tim Berners-Lee had before it even happened.0150

It didn't just happen naturally; it was planned this way from the very beginning.0154

A web page is actually a little bit more complicated than that previous diagram showed.0160

It is not just a document with content on it.0166

You start out with content that you want to send across; and you want it to eventually show up in a browser as a web page.0168

But it is going to be more than just pure content.0176

It is going to have maybe images embedded; it is going to have styling.0178

It is going to be marked up in a way so that the browser knows what to do with it, and so you can interact with it.0182

And that means that a simple document actually is going to be consisting of many documents.0187

This represents just your content here; say, if you are putting a website up, and it is just a bunch of paragraphs of text; this would be the content.0194

But the content wouldn't even include things like breaks in between the paragraphs; it would just be straight text.0206

HTML comes in (this little wrench) and you can see: it is kind of embedded with the text.0212

This HTML--the purpose of HTML is to mark which sections of your document mean what.0219

So, it will see this little paragraph break in here, and it will mark it up that this is a paragraph; this is a paragraph.0227

It will point to images; it will distinguish links; and it will do all of that.0233

And it also serves as sort of a hook for everything else in here.0237

So, this will represent CSS and styling, which can be used to change the colors, the look, the shape, the size,0243

the arrangement, the position on the page, and a lot of other things, and even some interactive things.0251

And that needs to hook into the HTML, which points to the content.0257

Scripting also hooks into the HTML and allows interaction with the content; and then, embedded data0261

(such as images, video--any sort of data) all ends up hooking into the HTML, which is how the content is connected.0268

Now, all of that is what makes a simple web page.0278

It is even more complicated than that, actually, because there is not just this simple document marked up,0288

and then a couple of other types of technologies used to create the page.0296

There is a browser involved; and if you are on the Web, you are getting it from a server, which has some back-end things going on.0301

So, let's evaluate this one more time, looking at how this is all put together.0309

You have the server up on the Internet somewhere, and you have your computer.0317

And your computer is going to load up a browser, which is going to connect to your server via HTTP, Hyper Text Transfer Protocol.0322

And it is going to request a certain document from the server.0335

Now, there are a lot of different ways that this can be set up; but most likely, the server will have a server-side script0342

(something like PHP or ASP--there are a lot of different ones), and it is going0350

to pull from a database some information, and create the document that you are working on.0355

So, you have the request up from here through the browser directly to the server,0365

which talks to the server-side script, which draws information out of the database,0372

maybe pulling from several locations, and compiles a new document, which it is going to return to the server.0392

And then, the server sends this document out to the browser, along with all of these other things that we talked about that need to be included.0401

The HTML will be included in the document, obviously; CSS scripting, and then any embedded images and any embedded video.0413

All this gets sent to the browser, which then processes it and creates one single web page that displays for you.0424

Now, because there is scripting involved, it can get a little bit more complicated than that.0433

You could send another request through the browser up through the script this time.0438

Say you click on something in JavaScript; and then JavaScript is going to speak directly to the server.0442

And the server may pull some new piece of information out of the database and send it to the server.0448

And then, the server will send just the content here over, down to the browser.0456

Now, notice that this time, it actually doesn't send all of this other stuff again.0461

It is just sending a little bit of content--maybe not even content with the HTML--just content by itself.0465

And then, the browser is going to use the script to insert that into the HTML document and modify your page.0470

There are a lot of different things going on here: all of this transferring between the browser and the server is done with HTTP.0480

The browser itself is working in HTML, and the browser is just one of many browsers that can display on your page.0489

And then, there are new technologies, like Ajax, which allow this sort of connection that I just showed going on multiple times.0500

So, even as it is loading, these connections can be going on.0506

And so, right here, we have markup for the HTML styling, for the CSS scripting, and embedded media--not to mention content.0510

You have your browser and your computer.0540

If this is looking simple, good, because it is not simple--but if it looks simple, you are understanding it.0546

But there is more going on even than this, because there are other whole types of technologies available.0554

Let's look at this again and refresh: something like a content management system lives right up in here, in the server-side scripting area.0564

So, this would be something like WordPress, for example, where you log into the server with your browser,0575

and you are able to connect directly to WordPress, which is a bunch of back-end files, like PHP,0582

that will display web pages to you that will allow you to edit information in the database,0588

and edit these PHP files, and a lot of other files, and modify your website.0596

Then, there are things like FTP, which will have a whole new protocol--not a web browser, but an FTP client,0603

that will connect your hard drive to the server's hard drive.0611

We have your hard drive here, FTP; and you connect through FTP to the server.0616

And then, you can upload files directly from your hard drive to the server, or download them from the server to your hard drive.0626

And these files can be PHP files, server-side scripting, or the databases, or a lot of things like that.0633

There is also offline cache: a lot of times, your browser will be requesting information from the server;0640

and it will know that it already has a copy of it locally; and the server won't send new.0646

But sometimes, you don't have a copy locally; so there are ways to specify that you want to cache files from the server.0653

And then, when you are on your computer, you can be offline so that there is a wall here between you and the server.0662

And you can still access the website.0668

And there is another thing similar to that, called web store, that allows you to store0673

things that normally would have to reside on the server here on your local device.0677

With all that in mind, what is HTML? What is the actual HTML part of this equation?0686

Well, it stands for Hyper Text Markup Language, and it is bound very closely to the content.0691

The content here in a lot of my diagrams won't even be separated, because it is just going to be HTML and content together.0697

And that is because the HTML is defining the meaning of the content, and not the presentation.0704

And so, without the HTML, it is just a bunch of text that means nothing; and it is not useful at all.0712

And there are not even good ways to break it up, if you did know what it meant, because there are no delineators in between all of the content.0718

An exception would be with Ajax, where the server is automatically sending just little pieces of content,0725

and your browser is already expecting that content and putting it in a very specific place.0731

But HTML is basically...all of the HTML elements are ways of putting in the content that is the script (this would be CSS),0737

the scripting, images, and all of the embedded media...and putting them together to make a cohesive page.0748

And that is basically what HTML does.0757

HTML started way back in the day, in 1990.0764

In fact, it has been almost exactly 20 years ago, as of 2010--in a couple of months, it will be 20 years.0770

And it was invented by Tim Berners-Lee: what he did was--he did a couple of things.0777

He made the Hyper Text Markup Language (HTML), and that was used to write documents.0784

He wrote the Hyper Text Transfer Protocol, which was a method for transmitting those documents.0790

And then, he wrote World Wide Web, which was the very first browser, which was used to display them.0796

And that is all the key components of the Web.0802

Right there, you have everything you need (as long as you also have files on a server, and a server, and an Internet connection)0805

to get on the Web and download a document and view it.0817

And this is his browser, World Wide Web, displaying a very primitive web page.0820

This actually may be a slightly later version of his browser, with a little bit of updates.0827

But you can see that it is fairly primitive, in that there are no images; the text is all the same font;0832

there is some paragraph marking going on, but it is mostly just for communicating very basic information.0840

So, really soon after that, some developments started being made, as the Web was actually being implemented.0852

Now, the idea behind the Web was that it would be written in HTML, which was going to be a common language between all platforms,0860

meaning you wouldn't have to...for example, if you write an essay in a Word document,0868

that Word document is only viewable in the program that made it.0875

And then, if you want to transfer it to another program that is not Word-compatible, it is not going to understand how to read it.0878

It is not interoperable; it doesn't work on multiple platforms; and this was an even bigger problem back in the day.0885

The Web has sort of influenced our understanding of the way computers should work.0889

And we tend to think of all applications as being more like how the Web should be now; but it was a big problem back then.0893

There was device-specific markup, and there were platform differences that were almost completely irreconcilable,0901

so that when you had academic people trying to share data across multiple computers,0910

across the world, across multiple types of software, it was a big problem.0916

And so, HTML solved that problem in a lot of ways.0921

And the very innovative thing that it also did is that it connected them from all around the world, instantly, over the Internet.0924

Some problems were, though, that HTML wasn't standardized early on.0935

Tim Berners-Lee wrote a couple of guidelines for how the code in HTML should look;0939

but there wasn't much there, and there were some features missing, as well.0945

The World Wide Web browser was very, very basic, as I showed you in that last slide.0952

And it only worked in the operating system that he wrote it for.0958

So, really quickly, a lot of other browsers were being built, in order to expand the functionality.0961

And this was kind of in line with the idea of the Web, because now you have browsers on multiple types of computers, and that works fine.0968

But the problem is that they were adding a lot of things, as well,0977

which wasn't so much of a problem now; but it came to be a problem a bit later.0980

Some of the early browsers emerged just right away, a year and two years later ('91 and '92).0986

libwww was sort of a port of World Wide Web, and it was ported into C, so that it was available in more contexts.0994

Line Mode was a browser that was just text only, and it couldn't even work in teletype devices.1004

Erwise added a couple of fonts that could be used--multiple fonts.1012

Midas was created for UNIX; Samba was created for Macintosh.1018

So, you start having some of the basic ideas of the Web coming into focus here.1022

ViolaWWW was a big browser early on, and it took over right away.1029

It was created in 1992 from a previous program that was just called Viola, that was just a hypertext document viewer and editor.1034

But he learned about the Web from Tim Berners-Lee and added the functionality to get on the Internet and read HTML.1046

This is Viola hypermedia browser--very primitive, but you can see that it has some graphics and things like that.1052

It was very advanced for its time, because it added scripting, style sheets, and tables.1062

These are things that we use today, and it actually took a while for these to gain traction in all of the other browsers.1069

Where the Internet really took off was the creation of Mosaic.1077

Now, Mosaic was released in 1993, and it was released in Windows, Mac, and the UNIX X Window system,1081

which meant that it was available on all of the major platforms at the time.1088

And it also had a graphical user interface that was easy to use, and it was very easy to install (at least compared to previous ones).1092

So, it really took off; and it introduced a lot of new functionality--most importantly, embedded images and forms.1099

Before Mosaic, if you wanted to see an image, you would have to click on the link to it, and then open it in its own new page.1108

You couldn't embed it directly into the page; so this made pages immediately look a lot more interesting.1115

And then, forms allowed interaction and for the user to input information.1120

And it supported a lot of new features as they came along, as well.1126

This would be an example of what an embedded image would look like; this is the icon for Mosaic.1129

And it could just be right in the page, just like this; and that was very, very cool.1135

They had to create the image tag to do that, which wasn't originally part of it.1138

But there wasn't a standard anyway; so this was something other browsers really quickly picked up on.1142

After Mosaic, the Web took off: Mosaic made the Web possible for the common person.1147

And it is basically responsible for the Internet as we know it today.1156

By the way, NCSA stands for National Center for Supercomputing Applications, which was a department at a university.1161

It is important, because Mosaic, the name, got sold out as a brand; and so, you have multiple Mosaic browsers, even though they are not the same browser.1169

The browser wars began as some browsers branched out of NCSA Mosaic and started competing with each other.1181

The people that originally coded NCSA Mosaic left it and created a company that was eventually called Netscape.1194

And obviously, Netscape, the company, created the Netscape browser.1203

At first, they called it Mosaic Netscape; and then they had some other names.1208

But eventually, they just settled upon Netscape Communicator, Netscape Navigator, Netscape Browser, and names like that.1214

And what was popular in the 90's was Netscape.1220

And the code names for all the Netscape browsers was Mozilla, which was short for Mosaic Killer,1224

because they came from Mosaic, and Mosaic was the most popular browser of the time,1231

and they wanted to make a browser that would be even more popular and "kill" it, which they ended up succeeding in doing.1235

Meanwhile, NCSA, at the university, licensed the Mosaic brand, not the Mosaic code, to Spyglass, which was a company.1241

And Spyglass wrote a completely new browser and put the Mosaic brand on it and released it; and it became very, very popular.1251

So, you have the Spyglass Mosaic and NCSA Mosaic now.1261

Spyglass Mosaic made their money by licensing out the browser to different companies.1266

And eventually, they licensed it out to Microsoft, which made all the other companies that they licensed it to quite angry,1273

because Microsoft was in competition with them and beating them.1279

But eventually, Microsoft took this, and they had the resources to really put effort into it.1284

They had more people on the Microsoft team working on the browser than the entire company at Spyglass.1291

So, Internet Explorer was basically just Spyglass, with a lot of modifications.1300

And I say Spyglass, because it wasn't Mosaic, as in NCSA Mosaic; it was the Spyglass Mosaic.1309

The two major teams now (browsers) are Internet Explorer and Netscape.1317

Both of them are based on the original Mosaic.1323

Netscape here had some Mosaic names; and this is Spyglass Mosaic, which became Internet Explorer.1329

And there were a lot of really quick revisions going on; they were adding a lot of new features and trying to compete with each other.1335

So, they were upgrading really quickly; this was in the middle to late 90's.1342

There were some problems with this that came up.1349

And they kind of came in conflict with some other things that were happening in terms of the Web at the same time.1353

In 1995, there was the World Wide Web conference that was the first convened; and it has been every year since then.1360

And that is the W3C, the World Wide Web Consortium, which was an organization of multiple browser vendors1369

and people interested in the creation of Web standards to have some agreement on how to do things,1377

so that all of these different programs and systems would work with each other,1383

because obviously, if you make changes to HTTP, how you are using, if somebody doesn't know about that,1386

they are not going to be able to use the protocol correctly.1392

And if you are creating a website that you want people to view, that is not good.1395

So, the WWW conference and the W3C were good things.1399

Also, the HTML 2.0 specification was created in 1995.1405

This was the first specification that standardized a lot of HTML; and it incorporated all of these innovations that had happened,1410

with all of the browsers, over the last few years--Mosaic and all these other ones,1418

creating the image tags and things like this; and it was really good.1422

Furthermore, all of these technologies (HTTP, HTML, etc.) were made royalty-free.1427

And this was, in part, because Gopher Protocol, which was another protocol that was being used,1434

and was created by a university a little bit earlier--the university decided1440

that they wanted to start charging people to use the Gopher Protocol,1445

which made people very angry; and they all moved over to HTTP and the Web, which was good for the Web.1448

And it was clear that this couldn't happen again, because it put in jeopardy everything that the Web was.1454

So, they made it royalty-free forever.1460

However, despite HTML 2 and even the HTML 3.2 specifications being published, browsers were widely innovating.1464

They were competing with each other, and they were creating their own new tags.1473

And it was a mess; basically, you had to write multiple codes for each page in order to support the different browsers.1479

Or, you just had to block out the browser completely, which was an even worse idea, but a lot of people resorted to it.1491

And so, standards and cross-browser movements sprang up all over the Internet.1497

And then, as the 90's went on, Internet Explorer, especially with versions 3 and 4, released very good browsers and basically won the browser wars.1502

And it took over the market share; it was up around 99% at one point.1512

And Netscape eventually just went out of business, but not before1517

they open-sourced all of their code and created Mozilla, which became a browser on its own.1522

Netscape and Internet Explorer, because they had been implementing these different subsets of HTML 3,1534

which was a humongous document (and they couldn't implement all of it),1539

and also because they were added their own extensions--things got kind of crazy.1543

There was a lot of presentational HTML instead of semantic HTML.1547

And the solution to all this was HTML 4; in HTML 4, a lot of the extensions and additions to HTML1552

that had been added by the particular browsers were codified and put together into one standard that they could agree on.1563

And then, a lot of the bad code that had been created was kicked out and not allowed.1569

And HTML 4.01 was the very final version--just a little bit of edits.1575

And that was published in 1999; it was last updated in 2001.1580

It has been over a decade since the very first version of HTML 4 was released.1585

And no new version of HTML has been officially released as a recommendation by the W3C yet.1590

And so, there has been a lot of time for browsers to conform to the HTML 4 standard; however, that has not really happened.1598

Internet Explorer 6 was released in 2001, well in time to be aware of HTML 4.1607

And it didn't support it very well, but it was one of the first browsers to really make a good attempt at supporting HTML4 and making cross-browser code possible.1612

But because Internet Explorer, at that time, had complete dominance of the market,1628

they no longer had any real motivation for upgrading their browser.1633

And so, there were no new versions of Internet Explorer for 5 years, until 2006.1642

"Modern browsers" are what we call a browser that has good support for HTML 4.1656

Now, there are a couple of modern browsers, but they didn't really start until after the 2000's.1664

You have been getting on the way there: a big part of that was Netscape open-sourcing their code in 1998,1674

partly because they were running out of business money, and they needed something creative to do.1681

And so, the open source community stepped in and developed Mozilla, which was its own browser,1688

again, named Mozilla--referencing back to the code names of the early Netscapes;1696

only now, it is a real name of a browser--a real browser called Mozilla.1703

And as Mozilla developed the browser, Netscape would use the code that Mozilla made as the basis for the Netscape browsers that got released after that.1707

And then, a couple years into that, Mozilla started getting feature bloat, and getting (a lot of people thought) out of control with size.1718

And that may have had something to do with the fact that they were getting a lot of money from Netscape,1729

and were pushed to create something that would work for the Netscape suite.1734

And so, they focused their attentions to Firefox, which is a slimmed-down version of just the browser.1739

And that was first released in 2004.1744

So, in the 2000's, Netscape, Opera, Mozilla Firefox, and Safari all continued to release new versions.1748

And they advanced well beyond Internet Explorer 6.1758

In the five years between when Internet Explorer 6 and Internet Explorer 7 were out,1760

every single one of these browsers here released four major updates to their browsers, whereas Internet Explorer did none.1764

So, that basically meant that Internet Explorer 6, which had the dominant market share,1775

was the oldest browser, and had the worst standard support--which was terrible,1780

because your code would work perfectly in every browser except Internet Explorer; and it was very frustrating.1785

Internet Explorer didn't really even catch up to where all of the other browsers were in the 2000's until Internet Explorer 8.1791

So, recently, Google has released Chrome, which was based on Safari.1799

And Chrome has been iterating three or four new versions every year for the last few years; and it has developed a lot.1806

Chrome, Safari, Firefox, Opera--all of them, at this point now, are amazing with their HTML support.1818

They are very standards-loving browsers, and they all also (the current versions at least)1825

support a lot of experimental HTML5 features, which is very cool.1830

Internet Explorer 9 is probably going to start competing on this level when it is released just this month.1834

But we will see what it looks like, because this is only the third version since around 2001,1843

whereas all of these other browsers have had many versions to iterate through and advance a lot.1852

And that is basically the history of HTML up to now.1859

And right now, what we are at is HTML5; it is not complete yet, but it is under development.1862

It puts a lot of focus on semantics and removes a lot of elements that are not semantic, and that were presentational.1871

And it also adds a lot of new features.1879

And even though it is not going to be an official recommendation for some time yet,1881

as I mentioned in the last slide, there is already a lot of support for a lot of the HTML5 features.1884

And over the next few years, the support will only increase.1890

Internet Explorer 9 is going to come out this month; Firefox 4 is coming out this year; and Chrome is advancing very, very quickly,1894

and sort of accelerating the rate at which other browsers are developing their software.1902

So, HTML5 is really going to be important in the next couple of years.1907

And it is basically the future of the Internet.1911

And furthermore, it is going to make coding in HTML much simpler, because you won't have to worry1914

about cross-browser coding as much, and a lot of things are simplified.1920

But it also gives you a lot more power; so it is something that you are going to want to learn anyway.1924

And you can use it today; you can create an HTML5 page and put an HTML5 doctype on it, and since HTML5 is backwards compatible, it will work.1928

That is a basic introduction to the Web and the history of the Web.1938

Thanks for watching

Hello, and welcome to

This lesson is going to give a little bit of an introduction to a couple of the web development tools that you can use to create your websites.0002

And it will also help with the development process for getting your website up on the Internet.0011

The first and most important thing that you will need, probably, besides a text editor to create the code, is a browser.0020

It is actually very useful to test your web pages in as many different browsers as you can install on your computer.0027

And you should be familiar with as many as you can, across platforms,0035

especially in terms of the ones that are more popular, market-share-wise.0041

You can also install beta versions of browsers; and this will help you get an idea for what is coming up soon.0046

so that, by the time your website is done being developed, all your users0053

may have downloaded the newer versions of the browsers, and you can make use of it.0056

Or if you just want to keep on top of things for what is coming up...0061

Basically, you need more than one browser, is our typical layout of the website,0065

with content, HTML, CSS, a scripting language, and then media (like images and video);0074

all this, as we talked about before, gets put together in the browser and sent to the screen as a web page; it all gets incorporated.0080

However, every single browser does it slightly differently.0092

Now, the principles of the Web should allow for every page to look the same.0096

But really, what is more important on the Web is that all of this stuff is accessible in every browser, whether or not it looks the same.0103

So, the fact that Safari may make this website look slightly different, and output a Safari page instead of a Firefox page, is not a problem.0112

It doesn't have to be pixel-perfect, looking the same in every browser.0121

What does need to happen is: all of this content needs to be available, especially the plain-text data and the image and video data.0125

It all needs to be accessible; and then, scripting needs to be available to use, if it is important for the functionality of the site.0137

This styling is not so much important; and the HTML, of course, is what makes it all possible.0146

But every single browser is going to be slightly different.0152

So, just to show you, I have a couple of browsers installed, just on this Mac here.0155

I have Firefox, Opera, Google Chrome (the latest version), and Apple Safari.0161

And throughout this course, you will see me using a lot of these different browsers for different demonstrations,0169

depending on what I want to show, and if something is maybe a newer feature and is not supported,0174

or if there is a certain bug that I want to point out.0179

And you can install a lot of browsers, and you can have them all open.0184

And you can, as you are editing code, refresh it in different browsers and see the changes in each browser.0188

The next most important thing that you will want to get familiar with is Firefox add-ons.0196

I highly recommend developing in Firefox, just for convenience' sake.0202

Obviously, you need to check in other browsers; but I tend to, when I am doing browsing, use Chrome,0207

because it is faster and has some features that I like.0214

But when I am developing, I use Firefox, because it has add-ons.0216

And this is the URL to an entire section of their add-on website that is dedicated just to web development add-ons.0220

This is their add-on website,

And I am going to show you three add-ons, really quickly, right now.0235

So, click over to Web Development; and you can see the featured add-ons.0240

And then, always look at the top downloads; these are the most important ones.0245

You will see Firebug and Web Developer right here, already.0249

I am going to install Firebug first; it is quite simple to add an add-on in Firefox: install and then restart.0253

The nice thing about Firefox is that, when it does restart using that dialog, it will pull up all the windows that you had running already.0278

Let's give it a second for it to load; and now, Firebug has been installed.0296

And you can see, right down here in the corner: there is this little bug, and that is Firebug.0306

Let's go to a website--say if we want to analyze some of the things in this page...0312

Say you are visiting this website, and you notice this little curved thing up here,0326

and you want to know how the web developer did that, because you want to do something similar.0333

You can right-click on it, and click on Inspect Element (if you have Firebug installed), and it pulls up the Firebug dialog down here.0337

And what this shows you immediately is the HTML DOM.0354

Now, as I hover over the different elements here, it will highlight them above; and it zooms in on the thing that you clicked on initially.0358

So, you can see that, in this case, the web developer is using little images that he has placed in the corners of this div to accomplish that.0367

And then, over here on the right side is the style that goes for whichever element you have clicked on.0378

If I want to modify that style, I can actually do it on the fly.0386

Here is the top; I can move this, and you can see that it is moving these little, tiny squares down.0392

They are a little bit small, so it is hard to see; but I can do things like start disabling things.0403

And I break stuff, because I have disabled it; and there are other neat things I can do.0409

There are a couple of other tabs, like the CSS tab that lets you edit the whole CSS.0416

The Script tab is disabled by default to make things a little bit quicker; but it will enable you to debug your JavaScript as you go.0421

DOM Navigator shows you all of these different elements in the DOM that are calculated, instead of having to go through the HTML by hand.0429

And then, of course, you can always click on Edit and manually edit the HTML here by hand, as well.0437

And then, the console is another thing that lets you...especially for JavaScript, you can put little notifications in there0445

that will pause the loading of the page until you are done and ready for it to be loaded.0453

That is Firebug; it is extremely useful for navigating around pages, looking at the code,0460

getting directly at the part that you want to see, and things like that.0466

Let's go back to the add-ons page, and I will show you the Web Developer toolbar...add.0472

Just give it a second to install; and I am actually going to add another one, just so we don't have to restart again--ColorZilla.0493

And I will restart Firefox.0514

The Web Developer toolbar has some of the same functionality as Firebug, although it has a lot of other new things, as well.0517

You can see: this bar has been added up here.0529

Let's go back to Educator.0532

Now, let's say that I wanted to see what this page would look like without any CSS.0538

I can disable styles, and then I can just see the raw HTML and the content, and how that is displayed.0545

This is a well-made website, because I can still navigate it with the CSS disabled.0555

I can also disable things like JavaScript and images; I could disable all images, if I wanted to.0561

There are a couple of broken images up here.0575

And another useful feature is the outline tool.0578

If I wanted to outline all of the block-level elements, now I can see, just looking at the top,0583

without looking at the source, where a lot of these elements are put together, and how this page is constructed.0593

Before, I showed you how to look at this corner here to see that it is made of a little image with a block-level outliner on.0601

I can just see right away that there is something going on there; and I can see what is going on.0611

And that is that for Firefox add-ons.0620

All right, so domain names and hosting is something that you are going to want to learn about0625

if you are actually getting to the point where you are putting a website up on the Internet.0631

Now, hosting is, of course, when something is on a server, and it is made available to users to download and view.0636

And there are a lot of ways you can host on existing websites--like your school's or your ISP's will often offer a little bit of space.0645

And your URL to your space will be something like first and last name, or something like that.0653

If you want to have your own domain, like, you need to first buy a domain.0664

Go to any Internet registrar (like is the most popular one right now; Network Solutions was the original one).0670

And you can purchase a domain name, and then what needs to happen is: you buy hosting from another company,0678

or you can do it all through the same company.0689

GoDaddy provides hosting; a lot of companies provide hosting; you can get a hosting for as cheap as $1/month to as expensive as $1 million/month.0691

I don't even want to guess what Google's hosting costs would be if they had to put a number on it,0701

because they have server farms all over the world that are just incredibly fast.0707

But you get what you pay for, to some degree.0712

If you are going to have cheaper hosting, you will get more downtime.0716

You may have a server that is shared with thousands of other users on that same hard drive on the same server.0719

So, you can get slow; you can get more vulnerable to..0726

if one of the accounts gets hacked, and it has viruses, yours may be affected as well--things like that.0729

Once you have bought hosting and you have bought a domain name, you just have0737

to go into your domain name settings at the registrar and change the name servers to point to the domain of the host.0741

And then, as long as you have files on the dedicated folder on the host, then people going to your domain will see your files.0750

And that is pretty simple; where it gets interesting is if you want to install a web server locally, on your own computer.0758

Now, you can do this, and it will behave a lot like a server would on the Internet,0773

which means you can have back-end programming; you can send0779

with HTTP requests and with HTTP headers; different MIME types of things...0784

And it makes your development a lot simpler, if you are dealing with anything that is very complicated,0790

that would involve a server negotiating with the browser, or any sorts of interactions0794

that assume that you are in an online context, that don't really work offline or locally.0802

I am going to pull up Firefox really quickly, and we can go to Apache.0810

OK, I think I may have CSS disabled, or images are disabled...there.0836

This is the Apache Software Foundation's website; and they are open source, and they developed the HTTP server,0847

which is the most common (especially for cheaper, like Linux and UNIX hosting) type of web servers; and it is very secure.0856

And because it is open-source, you can download it and install it on your home computer.0866

It used to be kind of complicated, but it has gotten very, very simple now.0870

You can just go to their website here, click on Download Link, click on the version you want to download, and then scroll down to the list of files here.0874

Now, there are a couple of UNIX files, and then there are two Windows files.0889

This binary would be if you want to build it yourself; this is just an easy-to-install one.0895

So, you can click on this: I am on a Mac right now, so I won't do the Windows version.0903

But download it, unzip it, and then install it; and you will have, pretty quickly, an Apache web server running on your home computer.0909

Now, you will have to do some configuration; and if you want to install PHP, for example,0919

so that you can use some server-side scripting, you can do that.0924

But very quickly, you will be able to play around with that; and it will make a big difference0927

in your understanding of problems that you might run into when dealing with the server that you are hosting in, as well.0931

Now, you will notice that Mac is not on here.0938

Mac (and Linux, I think) already have an Apache server already installed.0941

And you just have to go find it and enable it in your settings.0947

Last, this part here is what-you-see-is-what-you-get editors, or WYSIWYG.0959

You will often hear people call this just "whiz-ee-wig," which I always thought was its own word; but I guess it comes from this WYSIWYG.0967

Now, WYSIWYG editors are editors that don't always give you exactly what you see, despite what the name says.0976

And that is partly because rendering will be different in every browser and in every operating system, etc.0988

But what you will get is a rendering of what it is going to look like as you are editing it.0996

So, the normal way of a web developer coding might be to code the content directly in HTML,1001

lock in all of these things, and then send it to the browser; so they are in a text editor the whole time.1013

With a what-you-see-is-what-you-get editor, you are not looking at code so much1018

as you are looking at a page that is being rendered similarly to how a browser would,1021

depending on which what-you-see-is-what-you-get editor you are using.1028

And then, you can click on little parts of your website that you are looking at and edit it (paste things in).1032

And the WYSIWYG editor will take care of all of it for you.1041

Now, this is actually not the greatest thing, because it is going to be using computer-generated code,1046

and it is probably not going to be standards-compliant, and it is probably not going to be the most efficient.1052

And it is probably going to be a big mess.1056

Now, there is a lot...Dreamweaver is very, very popular, and a lot of people can use it develop websites1061

that otherwise wouldn't have the technological know-how to make and produce websites.1067

However, you do need to still know a lot of HTML in order to really get it to work,1074

because there are going to be so many problems that you are going to have to go in by hand and add things in yourself.1079

And WYSIWYG editors...there are different scales of them.1086

There are ones that give you a very close approximation as you are editing.1092

And then, there are the ones that just show you the basics; they might show you just italicization and different sizings of fonts and things.1097

But they won't show you some of the more complicated CSS styling and things like that.1106

Now, a content management system is another way for someone who does not necessarily have a lot of skill,1112

or maybe just not a lot of desire, in terms of going back and coding and source coding.1121

A content management system will run your website for you.1129

They often include WYSIWYG editors as part of the editing system.1134

But you will login to your content managing website, and it will show you a list of different files in the database.1137

You will connect up through JavaScript and through your HTML, perhaps forms, to your server,1146

which is going to connect to a lot of server-side script--for example, in WordPress; these would be PHP files.1155

And these PHP files will allow you access to a lot of different database files that are, for example, blog posts and images and things like that.1162

And you can edit them right there from your browser--all of this right from your browser.1170

And all of it is managed by a very complicated set of server-side scripts.1175

And those server-side scripts not only manage the content, but will also allow you to view the content,1182

both as a user and as an editor or contributor.1189

And they run all this together; and as I said, they often have WYSIWYG editors built in.1193

Let's look at WordPress: is a place for you to create a WordPress blog on the WordPress server.1201

And I have created one ahead of time,

This just took me a minute to set up, literally--just seconds.1219

And it has some defaults here, and you can customize this a lot.1225

This is what I would look like as a visitor; and notice that the URL is

I can log in, and then once I am logged in, I am seeing the options to make a lot of changes to my content.1235

So, WordPress is blog-focused; you will see posts here, and there will be a list of all your posts.1256

You can also add pages, and there is a lot of other stuff you can do.1264

Click on this post, and then I can edit my post directly without even needing to upload anything to our server, download anything...1268

This is it right here; and you can see, this is partially a WYSIWYG editor.1276

If I write some text, and I want bold, I can highlight it and click this little button, and it emboldens it.1281

I can also import images and things like this.1292

And then, when I am done, I click Update; and then, I can view the post.1295

And it pulls up this post that I just created; the text that I want bold is what I added right there.1301

WordPress is one of the most common, and it is also one that is used for blogging.1308

There are a lot of other ones, and they can be focused on all sorts of different things.1315

They are very, very powerful and very useful, especially if you know1322

how to get into the server-side code and modify the program to be the way that you want it to.1325

WordPress is a great example, because it is open-source, and you can modify all of these PHP files on your own,1331

if you know a little bit of PHP, to make it do anything you want, in addition to looking any way you want.1337

The last thing I am going to talk about in this lesson is file transfer protocol, also known as FTP.1347

Now, if you are not using a WYSIWYG editor that automatically takes care of this for you,1354

or a content management system that takes care of this for you, you are probably going1358

to be making files by hand and uploading them by hand to the server.1363

And you should probably learn how to do this at some point, because it is a very useful skill to have.1369

And even in a content management system, you are going to do this from time to time.1374

For example, when you are installing WordPress, you don't have to go to

You could use, which allows you to download all of the code for those PHP files1383

and install your own version of WordPress content management system on your domain.1389

And then, you have complete control over it.1394

You just upload the files, do a little bit of installation...and you have it there on your server, ready for you to use.1397

So, you need to learn FTP.1405

The concept of FTP is: instead of a browser here being the negotiator between your computer and the server, you have this FTP program.1409

And every computer has FTP installed by default--in the command line, though.1418

But if you want to install FileZilla, which is another open-source program, you can do that.1426

And this is a Mac, and it is installed; it will also work on PCs and Linux.1433

It is a very convenient way of doing this without having to learn too much.1439

The basic idea is that you have some files on your hard drive; here is your hard drive; here is the server's hard drive; and here are your files.1446

And you want to upload them, so you connect through your FTP program to the server.1454

You have established a connection; it sends back a response--"connected OK."1460

And then, you can access your hard drive and either upload directly into the hard drive, or you can download directly from the server onto your hard drive.1464

So, the way that this looks in practice is: login; now, we are here connected on my server;1478

these files here on the left are my local files on my hard drive; these files here on my right are on the server up in the cloud.1485

And if I want to download a file--maybe even a file that is not normally visible to most users--I can click on it and drag it over.1493

And you see some code fly by, and I have downloaded it.1499

And then, the same thing can happen for upload: it is just drag it over, and it uploads.1504

You can select multiple files; you can do a lot of things, like changing permissions on the files on the server.1509

You can access the htaccess file, which will just be a file with a little (this cursor doesn't like double-clicking) period in front, and then htaccess.1515

And it has a lot of settings for your server; you can modify how you are going to send MIME types based on the file extension, and things like that.1528

And overall, it is one of the most fundamental ways that files are transferred for web developers.1538

It is not really used as much in a user system, because this is designed for sending files.1547

All HTTP sends files just fine, as well; and some content management systems will use that.1553

That is a good introduction to a good number of the tools that you will want to use in becoming a web developer of some kind, and doing web development.1561

And you will run into a lot of other tools that you can use.1573

And you may, depending on what you are doing, need additional tools for different things.1577

But this is the basics that everybody is going to run into or need at some point.1581

All right, thank you for watching

Welcome back to

This lesson is going to be on generic web page structure and the metadata elements that tell you information about the web page.0002

The first tag or element that you are going to write on any web page is going to be the doctype.0014

The doctype is, according to the specifications of HTML5, not technically necessary.0020

However, all current browsers are going to render your code incorrectly if you don't have a doctype of some sort.0027

This is for legacy reasons: basically, back in the days when everyone just wrote "tag soup" code, there were no doctypes.0034

And then, when they implemented standards with HTML4, you needed the doctype0044

to tell the browser to render it correctly, instead of the old way; and so, it was backwards compatible.0049

And now, HTML5 is not actually going to keep versioning up; they just want it to be that HTML, from now on, is going to be compatible with this.0054

So, that is why we have just html as the doctype, instead of some long, complicated string.0063

If you are familiar with HTML4, that is what you are probably used to.0069

And it was just really complicated: this is just simple, !DOCTYPE html.0074

That identifies it as code that is standards-compliant, and it renders it in standards mode instead of quirks mode.0078

So, let's tab over and get started with some code on our new page.0085

The first thing you are going to write is the opening carat, and then the !DOCTYPE, and then just html.0094

And there is no closing tag for this; that is it.0103

Now, the next element is the root element, which will always follow immediately after the doctype.0111

And it is sort of the top or the bottom of all other elements, depending on how you look at it,0126

because all other elements are actually descendants of it; they are contained within it.0133

It is a good place to set a language; in this case, I put that the language is English.0139

You can learn the language codes from some other specifications; depending on what your language is, you will probably already know it.0144

But this will filter down into all the rest of the web page.0152

And then, if you have other places down on where you change language,0156

you can put the new language for those specific elements; and it makes things work nicely.0158

HTML...I am not going to put the language in this example, just to keep it a little simpler.0167

And always remember to close out your tag.0171

Now, all the rest of your web page is going to go in between these two tags here,0174

because your entire web page is going to be written in HTML, and then it may string other things into it.0180

But it is basically an HTML document, so that is why everything goes in there (of course, except for the doctype).0185

And just to note, you technically can put spaces (whitespace or line returns), and then also you can put comments, above the doctype.0191

That is the only thing that is allowed above it.0206

Anything else, you put in its proper place in the HTML, depending on where we are looking.0208

The head element is the element that goes directly underneath the HTML element.0220

And it is always the first one; there are only two elements that go underneath the HTML element.0225

It is the head element and the body element, and they are siblings; and they are directly underneath the HTML element.0231

Any other place is going to cause your code to be invalid.0239

Now, the head element is what the rest of this little lesson is going to be about.0243

It is information that talks about the web page; it is called meta-data.0248

And it is sort of like if you were to draw a picture of the website that is going to be like this;0253

and then, say you are going to make the website be a person--they are like this, right?0262

So, their head is actually above where the page is; you don't see the information in the head, but it is also the most important information,0266

because without it, the rest of the page doesn't make sense; the browser doesn't know how to render it.0274

You want to think of the head as important, but don't put content there.0280

The Internet is a shallow place; we are only looking at the body; but the head is also important.0287

So, this is a basic layout of a basic web page now.0294

You have the header here, right underneath the HTML, and then the body.0297

Content is all going to go here, and then the meta-data is all going to go here.0303

Let's hop over to our code and fill that in a little bit.0307

So now, we have all of this set up; now, in the head, we are going to spend the rest of the lesson looking at what fills up the head.0322

One thing to point out is that the head element is different than the header element.0348

The header element is a new element in HTML5 that was introduced to help make making web pages' layouts a little bit simpler.0354

Back in the day, web page layouts (if you had a standard layout like this)--you would have divs:0363

you would have a div and then give it an ID of header, and then you would have a sidebar and give it an ID.0369

You would have a div for the footer; you would have all divs everywhere, and then give them different ID's based on that.0374

And HTML5 simplifies the process by making individual tags for each of these different things from HTML4.0378

But the header is part of the actual layout; it is part of the body, because it is part of the content.0386

If we were going to draw our little box again, the box would be here, and the head is going to be up here above it again.0392

So, even though it looks like header should be its own head, it is a subset of the HTML header information that goes for the web page itself.0400

The title element is the only element that goes in the head element that is required.0413

If you don't have the title element, your page is going to fail validation.0419

The title element is just simply the name of your document.0423

It is important to keep in mind that you want it to be context-insensitive, because this is going to be used in bookmarks or links,0426

and it needs to still make sense as a title.0436

It shouldn't be dependent upon your user being within the context of your website, or coming from a certain link, or something like that.0438

And it just nests right in here, inside of the head tag.0446

Now, you notice, in this title example I have given: I am using these character codes,0450

because I want it to actually look like these little characters.0456

And if I just put the open and close carats in, it would cause a syntax error; so I am using character codes.0461

And the head title will actually read that and put it into the title correctly.0468

Set a title; and we are going to call this Simple Webpage About, and then we are going0480

to type the character code <, and then >, and then close the title.0490

Now that we actually have a piece of content being this title, besides just the structure,0507

we can tab over to the browser and take a look at what it actually looks like.0512

If you noticed, this part right here just refreshed, and it now has the title in there.0518

I can't quite see the whole thing, but it is there--trust me.0527

OK, the base element: the base element is a convenient tag, because it allows you to set a base location0541

where all of your links will automatically start from, instead of having to type in the full URL to every link that you use on your website.0548

Especially if, for example, you are coding pages on, you don't want, every time you are linking to something0555

or including an image, to have to type this into the hyper reference every single time.0562

This tag will just automatically put that in the beginning of it.0567

It is a self-closing tag, so it is a bit simpler to deal with; it doesn't have any content in it besides the hyper reference itself.0571

And it will go right after this title tag; let's put some indentation here to clean things up a little bit, so base would be a...0583

Now, let's say that we are on, and we are doing a web page that is specifically in the Computer Science directory.0601

We can add this on, and it will change us to be in the Computer Science directory,0610

so that if we have links that are always going to be linking within the Computer Science directory, we don't have to type that in.0616

Now, if you are on a domain anyway, the default root is going to be relative to the domain.0623

So, it is going to come right up to anyway.0629

So, by adding this in, we can save ourselves from having to type Computer Science before each part.0631

And then, it just makes things a little bit simpler.0637

Let's build up the web page a little bit now, so that we can show some examples of the links.0640

We are going to make a nav; these are going to be a list of links--this is a new HTML element in HTML5.0647

And we are going to make an ordered list, list item, and then a href equals...let's make this a link to java.html.0658

Now, I am going to just copy this line really quickly, and then just paste it a couple of times, to make it a little quicker.0678

And I am going to make this an HTML page.0696

And I am going to make this a CSS page, just as an example.0704

And let's close the list; and we already have the nav closed.0710

And while we are at it, let's put in a header and a footer.0716

Don't get this confused with the head tag; this is the header tag--we put a heading in it.0721

And then, let's put a little footer, as well...paragraph...0737

And then, let's put in a content tag, as well; I'm sorry, it's not content; it is actually going to be section, and then ID of content.0753

Because there are going to be multiple sections, we are going to identify this one as Content.0766

I forgot the stop tag there.0772

OK, now let's look at how this shows up in a, fairly simple.0786

And if I hover over this link here (let's pull this up, so you can see it), you will see, down at the bottom, that it shows the full URL.0797

Even though we are not actually on the Internet right now with this browser, it shows the URL and the Computer Science part of it, as well.0809

If we were to delete this, it would just be only the that would be part of the link.0819

Let's refresh; I'm not sure if you can read that, but you should be able to see that it is a little bit shorter.0829

OK, so the link element is a way of importing other content from other locations,0839

and including it into the web page and making it accessible for the page.0855

Usually, it is going to be CSS or JavaScript; in this example, I am using CSS.0859

It has three important attributes: the rel attribute (which is what defines the relationship)...0864

So, the relationship, in this case, of CSS is that it is a style sheet.0869

If you are importing JavaScript, it is going to say javascript.0874

And if you are importing other things, you will probably know what it is, based on why you need that.0877

And you will be looking it up in your references.0882

The type attribute tells what the MIME type is.0886

Don't worry about MIME types right now: again, when you are working with these, you will probably know,0890

based on learning how to do it, what the MIME type will be.0897

For CSS, it happens to be text/css.0900

And then, the last one is just the hyper reference that is a URL to the actual content that you are importing.0904

Let's put a little example link, importing some text.0915

Now, the link tag is a self-closing tag, so you don't need to have a stop tag anywhere after it.0923

The relationship is stylesheet, and then the type is text/css.0938

And lastly, it would be href: this used to be src (source) in HTML4, but we are using href now.0947

And we will just say...whatever the URL to your stylesheet is; we will say mystylesheet, and then close out the tag right there.0955

Now, actually, this isn't going to work, because I have the base href still up here,0966

and there is not actually a CSS style sheet called mystylesheet that is located here.0973

But you can see how the base tag works now--that it is going to take this, and it is going to make this URL start with that.0978

So, it is going to be as if you were looking for

We are not even on the Internet, but even if we were, it wouldn't find anything there.0990

I am not going to fix it, just because it is just an example, and there is no need to have that shown right now.0994

But there are a lot of different types of links that you can put in a link.1002

You can include more than just CSS and JavaScript: this is a list of link types.1009

So, this is for links and anchor tags and area tags.1016

Except for these two and these two, all the rest of these are available as links that you can import data.1021

So, pingback, previous search...there is just a lot of stuff, and this is just a part of the HMTL5 specification on w3c.1029

And you should be familiar with looking things up like this.1039

But then again, for the most part, if you are in a place where you want to import something like license content,1044

you are going to probably already know about it from some other source.1053

You are not just going to decide what this is if you don't even know what it is.1056

But the spec is a good way to discover new material and make sure that the material that you have learned about, you are doing correctly.1059

The meta element is one of the most versatile tags in the header, and the most complicated.1075

It can do a lot of different things; and in fact, there are three types of meta elements to begin with.1081

And each one has a whole subset of things that it can do.1088

It basically fulfills the needs of what every other tag can't do--the meta tag does.1093

It just describes...usually, for example, it will describe information about the web page.1100

The character set meta element is the simplest.1106

You have the charset as the attribute, and then you just put a character set that you want to be using.1111

Most of the time, you are going to be using something like UTF8--just your basic font...or not font, but character set.1119

If you are going to be using something else--maybe a Hebrew character set--you will want to specify that here.1127

Where it gets complicated is in beginning in the meta with the name attribute.1133

Now, the name and the http-equiv attribute meta types both require a content, as well.1139

So, first you identify it as a name with author, and then the content type for author would be this.1145

So, in this case, I have used the author value, and I put my name here, because I am the author of this little segment of code.1154

You can have a lot of other types of information here.1163

You can have description, keywords, copyright information, and you put that here;1166

and then, you put the corresponding information right here in the content attribute.1172

http-equiv is getting into more technical stuff; in this case, it is going to give you a content type.1177

And then, right here--the content--this is playing to that, so your content type is going to be text/html.1186

This is setting the content type for the entire document.1194

Now, normally your HTTP header is going to set the content type.1198

Now, don't get confused because I said HTTP header; it is yet another level.1203

So, our little diagram, our little web page with the head above...this is the HTML section right here.1206

And then, say, it has a layout with the header in it: this is the layout right here.1219

Now, HTTP is going to send an entire packet that is much bigger, that is going to include the HTML header and everything else.1227

And then, it is going to include an HTTP header, as well, that is up here; this is HTTP.1236

Now, you normally don't need to worry about this; it will usually be set correctly.1244

But if it is not set, this can be used to correct that.1248

And there are other types of HTTP tags it uses.1253

For example, the most interesting is probably the refresh, which can be used to refresh any page after a given number of seconds.1260

So, say you have a page that you want to refresh.1269

You can set it up here with an http-equiv of refresh.1274

And then, you give the content of that as the number of seconds that you want it to take to refresh.1288

So, this code right here will refresh the page every two seconds.1295

You can actually do even more interesting things with this.1299

You can set it to refresh to a different page.1301

So, I actually have a page here that I have prepared ahead of time.1307

And this is a mistake here; this quote should end at the end of the entire content value there.1311

So, what this is going to do is refresh the page in two seconds, and then redirect it to the URL that I placed here.1320

And I am going to delete this base href right now, because that will actually affect this URL, as well; it affects the whole page.1328

And we are not going to refresh there; we are going to refresh directly into the directory that this is in.1337

And I have prepared this ahead of time, so it should work if we just tab over there and refresh.1343

Wait two seconds, and it pops us over to this.1349

I had a little JavaScript pop-up, and it has this test page; let's go back.1354

Actually, that is the wrong number there...that is the right page; OK.1368

Now, this is one of the reasons that you don't want to just leave this going, because it is extremely annoying.1381

I am going to comment this out, because I don't want it to keep refreshing over to that page.1388

OK, there we go.1408

OK, the style element is for embedding CSS, as opposed to linking to an external CSS resource.1417

Embedding is usually not the most elegant way, but it can be very convenient, especially when you are in a development environment,1428

because you can put it right in the page, instead of having it externally.1434

You can edit it easily, and then when you want to save it, you can send it off to the external...1437

Now, embedded and in-line CSS are valued as more important.1444

So, if there is a conflict between the externally-linked, embedded, and in-line,1450

first in-line will win, and then embedded will win, and then last of all will be the externally-linked.1456

Just keep that in mind, for specificity's sake.1463

Now, it is always going to assume, when you have the style tag, that you are using CSS.1466

So, it is going to have the correct line type and everything set up for you ahead of time.1470

If you are doing something different, you need to add these attributes in, right here, to correct that.1473

I'm going to add some style to this web page we have going; and I am actually going to pull it in from right here.1483

I have it ready to go: so, what this does is takes the header that I have made, the nav, the section, and the footer, and gives them all a border.1499

So now, you can see: each one of these has a border.1514

It looks like I forgot to close my header; you can see right here, this box is going around all of it.1520

And it is because I made a mistake here: this says header; this says stop head; and that is a syntax error.1528

So, let's correct that, and then it will look better; now, it is correct.1534

And we can actually take it and make it look like a standard layout by copying this footer CSS.1540

And now, when we look at it in the browser, it is going to pull the nav over onto the left, and the right will pull up next to it;1553

and then, the footer will be down below; so, this is your standard layout.1563

And that is all done with CSS.1566

And we can really easily get rid of all that, just by deleting the style.1568

So, the styling is all done with CSS; the HTML provides the hooks for you to define how to do that,1573

but the HTML itself is not actually defining what it looks like, in any sense.1581

The browser has some default styling, but technically, the only styling that we should be counting on is the styling that we are putting with CSS.1586

So, the style tag is very powerful.1596

The last element we are going to look at today is the script element.1608

It is very much like the style element, except it is for JavaScript.1612

The MIME type and everything that is needed will be set to JavaScript by default,1616

so unless you are going to be using something other than JavaScript, just put the script tag in by itself.1621

Now, like the style tag, as well, you can place the script tag anywhere in the head or the body.1626

But it is best to leave it in the head, because technically, it is information about the page.1631

It is not actually content, and it is not actually defining semantic meaning about the content.1637

We can come over here really quickly and put a script tag in.1643

We will just do something simple.1655

Now, on refresh, the pop-up will alert, and we will grab that, and then the rest of the page loads.1669

You will notice that, when I refreshed it, the pop-up shows up here,1676

but the page is empty at this point, and the spinning dial is still showing that it is loading.1680

That is because right now, as it is parsing through the document, it has gone to the JavaScript, and we are still in the head, actually.1686

The head hasn't ended yet; we haven't gotten to any of the content in the body yet.1692

So, that is why there is no content here.1697

Once you click OK, then it will finish parsing through, and you will see the rest of the page.1701

That is the end of our lesson today.1709

Let's look at some examples, really quickly, to test how well you have been processing this new knowledge.1711

Let's say that you have a blank slate here, and you are going to make a new web page.1721

What is the first thing you are going to do? What is the first tag?1725

If you remember, it is going to be doctype.1729

You should be answering along to yourself, as I ask you these questions.1732

So, doctype--and what do I type now? html. That is the correct way to do it.1736

OK, so what is the next tag that I am going to type here in my HTML document?1741

I'm going to type html, because it is an HTML document.1748

This is the root element, and everything else is a child of this.1751

OK, so what is the next tag that I need to write after HTML, directly descending from it?1756

It will be head, and of course, the body tag.1763

OK, so if you have been paying attention, you should see a problem so far; what is the problem?1774

It is that the body tag that I have typed here is inside of the head tag.1783

That is not the correct place for it; it is actually a sibling to the head tag--it is not a descendant of it, so it needs to be next to it.1788

And you may have also noticed that I did not end my HTML tag.1796

The HTML tag does need to be ended; the doctype tag actually does not need to be ended.1801

OK, so as it stands right now, I could save this document and open it in a browser.1810

The question is, "Would it be syntactically correct? Is there something missing, or would it pass validation?"1816

Actually, at this point, it would not, because the title tag is required inside the head; it is always required.1824

This is your bare minimum, technically correct, syntactically correct HTML document.1834

And you need all of these elements, and a title tag, as well.1840

Now that you have gotten this, let's say that you are going to be entering different elements of various types.1847

Would you know whether to put it in the head or the body?1853

Remember, the head is for meta-data, and the body is for content.1856

The meta tag--where would you put that? You put it in the head.1860

The header tag--where would you put that? You wouldn't put it in the head.1864

You would put it in the body tag, because it is actually containing content.1867

The section tag, similarly, is content that goes in the body.1872

The link tag would go in the header; the nav tag would go in the body, because it is navigational content.1875

Or the p tag, for paragraph, would go in the body.1886

Hopefully, you got all those.1890

Your homework is to go on the Internet and look at a couple of websites and view source.1894

An easy way to view source is Ctrl or Command, View in most browsers.1901

If using Internet Explorer, you can do Alt+V, and then C; that is view, and then source.1905

And look at the source, and see if you can find and identify the head.1912

The head tags will be there; there will be a lot of stuff that is confusing in some of them, but don't be overwhelmed.1918

See if you can identify the head section, and then look at the elements that are inside the head section1923

and see if you can identify some that you are familiar with from this lesson.1929

And then, see if you can identify some that you are not familiar with, because the head is where most of the really complicated and advanced stuff goes.1932

And take a look at what people are doing on the Internet.1940

If you do that, you can kind of teach yourself about HTML, just on your own, by looking at what other people are doing.1944

However, you have to keep in mind that a lot of people do things the wrong way.1953

So, always refer back to the HTML5 specification to make sure that you are doing it the right way.1957

This lesson has been good; let's finish it off; and thanks for watching

Welcome back to

Today's lesson is going to go in-depth with links, also known as hyperlinks, anchor tags, hypertext...0003

It is basically the foundation of the Internet, so we are going to spend a lot of time looking at all the different details surrounding it.0016

The most important thing about links is probably that they take you to a location.0025

And when you specify in the link the location you want to go to, you are using a URL or a URI.0031

URL is Universe Resource Locator; URI is Universal Resource Indicator.0037

Now, there is a difference between these, even though most people use them interchangeably.0043

Most people just say URL all the time, but technically, a URL specifies the location of a resource on the Internet0049

and the way for retrieving it, whereas the URI can do that, or it can just specify the name.0057

It could just indicate what the resource is, without actually explaining to the browser how to get there or what the location is.0066

An example would be this link here: this is an actual URL from the w3 website.0074

There is this file right here, w3c_home, which is an image.0083

And this is a URI, not a URL, because it doesn't actually indicate the file type of this file.0089

It doesn't say it is a .gif or a .png; it just gives this file.0095

And it leaves it up to the browser and the server to negotiate together which file to get,0101

because there are actually two files on the server with this name in this location.0108

And there is something called content negotiation that the browser and the server talk to each other,0113

and say, the browser says, "Well, I can't read PNG, so will you please give me the GIF?" and the server will send the GIF.0122

Or it could be the other way around; and that is one of the advantages of using a URI, instead of a URL.0129

But this is just an example; there are a lot of different ways you can put the URI together.0135

But that is just a sort of preliminary introduction.0141

We are going to spend a lot of time looking at the URI, or the URL, and seeing what the different parts that make it up are.0145

Typically, a URL or URI--the most important part is the domain.0155

So, in this example,, a very familiar ".com," is the top-level domain.0161

There are a lot of these: .com, .org, .net, .edu--which can indicate the type of website, or even the country of origin0168

(like .uk would be a Great Britain website).0177

And then, the next one behind that is the actual domain, and then in front of that is the sub-domain.0183

The domain is the main thing that you are usually thinking about when you are getting it.0192

And the sub-domain can be sort of like an entire website on its own, that is a part of the domain, but on its own little area.0197

It used to be that servers, way back in the day, when the Internet was not really the World Wide Web yet--0207

servers would have lots of stuff on them.0214

And Tim Berners-Lee invented the World Wide Web: he was hoping that people would put all their web pages in that www. domain.0218

So, that is why you see, a lot of times, it is indicating that this is the World Wide Web part of the domain.0227

And nowadays, the World Wide Web is the most important part of the Internet, so we don't really do that anymore.0238

Now, kind of like subdomains, you just assume that they are going to be on the World Wide Web.0245

And you use it to divide it up.0250

So, for example, in, it is the maps website on Google, to distinguish it from other parts of Google.0251

This first part here, http, is the protocol: the protocol is the language that the browser and the server are using to communicate all of this data.0259

HTTP stands for Hypertext Transfer Protocol--hypertext, like HTML-type text markup language.0270

There are a couple of other ones; another one you may run into is FTP, which is File Transfer Protocol,0278

which you will use for uploading your web pages to a server.0283

And so, you need to specify how they are going to actually be talking.0288

So, this just establishes the language; this establishes the type of website;0291

the domain itself, where the server is--only now, it could be many servers; and the subdomain.0296

Now, I have also given an example of an IP address here.0306

You don't always have to use the domain; you can just use the IP address.0309

Every server has one; every domain has one; these aren't necessarily going to always be the same.0314

This is the IP address for Google right now; you may type it in later, and it might not work anymore; they may have changed it.0320

But they each have their own uses; usually, you just stick to the domain.0327

OK, so now, let's look at a second-level domain, which I already mentioned (.uk would a Great Britain website).0334

Actually, all .uk domains have a second-level domain, which is this part right here.0342

And it is probably the most common one, co:

You can kind of think of it as its own domain, but the real domain is here; and that has a second-level domain.0353

And this is just all one thing, and then you have the real domain--in this case, example is the name of the domain.0359

And then, sometimes, websites will need to specify a certain port that they are using.0367

That is this part right here: you have a colon after the top-level domain, right before the slash, and then you have the port number right here.0372

The default is going to be 80; so, if you put this port number, 80, in, it is almost always just going to not affect your URL.0379

It will just work automatically, because that is what the default is.0387

Usually, you are only going to put a port in if the server has something special where it needs a different port,0390

or if you have a certain reason that you are using a different port.0396

But just so...if you ever come across this, so you know what that is...0402

And then, probably the most obvious thing is folder names (in this example,

In fact, if you look at the top of the browser right now, if you are viewing this online, you will probably see this Computer Science folder in the URL.0414

And there can be any number of folders; and these are very much like a folder on your computer.0422

It is a folder with files in it, that can contain other folders.0426

And you can navigate through them, just like any other folder.0430

You have the slash after the top-level domain, and then right after that will be a folder.0435

You know it is a folder, because it has this trailing slash.0443

It is important to put this slash here at the end, so that when you send the request for this page,0446

the server know that you are asking for a folder, and not a file.0453

If it doesn't have the slash, it is going to check to see if there is a file like this.0457

Remember what I was talking about--content negotiation: there may be some content negotiation stuff to go on there.0460

It is going to realize that there isn't, because nobody really does that anymore (unless you have very complicated reasons, or you are really advanced).0468

And then, it is going to send a second request with the slash on it.0477

So, it is just that if you don't put the slash, it is going to send two requests; and in some rare cases, you could cause some confusion.0479

The file name is usually going to be the very last part of the URL.0488

And it is just like a file on your computer, usually: it is the name of the file, and then the extension of the file.0492

For a lot of web pages--especially if you are hand-coding it--it is going to be .html.0500

Now, as I already mentioned, the extension is not always going to be there.0507

But it is a good idea to have one, if you are coding yourself, because you are going to have it0513

automatically associated with your text within programs and things like that.0521

On the Internet, that doesn't so much matter, especially if you have programs that are generating pages with server-side scripts or content management programs.0525

In this case, I have given the file index.html; and you can actually go to, although you never do that.0538

And the reason is: well, 1) nobody wants to type .index.html every time they go to Google.0547

So, we have this shortcut system, where if you just have the domain, or you just go to a folder,0553

it automatically will look for some default files that are the index for that directory.0561

In this case, index.html is the default; you also will see things like name.html or .htm.0567

It depends on the server settings, but usually it will go automatically to index.html and name.html.0576

If we didn't put this in here, it would automatically get there.0583

We could put any other file name to get to one that is not the default.0587

This example right here is actually the same example as on the first slide, where I was talking about content negotiation.0591

But I have actually given the file extension, so this is no longer a URI; this is a URL.0601

It is actually giving the full location, and there is no content negotiation going on; it is saying, "Give me the GIF version of this image."0606

This example is another real-world example; you can go to this on the w3 website.0614

And you might think, based on looking at it, that this is a folder, because it doesn't have an extension here.0620

But this is actually the name of a file, and if you go here, it will bring up a page.0627

Now, if you wanted to go to the directory, there would be a slash there.0633

You can also send some variables or data through the URL, which happens a lot with forms and...0641

for example, on Google Maps, you will see a lot of variables sent.0650

Any website that is using server-side scripting in generating pages0653

and sending a lot of information around will have this sort of stuff show up in the URL.0656

It is called name/value pairs, and it is a variable with this name, and then this value.0663

So, it goes right after the file or end of the folder.0670

You put a question mark to indicate that you are starting with name/value pairs.0673

And then, you give the name, an equal sign, and a value; don't put any spaces or any really crazy characters.0678

And if you want to add more, you can use an ampersand and add as many more as you want.0684

And for HTML, the purpose of this course, I am not going to explain how you can really work with these.0689

It is usually going to be involved with scripting or form submission--server-side stuff.0696

But you will sometimes need to use this in your links.0700

The last thing that is a common part of URL construction is the internal link.0705

Right here, we have this hash at the end of this page here, and then a name that goes after it.0711

This is an internal link; so, what this link will do is take you to the Wikipedia article on HTML5.0719

This is the actual page that you are going to.0724

And then, right here, this hash indicates that it is a bookmark link that is going to take you to the section that is the markup section of that page.0728

So, you will actually scroll down to that part of the web page on this Wikipedia article.0736

And I will actually go into a little more detail on that later.0746

If you understood all that, you should be able to look at this URL and make some sense out of it.0752

I have taken away all of the real writing or names of domains, or anything like that, and just replaced it with the letter a.0759

Take a look at this and see if you can understand any of it.0767

For example, try and find the domain; try and find which parts are folders, which parts are name/value pairs...0770

And if you can, just go from left to right and identify every single part.0779

If you want to pause the video to do that, go ahead.0784

I'll go ahead and explain it from left to right, just to make sure you have it.0787

This part right here, before the colon and the double slash, is the protocol.0792

In most cases, on web pages, that is going to be HTTP: hypertext transfer protocol.0796

Then, we have this section right here, which is the domain, which consists of the top-level domain, the domain name itself, and then the subdomain.0801

This :80 is the port, and then the slash--if the :80 wasn't there, the slash would be directly after the top-level domain.0812

These two sections right here, just contained in the slashes, are folders.0821

And this is a file name; we can tell, because there is not a slash here.0826

And this dot indicates that this is probably the file extension, and this is the file name.0831

This question mark indicates that you are starting name/value pairs, so this is some stuff that some code is going to be using.0837

The ampersand indicates that it is starting another name/value pair.0843

So, this is the first variable, and this is the value to it; that is the second variable, and that is the value for it.0847

And this is a bookmark link, or an internal link.0851

This will scroll you down to the part of the page that has this name on it.0855

It is important to understand the difference between relative and absolute URL's, or URI's,0863

because a lot of times, you will be making copies of pages, or transferring them to new locations;0869

and if you have these messed up, then your links are all going to break--every single one.0877

Say you change the name of a folder, or you move it, or you make a copy...0882

So, it is important to get this straight.0887

An absolute URL is what I described in the first part of this lesson: it is things starting with the full URL,0890

with the protocol and the domain and all of that, all the way up.0897

Now, you can use shortcuts to define these links relatively.0901

So, in this example--all of these examples, by the way, are the full URL; that is why I have used these quotes--0907

to indicate that I am not truncating it for the sake of the slide here; this is the full thing.0914

You could have href= all of these, or source= ; this is the full thing.0920

In this case, you have a slash before index.html.0930

When you begin a URL with a slash, what that does is takes you to the root level of where you are.0935

Everything is relative to the document or the file that has the link in it.0942

If you are on, for example (or any domain), it is going to take you to the root of that domain if you use this slash here.0948

It would take matter how many directories deep you are, it is going to take you directly down to the domain name.0956

So, is where this would take you if you were on the Educator domain.0962

If you are on your computer, and you do this locally, it is going to take you to the root of your computer,0967

which, in, say, Windows, is probably going to be your C drive; so, it would be C:/index.html if you happen to have an index.html file there.0973

And if you don't have that slash--if you just have the file name itself with nothing else before or after it--0984

that is going to be, again, relative to the page that the link is on.0991

And it is just going to take you to index.html--that file in that folder that that file is in.0999

So, it is going to go relative from where it is; it is not going to change anywhere, and it is just going to look for a file of this name in the same folder, same directory.1006

Now, these examples are more on the same theme of: you can go to a root, and then go to a folder.1018

And then, this trailing slash here--you can remember that lets you know it is a folder.1027

So, what this will do is take you to the root of the domain or your computer, go in this folder, and then open the folder.1032

So, if you are on your computer, it will probably just open this folder up, and you will be seeing files.1038

If you are on a domain on the Internet, it will probably look for the index.html file in this folder and open that.1042

Or if it can't find it, it will show you a little funny display of the files in that folder.1050

Now, this is where it gets a little bit tricky.1058

This notation here--the two periods before the slash--doesn't take you to the root.1061

What it does is takes you up a directory; so, whatever directory you are in, it will look up one directory.1067

If you are in a folder called Folder, and that folder is in the root, it will take you to the root.1077

So, it could potentially take you to the root; but if you are several folders deep, it will only take you one folder up, not all the way to the root.1085

But then again, if you are several folders deep, you can go one at a time.1092

So, in this case, it would take you up one folder, two folders, three folders, four folders.1096

And then, it is going to start going down from four folders up from where your folder started from,1101

into the folder names that are here--one, two, three deep, depending on what these names are.1107

This may be a little bit confusing to just explain verbally, so I am going to try and give a little bit of examples here, looking locally on this hard drive.1113

Here, I have prepared a couple of folder structures.1130

This is mimicking a couple of cities and states in the United States.1135

Here is the top folder; we could imagine it is in the root, although it is not really.1142

And then, directly in this folder, we have California, Florida, and New York folders.1147

And in each one of these, there are cities; and then, each city has several HTML files that are for that city.1152

See, Florida has Orlando here; New York has Buffalo, Manhattan, Rochester; and those.1162

So, if we wanted to, say, open up this file here, we get this little page for the city of Rochester.1169

And this is page 4; we could click to city 1, and it would take us to city 1.1181

They actually look exactly the same, so you probably didn't notice that it changed, although,1186

if we were going to pull it up in the code, we can look at it and see what is really happening.1192

Here is the code for that same page we were just looking at.1211

And look at this links here: this is a list of links that we had, and I clicked on city 1 from the city 4 page.1214

And they were all in the same directory; and you will notice that the URL's here are just simply the name of the file.1223

So, since it is in the same folder, it just looked for city1.html in the same folder.1230

And it just moved on over, very simply.1236

Now, it could have very easily gone to another folder, if I had indicated in here, say, that I wanted to go up a folder.1240

This is in Rochester; and then, these two dots and then the slash--you can go up, so that will take it up into the New York folder.1254

And then, say I wanted to move over to Manhattan--I could then drill down from New York into the Manhattan.1263

And then, it would open the city1.html in Manhattan.1270

I have sort of messed up this page, if somebody was trying to really use it for something useful.1275

But now, if we refresh this and click on it, it is going to take us to Manhattan now,1279

Even though I didn't change the name of the file, because the Manhattan city file has the same name.1288

And so, you also can see that (let's go back to Rochester) I have links to the State and Nation pages.1298

So, say I click on the state; now, I have a page for New York, and it has links to these other ones here.1307

Here, we can see, in the directory up here: this is the New York directory, and we have this index.html.1313

Let's open that with our text editor; and now you can see the code here.1322

And these links are drilling down from the state level into the city level.1330

So, they all precede the file name with the name of the folder of the city that they are going into1336

(Manhattan for these, Buffalo and Rochester on through...), and you can see easily that they will click right on through,1342

to the city, like this, and then up to the nation, as well.1356

Let's say that you want to do something funny.1359

You are in California, in the Los Angeles link, and you want to make a link that drills up to the state,1363

and then up to the nation, and then back down into Florida, and then down into Orlando, and then opens one of the files there.1374

And you don't want to give the full path to it in an absolute way.1383

You just want to give it in a relative way.1386

Let's show you how to do that.1390

We are in California, LA, and then this first one here; let's edit it...all right, there it is.1392

Let's create this link: first, go up one directory; and that will be, not in the city level, but in the state level;1409

up again, and that takes us into the country level; and then we want to go down into Florida, and then down again into Orlando.1417

And then this slash to separate them...and save that...1428

And then, refresh it here, and this should take us to Orlando.1438

It went up, and then back down.1443

All right, so links can actually appear in several different types of states.1449

You probably already know this without really thinking about it, because it is a default browser style in all browsers,1461

where links that you have already visited once are a different color; if you haven't visited them yet, they are usually blue.1469

And then sometimes, while you are clicking on it (or while you are hovering over it), it can change.1475

This is done with CSS; it can actually also be done with HTML, but that is HTML4.01, and I want to focus more on moving forward and using HTML5.1479

So, I am not going to explain how to do it with HTML; I am just going to recommend that you use CSS.1489

This is the CSS that you would use to change the different link states to the styling that you want.1494

If it is just this one here, link is the unvisited link; give it a color blue...1504

text-decoration means to remove the underline for it; that is kind of the cool thing that people like to do.1509

visited will give it a red color, and then hovering and active--I am going to underline it.1514

If we open up this United States page, this top one, you will see that the text is green.1519

And then, say, I click on this and then go back; it is still green.1529

But if we want to open it up in the code and look at what it is going to look like, we can change the colors whichever way we want.1535

Here is the main index; OK, there it is.1549

And I have hidden, all the way down at the bottom here, some styles: a:visited{color:red;},1560

and then the text-decoration while you are hovering is to be underlined,1572

and then if it is active, it is going to be underlined and have a font weight of bold; we'll save that.1576

So now, you notice, if I click on it, it turns bold for a second; and when I let go, it doesn't go there; the same thing here.1592

And the underline shows up as I hover over it.1600

Now, see here, this is the default; the color is not changing--there must be some browser setting that I am not aware of.1606

But in most browsers, it will actually work the way that I expected.1613

Block level links are a new thing in HTML5, although browsers have been doing it this way for a long time.1623

Technically, in HTML4.01, you are not allowed to have block level elements within an anchor tag (or an anchor element, I should say).1631

You should just have text, or text-level elements, like em or span or things that change the text on a textual level,1641

instead of like blocks and boxes and headings and images and things.1653

But browsers have been supporting you doing this (against the specifications), and in HTML5, they decided that it should be allowed.1658

So, this is a new thing that you can do, and be semantically correct and conforming, as well.1665

Say that you have a web page here, and you have a little advertisement that you have off to the side.1671

And this advertisement is going to have a header, an image, and then a little title below it1679

to try and get you to click on it and "go and get your free iPod" or whatever.1686

You would have a little aside; and it used to be that, to be conforming, you would have to have this same link, href,1691

to or whatever you are going to, for each one of these.1698

So, you would have to have one in here, one here, and then one here, as well.1703

But now, you can include all three of them in this one link.1707

And you notice that that changes some things.1712

It frees up the Alt tag in this image; now, instead of describing where the link is going, I can just describe the image,1714

because this isn't the only thing that is in the link.1722

So, whereas before I would have to say something like, "Link to free iPod," now it can describe the image.1726

And this is an image of a very free-looking iPod.1733

You can do lots of block elements; you can do lists--you can have entire lists inside of an anchor tag.1741

Any time that you want to have multiple things linking to the same thing, you can do this now.1751

Bookmark links are what I described before, when you are going to have the browser automatically scrolling down to a certain location on the page.1760

The way to do that, as I indicated before, through URL's, is with this hash mark.1768

This is going to be a relative URL, so it is going to be looking at the very page that it is on.1773

Whatever page this link is on, it is going to go to that page, relative to that page, and then look for this internal location on that page.1778

And then, it is going to scroll through the page until it finds that this down here is the destination of this link.1789

And you just indicate it with an ID, so it has the same name.1796

You don't need to put the hash here; that is just a special notation to indicate in a link that it is looking for an internal link.1799

And then, this is just the name itself.1806

It used to be that you would have to have another anchor tag--something like a:name= and then the name of the bookmark link.1807

But now, any idea will work.1814

Let's pull open our page that we have here and give an example.1816

Let's say we want to make an easy way to link to the bottom of this page.1824

We can say, "Link to the end," and we are going to have the end right here, and put the hash1831

(and that is the bookmark notation), and then the content of the link, and then end it.1845

OK, so we have that paragraph; and now, let's go down to the bottom and create the destination for it.1855

We can put it right in this paragraph tag.1868

Save that; pull it up in the browser now; all right...there is the Nation page.1881

So, here is this new little text that we added to the end of this page, and it is a link.1894

And a link, again, is going to look just like this in the source.1899

And when you get to it, click on it; it pops us down to the bottom of the page.1911

This is the end; that is the text we added there.1916

And this is the exact same page; it just popped us down.1918

OK, the last slide is just kind of a quick overview of attributes.1928

There are a lot of attributes that you can use in links, but these are the most important ones.1933

The href and target attributes deal with what happens when users follow the link; so they are action attributes.1941

href, you should know by now, is hyper reference; it is going to tell where the link is going.1950

And then, the target is going to say how it is going to do that, or what context that page should be opened in.1956

Here is an example here: href popped an HTML.1963

It has a target attribute, and the value here is _blank, which is a special value that will open this link in a new window,1966

which I advise to never do, unless you have seriously thought through it,1978

because it is annoying for people who know what they are doing,1982

and it is confusing for people that don't know what they are doing, on the Internet.1985

But nonetheless, you can do it; but there are a lot of other types of contexts in which you can have a new page be opened.1988

The rel, media, href lang, and type attributes are all attributes that give information about the target link and describe its nature.1999

In this first example, it is a little gift that is being linked to the type attribute.2012

Well, this can describe what the MIME type is; so it is an image/gif.2018

And so, normally, when you link to an image like this, it is just going to open it in the browser.2024

But depending on your browser settings, if you specify a type of image/gif, it may decide to download the image,2030

because it is an image, instead of just another part of the Internet (like a page).2039

And so, this can be a very important attribute.2046

The rel attribute will describe the relationship of the page that you are linking to, to the page that it is being linked from.2051

So, in this example here, you have a link to page 2; you can imagine you are on page 1.2061

And the relationship between page 1 and page 2 is that page 2 is the next page from page 1.2067

And this is also a specified value; I didn't just make it up.2074

And so, browsers can look at this and understand where the flow is going and this sort of thing.2079

It is useful for browsers and a lot of other contexts.2086

We already looked at the pop-up example; this example here is the relationship one again.2092

That is just a duplicate, so ignore that.2098

Now, this last one is probably the most complicated, and probably going to be used the least.2101

But it indicates a relationship of alternate, which means that the page that it is linking to is an alternate version of the same page.2107

So, this link, you could imagine, would be, say, a page in French, and it is linking to an English version of that page.2117

And furthermore, it is specifying, with the media tag, that the type of media that it is--it is to be printed.2125

It is going to link to the English version of the page, and then print it for you immediately.2134

And the href lang is just specifying a language (en for English, of course).2140

And then, this is some French; I think this says "Print in English."2145

But for the most part, you can get away with just using the href attribute,2150

and then any other attributes that are global attributes,2157

that you can use anywhere else, that you need to use, depending on your context.2160

And then, these other ones are just good to know about, in case a situation comes up where you need them.2164

You should have a good introduction to links and the different situations and contexts that you might use them.2170

There is always more research that you can do on your own when you come across2178

more particular use cases are scenarios that you need to research on your own.2182

Just pull up a browser and do a Google search, or look at the HTML5 spec.2187

But this should be a good introduction, so far, for links.2193

And thanks for watching

Welcome back to

The next two lessons--this one and the one after it--are going to be lessons that,0004

if you go through and learn everything, you should have the foundations for most of what you need to do to develop web pages by hand--hand-coding.0009

If you memorize everything in these two lessons, you will be at a fairly advanced level.0021

And then, you can just look on the Internet for anything else that is not covered by this overview.0030

However, even if you can't memorize all of it, if you can just mark it all down and have it in a place where you can look it up,0038

then as you are coding, you can run into a situation where you need something that is described in these lessons,0045

and just look it up really quickly, and you are going to be just as fast as somebody that has it memorized--maybe just a little bit of a delay.0052

So, pay attention to these next two lessons, and try and remember every single thing,0058

because every single thing covered here is going to be fairly important; these are the essential tags.0064

Probably the most important tags are the document structure tags, because without them,0076

the page doesn't have a context in which to live, and the browser doesn't know what is content,0080

what is information about the page, what the doctype is, etc.0087

So, these are the document structure tags that are necessary for every page.0090

You always want to put these tags on every single page that you make, and you always want to put them in this order and in this structure.0096

So, doctype will always be first, and then the HTML element is the root element.0103

Head and body are both inside of the HTML element, and they are siblings with each other.0108

And the title tag is a required child of the head tag.0115

If you want to just have this structure copied and saved somewhere, and every time you create a new page, just have this be a default,0122

you can do that, and it will save you a little bit of typing.0131

These three dots here are where you are going to put all of the information about the page.0135

And these three dots here are where you are going to put all of the actual content of the page,0139

which we will go into more detail on in other parts of the course.0144

But for now, just remember that you always have these.0151

The doctype is particularly important, although not necessarily required, because it will tell the browser to render your code0153

in a standards-compliant way, in standards mode instead of quirks mode.0162

And it is going to make you learn the browser quirks, and the way that it renders, in a way that is standards-compliant,0167

as opposed to--if you are learning how it works in quirks mode, then when you start coding pages correctly,0177

things are going to change; their rendering is going to change.0184

It is going to be different than what you are used to, and you will get confused.0186

So, it is better to start from the beginning with this doctype of html, so it will render it in standards mode.0189

And that also means it is important not to have syntax errors, because that could throw it into quirks mode, as well.0197

The layout tags are sort of like the document structure tags, except instead of providing the layout of the document itself,0206

they provide the layout of the content--the actual part of the web page that your users are going to want to see.0215

And these are all new to HTML5.0222

You can use them in a browser today, and it won't cause problems, because they are backwards-compatible.0226

So, you can use a browser that doesn't support HTML5, and your website will still work.0233

However, a lot of browsers are picking up these really quickly.0239

And the header, nav, and section and aside, article, and footer tags are all layout tags, and they are all semantic.0243

They all have particular meanings in the context of layout.0252

So, they are big categories, kind of, that have a lot of other stuff underneath them.0259

The header is what you would expect from a standard website that has what you call a header.0264

It has, say, a banner, a headline, maybe a login link or form, maybe some links or something.0271

That sort of content is all going to go inside of a header element.0283

The nav element is for main or important sections of links.0287

In a standard layout, you will have, sometimes, a list of links on the side that will help you navigate through the website.0295

Sometimes, it could be right up here on the top, tabbing along.0301

Those are the main navigational sets of links; that is what you use the nav tag for.0306

You don't just use the nav tag for any group of links; it has to be for the most important ones for that section.0312

All of these are relative; so, say you have a subsection that has its own navigation--you can use the nav tag again,0319

as long as the nav that you are describing--the links are the main navigational elements for that subsection that you are describing.0329

The same thing with the header: it could have its own little header.0337

And the way that you set off sections (speaking of) is with the section tag.0340

So, here, this would be the main content of a website, so you would create a section tag.0343

And maybe give it an ID of content, just to indicate what section it is, because you may be using multiple section tags in a page layout.0351

An aside tag, I don't have in this example; but it is what you might call a sidebar.0362

It is defined by HTML5 as a group of content that is tangentially related to the content that is around it.0367

So, you could remove it, theoretically, and it wouldn't affect the contents of the page too much.0379

But it still has some relationship, and that relationship is not the nav relationship.0385

So, this is not actually an aside, even though it is a sidebar.0390

But say, if you had a bar over here on the side that have sort-of-related information (like some content), that would be an aside element.0394

The article element is for sub-documents, or some piece of content that can stand alone.0405

But it is being included within the main document; so this could be, for example, a blog, and each one of these articles could be a blog post.0414

Or it could be, say, a newspaper website, and each one of these could be actual articles.0424

And you could further, if you wanted to, give each article its own heading and navigation, depending on how complicated they are.0430

The last layout tag is the footer tag, which doesn't just mean "at the bottom."0438

It actually means that it has some information about the website; say, copyright information, contact information,0442

information about who created it or what the organization is that the website is about...0450

You don't want to just use it because you want to put something at the bottom.0460

It actually has to conform to a semantic meaning.0463

We are going to go through a couple of examples of real-life websites.0470

I took these screenshots last night; and these are actually not marked up in HTML5, using HTML5 tags, but they could be.0474

Say it was your job to come into these websites (which are all actually semantic--I think this is XHTML;0486

that could be HTML4.01); but say you want to update the code to HTML5.0494

You would actually change the organization; and it should demonstrate, fairly easily, what the different types of tags are.0501

This is A List Apart: let's start with the header tag.0506

You might be tempted to put a box around this area here and call it the header.0512

But if you look at it, you will see that there are links (Articles, Topics, About, Contact, Contribute).0518

And they are the main navigation for the page.0525

So, this right here isn't really the header; this is the nav.0527

So, I would give this a nav tag; the header, I think, is more properly this right here.0538

It is a little bit tricky, because it is not up where you would expect it.0543

However, this is giving the title of the website; it has a little logo; that would be properly the header, if you are going to use it semantically.0547

This big section right here stands out to me as...semantically, I would call this a section--maybe even a section with an ID of main.0556

And you can see that it has links to some articles, and a little preview of the first paragraph or so of the article.0568

Each one of these, I would actually put inside of an element, and give it an article element.0577

Let's call this section header, and then article; and this one, as well, is also an article.0584

This isn't; this is a part of a section.0603

If you wanted to, you could also, within each of these articles, create a little header--0607

the same tag as right here, but because it is inside this article,0612

the context is that it is the header of this article, not the header of the whole page; so, you could give these headers, as well.0619

Now, this is not really an aside, actually, because it is just more of the same sort of content.0627

I would call this a section, as well, and just sort of leave it as that.0634

And this--you may not be able to see very clearly, but the links in here are not the main navigational links.0641

They are just sort of links to random things that may be of interest--a search bar here, a job board,0648

an advertisement for a book that is being published about HTML5.0656

So, this is tangentially related; I would call this an aside.0661

And then, this, given away by its position, is clearly a footer.0669

And if you look on it, it has a little logo, but then it has the copyright, and then the name of the organization that is putting A List Apart together.0674

That is a very good semantic use of the footer tag.0683

This is the w3c website, World Wide Web consortium; they are the ones that define the standards for HTML.0689

And so, you would expect their page to be in good standards form, which it is.0699

However, they are not using HTML5; so, how would we mark it up with HTML5 layout tags?0703

Well, this right here is going to be a nav, I think; and so is this.0711

You can have two nav, or more, even; however, you don't want to go overboard.0723

If you are using it a lot, depending on the website, you are probably marking up things that are not properly navigational elements.0731

For example, this is a list of links, for the most part, but it is not really a main part of the navigation.0738

I would call this an aside; it is tangentially related to the content.0745

And then, this I would give within the section tag, although I am going to draw this right here, on top of it, as an article.0754

And then, this would be a head of that article.0770

Where is the head? I think the head is really up here.0775

It looks like they are using some CSS to make this pop into it, even though they are separate.0781

That is a display thing, not necessarily an HTML thing.0788

But the head would include this stuff in this little logo up here.0791

This is Wikipedia, and it is another example of an open-source website that uses good standards (compliant coding).0797

This is clearly going to be the nav right here, and then this entire thing here would be a section.0808

And in this section, we have several articles; and I would actually make this a header within this section.0819

It is not a header for the page; it is a header for the section.0827

And I would give this, up here, a header tag, as well.0830

And maybe I would expand it out to include this, even though it doesn't look like it measures up, because it is displayed funny.0836

I would include all of this in the header tag, because this is the logo, and a name banner, and then, for example, search and a login thing.0844

And then, this, this, this, and this are all articles, I would say; and they each have their own little headers.0854

Facebook is another confusing page, because we have these links up on the top;0863

however, these links do things; they don't really let you navigate around the site.0869

And these links take you to all sorts of random places; these links take you to places about this page.0875

This is the fan page for links also.0882

This is where you can use nesting to your advantage.0887

I would take this entire thing--all of it here--and create a section--make all of this a section.0891

And then, within this section, you can create additional sections.0900

So, I actually wouldn't make this a section; I would make it an aside.0905

I would make this a header within the section, and I would make this a nav.0909

And then, each one of these little posts, you could mark up as an article.0915

You see, there are three showing right now.0924

And then, here you could mark this up as nav, because it is within this aside, which is within the section.0929

And so, the nav would apply to the section itself, and not to the entire Facebook.0937

So, this nav and this nav would apply to this fan page, not the entire website of Facebook.0944

This, I would probably mark up as a nav here, and then probably this would be a banner.0953

You can see that it can be kind of difficult to determine what the semantic meaning of different things is.0962

And you are going to be tempted to just give up and use div tags or something.0968

But in the long run, it is actually going to make things a lot better for you if you are encoding semantically--0972

not the least of which reasons would be that browsers and computers are going to be able to understand your website better.0978

And that means that it is going to be more useful for people who are using software that you are not aware of,0986

or something like a crawler, that is taking stock of the Internet0995

and gathering information about it (for Google, for example, to search)--these sort of things.1000

So, it is best to code semantically and put a little bit of thought into it, even if you don't get exactly the right tag.1006

This isn't necessarily really clearly part of a header, but it is something.1014

It is kind of a best guess, and maybe everything doesn't fit perfectly.1020

But it is indicating something to the computer, where otherwise the computer would know nothing.1025

So, just do what you can; and as you use the tags more and more, you will get better at it, and you will see what sort of things fit into place.1030

Text level tags are very simple--seemingly so--because they just go right into the text that you are typing, at the paragraph level.1044

And these are probably the most important things you will run into the most.1057

But that actually can be pretty complicated, when it comes down to deciding which one to use.1061

So, here is a little code that I have marked up with a couple of different tags ahead of time.1068

We have this little paragraph here, and it starts with the word note, which is an important tag that stands out,1079

so we are giving it the strong tag, which is different than emphasis.1089

It is denoting that this text is important, but it is not necessarily emphasized.1093

Now, the sentence goes on and talks about HTML5 here.1100

And I am using the <abbr> tag, which is for abbreviations or acronyms.1104

And you can put a title attribute and expand the abbreviation, or give the meaning of the acronym, right in there, and the browser will know.1110

And this can be useful in various ways.1122

Moving along in this little paragraph, we are talking about the <b> tag.1126

I am actually going to mark that up with this code element to indicate that it is code.1132

Now, notice that so far, I am not talking about what I want it to look like; I am just talking about what it means.1138

The temptation is going to be to say, "I want code to look monospaced and a different color," or underlined, or bold, or something.1145

But that is all stuff that you do later with CSS.1153

And the browser will have some default styles that you will see when I load this in the browser.1156

But you are going to be thinking in terms of the semantics, not the presentation.1161

So, you could just use a <strong> tag to mark up this <b> code and get a similar-looking result;1165

but it is going to have a big difference in meaning, and you don't want to have the browser thinking1175

that your code is about one thing when it is really not about that,1182

because, especially in future browsers or browsers that you aren't exactly sure how they work...1187

for example, text-to-speech readers for the blind are going to interpret it differently.1192

They might emphasize it or do something, and they work that out.1198

And we let them work that out based on the semantics, not based on how we want to present it.1202

This right here is the character codes for the less than and greater than symbols (so it's just the open and close carat).1208

This whole thing right here will show up looking like a b tag in brackets.1216

And this word right here, semantic, in the context, is emphasized; I am emphasizing that it would not be semantic.1222

And then, here we have code again; it is the same thing as up here--it is the b tag with the brackets given.1231

And again, they are escaped into the character code, so that it doesn't actually put an actual, literal b tag in the code and then mess up the syntax.1240

But this is a defining instance of this term, of the <b> term, because right here, it is going to quote the specification that defines what b is.1249

And so, this is a definition now; that is what you use this tag for.1262

And the definition goes around the term that is being defined, and it is the first time that it is being defined.1267

And you can link back to it with other tags later on.1274

But you need to link back to this, and so if they read this, it will have the definition here.1279

This is the definition that is being quoted from the w3c specification.1285

And this q tag means that it is a quotation.1291

Now, you notice I didn't actually put quotation marks in here, because the way browsers are doing it right now is:1294

when they have a q tag, they will put the quotes in for you.1299

But it is not semantically wrong to put quotes in yourself; I just did it for convenience' sake.1303

Then, lastly, we have this link here to the HTML5 specification.1311

And the temptation, if you are slightly familiar with this site tag, is going to be to use the cite tag for this,1318

because you are saying, "This is what the HTML5 specification says."1325

You might think, "Well, that is the citation of where that quote came from."1330

But that is not what the cite tag is; this is more appropriately just a simple link that links to the actual specification.1334

The cite tag would be for the title of the work.1342

I am actually describing the HTML5 specification here; this isn't the title of the specification.1346

But right here, this is the title of a work; this is a book.1352

Let's save this and take a look at what it is going to look like in a browser.1356

For all of that code, there is not much that looks different, you will notice.1365

It is, for the most, just kind of black text.1369

So, the strong element was rendered bold here; and then, the code for this and this made it monospaced--1373

although you can use CSS to make it look like whatever you want.1385

Right here, nothing actually happened; even though this is an abbreviation, the browser doesn't do anything.1388

But if I...did you see it pop up a second ago?1396

Sometimes you can get it to give a little information that would pop up.1406

This text right here, Hyper Text Markup Language, would expand it for you.1413

This is the newest version of Chrome that I am using right now, and it is just implementing these for the first time.1417

So, things will settle down into a more standard way, given a little bit more time.1424

And then, this here--this is the quote; nothing was changed, except that it added some quotes in.1431

So, just to emphasize again: we are not looking at what it looks like.1437

We are more interested in what the meaning is.1440

This link is clearly different, and then this citation just got italicized, but it could have easily not been.1443

It could have easily been bolded; with CSS, you can do anything you want with it, really.1450

Let's go back to our slides here, and let's look at grouping content tags.1459

Grouping content tags can think of them as a level above the tags just at the textual level.1467

But it is a level below the layout elements.1475

These are grouping content within them, but they are not grouping entire sections.1479

The paragraph tag is the most used one; it is going to group a paragraph together.1486

So, this last example that we were just looking at all should have actually been in a paragraph tag.1492

Scroll down to the bottom...and now, it is going to be semantically more correct, because all of this needs to be grouped together.1500

If you don't have the paragraph tag, then the browser doesn't necessarily know if this should be all together,1509

or if each sentence should be on its own, or (if you have more text down here) if that should be connected to this or not.1514

So, it is a semantic tag, in that sense.1523

The <hr> tag used to stand for horizontal rule, although we don't talk about it that way anymore.1532

It is just historical that we keep that as the name.1539

But that is a very presentational tag, if you just think of it as a horizontal rule, because that is just like, "OK, I want a horizontal line."1542

The new semantic meaning for hr is a break in context or a pause in the rhythm of the flow of the text, or the content.1553

So, it has a semantic meaning now that is not just a line; it means something else.1568

figure and figcaption and blockquote have their uses; they kind of are what they sound like.1575

<figure> is for when you have a separate piece of information that is reference by the main content.1582

And it illustrates something, and you will describe what that illustration is with a <figcaption>.1590

<blockquote> is an entire block of quotations that is imported from another place.1596

So, it is sort of like the <q> tag, but for more...if you write essays, it is sort of the difference1602

between a quote that is less than three lines (that you just quote in-line),1609

and then one that is more than three lines, that you have to break off into its own paragraph that is indented; that is the difference here.1612

And the <div> tag is a grouping content tag that is useful, because it has no semantic meaning.1619

Its definition, semantically, is that it means nothing.1625

And this can be useful for when you need to put a tag somewhere, in order to stylistically do something;1628

but there is not a clear semantic tag that will work there.1634

And maybe even, putting a tag with semantic meaning there will actually cause semantic problems.1640

So, let's go back here, and let's look here at an example.1649

This is a little Psalm from the Hebrew Bible, and translated into English.1654

And it has already been broken up into paragraphs, so each one of these lines--this is poetry--has been marked up with a paragraph...1661

This is Psalm 4; it is quite short.1673

But because the whole thing is actually being quoted, I could say <blockquote>, and then, down here at the bottom, end that block quote.1675

The whole thing is now marked up as being a quotation; let's look at it really quickly.1686

This is what it looks like before the blockquote; afterwards, it indents it a little bit1699

(although the presentation is not the end result; it is the semantics).1704

Now, I have picked this because there is this Hebrew word, Selah, that translators have a really hard time with,1710

because it is not clear exactly what it means.1718

But it seems to mean something like "pause" or "reflect," "interlude," something like that.1721

In fact, the meaning is very similar to what the hr tag is.1729

So, if I was going to be marking this up, I could put a little hr tag in here, after each one of these "Selah" occurrences,1734

to indicate that there is a break for a minute--for a second--just a pause in the Psalm.1742

Let's refresh this; now, OK, so it has these big lines in it, and that is really ugly for poetry.1758

which is why, semantically, you could set this break; but then, stylistically, you could come in1766

and change this to look like something else, if you don't like the way it looks.1773

In fact, you could just erase it altogether, but leave the semantic break in there, so that a browser will know what to do.1776

For example, if you have a screen reader for a blind person, and they are listening through this Psalm,1784

without the hr tag, when it gets here, it is going to say "Selah," and then move directly on to the next verse without a pause.1792

And it is going to break up the rhythm of the poem for the blind person listening to it.1800

So now, we have these hr tags in there.1806

Even if we hide them for the sake of looking good, the semantic meaning is there,1808

and the blind person is going to be able to experience it better, because there will be a little pause.1815

Now, figcaption and figure could be...say we wanted to have a little figure off to the side.1825

We could just go like this (I am going to pull this back) and put the figure tag in here.1836

And say we have a little image, and the source is going to be a picture of a sunset--something beautiful; and then figcaption...1846

Now, the figcaption will describe what is going to happen in the figure.1870

You could say something like "God made beautiful sunsets"; and that is an example of a figure.1878

Let's actually look at a more realistic example on this Wikipedia page here.1891

This is a Wikipedia page on HTML, and there is a figure in here, right here.1898

I am not sure if this is actually marked up as a figure in the code, but it could be.1906

This is an article on HTML, and it begins with the history of HTML.1912

And it has a little picture of Tim Berners-Lee, who invented it, and then this text right here, describing the picture, saying "Tim Berners-Lee."1916

So, this is a perfect use for a figure.1923

It is not a main part of the content, but it is sort of referenced via content.1927

And you have this information that has been described by the figcaption; so I would mark it up that way.1933

Now, you will notice other things up on the side: HTML, "The historic logo made by the W3C," so this is another figure.1941

But then, look up here: we have this off to the side--this is not a figure.1949

This is a set of information about the page, and links, and there is no caption; there is nothing to describe all of this together.1952

The same thing here: this is not a figure--this is a nav, really, with information of the structure of the page below, and then links to each part.1961

So, just keep in mind the differences between aside, figure, and nav.1972

They all have different semantic meanings, even though, if you were just thinking purely stylistically,1978

they could all look the same way, depending on which one you use.1983

Embedded content tags are what makes the Internet look cool, and really gives it some "zing."1993

This goes back, historically, to the Mosaic browser, which was the first browser to introduce the image tag.2003

Before that, it was just all text; and they wanted to add some color and spice things up a little bit.2010

They added the image tag; and there was actually a very early discussion, when they were just introducing this,2015

where the image tag was proposed, and someone else said, "Well, we should really use a tag called include;2020

and then you specify the type of content to include, and that way2028

we don't have to keep inventing a new tag for every new type of media that comes along."2032

He said, "If we have this image tag, then pretty soon we are going to have to have an audio tag and a video tag..."2038

And this was in the very early 90's, and they ended up going with the image tag anyway.2044

But it ended up that he was right; and in HTML5, we now have these, almost 20 years later--the video and the audio tags.2052

So, it is sort of a historical reason: back at the time they were doing this, it made more sense,2061

especially for backwards compatibility, to use the image tag, although maybe it would have been a better idea2069

to just have one tag that can include all types of content.2074

And this is the way we have things now.2077

Up until HTML5, it has actually been very difficult to include video and audio--especially to do it in a way that is standards-compliant--2080

because you had to use the embed tag or the object tag or some other thing.2087

And it was always through another interface, so it wasn't the browser directly loading video or audio.2092

It was the browser loading something like a Java applet or Flash or some other program that can run video and audio.2098

For example, most video nowadays is Flash--like YouTube.2107

If you go on YouTube, it is Flash; and then the Flash is embedded into the page, and then that is what plays the video itself,2113

although if you go on YouTube and you can find a place to enable HTML5 video, then it will display it2120

using this video tag, instead of the crazy embed object tag mess that has been going on.2128

And it will just play it directly through the browser (if your browser is new enough to support this).2134

I am going to go to the code here and give examples of how these work.2140

Here, we have a little page that I have started.2146

And let's say I have three little files: audio, video, and an image.2149

These are three different types of media, and I want to know what they look like.2156

Let's open up the browser here; so, here is what it looks like in the browser right now.2165

It is just links to the three media types' content.2172

Let's actually mark it up as audio; and I did this wrong...the content is there...source= the URL...2183

And then, if you had a browser that didn't know how to use the audio tag, you could write a little message for them in here,2207

saying that their browser doesn't know how to use the audio tag.2214

And then, I am also going to add another attribute to turn on controls.2222

All right, so it loaded the audio right in there; and I can scroll through it and play it here.2238

And it plays directly through the browser, without any intermediate interfacing between.2245

There are a lot of other options that I could have used to, say, scroll through various ones, or give the title, or things like that--2250

especially when you pull in JavaScript and CSS, you can do a lot.2257

It doesn't have to always look like this; but the beauty is that, like the image tag, it just simply gets included directly into the page.2260

And you can style it additionally and do more stuff with it if you want, but the basic thing is right there.2267

Let's do the same thing with video.2279

This controls attribute just gives it the play and pause controls, and the volume, and things like that.2288

All right, let's refresh; and now we have this video right here.2309

And we can scroll through it directly in the browser--no Flash, no anything else.2319

It will play if I hit Play; so there is that.2323

And then, lastly and most simply, this is the very old tag, and the source is the URL here.2331

Now, the image tag is different, in that it doesn't have any content; it is a self-closing tag.2341

And that is partly because that is just the way it has always been from the beginning, and there is no need to change that.2348

And furthermore, it was always backwards compatible, so there is no need to have this content2355

for browsers that are not able to use it yet--to give them a little message saying, "You are missing some content,"2360

which is why the video and the audio tag have closing tags, and they have some content.2366

If we refresh down here, you will see the little image that just got loaded into the page.2376

All three of these are loaded into the page in the same way, without much work, without much thought or knowledge.2383

It used to be that, in order to include video, you had to be a pro,2392

or had to follow really carefully the standards, to make sure that it would work in multiple browsers.2395

And there were a lot of format wars going on.2404

There are still format problems...well, not problems, but it is still working itself out with video and audio.2407

So, this is an MP4 video right now; I tried a WAV video, and it didn't work.2414

So, the browsers are supporting different things incrementally, and some are supported, and some are not yet.2425

We will just have to wait for it to settle down a little bit.2431

Right now, there is a big discussion between using the codec that Macromedia Flash uses2436

(which is proprietary, and so it could end up costing money for a browser to support it),2442

versus the ogg video format, which is open source, and therefore free;2447

but it is a little bit slower, and it has some other disadvantages.2452

And so, the good thing about HTML5 is that it doesn't specify what types of codecs or software are needed to make it run.2457

It is up to the browser to decide that.2469

So, there could be some great new codec that comes around--a new file type that just is amazing.2471

And everybody could start using that, and then that could become the standard.2477

So, it is just open to whatever happens.2481

These are the most important and most common HTML elements that you will come across when you are coding most pages.2487

And you should be ready to do most websites now.2497

Thanks for watching

Welcome back to

This lesson is going to look at a couple more of the most important tags, in just an introductory way.0002

We are going to get into more depth with tables, lists, and forms.0010

This is the basic structure for a basic table.0019

This code here would have worked all the way back, as far as HTML3.0025

And it is not very semantic, in terms of being descriptive of what this content is, but it does have semantic meaning already built in.0032

Well, first of all, you should see hints, in the name of the element (the table element): tables are for tabular data.0045

Think in terms of charts, or like a multiplication table.0055

There is a really bad habit that Web developers have been having, of using tables to structure the layout of a document,0059

which is not tabular data; so it is non-semantic, and it has caused some problems.0066

So, don't do that; use tables for tabular data when you have charts.0072

The way that you write a table is: you start, always, with this table element.0077

And then, you have one or more table rows, and then each row has cells in it, which you mark with a table data element.0083

This table right here in code would look like this.0093

You can see: Content1, in this cell, is showing up right here in this cell here.0097

And this entire table row corresponds to this entire row here.0105

A row is horizontal, and a column is vertical.0112

Content3 and Content4 are down here, clearly.0116

The meaning of this is limited, in that it doesn't explain what the relationship between these are,0124

except that they are in rows and columns, and that they are in a table (so it is tabular data),0133

and that they are in individual cells, and the data of the cell is within these elements.0138

If we want to do slightly more semantic tables, we can get more advanced.0146

Before we go to that slide, let's look, really quickly, at the code I have prepared.0152

This is a simple table, and I will just show you, so that you can tell where and how to add in it.0156

Say we want to add an additional row; I'll copy that and then paste it, and we could add them in here.0165

And then refresh, and we have added a row quite simply.0178

Now, the way to add a column is: you can't just copy something and paste it--you have to add a new table cell to each row,0185

because each one of these rows is only two columns wide right now, so to add the third column, we have to add the cell to each row.0195

We would add it right here, for example; let's call this one New; and then here.0205

And then, actually, let's save and show what happens when you don't add the column to the last row.0223

There is no column cell there, so there is no cell, even though the row and the column make it so that there is a little space there.0231

Let's add it in; so, we have three new cells in the new column.0246

You probably saw right here that I have a multiplication table right here, as well.0262

This is the basic outline, where you have the numbers on the side, and then on the side here.0266

And then, as they correspond, you can get the value (3 times 1 is 3).0274

And this is hinting toward the more semantic use, where I need to indicate that this level here and this level here0280

(although I can't select vertically)--this column here are headers to the table.0289

This is the code for that; and I have given that a caption, and this thead tag.0299

That takes us into the realm of slightly more semantic tables.0309

The semantic table is the same, except you add some more information.0315

You can start by adding a caption, right after the first table element.0321

And then, probably the most important thing is the thead element, which everything contained in here will be marked as: a head element, or head data.0326

So, head1 and head2 show up in bold, although they can be styled differently.0338

The importance is not the way it looks, but the fact that this is the part of the table that will define everything else in that row or column.0343

And then, th (instead of td) stands for table header; but it is basically the same as a td cell, except it has the semantic meaning that it is the head.0354

This is fairly simple; we just have two columns and two rows, and they vertically correspond down; so, Content2 is corresponding to head2.0366

And then, the caption describes the entire table.0379

It can get more complicated in that example I showed you, where we not only want the head level here--this first row--0386

to be a header, but we want the first cell in each row to also be a header.0395

We have this thead wrapping the table row, indicating that the entire row is a header.0401

And then, each of the cells has the th (table header instead of table data tag).0407

But when it gets to the tbody, which is the main content, we still need to indicate that the first item in each row is a header.0414

We can use this th element, and that tells us that each one of these is the heading in the table.0426

And if we want to get even more semantic, we can look at the caption.0441

I didn't save it correctly.0458

It shows up right down here; and the caption will describe everything in the entire table.0463

So, the caption actually applies to the whole table.0469

And there are some more complicated rules, but we won't go into it right now.0472

But for a semantic table, the basics are caption, table head, and a table body; and then making use of the table header (versus table data) cells.0477

Lists are very useful for automatically having the browser put bullets or numbering of lists that you have.0498

There are two different types that are most commonly used: ordered lists and unordered lists.0509

And they are just what they sound like: unordered lists would have no ordering, so they are just bullet points, usually.0514

And then, ordered lists--you think most commonly of things that are in a specific numbering, like 1 through 8 or something.0523

But it is defined just as any list where the ordering matters.0532

You could even have an ordered list for something as simple as...say you have a list of states that you have been to;0537

but you indicate, in the paragraph before the list, that the first item in the list is the state that you were born in.0545

That suddenly gives what would otherwise be a random and unordered list an ordering that is important,0554

because the first one needs to be the one that you were born in.0560

So, you would use the ordered list tags for that, even though it doesn't really matter beyond the first one.0563

And you can still style it so that it looks like bullet points, instead of numbering.0571

Let's look, really quickly, at what this looks like so far.0577

Here is the List Examples code; I'll pull it up in the browser.0582

Here is an ordered list, and you can see that I didn't put in any numbering (besides this content: item1, item2, item3).0592

But the browser has automatically numbered them for me.0600

And there are ways to set this to start at any number that you want, or you don't even have to have numbers--you could have bullets.0603

And an unordered list, similarly, adds bullets for you automatically.0611

The syntax is that you always have the <ol> to begin with, and that goes around all of your list items.0618

And then, you have to end the tag; so, the content of the list is all of the list items.0627

And then, each list item is usually put on its own line; and you put the content between the beginning and ending tag of the element.0632

And because the computer knows that the previous list item ended when the next one begins, the ending tags are not technically required.0641

So, if I refresh this, it won't break anything--nothing changed at all.0653

Even though I removed all of the ending list item tags, it is just that logically, as you go through it, this is the first list item;0657

and then, as soon as it reaches the next one, it knows that it has reached the next item.0667

So, it doesn't need to be explicitly told that the list item ends.0670

I usually put them in, just for the sake of consistency.0674

And I am always worried that there is going to be a bug or a syntax error that I let in.0679

And then, the closing tags will help your computer figure out what the correct semantic meaning should be.0685

In case there is a bug or a syntax error, I can recover gracefully.0694

And you can add as many items as you want, really.0700

And it goes all the way up to 9, because there are 9 items.0708

Now, you can nest lists: say you have three lists here--one of states, and then one of cities that are inside New York, and then another list of cities.0713

And you want these cities (which are cities that are inside New York City) to be seen as being underneath New York City.0729

And you want these cities, which are in New York (the state) to be seen as underneath New York, the state.0739

Right now, these three lists are all unordered lists, because their ordering doesn't matter.0743

The first one and the second one and the third one down here...they are just in a row.0751

But what you can do is take out and put it inside the list item for New York.0759

And I am putting it right here, inside of this closing tag (not on the outside, because that would put it in nowhere land).0767

Let's put it on the inside and save; refresh.0774

Now, the browser will automatically pick a styling that makes sense of this.0786

You have these nested underneath, and they are clearly cities in New York.0794

And you can nest as many times as you want, actually, as long as you are not causing syntax error.0800

This is another unordered list, and we are going to put it underneath New York City right here.0804

And this is tabbing it incorrectly for me, because it is a bit confused; but it should look like this.0818

When I save it, now Bronx and Manhattan correctly show up as inside New York City.0827

Definition lists are very similar to normal lists, except that they have a different semantic meaning.0850

They will define terms and then give the definition.0858

And you may not run into this a lot, but if you ever do have a list of definitions, this would be the correct syntax to use.0862

You wouldn't use the normal list elements, because we have these special elements specifically for definition lists.0870

So, this is pretty much the same: instead of ul or ol (for unordered list or ordered lists), you have definition list.0880

And then, instead of just having list items (there is only one type of list item in unordered and ordered lists),0889

you have two types of list items: dt and dd (Definition Term and Definition Description).0895

And you need to always have one of each, and then you can have as many definition descriptions as you want.0902

So, this would be like, for example, in a dictionary: you have multiple definitions for the same term.0909

And then, you can have as many of these terms in a list as you want.0914

In fact, let's create one right now: dl for Definition List; let's say HTML--we are going to define this term.0922

And then, the description of it is....0953

Let's go to refresh; and it has marked it up in such a way that the description is indented from the term.0972

And it is clear that there is some sort of interesting relationship here.0985

Other browsers may do it differently; other user agents may do it differently.0990

And just for the fun of it, let's add another term, just so that you can see what it looks like with multiple terms.0995

There we go.1026

Forms are essential for any time that you are going to be getting feedback from the user.1033

And they are pretty simple; there are just a few basic types of forms that you use all the time.1040

And they are all specified, actually, by an attribute in the input element,1046

except for the text area--and there is another one called the select element, with options.1053

But we will cover that in the advanced forms lesson.1056

For now, we will just look at these: you have where the form element begins, and then you put all of your inputs inside of it.1062

And the types that you will see most often are text, radio, checkbox, and submit.1071

You are probably familiar with them already; they look like this.1079

This is a text box; this is a radio button; and a check box.1082

The difference between these is that the radio buttons--only one will be selected, whereas in the check boxes, you can select multiples or none, usually.1088

Text area is the larger one, and Chrome actually lets you size this; and you can usually use CSS to resize it, as well.1096

And then, the submit button looks like this.1105

You can also use the button element, which is an input element and needs a value.1116

If you ever need a button, that is the element for that.1141

Now, this is the way that, in HTML4.01, most forms will show up.1147

But HTML5 has introduced a lot of new functionality that can take it to the next level.1153

You can use either for beginning; you might want to just stick with these simple ones and not worry too much about getting into the more advanced HTML5 syntax.1160

But if you wanted to, you can go into HTML5 code and do some more advanced things.1170

Here, we have labels for each of these inputs that are specified in the code with the label tag.1177

And the label tag has this attribute for, which indicates which input it is going to.1188

The browser styled them right next to each other like this; you will see, I didn't have to insert these line breaks manually, like this.1195

It just sort of did it automatically (put them, labeled, right next to each other); and then, I put the line break at the end to bring it over--1203

whereas, up here, if I put name like this, and then a space, it is going to not look as nice.1211

The formatting doesn't quite fit the same way.1222

But the main advantage is that, when you get into more complicated forms, or if you have a screen reader,1227

the label is associated in a way that is clear to the computer.1235

So, this name 1 that this label is for corresponds to the ID of the input that is right here.1242

This is just a simple text input, except that I made it required.1249

And this is the shorthand notation for it: required="required".1254

So, if I try and submit this without typing anything into this required name field, it just blinks and then highlights this field, because I didn't fill it in.1263

I'll click it again; it is indicating that I need to fill this in.1275

Now, you can also use the new email tag, which is actually an attribute.1280

You can give it a type attribute of email, and it will know that it is an email address.1288

And it will require whatever you have put in here to conform to some email syntax.1296

And also, you have given it this attribute placeholder, which fills in the input with a little example text that is grey.1303

And then, when I click on it, it disappears.1314

So, it just gives you a hint at what should go in there, and you can specify whatever you want.1316

The range is a new tag that lets you specify a range with this dial.1325

And this is still experimental at this point; we may have other ways that it is displayed.1333

For example, if you were to open this in Firefox right now, you wouldn't see this range dial.1342

You would actually see a text box like this, but it would still be expecting a range of data, rather than just regular text.1347

And then, lastly, this is the date input, and it is going to expect something in date format.1359

So, if I type something that is not date format, and then hit Submit, first of all it is going to complain that I haven't filled out the name;1369

once I fill out the name and hit Submit, it is going to complain that I don't have something in date format in the string here.1380

In this element, I just put "string!" which is not the right type of input.1388

In the future, we may even have HTML as part of the browser, where you click on a little date functional thing here1396

that will pull up an actual calendar, and you can select the date you want.1405

And that will be all controlled with various attributes in the form.1410

This is the basic overview of forms; there is obviously a lot more that you can look into,1424

especially when you are looking at other types of inputs.1432

HTML5 is working really hard to get a lot of those covered and have a natural way of doing it1437

that doesn't require a lot of styling and work--that just kind of happens automatically.1442

But if you wanted to stick with the simple forms, you can use those, as well.1448

And that should be the last slide, so thanks for watching!1457

Welcome back to

We are going to look, in this lesson, at the text-level semantics.0002

The text-level semantics are basically the HTML elements that you have on the paragraph level.0008

This is very similar to what you might be doing if you are working with a very basic word processor, like Microsoft Word,0016

or even something more simple, like WordPad on Windows, and you are marking up italics and bold and things like that.0024

However, the difference is that HTML is a semantic markup language, not a presentational markup language.0033

In a word processor, the primary importance is the way that it looks.0041

You are taking the content of your word processor document, and making it look (with line breaks and bolds and italics and all these different things)...0047

And then, you are usually just going to print it, or send the file to someone who is going to open it up and view it.0058

With HTML, you have pages that are going out into the Internet, and they are being read by a lot of different applications--0064

yes, some people, but also some programs--web crawlers and people using different browsers, user agents...0073

There are a lot of different things that need to be able to understand it, and so the semantics become very important,0081

because the computer software can't understand what the text is, unless it is semantically marked up properly.0088

When I am going through these text-level semantic elements, you won't hear me, very often, saying something like,0101

"This tag makes it look this way," unless I slip up, just out of a bad habit.0109

What you will hear me saying is, instead, "This tag denotes that this content means this."0113

And that is the important thing to keep in mind for all of HTML, but especially going through this,0121

because the temptation is to use a tag that makes it look the way you want it to.0127

That is what CSS is for; the text-level HTML semantics are to mark up the content to indicate what it means, properly.0131

OK, the first semantic text-level element is the anchor element, the a element.0146

And I am not going to go too much in detail on this, because there is a whole lesson that goes more in-depth.0153

But this is, word-for-word, the definition in the HTML5 specification:0158

"If the a element has an href attribute, then it represents a hyperlink;0166

and if it has no href attribute, then the element represents a placeholder0171

where a link might otherwise have been placed, if it had not been relevant."0175

The anchor element has two meanings, based on whether or not it has this attribute here.0180

And it basically just either means that it is a link, or it indicates that a link could go there, even if there is not one.0188

And I will let you look at the anchor lesson if you are wanting to learn more about links.0196

The em element--I will just read the w3 specification definition.0207

"The em element represents stress emphasis of its contents," so it just means it is emphasized, basically.0215

And this emphasis is different than just italics or strong, because the em tag actually changes the meaning of the sentence, based on where it is placed.0225

If you have a sentence, and you emphasize the first word, and then you emphasize the last word--0242

so "I am looking at you" or "I am looking at you"--they have slightly different meanings, based on how you emphasize it.0246

This becomes very important for, say, a screen reader where a blind person is listening to this text be read out.0254

If you are using the em tag properly, they will be able to understand the meaning of the sentences better.0261

You can nest multiple em elements in order to make the stress more and more emphasized.0268

This is especially useful if you have, say, a paragraph where maybe a whole sentence is emphasized;0275

and then, within that sentence, you have a word that is particularly emphasized.0281

Because they can nest, you can use a second set of em tags--put another em element inside the first one and emphasize that word.0286

And it will be doubly emphasized; and you can keep doing that.0295

One thing to note about the em element is that some people have the idea that the old way of doing things was to use the i tag,0300

which people thought of as the italics tag; and the new way of doing things is the em tag, which is the emphasize tag.0309

That is actually not correct: the i tag used to mean italics, and that was just bad semantics, because it is presentational instead of semantic.0315

And the em tag is semantic--so in that sense, yes, the em tag is good and the i tag was bad.0328

However, if you just go through and replace all of your i tags with em tags, you are kind of missing the point.0334

And you are still using it not-semantically-correctly, because the em tag only needs to be used0340

in places where you are emphasizing, not just in places where you are italicizing.0346

So, if you use an em tag like an italics tag, then your text is not semantically marked up.0351

Now, also, the italics tag is not the italics tag; it is the i tag.0359

But people who have learned it the old way think of it as the italics tag.0366

But the i tag has been redefined in the HTML5 specification to have a more semantic meaning; and we will get to that later.0369

For example, WordPress, if you type the i tag in, when it saves it and presents it, will automatically convert it to the em tag.0379

That is not correct, because sometimes the i tag actually is the appropriate semantic tag to use.0388

And if you just automatically change it over to the em tag, then you don't have semantic markup.0394

But actually, it is probably good that WordPress does this, because for the most part, when people use the i tag, they usually mean "emphasized."0400

OK, the strong element--I will read the w3c specification definition--this is it, word-for-word.0411

"The strong element represents strong importance for its content.0418

The strong element does not change the meaning of its contents, as opposed to the em tag, which does."0422

And lastly, you can nest strong elements, just like you can nest em.0427

An example of this might be if you have something that says, "Danger: do not click on this link," or something like that0436

where the word "Danger" is important; it is not emphasized--it needs to stand out, but it is not going to change the meaning of the sentence.0443

If the strong tag is not there, it still means the same thing; it just doesn't get marked up as important if you don't have the strong tag there.0456

If you put the strong tag somewhere else, it is a different word that is important.0464

And I am not going to show you this in a browser, because I want you to be thinking about it semantically, not presentationally.0467

So, I could open up a browser and put a strong tag around some text and show you what it does;0475

but then, you might be thinking in your head, "strong element makes things bold."0479

And that is not what the strong element does.0484

A strong element is not a replacement for the bold tag.0487

And we have a similar thing going on between strong and bold as what I described between the em tag and the i tag.0491

The strong tag is not the new semantic version of the bold tag.0500

It has its own semantic meaning, and the bold tag (I should say the b tag, because that doesn't mean bold)0503

has its own new semantic meaning that they have recently defined.0511

OK, and the small element represents side comments, such as small print.0516

So, this is like fine-print types of stuff.0521

Some examples would be legal disclaimers, caveats, legal restrictions, copyrights, attribution,0526

or if you need to satisfy some licensing requirement--maybe even something like putting a little trademark,0531

or something that is not the main point of what you are trying to convey in the content, but it needs to be there.0537

It is less important--well, it is not necessarily less important; it is just sort of tangential, and it is off-to-the-side to the main thing that you are writing about.0546

So, what that means is that it is really only appropriate for small sections of text.0558

You might think, "OK, small means fine print, so if I have a document that is a big legal document that we need to read--0567

that is the fine print; just use the small tag and mark up the whole page as small."0576

That is not quite the right use there, because the whole page is the main point.0581

If that is the main thing on that page, then it is not an aside; that is the whole thing.0587

Or say you have something like, at the bottom of your page, a lot of footers;0594

you have contact information for how to contact the person that maintains the website and is responsible for the content there.0598

It is kind of a fine-print sort of thing, but better tags to use for that would be the footer tag and the aside tag, because small is really only for an aside.0606

So, here is an example here: I have a paragraph, " is the best website on the Internet!"0619

And then, because I am being honest, I am going to give a full disclosure here that Educator paid me to say that.0625

I might be influenced by the fact that I got paid a little bit, right?0634

So, this is what the small element would be used for.0638

It is kind of a legal disclaimer that goes right after something, and it is not...0642

again, it doesn't mean that it is smaller; it is not a presentational thing--it is a meaning thing.0648

The cite element is pretty easily confused, actually, because it sounds like what you would write in an academic paper for your citation.0656

But the real meaning of it for HTML is actually this: the cite element represents the title of a work0666

that is either being quoted or referenced in detail, or mentioned in passing.0673

So, this is the key part right here--"the title of a work."0676

The cite element is not a citation, and it is not that you have quoted something, and then you are putting the name of the person that said it.0683

In fact, the specification clearly states that a person's name is not a work.0693

So, you can't use the cite element to put a person's name, if you are quoting them.0697

But you will use the cite element in a lot of other random cases.0704

Here are a bunch of examples: a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture,0710

a painting, theater production, play, opera, musical, exhibition, legal case report...a lot of things.0719

Sculpture stands out in my mind as a good example, because, say, you have Michelangelo's David.0728

Is it Michelangelo that made that, or was it someone else?0735

But the title of this work is David, right? And it is a sculpture.0739

You wouldn't put the name of the guy who built it; you would put the title of the work.0745

So, here is a little example: "Have you read <cite>War and Peace</cite> by Dostoyevsky?"0752

Notice, his name is not in the cite tag, but the title of the work is.0756

The q element (q would be short for quotation) represents some phrasing content quoted from another source.0767

And on the Internet, that is often going to mean you are quoting from another web page.0775

But it can mean just any other source.0781

Now, there was a bit of debate, earlier on, whether or not the browser should be required to add the quotation marks in for a q tag.0784

And they ended up resolving that argument; now, the browser will put quotation marks in.0794

So, when using the q element, do not put quotes in manually; the q element will put the quotes in for you.0800

And this is a typo here; ignore that--that is from the previous slide.0808

Here is an example--a bit convoluted, but it is important that I have done it this way, because I am talking about the text-level semantics page.0815

So, I am using the cite tag, because I am talking about the title of a work.0826

The work is this page in the w3 website.0832

And I am saying, "This page defines the q element as" and then this is the quotation: <q>some phrasing content quoted from another source</q>.0838

That is actually word-for-word from up here, which is from this page, right?0845

And I have this cite attribute in the q element, which is the reference to where you can find this quote.0851

OK, so it is very convenient when it is a web page, because you are quoting this text from this web page;0862

and you can put the cite right here and cite the exact location.0868

And then, it is different than the cite element right here, which is the title of the work.0873

But in the q element, the cite element means the location of where the quote is coming from.0880

And then, this is just a code element, which I will talk about in a slide or two.0890

When this gets rendered, the browser is going to put quotes in, and you will just see...0897

Probably, actually, it won't even necessarily change the look of this or this too much.0901

Maybe it will make this look italic or something.0908

But again, that depends on the browser; if it is being spoken by a screen reader, it might it say it in a different way,0911

or put a little bit of a "note: a header" behind this.0920

But again, don't put little quotes in here, like this.0926

You might be tempted to put quotes in, because it is a quote; but the q element will do that for you.0929

The abbr element, for abbreviation: this is another one of those elements that is the resolution to a long-standing debate about...0937

There is the abbr element for abbreviations, and then the other type is acronyms.0949

And there is a difference between an abbreviation and an acronym.0962

And there used to be an acronym tag; and so, there was a lot of debate about things that fell in between both of them,0965

and whether or not you should use both the abbreviation tag and the acronym tag,0972

and whether you could just use one or the other.0976

And they ended up solving the debate by just saying, "OK, all acronyms are also abbreviations."0978

"So, get rid of the acronym tag, and just use the abbreviation element."0983

So, we don't have an acronym tag anymore; we just have the abbreviation element.0987

And if you have an acronym or abbreviation, always use this element.0991

The abbreviation element represents an abbreviation or acronym, optionally with its expansion.0995

So, this is how you would do the expansion: you give it a title, and then you expand the abbreviation or acronym.1001

In this case, it is an acronym and abbreviation, and you have the expansion--the full thing.1008

If I have a word that is just shortened, I can put the full word in here.1014

And that is that.1020

The dfn element is for definitions, and the dfn element represents the defining instance of a term.1024

So, this is usually when you are...say, you have a manual of some kind; and the first time...1032

You will see this if you ever read contracts, too.1040

It will define its terms before it continues on.1044

And then, after it has defined the term, it will use those terms again, throughout the rest of the document.1047

And it is understood that it has already been defined at the beginning, and it is using that same definition for that word.1052

So, they will say something like...say if you are getting hired at a company, it might say,1058

"The name of the company" (long official name), and then it will say "hereafter 'us'" or "'the company'" or whatever.1066

And then, whenever you see "the company," you know that it means that whole, long, official-sounding title,1073

with Incorporated and all of the other legal stuff that is needed in there.1079

And you can do that sort of thing with the definition element, because you have the defining instance of the term.1082

The first time that you are defining it, you use this dfn element around the term that is being defined.1089

And then, in that same sentence, you need to define it.1097

So, you can't just use the word the first time, and use the dfn element, and then not define it right there.1100

You have to define it right there.1105

And then, you can give it a title, which has the definition in there, as well.1107

But then, you can give it a name; and later on, in the web page, you can have terms that link back up to this definition and the defining element.1115

So, if you didn't necessarily read the first defining instance of the term, and you are going through and you come across that word,1127

you can hover over it, or (depending on how the browser is implemented) it will either maybe just pop it up right there,1133

as a float tip, or send you back up to the top so you can read it.1139

And it is also semantic; so there are a lot of different ways that it can be implemented, depending on the user agent.1142

The time element is important, because it is very difficult to get a computer to understand the way that normal people talk about time.1152

I might say something like "October 20th," and if I need a computer or an application or a program to understand1165

what I mean by that, it is going to take a lot of processing power to compute what this really means,1173

because computers use a specific way of arranging it: it is usually yyyy/mm/dd, etc.1182

So, the time element represents either a time on a 24-hour clock or a precise date in the Gregorian calendar.1192

We have to specify, because again, this is the Internet, and it is going to apply to the entire world.1201

There are people that are potentially using different calendars.1208

And it optionally has a time and a time zone offset; this example doesn't have a time zone.1212

But it is just the time tag here; and you surround the actual time or date that you are talking about.1219

Don't let time confuse you, so that you just only think it applies to times (like hours and minutes).1227

It applies to all dates, basically, because the way computers think about time is the number of (I think) milliseconds since this moment in 1971 or 1970.1232

And it just counts them up that way; so this actually makes sense for the way computers think about time,1245

because it is just the number of seconds since this time in the 1970's.1251

And this will put it in a format that it can really understand.1256

You have October 20th, and then you actually have the computer understanding laid out here,1261

so that, if your website needs to interact with this time, it can do so very easily, without having to parse through all this.1265

datetime is the attribute where you put that in, and it is pretty simple.1274

OK, the code element is very useful, especially if you are describing code on a website,1280

which happens quite frequently, especially in teaching websites--but also just any time you are referencing code--any kind of code.1287

The code element represents a fragment of computer code.1296

It could be an XML element name, a file name, a computer program, or any other string that a computer would recognize.1299

A string just means if you string together a bunch of characters.1305

It is really a variable type (that is where it comes from), as opposed to a number or some other type of variable.1312

It just means that a string of text characters, like all of this--this is a string--1321

so, any string of computer code that a computer would recognize.1328

And it is nice, because it usually will render it in a monospaced font, so that it aligns properly, with indentation and all that.1335

But it also makes it stand out.1347

For example, this word right here--in the slide, I have prepared it so that it has a different font, and it is blue.1349

And I had to do that manually; but if this was HTML, I could have used the code element,1358

and then taken CSS to make it look the way I wanted it to,1363

because then it is clear, as you are reading this, that this is not just me talking about using the word code;1367

but I am talking about a piece of code--an actual fragment of computer code.1374

And so, here is a little example: strong is a tag we talked about a bit earlier.1382

And if we didn't mark it out as code, we might be a little bit confused about what this sentence is saying.1388

The strong element? Why is this element strong, and what are the weak elements?1396

That is confusing; but because it is marked as code, it is clear that it is the element--the actual computer code element, strong.1400

The sub and sup elements, for subscript and superscript, are easily just subscript and superscript; that is it.1413

It is kind of presentational-sounding, but there is some semantic meaning there, as well.1426

And it is important, for example, to indicate, in something like a date like this, like the 10th of May:1435

you have the th; the computer needs to know that that is this special way of writing it.1442

And it is going to render it smaller and up a little bit.1452

And then, it is going to be able to deal with it the right way.1455

And it may actually even help computers in trying to process the meaning of it.1457

When it sees a number, and then a superscripted th right after it, that is going to indicate to it that it is probably meaning tenth, right?1461

So, computers can still use this data semantically.1470

And then, this is another typo; this should be sub, with a b, like that; erase that...there.1473

Don't spill the H2O; the 2 is down below--simple.1486

OK, and finally, we get to the i element, which does have a place.1492

It is not deprecated; it is not removed from the HTML5 specification.1498

It has a new semantic meaning from in the HTML4.01 specification, and this is it.1504

The i element represents a span of text in an alternate voice or mood, or otherwise offset from normal prose.1508

Very vague, but it took a lot of time to come up with this definition, because there is a need for the i element.1517

And so, first of all, it is a span of text: so, it is just a string, you could say.1527

It is a piece of text; and you could have other elements inside of it, of course.1534

But it is in an alternate voice or mood.1539

It is always helpful to think of semantics when you are imagining a browser for the blind that will read it.1543

An alternate voice or mood is going to be read differently than just normal.1552

It doesn't necessarily mean something specific, but there is a difference that needs to be communicated.1558

And there are a lot of examples here: a taxonomic designation, a technical term, an idiomatic phrase from another language1567

(like a priori, a philosophy term), a thought, a ship name, or some other prose whose typical typographic presentation is italicized.1575

It is kind of a hodgepodge of different things joined together.1584

But there are a lot of random, disconnected places where you need italics.1588

This is going to take some thought as you are marking things up semantically.1596

The ship name is probably the simplest one.1600

You might be tempted to use the cite tag for a ship name, because it is kind of like the title of a work (the 'title' of a boat).1604

But a boat is not a work, really (unless it is submitted at an art exhibit).1612

But here, it has the italics; when you see it in print, it is usually marked up in italics.1618

That is a good hint that it will be italicized here--but again, not if it is italicized because it is emphasized.1626

And the b element used to be, really, the bold element.1637

It is not the bold element anymore; it is more of, say, the keywords element.1642

But we still have the b, for historical reasons.1647

The b element represents a span of text to be stylistically offset from the normal prose, without conveying any extra importance.1651

The important part of this definition is that it is stylistically offset from the normal prose.1659

and that it doesn't convey..."without conveying any extra importance."1665

So, this is kind of presentational, but it does have a semantic meaning, again,1672

because "stylistically offset" sounds presentational, but it is still something that needs to show up differently--1676

and you don't really have any other elements that would work well for that.1683

When you are considering using a b or an i tag, first think through all of the other text-level semantic elements1692

and see if any of those fit; and if it still doesn't fit into any of those, then you may be a good candidate for the b or the i tag.1701

Some examples for use of the b tag would be keywords in a document abstract1711

(you will see it in a lot of textbooks--the important terms are bolded); product names in review;1717

other spans of text whose typical typographic presentation is boldened.1724

They are using this catch-all language again, of just kind of allowing anything that would normally be bolded,1728

just because of what it is--not based on its emphasis, but because of what it is.1734

That is the sort of thing that you would bold.1741

It is very vague, but put some thought into it, and you will be able to use it appropriately.1742

Here is a little example: this is from if you had one of those old-school text games,1748

where you type what to do and it tells you where you are--describes it.1755

And then, it might say something like, "You enter a small room. Your sword glows brighter. A rat scurries past the corner wall."1761

And in the game, sword and rat would typically be typographically boldened,1768

because you need to know that these are items that you can use in the game.1778

So, you can say something like "use sword" or whatever.1784

So, that is a good candidate for the bold...or, sorry, the b tag.1788

None of the other semantic elements would work in this case; it is more of a keyword sort of thing.1795

That is all of the really important semantic elements that you will be using most of the time.1800

And that is also the end of this lesson.1809

Thanks a lot for watching