01.05 - Editors: How to use an editor to create an HTML file

Loading...

From the course by University of Michigan

Introduction to HTML5

7803 ratings

University of Michigan

Introduction to HTML5

7803 ratings

Course 1 of 5 in the Specialization Web Design for Everybody (Basics of Web Development and Coding)

Thanks to a growing number of software programs, it seems as if anyone can make a webpage. But what if you actually want to understand how the page was created? There are great textbooks and online resources for learning web design, but most of those resources require some background knowledge. This course is designed to help the novice who wants to gain confidence and knowledge. We will explore the theory (what actually happens when you click on a link on a webpage?), the practical (what do I need to know to make my own page?), and the overlooked (I have a page, what do I do now?). Throughout the course there will be a strong emphasis on adhering to syntactic standards for validation and semantic standards to promote wide accessibility for users with disabilities. The textbook we use is available online, “The Missing Link: An Introduction to Web Development and Programming” by Michael Mendez from www.opensuny.org. This course will appeal to a wide variety of people, but specifically those who would like a step-by-step description of the basics. There are no prerequisites for this course and it is assumed that students have no prior programming skills or IT experience. The course will culminate in a small final project that will require the completion of a very simple page with links and images. The focus of this course is on the basics, not appearance. You can see a sample final page at http://intro-webdesign.com/html5-plain.html. This is the first course in the Web Design For Everybody specialization. Subsequent courses focus on the marketable skills of styling the page with CSS3, adding interactivity with JavaScript and enhancing the styling with responsive design. You can see a sample site for the capstone course at http://intro-webdesign.com/

From the lesson

Week One

This week we will uncover the "mystery" behind the Internet. What happens when you type a URL into your browser so that a webpage magically appears? What is HTML5 and what happened to HTML 1 - 4? We will also cover some practical concepts that you need to master before you begin coding your own pages.

01.04 - Looking at Your Browser Options5:25

01.05 - Editors: How to use an editor to create an HTML file14:56

How to use CodePen2:26

Meet the Instructors

Colleen van Lent, Ph.D.
Lecturer
School of Information
Charles Severance
Professor
School of Information

Hi, today we're finally going to write some code, and

I'm gonna walk you through it by showing you how you can use an editor.

One of the biggest pitfalls I've seen many of my students make is that they listen

too carefully to what I'm saying, rather than actually trying to dive in and

start coding, themselves.

So while I encourage you to sit back and watch what I'm gonna do right now,

in a little bit I'm hoping you'll sit down and you'll code with me.

The first step is that you need to create and edit your files.

One of the biggest pitfalls you're going to encounter is that you'll

be saving your files all over the place, you're not able to find them later on.

So decide how you'll be organizing your files.

What are you gonna name your folder?

Where are you gonna put it?

Second, you need to decide on a naming convention.

This is just a fancy way of saying decide how you're gonna name your files.

So although many people use a Mac, and you're allowed to use spaces in your file

names, this is not something you wanna do when you're writing code.

So decide that if you have two words you want to put together,

you're going to use underscores to connect them or use something we call CamelCase,

where you capitalize the first letter of each word.

Just remember, never use spaces and

be very consistent about your capitalization if you are going to use it.

Finally, you need to decide on an editor.

If using a Windows machine, Notepad is already built in.

You can also consider using Notepad++ or Sublime.

If you're using a Mac, TextEdit is the default editor,

although many people also use TextWrangler.

I'll be using Sublime throughout the rest of the course, but for today

I will be showing you examples of how to edit in Notepad and TextEdit as well.

So in order to get started, let's quickly review the five steps that we're going to

do, a few of them repeatedly.

You're gonna start by opening your editor, and then you're going to save your file,

add some content, save the file again, and open it in your browser.

I want to walk you through a quick example, and

I'm going to use Sublime to do it.

But don't worry, I'm going to go ahead and

show you some of the other ways to do it as well.

So I've brought up my Sublime editor here, a nice black file.

I'm going to start off by going to file.

And save.

And I'm gonna name it just firstpage.html.

Now one of the things you need to decide right away is where

you're going to save this.

Hopefully you've decided on this before you even started working.

I'm gonna keep mine in a folder called webpages that I've put on my desktop.

But you can pick anything here, or even if you want to,

if you click off to the side here, you can create a brand new folder.

What you don't want to do is save all of your code on your desktop.

Let's go Save.

And now, while there are many times that I'm gonna force you to sit through and

watch me type horribly on the screen, this one, just to save some time,

I'm gonna go ahead and cheat and paste in some code that I've already written.

As you can see, I have my doc type, the head section and the body.

In the head, I've included my encoding and my title.

In the body, we're just going to say hello.

I went in and I saved it using Ctrl+S.

You can always do File > Save, but I find Ctrl+S is much quicker.

And for every editor you use there's these little helpful

keys to help you know wether or not you've changed anything.

So if you look right now at firstpage.html, which might be hard for

you to see, if I were to go in and change anything.

You actually get a little circle to let you know that you haven't saved in

a little while.

So I've gone ahead, I've created content and now it's time for me to open my page.

One way to do it is to head over here to my folder.

And oh, here's firstpage.HTML.

For me, there's a little icon of Chrome off to the side.

For you, it might be a different browser.

I'm going to go ahead and click on it and bring up my FirstPage, and I have success.

I cannot stress enough that most of the time when you type something at first,

it's actually not going to work for you.

For me luckily, I have the power of editing.

You have no idea that it actually took me a few attempts to get that file to work,

because I was messing around with some things.

Throughout the entire course,

I'm going to try to show you areas where you might have a problem.

Hopefully you won't,but if you do, they're all very simple to fix.

One of the most common problems is that when you right-click on the file,

instead of opening up nicely in the browser, it opens up your editor instead.

If you'd like to fix that, all you need to do is right-click on the file and

select Open With.

Another issue that happens quite a bit is that when you open up your file, instead

of seeing a nicely formatted web page, instead you actually see all of your tags.

When that happens, you need to check your file extension and

make sure that it says .html, and not something like .text or .rtf.

Another issue that happens quite a bit is that you change your code, but

your page looks exactly the same.

There are two reasons that this tends to happen.

One is that you have to do something called refresh your browser.

This just means you upload the contents.

The second thing that happens quite often is that you forgot to verify your

file name.

Let me show you an example of this one.

So let's go back to our original file.

As you can see, I have Hello World written here.

This is a very computer science-y type thing to say and

since I'm trying to seem more normal, I'm gonna change this to Hello Everybody.

I go in and I'm gonna Save my file.

Done.

Well, when I go back over to my web page, it still says Hello World.

It didn't change and I'm kind of upset about that.

So, now I remember it's often necessary to refresh your page.

There number ways you can do that,

you can typically go to the little circular area up here and click refresh.

You can right-click and click on Reload or you can also go to View, sorry.

You can also do it through the tool bar on top.

So, I'm gonna go ahead and refresh right here.

And you can see now I have the Hello Everybody.

The other problem I mentioned is that sometimes people change their file name.

So maybe you aren't working on your FirstPage any more.

So you decided I'm going to save this as File > Save As second page.

Save it.

I'm gonna go back over here and I'm gonna refresh the file.

Hello everybody.

Well, nothing happened.

You are gonna find this happening over and over and over again.

When you're dealing with a lot of files all at the same time,

you have to make sure that the one you're looking at on the browser matches the one

that you've been typing.

Because I changed the name of my file,

I need to remember to change it up here in the URL bar as well.

Boom.

Another issue that comes up quite frequently is this idea that you get,

what we'll call, weird characters.

One of the number one reasons for

this happening is my old favorite, copy and paste.

Whenever I give you code and you're looking at it through PowerPoint,

the problem is when you copy and paste it, a lot of the characters don't translate

exactly the way you hoped them to, and you get what we call weird characters.

The number one culprit is the quotes.

So whenever you're typing and you have some sort of weird thing you're not

expecting, go back in and try typing the code in by hand.

So I've shown you how to create and edit a file in Sublime.

But I wanna make sure that everyone has a chance to see

how I can create files using the editors that they have on their own computer.

So I'm also going to show you an example in TextEdit and also in Notepad.

I really hope when you watch these examples, you'll have your computer out,

and you'll type along with me.

Go ahead and pause, stop things, don't go ahead in the video until you feel

confident that you're at the point that I've reached myself.

Hi everyone!

Now we're gonna go ahead and make a file with TextEdit.

And if I wanted to be evil, I would go through and

show you a very quick, simple example of making a file in TextEdit.

But instead, I'm gonna be very honest with you and admit that it just took me about

15 or 20 minutes to figure out how to make a really simple file in TextEdit.

So first, let me show you what I did wrong.

All right?

I'm gonna go ahead and paste in my code for my very simple page.

Okay, let's get rid of this.

There we go. We've just got our header and our content.

So, you can type this in as we go along, or you can wait.

So it's time for me to save the file.

And what I need to do is I need to make sure I'm saving in the proper folder

with the file name.

So I am going to go ahead and call this FirstPage and

I am going to go down here and I want to make sure that I save this as a web page.

So one of the options is .html, so I am going to click on this.

I know have my firstpage.html,

it's in the folder that I want and I really feel like we should be good to go.

So I am going to go ahead and save it.

Now, I'm going to go over here to my web pages folder, open it up.

And it's going to open up in Chrome.

So, let's see how it goes.

That is not what I was hoping for when we were first taping this segment,

and it took me a really long time to figure out what was going on.

The first thing I went to check, let me close this up,

is I want to make sure that my file extension really had been .html.

And it was, there wasn't a .txt or a .rtf after it.

The next thing I went in and

checked is that all of my quotes were going the right way.

So let's go ahead and put these in, because if you remember,

I'm always telling you that copy and paste can sometimes give you bad quotes.

So we can go back again.

Still no luck.

If you're going to be using TextEdit, you actually need to go in and

make some changes to the TextEdit Program.

It has nothing to do with what you're typing.

It has to do with the TextEdit Program.

So I'm gonna go ahead, copy this just in case I lose it, and clear it out.

And I'm gonna go up to TextEdit, select Preferences, and

you can see that we have two options.

New Documents, and Open and Save.

So one of the first things I'm gonna say is hey,

whenever I have a new document, I would like it to be in plain text.

Not rtf, or rich text, but plain text.

The second thing that you want to do is go over here to opening.

See the display HTML files is HTML code?

We're going to go ahead and click on that.

And then lastly the most important thing is when you save your files,

we want to save it as utf8.

So I am going to pause here for a second,

just a second, while you look at your own TextEdit menu.

You want to make sure that you have these boxes checked and

you've changed it to unicode, utf8.

Okay?

If you've messed things up, go down to restore all defaults and try it again.

I'm gonna close this up.

I'm gonna go ahead and do New, paste my code in.

Ooh, that's very small for you, but that's okay.

Do File > Save.

And let's call it FirstPage2.html.

You can see right away it says, do you want to use HTML extension or

the dot text?

And I'm gonna tell it, use HTML.

Before I click this though I'm wanna point out that down here,

it's showing that it's going to save as unicode utf.8.

I can get rid of this warning, if I want to, by unclicking this,

if no extension provided, use .txt.

So we're gonna use html.

Let's go over here, let's cross our fingers, let's hope for the best.

And now I have a successful page.

So if you are gonna be using TextEdit, there's not really much you need to do,

except for the first time you set it up.

Make sure you go into the preferences.

From there I can now go in, make changes, we did it.

Save, and refresh.

So hopefully now you can successfully save and edit a file.

Okay, so let's say that you are using a PC to create your files.

What you wanna do is you probably want to use Notepad at first since

it's the free version of the editor that's already on your machine.

The first thing I did,

was that I made a folder right on the desktop where I can keep my files.

I know it's small, you probably can't see it, but it's called web pages.

If you don't know how to make a folder, just so

you know, you can right-click on the desk top, go to New and Create a folder.

Once you've created the folder where you want to save your files, I'm,

right off the bat, going to go ahead and say File > Save,

and I'm going to name this firstpage.html.

It's very, very important that you include the .html.

If you don't include that,

the computer's going to think you're just working on any other old type of file.

So I'm gonna go down here and change it from text documents to all files.

Go ahead and save.

Oops, it already exists, but I'm gonna say okay.

Now, it's time for me to put in some content.

I'm gonna cheat a little bit here and just copy and paste in my content,

even though you're gonna have to type it in bit by bit.

So again, I have my doctype, my HTML language equals English,

meta charset equals UTF-8, my title and my content.

Just to be safe, I'm gonna go ahead in here and put my quotes back in.

Because quotes always make me nervous when I do copy and paste, that maybe I've put

in some sort of character that my editor isn't going to recognize.

Now that I'm pretty happy and sure that I've got the things that I want in my

file, I'm going to go ahead save it again,

go into my folder, and click on the FirstPage.

And there we go.

So now, every time that you're going to change your file you can just keep

both windows open if you have the room.

Make your changes.

Job, I have a file.

Save.

And reload.

Nice job.

You've made a file using Notepad.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2019 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play