HTML Web Basics and Web History

Welcome back to Educator.com.0000

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 Educator.com.1942