Creating Web Pages

1 of 19

https://www.ed2go.com/Classroom/PrintLesson.aspx?classroom=Xxn0I...

Lesson 1: Printer Friendly

Getting Started
Lessons

Lesson 1

Printer Friendly

Chapter 1

Introduction
Hello and welcome to the course! My name is Alan Simpson, and I'll be your instructor. My interest in the Internet began in
the early 1990s when it first started entering public awareness. I created my first website back then. At the time I was a
full-time book author, and I wrote a couple of books on creating websites. But my interest in the Web and other forms of
electronic publishing soon made me lose interest in print publishing, and I've been involved in Web development ever since.
These days, I spend most of my time teaching online courses and developing Web applications for a large organization. My
goal here is to help any aspiring Web developers out of the confusing and difficult "beginner" stage into the wonderfully
creative world of 21st century Web development. If you enjoy being creative, the skills you'll learn in this course will be fun
and profitable for many years to come.
Of course, Web development isn't the kind of thing you learn in a few minutes. It's a profession. In the next six weeks, we'll
be covering a lot of ground. Not all of it will be appropriate for computer beginners. So let's take a moment to discuss who
can realistically expect to benefit from this course.
Who This Class Is For
To succeed in this course, you don't need any experience creating websites. You don't need any special programs like
Dreamweaveror even the knowledge that such products exist. But you do need some basic computer literacy. You should
be familiar with terms like desktop, folder, file, icon, click, open, close, and save. And you should already have some basic
computer skills, including familiarity with creating, saving, and opening files, as well as editing text (you'll be instructed to do
these things in this course).
It would be nice if one could teach computer literacy, basic skills, and Web development all in one course. But unfortunately,
that's not just possible. Such a course would become a beginner's computer literacy course with a tiny sprinkling of Web
development here and there. And that's really not appropriate for a course titled Creating Web Pages.

1/6/2016 4:56 PM

Creating Web Pages

2 of 19

https://www.ed2go.com/Classroom/PrintLesson.aspx?classroom=Xxn0I...

If you're new to computers, or if you find it difficult to follow along in the first couple of lessons, you might consider live
classroom training or a private tutor to get you through the absolute beginner basics before attempting this course.
But if you've been using computers for a while and you're familiar with the terms and concepts I threw at you in this section,
then you should do just fine. Come on over to Chapter 2, and we'll get started!

Chapter 2
The World Wide Web
Before you start creating websites, you'll need to know what the Web is. So this chapter will serve as a crash course in the
basics. What most of us call the Web is officially called the World Wide Web. The Web consists of billions of websites and
Web pages. The online school that hosts this course is a website consisting of many pages. This page you're reading right
now is a Web page. Other popular websites include Google, Facebook, Twitter, and YouTube.
The World Wide Web is a service of the Internet. The Internet isn't a computer. Nor is it a program that exists inside your
computer. The Internet is tens of millions of computers across the globe all interconnected to one another through cables.
There is one, and only one, Internet.
But the Internet isn't just the computers and the cables connecting them. The Internet is also a set of protocols that define
how different types of Internet communication work. There are different protocols for different services. For example, there
are protocols that define how email works. And there's a protocol that defines how the World Wide Web works. The protocol
that defines the Web is called the Hypertext Transfer Protocol, abbreviated http.
How the Web Works
The Web works through a system of servers and clients. The servers are computers where the websites are stored. They're
called servers because they "serve up" Web pages to anyone who requests to see them. Those requests are made by
clients. The client is the computer, program, or device that sends the request, and also receives and displays the requested
page.
One of the most common clients is the Web browser. Just as there are many brands of cars, toothpaste, shampoo, and
everything else, there are many brands of Web browsers. Some common ones include Internet Explorer, Safari, Firefox,
Opera, and Chrome. But regardless of the brand name, they're all Web clientsmeaning they all provide access to all pages
on the one-and-only World Wide Web on the one-and-only Internet. In other words, you can get to any website in the world
using any Web browser in the world.
Every page on the Web has a unique address called a URL (Uniform Resource Locator). To view a page, a client needs to
send that page's URL to the Internet. Sometimes that happens just by clicking a link. If there's no link to click at the moment,
you can type the site's URL into your Web browser's address bar, as in the example below, and then press ENTER or click
the Go symbol near the address bar (usually an arrow). Here's an example showing how a URL looks when typed into the
Firefox Web browser. The same basic idea applies to all browsers.

Sample address bar and URL

After you type the URL and press ENTER, the client (your Web browser) hands that URL off to the Internet as a request. The
Internet gets the request to Google's Web server, which in turn responds by using the Internet to send the home page to your

1/6/2016 4:56 PM

Creating Web Pages

3 of 19

https://www.ed2go.com/Classroom/PrintLesson.aspx?classroom=Xxn0I...

Web browser. Your Web browser receives the incoming page and displays it on your screen.
Even though every website has its own unique URL, they all follow a uniform pattern that generally looks something like this:
http://host.domain.tld
The http:// part is the protocol that we discussed earlier (Hypertext Transfer Protocol)the protocol that defines how the Web
works.
The host is the name of a server computer. Typically that's www (for World Wide Web), but the host name can actually be
anything. For example http://store.apple.com is the URL for a store at Apple Computer's website.
The domain.tld part is the domain name. The domain is typically the organization that owns the site (though it can be any
name). And the tld is the top level domain, which is generally used to indicate the type of organization that owns the site.
Here are a few common tlds:
TLD

Type

Example

.gov

Government

.org

Nonprofit organization http://en.wikipedia.org

.com Commercial

http://www.microsoft.com

.edu

Education

http://www.harvard.edu

Networking

http://www.html.net

.net

http://www.fbi.gov

Home Page
When you type the URL for a website without specifying a particular page for that site, you get the site's home page. The
home page is just the first page that opens automatically when you don't specify a page within the site. For example, if you
browse to http://www.fbi.gov, you're taken to the FBI's home page.
A site can contain any number of pages. Any additional pages within the same site are identified by additional text after the
tld. For example http://www.fbi.gov/fun-games/ takes you to the fun and games page at the FBI site. (Yes, I agree, it seems
odd that the Federal Bureau of Investigation would have a Fun and Games page, but they do!)
When you create your own site, it'll have a URL that people can type into their browsers to visit. That URL will take people to
your site's home page. If your site needs only one page, that's fine. Visitors will see that one-and-only home page. If your site
needs more than one page, you can put links on your home page that give people access to those other pages. A link is just
any text (or picture) that you can click to get to another page. You'll learn how to create links in this course.
Of course, you'll need a Web server and a URL to make the site accessible to the world. But you don't need that right now.
That's because right now, you don't have anything to put on a website. You need to create one or more Web pages to put on
the site. And you'll create those pages on your own computer. Later in this course, I'll show you how you can get some space
on a Web server, a URL for your site, and I'll give you step-by-step instructions for uploading your pages to the Web server
for anyone to see. And best of all, it won't cost a cent!
Okay, let's head over to Chapter 3 and talk about creating a website.

Chapter 3
Hypertext and HTML
As mentioned in Chapter 2, the set of rules that define how the Web works is called the Hypertext Transfer Protocol. That's a
mouthful of jargon, so let's pick it apart.

1/6/2016 4:56 PM

Creating Web Pages

4 of 19

https://www.ed2go.com/Classroom/PrintLesson.aspx?classroom=Xxn0I...

A protocol, as we discussed, is a set of rules that defines how things are done.
The transfer part is pretty easy. When you request a Web page from a Web server, a copy of that page has to be transferred
(copied) across the Internet from one location (the server) to another (your computer). So part of the protocol defines how the
transfer takes place.
That leaves us with hypertext. Text is words. For example, let's say you grab a blank sheet of typing paper, stick it in an
old-fashioned typewriter, and type a letter on it. What you end up with is a page of text. Plain, simple, old-fashioned text
where every letter in every word is the same size and color (black), with no pictures or colors or anything else fancy.

Plain text on a piece of paper

There's nothing "hyper" about the text in the example above. In fact, it's just about as plain as you can get. The prefix hyper
implies something above or beyond or better than text.
If you've spent any time at all on the Web, you know that the pages you visit have a lot more going for them than just plain
old text. Web pages contain links, and they also use the same design elements that you see in professionally published
magazines and books. Some common design elements found in websites and print media include headings, pictures,
paragraphs, lists, and tables. These make the presentation more interesting, and the information better organized, like in the
example below.

1/6/2016 4:56 PM

Creating Web Pages

5 of 19

https://www.ed2go.com/Classroom/PrintLesson.aspx?classroom=Xxn0I...

Examples of design elements

The example above is just an example. Your pages can look pretty much however you'd like them to look. The page below
uses mainly just pictures and links to provide an interesting and useful presentation. (It's just a screen shot of a hypothetical
page though, so clicking the links in the image won't actually do anything.)

1/6/2016 4:56 PM

Creating Web Pages

6 of 19

https://www.ed2go.com/Classroom/PrintLesson.aspx?classroom=Xxn0I...

More design elements

In the publishing business (paper or electronic), design elements are so commonplace that most people in the business refer
to them simply as elements. That's an important word that you'll be hearing for the rest of your Web design and development
career.
When you create your own pages, it's up to you to decide how you want to use design elements to make the best
presentation possible. The way you pick and choose your design elements is through a language called HTML. All Web
pages (and in fact, many electronic documents including e-books) look and work the way they do because of HTML.
Introducing HTML
HTML is abbreviation for Hypertext Markup Language. (There's that word hypertext again!) As its name implies, HTML is a
language that allows you to mark up your text so it's no longer plain boring text like you get from a typewriter. Rather, your
creation is text embellished with elements like pictures (images), links, headings, lists, paragraphs, tables, and many other
kinds of things. Most of this course will be about HTML (and its twin XHTML). So let's take a moment to discuss what that's
all about.
HTML (as well as anything else that concerns how the Web works) is defined by an organization called the World Wide Web
Consortium. People in-the-know often refer to it as the W3C or even just W3. (The shorter name comes from the fact that the
URL to their site is www.w3.org). HTML is defined through committees at the W3C. Committee members come up with ideas
and put them out on the Internet as suggestions. And the people who create the Web browsers and websites discuss it.
As you know, getting groups of people to agree on anything is generally a long and slow process. And with computer
languages like HTML, it's also a process that never really ends. There isn't one HTML language in the world. HTML is more

1/6/2016 4:56 PM

Creating Web Pages

7 of 19

https://www.ed2go.com/Classroom/PrintLesson.aspx?classroom=Xxn0I...

of an evolving standard. HTML is constantly being expanded and improved so that we can all build better websites running
on, faster, smaller, cheaper, better computers and mobile devices (cell phones, tablets, e-readers).
Over the years, the committees have released quite a few versions of HTML, as summarized here:
Version

Year

HTML 1

1991

HTML 3

1996

HTML 2
HTML 4

XHTML 1

1995
1997

2000

XHTML 1.1 2001

HTML5

2014

As you can see, the name changed to XHTML around the turn of the century, and now it appears to be changing back to
HTML with HTML5. The reasons for all these different versions and the differences between them are things we'll discuss
later in the course. You don't need to be too concerned about this when you're first learning, because the similarities between
the versions far outweigh the differences.
In this course, you'll learn the core HTML that applies to virtually all versions, with special emphasis on HTML5, the current
standard. If you're worried that the knowledge you gain from this course will be obsolete in the near future, you can stop
worrying. That's not going to happen. You won't learn anything obsolete in this course. I promise!
So there's a bit of background and general knowledge for you. But I'm sure you're anxious to get started and actually do
something. So let's head over to Chapter 4 now and start gearing up to create your first website.

Chapter 4
Starting Your Website
Every website that you can visit exists in a folder on some Web server on the Internet. But it probably didn't get its start there.
Most folks create their site on their own computer, where they can spend some time developing and perfecting it, out of the
view of the public. Then, when everything is looking good, they publish the site by copying it to the Web server's folder, at
which point it becomes a live site on the Web.
In this chapter, we'll take that very first step of creating a folder for your site. You might already know how to do this, but I'll
provide step-by-step instructions for Windows and Mac usersjust in case you aren't quite so familiar with the terminology or
steps.
Creating a Folder for Your Site
Hopefully you're familiar with the concept of a folder (also called a directory). It's a place on your computer's hard drive where
you can store files. The folder on your own computer that contains all of the files that make up your website is your local
folder. Web professionals refer to it this way to distinguish it from the live sitethe folder on the Web server where the
published copies of the files reside.
Your local folder can be anywhere on your computer. And you can name it anything you like. Just make sure it's easy to get
to, because you'll be using it often as you create your site. For this course, I suggest you name the folder MyWebsitethat's
what I'll call it in this course. If you want to put it on your desktop, that's fine. If you want to put it in your Documents or My
Documents folder, that's fine too. I'll leave that decision to you.

1/6/2016 4:56 PM

Creating Web Pages

8 of 19

https://www.ed2go.com/Classroom/PrintLesson.aspx?classroom=Xxn0I...

In the next sections, I'll go through the steps of creating a folder using Windows and a Mac. Unfortunately, I can't give stepsby-step instructions for every version of every operating system ever created, as that would take more words than there are
in this entire course. But hopefully there'll be enough here for you to follow along. If the instructions are too advanced for you,
it's possible that this course is going to be too advanced for your current level of computer literacy and basic skills. In that
case, you might want to consider trying to find resources appropriate for your current skill level and the computer and
operating system you're using.
Tip

If you're using Dreamweaver or a similar fancy editor, and you already know how to
create sites in it, you can just create the site in that program and ignore the steps
that follow. If you want to use Dreamweaver but haven't learned how to use it yet, I suggest you
take a Dreamweaver course rather than this one, as we won't be discussing the Dreamweaver
program in this course.
1. If you want to put your folder on your computer's desktop, make sure that you can see the desktop. If you want to put
the folder inside some other folder, like your Documents folder, open that folder. The next step varies, depending on
whether you're using a PC with Windows or a Mac.
If you're using Windows, right-click an empty spot on the desktop or in the current folder, and choose New >
Folder. The image below shows an example of how the menu might look when you right-click, but yours may
vary depending on the version of Windows you're using and your installed programs.

Create a folder in Windows

1/6/2016 4:56 PM

Creating Web Pages

9 of 19

https://www.ed2go.com/Classroom/PrintLesson.aspx?classroom=Xxn0I...
If you're using a Mac, CTRL + click an empty spot on the desktop or in the current folder pane, and choose
New Folder. The image below shows an example of how the initial menu might look when you CTRL + click.

Create a folder in Mac OS

2. Type the new folder name MyWebsite, and press ENTER.

When you're done, you should see the folder icon with the name you provided. Both Windows and Mac display icons for
folders as little manila file folders. That's because like paper manila file folders, a computer folder is a place where you can
store files.
The exact appearance of the folder icons depends on many factors, including what version of Windows or Mac OS you're
using, the size of icons at the moment, and the background color behind them. But if you're using Windows, your icon will
look something like the one on the left below, and if you're using a Mac, the icon will look something like the one on the right.

Sample folder icons

If you didn't name your folder correctly, you can change the name. Click the folder icon, and then click the folder name and
type the new name. If you're using Windows, you can also right-click the folder icon, choose Rename, type the new name,
and press ENTER.
Hopefully, creating the folder was easy for you. Next, we need to talk about actually creating your pages, which requires a
text editor or other authoring program.
Choosing an Editor
As we discussed, every website consists of one or more Web pages. Every Web page is a plain text file. That basically
means that when you open it in a text editor (or Web browser), you see "normal" text characters such as the letters,
numbers, and punctuation symbols that you can type on a keyboard.

1/6/2016 4:56 PM

Creating Web Pages

10 of 19

https://www.ed2go.com/Classroom/PrintLesson.aspx?classroom=Xxn0I...

A nontext file can contain a lot more than that because it contains information for programs, not people, to process. Opening
a nontext file in a text editor or Web browser can create a product like this on the screen:

Not a text file

You don't want your Web pages looking anything like that mess. Because anyone who visits the site and sees something like
that on their screen isn't likely to come back in the future.
There are hundreds of text editors and other Web page authoring environments ranging in price from free to many thousands
of dollars. For this course, I'm going to use free and simple text editors that everyone has. This way, you won't need to buy,
download, or install anything. Exactly which you'll use depends on whether you'll be using a PC and Windows, or a Mac, to
create your website.
Note

This course doesn't cover Linux, UNIX, or other platforms. You can certainly use
such computers to create websites, but there isn't enough space in this course to
offer step-by-step instructions on the absolute basics like creating folders and using a text
editor for those operating systems.
If You're Using Windows
If you're using Windows, I suggest you use Notepad since that's the built-in text editor that comes with every version of
Windows. Notepad isn't the same as WordPad, so be careful not to confuse the two. Microsoft Word and WordPad are word
processing programs, not text editors, and they really aren't appropriate for creating websites. If you use Word or WordPad,
your page might end up looking like the mess shown in the figure above.
If you have Windows, you can start Notepad the same as you would start any other program in your version of Windows. For
example:
In most versions of Windows, you can click the Start button and choose All Programs, then Accessories, then
Notepad.

In Windows 8, go to the Start Screen (the one with the tiles) start typing the word notepad then click the Notepad icon
when you see it. You can also right-click that Notepad icon and choose Pin to Start and Pin to Taskbar to make it
easier to find the icon in the future.

1/6/2016 4:56 PM

Creating Web Pages

11 of 19

https://www.ed2go.com/Classroom/PrintLesson.aspx?classroom=Xxn0I...

Optionally, in Windows 7 and Vista, you can click the Start button, type note and then click Notepad on the Start
menu.
When Notepad opens, it will look something like the example below. You don't have to do anything in the program right now.
Just make sure you can start it and recognize it when you see it. For now, you can close it as you would any other program,
by clicking the Close (red X) button in the upper right corner, or by choosing File > Exit from its menu bar.

Notepad, a Windows text editor

If You're Using a Mac

If you're using a Mac, you can use TextEdit, which comes with all Mac computers, so you should already have it. Just open
TextEdit from the Applications folder or Dock. If you're using a newer cloud-enabled version of TextEdit and see a Documents
dialog box, click On My Mac near the top left of the dialog box that opens, and New Document near the bottom left to open
the editor. Once open on the Mac desktop, TextEdit looks something like this:

1/6/2016 4:56 PM

Creating Web Pages

12 of 19

https://www.ed2go.com/Classroom/PrintLesson.aspx?classroom=Xxn0I...
TextEdit

Once you've opened TextEdit, there are some settings you'll want to change to use it as an editor for creating Web pages.
The steps for those settings are as follows:
1. Click TextEdit on the Application menu, and choose Preferences.
2. Next, click Plain Text in the New Document Format section.
3. Set other options in your Preferences dialog box to match those shown below. (Not all Mac OS versions are the same,
so just match whichever options you have in your Preferences dialog box).

New Document preferences

4. If your Preferences dialog box has an Open and Save button, click that.
5. Make sure that the Display HTML files as HTML code instead of formatted text is selected (checked). It may be
worded as Ignore rich text commands in HTML files or something along those lines in other TextEdit versions. Also,
you may want to set other options as shown in the image below.

1/6/2016 4:56 PM

Creating Web Pages

13 of 19

https://www.ed2go.com/Classroom/PrintLesson.aspx?classroom=Xxn0I...

Open and Save preferences

6. Change any other Open and Save settings in your Preferences dialog box to match the settings shown in the image.
7. Close Preferences (click the red circle in the upper left corner).
8. You won't need to use TextEdit again until Lesson 2, so feel free to close it now if you like.
Note

Many Mac users prefer to use TextWrangler, which you can download for free from
this website: http://www.barebones.com/products/textwrangler
I'll have some more required hands-on things for you to do in the assignment for this lesson. But before we get to that, let's
head over to Chapter 5 to wrap things up and talk about some general features of this course!

Chapter 5
Conclusion
In today's lesson, you learned some important terminology and concepts related to the World Wide Web and creating
websites. Even though, to some extent, we all hate learning terminology and concepts, there's really no getting around it. You
can't live and work in a vacuum. Eventually, you're going to have to mingle with, or learn from, other developers in the field.
And doing that successfully is going to require that you can "talk the talk" and understand the language.
You did get a little hands-on practice in Chapter 4 when you created a folder for your site. Not exactly Web development, per
se, as you might know. But it's a necessary step. You'll do a little more hands-on prep work in the assignment for this lesson.
And in Lesson 2, we'll create our first Web page together! But before you leave here, let me quickly review some things about

1/6/2016 4:56 PM

Creating Web Pages

14 of 19

https://www.ed2go.com/Classroom/PrintLesson.aspx?classroom=Xxn0I...

this course.
Next Steps
Okay, you've finished your first lesson. Now what do you do?
You'll want to take the following steps, in any particular order you like:
Take the quiz. Reinforce what you learned in the lesson by testing yourself with a short

five-question quiz. You can access the quiz for each lesson by clicking the Quizzes link.
Do the assignment. Want some hands-on practice applying what you've just learned?

Then roll up your sleeves and dig into the assignment! Just click the Assignments link
to get to each lesson's assignment.

Check out the FAQs. Since learning something new usually raises questions, every
lesson in this course comes with an FAQs section. To get to the FAQs, click the
Resources link, and then click FAQs.

Drop by the Discussion Area. Come talk with me and your fellow students in the

Discussion Area! Ask questions about anything that came up in the lesson, and share
your insights with everyone. This is where we'll create a learning community.

View the index. If you want to find a topic but can't quite remember where it was, then

the index is the place to go. You'll find it by clicking the Resources link, and then clicking
Course Index.

Browse resources for further learning. I've included a list of recommendations for

books so you can continue learning more about this topic long after our time together
ends. You'll find these by clicking the Resources link.

Supplementary Material
Internet
http://en.wikipedia.org/wiki/Internet

Click this link for Wikipedia's encyclopedic description of the Internet.

World Wide Web

http://en.wikipedia.org/wiki/World_Wide_Web

This is Wikipedia's description of the World Wide Web.

How the Web Works

http://home.web.cern.ch/topics/birth-web

Here you'll find a quick tutorial on how the Web works.

1/6/2016 4:56 PM

Creating Web Pages

15 of 19

https://www.ed2go.com/Classroom/PrintLesson.aspx?classroom=Xxn0I...

Create a New Folder (Windows)

http://windows.microsoft.com/en-us/windows-vista/Create-a-new-folder

As its name implies, this page from Microsoft's web site provides the steps for creating a new folder.

Folder Basics (Mac)

http://docs.info.apple.com/article.html?path=Mac/10.6/en/26885.html
Some basic information on folders for the Macintosh.

Finding the Perfect Web Editor

http://webdesign.about.com/od/htmleditors/a/find_great_edit.htm

Here's a mind-boggling array of programs for creating web sites ranging from simple editors to more advanced
professional-grade tools. This isn't something you need to study right now. But you may want to keep it on the back burner
for future reference.

Mac 101: Applications, files, and folders

http://support.apple.com/kb/HT2476

For Macintosh users: tutorial from Apple describing how to work with folders and files.

Files, folders, and search

http://windows.microsoft.com/en-US/windows7/help/files-folders-search
For Windows 7 users, some basic information on folders and files.

FAQs
Q: Is HTML obsolete? Someone told me that XHTML is all the rage now.
A: XHTML is HTML, and in this course, I'm using HTML to refer to bothpartly because that's how professionals talk
amongst themselves, and partly because it gets tiresome to see HTML and XHTML or (X)HTML in the text all the time. As we
talked about in this lesson, you don't have to worry about learning obsolete technologies in this course. And you'll indeed be
learning HTML and XHTML in this course, because they're basically the same. Think of learning to drive a car. If you learn to
drive in a Ford, you don't have to throw away everything you learned if you want to drive a Chevy. Once you know how to
drive one brand of car, you pretty much know how to drive them all. The same is true of HTML (and XHTML)!
Q: What is CSS?
A: CSS stands for Cascading Style Sheets and is a language for styling things in your page. HTML (and XHTML) allows you
to define what an element is (for example, a heading, paragraph, or table). CSS allows you to define how those different
elements look in terms of color, size, placement, print style, and so forth. CSS is not a replacement for, nor an alternative to,
HTML. Rather, it's a language you use in conjunction with HTML. You'll learn more about CSS a little later in this course.
Q: What is wysiwyg?
A: Good question! wysiwyg (pronounced wizzy wig) is an acronym for What You See Is What You Get. It's a method of
creating documents where you don't need to type in any special codes to make text look a certain way. Rather, you just

1/6/2016 4:56 PM

Creating Web Pages

16 of 19

https://www.ed2go.com/Classroom/PrintLesson.aspx?classroom=Xxn0I...

select text and then click buttons, like B for <b>boldface</b> or I for <i>italics</i>. Most word processing programs, like
Microsoft Word, as well as most email programs that allow you to write fancier text, are actually wysiwyg editors.
Q: In the lesson, you named the folder MyWebsite with no space. Why? Can't we use spaces in folder and file names?
A: On your own computer, you certainly can. But keep in mind that eventually you'll be publishing your website to a Web
server, which is a completely separate computer. In websites, it's best to try to avoid using spaces in file and folder names
partly because some Web servers don't even allow them, and partly because the ones that do will put a %20 (the hex code
for a space) in filenames. For example you might think Mandy and me at the shore is a pretty neat filename. But it's not quite
so pretty or neat when it shows up looking like this on the Web: Mandy%20and%20me%20at%20the%20shore.
Q: Why bother learning HTML and using a text editor to create Web pages? I've heard that there are wysiwyg HTML
authoring systems (like Dreamweaver) and ready-made templates available from Yahoo and other sites that will do all the
work for you.
A: Yes. And if your goal is to put a few pages out on the Web and be done with it, that kind of solution may be all you need.
But be aware that all of those solutions create pages that are written in HTML and CSS. They're not really alternatives to
using HTML or CSS. They're alternatives to learning HTML and CSS if your goals are modest ones. If you have any intention
of creating websites or other electronic documents professionally, as in a career or business, there really is no alternative to
learning HTML and CSS. You need to know those languages to be a "real" developer!

Assignment
I need you to do one more thing before we really get into the hands-on stuff in Lesson 2. There are many thousands of
different file types in the world. Only a few of those types actually work in a website. So it's important to always know your file
types. The filename extension at the end of every file's filename tells you the file's type. That extension is preceded by a dot
(period) as in the example below.

Filename extension

Most operating systems hide filename extensions by default, because beginners and casual users don't really need to see
them. But if you're going to be developing websites, your days as a beginner or casual user are pretty much over. You're
going to need to see, and control, those filename extensions. How you see them depends on whether you're using Windows
or a Mac. So for today's assignment, I'd like you to use one section or the other below to make filename extensions visible for
your computer.
Note

You're not making any lifelong commitments here. You can change the setting any
time you want just by repeating the steps and selecting (checking) or clearing the
appropriate checkbox. But whenever you're working on your website, I suggest you keep the
setting that shows the filename extensions.
If You're Using Windows

1/6/2016 4:56 PM

Creating Web Pages

17 of 19

https://www.ed2go.com/Classroom/PrintLesson.aspx?classroom=Xxn0I...

If you're using Windows, first open any folder. It doesn't matter which folder, because the setting applies to all folders. So you
can open the MyWebsite folder you created in this lesson, or just your Documents or My Documents folder.
If you're using Windows Vista or Windows 7, click the Organize button in the folder, and then click Folder and Search
Options, as shown at left below. If you're using Windows XP, choose Tools > Folder Options from the menu bar, as shown
at right below. (If you don't see a menu bar in the folder, tap the ALT key on your keyboard).

Get to the Folder Options in Windows Vista/7, or Windows XP

In the Folder Options dialog box that opens, click the View tab. Then clear the checkbox next to Hide extensions for known
file types (this will make it so that the filename extensions are no longer hidden).

1/6/2016 4:56 PM

Creating Web Pages

18 of 19

https://www.ed2go.com/Classroom/PrintLesson.aspx?classroom=Xxn0I...

Folder Options dialog box

Click OK to save your setting.

If you're using Windows 8-10, open any folder and click the View tab. Then select (check) the Show file name extensions
checkbox as below.

Making file name extensions visible in Windows 8

When you return to your folder, you might notice filename extensions at the ends of some filenames. That's good, because
it's useful information in web development, as you'll see. Folders aren't files, and their names don't have extensions, so you
won't notice anything different on folder names.
If You're Using a Mac
If you're using a Mac, open Finder, click Preferences on its menu, and then click Advanced. Then, select (check) the Show
all filename extensions, as in the image below.

1/6/2016 4:56 PM

Creating Web Pages

19 of 19

https://www.ed2go.com/Classroom/PrintLesson.aspx?classroom=Xxn0I...

Finder advanced preferences

Close Preferences.
You'll probably notice filename extensions on file names as you browse your system. That's nothing to be concerned about,
and it has no effect on how you use your computer. The information those extensions provide will, however, be useful when
creating websites, as you'll see in upcoming lessons.
This completes your Lesson 1 assignment. Keep in mind that there are 12 lessons and 12 assignments. Please wait until
after you've completed Lesson 2 before moving on to the Lesson 2 Assignment below. You can click the Lessons link near
the top or bottom of any page in the course to see the dates that lessons will be released.

Back to top

Copyright 1997 - 2016 All rights reserved. The material on this site cannot be reproduced or redistributed unless you have obtained prior written permiss
Cengage Learning.

1/6/2016 4:56 PM