# HTML Document on a Mac

**URL:** <https://forum.kirupa.com/t/html-document-on-a-mac/643538>\
**Category:** Uncategorized\
**Created:** [July 12, 2020, 4:50pm UTC](https://forum.kirupa.com/t/html-document-on-a-mac/643538 "2020-07-12T16:50:07Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [July 12, 2020, 4:50pm UTC](https://forum.kirupa.com/t/html-document-on-a-mac/643538/1 "2020-07-12T16:50:07Z")

</div>

Before I buy the book - I would like to make certain that I can use it on my iMac. So I am quoting the following from the sample version of the book that shows in iBooks -

The first thing that you need is an HTML document. This document will host the JavaScript that you will be writing.

So is this HTML document something that I can create on my iMac? There aren’t any instructions as to how I might be able to do this so I’m a bit apprehensive that I’ll purchase the book and then not be able to use it because I can’t create this HTML on my iMac. Please assuage my fears that the book is compatible with the iMac.

---

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [July 12, 2020, 6:21pm UTC](https://forum.kirupa.com/t/html-document-on-a-mac/643538/2 "2020-07-12T18:21:02Z")

</div>

Hey John, you can do everything in the book on your iMac. Kirupa put together a list of apps you can use to make HTML documents here:

> [@Collection of Resources for using IDEs for Web Development](http://forum.kirupa.com/t/collection-of-resources-for-using-ides-for-web-development/635752):
>
> Hi, everyone! I realized there is always a shortage of resources around using IDEs for web development. I figured, we can use this thread to collect informative videos and articles that you all may find useful slight_smile[Using VS Code for Web App Development](https://www.youtube.com/watch?v=DmbvejtiyNo&list=PLNVjvTjIY2geo3BrTxA_YqL57P-Jxf9Nr)[Atom Editor Tutorials](https://www.youtube.com/watch?v=WWwBQQOGllo&list=PLYzJdSdNWNqwNWlxz7bvu-lOYR0CFWQ4I)[Setting up Atom for Web Development](https://www.youtube.com/watch?v=T1cA4rSIhHE)[Web Development in Visual Studio 2015](https://www.youtube.com/watch?v=0eSzTn_2IZ4&list=PLReL099Y5nRcqYlmn8HYh9FTVY2is7UpK)[Brackets](https://code.tutsplus.com/tutorials/deeper-in-the-brackets-editor--net-35527) ([Videos](https://www.youtube.com/playlist?list=PL_VA_vL3FHcZxaB36NcOtQIWqz7bXKWLo)) [Pinegrow](https://pinegrow.com/pinegrow3.html) ([It also works with Atom](https://pinegrow.com/pinegrow-atom.html)) [Tandem UI Builder](http://tandemcode.com/) If you have additional resources, post them b…

All of those are free, but if you want to stick to just apps from Apple, you could follow along with Xcode, TextEdit, or Terminal.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [July 12, 2020, 6:54pm UTC](https://forum.kirupa.com/t/html-document-on-a-mac/643538/3 "2020-07-12T18:54:46Z")

</div>

To add to what Kril mentions, this article will help you to create a HTML document: [https://www.kirupa.com/html5/getting\_your\_feet\_wet\_html5.htm](https://www.kirupa.com/html5/getting_your_feet_wet_html5.htm)

The editor I am using is Visual Studio Code, but you can use any editor. The main thing to make sure is that you save your files with the extension .htm or .html. That extension tells macOS to open that file in your browser when you try to open it 🙂

Let us know if you have any additional questions!

Cheers,  
Kirupa

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [July 13, 2020, 3:34pm UTC](https://forum.kirupa.com/t/html-document-on-a-mac/643538/4 "2020-07-13T15:34:16Z")

</div>

Thanks for the speedy responses from both of you. It’s reassuring to know that I’ll be able to implement code on the Mac. I’m going to start off with the “getting your feet wet” link and see if I have the wherewithal to get the final result in the tutorial.

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [July 14, 2020, 2:13pm UTC](https://forum.kirupa.com/t/html-document-on-a-mac/643538/5 "2020-07-14T14:13:56Z")

</div>

![Screen Shot 2020-07-14 at 7.12.21 AM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/8/8d4508820e861f5cd54eb9e8073d248437fccdf4.png)

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [July 14, 2020, 2:19pm UTC](https://forum.kirupa.com/t/html-document-on-a-mac/643538/6 "2020-07-14T14:19:14Z")

</div>

Sorry - I forgot to mention that the above takes place in Visual Studio Code - so when I am asked to - select editor for untitled - 1 - is this where I name the file - hello\_world.htm - as suggested in the tutorial ?

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [July 14, 2020, 4:34pm UTC](https://forum.kirupa.com/t/html-document-on-a-mac/643538/7 "2020-07-14T16:34:16Z")

</div>

This is a fairly new feature and I think confusing, especially if you only have one editor (which you do). Basically it allows you to pick which editor you want to use for new files. Since you only have one (“Text Editor”) thats all you can pick, so the choice is easy for you.

The box to type in is just a filter to help you find more editors if you have more installed.

Normally you wouldn’t see this. For example if you used the keyboard shortcut to make a new file (CTRL/CMD + N) it wouldn’t appear. And if you’re editing existing files, it would automatically choose what’s right for editing that file… though you might see this then if you have multiple editors that support that specific file type. Most of the time, though, you’re just editing text files.

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [July 14, 2020, 5:49pm UTC](https://forum.kirupa.com/t/html-document-on-a-mac/643538/8 "2020-07-14T17:49:31Z")

</div>

Thanks for that speedy response - is Text Editor the same as

 ![Screen Shot 2020-07-14 at 10.47.54 AM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/d/d1f3d6004a0320991a7d0fc9699769089e0def23.png)

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [July 14, 2020, 5:59pm UTC](https://forum.kirupa.com/t/html-document-on-a-mac/643538/10 "2020-07-14T17:59:16Z")

</div>

No, TextEdit is a separate program on your computer. The “editors” in this context (in the context of VS Code, another program on your computer) are internal to the program itself. The program VS Code can internally have different editors for modifying files. The “Text Editor” is the standard editor for editing text files within VS Code.

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [July 14, 2020, 7:06pm UTC](https://forum.kirupa.com/t/html-document-on-a-mac/643538/11 "2020-07-14T19:06:49Z")

</div>

OK - thanks for the detail.
