HTML Web Development Tools

Hello, and welcome to Educator.com.0000

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, because...here 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, addons.mozilla.org.0231

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 Educator.com--and 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 myschool.edu/~your first and last name, or something like that.0653

If you want to have your own domain, like mydomain.com, you need to first buy a domain.0664

Go to any Internet registrar (like GoDaddy.com--that 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: wordpress.com is a place for you to create a WordPress blog on the WordPress server.1201

And I have created one ahead of time, educatordemo.wordpress.com.1212

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 educatordemo.wordpress.com.1228

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 wordpress.com.1379

You could use wordpress.org, 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 Educator.com.1586