1 00:00:08,613 --> 00:00:09,940 Hi. 2 00:00:09,940 --> 00:00:12,170 Today we're going to be talking about HTML5. 3 00:00:12,170 --> 00:00:17,520 Specifically what it is, and why we aren't learning HTML1 instead. 4 00:00:17,520 --> 00:00:19,750 So what is HTML? 5 00:00:19,750 --> 00:00:23,450 HTML stands for hypertext markup language. 6 00:00:23,450 --> 00:00:25,790 Markup languages are actually very common. 7 00:00:25,790 --> 00:00:28,140 They're not the same as programing languages, 8 00:00:28,140 --> 00:00:33,160 instead they're special languages that use tags to annotate or markup documents. 9 00:00:34,550 --> 00:00:39,080 In HTML, the tags tell the browsers where you want to put headings, 10 00:00:39,080 --> 00:00:41,557 images, lists, links, et cetera. 11 00:00:42,582 --> 00:00:45,540 A .HTML file is a special kind of file. 12 00:00:45,540 --> 00:00:48,380 You've already seen special file extensions before. 13 00:00:48,380 --> 00:00:51,050 Whenever you open a file that has a .doc, 14 00:00:51,050 --> 00:00:54,580 your computer knows to open it in Microsoft Word. 15 00:00:54,580 --> 00:00:58,220 If you see a file with .ppt your computer knows, 16 00:00:58,220 --> 00:01:01,700 oh that's a Power Point file, I should open it in Power Point. 17 00:01:01,700 --> 00:01:06,410 In the same way, when you computer sees the .html file, it knows that it should 18 00:01:06,410 --> 00:01:10,300 open it in an internet browser such as Chrome, Firefox or Safari. 19 00:01:11,380 --> 00:01:15,560 Your browser can read this file and it knows how to display it on the screen. 20 00:01:16,590 --> 00:01:22,330 It's more than that, HTML file tags also allow screen readers and other assisted 21 00:01:22,330 --> 00:01:26,770 devices to utilize the tags to present the information in new and special ways. 22 00:01:28,660 --> 00:01:31,670 So HTML is very similar to English, 23 00:01:31,670 --> 00:01:35,210 you can understand it even if you don't know much about it. 24 00:01:35,210 --> 00:01:38,520 Let's look at this example HTML file over here. 25 00:01:38,520 --> 00:01:41,010 Most of it is just a typical English language. 26 00:01:41,010 --> 00:01:43,580 This is an important heading or hi there. 27 00:01:43,580 --> 00:01:46,130 I am going to include a link to the course page. 28 00:01:46,130 --> 00:01:50,450 But if you look closely, you can see we've added these little tiny tags 29 00:01:50,450 --> 00:01:54,430 that the browser use this to know how to represent the material. 30 00:01:54,430 --> 00:01:56,550 So, h1 is just the heading tag. 31 00:01:56,550 --> 00:01:59,710 It says to the browser, hey this is something really important. 32 00:01:59,710 --> 00:02:03,530 I want you to put it in bigger font, and also if someone is using an assisted 33 00:02:03,530 --> 00:02:06,880 device, I want them to know if this is something important. 34 00:02:06,880 --> 00:02:11,000 H2 also displays some sort of importance, but not as much. 35 00:02:11,000 --> 00:02:12,510 I have a p tag for a paragraph, 36 00:02:12,510 --> 00:02:15,710 and I have another tag down here called and anchor tag. 37 00:02:15,710 --> 00:02:19,280 To let the browser know, I don't want you to just show this material, 38 00:02:19,280 --> 00:02:21,890 I want you to actually link it to a different web page. 39 00:02:21,890 --> 00:02:26,070 So here's the output when any browser would look at our code. 40 00:02:26,070 --> 00:02:30,450 In the beginning, learning HTML is mostly about learning all those different 41 00:02:30,450 --> 00:02:32,580 tags that I showed you in that file. 42 00:02:32,580 --> 00:02:34,320 This is called learning the syntax. 43 00:02:34,320 --> 00:02:37,430 It's how you learn which brackets to use, backslashes, and 44 00:02:37,430 --> 00:02:39,210 different things like that. 45 00:02:39,210 --> 00:02:42,630 You spend most of your time going, oh, did I remember that tag and 46 00:02:42,630 --> 00:02:43,646 did I write it the right way? 47 00:02:43,646 --> 00:02:45,971 That's very short-lived. 48 00:02:45,971 --> 00:02:47,610 In just a little amount of time, 49 00:02:47,610 --> 00:02:50,770 you're gonna gain the confidence to not worry about your syntax and 50 00:02:50,770 --> 00:02:54,970 instead to be thinking about the semantics or the meaning behind the tags. 51 00:02:54,970 --> 00:02:58,090 How important is this information that I'm trying to get across, and 52 00:02:58,090 --> 00:02:59,519 is this the right tag to be using? 53 00:03:00,700 --> 00:03:04,190 If someone's searching my page, can they find what they're looking for? 54 00:03:04,190 --> 00:03:07,730 Even if they can't see the text, can they use the tags to navigate through it? 55 00:03:08,800 --> 00:03:10,700 So what happened to HTML1? 56 00:03:10,700 --> 00:03:13,010 Why are we using something called HTML5? 57 00:03:13,010 --> 00:03:16,400 Well, let's talk about the early years. 58 00:03:16,400 --> 00:03:20,730 HTML was created in 1990 as a way to electronically connect 59 00:03:20,730 --> 00:03:22,760 different documents via hyperlinks. 60 00:03:22,760 --> 00:03:25,360 Hence, this idea of a web of connections. 61 00:03:25,360 --> 00:03:26,520 What was happening, 62 00:03:26,520 --> 00:03:30,550 is that scientists were using the Internet to list their different research papers, 63 00:03:30,550 --> 00:03:34,350 and you would have a long list, each paper independent of the other. 64 00:03:34,350 --> 00:03:37,110 But, HTML, gave you ways that you could read a paper, and 65 00:03:37,110 --> 00:03:41,260 right within the text, link to another exciting physics paper. 66 00:03:41,260 --> 00:03:45,300 Because the audience from HTML tended to be people like my dad up there in 67 00:03:45,300 --> 00:03:49,470 the corner, they were nuclear physicists, they didn't care about things such as 68 00:03:49,470 --> 00:03:54,625 color, images, or anything that wasn't science related, and that was the key. 69 00:03:54,625 --> 00:03:57,945 HTML was intended to work across any platform. 70 00:03:57,945 --> 00:04:01,845 And in order to do this you really had to avoid things such as special fonts or 71 00:04:01,845 --> 00:04:08,105 different colors or anything that was more about layout than content. 72 00:04:08,105 --> 00:04:12,190 However, in 1993 Mosaic emerged as the first graphical browser. 73 00:04:12,190 --> 00:04:15,780 And what that means is that there was a first browser to actually introduce 74 00:04:15,780 --> 00:04:20,390 the idea of images and when that happened, there was a lot of 75 00:04:20,390 --> 00:04:24,570 debate among the research community as to whether or not this was a good thing. 76 00:04:24,570 --> 00:04:28,160 The pioneers really wanted to keep it simple content based, 77 00:04:28,160 --> 00:04:30,060 let everyone access it. 78 00:04:30,060 --> 00:04:32,390 But the innovators were saying no. 79 00:04:32,390 --> 00:04:34,390 People like pictures, they like layout. 80 00:04:34,390 --> 00:04:37,100 They like that even as much as they like the content. 81 00:04:37,100 --> 00:04:41,090 So there is a big battle between how the Internet should evolve from that point. 82 00:04:41,090 --> 00:04:45,340 So after Mosaic emerged, the use of the Internet just absolutely exploded, and 83 00:04:45,340 --> 00:04:48,610 more and more people were using it for commercial means, instead of just for 84 00:04:48,610 --> 00:04:49,210 doing research. 85 00:04:50,300 --> 00:04:55,020 Mosaic had challengers though, in the form of Netscape, Internet Explorer and 86 00:04:55,020 --> 00:04:56,450 other browsers. 87 00:04:56,450 --> 00:04:59,070 This was the start of what we call the browser wars. 88 00:05:00,070 --> 00:05:03,980 Each of these browsers decided that they wanted to create these proprietary tags, 89 00:05:03,980 --> 00:05:07,610 tags that would only work on their browser. 90 00:05:07,610 --> 00:05:11,680 Some of the examples were marquee, where you could have scrolling text, or 91 00:05:11,680 --> 00:05:15,590 blink which would only work on some of the browsers and not others. 92 00:05:15,590 --> 00:05:19,500 Other tags were proprietary, they actually worked on any browser, but 93 00:05:19,500 --> 00:05:22,250 they went against the original spirit of HTML. 94 00:05:22,250 --> 00:05:27,640 They were tags such as font or center, for centering your text or background color. 95 00:05:27,640 --> 00:05:29,710 This may not sound like a bad thing, but 96 00:05:29,710 --> 00:05:33,240 some computers didn't have the access, didn't have the ability 97 00:05:33,240 --> 00:05:36,430 to have all the different colors that other computers might have. 98 00:05:36,430 --> 00:05:39,820 And this led to some really ugly looking pages. 99 00:05:39,820 --> 00:05:44,930 That also led to the origination of what we call the best viewed on messages. 100 00:05:44,930 --> 00:05:48,000 When you went to a site you almost immediately told 101 00:05:48,000 --> 00:05:50,850 which browser you should really view the site on. 102 00:05:50,850 --> 00:05:52,920 Otherwise, you weren't going to get the optimal experience. 103 00:05:52,920 --> 00:05:57,510 We all in a way suffer from browser wars, or best viewed on images today. 104 00:05:57,510 --> 00:05:59,300 Many times when you go to a page, 105 00:05:59,300 --> 00:06:03,390 you'll see that you can't actually access the full content if you're on your phone, 106 00:06:03,390 --> 00:06:06,680 unless you click on a link to the full website. 107 00:06:06,680 --> 00:06:08,100 So how did this happen? 108 00:06:08,100 --> 00:06:11,040 How did we get to the point where different browsers weren't agreeing 109 00:06:11,040 --> 00:06:13,880 on the different roles that HTML should play? 110 00:06:13,880 --> 00:06:18,410 This comes back to the idea that no one runs the Internet or the Web. 111 00:06:18,410 --> 00:06:21,750 However, some groups have taken a more proactive role 112 00:06:21,750 --> 00:06:24,920 to try to help standardize what's going on out there. 113 00:06:24,920 --> 00:06:28,060 The first is the Internet Engineering Task Force, 114 00:06:28,060 --> 00:06:32,020 they really focus on the idea of how the different networks should collaborate and 115 00:06:32,020 --> 00:06:33,940 how they should work together. 116 00:06:33,940 --> 00:06:39,480 The World Wide Web Consortium, instead deals with HTML and the evolution of HTML, 117 00:06:39,480 --> 00:06:43,810 they want to know what kinds of tags the browsers should and should not support. 118 00:06:43,810 --> 00:06:47,280 Finally, one of the newest groups, The Web Accessibility Initiative, 119 00:06:47,280 --> 00:06:50,580 they want to make sure, that no matter how people are accessing the web, 120 00:06:50,580 --> 00:06:53,390 they have the same ability to view the content. 121 00:06:54,970 --> 00:06:57,599 We had this evolution of browsers that we've been talking about. 122 00:06:57,599 --> 00:07:02,300 In 1990 to '94 it was all very simple, text-based. 123 00:07:02,300 --> 00:07:05,630 In '93, we talked about how the images entered the scene, and 124 00:07:05,630 --> 00:07:07,165 pretty much exploded the Internet. 125 00:07:07,165 --> 00:07:11,887 Cross-browser compatibility made many of the web pages just fall apart and 126 00:07:11,887 --> 00:07:13,740 led to incredibly ugly code. 127 00:07:15,010 --> 00:07:20,310 In the beginning of 2000 browsers went back to this idea of separating content 128 00:07:20,310 --> 00:07:21,640 from style. 129 00:07:21,640 --> 00:07:27,020 And in 2005 it became standard practice to use HTML files, which we are learning 130 00:07:27,020 --> 00:07:31,570 about in this course, to create the content and CSS files to style it. 131 00:07:32,670 --> 00:07:36,210 So as the browsers evolved so did HTML. 132 00:07:36,210 --> 00:07:40,350 The way it tends to work in most computer signs and 133 00:07:40,350 --> 00:07:45,290 technology fields is that it's the coders and the developers who push the standards. 134 00:07:45,290 --> 00:07:47,430 So as coders learned that there more and 135 00:07:47,430 --> 00:07:51,580 more things that they wanted the ability to do, it's the browsers job to keep up. 136 00:07:51,580 --> 00:07:52,340 So, where are we now? 137 00:07:53,380 --> 00:07:56,950 HTML5 is a cooperation between W3C and 138 00:07:56,950 --> 00:08:00,940 the Web Hypertext Application Technology Working Group, and 139 00:08:00,940 --> 00:08:03,980 what they've done is they've established these four guidelines for 140 00:08:03,980 --> 00:08:08,380 how HTML5 should be approached as browsers go to support it. 141 00:08:08,380 --> 00:08:12,670 The first idea is that new features should be based on HTML, 142 00:08:12,670 --> 00:08:17,410 CSS which is the sign language, the DOM and JavaScript. 143 00:08:17,410 --> 00:08:17,990 Nothing more. 144 00:08:19,010 --> 00:08:23,080 They want to reduce the need for external plug-ins, it's very frustrating when 145 00:08:23,080 --> 00:08:27,760 you're on a browser and you find that you can't watch the video that someone posted. 146 00:08:27,760 --> 00:08:30,170 They also want to move so that mark up, or 147 00:08:30,170 --> 00:08:32,940 the mark up language can replace scripting. 148 00:08:32,940 --> 00:08:36,800 If you find that more and more developers are writing code to make something happen, 149 00:08:36,800 --> 00:08:40,820 get rid of the code and just make a simple tag that can do it instead. 150 00:08:40,820 --> 00:08:44,250 And finally, HTML5 should be device independent. 151 00:08:44,250 --> 00:08:49,030 It shouldn't matter whether you're on your phone, you laptop, a PC or 152 00:08:49,030 --> 00:08:50,510 even on a screen reader. 153 00:08:50,510 --> 00:08:53,380 You want everyone the same access to the information. 154 00:08:54,410 --> 00:08:56,300 So when you think back over this video, 155 00:08:56,300 --> 00:08:58,610 there are certain lessons I really hope to stick with you. 156 00:08:58,610 --> 00:09:02,450 The first is the idea that HTML is not a programing language, but 157 00:09:02,450 --> 00:09:08,210 rather a way that browsers can translate documents into viewable webpages. 158 00:09:08,210 --> 00:09:12,510 HTML was intended to facilitate many different content types. 159 00:09:12,510 --> 00:09:15,100 Images, pictures, links, lists. 160 00:09:15,100 --> 00:09:16,010 Every thing along that line. 161 00:09:17,100 --> 00:09:19,410 What we've found thought the history of the Internet, 162 00:09:19,410 --> 00:09:22,350 is that when designers want to do something They tend to write 163 00:09:22,350 --> 00:09:25,680 nonstandard code to force browsers to do it. 164 00:09:25,680 --> 00:09:29,910 So, this is why we're developing new standards in HTML5 to handle these new 165 00:09:29,910 --> 00:09:34,440 requirements that people desire and push browsers to adopt the new standards.