Brenton Strine

Brenton Strine

Markup Language

Slide Duration:

Table of Contents

Section 1: HTML
Your First Web Page

17m 1s

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

32m 23s

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

26m 28s

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

21m 50s

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

41m 42s

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

24m 20s

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

29m 38s

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

32m 50s

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

30m 13s

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

23m 39s

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

47m 51s

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

36m 41s

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

46m 5s

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

19m 25s

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

29m 8s

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

13m 10s

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

13m 14s

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

15m 7s

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

19m 53s

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

26m 47s

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
Loading...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of HTML
Bookmark & Share Embed

Share this knowledge with your friends!

Copy & Paste this embed code into your website’s HTML

Please ensure that your website editor is in text mode when you paste the code.
(In Wordpress, the mode button is on the top right corner.)
  ×
  • - Allow users to view the embedded video in full-size.
Since this lesson is not free, only the preview will appear on your website.
  • Discussion

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Services

Lecture Comments (7)

1 answer

Last reply by: Professor Strine
Thu Sep 4, 2014 8:11 PM

Post by ghanam alsmeeri on March 31, 2014

i can not complete lesson after 7 min how i can solve this problem ?

1 answer

Last reply by: Professor Strine
Wed Jan 15, 2014 5:45 PM

Post by Shachar A on November 16, 2013

So today can I use HTML5 with Svc , or do I need the XHTML?

0 answers

Post by isaac N harper jr on March 3, 2012

Found out what "quarksmode" means (tag soup) in the HTML Lesson.

1 answer

Last reply by: David L
Wed Mar 7, 2012 6:39 PM

Post by Ali Salimian on December 29, 2011

Not good at all... the lecture seems to have lost its consistency .... can you please continue step by step.... instead of suddenly, bringing an unfamiliar set of terms

Markup Language

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • HTML 1 Through 3.2 0:13
    • Period of Rapid Growth of HTML
  • Tag Soup 2:03
    • Definition of Tag Soup
    • Example: Tag Soup
    • Example: Tag Soup and Valid Doctype
  • HTML 4.01 5:26
    • Overview of HTML 4.01
    • Three Flavors of HTML 4.01: Strict, Transitional, and Frameset
  • XHTML 1 7:19
    • Overview of XHTML 1
    • Example: XHTML 1
  • XHTML1 Syntax 11:48
    • Lower Case Rule
    • Closed Elements Rule
    • Encased in Quotes Rule
    • Boolean Attributes May Not Be Minimized
    • Correct Nesting is Enforced
  • The Problem with XHTML 16:15
    • Problem with XHTML
  • XHTML 2 19:22
    • Overview of XHTML 2
  • HTML 5 20:43
    • Overview of HTML 5
  • Validating 22:44
    • Validators
    • Example: W3C Markup Validation Service

Transcription: Markup Language

Welcome to Educator.com.0000

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 alistapart.com, 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 Educator.com.1776

Educator®

Please sign in to participate in this lecture discussion.

Resetting Your Password?
OR

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Membership Overview

  • Available 24/7. Unlimited Access to Our Entire Library.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lecture slides for taking notes.
  • Track your course viewing progress.
  • Accessible anytime, anywhere with our Android and iOS apps.