Brenton Strine

Brenton Strine

Web Development Tools

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.
  • Discussion

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Services

Lecture Comments (10)

0 answers

Post by Ebssa Tesema on June 22, 2015

i noticed that he typed apache web server and he got apache.org...how does that work?

1 answer

Last reply by: michael Boocher
Sat Aug 3, 2013 5:34 AM

Post by Norma Saderi Moreira on January 18, 2013

how much does it cost a domain ?

0 answers

Post by william Avendano on February 15, 2012

is ipage a good host to use?

1 answer

Last reply by: Brenton Strine
Fri Aug 19, 2011 6:05 PM

Post by William Hollingsworth on May 27, 2011

Hello:
Why would I NOT want to host on my own computer? It's expensive to use a hosting service, so why NOT just use my own computer as my web page host?

Thanks,
Rich

0 answers

Post by VIncent Maguire on May 20, 2011

I had the same problem with starting at a random place in the video. RIght click on the slide and choose settings. Then pick the 3rd icon - local storage settings and increase the local storage. Now you can go forward to any point.

1 answer

Last reply by: Brenton Strine
Fri Aug 19, 2011 6:12 PM

Post by Tammy Shields on March 8, 2011

How do I start in a different place in a lesson rather than always starting from the beginning?

0 answers

Post by AZIZ KARSAN on January 1, 2011

the training cuta out after the Morzilla add-on section

Web Development Tools

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
  • Browsers 0:17
    • Introduction to Browsers
    • Example: Browsers
  • Firefox Add-ons 3:14
    • Firefox Browser
    • Example: Firebug Add-ons
    • Example: Web Developer Toolbar and ColorZilla
  • Domain Names and Hosting 10:23
    • Overview of Domain Names and Hosting
    • Your Own Domain
  • Installing a Local Web Server 12:42
    • Installing a Local Web Server
    • Apache Web
  • WYSIWYG Editors 15:56
    • Introduction to WYSIWYG Editors
  • Content Management System 18:31
    • How Content Management System Works
    • Example: WordPress
  • File Transfer Protocol 22:26
    • File Transfer Protocol

Transcription: 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

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.