# How to make a webpage?

**URL:** <https://boards.straightdope.com/t/how-to-make-a-webpage/695078>\
**Category:** Factual Questions\
**Created:** [August 8, 2014, 2:05am UTC](https://boards.straightdope.com/t/how-to-make-a-webpage/695078 "2014-08-08T02:05:01Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Johnny\_L.A](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/johnny_l.a/32/1084_2.png) [@Johnny\_L.A](https://boards.straightdope.com/u/Johnny_L.A)\
**Post date:** [August 8, 2014, 2:05am UTC](https://boards.straightdope.com/t/how-to-make-a-webpage/695078/1 "2014-08-08T02:05:01Z")

</div>

A long time ago on a PC far, far away…

I made some websites. I don’t remember what editor I used. Even if I did, I no longer use a PC. I think it’s time to make some changes. I copied the source code into a word document and saved it as a .htm file. I thought I could just open the file with a browser, and there would be the page. Nope. I got the source code. How do I open my .htm file as a webpage instead of a bunch of HTML?

I tried downloading Komodo Edit, but when I view the file there I still only get the HTML. It’s been over a decade since I’ve done any work on a webpage… since I switched from PC to Mac.

---

<div class="post-metadata">

**Author:** ![ZipperJJ](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/zipperjj/32/211_2.png) [@ZipperJJ](https://boards.straightdope.com/u/ZipperJJ)\
**Post date:** [August 8, 2014, 2:33am UTC](https://boards.straightdope.com/t/how-to-make-a-webpage/695078/2 "2014-08-08T02:33:01Z")

</div>

Don’t use Word. Use a text editor. A plain text editor.

Can you get Notepad++ for Mac? That’s my favorite editor right now. It has a “run” menu and you can choose “Run in Firefox” (or any browser) to run your HTML in the browser.

---

<div class="post-metadata">

**Author:** ![friedo](https://avatars.discourse-cdn.com/v4/letter/f/8edcca/32.png) [@friedo](https://boards.straightdope.com/u/friedo)\
**Post date:** [August 8, 2014, 2:34am UTC](https://boards.straightdope.com/t/how-to-make-a-webpage/695078/3 "2014-08-08T02:34:12Z")

</div>

When you say “saved it as a .htm file” did you just save it as a Word file with a .htm extension? Because that won’t work. It needs to be a plain text file.

> [@ZipperJJ](#):
>
> Don’t use Word. Use a text editor. A plain text editor.

Also that.

---

<div class="post-metadata">

**Author:** ![Johnny\_L.A](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/johnny_l.a/32/1084_2.png) [@Johnny\_L.A](https://boards.straightdope.com/u/Johnny_L.A)\
**Post date:** [August 8, 2014, 2:35am UTC](https://boards.straightdope.com/t/how-to-make-a-webpage/695078/4 "2014-08-08T02:35:31Z")

</div>

> [@ZipperJJ](#):
>
> Don’t use Word. Use a text editor. A plain text editor.

OK, I opened the .htm file in TextEdit and saved it as .txt. When I try to open it with Safari, I still only get the text.

---

<div class="post-metadata">

**Author:** ![Gibbs89](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/gibbs89/32/3351_2.png) [@Gibbs89](https://boards.straightdope.com/u/Gibbs89)\
**Post date:** [August 8, 2014, 2:57am UTC](https://boards.straightdope.com/t/how-to-make-a-webpage/695078/5 "2014-08-08T02:57:39Z")

</div>

Despite it’s name, I don’t think TextEdit’s default behavior is to open a file as plain text. Try to reopen the file in TextEdit, choose Format \> Make Plain Text from the menu, and save it again as a .htm file. Then open that .htm file in Safari.

---

<div class="post-metadata">

**Author:** ![Johnny\_L.A](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/johnny_l.a/32/1084_2.png) [@Johnny\_L.A](https://boards.straightdope.com/u/Johnny_L.A)\
**Post date:** [August 8, 2014, 3:04am UTC](https://boards.straightdope.com/t/how-to-make-a-webpage/695078/6 "2014-08-08T03:04:05Z")

</div>

> [@Gibbs89](#):
>
> Despite it’s name, I don’t think TextEdit’s default behavior is to open a file as plain text. Try to reopen the file in TextEdit, choose Format \> Make Plain Text from the menu, and save it again as a .htm file. Then open that .htm file in Safari.

No option to save as .html, but I renamed to .html and I kind of got a page. There are  characters that I don’t know what they are, and the images didn’t show up (because they’re just the file names instead of the address).

---

<div class="post-metadata">

**Author:** ![Crazyhorse](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/crazyhorse/32/31_2.png) [@Crazyhorse](https://boards.straightdope.com/u/Crazyhorse)\
**Post date:** [August 8, 2014, 3:31am UTC](https://boards.straightdope.com/t/how-to-make-a-webpage/695078/7 "2014-08-08T03:31:33Z")

</div>

> [@Johnny\_L.A](#):
>
> No option to save as .html, but I renamed to .html and I kind of got a page. There are  characters that I don’t know what they are, and the images didn’t show up (because they’re just the file names instead of the address).

To make a web page from scratch using a text editor you need to understand at least a little bit of HTML. Images, links, etc. need to be specified by tags that tell the browser what they are.

Try pasting this into an empty text document and saving it as mypage.html

```auto

<html>
<body>
Hello World
<img src="http://pixelduke.files.wordpress.com/2010/01/jnbdec2008-hello-world-example2.png">
</body>
</html>

```

If you open that file in Safari and see the text “hello world” and a picture that says “hello world” all is well, and the other problems you’re seeing are errors in your HTML code.

---

<div class="post-metadata">

**Author:** ![Senegoid](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/senegoid/32/6606_2.png) [@Senegoid](https://boards.straightdope.com/u/Senegoid)\
**Post date:** [August 8, 2014, 3:55am UTC](https://boards.straightdope.com/t/how-to-make-a-webpage/695078/8 "2014-08-08T03:55:41Z")

</div>

Some operating systems (Windows in particular; I don’t know about any Apple systems)  
go to heroic lengths to hide the file name extensions from the user.

When you open a file like whatever.htm and then try to save it as a .txt file, it  
just _might_ end up being whatever.htm.txt but you don’t see the .txt part.  
Or, depending on the contortions you tried, maybe you now have _whatever.txt.htm_  
which appears as whatever.txt while hiding the .htm – it all depends on how “helpful” :smack:  
your chosen text editor tries to be.

You definitely need to make sure your .htm (or .html) file is a _ **PLAIN TEXT** _  
file, BUT it’s name should end with .htm or .html, not .txt or anything else.

Editors that produce formatted documents like Microsoft Word are NOT what you want,  
unless you are using a WYSIWYG editor that specifically will create HTML documents  
for you (which, by the way, MS Word is able to do).

Here, by the way, is my HTML stub starter-page template:

```auto

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- The head section: -->

  <head>
    <title>xxxxx</title>
  </head>

<!-- The body section: -->

  <body>

    <noscript>
      <h2><font color="red">You probably ought to enable JavaScript!</font></h2>
    </noscript>
    Body text here
  </body>
</html>

```

---

<div class="post-metadata">

**Author:** ![Johnny\_L.A](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/johnny_l.a/32/1084_2.png) [@Johnny\_L.A](https://boards.straightdope.com/u/Johnny_L.A)\
**Post date:** [August 8, 2014, 4:01am UTC](https://boards.straightdope.com/t/how-to-make-a-webpage/695078/9 "2014-08-08T04:01:54Z")

</div>

> [@Crazyhorse](#):
>
> To make a web page from scratch using a text editor you need to understand at least a little bit of HTML. Images, links, etc. need to be specified by tags that tell the browser what they are.
> 
> Try pasting this into an empty text document and saving it as mypage.html
> 
> ```auto
> 
> <html>
> <body>
> Hello World
> <img src="http://pixelduke.files.wordpress.com/2010/01/jnbdec2008-hello-world-example2.png">
> </body>
> </html>
> 
> ```
> 
> If you open that file in Safari and see the text “hello world” and a picture that says “hello world” all is well, and the other problems you’re seeing are errors in your HTML code.

I used to know HTML, but I’ve forgotten it through disuse. I tried your code and it worked. I hypothesised that the weird characters were an artifact from the initial attempt to create the file in Word. I recopied the source code from the existing page into TextEdit, edited it, and renamed to .html. That did the trick. Now I just need to find my FTP application…

---

<div class="post-metadata">

**Author:** ![Ornery\_Bob](https://avatars.discourse-cdn.com/v4/letter/o/da6949/32.png) [@Ornery\_Bob](https://boards.straightdope.com/u/Ornery_Bob)\
**Post date:** [August 8, 2014, 4:03am UTC](https://boards.straightdope.com/t/how-to-make-a-webpage/695078/10 "2014-08-08T04:03:44Z")

</div>

_I copied the source code into a word document and saved it as a .htm file._

This is a mistake and that file is permanently garbage.

Start over and copy the source code into a text editor, NOT a word processor. When you want to see the code, keep it as a .txt file. When you want to see the “web page” rename the file to a .htm or .html extension and open it in a browser.

HTML is plain text.

_the images didn’t show up (because they’re just the file names instead of the address)_

If the image files are stored in the same directory/folder as the page calling them, they don’t need a pathway (address). If they aren’t, they do.

---

<div class="post-metadata">

**Author:** ![Johnny\_L.A](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/johnny_l.a/32/1084_2.png) [@Johnny\_L.A](https://boards.straightdope.com/u/Johnny_L.A)\
**Post date:** [August 8, 2014, 4:05am UTC](https://boards.straightdope.com/t/how-to-make-a-webpage/695078/11 "2014-08-08T04:05:20Z")

</div>

> [@Senegoid](#):
>
> SEditors that produce formatted documents like Microsoft Word are NOT what you want,  
> unless you are using a WYSIWYG editor that specifically will create HTML documents  
> for you (which, by the way, MS Word is able to do).

OK, that brings me to my original quest: To find a program I can make webpages with. Word does it? WYSIWYG is nice. ISTR my old editor from the '90s did that. Once I had the rough page, I’d go into the HTML and edit it to get what I wanted.

I presume Word has a ‘Save as HTML’ option? I haven’t looked. Or, what’s a good program for making webpages?

---

<div class="post-metadata">

**Author:** ![Johnny\_L.A](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/johnny_l.a/32/1084_2.png) [@Johnny\_L.A](https://boards.straightdope.com/u/Johnny_L.A)\
**Post date:** [August 8, 2014, 4:06am UTC](https://boards.straightdope.com/t/how-to-make-a-webpage/695078/12 "2014-08-08T04:06:44Z")

</div>

> [@Ornery\_Bob](#):
>
> If the image files are stored in the same directory/folder as the page calling them, they don’t need a pathway (address). If they aren’t, they do.

I seem to recall that. It doesn’t hurt anything to have the whole URL in it though, does it?

---

<div class="post-metadata">

**Author:** ![Senegoid](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/senegoid/32/6606_2.png) [@Senegoid](https://boards.straightdope.com/u/Senegoid)\
**Post date:** [August 8, 2014, 5:37am UTC](https://boards.straightdope.com/t/how-to-make-a-webpage/695078/13 "2014-08-08T05:37:38Z")

</div>

> [@Johnny\_L.A](#):
>
> I seem to recall that. **It doesn’t hurt anything to have the whole URL in it though, does it?**

If you do that, it becomes a problem if you want to move the entire web site, with all its files, _en masse_ to some other hosting site. You would have to search through all your pages and find every such URL and change them.

If you just use relative file names, you wouldn’t have to do that.

ETA: Creating a web page with MS Word: It’s been a few years (I learned this in a class several years before “the ribbon”): IIRC, you have to poke around the menus; I think you’re looking for something that says “Publish . . .” or “Publish to web . . .” or something like that.

Can someone help here?

---

<div class="post-metadata">

**Author:** ![ZipperJJ](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/zipperjj/32/211_2.png) [@ZipperJJ](https://boards.straightdope.com/u/ZipperJJ)\
**Post date:** [August 8, 2014, 5:17pm UTC](https://boards.straightdope.com/t/how-to-make-a-webpage/695078/14 "2014-08-08T17:17:55Z")

</div>

I think all of us that know how to do it are going to shy away from hand-holding **JLA** through this. I mean, yes it’s easy but I’m guessing most of us couldn’t stand up and teach a class on it.

It’d be like someone asking here how to re-wire a lamp, and they can’t even figure out how to unscrew the lightbulb. From step one it’s just going to be a lot more work from the explain-er than they really want to take on via the Internet.

And I mean no disrespect to\*\* JLA\*\*. He knows I know he’s not an idiot. He just…doesn’t know this thing. I’m hoping he doesn’t think I’m an idiot because I can’t fly a plane!

Anyway,\*\* Johnny\*\*, I suggest you poke around on the Internet and read some tutorials on how to do HTML from scratch. Or even go check out a “Web pages for dummies” book if you’re that kind of learner. W3Schools is a site I often come back to, even after 15+ years in the business. Here’s their [HTML Guide](http://www.w3schools.com/html/).

As for editors…WYSIWYG editors are all kind of shit. It’s just plain hard to make a program make good HTML from a graphical interface. It’s like trying to get Disney animation from Lego. Square peg in a round hole. You’re going to end up with shit HTML and then trying to fix one little thing that you just can’t get to work right which will take a ton of time to fix but wouldn’t have happened in the first place if the editor didn’t mess it up.

So it’s hard for someone who knows actual HTML to suggest a WYSIWYG editor. And I don’t see people that don’t know HTML busting out to suggest one either.

Really, any one you get will be adequate.

FWIW, there are plenty of good-enough sites that use interfaces like Weebly (which is good for product/service sites), WordPress hosted (good for informational sites) and the like. They may look a little cookie-cutter but they also take a lot of the work out of your hands and give you some cool features in return.

So, there’s my contribution.

---

<div class="post-metadata">

**Author:** ![beowulff](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/beowulff/32/542_2.png) [@beowulff](https://boards.straightdope.com/u/beowulff)\
**Post date:** [August 8, 2014, 5:28pm UTC](https://boards.straightdope.com/t/how-to-make-a-webpage/695078/15 "2014-08-08T17:28:47Z")

</div>

OP -  
Use TextWrangler.

---

<div class="post-metadata">

**Author:** ![Reply](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/reply/32/15952_2.png) [@Reply](https://boards.straightdope.com/u/Reply)\
**Post date:** [August 8, 2014, 5:37pm UTC](https://boards.straightdope.com/t/how-to-make-a-webpage/695078/16 "2014-08-08T17:37:25Z")

</div>

Dreamweaver is the standard but it’s very expensive, though you can also subscribe to it on a monthly basis. Here are a bunch of alternatives:

> **[Best free WYSIWYG HTML editors for macOS and Mac OS X](https://appletoolbox.com/best-wysiwyg-html-editors-for-mac-os-x/)**
>
> This article outlines the best WYSIWYG (”What You See Is What You Get”,) web editors for Mac OS X to create web sites without CSS, HTML, coding experiences.

I’d suggest doing what ZipperJJ said, going with somebody like Weebly or (my suggestion) Squarespace or Wordpress. They host it, take care of all the coding, you just drag and drop things and write your content.

There’s no reason to roll your own HTML if you don’t know what you’re doing.

As for:

> [@](#):
>
> I think all of us that know how to do it are going to shy away from hand-holding JLA through this

Wanna trade web lessons for flying lessons? 😃 We could start a mile-high coding club.

---

<div class="post-metadata">

**Author:** ![Claverhouse](https://avatars.discourse-cdn.com/v4/letter/c/13edae/32.png) [@Claverhouse](https://boards.straightdope.com/u/Claverhouse)\
**Post date:** [August 8, 2014, 7:55pm UTC](https://boards.straightdope.com/t/how-to-make-a-webpage/695078/17 "2014-08-08T19:55:24Z")

</div>

> [@Johnny\_L.A](#):
>
> I seem to recall that. It doesn’t hurt anything to have the whole URL in it though, does it?

Always use absolute links.  
The full path points to an unchanging property, relative links break according where directories shift.  
**[Why relative URLs should be forbidden for web developers](https://yoast.com/relative-urls-issues/)**  
**[A link is an absolute link if the URL and file name can be found from anywhere on the Web, not just from a single Web site.](http://compugoddess.com/relative-vs-absolute-links/)**

_We also suggest you link to other pages of your site using absolute, rather than relative, links with the version of the domain you want to be indexed under. For instance, from your home page, rather than link to products.html, link to [http://www.example.com/products.html](http://www.example.com/products.html) . And whenever possible, make sure that other sites are linking to you using the version of the domain name that you prefer_.

**[Google](http://sitemaps.blogspot.co.uk/2006/05/few-questions-from-our-google-group.html)**

---

<div class="post-metadata">

**Author:** ![ZipperJJ](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/zipperjj/32/211_2.png) [@ZipperJJ](https://boards.straightdope.com/u/ZipperJJ)\
**Post date:** [August 8, 2014, 8:17pm UTC](https://boards.straightdope.com/t/how-to-make-a-webpage/695078/18 "2014-08-08T20:17:07Z")

</div>

Fun times, but it’s not really helpful for a guy who’s planning to develop a static HTML site on his computer.

If shit’s not relative, every time he clicks a link on his site, locally, it’ll take him to the Web version. And that will get old quick.

Don’t try to confuse a newbie with “rank me one thousandth of a percent higher!” coding “must-dos” decided on by SEO managers.

A good suggestion would be “use relative links, keep your directories organized, and keep your code organized so that you don’t mess up relative links.” Or don’t use directories because…why do you need directories?

Then once you’re in the big time and using dynamic code and you’ve done all you possibly can to make the code good AND spider-able, then you go ahead and make all your links absolute.

---

<div class="post-metadata">

**Author:** ![Claverhouse](https://avatars.discourse-cdn.com/v4/letter/c/13edae/32.png) [@Claverhouse](https://boards.straightdope.com/u/Claverhouse)\
**Post date:** [August 8, 2014, 8:55pm UTC](https://boards.straightdope.com/t/how-to-make-a-webpage/695078/19 "2014-08-08T20:55:28Z")

</div>

> [@ZipperJJ](#):
>
> If shit’s not relative, every time he clicks a link on his site, locally, it’ll take him to the Web version. And that will get old quick.

Since it’s going to be published and hosted, one may as well do it right in the first place.

And once it’s FTPed up there asap there will be no reason to work on a local version.

> [@](#):
>
> Don’t try to confuse a newbie with “rank me one thousandth of a percent higher!” coding “must-dos” decided on by SEO managers.

I despise SEO as well as the next man, but whatever Google’s faults I doubt they are describing best practice so as to game their own system.

> [@](#):
>
> A good suggestion would be “use relative links, keep your directories organized, and keep your code organized so that you don’t mess up relative links.” Or don’t use directories because…why do you need directories?

Directories are good. They enable separation of types of resources instead of throwing everything up in one big scatterbox. To some extent they enable domain-sharding, which is not ideal ( although better than the ghastly CDN craze of pulling elements from all over the web ), but if an element goes bad, and I’ve had that with audio/video etc., it’s easier to replace if there’s a place where it must be.  
WordPress is fine ( or was, like everything else due to fashion it’s simultaneously getting too complicated and too minimalistic ) but adding an image with their upload system has many problems, whereas oldschool adding an absolute path to an image in a directories still works absolutely. Plus centering just works.

---

<div class="post-metadata">

**Author:** ![Voyager](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/voyager/32/133_2.png) [@Voyager](https://boards.straightdope.com/u/Voyager)\
**Post date:** [August 8, 2014, 9:27pm UTC](https://boards.straightdope.com/t/how-to-make-a-webpage/695078/20 "2014-08-08T21:27:58Z")

</div>

> [@Johnny\_L.A](#):
>
> OK, that brings me to my original quest: To find a program I can make webpages with. Word does it? WYSIWYG is nice. ISTR my old editor from the '90s did that. Once I had the rough page, I’d go into the HTML and edit it to get what I wanted.
> 
> I presume Word has a ‘Save as HTML’ option? I haven’t looked. Or, what’s a good program for making webpages?

I agree with everyone not to use Word, but it does have a save as html option. In fact several. You can save it as a single page, or as a page and a subdirectory with stuff like graphics files. In fact the best way to extract an image from a word file is to save it as html,. and then find the image in a subdirectory Word creates.

[Next page](https://boards.straightdope.com/t/how-to-make-a-webpage/695078.md?page=2)